/***************************************************************************************************
* AGI Media - Application
****************************************
*
* depends on:
*    => jquery.js
*    => jquery.easing.1.3.js
*    => AGIMedia.js
***************************************************************************************************/


///////////////////////////////////////////////////////////////////////////////////////////////////
//-------------------------------------------------------------------------------------------------
// class FlashBox
function AGIMedia_App_VideoCoverflow(appBox)
{
// STATIC DATA
///////////////////////////////////////////////////////////////////////////////////////////////////
	var errMsg = "<b>The application is not initialized.</b>";
	var opacPlay = 1;

// CONTROL DATA
///////////////////////////////////////////////////////////////////////////////////////////////////
	var currThumb = 0;
	var numThumbs = appBox.multiData.length;

// GUI DATA
///////////////////////////////////////////////////////////////////////////////////////////////////
	var width = ~~appBox.singleData["Width"];
	var height = ~~appBox.singleData["Height"];
	var pathGrfx = appBox.appPath + "grfx/";
	var pathThumb = appBox.appPath + "thumbnails/";
	var showVideoLinkText = appBox.singleData["ShowVideoLinkText"];
	var leftButtonImage = appBox.singleData["LeftButtonImage"];
	var rightButtonImage = appBox.singleData["RightButtonImage"];
	var playButtonImage = appBox.singleData["PlayButtonImage"];
	var widthLeftRightButtons = ~~appBox.singleData["WidthLeftRightButtons"];
	var heightLeftRightButtons = ~~appBox.singleData["HeightLeftRightButtons"];
	var widthThumb = ~~appBox.singleData["WidthThumb"];
	var heightThumb = ~~appBox.singleData["HeightThumb"];
	var sizePlayButton = ~~appBox.singleData["SizePlayButton"];
	var timeSliding = ~~appBox.singleData["TimeSliding"];
	
	var fontFamily = "verdana,arial,helvetica,sans-serif";
	var fontSize = "10px";
	
	var coverArea = {
		bgColor: "#fff",
		leftRightButtonPadding: 20,
		leftOffset: -1,
		cursor: "pointer",
		imgBorder: "1px solid #fff",
		fontFamily: fontFamily,
		fontSize: fontSize,
		playButtonBackground: "url(" + pathGrfx + "bu_play.png) no-repeat"
	};
	
	var detailArea = {
		bgColor: "#e1e1e1",
		padding: 20,
		headlineColor: "#000",
		headlineFontWeight: "bold",
		marginBottom: 7,
		copyColor: "#000",
		linkColor: "#003781",
		fontFamily: fontFamily,
		fontSize: fontSize
	};
	
	var link = {
		setup: {
			padding: "0 8px 0 8px",
			display: "inline",
			textDecoration: "none",
			fontWeight: "normal"
		},
		normal: {
			color: "#003781",
			background: "url(" + pathGrfx + "bg_link.gif) no-repeat 0px 6px"
		},
		hover: {
			color: "#009ee0",
			background: "url(" + pathGrfx + "bg_link_hover.gif) no-repeat 0px 6px"
		}
	}
	
	var thumbArray = [];
	
// GUI MEMBERS
///////////////////////////////////////////////////////////////////////////////////////////////////
	var $stage = AGIMedia_GUILib.createBox("div", 0, 0, width, height);
	
	// COVER AREA
	//------------------------------------------------
	var $coverArea = AGIMedia_GUILib.createBox("div", 0, 0, width / 2, height);
	var $leftButton = AGIMedia_GUILib.createBox(
		"img",
		coverArea.leftOffset, height / 2 - heightLeftRightButtons / 2 - coverArea.leftRightButtonPadding, 
		widthLeftRightButtons, heightLeftRightButtons
	);
	var $rightButton = AGIMedia_GUILib.createBox(
		"img",
		coverArea.leftOffset + width / 2 - widthLeftRightButtons - coverArea.leftRightButtonPadding * 2, height / 2 - heightLeftRightButtons / 2 - coverArea.leftRightButtonPadding,
		widthLeftRightButtons, heightLeftRightButtons
	);

	var $leftClickArea = AGIMedia_GUILib.createBox("div", 0, 0, width / 6, height);
	var $rightClickArea = AGIMedia_GUILib.createBox("div", width / 2 - width / 6, 0, width / 6, height);
	
	var $thumbs = AGIMedia_GUILib.createBox("div", 0, 0, width / 2, height);
	
	var $playArea = AGIMedia_GUILib.createBox("a", width / 6, 0, width / 6, height);
	var $playButton = AGIMedia_GUILib.createBox("a", width / 4 - sizePlayButton / 2, height / 2 - sizePlayButton / 2, sizePlayButton, sizePlayButton);
	
	// DETAIL AREA
	//------------------------------------------------
	var $detailArea = AGIMedia_GUILib.createBox(
		"div",
		width / 2, 0,
		width / 2 - detailArea.padding * 2, height - detailArea.padding * 2
	);
	var $headline = $("<div>");
	var $scrollArea = $("<div>");
	var $copy = $("<div>");
	var $link = $("<a>");

// GUI METHODS
///////////////////////////////////////////////////////////////////////////////////////////////////
	function createThumbnails()
	{
		var max = appBox.multiData.length;
		var i = 0;
		for(var idx in appBox.multiData)
		{
			var data = appBox.multiData[idx];
			var $thumb = AGIMedia_GUILib.createBox("img", 0, 0, widthThumb, heightThumb);
			$thumb.attr({src: pathThumb + data.VideoThumbnail});
			$thumb.z = i;
			$thumb.css({
				zIndex: ~~this.z,
				left: i * 10,
				top: i * 10,
				width: ((max - i)/max) * widthThumb,
				border: coverArea.imgBorder
			});
			if(i > 0)
				$thumb.fadeTo(0, 0);
			$thumbs.append($thumb);
			thumbArray.push($thumb);
			i++;
		}
	}
	
	function beginTween()
	{
		var timeSliding_d2 = timeSliding / 2;
		unbindMouseHandlers();

		$playButton.css({display: "none"});
		$headline.fadeTo(timeSliding_d2, 0, function(){
			$playButton.css({display: "block"});
			updateDetailArea(appBox.multiData[currThumb]);
			
			$headline.fadeTo(timeSliding_d2, 1)
		});
		$scrollArea.fadeTo(timeSliding_d2, 0, function(){
			$scrollArea.fadeTo(timeSliding_d2, 1);
		});
		$link.fadeTo(timeSliding_d2, 0, function(){
			$link.fadeTo(timeSliding_d2, 1);
		});
	}
	
	function endTween()
	{
		bindMouseHandlers()
	}
	
	function tweenImage(i, time)
	{
		var $thumb = thumbArray[i];
		var thumbLeft = width / 4 - widthThumb / 2;
		var thumbTop = height / 2 - heightThumb / 2;
		
		if(numThumbs == 1)
		{
			$thumb.css({
				left: thumbLeft,
			    top: thumbTop,
			    width: widthThumb,
			    height: heightThumb
			});
			return;
		}

		if(time > 0)
			beginTween();
		
		var prevImg = (i + numThumbs - 1) % numThumbs;
		var nextImg = (i + numThumbs + 1) % numThumbs;
				
		var $prevThumb = thumbArray[prevImg];
		var $nextThumb = thumbArray[nextImg];
		
		var xDist = 32;
		var smallFactor = 0.625;
		var widthSmall = widthThumb * smallFactor;
		var heightSmall = heightThumb * smallFactor;
		
		var prevLeft = width / 4 - widthThumb / 2 - xDist;
		var prevTop = height / 2 - heightSmall / 2;
		
		var nextLeft = thumbLeft + widthThumb - widthSmall + xDist;
		var nextTop = prevTop;
		
		var lightOpacity = 0.4;
		
		var easeMode = "easeOutQuart";
		$thumb.animate({ 
		    z: 2,
		    opacity: 1,
		    left: thumbLeft,
		    top: thumbTop,
		    width: widthThumb,
		    height: heightThumb
		  },
		  {step: function(){$thumb.css('zIndex', ~~this.z);},
		  	duration: time,
		  	easing: easeMode,
		  	complete: endTween
		  });
		$prevThumb.animate({ 
		    z: 0,
		    opacity: lightOpacity,
		    left: prevLeft,
		    top: prevTop,
		    width: widthSmall,
		    height: heightSmall
		  },
		  {step: function(){$prevThumb.css('zIndex', ~~this.z);},
		  	duration: time,
		  	easing: easeMode
		});
		$nextThumb.animate({ 
		    z: 0,
		    opacity: lightOpacity,
		    left: nextLeft,
		    top: nextTop,
		    width: widthSmall,
		    height: heightSmall
		  },
		  {step: function(){$nextThumb.css('zIndex', ~~this.z);},
		  	duration: time,
		  	easing: easeMode
		});

		var leftBlind = width / 4 - widthSmall / 2;
		var topBlind = height / 2 - heightSmall / 2;
		
		if(numThumbs > 3) {
		
			var prevPrevThumb = (prevImg + numThumbs - 1) % numThumbs;
			var $prevPrevThumb = thumbArray[prevPrevThumb];
			$prevPrevThumb.animate({ 
			    z: 0,
			    opacity: 0,
			    left: leftBlind,
			    top: topBlind,
			    width: widthSmall,
			    height: heightSmall
			  },
			  {step: function(){$prevPrevThumb.css('zIndex', ~~this.z);},
			  	duration: time,
			  	easing: easeMode
			});
		}
		if(numThumbs > 4) {
			var nextNextThumb = (nextImg + numThumbs + 1) % numThumbs;
			var $nextNextThumb = thumbArray[nextNextThumb];
			$nextNextThumb.animate({ 
			    z: 0,
			    opacity: 0,
			    left: leftBlind,
			    top: topBlind,
			    width: widthSmall,
			    height: heightSmall
			  },
			  {step: function(){$nextNextThumb.css('zIndex', ~~this.z);},
			  	duration: time,
			  	easing: easeMode
			});
		}
	}

// CONTROL METHODS
///////////////////////////////////////////////////////////////////////////////////////////////////
	function updateDetailArea(data)
	{
		$headline.text(data.Headline);
		$copy.text(data.Copy);
		var linkAttr = {
			href: data.VideoPageUrl,
			target: data.OpenInNewPage == "True" ? "_blank" : "_self"
		};
		$link.attr(linkAttr);
		$playArea.attr(linkAttr);
		$playButton.attr(linkAttr);
		
		var maxHeightCopy = height - 2 * detailArea.padding - $headline.height() - $link.height() - 2 * detailArea.marginBottom;
		
		if($copy.height() > maxHeightCopy)
			$scrollArea.css({
				overflow: "scroll",
				overflowX: "hidden",
				width: width / 2 - detailArea.padding * 2,
				height: maxHeightCopy
			});
		else
			$scrollArea.css({
				overflow: "hidden",
				width: width / 2 - detailArea.padding * 2,
				height: "auto"
			});
	}
	
	//direction: -1 or +1
	function slideCoverFlow(direction)
	{
		currThumb = (currThumb + numThumbs + direction) % numThumbs;
		tweenImage(currThumb, timeSliding);
	}

// EVENTS
///////////////////////////////////////////////////////////////////////////////////////////////////
	function leftClickArea_onClick(e)
	{
		slideCoverFlow(-1);
	}

	function rightClickArea_onClick(e)
	{
		slideCoverFlow(1);
	}


// EVENT ASSIGNMENT
///////////////////////////////////////////////////////////////////////////////////////////////////
	function bindMouseHandlers()
	{
		$leftClickArea.bind("click", leftClickArea_onClick);
		$rightClickArea.bind("click", rightClickArea_onClick);
	}

	function unbindMouseHandlers()
	{
		$leftClickArea.unbind("click", leftClickArea_onClick);
		$rightClickArea.unbind("click", rightClickArea_onClick);
	}

// CONSTRUCTOR
///////////////////////////////////////////////////////////////////////////////////////////////////			
	var $appBox = $(appBox.domObject);
	$appBox.css({
		position: "relative",
		width: width,
		height: height
	});
	
	// COVER AREA
	//------------------------------------------------
	$coverArea.css({
		cursor: coverArea.cursor,
		backgroundColor: coverArea.bgColor
	});
	$leftButton.attr({
		src: pathGrfx + leftButtonImage
	});
	var leftRightButtonCss = {
		padding: coverArea.leftRightButtonPadding
	};
	$leftButton.css(leftRightButtonCss);
	$rightButton.attr({
		src: pathGrfx + rightButtonImage
	});
	$rightButton.css(leftRightButtonCss);
	$playArea.css({
		zIndex: numThumbs + 1,
		backgroundColor: "#fff"
	});
	$playButton.attr({
		src: pathGrfx + playButtonImage
	});
	$playButton.css({
		background: coverArea.playButtonBackground,
		zIndex: numThumbs + 2
	});
	$playArea.fadeTo(0, 0);
	createThumbnails();
	$coverArea.append($thumbs);
	tweenImage(0, 0);
	
	if(numThumbs > 1)
	{
		$coverArea.append($leftButton);
		$coverArea.append($rightButton);
	}
	
	$coverArea.append($playArea);
	$coverArea.append($playButton);
	var leftRightPlayClickAreaCss = {zIndex: numThumbs + 1, backgroundColor: "#fff"};
	$leftClickArea.css(leftRightPlayClickAreaCss);
	$leftClickArea.fadeTo(0, 0);
	$rightClickArea.css(leftRightPlayClickAreaCss);
	$rightClickArea.fadeTo(0, 0);
	
	if(numThumbs > 1)
	{
		$coverArea.append($leftClickArea);
		$coverArea.append($rightClickArea);
	}

	// DETAIL AREA
	//------------------------------------------------
	$detailArea.css({
		backgroundColor: detailArea.bgColor,
		padding: detailArea.padding,
		backgroundColor: detailArea.bgColor,
		zIndex: 1
	});
	$headline.css({
		color: detailArea.headlineColor,
		fontWeight: detailArea.headlineFontWeight,
		marginBottom: detailArea.marginBottom
	});
	$scrollArea.css({
		color: detailArea.copyColor,
		marginBottom: detailArea.marginBottom,
		overflow: "hidden"
	});
	$copy.css({});
	$scrollArea.append($copy);
	
	$link.css(link.setup);
	$link.css(link.normal);
	$link.hover(function(){
		$link.css(link.hover);
	}, function(){
		$link.css(link.normal);
	});
	$link.text(appBox.singleData.ShowVideoLinkText);
	
	$stage.append($coverArea);
	$stage.append($detailArea);
	$appBox.append($stage);

	// DATA ASSIGNMENT
	//------------------------------------------------
	//updateDetailArea(appBox.multiData[currThumb]);
	$(document).ready(function(){
		$detailArea.append($headline);
		$detailArea.append($scrollArea);
		$detailArea.append($link);
		updateDetailArea(appBox.multiData[currThumb]);
	});

	// EVENT BINDING
	//------------------------------------------------	
	bindMouseHandlers();
}

//-------------------------------------------------------------------------------------------------
///////////////////////////////////////////////////////////////////////////////////////////////////