var menu_last_item;
var rollup_flag = false;

function rollup(){
  var menu = jQuery("#menu-content");
  //menu.stop(true);
  if(rollup_flag){
    //menu.slideUp("slow");
    menu.hide();
  } else {
    //menu.slideDown("slow");
    menu.show();
  }
}

jQuery(document).ready(function(){
  jQuery('#menu a').hover(function() {
    var section = jQuery(this).attr("class");
    if(section=="home"){ return; }
    rollup_flag = false;
    menu_last_item = this
    jQuery(menu_last_item).css("background-color","#dd4400");
    var pos  = jQuery("#hwwrap").offset();
    var menu = jQuery("#menu-content");
    menu.css({position : "absolute",
    //          height   : 250,
              top      : pos.bottom,
              left     : 166});
    menu.html("")
    jQuery.ajax({
      method: "get",url: "/menu/"+section+"/",
      success: function(html){ //so, if data is retrieved, store it in html
        //jQuery("#menu-content").slideDown("slow"); //animation
        menu.html(html); //show the html inside .content div
        setTimeout(rollup, 200);
      }
    });
  },function() {
    var section = jQuery(this).attr("class");
    if(section=="home"){ return; }
    jQuery(menu_last_item).css("background-color","#1a1a1e");
    rollup_flag = true;
    setTimeout(rollup, 500); //animation
  });
  
  jQuery('#menu-content').hover(function() {
    rollup_flag = false;
    rollup();
    //var menu = jQuery("#menu-content");
    //menu.css("height", 250);
    //menu.slideDown("fast");
    jQuery(menu_last_item).css("background-color","#dd4400");
  }, function() {
    jQuery(menu_last_item).css("background-color","#1a1a1e");
    rollup_flag = true;
    setTimeout(rollup, 500);
  });
});