var prefix = '/wp-content/themes/moore/img/';
var images = [
	'tab-left.png',
	'tab-left-highlight.png',
	'tab-left-active.png',
	'tab-middle.png',
	'tab-middle-highlight.png',
	'tab-middle-active.png',
	'tab-right.png',
	'tab-right-highlight.png',
	'tab-right-active.png',
]

function init(){
	
	// Preload images.
	forEach(images, function(image){
		var img = new IMG({'src': prefix+image});
	});
	
	forEach($$('div.tab'), function(tab){
		connect(tab, 'onmouseover', partial(tab_hover, tab));
		if (!hasElementClass(tab, 'active')) {
			connect(tab, 'onmouseout', partial(tab_unhover, tab));
		}
	});
	
	//tab_hover($$('div.active')[0]);
	var tab = $$('div.active')[0];
	var tabs = $$('div.tab');
	var i = 0;
	for (var i=0;i<=tabs.length-1;i++){
		if (tabs[i] == tab) {
			break;
		}
	};
	activate_submenu(i);
	showElement($$('div.submenu')[i]);
}

var active_menu = null;

function tab_hover(tab, e){
	if (!hasElementClass(tab, 'active')) {
		addElementClass(tab, 'tab-highlight');
	}
	
	// Update the sub-menu
	
	// Find the index of the active tab
	var tabs = $$('div.tab');
	var i = 0;
	for (var i=0;i<=tabs.length-1;i++){
		if (tabs[i] == tab) {
			break;
		}
	};
	
	// Use the index to find the correct sub-menu
	activate_submenu(i);
}

function tab_unhover(tab, e){
	removeElementClass(tab, 'tab-highlight');
}

function activate_submenu(i){
	var submenus = $$('div#sub-nav div.submenu');
	var j = 0;
	forEach(submenus, function(menu){
		if (j == i){
			
			// And show it
			if (menu != active_menu || active_menu == null) {
				if (active_menu != null) {
					slideUp(active_menu, {'duration': 0.25, 'afterFinish': partial(slideDown, menu, {'duration': 0.25})});
				}
				active_menu = menu;
			}
		}
		j++;
	});
}

addLoadEvent(init);