/*
 * VideoLightBox
 * Original Author - Nicholas Ortenzio
 * Last Updated - 2010/06/16
 *
 * Requires Prototype & Scriptaculous (effects.js)

   Useage: There are 3 configurable settings available for
   the overlay. They are

       enabled (true|false) : set this to "false" if you want to disable the
                              video overlay. other it should be set to "true"

       showOnLoadRepeatDelay : the amount of time in minutes between when the
                               user is automatically shown the video on page
                               load. Set this to "0" if you want to disable
                               showing  the video on page load

       anchorClass : give an anchor tag a class name with this value to 
                     initiate the video overlay from and onclick event.
                     sample usage below

      <a href="#" class="vlb_toggle">Click here to launch the video</a>

 */

var VideoLightBox = Class.create({

	/*** DETECT IE6 ***/
	isIE6 : function() {
		return Prototype.Browser.IE && parseInt(navigator.userAgent.substring(navigator.userAgent.indexOf("MSIE")+5)) == 6;
	},

	/*** CONSTRUCTOR ***/

	initialize : function(base) {
		this.vlb = base;
		this.parseOptions();
		if (!this.options.enabled) { return; }
		this.initOverlayDom();
		this.initBehavior();
	},


	/*** INITALIZATION ***/

	parseOptions : function() {
		this.options = {
			enabled : true,
			showOnLoadRepeatDelay : 5,
			anchorClass : 'vlb' 
		};
		for (var x in this.options) { this.options[x] = this.vlb.readAttribute(x) || this.options[x]; }
		this.options.enabled = (this.options.enabled=="true");
		this.options.showOnLoadRepeatDelay = parseInt(this.options.showOnLoadRepeatDelay, 10)
	},

	initOverlayDom : function() {
		this.createIframe();
		this.createMask();
		this.createOverlay();
	},

	createOverlay : function() {	
		this.vlb.setStyle(this.styles.media).hide();

		if (this.isIE6()) this.vlb.setStyle({position:'absolute'});

		this.vlb.insert('<div id="vlb_close_button"></div>');
		this.close = $('vlb_close_button').setStyle(this.styles.close).observe('click', this.closeOverlay.bind(this));
		$$('.'+this.options.anchorClass).each(function(n) { n.observe('click', this.openOverlay.bind(this)) }.bind(this));
	},

	createIframe : function() {
		this.ifr = this.vlb.down('iframe');
		this.src = this.ifr.readAttribute('src');
		Object.extend(this.styles.media, { 
			height : this.ifr.readAttribute('height')+'px', 
			width : this.ifr.readAttribute('width')+'px',
			left : (document.viewport.getWidth()-this.ifr.readAttribute('width')) / 2 + 'px'
		})

		if (this.isIE6()) return;
		Event.observe(window, 'resize', this.positionOverlay.bind(this));	
	},

	createMask : function() {
		if (this.isIE6()) return;

		this.mask = new Element('div', {id:'vlb_overlay_mask'}).setStyle(this.styles.mask);
		$(document.body).insert(this.mask);
		this.mask.hide().observe('click', this.closeOverlay.bind(this));
	},

	initBehavior : function() {
		if ((this.options.showOnLoadRepeatDelay>0) && (GetCookie('vlbHasSeenVideo')=='1')) return; 
		this.openOverlay();
	},
	
	/*** METHODS ***/

	openOverlay : function(e) {

		if (this.options.showOnLoadRepeatDelay>0) {
			var expires = new Date();
			expires.setMinutes(expires.getMinutes()+this.options.showOnLoadRepeatDelay);
			SetCookie("vlbHasSeenVideo", "1", expires);
		}

		if (this.mask) {
			this.mask.appear({duration:.5, to:this.styles.mask.opacity, afterFinish:function(){
				this.vlb.setStyle({display:'block'});
			}.bind(this)}) 
		} else {
			this.vlb.setStyle({display:'block'});
		}
	},

	closeOverlay : function() { 
		this.ifr.writeAttribute('src', '');
		this.ifr.writeAttribute('src', this.src);
		this.vlb.setStyle({display: 'none'}); 
		
		if (!this.mask) return;
		this.mask.fade({duration:.5 }); 
	},
	
	positionOverlay : function() {
		this.vlb.setStyle({left:(document.viewport.getWidth()-this.ifr.readAttribute('width')) / 2 + 'px'});
	},

	/*** DEFAULT STYLES ***/

	styles : {
		mask : {
			position 	: 'fixed',
			height 		: '100%',
			width 		: '100%',
			display		: 'block',
			top 			: '0px',
			left 			: '0px',
			opacity 		: .5,
			background	: '#000',
			zIndex		: 9999
		},
		media : {
			position		: 'fixed',
			zIndex		: 10000,
			top			: '50px'
		},
		close : {
			position		: 'absolute',
			top 			: '-25px',
			right			: '-25px',
			height		: '36px',
			width			: '36px',
			background	: 'url(/.element/img/1.1/vlb/vlb_close.png)',
			cursor		: 'pointer'
		}
	}

});

document.observe('dom:loaded', function(){ new VideoLightBox($('vlb')); })