addLoadEvent(prepareLinks);

function prepareLinks()
{
    if (!document.getElementById) return false;
    if (!document.getElementById("ImgLibLinks")) return false;

    var links = getElementsByClassName(document.getElementById("ImgLibLinks"), "li", "*");
    //alert("links: " + links.length);
    //console.log(links.length);
    
    //set the current sample to current
    if(links[0].className == "")
    {
        links[0].className = "current";
    }

    for (var i=0; i < links.length; i++)
    {
        links[i].firstChild.onclick = function ()
        {
           g_eTransition.loadImage(this);
           getReadyNextLink(this);
           return false;
        }
    }
}

function getReadyNextLink(pImageSRC)
{
    //1st step - change the link to the next sample
    var currentLinkID = pImageSRC.parentNode.getAttribute("id")
    var currentLinkIDPrefix = currentLinkID.substring(0,currentLinkID.length-1);
    var currentLinkIDSufix = Number(currentLinkID.substring(currentLinkID.length-1,currentLinkID.length)) + 1;
    var currentLinkClass = pImageSRC.parentNode.className;
    
    //clear the curent link class to make the link disappear
    pImageSRC.parentNode.className = "";
    
    //in case we reach the end of the available images we need to go back to the first one;
    if (!document.getElementById(currentLinkIDPrefix + currentLinkIDSufix))
    {
        document.getElementById(currentLinkIDPrefix + "1").className = currentLinkClass;
    }
    else
    {
        document.getElementById(currentLinkIDPrefix + currentLinkIDSufix).className = currentLinkClass;
    }
    
    //2nd step - change the sample info for the new sample
    var SampleInfoArray = getElementsByClassName(document.getElementById("Samples"), "div", "*")
    for (var i=0; i<SampleInfoArray.length; i++)
    {
        if(SampleInfoArray[i].className.indexOf("current") != -1)
        {
            //increment the numeric part of the ID
            if(SampleInfoArray[i].getAttribute("id").indexOf("Sample") != -1)
            {
                var oldSample = SampleInfoArray[i].getAttribute("id");
                if (i == SampleInfoArray.length-1)
                {
                    var newSample = SampleInfoArray[0].getAttribute("id");                
                }
                else
                {
                    var newSample = SampleInfoArray[i+1].getAttribute("id");
                }
            }
        }
    }
    var oldSampleClass = document.getElementById(oldSample).className;
    var newSampleClass = document.getElementById(newSample).className;
    //swap classes over
    document.getElementById(oldSample).className = newSampleClass;
    document.getElementById(newSample).className = oldSampleClass;
	
	//first hide thecurrent sample info; in case the sample markup doesn it exist we still want the image to animate
    //setTimeout('toggleSampleInfo("' + oldSample  + '", "false")', 100);
	//setTimeout('toggleSampleInfo("' + newSample  + '", "true")', 1200);
}

function toggleSampleInfo(pDOMElement, pVisible)
{
    //console.log(pDOMElement, pVisible);
    if (!document.getElementById) return false;
    if (document.getElementById(pDOMElement))
    {
        if(pVisible = "true")
        {
            //console.log("fire if");
            document.getElementById(pDOMElement).style.visibility = "visible";       
        }
        else if(pVisible = "false")
        {           
            //console.log("fire else");
            document.getElementById(pDOMElement).style.visibility = "hidden";        
        }
    }
}