var Scroller = {
    version      : '0.1',
    slider        : false,
    control      : false,
    frame          : false,
    maxframe    : 0,
    stop            : false,

    init : function(slider, control,frame)
    {
        this.slider = document.getElementById(slider);
        this.control = document.getElementById(control);
        this.frame = document.getElementById(frame);
        var images = this.frame.getElementsByTagName('img');
        var width = 0;
        for (var i=0; i < images.length; i++)
            width += images[i].offsetWidth+4;
        this.frame.style.width = width+"px";
        var win = this.frame.parentNode;
        this.maxframe = width-win.offsetWidth;
        var cw = this.control.offsetWidth;
        var x =win.offsetWidth*cw/width;
        this.slider.style.width = (x < cw ? x : cw+1)+"px";
        this.slider.minleft = 0;
        this.slider.maxleft = this.slider.parentNode.offsetWidth-this.slider.offsetWidth+1;
        
        this.slider.onmousedown = function(e) {
            e = e || event;
            this.posX = parseInt(this.style.left + '0');
            this.mouseX = e.clientX;
            var thisObj = this;

            document.documentElement.onmousemove = function(e) {
                e = e || event;
                var left = e.clientX - thisObj.mouseX + thisObj.posX;
                left = left > thisObj.minleft ? left : thisObj.minleft;
                left = left < thisObj.maxleft ? left : thisObj.maxleft;
                thisObj.style.left = left+"px";
                Scroller.frame.style.left = (-left * Scroller.maxframe/thisObj.maxleft)+"px";
                return false;
            };

            document.documentElement.onmouseup = function(e) {
                document.documentElement.onmousemove = null;
                document.documentElement.onmouseup = null;
                return false;
            };
        }
        document.getElementById('scroll_right').onmousedown = function() {
            Scroller.move_click(1);
            document.documentElement.onmouseup = function(e) {
                Scroller.stop = true;
                document.documentElement.onmouseup = null;
            };
        };

        document.getElementById('scroll_left').onmousedown = function() {
            Scroller.move_click(-1);
            document.documentElement.onmouseup = function(e) {
                Scroller.stop = true;
                document.documentElement.onmouseup = null;
            };
        }
    },

    move_click : function (i) {
            if (this.stop) { this.stop = false; return };
            var frm = Scroller.frame;
            var maxfrm  = Scroller.maxframe;
            var left = parseInt(frm.style.left);
            if (isNaN(left)) left = 0;
            left -= 10*i;
            left = left < 0 ? left : 0;
            left = left < -maxfrm ? -maxfrm : left;
            frm.style.left=left+"px";
            var sld = Scroller.slider;
            sld.style.left = (-left*sld.maxleft/maxfrm)+"px";
            setTimeout("Scroller.move_click("+i+")", 25);
    }
};