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')[0]);

}



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;

}