var delay=500; //Set this to change the amount of time the menu stays active after the mouse has moved off it
var currentMenu;
var currentTimer;
var mouseButton = 0;
var mouseMenu = 0;

function Button() {
	this.down = new Image();
	this.up = new Image();
	return this;
}

function MakeButtonArray(n) { // creates the image array from 0 to n
	if (document.images)   {
		this.length = n;
		for (var i = 0;i<=n;i++) {
		   this[i] = new Button();
	 	}

		return this;
	}
}

Buttons = new MakeButtonArray(9);

Buttons[1].up.src = 'images/banner/mid2_shop_1.jpg'
Buttons[1].down.src = 'images/banner/mid2_shop_2.jpg'

Buttons[2].up.src = 'images/banner/mid2_education_1.jpg'
Buttons[2].down.src = 'images/banner/mid2_education_2.jpg'

Buttons[3].up.src = 'images/banner/mid2_news_1.jpg'
Buttons[3].down.src = 'images/banner/mid2_news_2.jpg'

Buttons[4].up.src = 'images/banner/mid2_support_1.jpg'
Buttons[4].down.src = 'images/banner/mid2_support_2.jpg'

Buttons[5].up.src = 'images/banner/mid2_gallery_1.jpg'
Buttons[5].down.src = 'images/banner/mid2_gallery_2.jpg'

Buttons[6].up.src = 'images/banner/mid2_contactus_1.jpg'
Buttons[6].down.src = 'images/banner/mid2_contactus_2.jpg'

Buttons[7].up.src = 'images/banner/mid2_cart_1.jpg'
Buttons[7].down.src = 'images/banner/mid2_cart_2.jpg'

Buttons[8].up.src = 'images/banner/mid2_home_1.jpg'
Buttons[8].down.src = 'images/banner/mid2_home_2.jpg'

Buttons[9].up.src = 'images/banner/mid2_search_1.jpg'
Buttons[9].down.src = 'images/banner/mid2_search_2.jpg'

function positionMenus() {
  alert(document.getElementById('container').style.left)
  document.getElementById('menu1').style.left = 45
}

function showMenu(menuNum) {
  //hide visible menu, show selected menu,
  //set tab
  if (currentMenu != null) {
	 hideMenu();
  }

   document.getElementById('main').style.zIndex = 5;
  document.getElementById('menu'+menuNum).style.display = 'block';
  document.getElementById('button'+menuNum).src = Buttons[menuNum].down.src;
  currentMenu = menuNum;
  setState(menuNum);
}

function hideMenu() {
  //hide visible menu if mouse is off both menu and button
  document.getElementById('menu'+currentMenu).style.display = 'none';
  document.getElementById('button'+currentMenu).src = Buttons[currentMenu].up.src;
  document.getElementById('main').style.zIndex = 15;
}

function setState(Num) {
  if (Num==currentMenu) {
	 document.getElementById('button'+Num).style.color = 'red';
  } else {
	 document.getElementById('button'+Num).style.color = 'navy';
  }
}

function setMouseState(menuNum, element) {
  if (element == "button") {
	mouseButton = menuNum;
  } else {
	mouseMenu = menuNum;
  }

  if (mouseButton != 0) {
	if (currentTimer) clearTimeout(currentTimer);
	showMenu(mouseButton);
  } else {
	currentTimer = setTimeout(TestState, delay);
  } 
  
  if (menuNum % 2 == 1) {
        document.getElementById('menucontainerOdd').style.zIndex = 10;
  	document.getElementById('menucontainerEven').style.zIndex = 0;
  } else {
  	document.getElementById('menucontainerEven').style.zIndex = 10;
        document.getElementById('menucontainerOdd').style.zIndex = 0;
  }

}

function TestState() {
  if (mouseMenu == 0 && mouseButton == 0) {
	hideMenu();
  }
}