$(function(){

    var items=$('#box .inner');
    var navs=$('.sub-nav .inner li');
    var navLinks=$('.sub-nav .inner li a');
    var i=0;
    var c=items.length;
    var h=$('#box .inner:eq(0)').outerHeight();
    
    var auto=true;
    
    
    items.find('.info').hide();
    items.eq(0).find('.info').show();
    navs.eq(0).addClass('active');
   
   function changeItem()
   {
       if(auto)
       {
           items.css('visibility','hidden');
           items.find('.info').fadeOut(500);
           
           items.css('visibility','visible');
           
           i++
           if(i==c)i=0;
           
           
            $('#itemList').animate({marginTop:-i*h},500,function(){
           
               
               items.eq(i).find('.info').fadeIn(500);
           
           });
           
           navs.removeClass('active');
           navs.eq(i).addClass('active');
       }
   }
   
   navLinks.each(function(index){
   
       $(this).click(function(){
       
           auto=false;
           
           i=index;
           
           items.find('.info').fadeOut(500);
           
           
           $('#itemList').animate({marginTop:-i*h},500,function(){
           
               items.eq(i).find('.info').fadeIn(500);
           
           });
           
           navs.removeClass('active');
           navs.eq(i).addClass('active');
           
       }).mouseleave(function(){auto=true;});
   
   });
   
   $('#box').mouseenter(function(){auto=false;}).mouseleave(function(){auto=true;});
   
   setInterval(changeItem,10000);
});