/************************************************
*   scrollerMoo v.0                             *
*   Http: WwW.developer.ps/moo/scrollermoo      *
*   Dirar Abu Kteish dirar@zanstudio.com        *
*   The code was inspired from jd.gallery.js    *
*    and jd.gallery.css. WebSite:               *
*    smoothgallery.jondesign.net                *
/***********************************************/

var scrollerMoo = new Class({
    initialize: function(element, options) {
		this.setOptions({
			steps: 4, 
			wrapperClass: 'div.scrollerMooWrapper',
			scrollerItemSelector: 'div.scrollerMooItem'			
	    }, options);
	    this.currentPos = 0;
	    this.scrollerItems = null;
	    this.scrollerElement = element;
	    this.wrapperDiv = element.getElement(this.options.wrapperClass);
	    this.scrollEff = new Fx.Scroll(this.wrapperDiv, {wait: false,duration: 1000,
                                        offset: {'x': -3, 'y': 0},
                                        transition: Fx.Transitions.Quad.easeInOut
                        });
	    this.initScrollerMoo();
	    
	},
	initScrollerMoo: function() {
    var ele = this.scrollerElement;
		var options = this.options;
		this.scrollerItems = this.wrapperDiv.getElements(options.scrollerItemSelector);

    new Element('div').addClass('spacer').injectAfter(this.wrapperDiv);

		new Element('a').addClass('left').addEvent(
			  'click',function(){this.scrollToItem(-1);}.bind(this)).injectBefore(this.wrapperDiv);
    
    //new Element('div').addClass('group').injectAfter(this.wrapperDiv);
    new Element('div').addClass('clear').injectAfter(this.wrapperDiv);
    new Element('a', {id: 'group5'}).addClass('group2').addEvent('click',function(){
        this.scrollToPage(5);
    }.bind(this)).injectAfter(this.wrapperDiv);
    new Element('a', {id: 'group4'}).addClass('group2').addEvent('click',function(){
        this.scrollToPage(4);
    }.bind(this)).injectAfter(this.wrapperDiv);
    new Element('a', {id: 'group3'}).addClass('group2').addEvent('click',function(){
        this.scrollToPage(3);
    }.bind(this)).injectAfter(this.wrapperDiv);
    new Element('a', {id: 'group2'}).addClass('group2').addEvent('click',function(){
        this.scrollToPage(2);
    }.bind(this)).injectAfter(this.wrapperDiv);
    new Element('a', {id: 'group1'}).addClass('group2').addEvent('click',function(){
        this.scrollToPage(1);
    }.bind(this)).injectAfter(this.wrapperDiv);
    new Element('a', {id: 'group0'}).addClass('group1a').addEvent('click',function(){
        this.scrollToPage(0);
    }.bind(this)).injectAfter(this.wrapperDiv);
    new Element('div').addClass('clear').injectAfter(this.wrapperDiv);

		new Element('a').addClass('right').addEvent(
        'click',function(){this.scrollToItem(1);}.bind(this)).injectAfter(this.wrapperDiv);

	},
	scrollToItem: function(dir) {
        var move = dir * this.options.steps;
        var index = (this.scrollerItems[this.currentPos+move]) ? this.currentPos+move : ((this.currentPos+move) > 0) ? this.scrollerItems.length-1 : 0;
        //alert(index);
        var selected_page = index / 4;
        if (selected_page <= 5) {
	          document.getElementById('group0').setAttribute('class', 'group1');
	          document.getElementById('group1').setAttribute('class', 'group2');
    	      document.getElementById('group2').setAttribute('class', 'group2');
	          document.getElementById('group3').setAttribute('class', 'group2');
	          document.getElementById('group4').setAttribute('class', 'group2');
	          document.getElementById('group5').setAttribute('class', 'group2');
	      }
        if (selected_page == 0) {
	          document.getElementById('group0').setAttribute('class', 'group1a');
	      } else {
            document.getElementById('group'+selected_page).setAttribute('class', 'group2a');
        }	      
        if(((index + 1) >= this.scrollerItems.length) && (index % this.options.steps) != 0){return;}
        this.scrollEff.toElement(this.scrollerItems[index]);
        this.currentPos = index;       
	},
	scrollToPage: function(dir) {
	      document.getElementById('group0').setAttribute('class', 'group1');
	      document.getElementById('group1').setAttribute('class', 'group2');
	      document.getElementById('group2').setAttribute('class', 'group2');
	      document.getElementById('group3').setAttribute('class', 'group2');
	      document.getElementById('group4').setAttribute('class', 'group2');
	      document.getElementById('group5').setAttribute('class', 'group2');
        if (dir == 0) {
	          document.getElementById('group0').setAttribute('class', 'group1a');
	      } else {
            document.getElementById('group'+dir).setAttribute('class', 'group2a');
        }
        var move = dir * this.options.steps;
        var index = move;
        //alert(index);
        if(((index + 1) >= this.scrollerItems.length) && (index % this.options.steps) != 0){return;}
        this.scrollEff.toElement(this.scrollerItems[index]);
        this.currentPos = index;       
	}
});
scrollerMoo.implement(new Options);