// Simple JavaScript Templating
// John Resig - http://ejohn.org/ - MIT Licensed
(function(){
  var cache = {};
 
  this.tmpl = function tmpl(str, data){
    // Figure out if we're getting a template, or if we need to
    // load the template - and be sure to cache the result.
    var fn = !/\W/.test(str) ?
      cache[str] = cache[str] ||
        tmpl(document.getElementById(str).innerHTML) :
     
      // Generate a reusable function that will serve as a template
      // generator (and which will be cached).
      new Function("obj",
        "var p=[],print=function(){p.push.apply(p,arguments);};" +
       
        // Introduce the data as local variables using with(){}
        "with(obj){p.push('" +
       
        // Convert the template into pure JavaScript
        str
          .replace(/[\r\t\n]/g, " ")
          .split("<#").join("\t")
          .replace(/((^|%>)[^\t]*)'/g, "$1\r")
          .replace(/\t=(.*?)#>/g, "',$1,'")
          .split("\t").join("');")
          .split("#>").join("p.push('")
          .split("\r").join("\\'")
      + "');}return p.join('');");
   
    // Provide some basic currying to the user
    return data ? fn( data ) : fn;
  };
})();


// on body load
$(function() {
    // init  
    
    /* Primary Navigation hide/show behavior */
    $("ul#nav > li").each(function(){
        var $this = $(this),
            getSelected = function(){ return $this.parent().children("li.selected").find("div.nav-wrap-l2"); },
            $l2 = $this.find("div.nav-wrap-l2"),
            rate = 1;
       
        if($this.is(":not(.selected)")){
            $l2.css({ "opacity": 0 });    // We're directly animating opacity because there's wonkyness with jQuery's fadeIn/Out   
        }
        
        $this.click(function(e){
            $this.siblings().removeClass("selected").end().addClass("selected");
        });
        
        $this.hover(
            function(){ // over
                $this.addClass("hover");
                if ($this.is(":not(.selected)")) {
                    var $selected = getSelected();
                    // fading-in element should be at max z-index for usability's sake
                    $l2.css({ "z-index": 10, "display": "block" }).stop().animate( { "opacity": 1 }, rate, function(){ if ($.browser.msie) { this.style.removeAttribute("filter"); } });
                    $selected.css("z-index", 1).stop().animate({ "opacity": 0 }, rate, function(){ $selected.css("display", "none") });
                }
            },
			
            function(){ // out
                $this.removeClass("hover");
                if ($this.is(":not(.selected)")) {
                    var $selected = getSelected();
                    // hide when done, to avoid triggering mouse events
                    $l2.css("z-index", 1).stop().animate({"opacity": 0}, rate,  function(){ $l2.css("display", "none") } );
                    $selected.css({"z-index": 10, "display": "block" }).stop().animate({"opacity": 1}, rate);
                }
            }
        );
       
    });
    /* End Primary Nav code */
   
});