var iScroller = 0;
var iMaxVisible = 5;
var iLastVisibleID = iMaxVisible;

function getselected()
{
    var oDiv;
    var iSelectedID;

    for(var i=1; i <= iTotalImages; i++)
    {
        oDiv = document.getElementById('thumb' + i);

        if(oDiv)
        {
            if(oDiv.className == 'selected')
            {
                iSelectedID = i;
                break;
            }
        }
        else
        {
            break;
        }
    }

    return iSelectedID;
}

function scrollleft()
{

    var selectedid = getselected();
    var previd = selectedid - 1;
    var scrollmin = iTotalImages - iMaxVisible;

    if(previd > 0)
    {
        var oSelectedDiv = document.getElementById('thumb' + selectedid);

        if(oSelectedDiv)
        {
            oSelectedDiv.className = 'thumbnail';
        }

        showimage(previd, "");

        if(iScroller == previd)
        {
            //scroll required
            var oLeftImage = document.getElementById('thumb' + iLastVisibleID);
            oLeftImage.style.display = 'none';

            iLastVisibleID--;
            iScroller--;
        }

        var oHilightDiv = document.getElementById('image' + previd);
        var oHilightThumbDiv = document.getElementById('thumb' + previd);

        if(oHilightDiv)
        {
            oHilightDiv.style.display = 'inline';
            oHilightThumbDiv.className = 'selected';
        }
    }

}

function scrollright()
{
    var selectedid = getselected();
    var nextid = selectedid + 1;

    if(nextid <= iTotalImages)
    {
        var oSelectedDiv = document.getElementById('thumb' + selectedid);

        if(oSelectedDiv)
        {
            oSelectedDiv.className = 'thumbnail';
        }

        showimage(nextid, "");

        if(iLastVisibleID == selectedid)
        {
            //scroll required
            iScroller++;
            var oLeftImage = document.getElementById('image' + iScroller);
            var oLeftImageThumb = document.getElementById('thumb' + iScroller);
            oLeftImage.style.display = 'none';
            iLastVisibleID++;
        }

        var oHilightDiv = document.getElementById('image' + nextid);
        var oHilightThumbDiv = document.getElementById('thumb' + nextid);

        if(oHilightDiv)
        {
            oHilightDiv.style.display = 'inline';
            oHilightThumbDiv.className = 'selected';
        }
    }

}

function showimage(xid, ximagepath)
{
    var oMainImage = document.getElementById('masterimage');
    var oMainCaption = document.getElementById('mastercaption');

    var oThumb = document.getElementById('thumb' + xid);
    var oThumbCaption = document.getElementById('caption' + xid);

    if(oThumb)
    {
        if(ximagepath == "")
        {
            oMainImage.src = oThumb.src.replace("thumbg_", "thumb500_");
        }
        else
        {
            oMainImage.src = ximagepath;
        }
        oMainCaption.innerHTML = oThumbCaption.innerHTML;
    }
}