/* 
    Document   : flipper
    Created on : May 25, 2011
    Author     : uzzal    
*/
var flipper={};
(function($){
    $.fn.flipper=function(opt){
        return this.each(function(){
            flipper.init($,this,opt);
        });
    };
})(jQuery);
flipper={
    width:960,
    height:480,    
    delay:3000,
    pos:0,
    slideId:1,
    timer:null,
    sliderObj:null,
    monitorObj:null, 
    deckObj:null,
    SPEED:500,    
    auto:true,
    init:function($, obj, opt){   
        var that = this;
        this.pos = this.width; //2nd slide position
        if(opt.delay>3000){
            this.delay = opt.delay;
        }
        this.sliderObj = $(obj);
        this.createDom(opt);
        this.monitorObj = this.sliderObj.children('#monitor');
        this.deckObj = this.monitorObj.children('#sliderDeck');
        this.deckObj.css('width',(this.width*opt.tot)+this.width); //total slides + one more slide
        
        var leftNavObj = $('#sliderLeftNav');
        var rightNavObj = $('#sliderRightNav');
                
        this.start($, opt);           
        
        leftNavObj.hover(function(){
            if($(this).hasClass('normal-left')){
                $(this).removeClass('normal-left').addClass('active-left');
            }
        },function(){
            if($(this).hasClass('active-left')){
                $(this).removeClass('active-left').addClass('normal-left');
            }
        });

        rightNavObj.hover(function(){
            if($(this).hasClass('normal-right')){
                $(this).removeClass('normal-right').addClass('active-right');
            }
        },function(){
            if($(this).hasClass('active-right')){
                $(this).removeClass('active-right').addClass('normal-right');
            }
        });
        
        this.monitorObj.hover(function(){
            that.stop();
            //console.log('stop');
        },function(){
            that.start($,opt);
            //console.log('start');
        });

        leftNavObj.click(function(){
            that.moveLeft($,opt);
        });
        rightNavObj.click(function(){
            that.moveRight($,opt);
        });
    },
    stop:function(){
        clearInterval(this.timer);
    },
    start:function($,opt){		
        var that = this;
        this.auto = true;
        
        if(opt.tot>1){
            this.timer = setInterval(function(){
                that.move($,opt);
            },this.delay);
        }
    },
    move:function($,opt){
        if(this.slideId>opt.tot){
            this.slideId=1;
            this.pos = this.width;
        }
        
        this.pos = this.width * this.slideId;
                
        if(this.slideId==opt.tot){            
            this.monitorObj.animate({scrollLeft:this.pos},this.SPEED);
            this.monitorObj.animate({scrollLeft:0},0);
        }else{            
            this.monitorObj.animate({scrollLeft:this.pos},this.SPEED);
        }
        
        this.slideId = this.slideId + 1;
    },
    moveLeft:function($,opt){
        this.stop();        
        this.slideId = this.slideId - 1;//important
        if(this.slideId<=0 || this.slideId==opt.tot){
            //console.log('if');
            this.slideId = opt.tot;
            this.pos = this.width * this.slideId;
            this.monitorObj.animate({scrollLeft:this.pos},0);            
            this.pos = this.pos - this.width;
            this.monitorObj.animate({scrollLeft:this.pos},this.SPEED);            
        }else{
            //console.log('else');
            this.slideId = this.slideId - 1;            
            this.move($, opt);            
        }
        this.start($, opt);
        //console.log('left:'+this.slideId);
    },
    moveRight:function($,opt){
        this.stop();        
        if(this.slideId>opt.tot){
            //console.log('if');
            this.slideId = 1;
            this.pos = this.width * this.slideId;
            this.monitorObj.animate({scrollLeft:0},0);
            this.slideId = this.slideId+1;
            this.monitorObj.animate({scrollLeft:this.pos},this.SPEED);            
        }else{
            //console.log('else');
            this.move($, opt);
        }      
        this.start($, opt);
        //console.log('right:'+this.slideId);
    },
    createDom:function(opt){		
        var html = '';		
        html+='<div class="sliderNav">';
        html+='<div class="left">';
        html+='<div id="sliderLeftNav" class="normal-left"></div>';
        html+='</div>';
        html+='<div class="right">';
        html+='<div id="sliderRightNav" class="normal-right"></div>';
        html+='</div>';
        html+='<div class="clear"></div>';
        html+='</div>';
        html+='<div id="monitor">';
        html+='<div id="sliderDeck">';
        var i=1;
        for(i=1;i<=opt.tot;i++){
            html+='<a title="'+opt['cap'+i]+'" href="'+opt['url'+i]+'"><img src="'+opt['slide'+i]+'" alt="'+opt['cap'+i]+'" /></a>';			
        }
        html+='<a title="'+opt.cap1+'" href="'+opt.url1+'"><img src="'+opt.slide1+'" alt="'+opt.cap1+'" /></a>';
        html+='</div>';
        html+='</div>';		
        //console.log('dom created');
        this.sliderObj.html(html);
    }
};