
function MenuItemPort( parent , menuItemDescription ) {
	this.attributes = [];
	this.textCell = document.createElement( "td" );
	this.iconCell = document.createElement( "td" );
	this.arrowCell = document.createElement( "td" );
	this._icon = document.createElement( "img" );
	this.iconCell.appendChild( this._icon );
	this.iconCell.appendChild( document.createTextNode(" ") );	/*	required by IE	*/
	this.arrowCell.appendChild( document.createTextNode(" ") );	/*	required by IE	*/
	this._icon.style.display = "none";
	this._icon.onerror = function() {
		this.style.display = "none";
		this.error = true;
	};
	this._icon.onload = function() {
		this.style.display = "";
		this.error = false;
	};
	this.parent = parent;
	this.setType( parent.getType() );
	if( menuItemDescription ) {
		if( menuItemDescription["submenu"] != null ) this.setSubmenu( menuItemDescription["submenu"] );
		this.setText( menuItemDescription["text"] ); 
		this.setRole( menuItemDescription["role"] );
		this.setIconPath( menuItemDescription["icon"] );
		this.setUrl( menuItemDescription["url"] );
		this.setTarget( menuItemDescription["target"] );
	}
	if( ! this.getRole() ) this.setRole( "link" );
	/**
	 *	this.loaded is used in role setter to decide if it is being set during creation, and thus there is no need to create submenu.
	 *	
	 */
	this.loaded = true;
}
MenuItemPort.prototype.className = "";
MenuItemPort.prototype.node = null;
MenuItemPort.prototype.attributes = [];
MenuItemPort.prototype.parent = null;
MenuItemPort.prototype.submenu = null;
MenuItemPort.prototype.text = null;
MenuItemPort.prototype.textCell = null;
MenuItemPort.prototype.arrowCell = null;
MenuItemPort.prototype.type = null;
MenuItemPort.prototype.url = null;
MenuItemPort.prototype.target = null;
MenuItemPort.prototype._icon = null;
MenuItemPort.prototype.iconCell = null;
MenuItemPort.prototype.role = null;	//tells if it has submenu or link
MenuItemPort.prototype.onfocus = null;
MenuItemPort.prototype.onclick = null;
MenuItemPort.prototype.onchange = null;
MenuItemPort.prototype.oncreatesubmenu = null;
MenuItemPort.prototype.loaded = false;


MenuItemPort.prototype.getIcon = function() {
	return this._icon;
}
MenuItemPort.prototype.getIconPath = function() {
	return this._icon.path;
}
MenuItemPort.prototype.setIconPath = function(v) {
	this._icon.src = v;
	this._icon.path = v;
}
MenuItemPort.prototype.isValidIcon = function() {
	return this._icon.error == false;
}

MenuItemPort.prototype.getSubmenu = function() {
	return this._submenu;
}
MenuItemPort.prototype.setSubmenu = function(v) {
	this.createSubmenu( v );
}

MenuItemPort.prototype.setClassName = function(v) {
	this.attributes["className"] = v;
	this.getIcon().className = v;
	if( this.hasFocus() ) this.focus();
}
MenuItemPort.prototype.getClassName = function() {
	return this.attributes["className"];
}

MenuItemPort.prototype.setType = function( v ) {
	if( v != "vertical" && v != "horizontal" ) v = "vertical";
	this.attributes["type"] = v;
	if( v == "vertical" ) {
		this.node = document.createElement( "tr" );
		this.node.className = v;
		this.node.appendChild( this.iconCell );
		this.node.appendChild( this.textCell );
		this.node.appendChild( this.arrowCell );
	}else {
		this.node =  this.textCell ;
	}
	this.getUrl();
	this.setClassName( this.parent.getClassName() + "Item" );
	this.node.menuItem = this;
	this.node.onclick = function(event) {
		if( this.menuItem.onclick ) this.menuItem.onclick(event);
		else if( this.menuItem.getUrl() ) {
			var o;
			if( this.menuItem.getTarget() == "_self" ) o = window;
			else if( this.menuItem.getTarget() == "_parent" ) o = window.parent;
			else o = window.open();
			o.location = this.menuItem.getUrl();
		}
	};
	this.node.onmouseover = function(event) {
		if( this.menuItem.getRole() != "spliter" ) this.menuItem.parent.select( this.menuItem );
	}
	if( this.onchange ) this.onchange();
}

MenuItemPort.prototype.getType = function() {
	return this.attributes["type"] ;
}
MenuItemPort.prototype.setText = function(v) {
	this.attributes["text"] = v;
	if( this.getRole != "spliter" ) this.textCell.innerHTML = v;
	if( this.onchange ) this.onchange();
}
MenuItemPort.prototype.getText = function() {
	return this.attributes["text"];
}

MenuItemPort.prototype.setUrl = function(v) {
	this.attributes["url"] = v;
	if( this.onchange ) this.onchange();
}
MenuItemPort.prototype.getUrl = function() {
	return this.attributes["url"];
}
MenuItemPort.prototype.setTarget = function(v) {
	if( v == "" ) v = "_self";
	this.attributes["target"] = v;
}
MenuItemPort.prototype.getTarget = function() {
	return this.attributes["target"];
}
MenuItemPort.prototype.setRole = function(v) {
	if( v != "submenu" && v != "spliter" ) v = "link";
	this.attributes["role"] = v;
	if( v == "submenu" ) {
		/**
		 *	if menu is being created from load() method and not manualy, then we do not want to create newSubmenu,
		 *	since it will be loaded in a second.
		 *	if it was created now then it would like to be shown and since this one is not appended to anything
		 *	then it would have offsetParent error in counting offset;
		 */
		this.focus();
		if( ! this.getSubmenu() && this.getType() && this.loaded ) {
			this.setSubmenu( new MenuPort( 'vertical' ) );
			/*	menuItem won't get focus unless parent menu is visible	*/
			this.getSubmenu().show();
			this.getSubmenu().newItem( {text:"menuItem", url:"#"} );
		}
	}else {
		this.removeSubmenu();
	}
	if( v == "spliter" ) {
		this.setIconPath("http://");
		this.textCell.innerHTML = "";
		//while( this.textCell.childNodes.length > o ) this.textCell.removeChild( this.textCell.firstChild );
		this.textCell.appendChild( document.createTextNode(" ") );
		this.arrowCell.role = this.textCell.role = this.iconCell.role = "Separator";
	}else {
		this.textCell.innerHTML = this.getText();
		this.arrowCell.role = "Arrow";
		this.textCell.role = "Text";
		this.iconCell.role = "Icon";
	}
	if( this.onchange ) this.onchange();
}
MenuItemPort.prototype.getRole = function() {
	return this.attributes["role"];
}


MenuItemPort.prototype.getOffsetTop = function() {
	var node = this.node, offset = 0;
	if( ! node.offsetParent ) return 0;
	do {
		offset += node.offsetTop;
		node = node.offsetParent;
	}while( node.offsetParent );
	return offset;
}

MenuItemPort.prototype.getOffsetLeft = function() {
	var node = this.node, offset = 0;
	if( ! node.offsetParent ) return 0;
	do {
		offset += node.offsetLeft;
		node = node.offsetParent;
	}while( node.offsetParent );
	return offset;
}

MenuItemPort.prototype.getOffsetWidth = function() {
	return this.node.offsetWidth;
}

MenuItemPort.prototype.getOffsetHeight = function() {
	return this.node.offsetHeight;
}

MenuItemPort.prototype.hasFocus = function() {
	if( ! this.parent ) return false;
	return this.parent.selectedItem == this;
}
MenuItemPort.prototype.focus = function() {
	if( ! this.node ) return;
	this.iconCell.className = this.iconCell.role + "_onfocus";
	this.textCell.className = this.textCell.role + "_onfocus"; 
	this.arrowCell.className = this.arrowCell.role +  ( ( this.getRole() == "submenu" || this.arrowCell.role != "Arrow"  ) ? "" : "Hidden" ) + "_onfocus";
	if( this.getSubmenu() ) this.getSubmenu().show();
	if( this.onfocus ) this.onfocus();
}
MenuItemPort.prototype.blur = function() {
	this.iconCell.className = this.iconCell.role;
	this.textCell.className = this.textCell.role;
	this.arrowCell.className = this.arrowCell.role + ( ( this.getRole() == "submenu" || this.arrowCell.role != "Arrow" ) ? "" : "Hidden" );
	if( this.getSubmenu() ) this.getSubmenu().hide();
}
MenuItemPort.prototype.removeSubmenu = function() {
	if( this.getSubmenu() ) this.getSubmenu().remove();
	this.setSubmenu( null );
}
MenuItemPort.prototype.createSubmenu = function( submenu ) {
	/**
	 *	New menu must be assigned to _submenu cause setter for submenu is designed to create submenu, thus invoke this function and cause infinite loop
	 */
	if( submenu == null ) {
		this._submenu = null;
		return;
	}
	this._submenu = new MenuPort( "vertical" );
	/**
	 * if menu is not appended to body it's (0;0) point is shifted sometimes
	 */
	this.parent.node.parentNode.appendChild( this._submenu.node );
	//document.body.appendChild(this._submenu.node);
	this._submenu.setParent(this);
	this._submenu.setClassName( this.parent.getClassName() );
	/*	copy construction actions	*/
	this._submenu.onnewitem = this.parent.onnewitem;
	this._submenu.onremoveitem = this.parent.onremoveitem;
	this._submenu.show();
	if( submenu ) this._submenu.load( submenu );
	else this.submenu.newItem();
	if( this.oncreatesubmenu ) this.oncreatesubmenu();
}
MenuItemPort.prototype.select = function() {
	this.parent.select( this );
}
MenuItemPort.prototype.getIndex = function() {
	for( var i = 0 ; i < this.parent.items.length ; i++ )
		if( this.parent.items[i] == this ) return i;
	return -1;
}
