/************************************** Splendid *************************************
 * Creation Date:	3rd July 2007
 * Edited ----------------------------------------------------------------------------
 *		By:	    On:
 * Description -----------------------------------------------------------------------
 *		This file contains the functions for loading/changing the city images
 *
 *      Called by html page
 *          preLoadImages()
 *          showSlideshowImage( i )
 *
 **************************************************************************************/

/********************************** Global Variables *********************************/
// Speed in milliseconds
var fadeSpeed = 1000;

// Specify the image files in an array
var preLoad = new Array();
var currImgIdx = 0;

/********************************** Public Functions *********************************/

/****
 * Preloads the images in the array so that they're there to use when needed.
 * Image data in imageDataDiv as innerHTML 
 * (<image src>:<image alt>|<image src>:<image alt>)
 ****/
function preLoadImages()
{
    for (i=0; i<Pic.length; i++)
    {
        preLoad[i] = new Image();
        preLoad[i].src = Pic[i].src;
        preLoad[i].alt = Pic[i].alt;
    }
}

/****
 * Takes the position of the image in the image array and displays it in the slideshow mode
 ****/
function showSlideshowImg( i )
{
    // Try to pre-load slideshow images, if not already loaded...
    if(preLoad.length == 0)
	    preLoadImages();
	
	// If not already loaded, then change the image...
	if( currImgIdx != i )
	{
	    // Remove the highlight class from the thumbnail
        $('#cityImg'+currImgIdx).css('border', '1px solid #000000');
        
	    // Update the global variable to say which image to display
	    currImgIdx = i;

	    // fade current image out
        $('#slideshowImage').fadeOut(fadeSpeed, function(){
            // Change the image and text
            document.getElementById('slideshowImage').src = preLoad[currImgIdx].src;
            document.getElementById('slideshowImage').alt = preLoad[currImgIdx].alt;
            
            // Can only really have text if 3 pics or less.
            if( preLoad.length < 4 )
                document.getElementById('picDesc').innerHTML = preLoad[currImgIdx].alt
            else    
                document.getElementById('picDesc').style.display = 'none';
            
            // Move the highlighter on the thumbnail
            $('#cityImg'+currImgIdx).css('border', '1px solid #FFFFFF');

            // Fade it back in.
            $('#slideshowImage').fadeIn(fadeSpeed);
        });
    } 
    
    // Just stops the href doing anything...
    return false;    
}