$(document).ready(function() {
  // ################
  // # POWER MATRIX #
  // ################
  
  var POWER_MATRIX = {
    DURATION: 1000,
    TIMES: 5,
    VIEW: {
      HEIGHT: 420
    }
  }
  
  $('div#content div.main_content div.power_matrix div.view').each(function(index, view) { // Iterate over each power matrix (view)
    var view = $(view);
    
    $(document).everyTime(POWER_MATRIX.DURATION, function(i) {
      var y = view.css('background-position-y') ? parseInt(view.css('background-position-y').split(' ')) : parseInt(view.css('background-position').split(' ')[1]);
      
      y = i < POWER_MATRIX.TIMES ? y - POWER_MATRIX.VIEW.HEIGHT : 0;
      
      view.css({ backgroundPosition: '0 ' + y + 'px' });
      
      if (i >= POWER_MATRIX.TIMES) {
        view.addClass('animation_completed');
      }
    }, POWER_MATRIX.TIMES);
    
    $('div#content div.main_content div.power_matrix div.view map area').hover(function() {
      if (view.hasClass('animation_completed')) {
        var position = $('div#content div.main_content div.power_matrix div.view map area').index(this);
        
        var y = (position + 1) * -POWER_MATRIX.VIEW.HEIGHT;
        
        $(view).css({ backgroundPosition: '0 ' + y + 'px' });
      }
    }, function(){
      if (view.hasClass('animation_completed')) {
        $(view).css({ backgroundPosition: '0 0' });
      }
    });
  });
  
  // ############
  // # CAROUSEL #
  // ############
  
  var carousel = $('div#content div.carousel');
  var scrollable = carousel.find('div.scrollable');
  var slides = scrollable.find('div.slides div.slide');
  var previous = carousel.find('a.browse.previous').attr('href', '#'); // 'Clean up' TemplaVoilą href rewrite
  var next = carousel.find('a.browse.next').attr('href', '#'); // 'Clean up' TemplaVoilą href rewrite
  
  var onPreviousClick = function(event) {
    var scrollable = $(event.data.scrollable);
    
    scrollable.scrollable().prev();
    
    return false;
  }
  
  var onNextClick = function(event) {
    var scrollable = $(event.data.scrollable);
    
    scrollable.scrollable().next();
    
    return false;
  }
  
  if (slides.length >= 3) { // At least three 'slides' are available
    var api = scrollable.scrollable({ // Initialize 'scrollable'
      items: '.slides',
      item: '.slide',
      prev: '.previous',
      next: '.next',
      disabledClass: 'disabled',
      size: 3,
      easing: 'swing',
      speed: 500,
      clickable: false,
      loop: false,
      api: true
    });
    
    api.onBeforeSeek(function() { // Hook into 'onBeforeSeek'
      $(api.getVisibleItems()[api.getVisibleItems().length - 1]).css('border-right', '1px solid #FFFFFF'); // 'Border kung fu'
    });
    
    api.onSeek(function() { // Hook into 'onSeek'
      $(api.getVisibleItems()[api.getVisibleItems().length - 1]).css('border-right', '1px solid #BCBCBC'); // 'Border kung fu'
    });
    
    $(api.getVisibleItems()[api.getVisibleItems().length - 1]).css('border-right', '1px solid #BCBCBC');
    
    previous.unbind(); // Unbind default action from 'scrollable'
    previous.bind('click', { scrollable: scrollable }, onPreviousClick);
    
    next.unbind(); // Unbind default action from 'scrollable'
    next.bind('click', { scrollable: scrollable }, onNextClick);
  } else { // Disable 'previous' and 'next' because the are useless
    previous.addClass('disabled');
    next.addClass('disabled');
  }
});