window.addEvent('domready', function() {
            var Scroller = new Class({
                initialize: function(sScrollerId, iElementCount, iElementsToShow) {

                    var divScroller = $(sScrollerId),
                        divScrollerUl = divScroller.getElement('ul'),
                        divScrollerLi = divScrollerUl.getElement('li'),
                        linkPrevious = new Element('a', {
                            'id': sScrollerId + 'Previous',
                            'href': '#',
                            'class': 'scrollerLinkPrevious'
                        }),
                        linkNext = new Element('a', {
                            'id': sScrollerId + 'Next',
                            'href': '#',
                            'class': 'scrollerLinkNext'
                        }),
                        fx = new Fx.Tween(divScrollerUl, { transition: 'back:in:out', duration: 900 });


                    this.iMargin = 0;
                    this.iElementWidth = divScrollerLi.getStyle('margin-right').toInt() + divScrollerLi.getSize().x;
                    this.iElementCount = iElementCount;
                    linkPrevious.inject(divScroller, 'before');
                    linkNext.inject(divScroller, 'after');
                    new Element('div',{'class':'spacer'}).inject(linkNext,'after');

                    divScroller.setStyles({
                        border: '0',
                        overflow: 'hidden'
                    });

                    this._calculate(divScroller);

                    //add previous click even
                    $(sScrollerId + 'Previous').addEvent('click', function(e) {
                        e.stop();
                        fx.start('margin-left', this._previous());
                    } .bind(this));

                    //add next click event
                    $(sScrollerId + 'Next').addEvent('click', function(e) {
                        e.stop();
                        fx.start('margin-left', this._next());
                    } .bind(this));

                    //redraw scroller if resized
                    window.addEvent('resize', function() {
                        this._calculate(divScroller);
                    } .bind(this));
                },
                _calculate: function(divScroller) {
                    //get the parent container width as all calculations are based on this
                    this.iScrollerWidth = $('ContentContainer').getSize().x - 40;
                    var iElementsOnPage = parseInt(this.iScrollerWidth / this.iElementWidth);
                    this.iPageWidth = iElementsOnPage * this.iElementWidth;
                    this.iEnd = this.iPageWidth * -((this.iElementCount / iElementsOnPage) - 1);
                    divScroller.setStyle('width', this.iPageWidth);
                },
                _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;
                }
            });

            //find all scrollers on the page and initiate them
            var aScrollers = $$('div.scrollerH');
            for (var i = 0, iScrollers = aScrollers.length; i < iScrollers; i++) {
                new Scroller(aScrollers[i].id, aScrollers[i].getElements('li').length);
            }
        });