/************************************************************** Script : Overlay Version : 2.0 Authors : Samuel Birch Desc : Covers the window with a semi-transparent layer. Licence : Open Source MIT Licence Modified : Liam Smart (liam_smart@hotmail.com) - MooTools 1.2 upgrade **************************************************************/ //start overlay class var Overlay = new Class({ //implements Implements: [Options], //options options:{ colour: '#ffffff', opacity: 0.9, zIndex: 10000001, onClick: new Class() }, //initialization initialize: function(options) { //set options this.setOptions(options); //start building overlay this.container = new Element('div').setProperty('id','OverlayContainer').setStyles({ position: 'absolute', left: 0, top: 0, width: '100%', visibility: 'hidden', overflow: 'hidden', zIndex: this.options.zIndex, opacity: 0 }).inject(this.options.container,'inside'); this.iframe = new Element('iframe').setProperties({ id: 'OverlayIframe', name: 'OverlayIframe', src: 'javascript:void(0);', frameborder: 0, 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: 101 }).inject(this.container,'inside'); this.overlay = new Element('div').setProperty('id','Overlay').setStyles({ position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', zIndex: 102, backgroundColor: this.options.colour }).inject(this.container,'inside'); this.container.addEvent('click', function(){ this.options.onClick(); }.bind(this)); this.fade = new Fx.Morph(this.container); this.position(); window.addEvent('resize',this.position.bind(this)); }, position: function() { this.container.setStyle('height',0);//reset container height ready for resize if(this.options.container == document.body) { if(this.options.container.getSize().y >= this.options.container.getScrollSize().y) { this.container.setStyles({ width: window.getSize().x, height: window.getSize().y }); } else { this.container.setStyles({ width: window.getSize().x, height: window.getScrollSize().y }); }; } else { var myCoords = this.options.container.getCoordinates(); this.container.setStyles({ top: myCoords.top, height: myCoords.height, left: myCoords.left, width: myCoords.width }); }; }, show: function() { this.container.tween('opacity', this.options.opacity); document.body.addClass('body-overlayed'); return this; }, hide: function() { this.container.tween('opacity', this.container.get('opacity'),0); return this; } });