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

var AGIMediaApp_AGIMainStage_appPath = AGIMedia_App_basePath + "AGIMedia_App_AGIMainStage/";

///////////////////////////////////////////////////////////////////////////////////////////////////
//-------------------------------------------------------------------------------------------------
// class PublicationsStage
function AGIMedia_App_AGIMainStage(appBox)
{
//	GUI MEMBERS
///////////////////////////////////////////////////////////////////////////////////////////////////
	var $stage = $("<div></div>");
	var $mainBox = $("<div></div>");
	var $imgBox = AGIMedia_GUILib.createBox("div", 0, 0, width, height);
	var imgSwitch = null;	
	var $npWrapper = AGIMedia_GUILib.createBox("div", 0, 0, "auto", "auto"); //notepad wrapper
	var $npBox = $("<div></div>"); //notepad main
	var $npPadding = $("<div></div>"); //notepad content box
	var $npHeadline = $("<div></div>");
	var $npCopy = $("<div></div>");
	var $npMoreLink = $("<a></a>");
	var $tabBox = $("<div></div>");
	var $clickBox = null;
	
	var $leftArrow = AGIMedia_GUILib.createBox("img", 0, 0, 0, 0);
	var $rightArrow = AGIMedia_GUILib.createBox("img", 0, 0, 0, 0);


//	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;
	
	var tabHorPadding = 10;
	var tabVerPadding = 6;
	var tabSpacing = 2;
	var tabVeryRightPadding = 5;
	var tabActiveHeight = 4;
	var tabAlpha = 0.75;
	var fontFamily = "verdana,arial,helvetica,sans-serif";
	var tabTextColor = "#fff";
	var tabBgColor = "#003781";
	var tabFontSize = "12px";
	var npBgColor = "#fff";
	var npTextColor = "#000";
	var npHeadlineSize = "20px";
	var npCopySize = tabFontSize;
	var npMoreLinkSize = tabFontSize;
	var npTop = 38;
	var npWidthWide = 326;
	var npWidthSquare = 195;
	var npWidthIndexSquare = 130;
	var npPadding = 10;
	var npOuterSpacing = 26;
	var npOuterSpacingWhenArrows = 32;
	
	//toggle button settings
	var toggleButtonWidth = 18;
	var toggleButtonHeight = 34;
	
	//sequence settings
	var showTabs = appBox.params[2] == "True";
	var sequenceMode = showTabs && (appBox.params[3] == "True");
	var randomMode = appBox.params[4] == "True";//true;
	var sequenceTime = appBox.params[5]; //seconds
	
	var sequenceStopOnManualSelection = true;
	var sequenceRestartOnManualDeselection = true;	
	
	var numTabs = appBox.multiData.length;
	
	var colorSchemes = {
		"White/Black": {
			wrapper: {
				background: "url(" + AGIMediaApp_AGIMainStage_appPath + "grfx/bg_indextextbox.gif) no-repeat right bottom"
			},
			content: {color: "#000", backgroundColor: "#fff"},
			moreLink: {
				normal: {
					color: "#003781",
					background: "url(" + AGIMediaApp_AGIMainStage_appPath + "/grfx/bg_link.gif) no-repeat 0px 6px"
				},
				hover: {
					color: "#009ee0",
					background: "url(" + AGIMediaApp_AGIMainStage_appPath + "/grfx/bg_link_hover.gif) no-repeat 0px 6px"
				}				
			}
		},
		"Blue/White":  {
			wrapper: {
				background: "url(" + AGIMediaApp_AGIMainStage_appPath + "grfx/bg_indextextbox_blue.gif) no-repeat right bottom"
			},
			content: {color: "#fff", backgroundColor: "#003781"},
			moreLink: {
				normal: {
					color: "#fff",
					background: "url(" + AGIMediaApp_AGIMainStage_appPath + "/grfx/bg_link_white.gif) no-repeat 0px 6px"
				},
				hover: {
					color: "#fff",
					background: "url(" + AGIMediaApp_AGIMainStage_appPath + "/grfx/bg_link_white.gif) no-repeat 0px 6px"
				}				
			}
		}
	};

//	METHODS
///////////////////////////////////////////////////////////////////////////////////////////////////

	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;
		imgSwitch.showImage(num);
		
		ensureNotepad(num);
		ensureClickArea(num);
	};
	
	var toggleToDirection = function(direction)
	{
		if(direction != 1 && direction != -1)
			return;
		var newTabNum = (currTab + numTabs + direction) % numTabs;
		openImgFunc(newTabNum);
		var $currInnerTab = $($tabBox.find(".AGI_Stage_InnerTab")[currTab]);
		highlightInnerTab($currInnerTab);
		currTabSetManually = true;
	}
	
	var ensureNotepad = function(num)
	{
		var data = appBox.multiData[num];
		switch(data.TabType)
		{
			case "Img":                showBlindClickBox(data); break;
			case "Img'NPLandscape":    showWideNotepad(data); break;
			case "Img'NPSquare":       showSquareNotepad(data); break;
			case "Index Img'NPSquare": showIndexSquareNotepad(data); break;
		}
	};
	
	var ensureClickArea = function(num)
	{
		var data = appBox.multiData[num];
		if(data.TabType != "Img" || data.MoreLinkText != "")
		{
			if($clickBox != null)
				$clickBox.remove();
			$clickBox = null;
			return;
		}
		
		$clickBox = AGIMedia_GUILib.createBox("a", 
			parseInt(data.MoreLinkLeft),
			parseInt(data.MoreLinkTop),
			parseInt(data.MoreLinkWidth),
			parseInt(data.MoreLinkHeight)
		);

		$clickBox.attr({
			href: data.MoreLink,
			target: (data.MoreLinkNewWindow == "True" ? "_blank" : "_self")
		});
		$clickBox.css({
			backgroundColor: "#fff",
			zIndex: 1
		});
		$clickBox.fadeTo(0, 0);
		$mainBox.append($clickBox);
	};
	
	var setNotepadValues = function(data)
	{
		if(data.BgType) {
			var colorScheme = colorSchemes[data.BgType];
			if(!colorScheme || !colorScheme.content)
				colorScheme = colorSchemes["White/Black"];
		}
		else
			colorScheme = colorSchemes["White/Black"];
		
		$npWrapper.css(colorScheme.wrapper);
		$npBox.css(colorScheme.content);
		$npHeadline.text(data.Headline);
		$npCopy.text(data.Copy);
		setMoreLink(data, colorScheme);
	};

	var setMoreLink = function(data, colorScheme)
	{
		if(!data.MoreLinkText || data.MoreLinkText == "") {
			$npMoreLink.css({display: "none"});
			return;
		}
		$npMoreLink.css({display: "block"});
		$npMoreLink.text(data.MoreLinkText);
		$npMoreLink.attr({
			href: data.MoreLink,
			target: data.MoreLinkNewWindow == "True" ? "_blank" : "_self"
		});
		$npMoreLink.css(colorScheme.moreLink.normal);
		$npMoreLink.hover(function(){
			$npMoreLink.css(colorScheme.moreLink.hover);
		}, function(){
			$npMoreLink.css(colorScheme.moreLink.normal);
		});
	}
	
	var showNotepad = function(data, npWidth)
	{
		var npSpacing = showTabs ? npOuterSpacing : npOuterSpacingWhenArrows
		setNotepadValues(data);
		$npWrapper.css({
			display: "block",
			width: npWidth,
			left: (width - npWidth - npSpacing),
			top: npTop
		});
	}
	
	var showWideNotepad = function(data)
	{
		var npWidth = npWidthWide;
		showNotepad(data, npWidth);
	};
	
	var showSquareNotepad = function(data)
	{
		var npWidth = npWidthSquare;
		showNotepad(data, npWidth);
	};
	
	var showIndexSquareNotepad = function(data)
	{
		var npWidth = npWidthIndexSquare;
		showNotepad(data, npWidth);
	};
	
	var showBlindClickBox = function(data)
	{
		$npWrapper.css({display: "none"});
	};
	
	var highlightInnerTab = function($innerTab)
	{
		$tabBox.find(".AGI_Stage_OuterTab").each(function(){
					$(this).css({
						paddingTop: tabActiveHeight
					});
					$(this).children(".AGI_Stage_InnerTab").css({
						paddingTop: tabVerPadding
					});
				});
		$innerTab.parent().css({
			paddingTop: 0
		});
		$innerTab.css({
			paddingTop: tabActiveHeight + tabVerPadding
		});
	};
	var startSequence = function()
	{
		sequenceRunning = true;
		sequenceObject = window.setInterval(sequenceHandler, sequenceTime * 1000);
	};
	var stopSequence = function()
	{
		sequenceRunning = false;
		window.clearInterval(sequenceObject);
	};

	var sequenceHandler = function()
	{
		if(currTab >= 0 && currTab < numTabs) {
			openImgFunc((currTab+1) % numTabs);
			var $currInnerTab = $($tabBox.find(".AGI_Stage_InnerTab")[currTab]);
			highlightInnerTab($currInnerTab);
			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]);
	
	var switchImageArray = [];
	for(idx in appBox.multiData)
		switchImageArray.push(AGIMediaApp_AGIMainStage_appPath + "images/" + appBox.multiData[idx].TabImage);
	
	$stage.css({
		position: "absolute",
		top: 0,
		left: 0,
		width: width,
		height: height,
		backgroundColor: "#fff",
		overflow: "hidden",
		fontFamily: fontFamily
	});
	
	$mainBox.css({
		position: "absolute",
		top: 0,
		left: 0,
		width: width,
		height: height,
		backgroundColor: "#fff",
		zIndex: 1
	});
		
	$imgBox.css({
		position: "absolute",
		top: 0,
		left: 0,
		width: width,
		height: height
	});
	
	$npWrapper.css({
		display: "none",
		background: "url(" + AGIMediaApp_AGIMainStage_appPath + "grfx/bg_indextextbox.gif) no-repeat right bottom"
	});

	$npBox.css({
		color: npTextColor,
		backgroundColor: npBgColor,
		marginBottom: 28
	});
	$npPadding.css({
		margin: npPadding
	});

	$npHeadline.css({
		fontSize: npHeadlineSize,
		padding: "10px 0"
	});
	$npCopy.css({
		fontSize: npCopySize,
		lineHeight: "133%"
	});
	$npMoreLink.css({
		left: 10, top: 124, width: "auto", height: 16, padding: "0 8px 0 8px",
		fontSize: npMoreLinkSize,
		textDecoration: "none",
		position: "relative",
		top: 7,
		left: 0
	});
	
	$npWrapper.append($npBox);
	$npBox.append($npPadding);
	$npPadding.append($npHeadline);
	$npPadding.append($npCopy);
	$npPadding.append($npMoreLink);

	$mainBox.append($imgBox);
	$mainBox.append($npWrapper);
	
	imgSwitch = AGIMedia_GUILib.createImageSwitch($imgBox, switchImageArray, width, height);
	
	$stage.append($mainBox);
	$appBox.append($stage);
	
	$tabBox = $("<div></div>");
	$tabBox.css({
		position: "absolute",
		bottom: 0,
		right: 0,
		margin: tabVerPadding + "px " + tabVeryRightPadding + "px 0 " + tabHorPadding + "px",
		zIndex: 1
		
	});
	
	$leftArrow.css({
		backgroundColor: "#fff",
		width: toggleButtonWidth, height: toggleButtonHeight,
		left: 0, top: height / 2 - toggleButtonHeight / 2,
		zIndex: 2
	});
	$leftArrow.attr("src", AGIMediaApp_AGIMainStage_appPath + "grfx/button_back.gif");
	$leftArrow.mouseover(function(){ $(this).css({cursor: "pointer"}); });
	$leftArrow.click(function(){
		toggleToDirection(-1);
	});

	$rightArrow.css({
		backgroundColor: "#fff",
		width: toggleButtonWidth, height: toggleButtonHeight,
		left: width - toggleButtonWidth, top: height / 2 - toggleButtonHeight / 2,
		zIndex: 2
	});
	$rightArrow.attr("src", AGIMediaApp_AGIMainStage_appPath + "grfx/button_fwd.gif");
	$rightArrow.mouseover(function(){ $(this).css({cursor: "pointer"}); });
	$rightArrow.click(function(){
		toggleToDirection(1);
	});
		
	if(showTabs)
		$stage.append($tabBox);
	else {
		$mainBox.append($leftArrow);
		$mainBox.append($rightArrow);
	}
	
	//////////////////////////////////////////////////////////////////////////////////////////////////
	
	for(tabIdx = 0; tabIdx < numTabs; tabIdx++) {
		var currData = appBox.multiData[tabIdx];
		
		var $outerTab = $("<div class=\"AGI_Stage_OuterTab\"></div>");
		var $innerTab = $("<div class=\"AGI_Stage_InnerTab\"></div>");
		$outerTab.append($innerTab);
		$outerTab.css({
			display: "block",
			float: "left",
			marginLeft: tabSpacing
		});
		$innerTab.css({
			display: "block",
			backgroundColor: tabBgColor,
			color: tabTextColor,
			fontSize: tabFontSize,
			textAlign: "center",
			padding: tabVerPadding + "px " + tabHorPadding + "px " + tabVerPadding + "px " + tabHorPadding + "px"
		});
		$innerTab.fadeTo(0, tabAlpha);
		$innerTab.mouseover(function(){$(this).css({
			cursor: "pointer"
		});});
		$innerTab.mouseout(function(){$(this).css({
			cursor: "auto"
		});});
		$innerTab.bind('mousedown', {tabIdx: tabIdx}, function(e) {
			highlightInnerTab($(this));
			openImgFunc(e.data.tabIdx, true);
			
			if(sequenceRunning)
				stopSequence();
			else if(sequenceMode &&
			   sequenceRestartOnManualDeselection && 
			   currTab == lastTab)
			{
				sequenceHandler();
				startSequence();
			}
			
			currTabSetManually = true;
		});
		$innerTab.text(currData.TabName);
		if(currData.HideTab == "True")
			$outerTab.css("display", "none");
		$tabBox.append($outerTab);
	}
	AGIMedia.Helper.disableSelection($tabBox[0]);
		
	var firstIdx = randomMode ? (Math.round(Math.random() * numTabs - 0.5)) : 0;
	var $startupInnerTab = $($tabBox.find(".AGI_Stage_InnerTab")[firstIdx]);
	highlightInnerTab($startupInnerTab);

	openImgFunc(firstIdx);
	
	if(sequenceMode)
		startSequence();
				
}

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