// $Id: fx_elements.js 206 2009-08-19 17:08:04Z aklump $
Drupal.behaviors.fxElementsBehavior = function (context) {
  
  //don't bother if we don't have div.fx-elements on the page
  if ($('.fx-elements').length == 0){
    return;
  }

  //how quickly do you want the animation to occur; set to 0 for no animation
  var fxElementsSpeed = Drupal.settings.fxElements.speed;

  //how many milliseconds before the pane responds to hover
  var paneHoverDelayBeforeTrigger = Drupal.settings.fxElements.hoverDelay;

  //this holds the delay
  var paneHoverDelay;

  //sizing of the panes
  var width = Drupal.settings.fxElements.width + 'px';
  var height = Drupal.settings.fxElements.height + 'px';
  var paneFocusWidth = Drupal.settings.fxElements.paneFocusWidth + 'px';
  var paneWidth = Drupal.settings.fxElements.paneWidth + 'px';
  
  var paneZebra = new Array('fx-green', 'fx-blue');

/**
 * End config
 */

  //set the panes to the correct widths on a focus
  function paneFocus(object){
    var key = object.attr('id');
    var map = Drupal.settings.fxElements.panelMap[key];
    var count = Drupal.settings.fxElements.paneCount;
    
    //now animate the transition to different x coordinates
    for (i = 0; i < count; ++i){
    
      //if the width differs then animate it
      var currentX = $('#fx-elements-pane-' + i).css('left');
      var newX = map[i]['x'] + 'px';
      if (currentX != newX){
      
        if (fxElementsSpeed == 0){
          $('#fx-elements-pane-' + i).css({
            left: newX
          });        
        }
        else {
          $('#fx-elements-pane-' + i).animate({
            left: newX
          }, fxElementsSpeed);            
        }
      }
    } //for

    //add a class to the focus pane for a myriad of implementations; go to town themer!
    $('.fx-pane.focus').removeClass('focus');
    object.addClass('focus');
    
    
/*
//this is for demonstration only
    if (key == 'fx-elements-pane-1'){
      //now animate the fx-arrow-cover
      $('.fx-arrow-cover').fadeIn();
      $('.focus .fx-arrow-cover').slideUp();    
    }
    else {
      //now animate the fx-arrow-cover
      $('.fx-arrow-cover').slideDown();
      $('.focus .fx-arrow-cover').fadeOut();
    }
*/
    
    //the decision was to go with fade in/out
    $('.fx-arrow-cover').fadeIn(Drupal.settings.fxElements.overlaySpeed);
    $('.focus .fx-arrow-cover').fadeOut(Drupal.settings.fxElements.overlaySpeed);
    
  }
 
  //set the size of the container
  $('.fx-elements').css({width: width, height: height});

  //set the initial widths
  $('.fx-pane').css({width: paneFocusWidth, height: height});
  
  //add the ids to each pane
  var i = 0;
  var stripeIndex = 0;
  $('.fx-pane').each(function(){
    $(this).attr('id', 'fx-elements-pane-' + i++);
    
    //add the zebra classes to each pane
    var css = $(this).attr('class');
    var stripe = paneZebra[stripeIndex++];
    $(this).attr('class', css + ' ' + stripe);
    
    //check to see if we've run out of zebra stripes, if so set to 0
    if (stripeIndex == paneZebra.length) {
      stripeIndex = 0;
    }
  });
  
  //for divs with hrefs add class "clickable"
  $('.fx-pane[href]').addClass('clickable');

  //respond to hovers
  $('.fx-pane').bind('mouseover', function(){

    var pane = $(this);
        
    //don't do anything if this is already focused
    if (pane.hasClass('focus')){
      return false;
    }
    
    //execute a pane focus on the hover object after a slight delay
    paneHoverDelay = setTimeout(function(){
      paneFocus(pane);
    }, paneHoverDelayBeforeTrigger);
  });

  $('.fx-pane').bind('mouseout', function(){
    clearTimeout(paneHoverDelay)
  });
    
  $('.fx-pane[href]').click(function(){
    var href = $(this).attr('href');
    if (!href){
      return false;
    }
    window.location = href;
  });

  //focus on the first pane onload
  $('.fx-pane:first').addClass('first');
  paneFocus($('.fx-pane:first'));
  
  //make these panes show after they've been arranged onload; this protects against a flash of unstyled divs onload
  $('.fx-elements').show();

}