//A timer will be fired in 5 seconds to call getNextImage()
var c_interval = 3000;
var timeout;

function play()
{
    document.getElementById('btnPrevious').style.visibility = 'hidden';
    document.getElementById('btnNext').style.visibility = 'hidden';
    document.getElementById('btnPause').style.visibility = 'visible';
    document.getElementById('btnPlay').style.visibility = 'hidden';
    
    timeout = window.setTimeout('nextImage()', c_interval);
}

function pause()
{
    document.getElementById('btnPrevious').style.visibility = 'visible';
    document.getElementById('btnNext').style.visibility = 'visible'
    document.getElementById('btnPause').style.visibility = 'visible';
    document.getElementById('btnPlay').style.visibility = 'visible';

    window.clearTimeout(timeout);
}

function nextImage()
{
    CallServer('next;' + document.getElementById('ctl00_ContentPlaceHolder1_tdCount').innerHTML, '');
}

function previousImage()
{
    CallServer('previous;' + document.getElementById('ctl00_ContentPlaceHolder1_tdCount').innerHTML, '');
}
          
function ReceiveServerData(rValue)
{
    //Receive server's response of a string rValue, which is prepared in the server's function
    //GetCallbackResult()
    var wds = rValue.split(';');
    //Assign the transition effect
    document.getElementById('ctl00_ContentPlaceHolder1_photo').style.filter = wds[1];
    //Preload the image file from server.  When finishing download, imageLoaded function will be called
    //with the img object as the argument                           
    var img  = new Image();
    
    if (document.getElementById('btnPlay').style.visibility == 'hidden')
    {
        img.onload = function(){ imageLoadedPlay(this); }
    }
    else
    {
        img.onload = function(){ imageLoaded(this); }
    }
    img.onerror = function(){ imageError(this); }
    img.onabort = function(){ imageError(this); }
    img.src = wds[0]; 
    //set counter
    document.getElementById('ctl00_ContentPlaceHolder1_tdCount').innerHTML = wds[2];    
    //set title in design gallery
    var tdDesign = document.getElementById('ctl00_ContentPlaceHolder1_tdDesignTitle');
    if (tdDesign != null)
        document.getElementById('ctl00_ContentPlaceHolder1_tdDesignTitle').innerHTML = wds[3];                     
}
function imageError(img)
{
    //If image download errors occur, this function will be called.
    timeout = window.setTimeout('nextImage()', 1000);
}
function imageLoaded(img)
{
    var photo = document.getElementById('ctl00_ContentPlaceHolder1_photo');   //Find the image control object
    
    var isMSIE = /*@cc_on!@*/false;

    if (isMSIE)
    {
        photo.filters[0].apply();                       //Apply the transition effect
        photo.filters[0].play();                        //Play the effect and display the new image
    }
    
    photo.src = img.src;                            //Assign the image to the image control
    
    //timeout = window.setTimeout("nextImage()", c_interval);//Initiate the next request
}
function imageLoadedPlay(img)
{
    var photo = document.getElementById('ctl00_ContentPlaceHolder1_photo');   //Find the image control object
    
    var isMSIE = /*@cc_on!@*/false;

    if (isMSIE)
    {
        photo.filters[0].apply();                       //Apply the transition effect
        photo.filters[0].play();                        //Play the effect and display the new image
    }
    
    photo.src = img.src;                            //Assign the image to the image control
    
    timeout = window.setTimeout('nextImage()', c_interval);//Initiate the next request
}