var currentImg = 1;
var NUMBER_IMAGES = 0;
var WIDTH = 0;
var HEIGHT = 0;

function setImage( imgId ) {
    currentImg = imgId;    
    for (i = 1; i <= NUMBER_IMAGES; i++) {
        var slideid = "slide" + i;
        if (i == imgId) {
            document.getElementById(slideid).removeAttribute("style", "display:none;");
            loader();            
        } else {
            // Set the other lis to display none
            document.getElementById(slideid).setAttribute("style", "display:none;");
        }
    }
}

function start(num_images,width,height) {
    NUMBER_IMAGES = num_images;
    WIDTH = width;
    HEIGHT = height;
    loader();
    timeout();
}

function timeout() {
    var imgId = currentImg + 1;
    if (imgId > NUMBER_IMAGES)
        imgId = 1;
    setImage(imgId);
    setTimeout("timeout()", 5000); 
}

function loader() {
    var topImage = 'topImage' + currentImg;
    var bottomImage = 'bottomImage' + currentImg;

    var img1 = document.getElementById(topImage);
    var img2 = document.getElementById(bottomImage);

    var containerWidth = (document.getElementById('container').offsetWidth);
    var imgWidth = containerWidth * 0.95;
    var imgHeight = HEIGHT * imgWidth / WIDTH;
    img1.width = img2.width = imgWidth;
    img1.height = img2.height = imgHeight;

    document.getElementById('slider').setAttribute("style", "height:" + imgHeight + "px");
    document.getElementById(topImage).setAttribute("style",
                        "clip: rect(0px "
                        + imgWidth / 2
                        + "px "
                        + imgHeight
                        + "px 0px);");

    $("#slider").mousemove(
    function (e) {
        // get the mouse x (horizontal) position and offset of the div
        var offset = $(this).offset();
        var iTopWidth = (e.pageX - offset.left);

        // set width of topImage 
        document.getElementById(topImage).setAttribute("style",
            "clip: rect(0px "
            + iTopWidth
            + "px "
            + imgHeight
            + "px 0px);");
    });
}

function resizer() {
    var topImage = 'topImage' + currentImg;
    var bottomImage = 'bottomImage' + currentImg;

    var img1 = document.getElementById(topImage);
    var img2 = document.getElementById(bottomImage);

    var containerWidth = (document.getElementById('container').offsetWidth);
    var imgWidth = containerWidth * 0.95;
    var imgHeight = HEIGHT * imgWidth / WIDTH;
    img1.width = img2.width = imgWidth;
    img1.height = img2.height = imgHeight;
    document.getElementById('slider').setAttribute("style", "height:" + imgHeight + "px");
    loader();
}