// JavaScript Document
var G_MENU_LIST = new Array();
var G_MENU_LEFT_OFFSET = 0;
var G_MENU_CLOSE_DELAY = 100;

var G_MENU_FINISH_MOTION_TIME = 200;

//Constaint


var sampleData = [
	['subject', 'link'
		['child subject', 'link'],
		['child subject', 'link'],
	],
];

// Global function
function calculateOffset( minWidth ){
	if ( document.body.clientWidth > minWidth ){
		G_MENU_LEFT_OFFSET = (document.body.clientWidth - minWidth )/2;
	}else{
		G_MENU_LEFT_OFFSET = 0
	}
}

function showMenu( menuId ){
	if ( G_MENU_LIST[ menuId ] ){
		G_MENU_LIST[ menuId ].show();
	}
}
function hideMenu( menuId ){
	setTimeout( function(){
		if ( G_MENU_LIST[ menuId ] ){
			G_MENU_LIST[ menuId ].hide();
		}
	} , G_MENU_CLOSE_DELAY );
}

function itemOut( menuId, itemIndex ){
	if ( G_MENU_LIST[ menuId ] ){
		if ( G_MENU_LIST[ menuId ].childs.length > itemIndex ){
			G_MENU_LIST[ menuId ].childs[ itemIndex ].out();
		}
	}
}
function itemOver( menuId, itemIndex ){
	if ( G_MENU_LIST[ menuId ] ){
		if ( G_MENU_LIST[ menuId ].childs.length > itemIndex ){
			G_MENU_LIST[ menuId ].childs[ itemIndex ].over();
		}
	}
}

// Constructor
function Menu( menuId, itemHeight, itemsData, top, left ){
	this.id = menuId;
	this.childs = new Array();
	this.itemHeight = itemHeight;
	this.top = top;
	this.left = left;
	this.parentMenu = null;
	
	// Register Global
	G_MENU_LIST[ this.id ] = this;
	
	if ( itemsData instanceof Array ){
		for ( var i=0; i<itemsData.length; i++ ){
			if ( itemsData[i] instanceof Array ){
				var index =  this.childs.length;
				var name = ( itemsData[i].length > 0 ) ? itemsData[i][0] : '';
				var url = ( itemsData[i].length > 1 ) ? itemsData[i][1] : '';
				
				this.childs[index] = new MenuItem( this, index, name, url );
				if ( itemsData[i].length > 2 ){
					var cTop = top + (i * itemHeight);
					this.childs[index].subMenu = new Menu( menuId+'_'+index, itemHeight, itemsData[i][2], cTop, left );
					this.childs[index].subMenu.parentMenu = this;
				}
			}
		}
	}
	
	// Control animation
	this.motionTop = 0;
	this.motionInterval = null;
	this.motionStop = true;
	
	// funciton
	this.init = __Menu_init;
	this.show = __Menu_Show;
	this.hide = __Menu_Hide;
	this.play = __Menu_Motion_Start;
	this.cancel = __Menu_Motion_Cancel;
	this.keepAlive = __Menu_Child_IsAlive;
	
	return this;
}

function __Menu_init(){
	var outerObj = document.createElement('div');
	outerObj.id = this.id + '_outer';
	outerObj.style.zIndex = 21;
	outerObj.style.position = "absolute";
	outerObj.style.top = this.top + 'px';
	outerObj.style.left = ( G_MENU_LEFT_OFFSET +  this.left ) + 'px';
	outerObj.style.height = ( this.childs.length * this.itemHeight ) + 'px';
	outerObj.style.overflowY = 'hidden';
	outerObj.style.overflowX = 'visible';
	//outerObj.style.border = '1px solid #444444';
	document.body.appendChild( outerObj );

	var innerObj = document.createElement('table');
	innerObj.id = this.id + '_inner';
	innerObj.cellSpacing = '0';
	innerObj.cellPadding = '0';
	innerObj.border = 0;
	outerObj.appendChild( innerObj );
	
	for( var i=0; i<this.childs.length ; i++){
		var row = innerObj.insertRow(i);
		var col = row.insertCell(0);
		col.className = 'menuItem';
		col.innerHTML = this.childs[i].name;
		col.style.height = this.itemHeight + 'px';
		col.onmouseover = new Function("this.className='menuItem_o'; itemOver('"+ this.id +"', "+i+");");
		col.onmouseout = new Function("this.className='menuItem'; itemOut('"+ this.id +"', "+i+");");
		col.onclick = new Function("window.location='"+ this.childs[i].url +"';");
	}
	outerObj.style.width= innerObj.offsetWidth + 'px';
	innerObj.style.position = 'absolute';	
}

function __Menu_Child_IsAlive(){
	for ( var i=0; i<this.childs.length; i++ ){
		if ( this.childs[i].isAlive() ){
			return true;
		}
	}
	return false;
}

function __Menu_Motion_Start(){
	var inObj = document.getElementById( this.id + '_inner' );
	
	if ( inObj != null ){
		this.motionTop += 5;
		
		if ( this.motionTop > 0 ){
			this.cancel();
		}
		inObj.style.top = this.motionTop + 'px';
	}
}

function __Menu_Motion_Cancel(){
	if ( !this.motionStop ){
		clearInterval( this.motionInterval );
		this.motionInterval = null;
		this.motionStop = true;
		this.motionTop = 0;
	}
}

function __Menu_Show(){
	if ( ! document.getElementById( this.id + '_outer' ) ){
		this.init();
	}
	if ( this.motionStop ){
		var obj = document.getElementById( this.id + '_outer' );
		
		if ( obj != null ){
			obj.style.top = this.top + 'px';
			obj.style.left = ( G_MENU_LEFT_OFFSET + this.left ) + 'px';
	
			this.motionTop = 0 - (this.childs.length * this.itemHeight);
			this.motionStop = false;
			
			var delay = G_MENU_FINISH_MOTION_TIME / ( this.childs.length * this.itemHeight );

			this.motionInterval = setInterval( "G_MENU_LIST['"+this.id+"'].play();", delay );
			
			obj.style.display = 'block';
		}
	}
}

function __Menu_Hide(){
	if ( ! this.keepAlive() ){
		var obj = document.getElementById( this.id + '_outer' );
		if ( obj ){
			obj.style.display = 'none';
			this.cancel();
		}
		if ( this.parentMenu != null ){
			this.parentMenu.hide();
		}
	}
}

//====================================================================================================================================
/**
 * container - is the menu which contains this menu item.
 */
function MenuItem( container, index, name, url ){
	this.index = index;
	this.name = name;
	this.url = url;
	this.container = container;
	this.subMenu = null;
	
	// status
	this.isOver = false;
	
	// methods
	this.over = __MenuItem_Over;
	this.out = __MenuItem_Out;
	this.showSubMenu = __MenuItem_ShowSubMenu;
	this.hideSubMenu = __MenuItem_HideSubMenu;
	this.isAlive = __MenuItem_IsKeepAlive;
	
	return this;
}

function __MenuItem_Over(){
	this.isOver = true;
	
	if ( this.container.motionStop ){
		this.showSubMenu();
	}
}

function __MenuItem_Out(){
	this.isOver = false;
	
	if ( this.container.motionStop ){
		
		if ( this.subMenu != null ){
			setTimeout( new Function( "hideMenu( '"+this.subMenu.id+"' )"), G_MENU_CLOSE_DELAY );
		}else{
			setTimeout( new Function( "hideMenu( '"+this.container.id+"' )"), G_MENU_CLOSE_DELAY );
		}
	}
}

function __MenuItem_IsKeepAlive(){
	if ( this.isOver ){
		return true;
	} else if ( ( this.subMenu != null ) && this.subMenu.keepAlive() ) {
		return true;
	}else
		return false;
}

function __MenuItem_ShowSubMenu(){
	if ( this.subMenu != null ){
		var obj = document.getElementById( this.container.id + '_outer' );
		if ( obj ){
			this.subMenu.left =  this.container.left + obj.offsetWidth;
		}
		this.subMenu.show();
	}
}

function __MenuItem_HideSubMenu(){
	if ( this.subMenu != null ){
		this.subMenu.hide();
	}
}