function ImageSlider(_thumbnailsContainer, _callback) {
    var container = document.getElementById(_thumbnailsContainer);
    var callback = _callback;
    var thumbnails = new Array();
    var slideA;
    var slideB;
    var slideWidth;
    var slideHeight;
    var slideACurrent;
    var slideBCurrent;
    var slideANext;
    var slideBNext;
    var step = 5;
    var lastMile = 10;
    var interval = 30;
    var timer;
    var type = 'vertical';
    var autoscrollDirection = 'none';
    var autoscrollInterval = 2000;
    //
    var width = 100;
    var height = 100;
    var separatorSize = 0;
    var borderSize = 0;
    var borderColor = '#ff0000';
    
    this.add = function(_tSrc) {
        var t = new Image(); t.src = _tSrc;
        thumbnails[thumbnails.length] = t;
    };
    
    this.setThumbnailWidth = function(_width) {
        width = _width;
    };
    
    this.setThumbnailHeight = function(_height) {
        height = _height;
    };
    
    this.setThumbnailSeparatorSize = function(_separatorSize) {
        separatorSize = _separatorSize;
    };
    
    this.setThumbnailBorderSize = function(_borderSize) {
        borderSize = _borderSize;
    };
    
    this.setThumbnailBorderColor = function(_borderColor) {
        borderColor = _borderColor;
    };

    this.setType = function(_type) {
	if (_type == 'horizontal') {
	    type = _type;
	} else {
	    type = 'vertical';
	}
    };
    
    this.setAutoScrollDirection = function(_direction) {
	if (_direction == 'up' || _direction == 'down' || _direction == 'left' || _direction == 'right') {
	    autoscrollDirection = _direction;
	}
    };

    this.build = function() {
	if (autoscrollDirection != 'none') {
	    if (type == 'vertical' && autoscrollDirection != 'up' && autoscrollDirection != 'down') {
		autoscrollDirection = 'none';
	    } else if (type == 'horizontal' && autoscrollDirection != 'left' && autoscrollDirection != 'right') {
		autoscrollDirection = 'none';
	    }
	}
        var innetHTML = '';
        for (var i = 0; i < thumbnails.length; i++) {
            var style = new Array();
	    style[style.length] = 'position: absolute';
	    style[style.length] = 'left: ' + (isVertical() ? '0' : i * (width + 2 * borderSize + separatorSize) + 'px');
	    style[style.length] = 'top: ' + (isVertical() ? i * (height + 2 * borderSize + separatorSize) + 'px' : '0');
	    style[style.length] = 'width:' + width + 'px';
            style[style.length] = 'height:' + height + 'px';
            if (borderSize > 0) {
                style[style.length] = 'border:' + borderSize + 'px solid ' + borderColor; 
            }
            style[style.length] = (isVertical() ? 'margin-bottom:' : 'margin-right:' )+ separatorSize + 'px';
            //style[style.length] = 'cursor:pointer';
            var divHTML = '<div style="' + style.join(';') + '">';
            divHTML += '<img src="' + thumbnails[i].src + '" alt=""';
            divHTML += callback ? ' onclick="' + callback + '(' + i + ')"' : '';
	    //divHTML += ' onmouseover="this.className = \'onimg\';" onmouseout="this.className = \'offimg\';"'; 
            divHTML += '/>';
            divHTML += '</div>';
            innetHTML += divHTML;
        }
	slideWidth = isVertical() ? width + 2 * borderSize : thumbnails.length * (width + 2 * borderSize + separatorSize);
	slideHeight = isVertical() ? thumbnails.length * (height + 2 * borderSize + separatorSize) : height + 2 * borderSize;
        slideAHTML = slideHTML(container.id + '_slideA', slideWidth, slideHeight, innetHTML);
        slideBHTML = slideHTML(container.id + '_slideB', slideWidth, slideHeight, innetHTML);
        container.innerHTML = slideAHTML + slideBHTML;
        slideA = document.getElementById(container.id + '_slideA');
        slideB = document.getElementById(container.id + '_slideB');
	slideB.style.left = (isVertical() ? parseInt(slideA.style.left) : parseInt(slideA.style.left) + slideWidth) + 'px';
        slideB.style.top = (isVertical() ? parseInt(slideA.style.top) + slideHeight : parseInt(slideA.style.top)) + 'px';
	if (autoscrollDirection != 'none') {
	    if (type == 'vertical') {
		setInterval(autoscrollDirection == 'up' ? this.moveUp : this.moveDown, autoscrollInterval);
	    } else if (type == 'horizontal') {
		setInterval(autoscrollDirection == 'left' ? this.moveLeft : this.moveRight, autoscrollInterval);
	    }
	}
    };
    
    this.moveUp = function() {
        if (timer) return false;
        slideACurrent = parseInt(slideA.style.top);
        slideBCurrent = parseInt(slideB.style.top);
        slideACurrent = slideACurrent + slideHeight <= 0 ? slideBCurrent + slideHeight : slideACurrent;
        slideBCurrent = slideBCurrent + slideHeight <= 0 ? slideACurrent + slideHeight : slideBCurrent;
        slideANext = slideACurrent - 2 * borderSize - height - separatorSize;
        slideBNext = slideBCurrent - 2 * borderSize - height - separatorSize;
        slideA.style.top = slideACurrent + 'px';
        slideB.style.top = slideBCurrent + 'px';
        up();
        digitup = false;
    };
    
    this.moveDown = function() {
        var containerHeight = container ? container.offsetHeight : 0;
        if (timer) return false;
        slideACurrent = parseInt(slideA.style.top);
        slideBCurrent = parseInt(slideB.style.top);
        slideACurrent = slideACurrent >= containerHeight ? slideBCurrent - slideHeight : slideACurrent;
        slideBCurrent = slideBCurrent >= containerHeight ? slideACurrent - slideHeight : slideBCurrent;
        slideANext = slideACurrent + 2 * borderSize + height + separatorSize;
        slideBNext = slideBCurrent + 2 * borderSize + height + separatorSize;
        slideA.style.top = slideACurrent + 'px';
        slideB.style.top = slideBCurrent + 'px';
        down();
        digitdown = false;
    };
    
    this.moveLeft = function() {
        if (timer) return false;
        slideACurrent = parseInt(slideA.style.left);
        slideBCurrent = parseInt(slideB.style.left);
        slideACurrent = slideACurrent + slideWidth <= 0 ? slideBCurrent + slideWidth : slideACurrent;
        slideBCurrent = slideBCurrent + slideWidth <= 0 ? slideACurrent + slideWidth : slideBCurrent;
        slideANext = slideACurrent - 2 * borderSize - width - separatorSize;
        slideBNext = slideBCurrent - 2 * borderSize - width - separatorSize;
        slideA.style.left = slideACurrent + 'px';
        slideB.style.left = slideBCurrent + 'px';
        left();
    };
    
    this.moveRight = function() {
        var containerWidth = container ? container.offsetWidth : 0;
        if (timer) return false;
        slideACurrent = parseInt(slideA.style.left);
        slideBCurrent = parseInt(slideB.style.left);
        slideACurrent = slideACurrent >= containerWidth ? slideBCurrent - slideWidth : slideACurrent;
        slideBCurrent = slideBCurrent >= containerWidth ? slideACurrent - slideWidth : slideBCurrent;
        slideANext = slideACurrent + 2 * borderSize + width + separatorSize;
        slideBNext = slideBCurrent + 2 * borderSize + width + separatorSize;
        slideA.style.left = slideACurrent + 'px';
        slideB.style.left = slideBCurrent + 'px';
        right();
    };
    
    function slideHTML(_id, _width, _height, _innerHTML) {
        var style = new Array();
        style[style.length] = 'width:' + _width + 'px';
        style[style.length] = 'height:' + _height + 'px';
        style[style.length] = 'position:absolute';
        style[style.length] = 'left:0';
        style[style.length] = 'top:0';
        return '<div id="' + _id + '" style="' + style.join(';') + '">' + _innerHTML + '</div>';
    };
    
    function up() {
	if (timer == null) timer = setInterval(up, interval);
        slideACurrent = parseInt(slideA.style.top);
        slideBCurrent = parseInt(slideB.style.top);
        if (slideACurrent > slideANext + lastMile) {
            slideA.style.top = slideACurrent - step + 'px';
            slideB.style.top = slideBCurrent - step + 'px';
        } else if (slideACurrent > slideANext) {
            slideA.style.top = slideACurrent - 1 + 'px';
            slideB.style.top = slideBCurrent - 1 + 'px';
        } else {
	    clearInterval(timer);
            timer = null;
        }
    };
    
    function down() {
	if (timer == null) timer = setInterval(down, interval);
        slideACurrent = parseInt(slideA.style.top);
        slideBCurrent = parseInt(slideB.style.top);
        if (slideACurrent < slideANext - lastMile) {
            slideA.style.top = slideACurrent + step + 'px';
            slideB.style.top = slideBCurrent + step + 'px';
        } else if (slideACurrent < slideANext) {
            slideA.style.top = slideACurrent + 1 + 'px';
            slideB.style.top = slideBCurrent + 1 + 'px';
        } else {
	    clearInterval(timer);
            timer = null;
        }
    };

    function left() {
	if (timer == null) timer = setInterval(left, interval);
        slideACurrent = parseInt(slideA.style.left);
        slideBCurrent = parseInt(slideB.style.left);
        if (slideACurrent > slideANext + lastMile) {
            slideA.style.left = slideACurrent - step + 'px';
            slideB.style.left = slideBCurrent - step + 'px';
        } else if (slideACurrent > slideANext) {
            slideA.style.left = slideACurrent - 1 + 'px';
            slideB.style.left = slideBCurrent - 1 + 'px';
        } else {
	    clearInterval(timer);
            timer = null;
        }
    };
    
    function right() {
	if (timer == null) timer = setInterval(right, interval);
        slideACurrent = parseInt(slideA.style.left);
        slideBCurrent = parseInt(slideB.style.left);
        if (slideACurrent < slideANext - lastMile) {
            slideA.style.left = slideACurrent + step + 'px';
            slideB.style.left = slideBCurrent + step + 'px';
        } else if (slideACurrent < slideANext) {
            slideA.style.left = slideACurrent + 1 + 'px';
            slideB.style.left = slideBCurrent + 1 + 'px';
        } else {
	    clearInterval(timer);
            timer = null;
        }
    };

    function showImage(_index) {
        image.src = images[_index].url;
    };

    function isVertical() {
	return type == 'vertical';
    };
}