$(document).ready(function(){
	
	/* IE6 Add support to rollover stage to the div and not to the anchor
	*	Google: Son of Sucker Fish for details*/
	sfHover = function() {
		var sfEls = document.getElementById("nav").getElementsByTagName("LI");
		for (var i=0; i<sfEls.length; i++) {
			sfEls[i].onmouseover=function() {
				this.className+=" sfhover";
			}
			sfEls[i].onmouseout=function() {
				this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
			}
		}
	}
	if (window.attachEvent) window.attachEvent("onload", sfHover);


	/* Drop down of the top menu */
	$("ul#nav li").find("ul").slideUp("fast");
	$("ul#nav li").hover(
		function() {
			$(this).find("ul").slideDown("fast"); 
		},
		function() { 
			$(this).find("ul").slideUp("fast"); 
		}
	);
	
	/* Main Area Slider */
	$("#browsable").scrollable({initialIndex:1}).navigator({navi: "#videos",naviItem: 'li',activeClass: 'current'});
	
	/* Global Variables */
	var kind = "";
	var ext  = "";
	var html5 = "n"; 
	var base = "http://" + window.location.hostname + "/assets/videos/";
	var div = "";
	var videos = "";
	
	/* Global Selectors */
	window.$foo = {
		box : $('li.video'),
		ceo : $('#ceo'),
		team : $('#team'),
		map : $('#map'),
		sta : $('#status'),
		vid : $('#videoPlayer').get(0)
	};
	
	/**
	* Check if browser support HTML5 video
	*
	*/
	if ($foo.vid.canPlayType) {
		 //Browser can play HTML5 video 
		 html5 = 'y';
		 
		 // find the file format the browser can play 
		 var mp4 = $foo.vid.canPlayType('video/mp4');
		 var webm= $foo.vid.canPlayType('video/webm; codecs="vp8, vorbis"');
		 var ogv = $foo.vid.canPlayType('video/ogg; codecs="theora, vorbis"');
		 
		 // set the kind, file extension, and the type of video the browser can play 
		 if( (navigator.userAgent.match(/iPad/i)) || (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) ){kind = "ipod"; ext = 'mp4';  type = 'mp4';}
		 else if (mp4 != ""  && mp4  != "no"){kind = 'x264'; ext = 'mp4';  type = 'mp4';}
		 else if (webm != "" && webm != "no"){kind = 'webm'; ext = 'webm'; type = "webm";}
		 //else if (ogv != ""  && ogv  != "no"){kind = 'ogv';  ext = 'ogv';  type = "ogg";}
	}
	
	/**
	* Event Listener to the the three boxes below the main area 
	*
	*/
	$foo.box.click(function() {
		if (videos != ""){
			videos.pause();
		}
		
		$foo.ceo.html('');
		$foo.team.html('');
		div = "";
		return false;
	});
	
	/**
	* Add Video player to the selected div
	*
	* If Browser supports HTML  add the video tag else fallback to flash player
	*/
	function swapVideo(movieid, divId)
	{
		var id = '#'+divId;
		var videolink = base+movieid+'.'+ext;
		
		if (html5 == 'y'){
			// browser supports HTML5 Video tag
			$(id).show("slow"); 
			$(id).html('<div id="VideoArea" style="border: 0;"><video src='+videolink+' id="videoPlayer2" class="video-js" style="margin: 30px 0 0 230px;" width="480" height="270" controls="controls" preload="auto" poster="'+base+'newfieldPoster.png"></div>');
			videos = $('#videoPlayer2').get(0);
			videos.play();
			
			// fallback to flash player
		}else if (html5 == 'n'){
			var videolink = base+movieid+'.mp4';
			var vidFlashPlayer = '<div id="VideoArea" style="border: 0;">' +  
									'<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->' + 
									'<object id="flash_fallback_1" class="vjs-flash-fallback" width="480" height="270" style="margin: 30px 0 0 230px;" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">' +
									'<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />' + 
									'<param name="allowfullscreen" value="false" />' + 
									'<param name="wmode" value="transparent" />' +
									'<param name="flashvars" value=\'config={"clip":{"url":"'+videolink+'","autoPlay":true,"autoBuffering":true}}\' />' +
									'<!-- Image Fallback. Typically the same as the poster image. -->' + 
									'<img src="'+base+'newfieldPoster.png" width="480" height="270" alt="Poster Image" title="No video playback capabilities." />' + 
									'</object>' + 
									'</div><!-- End VideoArea -->';
			$(id).html(vidFlashPlayer);
		}
	}
	
	
	/**
	* Event listener to the div team 
	* 
	*/
	$('#team').click(function(){
		if(div != "team") {
			var selectedVideo = $(this).attr('rel');
			var divId = $(this).attr('id');
			swapVideo(selectedVideo, divId);
			div = "team";
			return false;
		}
	});
	
	/**
	* Event listener to the div ceo 
	* 
	*/
	$('#ceo').click(function(){
		if(div != "ceo") {
			var selectedVideo = $(this).attr('rel');
			var divId = $(this).attr('id');
			swapVideo(selectedVideo, divId);
			div = "ceo";
			
			return false;
		}
	});

});