/* HEI.at Carousel */

$(document).ready(function() {
  var carousel = $('#carousel');
  if ( carousel.length ) carousel.carousel();
});

$.fn.carousel = function() {
  return this.each(function() {
    var carousel  = $(this),
        list      = $('#itemList'),
        listItems = list.children('li'),
        playInterval
    ;
    
    carousel
    // INITIALIZE
    .bind('init', function(event, index) {
      var index = index || 1;
      
      listItems.attr('tabindex', '0');
      $(this).data('index', index);
      
      // add Play/Pause Button and it's functionality
      $('<a href="#" id="playPause">Pause</a>')
      .appendTo('#itemContainer')
      .click(function() {
        var isPaused = $(this).hasClass('play');
        if ( isPaused ) {
          carousel.trigger('play', true);
        } else {
          carousel.trigger('pause');
        }
        return false;
      });
      
      if ( index != 1 ) $(this).trigger('change',[index,0])
      
      $(this).trigger('play');
    })
    // CHANGE ITEM
    // hide all items and show the item with the given index
    .bind('change', function(event, index, time) {
      var time = time === undefined ? 150 : time;
      
      $(this).data('index', index);
      $('#itemList li').removeClass('active');
      $('#listItem_'+index).addClass('active');
      $('#itemContainer .item').fadeOut(time);
      $('#item_'+index).fadeIn(time);
    })
    // NEXT ITEM
    // find the next item and trigger change with it
    .bind('next', function(event) {
      var index       = $(this).data('index'),
          nextIndex   = (index == $('#itemContainer .item').length) ? 1 : index+1
      ;
      $(this).trigger('change', [nextIndex,1000]);
    })
    // PLAY
    // start the playing loop
    .bind('play', function(event, now) {
      if ( now ) carousel.trigger('next');
      playInterval = setInterval(function() {
        carousel.trigger('next');
      }, 5000);
      carousel.data('play', true);
      $('#playPause').removeClass('play').text('Pause');
    })
    // PAUSE
    // stop the playing loop
    .bind('pause', function(event) {
      clearInterval(playInterval);
      carousel.data('play', false);
      $('#playPause').addClass('play').text('Play');
    })
    ;
    
    listItems.bind('mouseenter focus', function(event) {
      if ( event.type == 'focus') carousel.trigger('pause');
      if ( $(this).hasClass('active') ) return;
      
      var listItems = $(this).siblings(),
          index     = $(this).index()+1
      ;
      carousel.trigger('change',index);
      listItems.removeClass('active');
      $(this).addClass('active');
    });
    
    list.hover(
      function() {
        carousel
        .data('playing', carousel.data('play'))
        .trigger('pause')
        ;
      },
      function() {
        if ( carousel.data('playing') ) carousel.trigger('play');
      }
    );
    
    carousel.trigger('init');
  });
};