/*
	Ajax.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 = 425;
var videoHeight = 355;

Ajax.VideoBox = Class.create();
Ajax.VideoBox.prototype = {
	
	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.style.display = 'none';
		objLightbox.onclick = function(e) {	// close Lightbox is user clicks shadow overlay
			if (!e) var e = window.event;
			var clickObj = Event.element(e).id;
			if ( clickObj == 'video_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";
		new Effect.Appear('video_overlay', { duration: 0.2, from: 0.0, to: 0.8 });

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

		$('video_lightbox').style.top = lightboxTop;
		//$('video_lightbox').style.left = lightboxLeft;
		$('video_lightbox').style.display = 'block';
  	
		Element.show('video_lightbox');
		
		this.showVideo(url);
	},
	
	showVideo: function(videourl) {
		var so = new SWFObject(videourl, "flvvideo", videoWidth, videoHeight, "0");
		so.write("videobox_flashcontent");
	},
	
	end: function() {
		Element.hide('video_lightbox');
		new Effect.Fade('video_overlay', { duration: 0.2});
		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 Ajax.VideoBox(); }
Event.observe(window, 'load', initVideoBox, false);