///**************************************************************

//	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.Style(this.container, 'opacity').set(0);
		//$(this.container).setStyles({'opacity':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);
		//$(this.container).morph({'opacity': [0, this.options.opacity]});
	},
	
	hide: function(){
		this.fade.start(this.options.opacity,0);
		//$(this.container).morph({'opacity': [this.options.opacity, 0]});
	}
	
});
Overlay.implement(new Options);

/*************************************************************/

///**************************************************************
// 
//    Script      : Overlay
//    Version     : 2.0.1
//    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: '#000',//background color of overlay
//        opacity: 0.8,//opacity of overlay
//        zIndex: 100,//the z-index of the overlay (needs to lower than multiBox pop-up)
//        onClick: new Class(),//make sure new class is loaded
//    },
// 
//    //initialization
//    initialize: function(options){
//        //set options
//        this.setOptions(options);
//        //start building overlay
//        this.container = new Element('div', {
//            'id': 'OverlayContainer',
//            'styles': {
//                position: 'absolute',
//                left: 0,
//                top: 0,
//                width: '100%',
//                height: '100%',
//                visibility: 'hidden',
//                overflow: 'hidden',
//                zIndex: this.options.zIndex,
//                opacity: 0
//            }
//        }).inject(this.options.container,'inside');
//       
//        this.iframe = new Element('iframe', {
//            'id': 'OverlayIframe',
//            'name': 'OverlayIframe',
//            'src': 'javascript:void(0);',
//            'frameborder': 0,
//            'scrolling': 'yes',
//            'styles': {
//                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', {
//            'id': 'Overlay',
//            'styles': {
//                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.getHeight() >= this.options.container.getScrollHeight()){
//                this.container.setStyles({
//                    width: window.getWidth(),
//                    height: window.getHeight()
//                });
//            }else{
//                this.container.setStyles({
//                    width: window.getWidth(),
//                    height: window.getScrollHeight()
//                   
//                });
//            };
//        }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.fade.start({
//            visibility: 'visible',
//            opacity: this.options.opacity
//        }).chain(function() {
//            visibility: 'hidden'
//        });
//       
//    },
//   
// 
//    hide: function(){
//        this.fade.start({
//            opacity: 0
//        }).chain(function() {
//            visibility: 'hidden'
//        });
//    }
//});