/*
	VideoBox.js - 0.6
	----------------------
	Author: Andreas Norman (www.subzane.com)
	Project URL: http://code.google.com/p/ajax-videobox/
	
	Description
  	Creates a lightbox-like box for youtube videos. It scannes links for rel="videobox" and replaces them with 
		a javascript method to open up the VideoBox

	Background
		Wanted a function for some time, ad found one based on mootools. However this didn't 
		work well for me together with Lightbox2. So I wanted one also created with scriptaculous. 
		There was none, so I wrote my own based on the Lightbox2 code.
		
	Credits
		Lokesh Dhakar for writing Lightbox2
		
	Todo
		- Support for more video sites like veoh, revver etc.
		-	Grouping support with next/prev buttons, just like in Lightbox2
		-	Include title, close button and other meta information.
		
	Changes
		Version 0.6 - Beta
			- Fixed issue with not working at all in Internet Explorer.
		
		Version 0.5 - Initial Release
		
	Usage
		<a rel="videobox" href="http://www.youtube.com/?v=addXg-iDSfc">My Video</a>
*/

var videoWidth = 853;
var videoHeight = 505;

var VideoBox = new Class ({
	
	initialize: function() {
		if (!document.getElementsByTagName){ return; }
		var anchors = document.getElementsByTagName('a');

		// loop through all anchor tags
		for (var i=0; i<anchors.length; i++){
			var anchor = anchors[i];
			
			var relAttribute = String(anchor.getAttribute('rel'));
			// use the string.match() method to catch 'videobox' references in the rel attribute
			if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('videobox'))){
				anchor.onclick = function () {myVideoBox.start(this); return false;}
			}
		}

		var objBody = document.getElementsByTagName("body").item(0);
		
		var objOverlay = document.createElement("div");
		objOverlay.setAttribute('id','video_overlay');
		objOverlay.style.display = 'none';
		objOverlay.onclick = function() { myVideoBox.end(); return false; }
		objBody.appendChild(objOverlay);
		
		var objLightbox = document.createElement("div");
		objLightbox.setAttribute('id','video_lightbox');
		objLightbox.setAttribute('class', 'black_overlay');
		objLightbox.style.display = 'none';
		objLightbox.onclick = function() {	// close Lightbox is user clicks shadow overlay
			if (!e) var e = window.event;
			var clickObj = Event.element(e).id;
			if ( clickObj == 'vi deo_lightbox') {
				myVideoBox.end();
			}
		}
		
		var objFlashdiv = document.createElement("div");
		objFlashdiv.setAttribute('id', 'videobox_flashcontent');
		
		objLightbox.appendChild(objFlashdiv);
		objBody.appendChild(objLightbox);

	},


	start: function(videolink) {
		var url = videolink.getAttribute('href').replace("?v=", "v/");
		this.hideSelectBoxes();

		var arrayPageSize = this.getPageSize();
		var arrayPageScroll = this.getPageScroll();
		
		$('video_overlay').style.height = arrayPageSize[1] +"px";

		var lightboxTop = (arrayPageScroll[1] + ((arrayPageSize[3] - 35 - videoHeight) / 2) + 'px');
		var lightboxLeft = (((arrayPageSize[0] - 20 - videoWidth) / 2) + 'px');

		$('video_lightbox').style.top = lightboxTop;
		var div = $('video_overlay').setStyles({
			display:'block',
			opacity: 0
		});
		new Fx.Style(div, 'opacity', {duration: 1000} ).start(1);

		var div = $('video_lightbox').setStyles({
			display:'block',
			opacity: 0
		});
		new Fx.Style(div, 'opacity', {duration: 1000} ).start(1);

		this.showVideo(url);

		$('video_lightbox').innerHTML += '<div id="lbBottom">' +
											'<div id="lbCloseLink" onclick="myVideoBox.end(); return false;" style="background: url(assets/snippets/maxigallery/slimbox/images/closelabel.gif) no-repeat center center; cursor: pointer"></div>' + 
											'<div id="lbCaption">' + videolink.getAttribute('title') + '</div>' +
											'<div style="clear: both;"/>' +
										'</div>';
	},
	
	showVideo: function(videourl) {
		var so = new SWFObject(videourl, "flvvideo", videoWidth, videoHeight, "0");
		so.write("videobox_flashcontent");
	},
	
	end: function() {
		var div = $('video_overlay').setStyles({
			//display:'none',
			opacity: 1
		});
		new Fx.Style(div, 'opacity', {duration: 1000} ).start(0);

		var div = $('video_lightbox').setStyles({
			//display:'none',
			opacity: 1
		});
		new Fx.Style(div, 'opacity', {duration: 1000} ).start(0);

		$('video_lightbox').innerHTML = '';
		var myDiv = new Element('div');
		myDiv.id = 'videobox_flashcontent';
		$('video_lightbox').appendChild(myDiv);
		this.showSelectBoxes();
	},


	showSelectBoxes: function(){
		selects = document.getElementsByTagName("select");
		for (i = 0; i != selects.length; i++) {
			selects[i].style.visibility = "visible";
		}
	},

	hideSelectBoxes: function(){
		selects = document.getElementsByTagName("select");
		for (i = 0; i != selects.length; i++) {
			selects[i].style.visibility = "hidden";
		}
	},
	
	hideFlashObjects: function(){
		embeds = document.getElementsByTagName("embed");
		for (i = 0; i != embeds.length; i++) {
			embeds[i].style.visibility = "hidden";
		}
		objects = document.getElementsByTagName("object");
		for (i = 0; i != objects.length; i++) {
			objects[i].style.visibility = "hidden";
		}
	},

	showFlashObjects: function(){
		embeds = document.getElementsByTagName("embed");
		for (i = 0; i != embeds.length; i++) {
			embeds[i].style.visibility = "visible";
		}
		objects = document.getElementsByTagName("object");
		for (i = 0; i != objects.length; i++) {
			objects[i].style.visibility = "visible";
		}
	},

	getPageScroll: function(){

		var yScroll;

		if (self.pageYOffset) {
			yScroll = self.pageYOffset;
		} else if (document.documentElement && document.documentElement.scrollTop){	 // Explorer 6 Strict
			yScroll = document.documentElement.scrollTop;
		} else if (document.body) {// all other Explorers
			yScroll = document.body.scrollTop;
		}

		arrayPageScroll = new Array('',yScroll) 
		return arrayPageScroll;
	},

	getPageSize: function(){

		var xScroll, yScroll;

		if (window.innerHeight && window.scrollMaxY) {	
			xScroll = document.body.scrollWidth;
			yScroll = window.innerHeight + window.scrollMaxY;
		} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
			xScroll = document.body.scrollWidth;
			yScroll = document.body.scrollHeight;
		} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
			xScroll = document.body.offsetWidth;
			yScroll = document.body.offsetHeight;
		}

		var windowWidth, windowHeight;
		if (self.innerHeight) {	// all except Explorer
			windowWidth = self.innerWidth;
			windowHeight = self.innerHeight;
		} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
			windowWidth = document.documentElement.clientWidth;
			windowHeight = document.documentElement.clientHeight;
		} else if (document.body) { // other Explorers
			windowWidth = document.body.clientWidth;
			windowHeight = document.body.clientHeight;
		}	

		// for small pages with total height less then height of the viewport
		if(yScroll < windowHeight){
			pageHeight = windowHeight;
		} else { 
			pageHeight = yScroll;
		}

		// for small pages with total width less then width of the viewport
		if(xScroll < windowWidth){	
			pageWidth = windowWidth;
		} else {
			pageWidth = xScroll;
		}


		arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
		return arrayPageSize;
	}

});

function initVideoBox() { myVideoBox = new VideoBox(); }

// depends on loader.js being referenced first
addLoadEvent(function() {
	initVideoBox();
})