/***************************************************************************************************
* AGI Media - Application
* Technology: HTML / JAVASCRIPT (JQUERY)
****************************************
*
* depends on:
*    => jquery.js
*    => AGIMedia.js
***************************************************************************************************/

var AGIMediaApp_MultiSlideTeaser_appPath = AGIMedia_App_basePath + "AGIMedia_App_MultiSlideTeaser/";
AGIMedia_Helper.ensureJSFile(AGIMedia_App_basePath + "AGIMedia_GUILib_ImageSwitch.js");

///////////////////////////////////////////////////////////////////////////////////////////////////
//-------------------------------------------------------------------------------------------------
// class PublicationsStage
function AGIMedia_App_MultiSlideTeaser(appBox)
{
//	GUI MEMBERS
///////////////////////////////////////////////////////////////////////////////////////////////////
	var $stage = $("<div></div>");
	var $mainBox = $("<div></div>");
	var $rightBox = $("<div></div>");
	var $leftBox = $("<div></div>");
	var $imgBox = AGIMedia_GUILib.createBox("div", 0, 0, 0, 0);
	var $textBox = AGIMedia_GUILib.createBox("div", 0, 0, 0, 0);
	var $linkBox = AGIMedia_GUILib.createBox("div", 0, 0, 0, 0);
	var imgSwitch = null;

//	DATA MEMBERS
///////////////////////////////////////////////////////////////////////////////////////////////////
	var errMsg = "<b>The application is not initialized.</b>";
	
	var currTab = -1;
	var lastTab = 0;
	var sequenceObject = null;
	var sequenceRunning = false;
	var currTabSetManually = false;

	//sequence settings
	var sequenceMode = true;
	var sequenceTime = 6; //seconds
	var sequenceStopOnManualSelection = true;
	var sequenceRestartOnManualDeselection = true;	

	//data of tab contents
	var numTabs = 8;
	
	var tabImages = [
		"monkey.jpg",
		"ham.jpg",
		"money.jpg",
		"baby.jpg",
	];
	
	var tabCssDefs = [
		{ left: 5, top: 5, width: 157, height: 90, color: "#fff", fontSize: 15, lineHeight: '18px' },
		{ left: 5, top: 5, width: 300, height: 90, color: "#fff", fontSize: 11, lineHeight: '13px' }
	];
	
	var leftBoxColorsCss = [
		{ backgroundColor: "#4c817c" },
		{ backgroundColor: "#EB8550" },
		{ backgroundColor: "#4c94a5" },
		{ backgroundColor: "#8f66bc" }
	];
	
	var leftBoxCssDefs = [
		{ width: 165 },
		{ width: 306 }
	];
	
	var tabContent = [
		{
			text: "Studying capuchin monkeys can teach us a lesson about loss aversion.",
			linkText: "find out how..."
		},
		{
			text: "Human beings tend to fear a loss far more than they take pleasure in the potential for an equal gain. And we're not the only ones - capuchin monkeys exhibit loss aversion, too. Monkeys given a single slice of apple are substantially more content than monkeys who are first given two slices of apple and then have one of those slices taken back.",
			linkText: "next story..."
		},
		{
			text: "You can learn about the power of cognitive illusions from a package of cold cuts.",
			linkText: "find out how..."
		},
		{
			text: "Human beings are susceptible to cognitive illusions just as they are to optical illusions. When faced with a choice between cold cuts described as '90% Fat Free' and those described as 'Containing 10% Fat', people overwhelmingly choose the former, even though the two are of course identical - a powerful and ubiquitous effect known as 'framing'.",
			linkText: "next story..."
		},
		{
			text: "An inflation rate of just 3% can gobble up 50% of your purchasing power over time.",
			linkText: "find out how..."
		},
		{
			text: "People have a tendency to vastly overlook the impact of inflation on their cost of living - but even low rates of inflation can multiply exponentially. An inflation rate of just 3% compounded over twenty years can reduce purchasing power by nearly 50%.",
			linkText: "next story..."
		},
		{
			text: "A snapshot of your kids could double your savings rate.",
			linkText: "find out how..."
		},
		{
			text: "Earmarking funds for specific purposes can have a dramatic effect on savings rates. Encouraging parents to set aside savings in an envelope labeled with a picture of their children nearly doubled the savings rate in a recent study.",
			linkText: "next story..."
		},
		
	];

//	METHODS
///////////////////////////////////////////////////////////////////////////////////////////////////
	var setDataFromEditor = function(singleData, multiData)
	{
		sequenceMode = singleData[4] == "True";
		sequenceTime = parseInt(singleData[5]);
		numTabs = multiData.length * 2;
		tabImages = [];
		leftBoxColorsCss = [];
		tabContent = [];
		var i = 0;
		for(;i < multiData.length; i++) {
			var item = multiData[i];
			tabImages.push(item.Image);
			leftBoxColorsCss.push({backgroundColor: item.BgColor});
			tabContent.push({
				text: item.TeaserText,
				linkText: singleData[2]
			});
			tabContent.push({
				text: item.Copy,
				linkText: singleData[3]
			});
		}
		
	};

	var changeTab = function(nextTab)
	{
		lastTab = currTab;
		currTab = nextTab;
	};
	var isSameTab = function()
	{
		return lastTab == currTab;
	};
	
	var openImgFunc = function(num, clickedByUser)
	{
		var clickedByUser = (clickedByUser == undefined ? false : clickedByUser);
		
		changeTab(num);
		if(isSameTab())
			return;
		
		var num_d2 = Math.floor(num / 2);
		imgSwitch.showImage(num_d2);
		$imgBox.css({display: (num % 2 == 0 ? "block" : "none")});
		
		$textBox.html(tabContent[num].text);
		$textBox.css(tabCssDefs[num % tabCssDefs.length]);
		$leftBox.css(leftBoxColorsCss[num_d2]);
		$leftBox.css(leftBoxCssDefs[num % leftBoxCssDefs.length]);
		$linkBox.html(tabContent[num].linkText);
			
	};
	
	var toggleToDirection = function(direction)
	{
		if(direction != 1 && direction != -1)
			return;
		var newTabNum = (currTab + numTabs + direction) % numTabs;
		openImgFunc(newTabNum);
	}
	
	var startSequence = function()
	{
		sequenceRunning = true;
		sequenceObject = window.setInterval(sequenceHandler, sequenceTime * 1000);
	};
	var stopSequence = function()
	{
		if(!sequenceRunning)
			return;
		sequenceRunning = false;
		window.clearInterval(sequenceObject);
	};
	
	//jumps 2 tabs!!!
	var sequenceHandler = function()
	{
		if(currTab >= 0 && currTab < numTabs) {
			openImgFunc((currTab+2) % numTabs);
			currTabSetManually = false;
		}
		
	};



//	CONSTRUCTOR
///////////////////////////////////////////////////////////////////////////////////////////////////

	var $appBox = $(appBox.domObject);
	$appBox.css({
		position: "relative",
		top: 0,
		left: 0
	});
	
	if(appBox.params.length < 2) {
		$stage.append(errMsg);
		return;
	}
	
	var width = AGIMedia.Helper.castNumber(appBox.params[0]);
	var height = AGIMedia.Helper.castNumber(appBox.params[1]);
	
	if(appBox.multiData)
	{
		setDataFromEditor(appBox.params, appBox.multiData);
	}
	
	var switchImageArray = [];
	for(idx in tabImages)
		switchImageArray.push(AGIMediaApp_MultiSlideTeaser_appPath + "images/" + tabImages[idx]);
	
	$stage.css({
		position: "absolute",
		top: 0,
		left: 0,
		width: width,
		height: height,
		backgroundColor: "#fff",
		overflow: "hidden"
	});
	
	$mainBox.css({
		position: "absolute",
		top: 0,
		left: 0,
		width: width,
		height: height,
		backgroundColor: "#fff",
		zIndex: 1
	});
	
	$rightBox.css({
		position: "absolute",
		top: 0,
		right: 0,
		width: 139,
		height: height,
		backgroundColor: "#fff",
		zIndex: 0
	});
	
	$leftBox.css({
		position: "absolute",
		top: 0,
		left: 0,
		width: 165,
		height: height,
		backgroundColor: "#F2A900",
		zIndex: 0
	});
	
	$imgBox.css({
		position: "absolute",
		top: 0,
		width: 139,
		height: height
	});

	$rightBox.append($imgBox);
	$mainBox.append($rightBox);
	$mainBox.append($leftBox);
	
	$textBox.css({
		left: 10, top: 20
	});
	$mainBox.append($textBox);
	$linkBox.css({
		left: 10, top: 124, width: 85, height: 16, color: "#fff", padding: "0 8px", background: "url(" + AGIMediaApp_MultiSlideTeaser_appPath + "bg_link_white.gif) no-repeat 0px 6px"
	});
	$linkBox.mouseover(function(){$(this).css({cursor: "pointer"});});
	$linkBox.attr("class", "et-rteStyle-teaserlink");
	$linkBox.attr("href", "javascript: ;");
	$linkBox.click(function(){
		if(currTab % 2 == 0)
			stopSequence();
		else if(sequenceMode)
			startSequence();
		toggleToDirection(1);
	});
	$mainBox.append($linkBox);
	
	imgSwitch = AGIMedia_GUILib.createImageSwitch($imgBox, switchImageArray, 139, height);
	
	$stage.append($mainBox);
	$appBox.append($stage);
		
	openImgFunc(0);
	if(sequenceMode)
		startSequence();
			
}

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