var SuperScroller = new Class
({
    initialize: function(elm)
    {
        this.elm = elm;
        if (this.elm.getScrollSize().y <= this.elm.getSize().y)
        {
            return;
        }

        this.fx_scroll = new Fx.Scroll(this.elm, {'link': 'cancel', 'transition': Fx.Transitions.linear, duration: 100});
        this.is_scrolling = false;
        this.scrolling_interval = 90;
        this.scrolling_interval_id = 0;

        this.elm.setStyle('overflow', 'hidden');

        this.up_arrow    = this.create_arrow_button('up').inject(this.elm, 'after');
        this.down_arrow  = this.create_arrow_button('down').inject(this.elm, 'after');
        
        this.elm.addEvents
        ({
            'mousewheel': function(evt)
            {
                var scroll_amount = evt.wheel;
                if (Browser.firefox) scroll_amount *= 5;
                if (Browser.opera) scroll_amount *= 10;
                if (Browser.ie) scroll_amount *= 10;
                this.elm.scrollTo(0, this.elm.getScroll().y - scroll_amount);
            }.bind(this),
            
            'scroll': function()
            {
                this.check_scroll();
            }.bind(this)
        });

        this.up_arrow.store('direction', 'up');
        this.up_arrow.setStyles({left: 206, bottom: 300});
        this.up_arrow.addEvents(
        {
            'mousedown': function()
            {
                this.stop_scroll();
                this.scrolling_interval_id = this.scroll.periodical(this.scrolling_interval, this, 'up');
            }.bind(this),
            'mouseup': function()
            {
                this.stop_scroll();
            }.bind(this)
        });

        this.down_arrow.setStyles({left: 206, bottom: 150});
        this.down_arrow.addEvents(
        {
            'mousedown': function()
            {
                this.stop_scroll();
                this.scrolling_interval_id = this.scroll.periodical(this.scrolling_interval, this, 'down');
            }.bind(this),
            'mouseup': function()
            {
                this.stop_scroll();
            }.bind(this)
        });

        document.addEvent('mouseup', function(evt)
        {
            this.stop_scroll();
        }.bind(this));
        
        this.check_scroll();
    },

    create_arrow_button: function(direction)
    {
        var scroll_arrow = new Element('span',
        {
            'id': 'scroll-' + direction + '-arrow',
            'styles': {'z-index': 30, 'display': 'block', 'position': 'absolute'}
        });

        return scroll_arrow;
    },

    scroll: function(direction)
    {
        if (direction == 'up')
        {
            //this.elm.scrollTo(0, this.elm.getScroll().y - 1)
            this.fx_scroll.start(0, this.elm.getScroll().y - 30);
        }
        else
        {
            //this.elm.scrollTo(0, this.elm.getScroll().y + 1)
            this.fx_scroll.start(0, this.elm.getScroll().y + 30);
        }
    },
    
    stop_scroll: function()
    {
        clearInterval(this.scrolling_interval_id);
        this.is_scrolling = false;
    },
    
    check_scroll: function()
    {
        // TODO: Not really perfomance optmizied … ;-)
        
        if (this.elm.getScroll().y == 0)
        {
            this.up_arrow.setStyle('opacity', .5);
        }
        else
        {
            this.up_arrow.setStyle('opacity', 1);
        }
        
        if (this.elm.getScroll().y == this.elm.getScrollSize().y -this.elm.getSize().y)
        {
            this.down_arrow.setStyle('opacity', .5);
        }
        else
        {
            this.down_arrow.setStyle('opacity', 1);
        }
    }
});