$(document).ready(function(){
  var timer_slider, timer_reverse, timer_slider_tabs, current;
  var slides=$('.fade_box img');
  var tabsBox = $('.tabs_box');
  var tabs=$('span.tabs');
  var arr_size=slides.size();
    var current=slides.filter(':first');
    timer_slider=setInterval(slider,8000); 
    function slider(){
      if (current.index()==arr_size-1){
        clearInterval(timer_slider);              
        reverse();
      }
      else{
        current.animate({opacity:'hide'},800);
        current.next().animate({opacity:'show'},800);
        current=current.next();
        tabs.removeClass('active_tab');
        tabs.eq(current.index()).addClass('active_tab');
      }
    };
    function reverse(){
      slides.filter(':last').animate({opacity:'hide'},800);
      slides.filter(':first').animate({opacity:'show'},800);
      current=slides.filter(':first');
      tabs.removeClass('active_tab');
      tabs.eq(current.index()).addClass('active_tab');      
      timer_slider=setInterval(slider,8000);
    };
    function slider_tabs(ind){
      clearInterval(timer_slider);                     
      current.animate({opacity:'hide'},800);
      slides.eq(ind).animate({opacity:'show'},800);
      current=slides.eq(ind);
      timer_slider=setInterval(slider,8000);            
    };
    tabs.click(function(){
      if($(this).hasClass('active_tab')){return false;}
      else{
        if(!slides.is(':animated')){
          clearInterval(timer_slider);
          var index=$(this).index('span.tabs');
          tabs.removeClass('active_tab');
          $(this).addClass('active_tab');
          slider_tabs(index);        
        }
      } 
    });
    slides.hover(function(){
      clearInterval(timer_slider);
    },function(){
      timer_slider = setInterval(slider,8000);
    });
});