function drawSlider(id, container, images, prev, next, w, h, t) {
    if (!window.imgSliders) {
        window.imgSliders = {};
    }
    
    var slider = {id: id, count: images.length, index: 0, width: w, height: h, timeout: t, ids: new Array()};
    
    window.imgSliders.id = slider;

    var sliderBox = window.document.getElementById(container);
    
    var html = '<table style="width: 100%;">' 
    html += '<tr><td rowspan="2" style="width: ' + w + '"><div style="float: left; overflow: hidden; width: ' + w + '; height: ' + h + '; clip:rect(0 ' + w + ' ' + h + ' 0)" onmouseover=freeze(\'' + id + '\') onmouseout=slide(\'' + id + '\') >';
    for (i = 0; i < images.length; i++) {
        var tmpId = getImageId(id, i);
        html = html + '<img id="' + tmpId + '" src="' + images[i] + '" style="position: relative; top: ' + (-(i * h)) + 'px; left: ' + (i * w) + '" />';
    }
    html = html + '</div></td><td style="text-align: center;"><a href="http://www.kitco.com" target="blank"><img style="border: 0px;" src="images/read_more_icon.png" /><br><img style="border: 0px; margin-top: 10px;" src="images/read_more_text.png" /></td></tr>';
    
    var linkPrev = '<img style="border: 0px;" src="' + prev + '">';
    var linkNext = '<img style="border: 0px;" src="' + next + '">';
    
    html = html + '<tr><td style="text-align: center;"><a id="scroll-left" href="javascript:scrollLeft(\'' + id + '\')">' + linkPrev + '</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a id="scroll-right" href="javascript:scrollRight(\'' + id + '\')">' + linkNext + '</a></td></tr>';
    html += '</table>';
    
    sliderBox.innerHTML = html;
    if (t) {
        slider.timeoutId = setTimeout("scrollRight('" + id + "'," + w + ")", t);
    }
}

function getImageId(id, index) {
    return "sld_" + id + "_" + index;
}

function scrollRight(id, px) {
    var slider = window.imgSliders.id;
    
	if (!px) {
	    if (slider.lock) {
	        return;
	    }
	    
	    px = slider.width;
	}

    slider.lock = true;
    
    if (slider.timeoutId) {
        clearTimeout(slider.timeoutId);
    }
    
    var mv = getMove(px);
    
    px = px - mv;
    
    var picToShowIndex = slider.index + 1 >= slider.count ? 0 : slider.index + 1;
    var currentPicPos = getImagePosX(window.document.getElementById(getImageId(id, slider.index)));
    var picToShow = window.document.getElementById(getImageId(id, picToShowIndex));
    var picToShowPos = getImagePosX(picToShow);
    
    if (currentPicPos > picToShowPos) {
       picToShow.style.left = (picToShowPos * 1) + (3 * 180);
    }
    
    for (i = 0; i < 3; i++) {
        var item = window.document.getElementById(getImageId(id, i));
        var left = getImagePosX(item);
        item.style.left = left * 1 - mv;
    }
    
    if (px > 0) {
        setTimeout("scrollRight('" + id + "'," + px + ")", 10);
    } else {
        slider.index = picToShowIndex;
        slider.lock = false;
        if (slider.timeout) {
            slider.timeoutId = setTimeout("scrollRight('" + id + "'," + slider.width + ")", slider.timeout);
        }
    }
}

function scrollLeft(id, px) {
    var slider = window.imgSliders.id;
    
	if (!px) {
	    if (slider.lock) {
	        return;
	    }
	    
	    px = slider.width;
	}

    slider.lock = true;
    
    if (slider.timeoutId) {
        clearTimeout(slider.timeoutId);
    }

    var mv = getMove(px);
    px = px - mv;
    
    var picToShowIndex = slider.index -1 < 0 ? slider.count - 1: slider.index - 1;
    var currentPicPos = getImagePosX(window.document.getElementById(getImageId(id, slider.index)));
    var picToShow = window.document.getElementById(getImageId(id, picToShowIndex));
    var picToShowPos = getImagePosX(picToShow);
    
    if (currentPicPos < picToShowPos) {
       picToShow.style.left = (picToShowPos * 1) - (3 * 180);
    }

    for (i = 0; i < 3; i++) {
        var item = window.document.getElementById(getImageId(id, i));
        var left = getImagePosX(item);
        item.style.left = left * 1 + mv;
    }
    
    if (px > 0) {
        setTimeout("scrollLeft('" + id + "'," + px + ")", 10);
    } else {
        slider.index = picToShowIndex;
        slider.lock = false;
        if (slider.timeout) {
            slider.timeoutId = setTimeout("scrollRight('" + id + "'," + slider.width + ")", slider.timeout);
        }
    }
}

function getMove(px) {
    if (px > 100) {
        return 10;
    } else {
        var mv = Math.floor(px / 10);
        if (mv == 0) {
            mv = 1;
        }
        return mv;
    }
}

function getImagePosX(image) {
    var left = image.style.left;
    var idx = left.indexOf("px");
    if (idx == -1) {
        idx = left.indexOf("pt");
    }
    if (idx != -1) {
        left = left.substring(0, idx).valueOf();
    }
    
    return left;
}

function freeze(id) {
    var slider = window.imgSliders.id;
    if (slider.timeoutId) {
        clearTimeout(slider.timeoutId);
    }
}

function slide(id) {
    var slider = window.imgSliders.id;
    if (slider.timeout) {
        slider.timeoutId = setTimeout("scrollRight('" + id + "'," + slider.width + ")", slider.timeout);
    }
}