//Globals
var divEle;
var timeoutID;
var step = 5;
var direction;
var clones = null;
var dirs = new Array();
var picScrollDelay = 50;


//Show loading div after a thumbnail click.
function showLoading()
{
    $("#mediaDiv").fadeOut(function()
    {
        $("#loadingDiv").fadeIn(function()
        {
            return true;
        });
    });
}
//Preload directional
function preloadDirs()
{
for (var i=0; i<30; i++)
    {
        dirs[i] = new Image(40, 40);
        dirs[i].id = 'dir_arrow';
        dirs[i].src = 'graphics/dir/' + dirs[i].id + i + '.gif'; 
    }
    
    $('<img id="' + dirs[0].id +
        '" src="' + 'graphics/dir/dir_arrow' + ((direction == 'up') ? 0 : (dirs.length - 1)) + '.gif' +
        '" onclick="redirect()" title="Click to change scroll direction" />').appendTo('#dirDiv');
}

//Animate directional arrow
function animateDir()
{
    if (direction == 'up') //Rotate down.
    {
        for (var i = 0; i < dirs.length; i++)
            setTimeout('document.getElementById(\'dir_arrow\').src = \'' + dirs[i].src + '\'', i * 5);
        direction = 'down';
    }

    else //Rotate up.
    {
        for (var i = 0; i < dirs.length; i++)
            setTimeout('document.getElementById(\'dir_arrow\').src = \'' + dirs[dirs.length - 1 - i].src + '\'', i * 5);
        direction = 'up';
    }
}

//Change direction.
function redirect()
{
    //stopScrollDiv();
    animateDir();
    //setTimeout('scrollDiv(\'' + direction+ '\')', 300);
}

//Clone thumbsDiv
function cloneDiv()
{
    var newDiv = document.createElement('div');
    
    newDiv.id = $("#thumbsDiv").attr('id') + '1';
    newDiv.innerHTML = $("#thumbsDiv").attr('innerHTML');
    newDiv.style.zIndex = $("#thumbsDiv").css('z-index');
    newDiv.style.position = 'relative';
    newDiv.style.top = '0px';
    newDiv.style.width = $("#thumbsDiv").css('width');
    newDiv.style.backgroundColor = 'black';
    newDiv.setAttribute('onmouseover', document.getElementById('thumbsDiv').getAttribute('onmouseover'));
    newDiv.setAttribute('onmouseout', document.getElementById('thumbsDiv').getAttribute('onmouseout'));
    
    clones = [document.getElementById('thumbsDiv'), newDiv];
    divEle = document.getElementById('thumbsDivJacket');
}

//Scroll the thumbs div.
function scrollDiv(dir)
{
    direction = dir;
    if (dir == 'up') {
        var top = parseInt(divEle.style.top) - step;
        divEle.style.top = top + 'px';

        if (top < (thumbsDivContainerHeight - thumbsDivHeight)) {
            var children = divEle.getElementsByTagName('div');
            var lastChild = children[children.length - 1];
            var index = (lastChild.id.indexOf('1') != -1) ? 0 : 1;
            clones[index].style.top = '0px';
            clones[index].style.position = 'relative';

            insertAfter(clones[index], lastChild);
        }

        if (Math.abs(top) > thumbsDivHeight) {
            var children = divEle.getElementsByTagName('div');
            var lastChild = children[children.length - 1];

            try {
                divEle.removeChild(children[0]);
            }

            catch (e) {
                //if it's not there then we can't remove it.
            }

            divEle.style.top = '0px';
        }
    }

    else {
        var top = parseInt(divEle.style.top) + step;
        divEle.style.top = top + 'px';

        var children = divEle.getElementsByTagName('div');
        var index = (children[0].id.indexOf('1') != -1) ? 0 : 1;

        if (top > 0) {
            divEle.style.top = '-' + thumbsDivHeight + 'px';
            divEle.insertBefore(clones[index], children[0]);
        }

        else if (top > thumbsDivContainerHeight - thumbsDivHeight) {
            try {
                divEle.removeChild(children[1]);
            }

            catch (e) {
                //if it's not there then we can't remove it.
            }
        }
    }
    
    timeoutID = setTimeout('scrollDiv(\'' + dir + '\')', picScrollDelay);
}

// This function inserts newChild after referenceChild
function insertAfter(newChild, refChild)
{
    refChild.parentNode.insertBefore(newChild, refChild.nextSibling);
}

//Cancel scrolling
function stopScrollDiv()
{
    clearTimeout(timeoutID);
}