/***********************/
$(document).ready(function() {
    $("#accordion").accordion({ navigation: true });
//////////////////////////////////////////
/// --- AUTOPLAY --- ///
    i = 0;
    setInterval( "switcher()", 6000 );
/////////////////////////////////////////

/////////////////////////////////////////
/// --- BIND IMAGE FADE ON ACCORDION CHANGE --- ///
    $('#accordion').bind('accordionchangestart', function(event, ui) {
        // console.log(ui.newHeader.attr('id').substr(4));
        var activeItem = parseInt(ui.newHeader.attr('id').substr(4));
        var oldItem = parseInt(ui.oldHeader.attr('id').substr(4));
        slideSwitch(activeItem, oldItem);
    });
/////////////////////////////////////////
});
/********************/
  function switcher() {
    if(i==$("#accordion h3").length) {i=0;} else {i++;}
    $("#accordion").accordion( "activate" , i);
  }

  function slideSwitch(activeItem, oldItem) {

      var $next = $('#img'+activeItem).addClass('active');
      var $prev = $('#img'+oldItem).addClass('last-active');

      //console.log($next.attr('id')+' -|- '+$prev.attr('id'));


      $next.css({opacity: 0.0})
          .addClass('active')
          .animate({opacity: 1.0}, 900, function() {
              $prev.removeClass('active last-active');
          });
  }