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


///////////////////////////////////////////////////////////////////////////////////////////////////
//-------------------------------------------------------------------------------------------------
function AGIMedia_App_SwitzTeaserAnimation(appBox)
{
// STATIC DATA
///////////////////////////////////////////////////////////////////////////////////////////////////
	var errMsg = "<b>The application is not initialized.</b>";

// CONTROL DATA
///////////////////////////////////////////////////////////////////////////////////////////////////
	var currSlide = 0;
	var numSlides = appBox.multiData.length;

// GUI DATA
///////////////////////////////////////////////////////////////////////////////////////////////////
	var width = ~~appBox.singleData["Width"];
	var height = ~~appBox.singleData["Height"];
	var pathImages = appBox.appPath + "images/";
	var sequenceMode = appBox.singleData["SequenceMode"] == "True";
	var sequenceTime = ~~appBox.singleData["SequenceTime"];
	var fadingTime = ~~appBox.singleData["FadingTime"];
	var fontFamily = ~~appBox.singleData["FontFamily"];
	
	var leftHeadRow = 10;
	var topHeadRow = 20;
	var heightHeadRow = 90;
	
	var leftMainRow = leftHeadRow;
	var topMainRow = topHeadRow + heightHeadRow;
	var heightMainRow = 120;
	
	var leftFootRow = leftHeadRow;
	var topFootRow = topMainRow + heightMainRow;
	var heightFootRow = 50;
	
	var leftImageCol = leftHeadRow;
	var widthImageCol = width * 0.33;
	var paddingSmallImage = 7;
	var leftTextCol = leftImageCol + widthImageCol + paddingSmallImage;
	var widthTextCol = width - widthImageCol - paddingSmallImage;
	
	var fontSize = "14px";

	var mainCss = {
		fontFamily: fontFamily,
		lineHeight: "120%"
	};
	
	var FooterCss = {
		fontFamily: fontFamily,
		lineHeight: "120%"
	};
	
	var headlineCss = {
		fontFamily: fontFamily,
		lineHeight: "120%"
	};
	var headline2Css = {
		fontFamily: fontFamily
	};
	
// GUI MEMBERS
///////////////////////////////////////////////////////////////////////////////////////////////////
	var $stage = AGIMedia_GUILib.createBox("div", 0, 0, width, height);
	var $whiteLayer = AGIMedia_GUILib.createBox("div", 0, 0, width, height);
	var $fadeLayer = AGIMedia_GUILib.createBox("div", 0, 0, width, height);
	var $$slides = [];
	var divSwitch = null;
	var fadeLayerSwitch = null;

// GUI METHODS
///////////////////////////////////////////////////////////////////////////////////////////////////

	function $createSlide(data)
	{
		var $slide = $("<div>");
		switch(data.SlideType) {
			case "Image":   refineSlide_Image($slide, data); break;
			case "Content": refineSlide_Content($slide, data); break;
		}
		return $slide;
	}

	function refineSlide_Image($slide, data)
	{
		$img = $("<img>");
		$img.attr({
			src: pathImages + data.Image
		});
		$slide.append($img);
	}

	function refineSlide_Content($slide, data)
	{
		var topOffsetMainCopy = ~~data.TopOffsetMainCopy;
		var fontSizeHeadline = ~~data.FontSizeHeadline;
		var fontSizeHeadline2 = ~~data.FontSizeHeadline2;
		var fontSizeMainCopy = ~~data.FontSizeMainCopy;
		var fontSizeFooter = ~~data.FontSizeFooter;

		var $headRow = AGIMedia_GUILib.createBox("div", leftHeadRow, topHeadRow, width, heightHeadRow);
		$headRow.css(headlineCss);
		$headRow.css({fontSize: fontSizeHeadline});
		
		var $footRow = AGIMedia_GUILib.createBox("div", leftFootRow, topFootRow, width, heightFootRow);
		$footRow.css(mainCss);
		$footRow.css({fontSize: fontSizeFooter});
		
		var $imageCol = AGIMedia_GUILib.createBox("div", leftImageCol, topMainRow, widthImageCol, heightFootRow);
		var $textCol = AGIMedia_GUILib.createBox("div", leftTextCol, topMainRow, widthTextCol, heightFootRow);
		
		var $headline = $("<div>");
		$headline.html(data.Headline);
		var $smallImage = $("<img src='" + pathImages + data.Image + "'>");
		
		var smallImageHeight = $smallImage.height();
		
		var $headline2 = $("<div>");
		$headline2.css(headline2Css);
		$headline2.css({fontSize: fontSizeHeadline2});
		
		$headline2.append(data.Headline2);
		var $mainCopy = $("<div>");
		$mainCopy.css(mainCss);
		$mainCopy.css({fontSize: fontSizeMainCopy});
		
		$mainCopy.append(data.Copy);
		$mainCopy.css({
			position: "relative",
			top: topOffsetMainCopy
		});
		$textCol.append($headline2);
		$textCol.append($mainCopy);
		
		var $footer = $("<div>");
		$footer.html(data.Footer);
		
		$imageCol.append($smallImage);
		$headRow.append($headline);
		$footRow.append($footer);
		
		$slide.append($imageCol);
		$slide.append($textCol);
		
		$slide.append($headRow);
		$slide.append($footRow);
	}

	function createSlides()
	{
		for(var idx in appBox.multiData) {
			var $slide = $createSlide(appBox.multiData[idx]);
			$stage.append($slide);
			$$slides.push($slide);
		}
	}

// CONTROL METHODS
///////////////////////////////////////////////////////////////////////////////////////////////////

	//direction: -1 or +1
	function slideContent(direction)
	{
		if(numSlides < 2)
			return;
		
		var fadingTime_d2 = fadingTime / 2;
		
		nextSlide = (currSlide + numSlides + direction) % numSlides;
		//divSwitch.fadeDiv(nextSlide, fadingTime);
		fadeLayerSwitch.crossFadeDiv(1, fadingTime_d2, function(){
			divSwitch.showDiv(nextSlide);
			fadeLayerSwitch.crossFadeDiv(0, fadingTime_d2);
			currSlide = nextSlide;
		});
		
	}

// EVENTS
///////////////////////////////////////////////////////////////////////////////////////////////////
	function timer_onTick()
	{
		slideContent(1);
	}

// EVENT ASSIGNMENT
///////////////////////////////////////////////////////////////////////////////////////////////////
	function bindMouseHandlers()
	{
		
	}

	function unbindMouseHandlers()
	{
		
	}

// CONSTRUCTOR
///////////////////////////////////////////////////////////////////////////////////////////////////			
	var $appBox = $(appBox.domObject);
	$appBox.css({
		position: "relative",
		width: width,
		height: height
	});
	
	createSlides();
	divSwitch = AGIMedia_GUILib.createDivSwitch($stage);
	
	$whiteLayer.append("&nbsp;");
	$whiteLayer.css({
		backgroundColor: "#fff",
		color: "#fff",
		fontSize: 1
	});
	$fadeLayer.append($stage);
	$fadeLayer.append($whiteLayer);
	fadeLayerSwitch = AGIMedia_GUILib.createDivSwitch($fadeLayer);
	
	$appBox.append($fadeLayer);

	if(sequenceMode)
		setInterval(timer_onTick, sequenceTime * 1000);
	//divSwitch.showDiv(1);

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

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