/**
 * --------------------------------------------------------------------
 * jQuery vertical accordion plugin
 * Author: Anonymous  
 * Extended by: Diego Lago, diego.lago@wtg.co.uk
 * --------------------------------------------------------------------
 */
$.fn.verticordion = function (options) {
  
  // set the default values:
  var config = { 
    autoAnimate: 'true',
    animateDelay: 6000,
    panelToShowOnStart: 0,
    panelAnimateSpeed: 700,
    panelAnimateEasing: 'easeOutExpo',
    animateDirection: 1
  },
  
  panels = [],
  panelShadeWidth = 0,
  panelWidth = 0,
  animatePos = 0,
  animateTimer;

  if (options) $.extend(config, options);

  function movePanel(panelIndex, pos) {
    $(panels[panelIndex]).animate({ left: pos + 'px' }, { duration: config.panelAnimateSpeed, easing: config.panelAnimateEasing });
  }

  function showSpecificPanel(panelIndex) {
    // Move the panels above it to the right
    for (var i = panels.length - 1; i > panelIndex; i--) { movePanel(i, (panelWidth + panelShadeWidth * (i - 1))) }
    // Move the panels below it, to the left
    for (var i = 0; i <= panelIndex; i++) { movePanel(i, panelShadeWidth * i); }
    animatePos = panelIndex;
  }

  function animatePanel() {
    animatePos += config.animateDirection;
    if (config.autoAnimate) {
      showSpecificPanel(animatePos);
      if (animatePos <= 0 || animatePos >= panels.length - 1) {
        config.animateDirection *= -1;
      }

      setTimeout(animatePanel, config.animateDelay)
    }
  }

  this.each(function () {
    // element-specific code here
    // Calculate the initial positions of the details and place the panels in the appropriate position
    panels = $(this).find('ul.panel>li');
    panelWidth = $(panels[0]).width();
    panelShadeWidth = ($(this).width() - panelWidth) / (panels.length - 1);

    // Set the width of the control anchors
    $(this).find('h2>a').width(panelWidth - 2);

    // Jump to the correct panel and begin animation
    showSpecificPanel(config.panelToShowOnStart);
    if (config.autoAnimate) {
      animateTimer = setTimeout(animatePanel, config.animateDelay);
    }

    // Add in a node for the shadow on the left of each panel
    $(panels).append('<span class="shadow">&nbsp;</span>');

    // Add the event handlers on to the control anchors to allow them to move
    $(this).find('h2>a').mouseover(function (e) {
      if (config.autoAnimate) {
        config.autoAnimate = false;
        clearTimeout(animateTimer);
      }
      // Get the index of the list item that needs to be moved
      var panelIndex = $('.panelAccordion > ul > li').index($(this).parents('li:first'));
      $('.panelAccordion > ul > li').stop(true, false);

      showSpecificPanel(panelIndex);
    });

    // Add the event handlers on to the control anchors to allow them to move
    $(this).find('span.shadow').mouseover(function (e) {
      if (config.autoAnimate) {
        config.autoAnimate = false;
        clearTimeout(animateTimer);
      }
      // Get the index of the list item that needs to be moved
      var panelIndex = $('.panelAccordion > ul > li').index($(this).parents('li:first'));
      $('.panelAccordion > ul > li').stop(true, false)

      showSpecificPanel(panelIndex - 1);
    });
  });

  return this;

};