var Slider = Class.create();
Slider.prototype = {
    options: {
        shift: 600
    },
    
    initialize: function(container, controlLeft, controlRight){
        this.animating = false;
        this.containerSize = {
            width: $(container).offsetWidth,
            height: $(container).offsetHeight
        };
        this.container = container;
        this.content = $(container).down();
        this.controlLeft = $(controlLeft);
        this.controlRight = $(controlRight);
        this.initLayout();
        this.initControls();
        this.dragDiv();
    },
    
    initLayout: function(){
        var sum = 0;
        var length = $$(".image-list li").length;
        for (var i=0; i<length; i++) {
            sum += $$(".image-list li")[i].getWidth() + parseInt($$(".image-list li")[i].getStyle("margin-left")) + parseInt($$(".image-list li")[i].getStyle("margin-right")); 
        };
        $('image-list').setStyle({width: sum + 'px'});
    },
    
    initControls: function(){
        this.controlLeft.href = this.controlRight.href = 'javascript:void(0)';
        Event.observe(this.controlLeft,  'click', this.shiftLeft.bind(this));
        Event.observe(this.controlRight, 'click', this.shiftRight.bind(this));
        Event.observe($('handle2'), 'mousedown', function(){
            if (typeof document.onselectstart!="undefined") {
                    document.onselectstart=new Function ("return false");
            } else {
                document.onmousedown=new Function ("return false");
                document.onmouseup=new Function ("return true");
            }
        });
        Event.observe(document.body, 'mouseup', function(){
            //IE
            document.onselectstart = null;
            //FF
            document.onmousedown = null;
            document.onmouseup = null;
        });
        if(typeof document.onselectstart!="undefined"){
                    document.onselectstart=new Function ("return false");
                }
        this.updateControls(1, 0);
    },
    
    shiftRight: function(){
        if (this.animating)
            return;
        
        var left = isNaN(parseInt(this.content.style.left)) ? 0 : parseInt(this.content.style.left);
        
        if ((left + this.options.shift) < 0) {
            var shift = this.options.shift;
            this.updateControls(1, 1);
        } else {
            var shift = Math.abs(left);
            this.updateControls(1, 0);
        }
        this.moveTo(shift);
    },
    
    shiftLeft: function(){
        if (this.animating)
            return;
        
        var left = isNaN(parseInt(this.content.style.left)) ? 0 : parseInt(this.content.style.left);
        
        var lastItemLeft = this.content.childElements().last().positionedOffset()[0];
        //var lastItemWidth = this.content.childElements().last().down('img').width;
        var lastItemWidth = this.content.childElements()[0].getWidth();
        var contentWidth = lastItemLeft + lastItemWidth;
        
        if ((contentWidth + left - this.options.shift) > this.containerSize.width) {
            var shift = this.options.shift;
            this.updateControls(1, 1);
        } else {
            var shift = contentWidth + left - this.containerSize.width;
            this.updateControls(0, 1);
        } 
        this.moveTo(-shift);
    },
    
    moveTo: function(shift){
        var scope = this;
                     
        this.animating = true;
        
        var handle_shift = shift*$('track2').getWidth()/($('image-list').getWidth() - $(this.container).getWidth());
        
        if (shift > 0) {
            if (handle_shift > parseInt($('handle2').style.left))
                handle_shift = -parseInt($('handle2').style.left);
            else
                handle_shift = -handle_shift;
        } else {
            if ((Math.abs(handle_shift) + 
                    parseInt($('handle2').style.left) + 
                    parseInt($('handle2').getWidth())) > parseInt($('track2').getWidth()))
                handle_shift = parseInt($('track2').getWidth()) - parseInt($('handle2').style.left) - parseInt($('handle2').getWidth());
            else 
                handle_shift = Math.abs(handle_shift);
        }
        
        new Effect.Move($('handle2'), {
            x: handle_shift,
            duration: 0.4,
            delay: 0,
            afterFinish: function(){
                scope.animating = false;
            }
        });
        
        new Effect.Move(this.content, {
            x: shift,
            duration: 0.4,
            delay: 0,
            afterFinish: function(){
                scope.animating = false;
            }
        });
    },
    
    updateControls: function(left, right){
        if (!left)
            this.controlLeft.addClassName('disabled');
        else
            this.controlLeft.removeClassName('disabled');
        
        if (!right)
            this.controlRight.addClassName('disabled');
        else
            this.controlRight.removeClassName('disabled');
    },    
    
    dragDiv: function()
    {
        var self = this;
        // horizontal slider control
        var slider2 = new Control.Slider('handle2', 'track2', {
            onSlide: function(v){
                scrollHorizontal(v, $(self.container), slider2);
            },
            onChange: function(v){
                scrollHorizontal(v, $(self.container), slider2);
            }
        });
        
        function scrollHorizontal(value, element, slider){
            /*element.scrollLeft = Math.round(
                    value / slider.maximum * (element.scrollWidth - element.offsetWidth)
                );*/
            
            element.childElements()[0].style.position = 'relative';

            if (Prototype.Browser.IE) {
                var left = 0;                        
                if (!!(navigator.userAgent.match(/MSIE 8/))){
                    left = isNaN(parseInt(element.childElements()[0].style.left)) ? 0 : Math.abs(parseInt(element.childElements()[0].style.left));
                }
            } else {
                var left = isNaN(parseInt(element.childElements()[0].style.left)) ? 0 : Math.abs(parseInt(element.childElements()[0].style.left));
            }
            element.childElements()[0].style.left = Math.round(
                - value / slider.maximum * (element.scrollWidth + left - element.offsetWidth)) + 'px';
        }
        // disable horizontal scrolling if text doesn't overflow the div
        if ($(this.container).scrollWidth <= $(this.container).offsetWidth) {
            slider2.setDisabled();
            $('track2').hide();
        }
    }
  
}