var ctlPreviousFrame = GetControl("PreviousFrame");
var ctlNextFrame = GetControl("NextFrame");
var ctlPrimaryFrame = GetControl("ctl00_MainContent_PrimaryFrame");

function LoadByIndex()
{
    $("#ctl00_MainContent_PrimaryFrame").fadeOut("fast", LoadByIndex_CallBack);
    $("#NextFrame").fadeOut("fast");
    $("#PreviousFrame").fadeOut("fast");
    
}

function LoadByIndex_CallBack()
{
    var prevIndex = GetPreviousIndex();
    var nextIndex = GetNextIndex();

    SetImage(ctlPreviousFrame, GetThumbPath(prevIndex));
    SetImage(ctlNextFrame, GetThumbPath(nextIndex));
    SetSecureImage(ctlPrimaryFrame, GetPhotoPath(index));

    $("#ctl00_MainContent_PrimaryFrame").fadeIn("fast");
    $("#NextFrame").fadeIn("fast");
    $("#PreviousFrame").fadeIn("fast");
    
}

function SetNextIndex()
{
    index++;
    
    if ( index > pics.length -1 ) {
        index = 0;
    }
    
    LoadByIndex();
}

function SetPreviousIndex()
{
    index--;
    
    if ( index < 0 ) {
        index = pics.length - 1;
    }

    LoadByIndex();
}

function SetSecureImage(control, src)
{
    control.style.backgroundImage = "url(" + src + ")";
}

function SetImage(control, src)
{
    control.src = src;
}

function GetThumbPath(index)
{
    return "/Images/Thumbs/" + pics[index];
}

function GetPhotoPath(index)
{
    return "/Images/Galley/" + pics[index];
}

function GetPreviousIndex()
{
    var result = index - 1;
    
    if (result < 0) {
        result = pics.length - 1;
    }
    
    return result;
}

function GetNextIndex()
{
    var result = index + 1;
    
    if (result > pics.length - 1) {
        result = 0;
    }
    
    return result;
}

function GetControl(id)
{
    return document.getElementById(id);
}