﻿$(document).ready(function(){
	
$("li.architectVideoItem").click(function(event){
	//alert($(this).attr("href"));

	var videoUrl = $(this).attr("videopath");
	var videoDescription = $(this).find(".architectCopy p").html();
	var currentItem = $(this);

	event.preventDefault();
	
	// Add opacity overlay
	var overlay = $('<div id="architect-overlay"></div>');
	// Set overlay width and height based on current browser dimensions
	var cssObj = {
		width: $(document).width(),
		height: $(document).height(),
		backgroundColor: "rgb(0, 0, 0)",
		opacity: 0
	};
	$(overlay).css(cssObj);
	$("body").append(overlay);
	
	// Fade overlay in
	// Once its faded in add videoplayer div
	$(overlay).fadeTo("fast", 0.8, function(){
	
		// Add video player
		var videoplayer = $('<div id="architect-videoplayer"><div id="architect-videoplayer-container"><div id="architect-videoplayer-top"></div><div id="architect-videoplayer-middle"></div><div id="architect-videoplayer-bottom"></div><div id="architect-videoplayer-close"></div></div></div>');
		var videoCssObj = {
			//opacity: 0,
			top: $(document).scrollTop() + 100,
			left: Math.round(($(document).width() - 398) / 2),
			display: "none"
		};
		$(videoplayer).css(videoCssObj);		
		
		// Add Description
		var videoDescriptionDiv = '<div id="architect-videoplayer-description">' + videoDescription + '</div>';
		$(videoplayer).find("#architect-videoplayer-middle").append(videoDescriptionDiv);
		
		// Add Video player DIV
		var videoPlayerDiv = '<div id="architect-videoplayer-player"><div id="architectVideoPlayerObj"></div></div>';
		$(videoplayer).find("#architect-videoplayer-middle").append(videoPlayerDiv);
		
		// Add videoplayer to page
		$("body").append(videoplayer);
		
		// Add Next / Previous vids		
		var videoSelectorDiv = $('<div id="architect-videoplayer-selector"><div id="previousVideo"></div><div id="nextVideo"></div><div class="clear"></div></div>');
		
		// Get current video index and count of videos
		var currentItemIndex = ($("li.architectVideoItem").index(currentItem));
		var videoItemCount = $("li.architectVideoItem").length;
		
		// Previous Item
		//var prevItem = $(currentItem).prev();
		//if($(prevItem).attr("videoPath") != undefined){
		if((currentItemIndex - 1) >= 0) {
			var prevItem = $("li.architectVideoItem").get(currentItemIndex - 1);
			//alert($(prevItem).attr("videoPath"));
			var prevItemContent = '<div class="selectorDescription" videoindex="' + (currentItemIndex - 1) + '">' + $(prevItem).find(".architectCopy p").html() + '</div><div class="selectorThumbnail">' + $(prevItem).find(".architectThumb").html() + '</div>';
			$(videoSelectorDiv).find("#previousVideo").append(prevItemContent);
			//
			$(videoSelectorDiv).find("#previousVideo").click(swapVideo);
		}
		
		// Next Item
		//var nextItem = $(currentItem).next();
		//if($(nextItem).attr("videoPath") != undefined){
		if((currentItemIndex + 1) < videoItemCount){
			var nextItem = $("li.architectVideoItem").get(currentItemIndex + 1);
			//alert($(prevItem).attr("videoPath"));
			var nextItemContent = '<div class="selectorDescription" videoindex="' + (currentItemIndex + 1) + '">' + $(nextItem).find(".architectCopy p").html() + '</div><div class="selectorThumbnail">' + $(nextItem).find(".architectThumb").html() + '</div>';
			$(videoSelectorDiv).find("#nextVideo").append(nextItemContent);
			//
			$(videoSelectorDiv).find("#nextVideo").click(swapVideo);
		}
		
		// Truncate the text if its too long
		$(videoSelectorDiv).find(".selectorDescription").truncate(90);
		
		$(videoplayer).find("#architect-videoplayer-middle").append(videoSelectorDiv);
		
		
		// Add Flash Video Player
		// /content/s2/MeetTheArchitect/JuniperVideoPlayer_Architect.swf
		var flashvars = {
		  videoURL: videoUrl
		};
		var params = {
		  menu: "false"
		};
		var attributes = {
		  id: "architectVideoObject",
		  name: "architectVideoObject"
		};
		swfobject.embedSWF("/Junos/video/JuniperVideoPlayer_Architect.swf", "architectVideoPlayerObj", "400", "270", "9.0.0","/Junos/temp/video/expressInstall.swf", flashvars, params);
		videoplayer.show();

		
		// Close button handler
		$("#architect-videoplayer-close").click(function(event){
			$("#architect-overlay, #architect-videoplayer").fadeOut("fast", function(){
				$("#architect-overlay, #architect-videoplayer").remove();
			});
		});
	
	});
	
});
});

// Handle Swapping of Videos when player is showing
function swapVideo(event) {
	var newVideoIndex = Number($(this).find(".selectorDescription").attr("videoIndex"));
	var newVideoItem = $("li.architectVideoItem").get(newVideoIndex);
	
	// Replace VideoPlayer popup description
	$("#architect-videoplayer-description").html($(newVideoItem).find(".architectCopy p").html());
	
	// Replace Next / Previous items
	var videoItemCount = $("li.architectVideoItem").length;
	
	// Previous Item
	var prevItemContent = "";
	if((newVideoIndex - 1) >= 0) {
		var prevItem = $("li.architectVideoItem").get(newVideoIndex - 1);
		//alert($(prevItem).attr("videoPath"));
		prevItemContent = '<div class="selectorDescription" videoindex="' + (newVideoIndex - 1) + '">' + $(prevItem).find(".architectCopy p").html() + '</div><div class="selectorThumbnail">' + $(prevItem).find(".architectThumb").html() + '</div>';
	}
	$("#previousVideo").html(prevItemContent);
	
	// Next Item
	var nextItemContent = "";
	if((newVideoIndex + 1) < videoItemCount){
		var nextItem = $("li.architectVideoItem").get(newVideoIndex + 1);
		//alert($(prevItem).attr("videoPath"));
		nextItemContent = '<div class="selectorDescription" videoindex="' + (newVideoIndex + 1) + '">' + $(nextItem).find(".architectCopy p").html() + '</div><div class="selectorThumbnail">' + $(nextItem).find(".architectThumb").html() + '</div>';
	}
	$("#nextVideo").html(nextItemContent);
	
	// Truncate the text if its too long
	$(".selectorDescription").truncate(90);
	
	// Replace Video with new one
	var flashvars = {
	  videoURL: $(newVideoItem).attr("videopath")
	};
	var params = {
	  menu: "false"
	};
	var attributes = {
	  id: "architectVideoObject",
	  name: "architectVideoObject"
	};
	swfobject.embedSWF("/Junos/video/JuniperVideoPlayer_Architect.swf", "architectVideoPlayerObj", "400", "270", "9.0.0","/Junos/temp/video/expressInstall.swf", flashvars, params);
	
}