var MooScroll = new Class({
    initialize: function(el) {
        this.el = el;
        if(this.list = this.el.getElement('ul')) {
            var items = this.list.getElements('li');    
            
            this.itemCount = items.length;   
            this.fx = new Fx.Morph(this.list, {duration:1000, transition: Fx.Transitions.Sine.easeOut}); 
                       
            this.container = new Element('div',{ 'class': 'hscroll-container' });
            this.list.inject(this.container);
            this.list.setStyle('margin', 0);
            this.btPrev = new Element('div', {'class': 'hscroll-bt-prev-off'});
            this.btNext = new Element('div', {'class': 'hscroll-bt-next'});
            this.btPrev.inject(this.el,'bottom');
            this.container.inject(this.el,'bottom');
            this.btNext.inject(this.el,'bottom');
            var li = items[0];
            this.itemWidth = li.getSize().x + parseInt(li.getStyle('margin-left')) + parseInt(li.getStyle('margin-right'));
            this.itemDisplay = Math.round(this.container.getSize().x / this.itemWidth);
            this.position = 0; 
                 
            $each(items,function (item,index) {
                var fadeIn = new Fx.Morph(item,{duration:500});  
                fadeIn.start({opacity: [0,1]});
                
            });      
            this.btPrev.addEvent('click',function() {
                this.scrollPrev();    
            }.bind(this));
            this.btNext.addEvent('click',function() {
                this.scrollNext();    
            }.bind(this));
            
        }
    },
    bindEvents: function() {
        
    },
    scrollNext: function() {
        if(this.position > -((this.itemCount - this.itemDisplay) * this.itemWidth)) {
            this.position  -= this.itemWidth;
            this.fx.start({'margin-left': [parseInt(this.list.getStyle('margin-left')), this.position]});
            this.btPrev.set('class', 'hscroll-bt-prev');
            if(this.position <= -((this.itemCount - this.itemDisplay) * this.itemWidth)) {
                this.btNext.set('class', 'hscroll-bt-next-off');
            }
        }          
    },
    scrollPrev: function() {
        if(this.position < 0) {
            this.position  +=  this.itemWidth;
            this.fx.start({'margin-left': [parseInt(this.list.getStyle('margin-left')), this.position]}); 
            this.btNext.set('class', 'hscroll-bt-next'); 
            if(this.position == 0) {
                this.btPrev.set('class', 'hscroll-bt-prev-off');
            }
        }
    }
});