var SlideShow = new Class({

    getOptions: function(){
        return {
            effect: 'fade', //fade|wipe|slide|random
            duration: 6000,
            transition: Fx.Transitions.linear,
            direction: 'right', //top|right|bottom|left|random
            color: false,
            wait: 5000,
            loop: false,
            thumbnails: false,
            thumbnailCls: 'outline',
            backgroundSlider: false,
            loadingCls: 'loading',
            onClick: false
        };
    },

    initialize: function( container, options ){

        this.setOptions(this.getOptions(), options);

        var _speed = 7000;
        var _timeout = 6000;
        var _delay = 8000;
        var _visible = 5;

        this.total = $('imc-nav').getChildren().length;
        this.container = $( container );

        if( this.total > 0 ){
            this.images = [];
            for( var i = 1; i <= this.total; i++ ){
                this.images.push( i );
            }
        }

        // get the nav buttons
        var navLi = $('imc-nav').getChildren();
        if( navLi.length > 0 ){
            // get the id
            navLi.each(function(item, index){
                if( item.id.test('imc-nav') ){
                    var id = Number( item.id.substring(7).toInt() );
                    if( $( 'imc-nav-link' + id ) ){
                        $( 'imc-nav-link' + id ).addEvent( 'click', function( event ){
                            new Event( event ).stop();
                            var target = event.target || event.srcElement;
                            var geoid = target.parentNode.id;
                            // make sure we have the right id
                            if( geoid.test('imc-nav-link') ){
                                geoid = Number( geoid.substring(12).toInt() );
                                $clear(this.timer);
                                $clear( this.itemDelay );
                                this.image = ( geoid - 1 );
                                this.clickNavItem( geoid );
                            }
                        }.bind( this ) );
                    }
                }
            }.bind( this) );
        }
        
        var imcClicks = $$( 'div.imc-image-click' );
        if( imcClicks ){
            if( imcClicks.length > 0 ){
                imcClicks.each(function(item, index){
                    item.addEvent( 'click', function( event ){
                        new Event( event ).stop();
                        var target = event.target || event.srcElement;
                        if( target.parentNode.id.test( 'imc-img' ) ){
                            var id = Number( target.parentNode.id.substring(7).toInt() );
                            if( $( 'imc-nav-link' + id ) ){
                                window.location = $( 'imc-nav-link' + id ).getAttribute( 'href' );
                            }
                        }
                    }.bind( this ) );
                }.bind( this ) );
            }
        }
        
        this.timer = 0;

        this.image = -1;
        this.imageLoaded = 0;
        this.stopped = true;
        this.started = false;
        this.animating = false;
    },

    load:function(){
        $clear(this.timer);
        $clear( this.itemDelay );
        this.image++;
        this.show();
    },

    show:function(){
        if( !this.images[this.image] || this.image >= this.total ){
            this.image = 0;
        }
        this.clickNavItem( this.images[this.image] );
    },

    wait: function(){
        //this.timer = this.load.delay(this.options.wait,this);
    },

    next: function(wait){
        var doNext = true;
        if(wait && this.stopped){
            doNext = false;
        }
        if(this.animating){
            doNext = false;
        }
        if(doNext){
            $clear(this.timer);
            $clear( this.itemDelay );
            // show the next image
            this.image++;
            this.show();
            if(this.image < this.images.length-1){
                if(wait){
                    this.wait();
                }else{
                    this.load();
                }
            }else{
                if(this.options.loop){
                    this.image = -1;
                    if(wait){
                        this.wait();
                    }else{
                        this.load();
                    }
                }else{
                    this.stopped = true;
                }
            }

        }
    },

    play: function(num){
        if(this.stopped){
            if(num > -1){
                this.image = ( num - 1);
            }
            if( this.image < this.images.length ){
                this.stopped = false;
                if(this.started){
                    this.next();
                }else{
                    this.load();
                }
                this.started = true;
            }
        }
    },

    stop: function(){
        $clear(this.timer);
        this.stopped = true;
    },

    clickNavItem:function( id ){
        this.nextImg = $( 'imc-img' + id );
        if( ! this.current ){
            var lastKey = 0;
            if( this.total > 0 ){
                lastKey = ( this.total - 1 );
            }
            $$('div.imc-image').each(function(item, index){
                if( index != lastKey ){
                    item.setStyle('opacity', 0);
                } else {
                    this.current = item;
                }
            }.bind( this ) );
        }
        if( this.nextImg.id === this.current.id ){
            // reset the timer but don't transition
            if(!this.stopped){
                $clear(this.timer);
                $clear(this.itemDelay);
                this.itemDelay = this.next.delay(this.options.wait,this,true);
            }
        }else{
            $$('img.imc-nav-thumb').each(function(item, index){
                item.removeClass( 'selected' );
            }.bind( this ) );

            var img = $( 'imc-nav-link' + id ).getElement( 'img' );
            if( img ){
                img.addClass( 'selected' );
            }
            $$('div.imc-image').each(function(item, index){
                if( this.current.id != item.id ){
                    item.setStyle('opacity', 0);
                }
            }.bind( this ) );
            var currentEffect = this.current.effects({
                duration: 500,
                transition: this.options.transition,
                fps:60,
                onComplete: function() {
                    var nextEffect = this.nextImg.effects({
                        duration: 1000,
                        transition: this.options.transition,
                        fps:60
                    });
                    nextEffect.start({
                        opacity: [0,1]
                    });
                    this.current = this.nextImg;
                }.bind( this )
            });

            currentEffect.start({
                opacity: [1,0]
            });
        }
        if(!this.stopped){
            $clear(this.itemDelay);
           this.itemDelay =  this.next.delay(this.options.wait,this,true);
        }
    },

    resetAnimation: function(){
        this.animating = false;
    }

});
SlideShow.implement(new Options);
SlideShow.implement(new Events);