X-Git-Url: http://www.average.org/gitweb/?p=mkgallery.git;a=blobdiff_plain;f=include%2Foverlay.js;fp=include%2Foverlay.js;h=432a0763790766ca23f67193b61e1df56024d594;hp=0000000000000000000000000000000000000000;hb=e04e3b035dbc99e57bd2b37fb68696718a825297;hpb=a01bd7a3ca127d89ae4a2d55c289c0c13ae70693

diff --git a/include/overlay.js b/include/overlay.js
new file mode 100644
index 0000000..432a076
--- /dev/null
+++ b/include/overlay.js
@@ -0,0 +1,100 @@
+
+/**************************************************************
+
+	Script		: Overlay
+	Version		: 1.2
+	Authors		: Samuel birch
+	Desc		: Covers the window with a semi-transparent layer.
+	Licence		: Open Source MIT Licence
+
+**************************************************************/
+
+var Overlay = new Class({
+	
+	getOptions: function(){
+		return {
+			colour: '#000',
+			opacity: 0.7,
+			zIndex: 1,
+			container: document.body,
+			onClick: Class.empty
+		};
+	},
+
+	initialize: function(options){
+		this.setOptions(this.getOptions(), options);
+		
+		this.options.container = $(this.options.container);
+		
+		this.container = new Element('div').setProperty('id', 'OverlayContainer').setStyles({
+			position: 'absolute',
+			left: '0px',
+			top: '0px',
+			width: '100%',
+			zIndex: this.options.zIndex
+		}).injectInside(this.options.container);
+		
+		this.iframe = new Element('iframe').setProperties({
+			'id': 'OverlayIframe',
+			'name': 'OverlayIframe',
+			'src': 'javascript:void(0);',
+			'frameborder': 1,
+			'scrolling': 'no'
+		}).setStyles({
+			'position': 'absolute',
+			'top': 0,
+			'left': 0,
+			'width': '100%',
+			'height': '100%',
+			'filter': 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)',
+			'opacity': 0,
+			'zIndex': 1
+		}).injectInside(this.container);
+		
+		this.overlay = new Element('div').setProperty('id', 'Overlay').setStyles({
+			position: 'absolute',
+			left: '0px',
+			top: '0px',
+			width: '100%',
+			height: '100%',
+			zIndex: 2,
+			backgroundColor: this.options.colour
+		}).injectInside(this.container);
+		
+		this.container.addEvent('click', function(){
+			this.options.onClick();
+		}.bind(this));
+		
+		this.fade = new Fx.Tween(this.container, 'opacity').set(0);
+		this.position();
+		
+		window.addEvent('resize', this.position.bind(this));
+	},
+	
+	position: function(){ 
+		if(this.options.container == document.body){ 
+			var h = window.getScrollHeight()+'px'; 
+			this.container.setStyles({top: '0px', height: h}); 
+		}else{ 
+			var myCoords = this.options.container.getCoordinates(); 
+			this.container.setStyles({
+				top: myCoords.top+'px', 
+				height: myCoords.height+'px', 
+				left: myCoords.left+'px', 
+				width: myCoords.width+'px'
+			}); 
+		} 
+	},
+	
+	show: function(){
+		this.fade.start(0,this.options.opacity);
+	},
+	
+	hide: function(){
+		this.fade.start(this.options.opacity,0);
+	}
+	
+});
+Overlay.implement(new Options);
+
+/*************************************************************/