//jQuery code for DIP image selection control
//Steve Mee
var timeoutvar = "";
var imageCount = 0;	//this variable will be set dynamically in the code
var navButtonPath = "";


// *** THIS FUNCTION IS CALLED AFTER THE PAGE HAS LOADED ***
$(document).ready(function() {

    //Initialization
	//==============
	//hide all sliders
	$(".dip_image").hide();
    
	//set global variable to hold total number of images
	setImageCount();
    setNavButtonPath();

	//create 'move to' buttons
	//========================
   
    if(imageCount > 1)
    {
	    var moveToCode = "<div id='button1' class='movebutton'><img src='" + navButtonPath + "oncircle.png' /></div>";

	    for(i=2; i<= imageCount; i++)
	    {
		    moveToCode = moveToCode + "<div id='button" + i + "' class='movebutton'><img src='" + navButtonPath + "offcircle.png' /></div>\n";
	    }
	
	    //assign the code to the navbuttons div tag
	    $("#navbuttons").html(moveToCode);

        //Assign click code to 'move to' buttons
	    //======================================
	    $(".movebutton").click(function()
        {

    		var callingid = $(this).attr("id");
    		//strip out the last character of this string. This will give us the number of the panel to go to
    		var callingidLen = String(callingid).length;
    		var targetPanel = String(callingid).substring(callingidLen, callingidLen-1);

            moveToPanel(targetPanel);
    	});

        //assign hover code to panels
        $(".dip").hover(
            function() {
                //perform this action on hoverin
                clearInterval(timeoutvar);
            },
            function() {
                timeoutvar = setInterval("rotateDip()", 8000);
            }
        );


        //set interval to rotate panel
        timeoutvar = setInterval("rotateDip()", 8000);


    }


});



function moveToPanel(targetPanel)
{
    var currentPanel = getCurrentPanel();

    //fade out current image
    $("#panel" + currentPanel).fadeOut("slow");
    $("#panel" + currentPanel).removeClass("dip_image_selected");
    $("#panel" + currentPanel).addClass("dip_image");

    //fade in target image
    $("#panel" + targetPanel).fadeIn("slow");
    $("#panel" + targetPanel).removeClass("dip_image");
    $("#panel" + targetPanel).addClass("dip_image_selected");

    //set current panel div marker
    highlightNavButton(targetPanel);
}

function rotateDip()
{
    //move to next panel. If on last panel then move to first

    //get current panel
    var currentPanel = getCurrentPanel();
    currentPanel = parseFloat(currentPanel);    //convert string to numeric value
    var nextPanel = currentPanel + 1;

    if(nextPanel > imageCount)
    {
        nextPanel = 1;
    }

    moveToPanel(nextPanel);

}


function getCurrentPanel()
{
	var currentId = $(".dip_image_selected").attr("id");
	var currentIdLen = String(currentId).length;
	var currentPanel = String(currentId).substring(currentIdLen, currentIdLen-1);

	return currentPanel;
}



function setImageCount()
{
	//get total number of images (max number = 9 at the moment!)

    $(".dip_image_selected").each(function(){
        //there should only ever be one selected image
        imageCount = 1;
    });

	$(".dip_image").each(function(){
		//add 1 to index because index starts at 0
        imageCount = imageCount + 1;
	});
}


function setNavButtonPath()
{
    //pick up site name from hidden field on page and use this as the path to the nav button images
    navButtonPath = "/corporatev2/corporate/images/jquery/dip/";
}
	
function highlightNavButton(livePanelId)
{
	//hightlight the nav button corresponding to the live panel
	//=========================================================

	//loop through all 'movenav' objects, replacing the html contents of each with either an 'on' or an 'off' image.
	$(".movebutton").each(function(){
		//get id of current button
		var currentbuttonid = $(this).attr("id");

		//strip out the last character of this string. This will give us the number of this button
		var currentbuttonidLen = String(currentbuttonid).length;
		currentbuttonid = String(currentbuttonid).substring(currentbuttonidLen, currentbuttonidLen-1);

		if(currentbuttonid == livePanelId)
		{
			$(this).html("<img src='" + navButtonPath + "oncircle.png' />");
		}
		else
		{
			$(this).html("<img src='" + navButtonPath + "offcircle.png' />");
		}
	});

}