/**********************************************************************************
 * 
 * LastChangedDate:		$Date: 2006-07-28 15:24:08 +0200 (Fri, 28 Jul 2006) $
 * LastChangedRevision	$Rev: 6 $
 * LastChangedBy:		$Author: $
 * HeadURL:				$URL: http://linux/cd/geuzenvloot/trunk/js/menu.js $
 * ID:					$Id: menu.js 6 2006-07-28 13:24:08Z  $
 * 
/**********************************************************************************/

/**
 * Menu Class
 * 
 * @param string
 * @param string
 * @param array
 */
nl.xd.navigation.Menu = function( mainmenu , submenu , items ) {
	this.mainmenuContainer = null ;
	this.submenuContainer = null ;
	
	this.parent = null ;
	this.interval = null ;
	this.active = null ;
	
	this.childs = new Array() ;
	
	this.initialize( mainmenu , submenu , items ) ;
	this.build() ;
} ;

/**
 * Methods
 */

/**
 * @param string
 * @param string
 * @param array
 * @return void
 */
nl.xd.navigation.Menu.prototype.initialize = function( mainmenu , submenu , items ) {
	this.mainmenuContainer = nl.xd.util.DOM.get( mainmenu ) ;
	this.submenuContainer = nl.xd.util.DOM.get( submenu ) ;
	
	for ( var i = 0; i < items.length; i++ ) {
		this.childs.push( new nl.xd.navigation.MainMenuItem( this , items[ i ] ) ) ;
	} ;
} ;

/**
 * @return void
 */
nl.xd.navigation.Menu.prototype.build = function() {
	for ( var i = 0; i < this.childs.length; i++ ) {
		this.mainmenuContainer.appendChild( this.childs[ i ].build() ) ;
		
		if ( i < ( this.childs.length - 1 ) ) {
			var divider = document.createElement( 'div' ) ;
			divider[ 'className' ] = 'divider' ;
			
			this.mainmenuContainer.appendChild( divider ) ;
		} ;
	} ;
} ;

/**
 * @param MenuItem
 * @return void
 */
nl.xd.navigation.Menu.prototype.out = function( menuItem ) {
	clearInterval( this.interval ) ;
	
	var self = this ;
	
	this.interval = setInterval( function() { self.remove( menuItem ) ; } , 300 ) ;
} ;

/**
 * @param MenuItem
 * @return void
 */
nl.xd.navigation.Menu.prototype.over = function( menuItem ) {
	clearInterval( this.interval ) ;
	
	if ( typeof nl != 'object' ) {
		return ;
	} ;
	
	var menu = menuItem.menu ;
	
	// Hide active item and corresponding submenu
	if ( menu.active != null ) {
		nl.xd.util.DOM.removeClass( menu.active.node , 'active' ) ;
		
		if ( menu.active.submenu != null ) {
			menu.active.submenu.hide() ;
		} ;
	} ;
	
	nl.xd.util.DOM.addClass( menuItem.node , 'active' ) ;
	
	// If the item has a submenu show it
	if ( menuItem.submenu != null ) {
		menuItem.submenu.show() ;
	} ;
	
	menu.active = menuItem ;
} ;

/**
 * @param MenuItem
 * @param MenuItem
 * @return boolean
 */
nl.xd.navigation.Menu.prototype.isAncestor = function( ancestor , menuItem ) {
	while ( menuItem != null ) {
		if ( menuItem == ancestor ) {
			return true ;
		} ;
		
		menuItem = menuItem.menu.parent ;
	} ;
	
	return false ;
} ;

/**
 * @param MenuItem
 * @return void
 */
nl.xd.navigation.Menu.prototype.remove = function( menuItem ) {
	clearInterval( this.interval ) ;
	
	if ( typeof nl != 'object' ) {
		return ;
	} ;
	
	var menu = null ;
	var parentItem = menuItem ;
	
	while ( parentItem != null ) {
		menu = parentItem.menu ;
		
		if ( menu.active != null ) {
			nl.xd.util.DOM.removeClass( menu.active.node , 'active' ) ;
			
			if ( menu.active.submenu != null ) {
				menu.active.submenu.hide() ;
			} ;
		} ;
		
		parentItem = menu.parent ;
	} ;
} ;

/**
 * Submenu Class
 * 
 * @param MainMenu
 * @param MainMenuItem
 * @param array
 */
nl.xd.navigation.SubMenu = function( root , parent , items ) {
	this.root = root ;
	this.parent = parent ;
	
	this.node = null ;
	this.active = null ;
	this.positioned = false ;
	this.childs = new Array() ;
	this.padding = 20 ;
	
	this.initialize( items ) ;
} ;

/**
 * Methods
 */

/**
 * @param array
 * @return void
 */
nl.xd.navigation.SubMenu.prototype.initialize = function( items ) {
	for ( var i = 0; i < items.length; i++ ) {
		this.childs.push( new nl.xd.navigation.SubMenuItem( this.root , this , items[ i ] ) ) ;
	} ;
} ;

/**
 * @return void
 */
nl.xd.navigation.SubMenu.prototype.build = function() {
	var width = 0 ;
	
	this.node = document.createElement( 'div' ) ;
	
	nl.xd.util.DOM.addClass( this.node , 'submenu' ) ;
	nl.xd.util.DOM.addClass( this.node , 'hide' ) ;
	
	for ( var i = 0; i < this.childs.length; i++ ) {
		this.node.appendChild( this.childs[ i ].build() ) ;
		
		if ( this.childs[ i ].width > width ) {
			width = this.childs[ i ].width ;
		} ;
	} ;
	
//	this.node.style.width = width + 'px' ;
	this.root.submenuContainer.appendChild( this.node ) ;
} ;

/**
 * @return void
 */
nl.xd.navigation.SubMenu.prototype.show = function() {
	if ( this.active != null ) {
		if ( this.active.submenu != null ) {
			this.active.submenu.hide() ;
		} ;
		
		this.active = null ;
	} ;
	
	position = nl.xd.util.DOM.position( this.parent.node ) ;
	
	if ( this.parent.type == 'MainMenuItem' ) {
		position[ 0 ] += this.parent.node.offsetWidth ;
	} else {
		position[ 0 ] += this.parent.node.offsetWidth ;
	} ;
	
	this.node.style.left = position[ 0 ] + 'px' ;
	this.node.style.top = position[ 1 ] + 'px' ;
	
	if ( ! this.positioned ) {
		this.setWidth() ;
		this.positioned = true ;
	} ;
	
	nl.xd.util.DOM.removeClass( this.node , 'hide' ) ;
} 

/**
 * @return void
 */
nl.xd.navigation.SubMenu.prototype.setWidth = function() {
	var width = 0 ;
	
	for ( var i = 0; i < this.childs.length; i++ ) {
		if ( this.childs[ i ].node.offsetWidth > width ) {
			width = this.childs[ i ].node.offsetWidth ;
		} ;
	} ;
	
	for ( var i = 0; i < this.childs.length; i++ ) {
		this.childs[ i ].node.style.paddingLeft = this.padding + 'px' ;
		this.childs[ i ].node.style.width = width + this.padding + 'px' ;
	} ;
	
	this.node.style.width = width + ( 2 * this.padding ) + 'px' ;
} ;

/**
 * @return void
 */
nl.xd.navigation.SubMenu.prototype.hide = function() {
	if ( this.active != null ) {
		nl.xd.util.DOM.removeClass( this.active.node , 'active' ) ;
		
		if ( this.active.submenu != null ) {
			this.active.submenu.hide() ;
		} ;
		
		this.active = null ;
	} ;
	
	nl.xd.util.DOM.addClass( this.node , 'hide' ) ;
} ;

/**
 * MainMenuItem Class
 * 
 * @param Menu
 * @param array
 */
nl.xd.navigation.MainMenuItem = function( root , attributes ) {
	this.root = root ;
	this.menu = root ;
	
	this.type = 'MainMenuItem' ;
	this.link = attributes[ 0 ] ;
	this.title = attributes[ 1 ] ;
	
	this.submenu = null ;
	this.node = null ;
	
	this.initialize( attributes[ 2 ] ) ;
} ;

/**
 * Methods
 */

/**
 * @param array
 * @return void
 */
nl.xd.navigation.MainMenuItem.prototype.initialize = function( items ) {
	if ( items.length ) {
		this.submenu = new nl.xd.navigation.SubMenu( this.root , this , items ) ;
	} ;
} ;

/**
 * @return Node
 */
nl.xd.navigation.MainMenuItem.prototype.build = function() {
	var div = document.createElement( 'div' ) ;
	div[ 'className' ] = 'item' ;
	
	this.node = document.createElement( 'a' ) ;
	this.node[ 'href' ] = '?id=' + this.link ;
	this.node.innerHTML = this.title ;
	this.node.menuItem = this ;
	
	var menuItem = this ;
	
	nl.xd.util.Event.addListener( this.node , 'mouseover' , function() { menuItem.root.over( menuItem ) ; } ) ;
	nl.xd.util.Event.addListener( this.node , 'mouseout' , function() { menuItem.root.out( menuItem ) ; } ) ;
	
	div.appendChild( this.node ) ;
	
	if ( this.submenu != null ) {
		this.submenu.build() ;
	} ;
	
	return div ;
} ;

/**
 * SubMenuItem Class
 * 
 * @param Menu
 * @param SubMenu
 * @param array
 */
nl.xd.navigation.SubMenuItem = function( root , menu , attributes ) {
	this.root = root ;
	this.menu = menu ;
	
	this.type = 'SubMenuItem' ;
	this.link = attributes[ 0 ] ;
	this.title = attributes[ 1 ] ;
	this.width = 0 ;
	
	this.submenu = null ;
	this.node = null ;
	
	this.initialize( attributes[ 2 ] ) ;
} ;

/**
 * Methods
 */

/**
 * @param array
 * @return void
 */
nl.xd.navigation.SubMenuItem.prototype.initialize = function( items ) {
	if ( items.length ) {
		this.submenu = new nl.xd.navigation.SubMenu( this.root , this , items ) ;
	} ;
} ;

/**
 * @return Node
 */
nl.xd.navigation.SubMenuItem.prototype.build = function() {
	var div = document.createElement( 'div' ) ;
	
	this.node = document.createElement( 'a' ) ;
	this.node[ 'href' ] = '?id=' + this.link ;
	this.node.innerHTML = this.title ;
	this.node.menuItem = this ;
	
	var menuItem = this ;
	
	nl.xd.util.Event.addListener( this.node , 'mouseover' , function() { menuItem.root.over( menuItem ) ; } ) ;
	nl.xd.util.Event.addListener( this.node , 'mouseout' , function() { menuItem.root.out( menuItem ) ; } ) ;
	
	div.appendChild( this.node ) ;
	
	if ( this.submenu != null ) {
		this.submenu.build() ;
	} ;
	
	return div ;
} ;