$(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);
});