// JavaScript Document
// V1.2 (v10)

// boolean isDown : ist es eine horizontale navi?
// boolean isFirst : ist es die erste Ausklappebene?

var EcicsMenu = { Version: "1.2.02" };

var openedUL = new Object();
var params = {
		vpOffset: 5, /* Mindestabstand zum Viewport */
		lyPadding: 3, /* Padding des layers der geoeffnet wird; padding auf einer seite! */
		firstTop: 3, /* Vertikale Verschiebung der ersten Ebene */
		firstLeft: 3, /* Horizontale Verschiebung der ersten Ebene */
		secTop: 3, /* Vertikale Verschiebung ab der zweiten Ebene */
		secLeft: 3 /* Horizontale Verschiebung ab der zweiten Ebene */
	};
var isTimeout = false;

function initMenu(initParams) {
	var myNavi = $j("#my_navi"); // wird verschoben, beinhaltet alle Ebenen ab 1 + Ebene 0, ggf. + parents
	var myUl = $j("#main_ul"); // enthaelt nur alle Ebenen ab 1
	
	// wenn die li im ul floaten
	if (myUl.height() == 0) {
		myUl.css("position", "absolute");
		myUl.css("height", myUl.height());
		myUl.css("width", myUl.width());
		myUl.css("position", "");
	}
	
	$j("#div_main_inner").css("position", "relative");	
	var myOffsets = myNavi.position();
	var myWidth = myNavi.width();
	var myHeight = myNavi.height();
	var myTop = myOffsets.top;
    var myLeft = myOffsets.left;
	myNavi.css("position", "absolute");
	myNavi.css("top", myTop + 'px');
    myNavi.css("left", myLeft + 'px');
    myNavi.css("width", myWidth + 'px');
    myNavi.css("height", myHeight + 'px');
	
	$j("#navi_container").css("height", myHeight + "px");
	$j("#div_main_inner").append(myNavi);
	// Konfiguration ggf. mit lokalen params ueberschreiben/erweitern
	initParams = initParams || {};
	for(var p in initParams) params[p] = initParams[p];
}

function log (message) {
	if (typeof console != "undefined") {
		console.log(message);
	}
}


function GetSubtree(event, id, isFirst, isDown) {
	isTimeout = false;
	myTree = $(id);
	myOpener = myTree.parentNode;
	event = event || window.event;
	var fromElement = event.relatedTarget || event.fromElement || false;
	if (fromElement) {
		if (!$(fromElement).descendantOf(myOpener)) {	
			//log("echter mouseover: ("+id+")");
			if($j("> .empty", $j("#"+id)).length != 0) {
				//myTree.insert("<li class='loader'><a href='#' class='menu_popup'>loading...</a></li>");
				openedUL[id] = true;
				LoadTree(id, isFirst, isDown);					
				//ShowTree(id, isFirst, isDown);				
			} else {
				ShowTree(id, isFirst, isDown);
			}
		}
	}
}

function SetTreePosition(id, isFirst, isDown) {
	var myTree = $(id);
	var myPar = myTree.parentNode;
	var myParAPos = myPar.viewportOffset();
	var myParRPos = myPar.positionedOffset();
	var myParDim = myPar.getDimensions();
	var myDim = myTree.getDimensions();
	var myVP = document.viewport.getDimensions();
	isFirst = isFirst || false;
	isDown = isDown || false;
	var myTopOffset = isFirst ? params.firstTop : params.secTop;
	var myLeftOffset = isFirst ? params.firstLeft : params.secLeft;
	
	myTree.style.position = "absolute";
	
	// nach unten klappen
	if (isDown) {
		myParDim = myPar.getDimensions();  // erneut setzen da es problem in baden gab
		myParRPos = myPar.positionedOffset(); // erneut setzen da es problem in baden gab
		/////////////////////////
		// left position	
		// 
		// wenn popup rechts passt normal anzeigen		
		//log(myParRPos.left + " : " + myParDim.width + " : " + params.lyPadding + " : " + myLeftOffset);		
		if (myParAPos.left + (myDim.width - (2 * params.lyPadding)) + myLeftOffset + params.vpOffset < myVP.width) {
			var newPos = myParRPos.left - params.lyPadding + myLeftOffset;
			myTree.style.left = newPos + "px";
		} 
		// sonst nach links verschieben
		else {
			var newPos = (myParRPos.left + myParDim.width) - (myDim.width - params.lyPadding);
			myTree.style.left = newPos + "px";
		}
		/////////////////////////
		// top position
		// hier keine abfrage, soll immer unterhalb des Items angezeigt werden
		var newPos = myParRPos.top + myParDim.height - params.lyPadding + myTopOffset;
		myTree.style.top = newPos + "px"; 
		//log(myParRPos.top + " : " + myParDim.height + " : " + params.lyPadding + " : " + myTopOffset);
	}
	// sonst nach rechts/links klappen lassen
	else {	
		/////////////////////////
		// left position	
		// 
		// wenn popup rechts passt oder links auch nicht passen wuerde normal anzeigen
		if ((myParAPos.left + (myParDim.width - 0) + (myDim.width - (2 * params.lyPadding)) + myLeftOffset + params.vpOffset < myVP.width) || (myParAPos.left - (myDim.width - (2 * params.lyPadding)) - myLeftOffset < params.vpOffset)) {  // warum -0
			var newPos = myParRPos.left + (myParDim.width - 0) + myLeftOffset - params.lyPadding;
			myTree.style.left = newPos + "px";
		} 
		// sonst links anzeigen
		else {
			myTree.style.left = myParRPos.left - (myDim.width - params.lyPadding) - myLeftOffset + "px";
		}
		/////////////////////////
		// top position
		//
		// wenn popup passt normal anzeigen
		if (myParAPos.top + (myDim.height - (2 * params.lyPadding)) + myTopOffset + params.vpOffset < myVP.height) {
			var newPos = myParRPos.top - params.lyPadding + myTopOffset;
			myTree.style.top = newPos + "px";
		} 
		// sonst wenn popup nicht groesser als viewport nach oben verschieben
		else if (myDim.height - (2 * params.lyPadding) + (2 * params.vpOffset) > myVP.height) {
			var newPos = - ((myParAPos.top - myParRPos.top) - params.vpOffset) // fehlt hier nicht padding?
			myTree.style.top = newPos + "px";
		} 
		// sonst popup ganz nach oben schieben
		else {
			var newPos = (- (myDim.height - ((myVP.height - params.vpOffset) - myParAPos.top))) + myParRPos.top;	
			myTree.style.top = newPos + "px";
		}
	}
}

function CloseSubtree(event, id) {
	isTimeout = true;
	window.setTimeout("HideTrees()", 500);
	myOpener = $(id).parentNode;
	event = event || window.event;
	var toElement = event.relatedTarget || event.toElement || false;
	if (toElement) {
		if (!$(toElement).descendantOf(myOpener)) {
			//log("echter mouseout: ("+id+")");
			HideTree(id);	
		}
	}
}

function HideTrees() {
	if(isTimeout) {
		myArray = [];
		for ( i in openedUL) {
			if (openedUL[i]) {
				myArray.push(i);
			}
		}
		myArray.reverse().each(function(s) {
			HideTree(s);
		});
	}
	isTimeout = false;
}

function HideTree(id) {
	//log("HideTree: ("+id+")");
	openedUL[id] = false;
	myTree = $(id);
	myTree.style.display = "none";
	myA = myTree.previous();
	tempClass = myA.className.gsub('\s*m*s*over\\b', '');	
	myA.className = tempClass;		
	//log("Hided: ("+id+") - "+myTree.style.display);
}

function ShowTree(id, isFirst, isDown) {
	openedUL[id] = true;
	myTree = $(id);
	SetTreePosition(id, isFirst, isDown);
	myTree.style.display = "block";	
	myA = myTree.previous();
	if (myA.match('a.menu_popup')) {
		myA.className += " mover";	
	} else {
		myA.className += " sover";
	}	
	//log("Showed: ("+id+") - "+myTree.style.display);
}


function LoadTree(id, isFirst, isDown) {
	tempId = id.gsub('m', '');
	var url = '/website?action=get_sub_navi_for_id&page_id='+tempId;
	new Ajax.Request(url, {
	  method: 'post',
	  onSuccess: function(transport) {
		myTree = $(id);
		if (transport.responseText != "") {
			myTree.update(transport.responseText);
			if (openedUL[id]) {
				ShowTree(id, isFirst, isDown);
			}
		} else {
			myLI = myTree.parentNode;
			myLI.onmouseover = "";
			myLI.onmouseout = "";
			HideTree(id);
		}
	  },
	  onFailure: function(transport) {
	  	//alert(transport.status+": "+transport.statusText);
		$(id).update("<li><a href='#' class='menu_popup'>Fehler ("+transport.status+")</a></li>");
	  }
	});
}