// each menu has it's own object with timer
function openMenu()
{
  // only open if the menu is closed
  if(this.menuStatus == "CLOSED")
  {        
  	// make the button stay black
  	$("a#"+this.buttonId).css("background-position", "left -34px");
  	
    this.menuStatus = "MOVING";
  	var me = this;
    
    $("div#"+this.menuId).css({display: "block"}).animate({height: this.subMenuHeight}, 300, function()
    {
      me.menuStatus = "OPEN";
      
      // round off the corners
  		$("div#"+me.menuId).css("-moz-border-radius-bottomright", "10px");
  		$("div#"+me.menuId).css("-webkit-border-bottom-right-radius", "10px");
  		$("div#"+me.menuId).css("-moz-border-radius-bottomleft", "10px");
  		$("div#"+me.menuId).css("-webkit-border-bottom-left-radius", "10px");
  		
    });
  }
}

function closeMenu()
{
  // only close if the menu is open
  if(this.menuStatus != "CLOSED")
  {
    // remove rounded borders
  	$("div#"+this.menuId).css("-moz-border-radius-bottomright", "0px");
  	$("div#"+this.menuId).css("-webkit-border-bottom-right-radius", "0px");
  	$("div#"+this.menuId).css("-moz-border-radius-bottomleft", "0px");
  	$("div#"+this.menuId).css("-webkit-border-bottom-left-radius", "0px");
  	
  	// reset background color
  	$("a#"+this.buttonId).css("background-position", "left 0px");
  	
    this.menuStatus = "MOVING";
  		
  	var me = this;
  
  	$("div#"+this.menuId).animate({height: "0px"}, 300, function()
  	{    
  		// reset background color
  		//$("a#"+me.buttonId).css("background-position", "left 0px");
  		
  		me.menuStatus = "CLOSED";
  		$(this).css({display: "none"});
  	});
  }
}

function subMenu(button)
{
  // vars
  this.buttonId = button+"-menu-link";
  this.menuId = button+"-sub-menu";
  
  this.menuStatus = "CLOSED";
  
  // get and save the current menu height
  // hegiht = number of links inside X 30
  this.subMenuHeight = $("div#"+this.menuId+" a").size() * 30;
  
  // set height to zero
  $("div#"+this.menuId).css("height", "0px");
  
  // stop the standard css mouse over actions
  $("a#"+this.buttonId).css("background-position", "left 0px");
  
  // timer 
  this.timer; 
   
  // methods
  this.open = openMenu;
  this.close = closeMenu;
  
  var me = this;
  
  // set up listeners
  // menu link
  $("a#"+this.buttonId).hover(
  function()
  {
    clearTimeout(me.timer);
    me.open();
  }, 
  function()
  {
    // close after a delay to allow mouse over the menu
    me.timer = setTimeout(function()
    {
      me.close();
    }, 10);
  });
  
  // sub menu
  $("div#"+this.menuId).hover(
  function()
  {   	
    clearTimeout(me.timer);
  }, 
  function()
  {
    // close after a delay to allow mouse over the menu
    me.timer = setTimeout(function()
    {
      me.close();
    }, 10);
  });
}

$("document").ready(function()
{
  new subMenu("hosting");
  new subMenu("domains");
  new subMenu("webdesign");
});