/*
        SlideItMoo v1.1 - Image slider
        (c) 2007-2008 Constantin Boiangiu <http://www.php-help.ro>
        MIT-style license.

        changes from version 1.0
        - added continuous navigation
        - changed the navigation from Fx.Scroll to Fx.Morph
        - added new parameters: itemsSelector: pass the CSS class for divs
                                                        itemWidth: for elements with margin/padding pass their width including margin/padding
*/
var SlideItMoo = new Class({

        Implements: [Options],
        options: {
                overallContainer: null,
                elementScrolled: null,
                thumbsContainer: null,
                itemsVisible:5,
                itemsSelector: null,
                itemWidth: null,
                showControls:1,
                transition: Fx.Transitions.linear,
                duration: 1000,
                direction: 1,
                autoSlide: false,
                mouseWheelNav: false
        },

        initialize: function(options){
                this.setOptions(options);
                /* all elements are identified on CSS selector (itemsSelector) */
                this.elements = $(this.options.thumbsContainer).getElements(this.options.itemsSelector);
                this.totalElements = this.elements.length;
                if( this.totalElements <= this.options.itemsVisible ) return;
                // width of thumbsContainer children
                this.elementWidth = this.options.itemWidth || this.elements[0].getSize().x;
                this.currentElement = 0;
                this.direction = this.options.direction;
                this.autoSlideTotal = this.options.autoSlide + this.options.duration;
                this.begin();
        },

        begin: function(){
                // resizes the container div's according to the number of itemsVisible thumbnails
                this.setContainersSize();

                this.myFx = new Fx.Morph(this.options.thumbsContainer, {
                        wait: true,
                        transition: this.options.transition,
                        duration: this.options.duration
                });

                /* if navigation is needed and enabled, add it */
                this.addControls();
                /* if autoSlide is not set, scoll on mouse wheel */
                if( this.options.mouseWheelNav && !this.options.autoSlide ){
                        $(this.options.thumbsContainer).addEvent('mousewheel', function(ev){
                                new Event(ev).stop();
                                this.slide(-ev.wheel);
                        }.bind(this));
                }

                if( this.options.autoSlide )
                        this.startAutoSlide();
        },

        setContainersSize: function(){
                $(this.options.overallContainer).set({
                        styles:{
                                'width': this.options.itemsVisible * this.elementWidth + 0 * this.options.showControls
                        }
                });
                $(this.options.elementScrolled).set({
                        styles:{
                                'width': this.options.itemsVisible * this.elementWidth
                        }
                });
                $(this.options.thumbsContainer).set({
                        styles:{
                                'width': this.totalElements * (this.elementWidth + 0)
                        }
                });
        },

        addControls: function(){
                if( !this.options.showControls ) return;

                this.fwd = new Element('div', {
                        'class': 'SlideItMoo_forward'
                });
                this.bkwd = new Element('div', {
                        'class': 'SlideItMoo_back'
                });
                $(this.options.overallContainer).adopt(this.fwd, this.bkwd);

                this.fwd.addEvent('click', this.slide.bind(this).pass(1));
                this.bkwd.addEvent('click', this.slide.bind(this).pass(-1));
        },

        slide: function( direction ){
                if(this.started) return;
                this.direction = direction;
                var currentIndex = this.currentIndex();

                if( this.direction == -1 ){
                        this.rearange();
                        $(this.options.thumbsContainer).setStyle('margin-left', -this.elementWidth);
                }
                this.started = true;
                this.myFx.start({
                        'margin-left': this.direction == 1 ? -this.elementWidth : 0
                }).chain( this.rearange.bind(this).pass(true) );


        },

        rearange: function( rerun ){
                if(rerun) this.started = false;
                if( rerun && this.direction == -1 ) {
                        return;
                }
                this.currentElement = this.currentIndex( this.direction );
                //$('debug').innerHTML+= this.currentElement+'<br>';

                $(this.options.thumbsContainer).setStyle('margin-left',0);

                if( this.currentElement == 1 && this.direction == 1 ){
                        this.elements[0].injectAfter(this.elements[this.totalElements-1]);
                        return;
                }
                if( (this.currentElement == 0 && this.direction ==1) || (this.direction==-1 && this.currentElement == this.totalElements-1) ){
                        this.rearrangeElement( this.elements.getLast(), this.direction == 1 ? this.elements[this.totalElements-2] : this.elements[0]);
                        return;
                }

                if( this.direction == 1 ){
                        this.rearrangeElement( this.elements[this.currentElement-1], this.elements[this.currentElement-2]);
                }
                else{
                        this.rearrangeElement( this.elements[this.currentElement], this.elements[this.currentElement+1]);
                }

        },

        rearrangeElement: function( element , indicator ){
                this.direction == 1 ? element.injectAfter(indicator) : element.injectBefore(indicator);
        },

        currentIndex: function(){
                var elemIndex = null;
                switch( this.direction ){
                        /* forward */
                        case 1:
                                elemIndex = this.currentElement >= this.totalElements-1 ? 0 : this.currentElement + this.direction;
                        break;
                        /* backwards */
                        case -1:
                                elemIndex = this.currentElement == 0 ? this.totalElements - 1 : this.currentElement + this.direction;
                        break;
                }
                return elemIndex;
        },

        startAutoSlide: function(){
                this.startIt = this.slide.bind(this).pass(this.direction||1);
                this.autoSlide = this.startIt.periodical(this.autoSlideTotal, this);
                this.elements.addEvents({
                        'mouseover':function(){
                                $clear(this.autoSlide);
                        }.bind(this),
                        'mouseout':function(){
                                this.autoSlide = this.startIt.periodical(this.autoSlideTotal, this);
                        }.bind(this)
                })
        }
})