var menuItem=4;					//	Where the timer has got to.  Initially 1 less than the menu item you want to display first
var timeBetweenItems = 8000;	//	Time (in milliseconds) between changes in the menu
var menuTimer;					//	Handler for the timer
var justLoaded = true;			//	Set to true at start of page

//	pre-load the images
Image1= new Image(185, 75);
//Image1.src = "/local/images/homemenu/bureau.png";
Image1.src = "/local/images/homemenu/payformance.png";
Image2= new Image(185, 75);
Image2.src = "/local/images/homemenu/construct.png";
Image3= new Image(185, 75);
Image3.src = "/local/images/homemenu/ltd.png";
Image4= new Image(185, 75);
Image4.src = "/local/images/homemenu/pay.png";
Image5= new Image(441, 300);
Image5.src = "/local/images/homemenu/logo.png";
Image6= new Image(441, 300);
Image6.src = "/local/images/homemenu/2.png";
Image7= new Image(441, 300);
Image7.src = "/local/images/homemenu/3.png";
Image8= new Image(441, 300);
Image8.src = "/local/images/homemenu/4.png";
Image9= new Image(441, 300);
Image9.src = "/local/images/homemenu/5.png";
Image10= new Image(14, 75);
Image10.src = "/local/images/homemenu/arrow.png";
Image11= new Image(1, 75);
Image11.src = "/local/images/homemenu/noarrowbg.png";


$(document).ready(function(){	//	Runs when the page has loaded
	
	//	hide the logo
	$("#image").hide(0);
	//	animate the logo
	/*options = {percent: 100};
	$("#image").stop(true, true).show("scale", options, 2000);*/

	//	start the timer to rotate the menu
	nextMenuTimer();
	menuTimer = setInterval(nextMenuTimer, timeBetweenItems);
	
	//	handle the 'hovers' on the menu
	$('#item2').mouseover(function() {
	  hoverOver(2);
	});
	$('#item2').mouseout(function() {
	  hoverOut(2);
	});
	$('#item3').mouseover(function() {
	  hoverOver(3);
	});
	$('#item3').mouseout(function() {
	  hoverOut(3);
	});
	$('#item4').mouseover(function() {
	  hoverOver(4);
	});
	$('#item4').mouseout(function() {
	  hoverOut(4);
	});
	$('#item5').mouseover(function() {
	  hoverOver(5);
	});
	$('#item5').mouseout(function() {
	  hoverOut(5);
	});
	
});

function hoverOver(itemNo)
{
	clearInterval(menuTimer);
	changeTo(itemNo);
}

function hoverOut(itemNo)
{
	changeBack(itemNo);
	nextMenuTimer();
	menuTimer = setInterval(nextMenuTimer, timeBetweenItems)
}

function changeTo(itemNo)
{	//	Turns on the new menu item by making the arrow visiable
	changeBack(menuItem)
	switch (itemNo)	//	
	{
	case 2:
		$("#imageBar").html("Payform: offers a fully managed, PAYE umbrella solution with the benefit of being able to offset expenses.");
		$("#item2Arrow").stop(true, true).fadeIn("fast");
		$("#item2").css('background-image', "none");
		if (!(jQuery.browser.msie && jQuery.browser.version == 6))	//	Detects ie6.  Okay this is naughty but naughty is the spice of life
			$("#item2").css('background-color', "#cccccc");
		break;
	case 3:
		$("#imageBar").html("Constructform: offers complete administrative support for the modern, self employed construction worker.");
		$("#item3Arrow").stop(true, true).fadeIn("fast");
		$("#item3").css('background-image', "none");
		if (!(jQuery.browser.msie && jQuery.browser.version == 6))
			$("#item3").css('background-color', "#cccccc");
		break;
	case 4:
		$("#imageBar").html("Ltdform: offers complete accounting support for individuals who wish to run their own limited company.");
		$("#item4Arrow").stop(true, true).fadeIn("fast");
		$("#item4").css('background-image', "none");
		if (!(jQuery.browser.msie && jQuery.browser.version == 6))
			$("#item4").css('background-color', "#cccccc");
		break;
	case 5:
		$("#imageBar").html("Established by experts in payroll and accounting service provision, Payformance's goal is to deliver genuinely outstanding service to individual workers, recruitment agencies and businesses alike.");
		$("#item5Arrow").stop(true, true).fadeIn("fast");
		$("#item5").css('background-image', "none");
		if (!(jQuery.browser.msie && jQuery.browser.version == 6))
			$("#item5").css('background-color', "#cccccc");
		break;
	}
	//	the fade transition is handled by the simple fact of CSS where if you have a background and a foreground image, only the foreground one is seen.  If you then fade this out to opasity 0 (or display equals none, or using JQuery), the background merges 'through' it, to be seen.
	if (!justLoaded)
	{
		source="/local/images/homemenu/"+bgImage+".png";
		document.getElementById("image").src=source;
		$("#image").stop(true, true).show(0);
	}
	source="url(/local/images/homemenu/"+itemNo+".png)";
	$("#imageWrapper").css('background-image', source);
	$("#image").stop(true, true).fadeOut("slow");
	bgImage=itemNo;
	justLoaded = false;
}

function changeBack(itemNo)
{	//	turns off the menu item by making the arrow invisiable
	switch (itemNo)
	{
	case 2:
		$("#item2Arrow").stop(true, true).fadeOut("fast");
		$("#item2").css('background-image', "url(/local/images/homemenu/noarrowbg.png)");
		if (!(jQuery.browser.msie && jQuery.browser.version == 6))
			$("#item2").css('background-color', "transparent");
		break;
	case 3:
		$("#item3Arrow").stop(true, true).fadeOut("fast");
		$("#item3").css('background-image', "url(/local/images/homemenu/noarrowbg.png)");
		if (!(jQuery.browser.msie && jQuery.browser.version == 6))
			$("#item3").css('background-color', "transparent");
		break;
	case 4:
		$("#item4Arrow").stop(true, true).fadeOut("fast");
		$("#item4").css('background-image', "url(/local/images/homemenu/noarrowbg.png)");
		if (!(jQuery.browser.msie && jQuery.browser.version == 6))
			$("#item4").css('background-color', "transparent");
	case 5:
		$("#item5Arrow").stop(true, true).fadeOut("fast");
		$("#item5").css('background-image', "url(/local/images/homemenu/noarrowbg.png)");
		if (!(jQuery.browser.msie && jQuery.browser.version == 6))
			$("#item5").css('background-color', "transparent");
		break;
	}
}

function nextMenuTimer()
{	//	Increases the menuItem counter and turns off the old menu item and on the new one
	changeBack(menuItem);
	menuItem = menuItem+1;
	if (menuItem > 5)
		menuItem = 2;
	changeTo(menuItem);
}