RelatedProductView = Class.create();
RelatedProductView.prototype = 
{
    initialize: function(id, scrollLeftId, scrollRightId, visibleRange) 
    {
        this.holder = $(id);
        this.scrollLeft = $(scrollLeftId);
        this.scrollRight = $(scrollRightId);
        this.visibleRange = visibleRange;
        this.position = 0;
        this.in_scroll = false;                                          
        this.in_fast_scroll = false;
        this.in_scroll_top_left = false;
        this.in_scroll_to_right = false;
        this.slow_scroll_time = 1;
        this.fast_scroll_time = 0.33;
        

        this.ul = this.holder.getElementsBySelector("ul")[0];
        this.items = this.ul.getElementsBySelector("li");
        if (this.items.length > 0) {
            this.elementWidth = this.items[0].getWidth();
            
            this.scrollLeft.observe("click", this.doScrollLeftClick.bind(this));
            this.scrollRight.observe("click", this.doScrollRightClick.bind(this));

            this.scrollLeft.observe("mouseover", this.doScrollLeftOver.bind(this));
            this.scrollLeft.observe("mouseout", this.doScrollLeftOut.bind(this));
            this.scrollRight.observe("mouseover", this.doScrollRightOver.bind(this));
            this.scrollRight.observe("mouseout", this.doScrollRightOut.bind(this));
            this.checkEnabled();
        }

        this.question = $('question');
        this.setka = $('setka');
        if (this.question) {

            this.question.observe('click', this.respond_question_click.bind(this));

            this.setka.observe('click', this.respond_question_click.bind(this));
        }
    },

    respond_question_click: function(event)
    {
        new Effect.toggle('setka', 'appear');
    },

    doScrollLeftOver: function (event) {
        this.in_scroll_top_left = true;
        this.in_scroll_to_right = false;
        this.checkContinueScroll();
    },

    doScrollLeftOut: function (event) {
        this.in_scroll_top_left = false;
        this.in_scroll_to_right = false;
    },

    doScrollRightOver: function (event) {
        this.in_scroll_top_left = false;
        this.in_scroll_to_right = true;
        this.checkContinueScroll();
    },

    doScrollRightOut: function (event) {
        this.in_scroll_to_right = false;
        this.in_scroll_top_left = false;
    },

    checkEnabled: function ()
    {
        if (this.position >= 0) 
        {
            this.scrollLeft.disabled = true;
        }
        else 
        {
            this.scrollLeft.disabled = false;
        }
        if (this.position <= (this.visibleRange - this.items.length)) 
        {
            this.scrollRight.disabled = true;
        }
        else 
        {
            this.scrollRight.disabled = false;
        }
    },

    checkContinueScroll: function()
    {
        if (this.in_scroll_top_left) this.doScrollLeft(null, 1, this.slow_scroll_time);
        if (this.in_scroll_to_right) this.doScrollRight(null, 1, this.slow_scroll_time);
    },

    doScrollTo: function (new_position, duration)
    {
        this.in_scroll = true;
        this.scroll_to = new_position;
        var me = this;
        this.current_move = new Effect.Move(this.ul, {y: 0, x: new_position * this.elementWidth, mode: 'absolute', duration: duration,
            afterFinish:
                function() {
                    me.in_fast_scroll = false;
                    if (me.current_move != null) {
                        me.current_move = null;
                        me.position = new_position;
                        me.checkEnabled();
                        me.in_scroll = false;
                        me.checkContinueScroll();
                    }
                }
            });
    },

    doScrollLeftClick: function(event)
    {
        if (event != null) Event.stop(event);
        if (this.in_fast_scroll) return;
        if (this.in_scroll && this.scroll_to == 0) return;
        if (this.current_move != null)
        {
            this.current_move.cancel();
            this.in_scroll = false;
            this.current_move = null;
        }
        this.in_fast_scroll = true;
        this.doScrollLeft(event, 4, this.fast_scroll_time);
    },

    doScrollRightClick: function(event)
    {
        if (event != null) Event.stop(event);
        if (this.in_fast_scroll) return;
        if (this.in_scroll && this.scroll_to == (this.visibleRange - this.items.length)) return;
        if (this.current_move != null)
        {
            this.current_move.cancel();
            this.in_scroll = false;
            this.current_move = null;
        }
        this.in_fast_scroll = true;
        this.doScrollRight(event, 4, this.fast_scroll_time);
    },

    doScrollLeft: function (event, step, duration)
    {
        if (this.in_scroll) return;
        var new_position = this.position + step;
        if (new_position > 0) {
            new_position = 0;
        }
        this.doScrollTo(new_position, duration);
    },
    
    doScrollRight: function (event, step, duration)
    {
        if (this.in_scroll) return;
        var new_position = this.position - step;
        if (new_position < (this.visibleRange - this.items.length)) {
            new_position = (this.visibleRange - this.items.length);
        }
        this.doScrollTo(new_position, duration);
    }
    
}