var extEl, ani, outAni, outEl;

function close(el){
	var ULs = el.parentNode.getElementsByTagName("ul");
	for(var i=0; i<ULs.length; i++){
		ULs[i].style.width = "auto";
		ULs[i].style.position = "relative";
		ULs[i].style.left = "auto";
		ULs[i].style.top = "auto";
		if(cmnMatch_class(ULs[i], "opened")){
			var eli = ULs[i].getElementsByTagName("li");
			for(var j=0; j<eli.length; j++){
				if(!cmnMatch_class(eli[j], "selected")){
					eli[j].style.display = "none";
				}
			}
			var oDivControl = ULs[i].getElementsByTagName("div");
			if(oDivControl.length > 0){
				ULs[i].removeChild(oDivControl[0]);
			}
			cmnRemove_class(ULs[i], "opened");
		}
	}
	clearInterval(outAni);
}

function Navigation(id){
	this._id = id;
	this._container = document.getElementById(this._id);
	var cUls = this._container.getElementsByTagName("ul");
	this.ulArr = new Array();
	for(var i=0; i<cUls.length; i++){
		this.attachEvents(cUls[i]);
		this.ulArr[i] = cUls[i];
		this.ulArr[i]["width"] = cUls[i].offsetWidth + 2;
		var oLi = cUls[i].getElementsByTagName("li");
		for(var j=0; j<oLi.length; j++){
			if(!cmnMatch_class(oLi[j], "selected")){
				oLi[j].style.display = "none";
			}
		}
		this.ulArr[i]["s-width"] = cUls[i].offsetWidth;
	}
}

Navigation.prototype.prepare = function(ul){
	ul.style.left = ul.offsetLeft + "px";
	ul.style.top = ul.offsetTop + "px";
	ul.style.position = "absolute";
	ul.style.zIndex = "2";
}

Navigation.prototype.compose = function(el){
	if(outAni)
		clearInterval(outAni);
	if(!cmnMatch_class(el, "opened")){
		var toDo = el.getElementsByTagName("li").length;
		var ULs = el.parentNode.getElementsByTagName("ul");
		if(toDo > 1){
			for(var i=ULs.length-1; i>=0; i--){
				this.prepare(ULs[i]);
			}
			el.style.zIndex = "3";
			for(var i=0; i<this.ulArr.length; i++){
				if(el == this.ulArr[i]){
					el.style.width = this.ulArr[i]["width"] + "px";
				}
			}
			var eli = el.getElementsByTagName("li");
			cmnSet_class(el, "opened");
			for(var i=0; i<eli.length; i++){
				if(cmnMatch_class(eli[i], "selected")){
					var top = eli[i].offsetTop;
				}
				eli[i].style.display = "block";
			}
			el.style.top = -top+10 + "px";
			el.style.left = el.offsetLeft-1 + "px";
			var oTop = el.offsetTop;
			var parnt = el.parentNode;
			do{
				oTop += parnt.offsetTop;
			}while(parnt = parnt.offsetParent);
			if(oTop < -5){
				var oDivControl = document.createElement("div");
				cmnSet_class(oDivControl, "top-ctrl");
				oDivControl.style.top = -oTop-1 + "px";
				extEl = el;
				cmnAdd_event(oDivControl, "mouseover", function(evt){ ani = setInterval("_my.moveTo(extEl)", 100) });
				cmnAdd_event(oDivControl, "mouseout", function(evt){ clearInterval(ani) });
				el.appendChild(oDivControl);
			}
		}
			for(var i=0; i<ULs.length; i++){
				if(ULs[i] != el && cmnMatch_class(ULs[i], "opened")){
					var oDivControl = ULs[i].getElementsByTagName("div");
					if(oDivControl.length > 0){
						ULs[i].removeChild(oDivControl[0]);
					}
					ULs[i].style.top = "0px";
					ULs[i].style.left = ULs[i].offsetLeft + 1 + "px";
					ULs[i].style.width = this.ulArr[i]["s-width"];
					var LIs = ULs[i].getElementsByTagName("li");
					for(var j=0; j<LIs.length; j++){
						if(!cmnMatch_class(LIs[j], "selected")){
							LIs[j].style.display = "none";
						}
					}
					cmnRemove_class(ULs[i], "opened");
				}
			}
		
	}
	
}

Navigation.prototype.clear = function(el){
	el.style.width = "auto";
	el.style.position = "relative";
	el.style.left = "auto";
	el.style.top = "auto";
	if(cmnMatch_class(el, "opened")){
		var eli = el.getElementsByTagName("li");
		for(var i=0; i<eli.length; i++){
			if(!cmnMatch_class(eli[i], "selected")){
				eli[i].style.display = "none";
			}
		}
		var oDivControl = el.getElementsByTagName("div");
		if(oDivControl.length > 0){
			el.removeChild(oDivControl[0]);
		}
		cmnRemove_class(el, "opened");
	}

}

Navigation.prototype.attachEvents = function(el){
	var eli = el.getElementsByTagName("li");
	for(var i=0; i<eli.length; i++){
		if(cmnMatch_class(eli[i], "selected")){
			_my = this;
			outEl = el;
			cmnAdd_event(el, "mouseover", function(evt){ _my.compose(el) });
			cmnAdd_event(el, "mouseout", function(evt){ outAni = setInterval("close(outEl)", 300) });
//			addEvent(document.body, "click", function(evt){ _my.clear(el) });
		}
	}
}

Navigation.prototype.moveTo = function(el){
	var step = 32;
	var topMargin = 6;
	var div = el.getElementsByTagName("div")[0];
	div.style.top = div.offsetTop - step+11 + "px";
	if(div.offsetTop < 0){
		el.style.top = el.offsetTop + (div.offsetTop+step+topMargin) + "px";
	} else {
		el.style.top = el.offsetTop + step + "px";
	}
	if(div.offsetTop < 0){
		clearInterval(ani);
		el.removeChild(el.getElementsByTagName("div")[0]);
	}
}


//var nav = new Navigation("cNav");