/* Extending the scriptaculous transitions for an bouncing effect
 */
//Effect.Transitions.easeInOutBounce = function(pos){
//  if (pos < (1/2.75)) {
//      return (7.5625 * pos * pos);
//  } 
//  else if (pos < (2/2.75)) {
//      return (7.5625 * (pos -= (1.5/2.75)) * pos + 0.75);
//  } else if (pos < (2.5/2.75)) {
//      return (7.5625*(pos -= (2.25/2.75)) * pos + 0.9375);
//  } else {
//      return (7.5625*(pos -= (2.625/2.75)) * pos + 0.984375);
//  }
//}

var SNSSlideshow = new Class.create({
    initialize: function(itemcontainerid, navcontainer, mode){
        if(navcontainer == false){
            this.mustupdatenav = false;
        }
        else{
            this.mustupdatenav = true;
        }
        this.container = $(itemcontainerid);
        this.navcontainer = $(navcontainer);
        this.mode = mode;
        
        this.transition = Effect.Transitions.sinoidal;
        
        this.speed = 1.5;
        this.fadeSpeed = 2.0;
        this.slideInterval = 8000;
        this.pauseInterval = 10000;
        
        this.actitem = 0;
        this.isMoving = false;
        this.slideTicker = null;
        this.pause = null;
    
        this.items = this.container.childElements();

        //save original number of items
        this.itemsCount = this.items.size();
        
        this.itemWidth = this.items.first().getWidth();
        
        this.initMode();
        if(this.mustupdatenav){
            this.updateNavBar();
        }
        
    },
    
    initMode: function(){
        switch(this.mode){
            case 'slide':
                var newFirst = this.items.last().cloneNode(true);
                var newLast = this.items.first().cloneNode(true);
        
                this.container.insert({top: newFirst});
                this.container.insert({bottom: newLast});
        
                this.items = this.container.childElements();
        
                this.container.setStyle({
                    'width':this.items.size() * this.itemWidth + 'px',
                    'top':'0px',
                    'left': -this.itemWidth + 'px',
                    'position':'relative'
                });
                //apend mouse events for start and stop the automatic slide
                //this.appendEvents();
                
                this.startAutoSlide();
                break;
            case 'fade':                
                
                for(var i = 1; i < this.items.length; i++){
                    var item = $(this.items[i]);                    
                    item.setStyle({
                        'position':'absolute',
                        'float':'none'
                    });
                    item.childElements().each(function(el){
                        item.hide();                        
                    });
                    item.hide();
                }
                
                Effect.Appear(this.items[this.actitem],{
                    duration: this.fadeSpeed,
                    afterFinish: function(){
                        //this.appendEvents();
                        this.startAutoSlide(); 
                    }.bind(this)
                });
                
                
                break;
            default:
                break;
        }
    },
    
    appendEvents: function(){
        this.container.observe('mouseover', function(event){
            window.clearInterval(this.slideTicker);
            event.stop();
        }.bind(this))
        this.container.observe('mouseout', function(event){
            window.clearInterval(this.slideTicker);
            this.startAutoSlide();      
            event.stop();

        }.bind(this));
    },
    
    show: function(itemnr){
        if(this.isMoving){
            return;
        }
        
        this.isMoving = true;
        window.clearInterval(this.slideTicker);
        
        
        if(this.mode == 'slide'){
            this.actitem = itemnr;
            var efx = new Effect.Move(this.container, {
                duration: this.speed,
                x: -((this.actitem + 1) * this.itemWidth),
                y: 0,
                mode: 'absolute',
                transition: this.transition,
                afterFinish:function(){this.isMoving = false;}.bind(this)
            });
        }
        else if(this.mode == 'fade'){
            if(this.actitem == itemnr){
                this.isMoving = false;
                return;
            }
              
                  
            this.items[this.actitem].childElements().each(function(el){
                Effect.Fade(el,{
                    duration: this.fadeSpeed / 4
                });
                
            });
            
            Effect.Fade(this.items[this.actitem],{
                duration: this.fadeSpeed
            });
            this.actitem = itemnr;
            Effect.Appear(this.items[itemnr],{
                duration: this.fadeSpeed,
                afterFinish: function(){  
                    this.isMoving = false; 
                }.bind(this)
            });
            this.items[this.actitem].childElements().each(function(el){
                Effect.Appear(el,{
                    duration: this.fadeSpeed
                });                        
            },this);                     
        }
        if(this.mustupdatenav){            
            this.updateNavBar();
        }
            
    },
    
    updateNavBar: function(){
        //console.log('update')
        var navItems = this.navcontainer.select('li.lfs-nav');
        
        //remove next and prev links
//        navItems.pop();
//        navItems.shift();
        //console.log(navItems);
        
        navItems[this.actitem].addClassName('active');
        navItems.each(function(item){
            if(navItems.indexOf(item) != this.actitem){
                item.removeClassName('active');
            }
        },this);
        
    },
    
    
    startAutoSlide: function(){
        window.clearInterval(this.slideTicker);
        this.slideTicker = window.setInterval(this.moveLeft.bind(this), this.slideInterval);
    },
    
    previous: function(){
        //window.clearInterval(this.slideTicker);
        this.moveRight();
    },
    next: function(){
        //window.clearInterval(this.slideTicker);
        this.moveLeft();
    },
        
    moveLeft: function(){
        if(this.isMoving){
            return;
        }       
        this.isMoving = true;
        
        if (this.mode == "fade") {
            this.items[this.actitem].childElements().each(function(el){
                Effect.Fade(el,{
                    duration: this.fadeSpeed / 4
                });
                
            });
            
            Effect.Fade(this.items[this.actitem],{
                duration: this.fadeSpeed
            });
            this.actitem++;
            if(this.actitem == this.itemsCount){
                this.actitem = 0;
            }
            Effect.Appear(this.items[this.actitem],{
                duration: this.fadeSpeed,
                afterFinish:function(){
                    this.isMoving = false;                      
                }.bind(this)
            });
            this.items[this.actitem].childElements().each(function(el){
                Effect.Appear(el,{
                    duration: this.fadeSpeed
                });                        
            },this);  
            this.isMoving = false;
                
        }
        else if(this.mode == "slide"){
            this.actitem++;
            if (this.actitem < this.itemsCount) {
                var efx = new Effect.Move(this.container, {
                    duration: this.speed,
                    x: -this.itemWidth,
                    y: 0,
                    mode: 'relative',
                    transition: this.transition,
                    afterFinish: function(){
                        this.isMoving = false;
                    }.bind(this)
                });
            }
            else {
                this.actitem = 0;
                var efx = new Effect.Move(this.container, {
                    duration: this.speed,
                    x: -this.itemWidth,
                    y: 0,
                    mode: 'relative',
                    transition: this.transition,
                    afterFinish: function(){
                        this.container.setStyle({
                            'top': 0,
                            'left': -this.itemWidth + 'px',
                            'position': 'relative'
                        });
                        this.isMoving = false;
                    }.bind(this)
                });
            }
        }
        if(this.mustupdatenav){
            this.updateNavBar();
        }
    },
    
    moveRight: function(){
        if(this.isMoving){
            return;
        }   
        this.isMoving = true;

        if(this.mode == "fade"){
            this.items[this.actitem].childElements().each(function(el){
                Effect.Fade(el,{
                    duration: this.fadeSpeed / 4
                });                
            });
            
            Effect.Fade(this.items[this.actitem],{
                duration: this.fadeSpeed                
            });
            this.actitem--;
            if(this.actitem == -1){
                this.actitem = this.itemsCount - 1;
            }
            Effect.Appear(this.items[this.actitem],{
                duration: this.fadeSpeed,
                afterFinish: function(){
                    this.isMoving = false;
                }.bind(this)
            });
            this.items[this.actitem].childElements().each(function(el){
                Effect.Appear(el,{
                    duration: this.fadeSpeed
                });                        
            },this);
        }
        else if(this.mode == 'slide'){
            this.actitem--; 
            if (this.actitem >= 0) {
                var efx = new Effect.Move(this.container, {
                    duration: this.speed,
                    x:  +this.itemWidth,
                    y: 0,
                    mode: 'relative',
                    transition: this.transition,
                    afterFinish:function(){
                        this.isMoving = false;
                    }.bind(this)            
                });
            }
            else{
                this.actitem = this.itemsCount - 1;
                var efx = new Effect.Move(this.container, {
                    duration: this.speed,
                    x: + this.itemWidth,
                    y: 0,
                    mode: 'relative',
                    afterFinish: function(){
                        this.container.setStyle({
                            'top':'0px',
                            'left':-((this.actitem + 1) * this.itemWidth) + 'px',
                            'position':'relative'
                        });
                        this.isMoving = false;                  
                    }.bind(this)
                });
            }
        }   
        if(this.mustupdatenav){
            this.updateNavBar();
        }   
    }
});