dir = 0; // 0 = left 1 = right
speed = 2;
imageSize = 0;  // % set to zero to use fixedWidth and fixedHeight values
fixedWidth = 75; // set a fixed width
fixedHeight = 60; // set a fixed height
spacerWidth = 5; // space between images
largeImageSize = 320; //predefined large image size
popupLeft = 100; // pixels
popupTop = 100; // pixels

dynamicScrollImagesCount = 4; //number of images to be uploaded so automatic scrolling can happen

biggest = 0;
ieBorder = 0;
totalWidth = 0;
hs3Timer = null;
var myImages = [];
preload = new Array();
var imagesInitialised = false;

function initImages(myImages) {
    imagesInitialised = true;
    for (var i = 0; i < myImages.length - 1; i++) {
        preload[i] = new Image();
        preload[i].src = myImages[i][0];
    }
}

function initScrollingImagesIfExist() {
    if (imagesInitialised) {
        initHS3()
    }
}

function initHS3() {
    if (preload[0] == null) {
    }
    else if (preload[1] == null) {
        var data = "<img src='" + preload[0].src + "' width='" + largeImageSize + "px' height='" + largeImageSize + "px'>";
        document.getElementById("largeImage").innerHTML = data;
        document.getElementById("content_details").style.width = "320px";
    }
    else {
        document.getElementById("content_details").style.width = "320px";
        document.getElementById("js_container").style.height = "295px";
        var data = "<img src='" + preload[0].src + "' width='" + largeImageSize + "px' height='" + largeImageSize + "px'>";
        document.getElementById("largeImage").innerHTML = data;
        if (myImages[0][2] != "") {
            document.getElementById("imageDesc").innerHTML = myImages[0][2];
        }
        scroll1 = document.getElementById("scroller1");
        for (var j = 0; j < myImages.length - 1; j++) {
            scroll1.innerHTML += '<img id="pic' + j + '" src="' + preload[j].src + '" alt="' + myImages[j][2] + '" title="' + myImages[j][2] + '" onmouseover="showBigPic(' + j + ',' + largeImageSize + ')">';
            if (imageSize != 0) { // use percentage size
                newWidth = preload[j].width / 100 * imageSize;
                newHeight = preload[j].height / 100 * imageSize;
            }
            else { // use fixed size
                newWidth = fixedWidth;
                newHeight = fixedHeight;
            }
            document.getElementById("pic" + j).style.width = newWidth + "px";
            document.getElementById("pic" + j).style.height = newHeight + "px";
            if (document.getElementById("pic" + j).offsetHeight > biggest) {
                biggest = document.getElementById("pic" + j).offsetHeight;
            }
            //first image no margin
            if (j != 0) {
                document.getElementById("pic" + j).style.marginLeft = spacerWidth + "px";
                totalWidth += document.getElementById("pic" + j).offsetWidth + spacerWidth;
            } else {
                document.getElementById("pic" + j).style.marginLeft = 0 + "px";
                totalWidth += document.getElementById("pic" + j).offsetWidth + spacerWidth;
            }
        }
        totalWidth += 1;
        for (var k = 0; k < myImages.length - 1; k++) { // vertically center images
            document.getElementById("pic" + k).style.marginBottom = (biggest - document.getElementById("pic" + k).offsetHeight) / 2 + "px";
        }
        if (document.getElementById && document.all) {
            ieBorder = parseInt(document.getElementById("scrollbox").style.borderTopWidth) * 2;
        }
        document.getElementById("scrollbox").style.height = biggest + ieBorder + "px";
        scroll1.style.width = totalWidth + "px";
        scroll2 = document.getElementById("scroller2");
        scroll2.innerHTML = scroll1.innerHTML;
        scroll2.style.left = (-scroll1.offsetWidth) + "px";
        scroll2.style.top = -scroll1.offsetHeight + "px";
        scroll2.style.width = totalWidth + "px";
        if (dir == 1) {
            speed = -speed;
        }
        scrollHS3(myImages);
    }
}


function scrollHS3(myImages) {
    if (myImages.length > 4) {
        //if(paused==1){
        //	return
        //}
        clearTimeout(hs3Timer);
        scroll1Pos = parseInt(scroll1.style.left);
        scroll2Pos = parseInt(scroll2.style.left);
        scroll1Pos -= speed;
        scroll2Pos -= speed;
        scroll1.style.left = scroll1Pos + "px";
        scroll2.style.left = scroll2Pos + "px";
        hs3Timer = setTimeout("scrollHS3(myImages)", 50);
        if (dir == 0) {
            if (scroll1Pos < -scroll1.offsetWidth) {
                scroll1.style.left = scroll1.offsetWidth + "px";
            }
            if (scroll2Pos < -scroll1.offsetWidth) {
                scroll2.style.left = scroll1.offsetWidth + "px";
            }
        }
        if (dir == 1) {
            if (scroll1Pos > parseInt(document.getElementById("scrollbox").style.width)) {
                scroll1.style.left = scroll2Pos + (-scroll1.offsetWidth) + "px";
            }
            if (scroll2Pos > parseInt(document.getElementById("scrollbox").style.width)) {
                scroll2.style.left = scroll1Pos + (-scroll2.offsetWidth) + "px";
            }
        }
    }
}

st = null;
function pause() {
    clearTimeout(hs3Timer);
    clearTimeout(st);
}

function reStartHS3() {
    clearTimeout(st);
    st = setTimeout("scrollHS3(myImages)", 100);
}

paused = 0;
picWin = null;

function showBigPic(p, largeImageSize) {
    if (myImages[p][1] != "") {
        paused = 1;
        if (picWin && picWin.open && !picWin.closed) {
            picWin.close();
        } // if picWin exists close it
        if (myImages[p][1].indexOf("jpg") != -1 || myImages[p][1].indexOf("gif") != -1) {
            data = "<img src='" + preload[p].src + "' width='" + largeImageSize + "px' height='" + largeImageSize + "px'>";
            document.getElementById("largeImage").innerHTML = data;
            if (myImages[p][2] != "") {
                document.getElementById("imageDesc").innerHTML = myImages[p][2];
            }
        }
    }
}

window.onfocus = function() {
    paused = 0;
    scrollHS3(myImages);
}

onunload = function() { // close the popup when leaving page
    if (picWin && picWin.open && !picWin.closed) {
        picWin.close();
    }
}