// DODAWANIE EVENTÓW
function addEvent( node, evtType, func ) {
	if( node.addEventListener ) node.addEventListener( evtType, func, false );
	else if( node.attachEvent ) node.attachEvent( "on" + evtType, func );
}



// PODMENU
var bgPos = new Array( "0 ", "0 ", "-75px ", "-157px " ) // bg positions
var hiding_Timeout_ID;	// hiding timeOut id
var visibleTab = null; // visible submenu tab
function tabOver( num ) {
	if( visibleTab != null ) hideNow();
	document.getElementById("tm"+num).style.backgroundPosition="0 33px";
	document.getElementById("tm"+num).firstChild.style.backgroundPosition="100% 100%";
	
	document.getElementById("tm"+num).style.color="#fff";
	document.getElementById("topSubMenu"+num).style.display="block";
	visibleTab = num;
}
function tabOut( num ) {
	visibleTab = num
	document.getElementById("tm"+num).style.backgroundPosition="0 33px";
	document.getElementById("tm"+num).firstChild.style.backgroundPosition="100% 100%";
	document.getElementById("tm"+num).style.color="#fff";
	document.getElementById("topSubMenu"+num).style.display="block";
	hiding_Timeout_ID = window.setTimeout( 'hideNow()', 100 );
}
function hoverSub() {
	clearTimeout( hiding_Timeout_ID );
}
function hideNow() {
	clearTimeout( hiding_Timeout_ID );
	document.getElementById("tm"+visibleTab).style.backgroundPosition="0 0";
	document.getElementById("tm"+visibleTab).firstChild.style.backgroundPosition="100% 0%";
	document.getElementById("tm"+visibleTab).style.color="#d45d17";
	document.getElementById("topSubMenu"+visibleTab).style.display="none";	
	visibleTab = null;
}



// EVENTY PODMENU
function initMenu() {
	// 1
	addEvent( document.getElementById("tm1"), 'mouseover', function() { tabOver(1); } );
	addEvent( document.getElementById("tm1"), 'mouseout', function() { tabOut(1); } );
	addEvent( document.getElementById("topSubMenu1"), 'mouseover', function() { hoverSub(); } );	
	addEvent( document.getElementById("topSubMenu1"), 'mouseout', function() { tabOut(1); } );
	// 2
	addEvent( document.getElementById("tm2"), 'mouseover', function() { tabOver(2); } );
	addEvent( document.getElementById("tm2"), 'mouseout', function() { tabOut(2); } );
	addEvent( document.getElementById("topSubMenu2"), 'mouseover', function() { hoverSub(); } );
	addEvent( document.getElementById("topSubMenu2"), 'mouseout', function() { tabOut(2); } );
	// 3
	addEvent( document.getElementById("tm3"), 'mouseover', function() { tabOver(3); } );
	addEvent( document.getElementById("tm3"), 'mouseout', function() { tabOut(3); } );
	addEvent( document.getElementById("topSubMenu3"), 'mouseover', function() { hoverSub(); } );	
	addEvent( document.getElementById("topSubMenu3"), 'mouseout', function() { tabOut(3); } );	
}

addEvent( window, 'load', initMenu );