// GLOBALS...
var bgOut = null;
var bgOver = null;
var colorFadeSpeed = 450; //700
var animateButtons = true; // if true, uses color fading; if false, uses css switching for instant color switch
var sidePicFadeSpeed = 900; // this is slow the first time the page loads, afterwards it's faster

var tickerX = 0;
var tickerSpeed = 2;
var tickerPosition = null;

var totalBoxes = null
var boxHeights = [];
var thisArrow = null;
var thisBoxHeight = null;
var boxMaximiseSpeed = 600;
var thisArrowID = null;

//=======================================

$(document).ready(function(){

//=======================================

// BOXES COLLAPSE/EXPAND...
// loop through all boxes and store their heights in array...
totalBoxes = jQuery(".boxContent").size();

for(i = 0; i < totalBoxes; i++)
{
	boxHeights[i] = jQuery('.boxContent:eq('+i+')').height()-1; // minus 1px is needed to prevent pic sticking out at bottom
}

// start out with all boxes minimised...
$(".boxContent").css({ "height" : "0" });

// MOUSEOVER ARROW (checks which arrow is about to be clicked...)
$(".arrow").mouseover(function(){
	thisArrow = $(".arrow").index(this)+1;
	thisArrowID = thisArrow-1;
	thisBoxHeight = parseInt(boxHeights[thisArrowID]);
	//$(this).css({ "opacity" : "0.5" });
});

// CLICK ARROW
// ... when an arrow is clicked (and if it needs to be maximised) use box height stored in array...
// maximise
$(".arrow").toggle(function(){
	$(this).parent().parent().children(".boxContent").animate({
	"height" : thisBoxHeight }, boxMaximiseSpeed );
	$(this).css({ "background-position" : "0 -54px" }); // arrow toggle

},

	function(){
	// minimise
	$(this).parent().parent().children(".boxContent").animate({
	"height" : "0" }, 250 );
	$(this).css({ "background-position" : "1px 0" }); // arrow toggle
});

// end BOXES COLLAPSE/EXPAND...

//=======================================

// COLOURED BUTTONS/TABS SCROLLER...

//=======================================
var totalTabs = 3;
var thisScroll = 0;
var tabW = 112;
var tabsPosition = 0;

// fade on mouseover...
$(".tabScrollArrow, #tabStrip a").mouseover(function(){ $(this).animate({ "opacity" : "0.4" }, 70); }); // MOUSEOVER
$(".tabScrollArrow, #tabStrip a").mouseout(function(){ $(this).animate({ "opacity" : "1"  }, 350); }); // MOUSEOUT

// scroll tabs when clicking arrows
$(".tabScrollArrow").click(function(arrowClicked){

	arrowClicked.preventDefault();

	// check which scroll button was clicked
	if(this.id == "scrollRight")
		{
			thisScroll++;
		}
	else if(this.id == "scrollLeft")
		{
			thisScroll--;
		}


	// check if scrolled too far to the left or right...
	if(tabsPosition >= totalTabs * tabW)
	{
		thisScroll = 0; //totalTabs;
		tabsPosition = 0;
	}
	else if(tabsPosition <= 0)
	{
		thisScroll = totalTabs;
		tabsPosition = totalTabs * tabW;
	}

	// SCROLL!
	$("#tabsHolder").animate({ left: -tabsPosition }, 450);

});

// END TABS SCROLLER...
//=======================================


//=======================================

// TABS (COLOURED BUTTONS) COLOUR SCHEME SWITCHER + AJAX...

//=======================================
$(".tab").click(function(clicked){

	// timed fade...
	$("#ajaxHolder").css({"opacity" : "0"});
	setTimeout(ajaxFader, 2000); //3000
	function ajaxFader()
	{
		$("#ajaxHolder").animate({"opacity" : "1" }, 750);
	}

	// find out which tab was clicked...
	var currentTab = $(this).parent().prevAll().length;

		//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

		// NB:people with js disabled (or on Safari to prevent crashing) will switch slides with query string instead of ajax
		var slideToLoad = currentTab + 1;

		// this is alternative for safari to prevent crash
		if( $.browser.safari)  //&&  $.browser.version < 523)
		{
			// whole page is reloaded here, and query string is used to load relevent slide...
		}
		else
		{
			//clicked.preventDefault();
			//$("#ajaxHolder").load(slideToLoad + ".asp"); // <<< this crashes safari
			//window.location = "index.asp?slide="+slideToLoad;
		}


		//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

	bgOut = "#6FB5D3";
	bgOver = "#0D8EAC";

	// set background colors, based on clicked tab
	// these background colors will be used for multiple color scheme changes...
	switch(currentTab)
	{
		// DEFAULT BLUE
		case 0:
		bgOut = "#6FB5D3";
		bgOver = "#0D8EAC";
		break;

		// LIME
		case 1:
		bgOut = "#AEC533";
		bgOver = "#7D9700";
		break;

		// STRAWBERRY
		case 2:
		bgOut = "#F1519E";
		bgOver = "#B9006E";
		break;

		// ORANGE
		case 3:
		bgOut = "#F49C09";
		bgOver = "#C85700";
		break;

		// GRAPE
		case 4:
		bgOut = "#BD4ED0";
		bgOver = "#871DB1";
		break;

		// AQUA
		case 5:
		bgOut = "#6380CF"; 	//"#4484E1";
		bgOver = "#43578C"; 	//"#005AA9";
		break;

		// STEEL
		case 6:
		bgOut = "#6C7189";
		bgOver = "#3C415A";
		break;

		// PINK
		case 7:
		bgOut = "#CA2204";
		bgOver = "#850303";
		break;

		/****************/
		// DEFAULT BLUE
		default:
		bgOut = "#6FB5D3";
		bgOver = "#9A1A03";
	}

	// colour scheme change happens here...
	if(!animateButtons)
	{
		// no animation, use css instant color switching
		$(".inactiveButton").css({ "background-color" : bgOut });
		$(".activeButton").css({ "background-color" : bgOver });
		$(".tabScrollArrow").css({ "background-color" : bgOut });
	}
	else
	{
		// morph button active and inactive colors to match current tab color...
		$(".inactiveButton").animate({ backgroundColor : bgOut }, colorFadeSpeed );
		$(".activeButton").animate({ backgroundColor : bgOver }, colorFadeSpeed );
		$(".tabScrollArrow").animate({ backgroundColor : bgOut }, colorFadeSpeed );
	}
});
// END TABS COLOUR SCHEME SWITCHER...
//=======================================


//=======================================

// !!! FOLLOWING MUST APPEAR AFTER TAB SWITCHER or bg colours won't be set...
// boxBigButtons mouse over and out

//=======================================
$(".boxBigButtons a").mouseover(function(){

	// see which link should be active (in this box only)
	var activeLink = $(this).parent().prevAll().length;
	var buttonsArray = $(this).parent().parent().children();

	// update hover colours...
	buttonsArray.children().css({ "background-color" : bgOut });
	$(this).css({ "background-color" : bgOver });

	// UPDATE SIDE PICS...
	buttonsArray.children(".boxSidePic").hide(); // first hide all pics in this box
	buttonsArray.children('.boxSidePic:eq('+activeLink+')').fadeIn(sidePicFadeSpeed); // and then show just the relevent pic
});

// END boxBigButtons mouse over and out


//=======================================

// FAKE CLICKS TO TRIGGER DEFAULTS...

// set first coloured button to active...
jQuery(".tab:eq(0)").click();

// MAXIMISE BOXES...
setTimeout(autoMaximise, 500);
function autoMaximise()
{
	// fake click each arrow to expand boxes...
	for(i = 0; i < totalBoxes; i++)
	{
		jQuery('.arrow:eq('+i+')').mouseover().click().mouseout();
		//jQuery("h1.expandAtStart").parent().children(".arrow").mouseover().click().mouseout();
	}

	// fake mouseover the default active button in each box...
	$(".activeButton").mouseover();

	// auto max speeds will be slower - now speed them up for user actions...
	sidePicFadeSpeed = 400;
	boxMaximiseSpeed = 350;
}
// END FAKE CLICKS
//=======================================




//=============================================

// NEWS TICKER...

//=============================================

var tickerWidth = jQuery("#newsTicker ul").width();

// set ticker text to white and use colour fading rather than opacity (looks nasty...)
$("#newsTicker ul a").css({"color" : "#FFFFFF"});

setTimeout(initTicker, 1500);
function initTicker()
{
	$("#newsTicker ul a").animate({ color : "#1B3D73" }, 1000 );
}

// short delay before ticker starts scrolling...
setTimeout(tickerScroll, 2500);
function tickerScroll()
{
	tickerX -= tickerSpeed;

	$("#newsTicker ul").css({"left" : tickerX });
	setTimeout(tickerScroll, 20);

	// reset ticker if needed...
	if(tickerX < -(tickerWidth))
	{
		tickerX = 590;
	}

}

}); // END MAIN