var timeOutTable = new Array(10);
var subMenuNumber = 8;
var active_element = 0;

$(document).ready(function(){
	
	$('div#menu a').mouseover(function() {		
		id = $(this).attr('rel');
		active_element = id;
		stopHiding(id);			
		hideAll(id);			
	
		change = Number(id) * 52; 
		$('div#menu').css('backgroundPosition', '8px -' + change + 'px');
		
		pos = ($(window).width() - 992) / 2;
		a = $(this).offset();
		pos = a.left - pos;
		
		if (id == 8) {
			pos = pos - 156;
		}
		
		$('div#submenu_' + id).css('margin-left', pos + 'px');		
		$('div#submenu_' + id).fadeIn('fast');						
			
	});
	
	$('div#menu a').mouseout(function() {		 
		id = $(this).attr('rel');
		startHiding(id);
	});
	$('div.submenu').mouseover(function() {		 
		id = $(this).attr('rel');
		stopHiding(id);
	});
	$('div.submenu').mouseout(function() {		 
		id = $(this).attr('rel');
		startHiding(id);
	});
	
});

function hideAll(id) {	
    for (i=1; i<=subMenuNumber;i++) {
    	if (i != id) {
        	hideSubMenu(i);
        }
    }
}
function hideSubMenu(id) {
	if (id == active_element) {	
		$('div#menu').css('backgroundPosition', '8px 0');
		active_element = 0;
	}
    $("#submenu_" + id).fadeOut("fast");
}
function startHiding(id) {
    timeOutTable[id] = setTimeout('hideSubMenu(\'' + id +'\')', 300)
}
function stopHiding(id) {
    clearTimeout(timeOutTable[id]);
}