(function($){
    $.fn.flipper=function(opt){
        return this.each(function(){
            flipper.init($,this,opt);
        });
    };
})(jQuery);
var flipper={
    height:385,
    width:660,
    timer:undefined,
    pre_timer:undefined,
    current:0,
    nav_on_position:0,
    nav_off_position:20,
    nav_off_timer:undefined,
    init:function($,obj,opt){
        var that=this;
        that.loadDom($,obj,opt);

        $(obj).hover(
        function(){
            that.navOn($);
        },
        function(){
            that.navOff($);
        });
        $('.flipper_nav_1').click(function(){that.moveTo($,1);});
        $('.flipper_nav_2').click(function(){that.moveTo($,2);});
        $('.flipper_nav_3').click(function(){that.moveTo($,3);});
        $('.flipper_nav_4').click(function(){that.moveTo($,4);});
        $('.flipper_nav_5').click(function(){that.moveTo($,5);});
        $('.flipper_nav_6').click(function(){that.moveTo($,6);});
        $('.flipper_nav_7').click(function(){that.moveTo($,7);});
        that.startUp($,opt);
    },
    loadDom:function($,obj,opt){
        var html='';
            html+='<div id="flipper_display">';
            html+=   '<div id="flipper_slides">';
            html+=            '<div class="flipper_slide"><a target="_blank" href="'+opt.url1+'"><img src="'+opt.slide1+'" alt="" /></a></div>';
            html+=            '<div class="flipper_slide"><a target="_blank" href="'+opt.url2+'"><img src="'+opt.slide2+'" alt="" /></a></div>';
            html+=            '<div class="flipper_slide"><a target="_blank" href="'+opt.url3+'"><img src="'+opt.slide3+'" alt="" /></a></div>';
            html+=            '<div class="flipper_slide"><a target="_blank" href="'+opt.url4+'"><img src="'+opt.slide4+'" alt="" /></a></div>';
            html+=            '<div class="flipper_slide"><a target="_blank" href="'+opt.url5+'"><img src="'+opt.slide5+'" alt="" /></a></div>';
            html+=            '<div class="flipper_slide"><a target="_blank" href="'+opt.url6+'"><img src="'+opt.slide6+'" alt="" /></a></div>';
            html+=            '<div class="flipper_slide"><a target="_blank" href="'+opt.url7+'"><img src="'+opt.slide7+'" alt="" /></a></div>';
            html+=            '<div class="clear"></div>';
            html+=        '</div>';
            html+=    '</div>';
            html+=    '<div id="flipper_navs_wrapper">';
            html+=        '<div id="flipper_navs">';
            html+=            '<ul>';
            html+=                '<li class="flipper_nav flipper_nav_7"><div>7</div></li>';
            html+=                '<li class="flipper_nav flipper_nav_6"><div>6</div></li>';
            html+=                '<li class="flipper_nav flipper_nav_5"><div>5</div></li>';
            html+=                '<li class="flipper_nav flipper_nav_4"><div>4</div></li>';
            html+=                '<li class="flipper_nav flipper_nav_3"><div>3</div></li>';
            html+=                '<li class="flipper_nav flipper_nav_2"><div>2</div></li>';
            html+=                '<li class="flipper_nav flipper_nav_1 flipper_nav_sel"><div>1</div></li>';
            html+=            '</ul>';
            html+=            '<div class="clear"></div>';
            html+=        '</div>';
            html+=    '</div>';
            html+=    '<div id="flipper_loading">Loading...</div>';

        $(obj).html(html);
        $('#flipper_loading').fadeTo('fast',.75);
    },
    startUp:function($,opt){
        var that=this;
        this.pre_timer=setInterval(function(){
            that.preload($,opt);
        },250);
    },
    preload:function($,opt){
        var i1=new Image();
        var i2=new Image();
        var i3=new Image();
        var i4=new Image();
        var i5=new Image();
        var i6=new Image();
        var i7=new Image();
        var tot=0;
        var that=this;
        i1.src=opt.slide1;
        i2.src=opt.slide2;
        i3.src=opt.slide3;
        i4.src=opt.slide4;
        i5.src=opt.slide5;
        i6.src=opt.slide6;
        i7.src=opt.slide7;
        if(i1.complete){
            tot+=1;
        }
        if(i2.complete){
            tot+=1;
        }
        if(i3.complete){
            tot+=1;
        }
        if(i4.complete){
            tot+=1;
        }
        if(i5.complete){
            tot+=1;
        }
        if(i6.complete){
            tot+=1;
        }
        if(i7.complete){
            tot+=1;
        }

        if(tot==7){
            clearInterval(this.pre_timer);
            $('#flipper_loading').fadeOut('normal',function(){
                that.run($);
            });
        }
    },
    navOn:function($){
        //alert('on:'+this.nav_on_position);
        $('#flipper_navs').animate({'top':this.nav_on_position},'slow');
    },
    navOff:function($){
        //alert('off:'+this.nav_off_position);
        $('#flipper_navs').animate({'top':this.nav_off_position},'slow');
    },
    run:function($){
        var that=this;
        this.timer=setInterval(function(){
           that.moveSlides($);
        },5000);
    },
    moveTo:function($,pos){
        clearInterval(this.timer);
        this.current=pos-1;
        this.moveSlides($);
        this.run($);
    },
    moveSlides:function($){
        if(this.current>6){this.current=0;}
        var curr=this.current;
        var position=this.width*curr;
        this.moveNav($,curr);
        $('#flipper_slides').animate({'left':'-'+position},400);
        this.current++;
    },
    moveNav:function($,pos){
        var nav=pos+1;
        $('.flipper_nav').removeClass('flipper_nav_sel');
        $('.flipper_nav_'+nav).addClass('flipper_nav_sel');
    }
}