var currentImageSrc = "";
var scrollId;

if (document.images) {
    pic1 = new Image();
    pic1.src = "images/HistoricBrasovWithOverlay.jpg";

    pic2 = new Image();
    pic2.src = "images/HistoricBrasov.jpg";
}

window.onload = function() {
    wireupRollover();
    wireupScroll();
    wireupLibraryImage();
};

function wireupRollover()
{
    var lis = document.getElementsByClassName("rollover");

    for (var i = 0; i < lis.length; i++) {
        lis[i].onmouseover = function() {
            document.getElementById("bannerImage").src = "images/HistoricBrasovWithOverlay.jpg";
        };
        lis[i].onmouseout = function() {
            document.getElementById("bannerImage").src = "images/HistoricBrasov.jpg";
        };
    }
}


function wireupScroll() {
    var leftscroll = document.getElementById("leftarrow");

    if (leftscroll) {
        leftscroll.onmouseover = function() {
            leftScrollStart();
        }

        leftscroll.onmouseout = function() {
            scrollStop();
        }
    }

    var rightscroll = document.getElementById("rightarrow");

    if (rightscroll) {
        rightscroll.onmouseover = function() {
            rightScrollStart();
        }

        rightscroll.onmouseout = function() {
            scrollStop();
        }
    }

}

function leftScrollStart() {
    var myScrollZone = document.getElementById("scrollzone");
    myScrollZone.scrollLeft = myScrollZone.scrollLeft - 2; // horizontal and vertical scroll increments
    scrollId = setTimeout('leftScrollStart()', 15); // scrolls every 10 milliseconds    
}



function rightScrollStart() {
    var myScrollZone = document.getElementById("scrollzone");
    myScrollZone.scrollLeft = myScrollZone.scrollLeft + 2; // horizontal and vertical scroll increments
    scrollId = setTimeout('rightScrollStart()', 15); // scrolls every 10 milliseconds    
}

function scrollStop() {
    clearTimeout(scrollId);
}


function wireupLibraryImage()
{
    var lis = document.getElementsByClassName("libraryimage");

    // wire up the mouseover event handler to show the large image
    for (var i = 0; i < lis.length; i++) {
        lis[i].onmouseover = function() {
            transitionCurrentImage(this);
        };
    }

    // set the first image on page load
    if (lis.length > 0) {
        transitionCurrentImage(lis[0]);
    }

}

function transitionCurrentImage(image) {

    if (currentImageSrc != image.getAttribute('largesrc')) {

        // display swirly background
        document.getElementById("currentimage").src = "images/clearPixel.gif";
        document.getElementById("currentdescription").innerHTML = image.getAttribute('alt');
        currentImageSrc = image.getAttribute('largesrc');

        // start loading the image from the server immediately (unless already cached)
        setTimeout("loadImage()", 0);
        
        // display the image in 500ms or when it has been loaded from the server
        setTimeout("setImage()", 500);
    }
}

function loadImage() {
    if (currentImageSrc != "") {
        var myImage = new Image();
        myImage.src = currentImageSrc;
    }
}

function setImage() {
    if (currentImageSrc != "") {
        document.getElementById("currentimage").src = currentImageSrc;
    }
}

document.getElementsByClassName = function(clsName) {
    var retVal = new Array();
    var elements = document.getElementsByTagName("*");
    for (var i = 0; i < elements.length; i++) {
        if (elements[i].className.indexOf(" ") >= 0) {
            var classes = elements[i].className.split(" ");
            for (var j = 0; j < classes.length; j++) {
                if (classes[j] == clsName) retVal.push(elements[i]);
            }
        }
        else if (elements[i].className == clsName) {
            retVal.push(elements[i]);
        }
    }
    return retVal;
}