// JavaScript Document

var timeoutValue = 500; // delay in menu closure in milliseconds
var fadeInterval = 5; // delay in animations in milliseconds
var fadeIncrement = .02; // size of steps in transitions
var tempBoxName;

var menuTypes = new Array();
		menuTypes['graphic-design'] = 'graphic-design';
		menuTypes['web-design'] = 'web-design';
		menuTypes['publishing'] = 'publishing';
		menuTypes['about-vg'] = 'about-vg';
		
document.getElementById('graphic-design').onmouseover = function() { startOpen('graphic-design'); }
document.getElementById('web-design').onmouseover = function() { startOpen('web-design'); }
document.getElementById('publishing').onmouseover = function() { startOpen('publishing'); }
document.getElementById('about-vg').onmouseover = function() { startOpen('about-vg'); }
		
document.getElementById('m1_cont_graphic-design').onmouseover = function() { startOpen('graphic-design'); }
document.getElementById('m1_cont_web-design').onmouseover = function() { startOpen('web-design'); }
document.getElementById('m1_cont_publishing').onmouseover = function() { startOpen('publishing'); }
document.getElementById('m1_cont_about-vg').onmouseover = function() { startOpen('about-vg'); }
		
document.getElementById('graphic-design').onmouseout = function() { startTimeOut('graphic-design'); }
document.getElementById('web-design').onmouseout = function() { startTimeOut('web-design'); }
document.getElementById('publishing').onmouseout = function() { startTimeOut('publishing'); }
document.getElementById('about-vg').onmouseout = function() { startTimeOut('about-vg'); }
		
document.getElementById('m1_cont_graphic-design').onmouseout = function() { startTimeOut('graphic-design'); }
document.getElementById('m1_cont_web-design').onmouseout = function() { startTimeOut('web-design'); }
document.getElementById('m1_cont_publishing').onmouseout = function() { startTimeOut('publishing'); }
document.getElementById('m1_cont_about-vg').onmouseout = function() { startTimeOut('about-vg'); }

var transitionState = new Array(); // initial proportion of final heights of menuitems
var fullHeight = new Array(); // final heights of menuitems
var currentDirection = new Array(); // final heights of menuitems
var menuInterval = new Array(); // initialise interval array
var timeOut = new Array(); // initialise interval array
		
		transitionState['graphic-design'] = 0;
		currentDirection['graphic-design'] = 'inwards';
		transitionState['web-design'] = 0;
		currentDirection['web-design'] = 'inwards';
		transitionState['publishing'] = 0;
		currentDirection['publishing'] = 'inwards';
		transitionState['about-vg'] = 0;
		currentDirection['about-vg'] = 'inwards';


function startTimeOut(boxName) {
		timeOut[boxName] = setTimeout("startClose('" + boxName + "')", timeoutValue);
}

function startOpen(boxName) {

		closeOthers(boxName);
		clearTimeout(timeOut[boxName]);

		currentDirection[boxName] = 'outwards';
		if(transitionState[boxName]<=0) {
			menuInterval[boxName] = setInterval("updateMovement('" + boxName + "')", fadeInterval);
		}
}

function startClose(boxName) {
		currentDirection[boxName] = 'inwards';
		if(transitionState[boxName]>=1) {
			menuInterval[boxName] = setInterval("updateMovement('" + boxName + "')", fadeInterval);
		}
}

function closeOthers(boxName) {
		for (thisBox in menuTypes) {  
			if (thisBox != boxName) { 
				startClose(thisBox); 
			}
		}
}

function updateMovement(boxName) {
		if (currentDirection[boxName] == 'outwards') {
				moveOutwards(boxName);
		} else {
				moveInwards(boxName);
		}
}

function moveOutwards(boxName) {
	if (transitionState[boxName]<1) {
		transitionState[boxName] += fadeIncrement;
	} else {
		transitionState[boxName] = 1;
		clearInterval(menuInterval[boxName]);
	}
	setElementHeight(boxName);
}

function moveInwards(boxName) {
	if (transitionState[boxName]>0) {
		transitionState[boxName] -= fadeIncrement;
	} else {
		transitionState[boxName] = 0;
		clearInterval(menuInterval[boxName]);
	}
	setElementHeight(boxName);
}

function setElementHeight(boxName) {

	var layerName = 'm1_' + boxName;
	fullHeight[boxName] = document.getElementById(layerName).offsetHeight - 3;

	var currentHeight =  3 + fullHeight[boxName] - (fullHeight[boxName] * Math.pow((1-transitionState[boxName]),4));
	
		containerName = 'm1_cont_' + boxName;
		document.getElementById(containerName).style.top = 323 - Math.ceil(currentHeight) + 'px';
		document.getElementById(containerName).style.height = Math.ceil(currentHeight) + 'px';
	
}