$(function(){

  cacheBackgroundPositions();
  registerHoverables();
  
});

function registerHoverables() {
  
  $('#nav_overlay a').hover(
    function(){
      // mousein
      
      var parent_class = $(this).parent().attr('class');
      // console.log(parent_class);
      
      // set x-value
      var new_background_position = $('#nav li#' + parent_class).data('background_position_x') + "px ";
      
      // only decrease by 90px if it's not the active element
      if ($('#nav li#' + parent_class).data('background_position_y') == 0) {
        new_background_position += "-90px";
      } else {
        new_background_position += "-180px";
      }
      
      // console.log(new_background_position);
      // debug(new_background_position);
      $('#nav li#' + parent_class).css('background-position', new_background_position);
    },
    function(){
      // mouseout
      var parent_class = $(this).parent().attr('class');
      
      var old_background_position = $('#nav li#' + parent_class).data('background_position_x') + "px " + $('#nav li#' + parent_class).data('background_position_y') + "px";
      
      // debug(old_background_position);
      $('#nav li#' + parent_class).css('background-position', old_background_position);
    }
  );
  
}

function cacheBackgroundPositions() {
  $('#nav li.png').each(function(){
    var bg_pos = $(this).css('background-position');
    if (bg_pos == 'undefined' || bg_pos == null) {
      bg_pos = $(this).css('background-position-x') + ' ' + $(this).css('background-position-y');
    }
    
    // kill "px"
    // TODO
    // enhance using regexp
    var bg_pos_x = bg_pos.split(' ')[0].substring(0,bg_pos.split(' ')[0].length-2);
    var bg_pos_y = bg_pos.split(' ')[1].substring(0,bg_pos.split(' ')[1].length-2);
    
    $(this).data('background_position_x', bg_pos_x);
    $(this).data('background_position_y', bg_pos_y);
    
    // debug($(this).data('background_position_x') + " " + $(this).data('background_position_y'));
    
  });
}