var arrTimeouts;
var varSlideIndex;
var varSpeed;
var varSlideTotal;

function clearAllTimeouts(){
    for (key in arrTimeouts) {
      clearTimeout(arrTimeouts[key]);  
  }  
} 

function clickShowSlide(varSlideIndexIn) {
    clearAllTimeouts();
    showSlide(varSlideIndexIn);
}

function showSlide(varSlideIndexIn) {

    if (varSlideIndex != null) {
        document.getElementById("lnkThumb" + varSlideIndex).style.border = "none";
    }

    varSlideIndex = varSlideIndexIn;
    
    if (varSlideIndex > varSlideTotal) {
        varSlideIndex = 1;
    }

    arrTimeouts["changeSlideID"] = setTimeout("showSlide(" + (varSlideIndex + 1) + ")", varSpeed * 1000);

    blendimage("imgSlide", 500);

    //set the current image as background
    document.getElementById("divSlide").style.backgroundImage = "url(" + document.getElementById("imgSlide").src + ")";
    document.getElementById("imgSlide").src = "upload/images/slideshow/slide_" + varSlideIndex + ".jpg";

    document.getElementById("lnkThumb" + varSlideIndex).style.border = "solid 1px #ffffff"; 
}

function blendimage(imageid, millisec) {
    var speed = Math.round(millisec / 100);
    var timer = 0;

    //make image transparent
    changeOpac(0, imageid);

    //fade in image
    for (i = 0; i <= 100; i++) {
        arrTimeouts["fadeSlide" + i] = setTimeout("changeOpac(" + i + ",'" + imageid + "')", (timer * speed));
        timer++;
    }
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
}

function startSlideShow(slideTotalIn, speedIn) {
    arrTimeouts = new Array();
    varSpeed = speedIn;
    varSlideTotal = slideTotalIn;
    showSlide(1);
}