// JavaScript Document
var DDSPEED = 10;
var DDTIMER = 15;

// main function to handle the mouse events //
function ddMenu(id,d){
  var h = document.getElementById(id + '-ddheader');
  var c = document.getElementById(id + '-ddcontent');
  clearInterval(c.timer);
  if(d == 1){
    clearTimeout(h.timer);
    if(c.maxh && c.maxh <= c.offsetHeight){return}
    else if(!c.maxh){
      c.style.display = 'block';
      c.style.height = 'auto';
      c.maxh = c.offsetHeight;
      c.style.height = '0px';
    }
    c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
  }else{
    h.timer = setTimeout(function(){ddCollapse(c)},50);
  }
}

// collapse the menu //
function ddCollapse(c){
  c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);
}

// cancel the collapse if a user rolls over the dropdown //
function cancelHide(id){
  var h = document.getElementById(id + '-ddheader');
  var c = document.getElementById(id + '-ddcontent');
  clearTimeout(h.timer);
  clearInterval(c.timer);
  if(c.offsetHeight < c.maxh){
    c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
  }
}

// incrementally expand/contract the dropdown and change the opacity //
function ddSlide(c,d){
  var currh = c.offsetHeight;
  var dist;
  if(d == 1){
    dist = (Math.round((c.maxh - currh) / DDSPEED));
  }else{
    dist = (Math.round(currh / DDSPEED));
  }
  if(dist <= 1 && d == 1){
    dist = 1;
  }
  c.style.height = currh + (dist * d) + 'px';
  c.style.opacity = currh / c.maxh;
  c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
  if((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)){
    clearInterval(c.timer);
  }
}


//=====================================================================================================

function on(num)
{
	var variable = document.getElementById('s'+num);
	variable.style.backgroundColor = "#7a1219";
}

function off(num)
{
	var variable = document.getElementById('s'+num);
	variable.style.backgroundColor = "#111111";
}

function lighten(num)
{
	var div = 'back'+num;
	var level = .3;
	document.getElementById(div).style.opacity = level;
  	document.getElementById(div).style.MozOpacity = level;
  	document.getElementById(div).style.KhtmlOpacity = level;
  	document.getElementById(div).style.filter = "alpha(opacity=" + (level * 100) + ");";
}

function darken(num)
{
	var div = 'back'+num;
	var level = .5;
	document.getElementById(div).style.opacity = level;
  	document.getElementById(div).style.MozOpacity = level;
  	document.getElementById(div).style.KhtmlOpacity = level;
  	document.getElementById(div).style.filter = "alpha(opacity=" + (level * 100) + ");";
}

function menu()
{
	document.getElementById('menu').innerHTML = 
        '<div class="menuitem">'+
           ' <a href="index.html"> '+
		   ' <img src="images/menu_01.png" width="201" height="85" alt="" '+
           ' onmouseover="this.src = \'images/menuover_01.png\';" '+
           ' onmouseout="this.src = \'images/menu_01.png\';"> '+
		   ' </a>'+
       ' </div> '+
       ' <div class="menuitem"> '+
        
       	 ' <dl class="dropdown"> '+
           ' <dt id="one-ddheader" onmouseover="ddMenu(\'one\',1)" onmouseout="ddMenu(\'one\',-1)"> '+
                   ' <img src="images/menu_02.png" width="127" height="85" alt="" '+
                   ' onmouseover="this.src = \'images/menuover_02.png\';" '+
                   ' onmouseout="this.src = \'images/menu_02.png\';"> '+             
              ' </dt> '+
             
             ' <dd id="one-ddcontent" onmouseover="cancelHide(\'one\')" onmouseout="ddMenu(\'one\',-1)"> '+         
                 ' <ul> '+
                     ' <li><div class="smallbox" id="s1"></div>  '+
                         ' <a href="kids.html">'+
						 ' <img src="images/dropdownmenu_1.png" width="150" height="30" alt="" '+
                           ' onmouseover="this.src = \'images/dropdownmenuover_1.png\'; on(1);" '+
                           ' onmouseout="this.src = \'images/dropdownmenu_1.png\'; off(1);"> '+
						   ' </a> '+
                     ' </li> '+
                     ' <li><div class="smallbox" id="s2"></div>  '+
					 	 ' <a href="adults.html"> '+
                         ' <img src="images/dropdownmenu_2.png" width="150" height="30" alt="" '+
                           ' onmouseover="this.src = \'images/dropdownmenuover_2.png\'; on(2);" '+
                           ' onmouseout="this.src = \'images/dropdownmenu_2.png\'; off(2);"> '+
						   '</a> '+
                     ' </li> '+
                     ' <li><div class="smallbox" id="s3"></div>  '+
					 	 ' <a href="bjj.html"> '+
                         ' <img src="images/dropdownmenu_3.png" width="150" height="30" alt="" '+
                           ' onmouseover="this.src = \'images/dropdownmenuover_3.png\'; on(3);" '+
                           ' onmouseout="this.src = \'images/dropdownmenu_3.png\'; off(3);"> '+
						   '</a> '+
                     ' </li> '+
                 ' </ul> '+
             ' </dd> '+
           ' </dl> '+
       ' </div> '+
       ' <div class="menuitem"> '+
           ' <dl class="dropdown"> '+
           ' <dt id="two-ddheader" onmouseover="ddMenu(\'two\',1)" onmouseout="ddMenu(\'two\',-1)"> '+
                   ' <img src="images/menu_03.png" width="112" height="85" alt="" '+
                   ' onmouseover="this.src = \'images/menuover_03.png\';" '+
                   ' onmouseout="this.src = \'images/menu_03.png\';"> '+            
              ' </dt> '+
             
             ' <dd id="two-ddcontent" onmouseover="cancelHide(\'two\')" onmouseout="ddMenu(\'two\',-1)"> '+        
                 ' <ul> '+
                     ' <li><div class="smallbox" id="s4"></div> '+
					 	' <a href="east.html"> '+
                         ' <img src="images/dropdownmenu_4.png" width="150" height="30" alt="" '+
                           ' onmouseover="this.src = \'images/dropdownmenuover_4.png\'; on(4);" '+
                           ' onmouseout="this.src = \'images/dropdownmenu_4.png\'; off(4);"> '+
						' </a> '+
                     ' </li> '+
                     ' <li><div class="smallbox" id="s5"></div> '+
					 	' <a href="west.html"> '+
                         ' <img src="images/dropdownmenu_5.png" width="150" height="30" alt="" '+
                           ' onmouseover="this.src = \'images/dropdownmenuover_5.png\'; on(5);" '+
                           ' onmouseout="this.src = \'images/dropdownmenu_5.png\'; off(5);"> '+
						' </a> '+
                     ' </li> '+
                     ' <li><div class="smallbox" id="s6"></div> '+
					 	' <a href="mid.html"> '+
                         ' <img src="images/dropdownmenu_6.png" width="150" height="30" alt="" '+
                           ' onmouseover="this.src = \'images/dropdownmenuover_6.png\'; on(6);" '+
                           ' onmouseout="this.src = \'images/dropdownmenu_6.png\'; off(6);"> '+
						' </a> '+
                     ' </li> '+
                     ' <li><div class="smallbox" id="s7"></div> '+
					 	' <a href="tri.html"> '+
                         ' <img src="images/dropdownmenu_7.png" width="150" height="30" alt="" '+
                           ' onmouseover="this.src = \'images/dropdownmenuover_7.png\'; on(7);" '+
                           ' onmouseout="this.src = \'images/dropdownmenu_7.png\'; off(7);"> '+
						' </a> '+
                     ' </li> '+
                 ' </ul> '+
             ' </dd> '+
           ' </dl> '+
       ' </div> '+
         ' <div class="menuitem"> '+ 
	     ' <a href="online.html"> '+
           ' <img src="images/menu_04.png" width="162" height="85" alt="" '+
           ' onmouseover="this.src = \'images/menuover_04.png\';" '+
           ' onmouseout="this.src = \'images/menu_04.png\';"> '+
		 ' </a> '+
      ' </div> '+
	  
		' <div class="menuitem"> '+ 
	     ' <a href="http://www.facebook.com/ModernNYC" target="_new"> '+
           ' <img src="images/menu_05.png" width="159" height="85" alt="" '+
           ' onmouseover="this.src = \'images/menuover_05.png\';" '+
           ' onmouseout="this.src = \'images/menu_05.png\';"> '+
		 ' </a> '+
      ' </div> '+
	  
         ' <div class="menuitem"> '+  
       	   ' <dl class="dropdown"> '+
           ' <dt id="four-ddheader" onmouseover="ddMenu(\'four\',1)" onmouseout="ddMenu(\'four\',-1)"> '+
                   ' <img src="images/menu_06.png" width="139" height="85" alt="" '+
                   ' onmouseover="this.src = \'images/menuover_06.png\';" '+
                   ' onmouseout="this.src = \'images/menu_06.png\';"> '+   
              ' </dt> '+
             
             ' <dd id="four-ddcontent" onmouseover="cancelHide(\'four\')" onmouseout="ddMenu(\'four\',-1)"> '+        
                 ' <ul> '+
                     ' <li><div class="smallbox" id="s14"></div> '+
					 	' <a href="eastmap.html"> '+
                         ' <img src="images/dropdownmenu_4.png" width="150" height="30" alt="" '+
                           ' onmouseover="this.src = \'images/dropdownmenuover_4.png\'; on(14);" '+
                           ' onmouseout="this.src = \'images/dropdownmenu_4.png\';  off(14);"> '+
						' </a> '+
                     ' </li> '+
                     ' <li><div class="smallbox" id="s15"></div> '+
					 	' <a href="westmap.html"> '+
                         ' <img src="images/dropdownmenu_5.png" width="150" height="30" alt="" '+
                           ' onmouseover="this.src = \'images/dropdownmenuover_5.png\';  on(15);" '+
                           ' onmouseout="this.src = \'images/dropdownmenu_5.png\'; off(15);"> '+
						' </a> '+
                     ' </li> '+
                     ' <li><div class="smallbox" id="s16"></div> '+
					 	' <a href="midmap.html"> '+
                         ' <img src="images/dropdownmenu_6.png" width="150" height="30" alt="" '+
                           ' onmouseover="this.src = \'images/dropdownmenuover_6.png\';  on(16);" '+
                           ' onmouseout="this.src = \'images/dropdownmenu_6.png\';  off(16);"> '+
						' </a> '+
                     ' </li> '+
                     ' <li><div class="smallbox" id="s17"></div> '+
					 	' <a href="trimap.html"> '+
                         ' <img src="images/dropdownmenu_7.png" width="150" height="30" alt="" '+
                           ' onmouseover="this.src = \'images/dropdownmenuover_7.png\';  on(17);" '+
                           ' onmouseout="this.src = \'images/dropdownmenu_7.png\';  off(17);"> '+
						' </a> '+
                     ' </li> '+
                  ' </ul> '+
              ' </dd> '+
            ' </dl>    '+
    	' </div>';
}