//tells jquery to call the onDocumentLoaded function when the browser is ready
$(document).ready(LoadFrontPageBanner);

//The current image showed
var currentImage = 0;

//Used to store the TimeoutID
var slideShowTimeoutID;

function LoadFrontPageBanner() 
{

    //We hide all images
    //$(".frontpage-image").hide();
    
    //We set the picture to the first one
    //'jqSetPicture(1);

    jQuery('.JquerySelect').cycle({ fx: 'fade', speed: 2000, timeout: 6000, width:902, height:265});
    

}

function jqResetTimer()
{
    clearTimeout(slideShowTimeoutID);
    slideShowTimeoutID = setTimeout("jqSlideShow()",6000);
}

//Called when the timer ticks
function jqSlideShow()
{
    var intNextImageID = parseInt(currentImage);
    if(intNextImageID == 4)
    {
        intNextImageID = 1;
    }
    else
    {
        intNextImageID++;
    }
    
    
    if($(".BannerImage" + intNextImageID)[0])
        jqSetPicture(intNextImageID);
    else
        jqSetPicture(1);
}

//Sets the picture in the box
function jqSetPicture(id)
{
    //If it is the same image, then we dont need to face in and out
    if(currentImage != id)
    {
        //Fadeout all images, and fade the new one in
        $(".BannerImage" + currentImage).fadeOut(1000);
        
        $(".BannerImage" + id).fadeIn(1000);
        
        currentImage = id;
    }
    //We reset the timer, so there will go 10 sec before it will show a new image
    jqResetTimer();
}