var isIe = ($.browser.msie);
var isBad = ($.browser.msie && $.browser.version < 8);
var isWorse = ($.browser.msie && $.browser.version < 7);

String.prototype.endsWith = function(str){
  return (this.match(str+"$")==str)
}

$(document).ready(function() {

  if(!isWorse) {
    $("#nav .button").fadeTo(0,0.7);
    $("#nav .button.active").fadeTo(0,1);

    $("#nav a").hover (
      function() { navHover(this, false); },   
      function() { navHover(this, true); }
    );
    
    $(".subNavItem").each (function() {
      if($(this).hasClass("active")) {
        $(this).hover(
          function() { subNavActiveHover(this, false); },
          function() { subNavActiveHover(this, true); }
        );
      }
      else {
        $(this).hover(
          function() { subNavInactiveHover(this, false); },
          function() { subNavInactiveHover(this, true); }
        );
      }
    });
    
  }
  
});

function navHover(context, out) {
  if(!out) {
    $(".button", context)
        .stop(true)
        .animate({ opacity:1, bottom:[8,'easeOutCubic'] }, 100)
        .animate({ bottom:[4,'easeInCubic'] }, 100);
        
    $(".shadow", context)
      .stop(true)
      .animate({ top:[4,'easeOutCubic'] }, 100)
      .animate({ top:[2,'easeInCubic'] }, 100);
  }
  else {
    $(".button.active", context)
      .stop(true)
      .animate({ opacity:1, bottom:0 }, 300);
      
    $(".button:not(.active)", context)
      .stop(true)
      .animate({ opacity:0.7, bottom:0 }, 300);
      
    $(".shadow", context)
      .stop(true)
      .animate({ top:0 }, 300);
  }
}

var upLevel = isBad ? 50 : 40;

function subNavActiveHover(context, out) {
  if(!out) {
    $(".tab", context)
      .stop(true)
      .animate({ height:upLevel+5 }, 100);
  }
  else {
    $(".tab", context)
      .stop(true)
      .animate({ height:upLevel }, 100);
  }
}

function subNavInactiveHover(context, out) {
  if(!out) {
    $(".tab", context)
      .stop(true)
      .animate({ height:[upLevel+5,'easeOutCubic'] }, 100)
      .animate({ height:[upLevel-5,'easeInCubic'] }, 70);
    
    //The weirdest IE bug I've ever seen!
    if(isBad) {
      $("a", context).css("color", "#000000");
    }
    else {
      $("a", context)
        .stop(true)
        .animate({ color:"#000000" }, 300);
    }
  }
  else {
    $(".tab", context)
      .stop(true)
      .animate({ height:0 }, 300);
    
    $("a", context)
      .stop(true)
      .animate({ color:"#99ccff" }, 300);
  }
}