var menuSelector = function(menuParent, config, pathSelected){
	var parent = $j(menuParent)[0];
	this.parent = parent;
	this.topMenu = $j(parent).find("div.menuBox");
	this.subMenu = $j(parent).find("div.subMenuBox");
	
	this.sPath = pathSelected;
	
	$j(config).each($j.proxy(function(index, item){ //Create Main Menu
		item.selected = (item.path == this.sPath)?(true):(false);
		item.sPath = this.sPath;
		
		var div = document.createElement("div");
		var a = document.createElement("a");
		a.href = item.url;
		a.innerHTML = item.name;
		$j(div).append(a);
		$j(this.topMenu).append(div);
		
		var subDiv = document.createElement("div");
		item.menu = this;
		$j(this.subMenu).append(subDiv);
		item.subDiv = subDiv;
		$j(item.submenu).each($j.proxy(function(index, sItem){//Create Sub Menu
			sItem.selected = (sItem.path == this.sPath);
			this.selected = (this.selected || sItem.selected);
			
			var div = document.createElement("div");
			var a = document.createElement("a");
			a.href = sItem.url;
			a.innerHTML = sItem.name;
			$j(div).append(a);
			$j(div).addClass((sItem.selected)?("subMenu subSel"):("subMenu subNoSel"));
			$j(this.subDiv).append(div);
			
			div.menu = this.menu;
			div.item = this;
		}, item));
		
		if(item.selected){//Make things visible where needed
			$j(div).addClass("topMenu selMenu");
			$j(subDiv).addClass("subMenuGroup subMenuShow");
		}else{
			$j(div).addClass("topMenu noSel");
			$j(subDiv).addClass("subMenuGroup subMenuNoShow");
		}
		item.mover = new moveSubMenu(div, subDiv);
		
		div.menu = this;
		div.item = item;
		item.topMenu = div;
	}, this));
	
	$j("div.selMenu").each(function(){this.item.mover.move();});
	
	this.defTop = $j(parent).find("div.selMenu");
	this.defSubGr = $j(parent).find("div.subMenuShow");
	this.defSub = $j(parent).find("div.subSel");
	
	this.curTop = this.defTop;
	this.curSubGr = this.defSubGr;
	this.curSub = this.defSub;
	
	this.change = $j.proxy(function(){
		this.clear();
		$j(this.curTop).removeClass("noSel");
		$j(this.curSubGr).removeClass("subMenuNoShow");
		$j(this.curSub).removeClass("subNoSel");
		
		$j(this.curTop).addClass("selMenu");
		$j(this.curSubGr).addClass("subMenuShow");
		$j(this.curSub).addClass("subSel");
		$j(this.curTop)[0].item.mover.move();
	}, this);
	
	this.clear = $j.proxy(function(){
		$j(this.parent).find("div.topMenu").removeClass("selMenu");
		$j(this.parent).find("div.topMenu").addClass("noSel");
		
		$j(this.parent).find("div.subMenuGroup").removeClass("subMenuShow");
		$j(this.parent).find("div.subMenuGroup").addClass("subMenuNoShow");
		
		$j(this.parent).find("div.subMenu").removeClass("subSel");
		$j(this.parent).find("div.subMenu").addClass("subNoSel");
	}, this);
	
	this.revert = $j.proxy(function(){
		if(this.curSubGr !== false && this.curTop !== false){
			return;
		}
		this.clear();
		
		this.curTop = this.defTop;
		this.curSubGr = this.defSubGr;
		this.curSub = this.defSub;
		
		this.change();
	}, this);
	
	this.revertTimer = -1;
	this.setRevertTimeout = $j.proxy(function(){
		clearTimeout(this.revertTimer);
		this.revertTimer = setTimeout(this.revert, 1000); // 1.0 sec to act
	}, this);
	
	$j(this.parent).find("div.topMenu").each(function(){
		$j(this).hover(
			$j.proxy(function(){
				this.menu.curTop = this;
				this.menu.curSubGr = this.item.subDiv;
				if($j(this.menu.defSubGr)[0] == $j(this.menu.curSubGr)[0]){
					this.menu.curSub = this.menu.defSub;
				}
				this.menu.change();
			}, this),
			$j.proxy(function(){
				this.menu.curTop = false;
				this.menu.curSubGr = false;
				this.menu.curSub = false;
				this.menu.setRevertTimeout();
			}, this)
		);
	});
	$j(this.parent).find("div.subMenu").each(function(){
		$j(this).hover(
			$j.proxy(function(){
				this.menu.curTop = this.item.topMenu;
				this.menu.curSubGr = this.item.subDiv;
				this.menu.curSub = this;
				this.menu.change();
			}, this),
			$j.proxy(function(){
				this.menu.curTop = false;
				this.menu.curSubGr = false;
				this.menu.curSub = false;
				this.menu.setRevertTimeout();
			}, this)
		);
	});
	
};


var moveSubMenu = function(parent, child){
	this.parent = parent;
	this.child = child;
	this.hardLeft = $j(parent).parents("div.menuBox").offset().left;
	this.hardRight = this.hardLeft + $j(parent).parents("div.menuBox").width();
	
	this.moved = false;
	
	this.move = $j.proxy(function(){
		if(this.moved){
			return;
		}
		this.moved = true;
		$j(child).css("left", 0);
		pW = $j(this.parent).outerWidth();
		pL = $j(this.parent).offset().left;
		var target = pL+(pW/2);
		
		cL = $j(this.child).offset().left;
		cW = $j(this.child).outerWidth();
		var center = cL+(cW/2);
		left = target - center;
		
		if((cL + cW + left) > this.hardRight){ //Check for overflow on the right
	    left -= Math.abs(this.hardRight - (cL+cW+left));
		}
		
		if((cL + left) < this.hardLeft){//Then he left. This might make it overflow to the right again. Better than left because the page can scroll right, not left
	    left += Math.abs(this.hardLeft - (cL+left));
		}
		
		$j(child).css("left", left);
	}, this);
};

/*
<div style="padding: 20px 0px 0px 20px; width: 300px;" id="menuParent">
<div class="menuBox">
  <div class="topMenu noSel" >Test</div>
  <div class="topMenu selMenu" >Testing</div>
  <div class="topMenu noSel" >Test 123</div>
</div>
<div class="subMenuBox">
&nbsp;
  <div class="div.subMenuGroup">
    <div class="subMenu subNoSel">One</div>
    <div class="subMenu subNoSel">Two</div>
    <div class="subMenu subSel">Three</div>
  </div>
</div>
</div>
*/