Event.observe(window, 'load', loadAccordions, false);
Event.observe(window, 'load', navMain, false);
function loadAccordions() {
	var bottomAccordion = new accordion('vertical_container');
	bottomAccordion.activate($$('#vertical_container .accordion_toggle')[4]);
}

function navMain() {
	var root = document.getElementById('nav-main');
	var tagUL = root.getElementsByTagName('ul')[0];
	var extLength = tagUL.offsetLeft;
	var tagLI = root.getElementsByTagName('li');
	var tagA = root.getElementsByTagName('a');
	for(var i = 0; i < tagA.length; i++) {
		tagA[i].onmouseover = function() {
			// get the current index
			var index = 0;
			for(var k = 0; k < tagA.length; k++) {
				if(tagA[k] == this) {
					index = k;
					break;
				}
			}
			var parentWidth = this.parentNode.scrollWidth; // LI width
			var width = extLength + getWidth(index, tagLI) -  (212 / 2 - parentWidth / 2); // bg width
			root.style.backgroundPosition = width + 'px' + ' bottom';
		};
		
		tagA[i].onmouseout = function() {
			root.style.backgroundPosition = '-5000px -5000px';
		}
	};
}

// get total legnth of li with index from 0 to index
function getWidth(index, nodeList) {
	var width = 0;
	for(var i = 0; i < index; i++) {
		width += nodeList[i].scrollWidth;
	}
	return width;
}