// JavaScript Document
// Script originally from http://javascript-array.com/scripts/simple_drop_down_menu/# and then modified.

var openedMenu = 0;
var timeoutValue = 200;
var fadeTimeout = 5;
var fadeTimer = null;
var initialOpacity = 1;
var currentOpacity = 1;

function openMenu(id){
	//cancel any possible closing timer
	cancelCloseTimer();
	//if any menu is open close it
	closeMenu();
	//get the current menu and show it
	openedMenu = document.getElementById(id);
	openedMenu.style.visibility="visible";
	openedMenu.style.opacity = initialOpacity;
}


function fade(){
	if(currentOpacity > 0){
		currentOpacity -= initialOpacity/(timeoutValue/fadeTimeout);
		openedMenu.style.opacity=currentOpacity;
		fadeTimer = window.setTimeout(fade, fadeTimeout);
	}else{
		closeMenu();
	}
}

function closeMenu(){
	if(openedMenu) openedMenu.style.visibility="hidden";
}

function startCloseTimer(){
	fadeTimer = window.setTimeout(fade,fadeTimeout);
}

function cancelCloseTimer(){
	window.clearTimeout(fadeTimer);
	currentOpacity = initialOpacity;
	if(openedMenu != 0)
		openedMenu.style.opacity = initialOpacity;
}

var fadeInPageTimer = null;
var obscuringDiv = null;

function fadeInPage(){
	if (navigator.userAgent.indexOf("Firefox") != -1){
		obscuringDiv = document.createElement('div');
		obscuringDiv.setAttribute('id','obscuringDiv');
		obscuringDiv.style.opacity =1;
		document.getElementById("mainContents").appendChild(obscuringDiv);
		 _fadeInPage();
	}	
	else{
		return; 
	}
}

function _fadeInPage(){
	obscuringDiv.style.opacity -= 0.03;
	if(obscuringDiv.style.opacity < 0){
		obscuringDiv.style.opacity = 0;
		obscuringDiv.style.visibility="hidden";
		
	}else{
		fadeInPageTimer = window.setTimeout(_fadeInPage,10);
	}
}

//attach handlers to the menus and submenus 
function initHandlers(){
	document.getElementById("catsButton").onmouseover=function(event){openMenu("catsSubMenu")};
	document.getElementById("catsButton").onmouseout=function(event){startCloseTimer()};
	document.getElementById("catsSubMenu").onmouseover=function(event){cancelCloseTimer()};
	document.getElementById("catsSubMenu").onmouseout=function(event){startCloseTimer()};

	document.getElementById("kittensButton").onmouseover=function(event){openMenu("kittensSubMenu")};
	document.getElementById("kittensButton").onmouseout=function(event){startCloseTimer()};
	document.getElementById("kittensSubMenu").onmouseover=function(event){cancelCloseTimer()};
	document.getElementById("kittensSubMenu").onmouseout=function(event){startCloseTimer()};
	
	document.getElementById("aboutUsButton").onmouseover=function(event){openMenu("aboutUsSubMenu")};
	document.getElementById("aboutUsButton").onmouseout=function(event){startCloseTimer()};
	document.getElementById("aboutUsSubMenu").onmouseover=function(event){cancelCloseTimer()};
	document.getElementById("aboutUsSubMenu").onmouseout=function(event){startCloseTimer()};
	
	// fadeInPage();
}

document.onclick = function(event) {closeMenu()}; 

window.onload = function(event){ initHandlers()};