window.addEvent('domready', function() {
    var Scroller = new Class({
        initialize: function(divScrollerBox) {
            var divScroller = divScrollerBox.getFirst(),
                divScrollerUl = divScroller.addClass('scrollerHOn').getFirst(),
                divScrollerLi = divScrollerUl.getFirst(),
                fx = new Fx.Tween(divScrollerUl, { transition: 'back:in:out', duration: 900 }),
                iElementMargin = divScrollerLi.getStyle('margin-right').toInt(),
                iElementWidth = iElementMargin + divScrollerLi.getSize().x,
                iElementCount = divScroller.getElements('li').length,
                iNavWidth = new Element('a', {
                    'href': '#',
                    'class': 'scrollerLinkPrevious'
                }).addEvent('click', function(e) {
                    e.stop();
                    fx.start('margin-left', this._previous());
                } .bind(this)).inject(divScrollerBox,'top').getSize().x;


            new Element('a', {
                'href': '#',
                'class': 'scrollerLinkNext'
            }).addEvent('click', function(e) {
                e.stop();
                fx.start('margin-left', this._next());
            } .bind(this)).inject(divScrollerBox,'bottom');
            this.iMargin = 0;

            //redraw scroller if resized
            window.addEvent('resize', function() {
                this._calculate(divScrollerBox, divScroller, iElementMargin, iElementWidth, iElementCount, iNavWidth);
            } .bind(this)).fireEvent('resize');
        },
        _calculate: function(divScrollerBox, divScroller, iElementMargin, iElementWidth, iElementCount, iNavWidth) {
            //get the parent container width as all calculations are based on this
            divScrollerBox.setStyle('width', '100%');
            this.iScrollerWidth = divScroller.getParent().getSize().x - (iNavWidth * 2);
            var iElementsOnPage = parseInt(this.iScrollerWidth / iElementWidth);
            this.iPageWidth = (iElementsOnPage * iElementWidth);
            this.iEnd = this.iPageWidth * -((iElementCount / iElementsOnPage) - 1);
            divScroller.setStyle('width', this.iPageWidth - 10);
            divScrollerBox.setStyle('width', (this.iPageWidth + (iNavWidth * 2) + (iElementMargin * 2)) + 'px');
        },
        _previous: function() {
            if (this.iMargin < 0) {
                this.iMargin += this.iPageWidth;

                if (this.iMargin > 0) {
                    this.iMargin = 0;
                }
            }
            return this.iMargin;
        },
        _next: function() {
            if (this.iMargin > this.iEnd) {
                this.iMargin -= this.iPageWidth;
            }
            return this.iMargin;
        }
    });

    $$('div.scrollerBox').each(function(el) {
        new Scroller(el);
    });
});