lodeRunner.menu.js

var LODERUNNER_NAME1 = "Lode Runner 1"; //"Lode Runner";
var LODERUNNER_NAME2 = "Lode Runner 2"; //"Championship Lode Runner";
var USER_CREATED_NAME = "User Created"; //user defined level

function saveKeyHandler(newHandler)
{
	var keyHandler, clickState; 
	
	keyHandler = document.onkeydown;
	clickState = disableStageClickEvent();
	document.onkeydown = newHandler;
	
	return { keyHandler: keyHandler, clickState:  clickState };
}

function restoreKeyHandler(stateObj)
{
	document.onkeydown = stateObj.keyHandler;
	if(stateObj.clickState) enableStageClickEvent();	
}


function helpMenuClass(_stage, _bitmap, _editBitmap, _demoBitmap, _scale)
{
	var HELP_BORDER_SIZE = 24;
	
	var saveStateObj;
	var stage, helpBitmap = [], bitmapId, scale;
	var helpBorder, helpBackground; //versionText;
	var startX, startY, menuX, menuY;
	var closeBoxSize;
	var callBackFun, callBackArgs;
	var coverBackgroundObj, closeIcon;

	stage = _stage;
	helpBitmap[0] = _bitmap;
	helpBitmap[1] = _editBitmap;
	helpBitmap[2] = _demoBitmap;
	bitmapId = 0;
	scale = _scale;

	this.showHelp = function(id, callback, args)
	{
		if(typeof args == "undefined") args = null;
		callBackFun = callback;
		callBackArgs = args;
		closeBoxSize = 12*scale+2;
		closeIcon = null;
		bitmapId = id;
		
		drawBackground();
		drawHelpMenu();
		drawCloseIcon(0);
		stage.update();
		
		saveStateObj = saveKeyHandler(helpKeyDown);
	}
	
	function drawBackground()
	{
		coverBackgroundObj = new createjs.Shape();
		coverBackgroundObj.graphics.beginFill("black").drawRect(0, 0, stage.canvas.width, stage.canvas.height).endFill();
		coverBackgroundObj.alpha = 0.3;
		stage.addChild(coverBackgroundObj);		
	}	
	
	function removeBackground()
	{
		stage.removeChild(coverBackgroundObj);
	}	

	function drawHelpMenu()
	{
		var borderSize = HELP_BORDER_SIZE * scale;
		var halfBorder = borderSize/2;
		var bitmapW = helpBitmap[bitmapId].getBounds().width * scale;
		var bitmapH = helpBitmap[bitmapId].getBounds().height * scale;
	
		menuX = bitmapW + borderSize;
		menuY = bitmapH + borderSize;
		startX = (stage.canvas.width - menuX)/2;
		startY = (stage.canvas.height - menuY)/2;
		
		if(startX < 0) startX = 0; 
		if(startY < 0) startY = 0;
	
		helpBorder = new createjs.Shape();
		helpBackground = new createjs.Shape();
		versionText = new createjs.Text("Ver " + VERSION + "." + AI_VERSION, (16*scale) + "px Helvetica", "#FFF");
	
		var helpG = helpBorder.graphics;
	
		helpBorder.alpha = 0.8;
		helpG.beginFill("#FF0").drawRoundRect(startX, startY, menuX, menuY, halfBorder).endFill();
		
	
		var helpB = helpBackground.graphics;
	
		helpBackground.alpha = 0.6;
		helpB.beginFill("#190218")
			 .drawRoundRect(startX + halfBorder, startY + halfBorder, bitmapW, bitmapH, halfBorder/2).endFill();
	
	
		helpBitmap[bitmapId].setTransform(startX + halfBorder, startY + halfBorder, scale, scale);
		//helpBitmap.set({alpha:0.8});
	
		versionText.x = startX + (menuX - versionText.getBounds().width-borderSize); 
		versionText.y = startY + (menuY - versionText.getBounds().height*2.5); 
		
		stage.addChild(helpBorder);
		stage.addChild(helpBackground);
		stage.addChild(helpBitmap[bitmapId]);
		stage.addChild(versionText);
	}

	function removeHelpMenu()
	{
		stage.removeChild(versionText);
		stage.removeChild(helpBitmap[bitmapId]);
		stage.removeChild(helpBackground);
		stage.removeChild(helpBorder);
	}

	function helpKeyDown(event)
	{
		if(!event){ event = window.event; } //cross browser issues exist
		if(event.keyCode == KEYCODE_ESC) {
			closeHelpMenu();
		}
		return false;
	}	
	
	function drawCloseIcon(mouseOver)
	{
		var cycle, cross;
		var alpha, cycColor, crosColor;
		if(closeIcon == null) {
			closeIcon = new createjs.Container();
			cross = new createjs.Shape();
			cycle = new createjs.Shape();
			closeIcon.addChild(cycle, cross);
			closeIcon.on("mouseover", handleMouseOver);
			closeIcon.on("mouseout", handleMouseOut);
			closeIcon.on("click", closeHelpMenu);
			closeIcon.x = startX+menuX - closeBoxSize*3;
			closeIcon.y = startY + closeBoxSize*2;
			stage.enableMouseOver(30);
			stage.addChild(closeIcon);
		} else {
			cycle = closeIcon.getChildAt(0);
			cross = closeIcon.getChildAt(1);
		}
		if(mouseOver) {
			alpha = 0.6;
			cycColor = "red";
			crosColor = "white";	
		} else {
			alpha = 0.01;
			cycColor = "gold";
			crosColor = "white";
		}
		
		var g = cycle.graphics; 
		g.clear();
		cycle.alpha = alpha;	
		g.beginFill(cycColor).dc(closeBoxSize/2, closeBoxSize/2, closeBoxSize*5/4);
		
		g = cross.graphics;
		g.clear();
		//cross.alpha = 1;
	    g.setStrokeStyle(closeBoxSize/4).beginStroke(crosColor).moveTo(0,0)
		 .lineTo(closeBoxSize,closeBoxSize).closePath();
		
		g.moveTo(closeBoxSize,0).lineTo(0,closeBoxSize).closePath();
		
		stage.update();	
	}
	
	function removeCloseIcon()
	{
		stage.removeChild(closeIcon);
	}
	
	function handleMouseOver(event) 
	{
		stage.cursor = 'pointer'; 
		drawCloseIcon(1);
	}

	function handleMouseOut(event) 
	{
		stage.cursor = 'default'; 
		drawCloseIcon(0);
	}
	
	function closeHelpMenu() 
	{
		removeCloseIcon();
		removeHelpMenu();
		removeBackground();
		stage.cursor = 'default'; 
		stage.update();
		stage.enableMouseOver(0);
		restoreKeyHandler(saveStateObj);
		if(callBackFun) setTimeout(function() { callBackFun(callBackArgs);}, 10); //add setTimeout just don't cause mouse event (click) cascade!
	}
}


function closeIconClass(_width, _height, _stage, _scale, _activeColor, _callBack, _args)
{
	var closeBoxSize = 12*_scale+2;
	var closeIcon = null;;

	drawCloseIcon(0);
	return closeIcon; //must remove by contractor 

	function drawCloseIcon(mouseOver)
	{
		var cycle, cross;
		var alpha, cycColor, crosColor;
		if(closeIcon == null) {
			closeIcon = new createjs.Container();
			cross = new createjs.Shape();
			cycle = new createjs.Shape();
			closeIcon.addChild(cycle, cross);
			closeIcon.on("mouseover", handleMouseOver);
			closeIcon.on("mouseout", handleMouseOut);
			closeIcon.on("click", handleMouseClick);
			closeIcon.x = _width  - closeBoxSize*3;
			closeIcon.y = _height + closeBoxSize*2;
			//_stage.enableMouseOver(30);
			_stage.addChild(closeIcon);
		} else {
			cycle = closeIcon.getChildAt(0);
			cross = closeIcon.getChildAt(1);
		}
		if(mouseOver) {
			alpha = 1;
			cycColor = _activeColor;
			crosColor = "white";	
		} else {
			alpha = 0.01;
			cycColor = _activeColor;
			crosColor = "white";
		}
		
		var g = cycle.graphics; 
		g.clear();
		cycle.alpha = alpha;	
		g.beginFill(cycColor).dc(closeBoxSize/2, closeBoxSize/2, closeBoxSize*5/4);
		
		g = cross.graphics;
		g.clear();
		//cross.alpha = 1;
	    g.setStrokeStyle(closeBoxSize/4).beginStroke(crosColor).moveTo(0,0)
		 .lineTo(closeBoxSize,closeBoxSize).closePath();
		
		g.moveTo(closeBoxSize,0).lineTo(0,closeBoxSize).closePath();
		
		_stage.update();
		
	}
	
	function handleMouseOver(event) 
	{
		_stage.cursor = 'pointer'; 
		drawCloseIcon(1);
	}

	function handleMouseOut(event) 
	{
		_stage.cursor = 'default'; 
		drawCloseIcon(0);
	}
	
	function handleMouseClick(event) 
	{
		_stage.cursor = 'default'; 
		if(_callBack) setTimeout(function(){_callBack(_args);},10);
	}
}



//             -+--  +-------------------------------------------------------------+
//  TOP_BORDER1 |    |                       Lode Runner 1                         |
//              |    |                                                             |
//             -+--  |   #-----------+-----------+                                 |  
//  TOP_BORDER2 |    |   | 001 - 030 | 031 - 060 |                                 |
//             -+--  |   +-----------+-----------+-----------------------------+   |
//      BORDER2 |    |   |                                                     |   |
//             -+--  |   |   +---------------------------------------------+   |   |
//                   |   |   | 001            002            003           |   |   |
//                   |   |   | +----------+   +----------+   +----------+  |   |   |
//                   |   |   | |          |   |          |   |          |  |   |   |
//                   |   |   | |          |   |          |   |          |  |   |   |
//                   |   |   | +----------+   +----------+   +----------+  |   |   |
//                   |   |   | 004            005            006           |   |   |
//                   |   |   | +----------+   +----------+   +----------+  |   |   |
//                   |   |   | |          |   |          |   |          |  |   |   |
//                   |   |   | |          |   |          |   |          |  |   |   |
//                   |   |   | +----------+   +----------+   +----------+  |   |   |
//             -+--  |   |   +---------------------------------------------+   |   |
//      BORDER2 |    |   |                                                     |   |
//             -+--  |   +-----------------------------------------------------+   |
//      BORDER1 |    |                                                             |  
//             -+--  +-------------------------------------------------------------+
//                   |<1>|<2>| 
//
//  #  : (TABS_START_X, TABS_START_Y)
// <1> : BORDER1
// <2> : BORDER2
//
//
//               
//                        |<   3    >|                  |<4>|<4>|
//                    +--------------------------------------------------------+ -+-
//                    |   001            |   002            |   003            |  |
//               -+-  |   +----------+       +----------+       +----------+   |
//  SELECT_SIZE_Y |   |   |          |   |   |          |   |   |          |   |
//                |   |   |          |       |          |       |          |   |
//               -+-  |   +----------+   |   +----------+   |   +----------+   |
//    SLIDE_GAP_Y |   |                                                        |
//               -+-  | - - - - - - - -  | - - - - - - - -  | - - - - - - - -  | SLIDE_AREA_Y
//    SLIDE_GAP_Y |   |   004                005                006            |
//               -+-  |   +----------+   |   +----------+   |   +----------+   |
//                    |   |          |       |          |       |          |   |
//                    |   |          |   |   |          |   |   |          |   |
//                    |   +----------+       +----------+       +----------+   |
//                    |                  |                  |                  |  |
//                    +--------------------------------------------------------+ -+- 
//                    
//                    |<                       SLIDE_AREA_X                   >| 
//
//
// < 3 > : SELECT_SIZE_X
// < 4 > : SLIDE_GAP_X


function selectDialog(_titleName, _checkBitmap, _levelData, _activeLevel, _screenX1, _screenY1, 
					   _parentStage, _scale, _activeFun, _closeFun, _postFun)	
{
	var TITLE_TEXT_SIZE = 36 * _scale;
	var TABS_TEXT_SIZE = 20  * _scale;
	
	var TOP_BORDER1 = TITLE_TEXT_SIZE * 3/2 | 0;
	var TOP_BORDER2 = TABS_TEXT_SIZE * 3/2 | 0;
	var BORDER1 = 20 * _scale;
	var BORDER2 = 16 * _scale;
	var TABS_START_X = BORDER1;
	var TABS_START_Y = TOP_BORDER1;
	
	var MAP_SCALE = _scale * 0.2;
	var SELECT_SIZE_X = NO_OF_TILES_X*BASE_TILE_X*MAP_SCALE;
	var SELECT_SIZE_Y = NO_OF_TILES_Y*BASE_TILE_Y*MAP_SCALE;
	var SLIDE_PAGE_ITEMS = 3 * 10;
	var SLIDE_GAP_X = BASE_TILE_X * _scale * 3/4;
	var SLIDE_GAP_Y = BASE_TILE_Y * _scale * 3/4;
	var SLIDE_ITEM_X = 3;
	var SLIDE_ITEM_Y = 3;
	var SLIDE_AREA_X = (SLIDE_GAP_X*2+SELECT_SIZE_X)*SLIDE_ITEM_X;
	var SLIDE_AREA_Y = (SLIDE_GAP_Y*2+SELECT_SIZE_Y)*SLIDE_ITEM_Y;
	
	var CANVAS_SIZE_X = (BORDER1+BORDER2)*2 + SLIDE_AREA_X;
	var CANVAS_SIZE_Y = TOP_BORDER1 + TOP_BORDER2 + BORDER2 + SLIDE_AREA_Y +BORDER1+BORDER2;

	var BACKGROUND_COLOR = "#ff5050";
	var BORDER1_COLOR = BACKGROUND_COLOR;
	var BORDER2_COLOR = "white";
	var TABS_ACTIVE_FILL_COLOR = BORDER2_COLOR;
	var TABS_ACTIVE_LINE_COLOR = BORDER2_COLOR;
	var TABS_ACTIVE_TEXT_COLOR = "black";	
	var TABS_INACTIVE_FILL_COLOR = "#ccc";
	var TABS_INACTIVE_LINE_COLOR = "#aaa";	
	var TABS_INACTIVE_TEXT_COLOR = "#888";	

	var SLIDE_BACKGROUND = "#EEEEFF";
	var SLIDE_BOUNDLINE_COLOR = "red";
	
	var SELECT_TEXT_COLOR = "black";
	var SELECT_TEXT_ACTIVE_COLOR = "red";
	var SELECT_TEXT_SIZE = 20  * _scale;
	
	var SELECT_MOUSE_OVER_COLOR = "gold";
	var SELECT_MAP_BACKGROUND_COLOR = "black";
	var SELECT_SCORE_COLOR = "white";
	var SELECT_SCORE_SHADOW = "black";
	var SELECT_CHECK_SHADOW_COLOR = "white";
	
	var TITLE_TEXT_COLOR = "white";
	var TITLE_TEXT_SHADOW_COLOR = "gold";
	
	var CLOSE_ICON_ACTIVE_COLOR = "#8080ff";
	
	//////////////////////////////////////////////////
	
	var canvas1;
	var coverBackgroundObj;
	var dialogStage;
	var slider;
	var boundLine1, boundLine2;

	var tabs = [], tabsLine;

	var maxPages, activePage; //0 - 
	var lastWheelFun = null;	

	var activeState = 0; //for edit mode only (1: active level shift, -1: active level deleted)
	var levelDeleted = 0; //for edit mode only
	
	init();
	function init()
	{
		createCanvas1();
		createDialogStage();
		setBackground();

		initVariable();
		drawCoverBackground();
		createSliderPage();
		createSliderBoundLine();
		createBorder1();
		createBorder2();
		createTabs(0);
		createTitle();
		new closeIconClass(CANVAS_SIZE_X, 0, dialogStage, _scale, CLOSE_ICON_ACTIVE_COLOR, closeBox, null);
		dialogStage.update();
	}

	function initVariable()
	{
		maxPages = Math.ceil(_levelData.length / SLIDE_PAGE_ITEMS); 

		if(playMode == PLAY_EDIT && _activeLevel <= 0) {
			_activeLevel = activePage = 0;
		} else {
			if(_activeLevel <= 0 || _activeLevel > _levelData.length) _activeLevel = 1;
			activePage = Math.ceil(_activeLevel / SLIDE_PAGE_ITEMS)-1;
		}
	}
	
	function drawCoverBackground()
	{
		coverBackgroundObj = new createjs.Shape();
		coverBackgroundObj.graphics.beginFill("black")
			.drawRect(0, 0, _parentStage.canvas.width, _parentStage.canvas.height).endFill();
		coverBackgroundObj.alpha = 0.6;
		_parentStage.addChild(coverBackgroundObj);	
		_parentStage.update();
	}		

	function removeCoverBackground()
	{
		_parentStage.removeChild(coverBackgroundObj);
	}		
	
	function createCanvas1()
	{
		canvas1 = document.createElement('canvas');
		canvas1.id     = "canvas1";
		canvas1.width  = CANVAS_SIZE_X;
		canvas1.height = CANVAS_SIZE_Y;
	
		var left = ((_screenX1 - canvas1.width)/2|0),
			top  = ((_screenY1 - canvas1.height)/2|0);
		canvas1.style.left = (left>0?left:0) + "px";
		canvas1.style.top =  (top>0?top:0) + "px";
		canvas1.style.position = "absolute";
		document.body.appendChild(canvas1);
	}
	
	function closeBox()
	{
		removeCanvas1();
		removeCoverBackground();
		if(_postFun) _postFun();
		if(_closeFun) _closeFun(levelDeleted, _activeLevel, activeState);		//for edit mode
	}
	
	function removeCanvas1()
	{
		dialogStage.removeAllChildren();
		dialogStage.enableMouseOver(0);
		document.body.removeChild(canvas1);
	}		
	
	function createDialogStage()
	{
		dialogStage = new createjs.Stage(canvas1);
		dialogStage.enableMouseOver(120);
	}
	
	function setBackground()
	{
		var background = new createjs.Shape();
		background.graphics.beginFill(BACKGROUND_COLOR).drawRoundRect(0, 0, CANVAS_SIZE_X, CANVAS_SIZE_Y, 8*_scale)
		.endFill();
		dialogStage.addChild(background);
	}

	
	function createSliderPage()
	{
		slider = new createjs.Container();	
		dialogStage.addChild(slider);
	}
			
	function createSliderBoundLine()
	{
		boundLine1 = new createjs.Shape();
		boundLine2 = new createjs.Shape();
	
		boundLine1.graphics.setStrokeStyle(2).beginStroke(SLIDE_BOUNDLINE_COLOR)
			.moveTo(BORDER1+BORDER2, TOP_BORDER1+TOP_BORDER2+BORDER2+1)
			.lineTo(SLIDE_AREA_X+BORDER1+BORDER2, TOP_BORDER1+TOP_BORDER2+BORDER2+1).endStroke();
		boundLine1.alpha = 0;
	
		boundLine2.graphics.setStrokeStyle(2).beginStroke(SLIDE_BOUNDLINE_COLOR)
			.moveTo(BORDER1+BORDER2, CANVAS_SIZE_Y-BORDER1-BORDER2-1)
			.lineTo(SLIDE_AREA_X+BORDER1+BORDER2, CANVAS_SIZE_Y-BORDER1-BORDER2-1).endStroke();		
		boundLine2.alpha = 0;
	
		dialogStage.addChild(boundLine2, boundLine1);
	}
	
	function createBorder1()
	{
		var border1 = new createjs.Container();	
		var vBorder1 = new createjs.Shape();
		var vBorder2 = new createjs.Shape();
		
		vBorder1.graphics.beginFill(BORDER1_COLOR)
			      .drawRect(BORDER1+BORDER2, 0, SLIDE_AREA_X, TOP_BORDER1+TOP_BORDER2).endFill();
		
		vBorder2.graphics.beginFill(BORDER1_COLOR)
			      .drawRect(BORDER1+BORDER2, CANVAS_SIZE_Y-BORDER1, SLIDE_AREA_X, BORDER1).endFill();
		
		border1.addChild(vBorder1, vBorder2);
		border1.on("mouseover", function() { dialogStage.cursor ="default" });
		dialogStage.addChild(border1);
	}
	
	function createBorder2()
	{
		var border2 = new createjs.Container();	
		var vBorder1 = new createjs.Shape();
		var vBorder2 = new createjs.Shape();
		var hBorder1 = new createjs.Shape(); 
		var hBorder2 = new createjs.Shape(); 
		
		
		vBorder1.graphics.beginFill(BORDER2_COLOR)
			.drawRect(BORDER1, TOP_BORDER1+TOP_BORDER2, 
			CANVAS_SIZE_X-2*BORDER1, BORDER2).endFill();
		
		vBorder2.graphics.beginFill(BORDER2_COLOR)
			.drawRect(BORDER1+BORDER2, CANVAS_SIZE_Y-BORDER1-BORDER2-1, 
			CANVAS_SIZE_X-2*(BORDER1+BORDER2),BORDER2+1).endFill();
		
		hBorder1.graphics.beginFill(BORDER2_COLOR)
			.drawRect(BORDER1, TOP_BORDER1+TOP_BORDER2+BORDER2, 
			BORDER2, CANVAS_SIZE_Y-BORDER1-BORDER2-TOP_BORDER1-TOP_BORDER2).endFill();
		
		hBorder2.graphics.beginFill(BORDER2_COLOR)
			.drawRect(CANVAS_SIZE_X-BORDER1-BORDER2, TOP_BORDER1+TOP_BORDER2+BORDER2, 
			BORDER2, CANVAS_SIZE_Y-BORDER1-BORDER2-TOP_BORDER1-TOP_BORDER2).endFill();
		
		border2.addChild(vBorder1, vBorder2, hBorder1, hBorder2);
		dialogStage.addChild(border2);
	}	
	
	function clearTabs()
	{
		for(var i = 0; i < tabs.length; i++) {
			dialogStage.removeChild(tabs[i]);
		}
		dialogStage.removeChild(tabsLine);
	}
	
	function createTabs(tabsOnly)
	{
		var tabBackground, tabText;
		var textWidth, textHeight;
		var tabsStartX = BORDER1;
		
		for(var i = 0; i < maxPages; i++) {
			var tabsName = ("00" + (i * SLIDE_PAGE_ITEMS + 1)).slice(-3) + " - " + 
				           ("00" + (i==maxPages-1?_levelData.length:((i+1) * SLIDE_PAGE_ITEMS))).slice(-3);
			//debug(tabsName);
			
			tabs[i] = new createjs.Container();
			tabBackground = new createjs.Shape();
			tabText = new createjs.Text(tabsName, TABS_TEXT_SIZE +  "px Arial", TABS_INACTIVE_TEXT_COLOR);
			textHeight = tabText.getBounds().height+4*_scale;
			textWidth = tabText.getBounds().width+textHeight;
		
			tabText.x = textHeight;
			tabs[i].x = tabsStartX;
			tabs[i].y = TOP_BORDER1+TOP_BORDER2 - textHeight;
			tabsStartX += (textHeight/2+textWidth);
			tabs[i].addChild(tabBackground, tabText);
			tabsActive(i);
			dialogStage.addChild(tabs[i]);
			
			tabs[i].tabId = i;
			
			tabs[i].on("mouseover", function(){ dialogStage.cursor = 'pointer'; dialogStage.update();});
			tabs[i].on("mouseout", function() { dialogStage.cursor = 'default'; dialogStage.update();});
			
			tabs[i].on("click", tabMouseClick);					   
		}
		
		tabsLine = new createjs.Shape();
		tabsLine.graphics.setStrokeStyle(2).beginStroke(TABS_ACTIVE_LINE_COLOR)
			.moveTo(BORDER1, TOP_BORDER1+TOP_BORDER2)
			.lineTo(SLIDE_AREA_X+BORDER1+2*BORDER2, TOP_BORDER1+TOP_BORDER2).endStroke();
		dialogStage.addChild(tabsLine);
		
		tabsInActiveAll();
		tabsActive(activePage);
		if(!tabsOnly) setSlidePage(activePage);
		
		function tabsActive(id)
		{
			tabBackground = tabs[id].getChildAt(0);
			tabText = tabs[id].getChildAt(1);
		
			tabBackground.graphics.clear().setStrokeStyle(1)
				.beginStroke(TABS_ACTIVE_LINE_COLOR).beginFill(TABS_ACTIVE_FILL_COLOR)
				.moveTo(0, textHeight).lineTo(textHeight/2, 0)
				.lineTo(textHeight/2+textWidth, 0).lineTo(textHeight+textWidth, textHeight)
				.lineTo(0, textHeight).endFill();
			tabText.color = TABS_ACTIVE_TEXT_COLOR;
			moveChild2Top(dialogStage, tabs[id]);
			dialogStage.update();
		}
		function tabsInActive(id)
		{
			tabBackground = tabs[id].getChildAt(0);
			tabText = tabs[id].getChildAt(1);
		
			tabBackground.graphics.clear().setStrokeStyle(1)
				.beginStroke(TABS_INACTIVE_LINE_COLOR).beginFill(TABS_INACTIVE_FILL_COLOR)
				.moveTo(0, textHeight).lineTo(textHeight/2, 0)
				.lineTo(textHeight/2+textWidth, 0).lineTo(textHeight+textWidth, textHeight)
				.lineTo(0, textHeight).endFill();
			tabText.color = TABS_INACTIVE_TEXT_COLOR;
			moveChild2Top(dialogStage, tabs[id]);
		}
		
		function tabsInActiveAll()
		{
			for(var i = maxPages; i > 0; i--) {
				tabsInActive(i-1);
				moveChild2Top(dialogStage, tabs[i-1]);
			}
			moveChild2Top(dialogStage, tabsLine);
		}
		
		function tabMouseClick() {
			if(activePage != this.tabId) {
				tabsInActiveAll();
				tabsActive(this.tabId);
				setSlidePage(this.tabId);
				activePage = this.tabId;
			}
		}
	}
	
	function setSlidePage(pages)
	{
		var startLevel = SLIDE_PAGE_ITEMS * pages+1;
		var endLevel = (pages == maxPages-1)?_levelData.length:SLIDE_PAGE_ITEMS * (pages+1);
		
		var pageItems = endLevel - startLevel+1;
		var selectItemX = SLIDE_ITEM_X;
		var selectItemY = Math.ceil(pageItems/SLIDE_ITEM_X);
		
		var slideX = SLIDE_AREA_X;
		var slideY = (SLIDE_GAP_Y*2+SELECT_SIZE_Y) * (selectItemY < SLIDE_ITEM_Y?SLIDE_ITEM_Y:selectItemY);
		var slideStartX = BORDER1 + BORDER2;
		var slideStartY = TOP_BORDER1 + TOP_BORDER2 + BORDER2;
		
		var maxSliderY = slideStartY;
		var minSliderY = slideStartY + SLIDE_AREA_Y - slideY;
		
		var background = new createjs.Shape();
		var selectRect = [], selectText = [];
		var delSelectObj = [];
		
		var sliderMoved = 0; //while move ths silder don't active mouse click
		var firstPressMoveY = 0; //keep  Y position while first press move
		var closeClicked = 0, closeOver = 0;
		
		var activeItemY = -1; //for scroll to active Item
		
		
		init();
		
		function init() 
		{
			var diffY;
			
			slider.removeAllChildren();
			slider.removeAllEventListeners();
			
			background.graphics.beginFill(SLIDE_BACKGROUND).drawRect(0, 0, slideX, slideY);
			slider.addChild(background);
		
			var id = -1;
			
			levelLoop:
			for(var y = 0; y < selectItemY; y++) {
				for(var x = 0; x < selectItemX; x++) {
					//var id;
				
					if(++id >= pageItems) break levelLoop;
					createSelectLevel(x, y);
/*
					textColor = SELECT_TEXT_COLOR;
					if(_activeLevel == (level = startLevel+id)) {
						activeItemY = y;
						if(activeItemY + SLIDE_ITEM_Y > selectItemY) {
							activeItemY = selectItemY - SLIDE_ITEM_Y;
						}
						textColor = SELECT_TEXT_ACTIVE_COLOR;
					}
					
					selectText[id] = new createjs.Text(("00"+level).slice(-3), SELECT_TEXT_SIZE + "px Arial",
						textColor);
					
					selectText[id].x = (SLIDE_GAP_X*2+SELECT_SIZE_X) * x + SLIDE_GAP_X;
					selectText[id].y = (SLIDE_GAP_Y*2+SELECT_SIZE_Y) * y + SLIDE_GAP_Y - SELECT_TEXT_SIZE*4/3;
					slider.addChild(selectText[id]);
					
					selectRect[id] = buildSelectMap(level);
					selectRect[id].x = (SLIDE_GAP_X*2+SELECT_SIZE_X) * x + SLIDE_GAP_X;
					selectRect[id].y = (SLIDE_GAP_Y*2+SELECT_SIZE_Y) * y + SLIDE_GAP_Y;
					slider.addChild(selectRect[id]);
					selectRect[id].on('click', selectClick);
					selectRect[id].on('mouseover', selectMouseOver);
					selectRect[id].on('mouseout', selectMouseOut);
					selectRect[id].myLevel = level;
*/					
				}
			}
			background.on("mouseover", function() {
				dialogStage.cursor =  "url('cursor/openhand.cur'), auto";}
			);
			background.on("mouseout", function() { 
				dialogStage.cursor =  "default";}
			);
			
			slider.on("mousedown", function(evt) {
				//dialogStage.cursor =  "url('cursor/closedhand.cur'), auto";
				diffY = evt.currentTarget.y - evt.stageY;
			});

			slider.on("pressmove",function(evt) {
				debug("pressmove (1) x=" + evt.stageX + ", y=" + evt.stageY); 
				if(sliderMoved++ <= 0) firstPressMoveY = evt.stageY;
				
				boundLine1.alpha = boundLine2.alpha = 0;
				dialogStage.cursor =  "url('cursor/closedhand.cur'), auto";
			
				evt.currentTarget.y = evt.stageY + diffY;
				if(evt.currentTarget.y > maxSliderY) {
					evt.currentTarget.y = maxSliderY;
					boundLine1.alpha = 1; 
				} else
				if(evt.currentTarget.y < minSliderY ) {
					evt.currentTarget.y = minSliderY;
					boundLine2.alpha = 1; 
				}
				dialogStage.update();   
			});
		
			slider.on("pressup", function(evt) {
				debug("press-up (0)");
				sliderMoved = firstPressMoveY = 0;
				dialogStage.cursor =  "url('cursor/openhand.cur'), auto";
				boundLine1.alpha = boundLine2.alpha = 0;
				
				//---------------------
				// move to block bound
				//---------------------
				var blockSizeY = (SLIDE_GAP_Y*2+SELECT_SIZE_Y);
				var startY = maxSliderY
				var mod = (maxSliderY - slider.y) % blockSizeY; //division remainder value to block bound
				
				if(blockSizeY/2 > mod) {
					evt.currentTarget.y += mod; //shift down
				} else {
					evt.currentTarget.y -= (blockSizeY - mod); //shift up
				}
				
				dialogStage.update();
			});		
		
			slider.x = slideStartX;
			slider.y = slideStartY;
			if(activeItemY > 0) { //scroll to active level 
				slider.y -= activeItemY*(SLIDE_GAP_Y*2+SELECT_SIZE_Y);
			}
			
			dialogStage.update();
			enableMouseWheel();
		}
		
		function createSelectLevel(x, y)
		{
			var id = y*selectItemX+x;
			var textColor = SELECT_TEXT_COLOR, level = startLevel+id;;
			
			if(_activeLevel == level) {
				activeItemY = y;
				if(activeItemY + SLIDE_ITEM_Y > selectItemY) {
					activeItemY = selectItemY - SLIDE_ITEM_Y;
				}
				textColor = SELECT_TEXT_ACTIVE_COLOR;
			}
					
			selectText[id] = new createjs.Text(("00"+level).slice(-3), SELECT_TEXT_SIZE + "px Arial",
				textColor);
					
			selectText[id].x = (SLIDE_GAP_X*2+SELECT_SIZE_X) * x + SLIDE_GAP_X;
			selectText[id].y = (SLIDE_GAP_Y*2+SELECT_SIZE_Y) * y + SLIDE_GAP_Y - SELECT_TEXT_SIZE*4/3;
			slider.addChild(selectText[id]);
					
			selectRect[id] = buildSelectMap(level, id);
			selectRect[id].x = (SLIDE_GAP_X*2+SELECT_SIZE_X) * x + SLIDE_GAP_X;
			selectRect[id].y = (SLIDE_GAP_Y*2+SELECT_SIZE_Y) * y + SLIDE_GAP_Y;
			slider.addChild(selectRect[id]);
			
			if(playMode != PLAY_DEMO || (playMode == PLAY_DEMO && (typeof demoData[level-1] != "undefined"))) {
				selectRect[id].on('click', selectClick);
				selectRect[id].on('mouseover', selectMouseOver);
				selectRect[id].on('mouseout', selectMouseOut);
			}
			
			selectRect[id].myId = id;
			selectRect[id].myLevel = level;
		}

		function delSelectLevel(level)
		{
			var id = level - startLevel;  //level = startLevel + id
			var x, y;
			var tabsOnly = 1;

			//(1) remove deleted level
			slider.removeChild(selectText[id]);
			slider.removeChild(selectRect[id]);

			//(2) remove close icon object
			delSelectObj.splice(id,1);

			//(3) shift level+1 - endLevel
			while(level < endLevel) {	
				id = level - startLevel;
				y = id /selectItemX|0;
				x = id - y * selectItemX;
				selectText[id] = selectText[id+1];
				selectText[id].text = ("00"+level).slice(-3);
				selectText[id].color = (_activeLevel == level)?SELECT_TEXT_ACTIVE_COLOR:SELECT_TEXT_COLOR; 
				selectText[id].x = (SLIDE_GAP_X*2+SELECT_SIZE_X) * x + SLIDE_GAP_X;
				selectText[id].y = (SLIDE_GAP_Y*2+SELECT_SIZE_Y) * y + SLIDE_GAP_Y - SELECT_TEXT_SIZE*4/3;
					
				selectRect[id] = selectRect[id+1];
				selectRect[id].x = (SLIDE_GAP_X*2+SELECT_SIZE_X) * x + SLIDE_GAP_X;
				selectRect[id].y = (SLIDE_GAP_Y*2+SELECT_SIZE_Y) * y + SLIDE_GAP_Y;
				selectRect[id].myLevel = level;
				selectRect[id].myId = level - startLevel;
				
				level++;
			}
			
			//(3) add one if could add
			if(level <= editLevels) {
				// add new level 
				id = level - startLevel;
				y = id /selectItemX|0;
				x = id - y * selectItemX;
				createSelectLevel(x,y);
				maxPages = Math.ceil(_levelData.length / SLIDE_PAGE_ITEMS); 
			} else {
				// no more level (remove last level)
				if(level == startLevel) { //end pages and no more levels in this pages
					maxPages--;
					if(maxPages > 0) {
						tabsOnly = 0;
						activePage = maxPages-1;
						//move to previous page
					} else {
						//no any level in select menu !!! ==> close it (maxPages < 0)
					}
				}
				endLevel--;
				
				pageItems = endLevel - startLevel+1;
				selectItemY = Math.ceil(pageItems/SLIDE_ITEM_X);
				slideY = (SLIDE_GAP_Y*2+SELECT_SIZE_Y) * (selectItemY < SLIDE_ITEM_Y?SLIDE_ITEM_Y:selectItemY);
				minSliderY = slideStartY + SLIDE_AREA_Y - slideY;
				if(slider.y < minSliderY) slider.y = minSliderY; //shift slider 
			}

			//(3) redraw tabs page	
			clearTabs()
			createTabs(tabsOnly);
			
			if(maxPages <= 0) closeBox();
		}
		
		
		function buildSelectMap(level, id) 
		{
			var levelMap = _levelData[level-1];
			var selectMap = new createjs.Container();	
			var border = new createjs.Shape();
			var background = new createjs.Shape();
	
			var borderSize = _scale*4+2;
	
			border.graphics.beginFill(SELECT_MOUSE_OVER_COLOR)
			      .drawRoundRect(-borderSize, -borderSize, SELECT_SIZE_X+2*borderSize, SELECT_SIZE_Y+2*borderSize, borderSize);
			border.alpha = 0;
			background.graphics.beginFill(SELECT_MAP_BACKGROUND_COLOR).drawRect(0, 0, SELECT_SIZE_X, SELECT_SIZE_Y);
	
			selectMap.addChild(border, background);
			selectMap.addChild(level2Bitmap(levelMap));
			
			switch(playMode) {
			case PLAY_EDIT:		
				delSelectObj[id] = new delIcon();
				selectMap.addChild(delSelectObj[id].getCloseObj());
				break;
			case PLAY_DEMO:
				setDemoLevelInfo(selectMap, level);	
				break;
			default:		
				setLevelInfo(selectMap, level);
				break;	
			}
			
			return selectMap;
		}	
		
		function level2Bitmap(levelMap)
		{
			var	canvas2 = document.createElement('canvas');
			var stage = new createjs.Stage(canvas2);	
			var container = new createjs.Container();	
			var guardCount = 0, runner = 0;
	
			canvas2.width  = SELECT_SIZE_X;
			canvas2.height = SELECT_SIZE_Y;
	
			var index = 0;
			for(var y = 0; y < NO_OF_TILES_Y; y++) {
				for(var x = 0; x < NO_OF_TILES_X; x++) {
					var id = levelMap.charAt(index++);

					var curTile;	
					switch(id) {
					default:		
					case ' ': //empty
						continue;
					case '#': //Normal Brick
						curTile = new createjs.Bitmap(preload.getResult("brick"));
						break;	
					case '@': //Solid Brick
						curTile = new createjs.Bitmap(preload.getResult("solid"));
						break;	
					case 'H': //Ladder
						curTile = new createjs.Bitmap(preload.getResult("ladder"));
						break;	
					case '-': //Line of rope
						curTile = new createjs.Bitmap(preload.getResult("rope"));
						break;	
					case 'X': //False brick
						curTile = new createjs.Bitmap(preload.getResult("brick"));
						break;
					case 'S': //Ladder appears at end of level
						continue;
					case '$': //Gold chest
						curTile = new createjs.Bitmap(preload.getResult("gold"));
						break;	
					case '0': //Guard
						if(++guardCount > MAX_GUARD) {
							continue;  //too many guard , set this tile as empty
						}
						curTile = new createjs.Sprite(guardData, "runLeft");
						curTile.stop();	
						break;	
					case '&': //Player
						if(++runner > 1) {
							continue;  //too many runner, set this tile as empty
						}
						curTile = new createjs.Sprite(runnerData, "runRight");
						curTile.stop();	
						break;	
					}
					curTile.setTransform(x * BASE_TILE_X*MAP_SCALE, y * BASE_TILE_Y*MAP_SCALE,MAP_SCALE, MAP_SCALE);
					container.addChild(curTile); 
				}
			}	
			container.cache(0, 0, canvas2.width, canvas2.height);
			return (new createjs.Bitmap( container.getCacheDataURL()));
		}
		
		//for demo mode
		function setDemoLevelInfo(selectObj, level) 
		{
			if(	typeof demoData[level-1] != "undefined") {
				var bitmap = _checkBitmap.clone();
				var startX = (SELECT_SIZE_X - _checkBitmap.getBounds().width*_scale)/2|0;
				var startY = (SELECT_SIZE_Y - _checkBitmap.getBounds().height*_scale)/4|0;
			
				bitmap.setTransform(startX, startY, _scale, _scale);
				bitmap.set({alpha:0.9});
				bitmap.shadow = new  createjs.Shadow(SELECT_CHECK_SHADOW_COLOR, 2, 2, 5);
				selectObj.addChild(bitmap);
			}
		}
		
		function setLevelInfo(selectObj, level)
		{
			if(modernScoreInfo[level-1] >= 0) {
				var bitmap = _checkBitmap.clone();
				var scoreText = new createjs.Text(modernScoreInfo[level-1],
								"bold "+SELECT_TEXT_SIZE +"px Helvetica",SELECT_SCORE_COLOR);
				var startX = (SELECT_SIZE_X - _checkBitmap.getBounds().width*_scale)/2|0;
				var startY = (SELECT_SIZE_Y - _checkBitmap.getBounds().height*_scale)/4|0;
			
				bitmap.setTransform(startX, startY, _scale, _scale);
				bitmap.set({alpha:0.9});
				bitmap.shadow = new  createjs.Shadow(SELECT_CHECK_SHADOW_COLOR, 2, 2, 5);
				selectObj.addChild(bitmap);
				
				scoreText.x = (SELECT_SIZE_X - scoreText.getBounds().width)/2|0;
				scoreText.y = SELECT_SIZE_Y - scoreText.getBounds().height;
				scoreText.shadow = new createjs.Shadow( SELECT_SCORE_SHADOW, 2, 2, 3);
				selectObj.addChild(scoreText);
			}
		}
		
		function selectClick(evt)
		{
			debug("selectClick(0) x=" + evt.stageX + ", y=" + evt.stageY + "(" +  Math.abs(firstPressMoveY-evt.stageY) +")"); 

			//=============================================================================================================
			// BUG FIX: This is not a root solution !!! 6/16/2014
			// sometime when click on slect map level, also will do "pressmove" command
			// (1) pressmove => (2) select click ==> (3) pressup
			// so currently use sliderMoved count > 10 or (click Y-pos not equal to pressmove Y-pos ) acts as move slider
			// otherwise acts as click the selection!	
			//=============================================================================================================
			if(sliderMoved > 10 || (sliderMoved && firstPressMoveY != evt.stageY) || closeClicked) { 
				//while move the silder or click on delete level icon don't active mouse click 
				debug("sliderMoved = " + sliderMoved + " closeClicked = " + closeClicked);
				sliderMoved = firstPressMoveY = closeClicked = 0;
				return; 
			}
			debug("selectClick");
			removeCanvas1();
			removeCoverBackground();
			if(_postFun) _postFun();
			_activeFun(this.myLevel);
		}
		
		function selectMouseOver()
		{
			var border = this.getChildAt(0);
	
			if(playMode == PLAY_EDIT) {
				delSelectObj[this.myId].selectOver();	
			}
			
			border.alpha = 1;
			dialogStage.cursor = 'pointer';
			dialogStage.update();
		}
		
		function selectMouseOut()
		{
			var border = this.getChildAt(0);
			
			if(playMode == PLAY_EDIT) {
				if(this.myId < delSelectObj.length)	delSelectObj[this.myId].selectOut();	
				////else debug("mouse out: select deleted");
			}
			
			border.alpha = 0;
			dialogStage.cursor =  "url('cursor/openhand.cur'), auto";
			dialogStage.update();
		}
		
		function wheelScroll(e)
		{
			var direction = e.detail?-e.detail:e.wheelDelta; //e.detail: for fireFox, e.wheelDelta: for chrome, IE
			direction = (direction>0)?1: -1;	
	
			
			slider.y += ((SLIDE_GAP_Y*2+SELECT_SIZE_Y)) * direction;
			//boundLine1.alpha = boundLine2.alpha = 0;
			if(slider.y > maxSliderY) {
				slider.y = maxSliderY;
				//boundLine1.alpha = 1; 
			} else if(slider.y < minSliderY ) {
				slider.y = minSliderY;
				//boundLine2.alpha = 1; 
			}
			dialogStage.update();
		}	
	
		function enableMouseWheel()
		{
			if(lastWheelFun) {
				canvas1.removeEventListener("mousewheel", lastWheelFun, false);
				canvas1.removeEventListener('DOMMouseScroll', lastWheelFun, false);
			}
			lastWheelFun = wheelScroll;
			//for chrome
			canvas1.addEventListener("mousewheel", wheelScroll, false);
			//for firefox
			canvas1.addEventListener('DOMMouseScroll', wheelScroll, false);
		}	
		
		function delIcon()
		{
			var closeBoxSize = 12*_scale+1;
			var cross, cycle, delIconObj;
			
			createCloseIcon();
			
			this.getCloseObj = function ()
			{
				return delIconObj;
			}


			this.selectOver = function ()
			{
				////debug("select over");
				if(closeOver) return;
				drawIcon(1);	
			}
			
			this.selectOut = function ()
			{
				////debug("select out");
				drawIcon(0);	
			}
			
			function createCloseIcon()
			{
				cross = new createjs.Shape();
				cycle = new createjs.Shape();
				delIconObj = new createjs.Container();
				delIconObj.addChild(cycle, cross);
				delIconObj.on("mouseover", handleMouseOver);
				delIconObj.on("mouseout", handleMouseOut);
				delIconObj.on("click", handleMouseClick);
				delIconObj.x = SELECT_SIZE_X  - closeBoxSize*2;
				delIconObj.y = closeBoxSize;
			
				drawIcon(0);
			}
		
			function drawIcon(state) 
			{
				var cycAlpha, crosAlpha, cycColor, crosColor;
			
				crosColor = "white";	

				switch(state) {
				case 0:
					cycColor = "#888";
					cycAlpha = crosAplha = 0;	
					break;
				case 1:
					cycColor = "#888";
					crosAlpha = 1;	
					cycAlpha = 	0.7;
					break;
				case 2: 
					cycColor = "red";
					crosAlpha = cycAlpha = 1;
					break;
				}
			
				var g = cycle.graphics; 
				g.clear();
				cycle.alpha = cycAlpha;	
				g.beginFill(cycColor).dc(closeBoxSize/2, closeBoxSize/2, closeBoxSize*7/6);
				//g.beginFill(cycColor).dr(-closeBoxSize/2, - closeBoxSize/2, closeBoxSize*2, closeBoxSize*2);
				
				g = cross.graphics;
				g.clear();
				cross.alpha = crosAlpha;	
				g.setStrokeStyle(closeBoxSize/4).beginStroke(crosColor).moveTo(0,0)
		 	 	 .lineTo(closeBoxSize,closeBoxSize).closePath();
		
				g.moveTo(closeBoxSize,0).lineTo(0,closeBoxSize).closePath();			
			}
			
			function handleMouseOver(event) 
			{
				////debug("close over");
				closeOver = 1;
				drawIcon(2);
			}

			function handleMouseOut(event) 
			{
				////debug("close out");
				closeOver = 0;
				drawIcon(1);
			}
	
			function handleMouseClick(event) 
			{
				closeClicked = 1;
				////debug("delete level = " + delIconObj.parent.myLevel);
				delLevel(delIconObj.parent.myLevel); //get level from parent's property
			}
		}
		
		//-------------------------------
		// for edit mode to delete level 
		//-------------------------------
		
		function delLevel(level)
		{
			//(1) remove from local storage & variable
			delEditLevel(level);
			levelDeleted = 1; 
			
			//(2) shift or delete active level
			if(_activeLevel == level) {
				_activeLevel = 0;
				activeState = -1; //active level deleted
			} else if( _activeLevel > level) {
				_activeLevel--; activeState = 1; //active level shift
			}
			
			//(3) shift or delete playInfo of user created
			playData = 3;
			if(editLevels > 0) {
				getModernInfo();
				if(curLevel == level) {  //play level deleted
					curLevel = 1;
					setModernInfo();
				} else if ( curLevel > level) { //level shift
					curLevel--;
					setModernInfo();
				}
			} else {
				clearModernInfo();
			}
			
			//(4) remove from slider
			delSelectLevel(level);
			
			////debug("delete level = " + level);
		}
	}
	
	function createTitle()
	{
		var titleText = new createjs.Text(_titleName, 
					"italic bold " + TITLE_TEXT_SIZE + "px Helvetica",TITLE_TEXT_COLOR);
		titleText.x = (CANVAS_SIZE_X - titleText.getBounds().width)/2|0;
		titleText.y = (TOP_BORDER1 - titleText.getBounds().height)/2|0;
		titleText.shadow = new createjs.Shadow(TITLE_TEXT_SHADOW_COLOR, 2, 2, 10 );
		dialogStage.addChild(titleText);
	}
	
}

//==============
// select menu
//==============
function menuDialog(_titleName, _itemList, _stage, _scale, _closeCallBack, _args)
{
	var TITLE_TEXT_SIZE = 48 * _scale;
	var ITEM_TEXT_SIZE = 40 * _scale;
	
	var TITLE_TEXT_COLOR = "white";
	var TITLE_TEXT_SHADOW_COLOR = "gold";
	
	var ITEM_TEXT_COLOR = "white";
	var ITEM_TEXT_SHADOW_COLOR = "gold";
	
	var TITLE_AREA_Y = TITLE_TEXT_SIZE * 2 | 0;
	
	var ITEM_AREA_Y = ITEM_TEXT_SIZE * 3/2 | 0;
	var ITEM_GAP_Y = ITEM_TEXT_SIZE * 2/3 | 0;
	
	var BOTTOM_AREA_Y = ITEM_AREA_Y/2|0; 
	
	var BUTTON_BORDER_SIZE = 8 * _scale;
	var BUTTON_ROUND_RADIUD = 2+ 4 * _scale; 

	var COVER_BACKGROUND_COLOR = "black";
	
	var BUTTON_BACKGROUND_BORDER_COLOR = "white";
	var BUTTON_BACKGROUND_COLOR = "#5b0680"; //"#890ee0";
	var BUTTON_BACKGROUND_SHADOW = "gold";
	var BUTTON_BACKGROUND_BORDER_SIZE = 8 * _scale;;
	
	var BUTTON_BORDER_COLOR = "gold";
	var BUTTON_COLOR = "#5d7cff";
	
	var CLOSE_ICON_ACTIVE_COLOR = "#ff5050";
	
	var screenX1 = _stage.canvas.width;
	var screenY1 = _stage.canvas.height;
	
	var titleTextObj, titleWidth, titleHeight;
	var	itemText = [], maxItemTextWidth, itemTextHeight;
	var menuX, menuY;
	var startX, startY;
	
	
	var coverBackgroundObj, background1Obj, background2Obj, menuButtonObj; 
	var closeIconObj = null;
	
	init();
	
	function init()
	{
		createText();
		coverParentStage();
		creatBackground();
		createTitle();
		createItemList();
		if(_closeCallBack) {
			closeIconObj = new closeIconClass(startX+menuX, startY, _stage, _scale, CLOSE_ICON_ACTIVE_COLOR, closeBox, null);
		}

		_stage.enableMouseOver(120);
		_stage.update();
	}
	
	function coverParentStage()
	{
		coverBackgroundObj = new createjs.Shape();
		coverBackgroundObj.graphics.beginFill(COVER_BACKGROUND_COLOR).drawRect(0, 0, screenX1, screenY1).endFill();
		coverBackgroundObj.alpha = 0.6;
		_stage.addChild(coverBackgroundObj);		
	}
	
	function createText()
	{
		var textLength;
		
		titleTextObj = new createjs.Text(_titleName, 
			"bold " + TITLE_TEXT_SIZE + "px Helvetica",TITLE_TEXT_COLOR);
		titleWidth = titleTextObj.getBounds().width;
		titleHeight = titleTextObj.getBounds().height;
		
		maxItemTextWidth =0;
		for(var i = 0; i < _itemList.length; i++) {
			itemText[i] = new createjs.Text(_itemList[i].name, 
				"bold " + ITEM_TEXT_SIZE + "px Helvetica",ITEM_TEXT_COLOR);
			textLength = itemText[i].getBounds().width;
			if(maxItemTextWidth < textLength) maxItemTextWidth = textLength;
		}
		maxItemTextWidth += ITEM_TEXT_SIZE;
		menuX = (maxItemTextWidth > titleWidth? maxItemTextWidth: titleWidth) + TITLE_TEXT_SIZE * 2;
		menuY = TITLE_AREA_Y + BOTTOM_AREA_Y + (ITEM_AREA_Y+ITEM_GAP_Y)*_itemList.length; 
		
		startX = (screenX1-menuX)/2|0;
		startY = (screenY1-menuY)/2|0;
	}
	
	function creatBackground()
	{
		background1Obj = new createjs.Shape();
		background1Obj.graphics.beginFill(BUTTON_BACKGROUND_BORDER_COLOR)
			.drawRoundRect(startX, startY, menuX, menuY, 8*_scale).endFill();
		background1Obj.shadow = new createjs.Shadow(BUTTON_BACKGROUND_SHADOW, 3, 3, 5 );

		background2Obj = new createjs.Shape();
		background2Obj.graphics.beginFill(BUTTON_BACKGROUND_COLOR)
			.drawRoundRect(startX+BUTTON_BACKGROUND_BORDER_SIZE, startY+BUTTON_BACKGROUND_BORDER_SIZE, 
						   menuX-BUTTON_BACKGROUND_BORDER_SIZE*2, menuY-BUTTON_BACKGROUND_BORDER_SIZE*2, 8*_scale).endFill();
		_stage.addChild(background1Obj, background2Obj);
	}	
	
	function createTitle()
	{
		titleTextObj.x = startX + (menuX - titleWidth)/2|0;
		titleTextObj.y = startY + (TITLE_AREA_Y - titleHeight)/2|0;
		titleTextObj.shadow = new createjs.Shadow(TITLE_TEXT_SHADOW_COLOR, 0, 0, 10 );
		_stage.addChild(titleTextObj);
	}
	
	function createItemList()
	{
		menuButtonObj = []
		for(var i = 0; i < itemText.length; i++) {
			menuButtonObj[i] = new createjs.Container();
			
			//child id = 0
			var border = new createjs.Shape();
			border.graphics.beginFill(BUTTON_BACKGROUND_COLOR)
				.drawRoundRect(-BUTTON_BORDER_SIZE, -BUTTON_BORDER_SIZE, 
				maxItemTextWidth+BUTTON_BORDER_SIZE*2, ITEM_AREA_Y+BUTTON_BORDER_SIZE*2,BUTTON_ROUND_RADIUD).endFill();
			
			//child id = 1
			var button = new createjs.Shape();
			button.graphics.beginFill(BUTTON_COLOR).drawRoundRect(0, 0, 
				maxItemTextWidth, ITEM_AREA_Y,BUTTON_ROUND_RADIUD).endFill();
			
			//child id = 2
			itemText[i].textAlign = "center";
			itemText[i].x = maxItemTextWidth/2|0;
			itemText[i].y = (ITEM_AREA_Y - itemText[i].getBounds().height)/2|0;
			
			menuButtonObj[i].addChild(border, button,itemText[i]);
			menuButtonObj[i].x = startX+(menuX - maxItemTextWidth)/2|0;
			menuButtonObj[i].y = startY+TITLE_AREA_Y+(ITEM_AREA_Y+ITEM_GAP_Y) * i;
			menuButtonObj[i].myId = i;

			menuButtonObj[i].on('click', buttonClick);
			menuButtonObj[i].on('mouseover', buttonMouseOver);
			menuButtonObj[i].on('mouseout', buttonMouseOut);			
			_stage.addChild(menuButtonObj[i]);
		}
	}

	function closeBox()
	{
		removeAllObj()
		if(_closeCallBack) _closeCallBack(_args);
	}
	
	function removeAllObj()
	{
		_stage.removeChild(coverBackgroundObj, titleTextObj, background1Obj, background2Obj);
		for(var i = 0; i < itemText.length; i++) {
			_stage.removeChild(menuButtonObj[i]);
		}
		if(closeIconObj) _stage.removeChild(closeIconObj);
		_stage.update();
	}
	
	function buttonClick()
	{
		removeAllObj();
		_stage.cursor = 'default';
		_stage.enableMouseOver(0);
		if(_itemList[this.myId].activeFun) {
			_itemList[this.myId].activeFun(this.myId, _args);
		}
	}
	
	function buttonMouseOver()
	{
		var border = this.getChildAt(0);
		var text = this.getChildAt(2);
	
		border.graphics.clear();
		border.graphics.beginFill(BUTTON_BORDER_COLOR)
			.drawRoundRect(-BUTTON_BORDER_SIZE, -BUTTON_BORDER_SIZE, 
			maxItemTextWidth+BUTTON_BORDER_SIZE*2, ITEM_AREA_Y+BUTTON_BORDER_SIZE*2,BUTTON_ROUND_RADIUD).endFill();

		text.shadow = new createjs.Shadow(TITLE_TEXT_SHADOW_COLOR, 2, 2, 10 );
		_stage.cursor = 'pointer';
		_stage.update();
	}
	
	function buttonMouseOut()
	{
		var border = this.getChildAt(0);
		var text = this.getChildAt(2);

	
		border.graphics.clear();
		border.graphics.beginFill(BUTTON_BACKGROUND_COLOR)
			.drawRoundRect(-BUTTON_BORDER_SIZE, -BUTTON_BORDER_SIZE, 
			maxItemTextWidth+BUTTON_BORDER_SIZE*2, ITEM_AREA_Y+BUTTON_BORDER_SIZE*2,BUTTON_ROUND_RADIUD).endFill();
		
		text.shadow = null;
		
		_stage.cursor = 'default';
		_stage.update();
	}	
}

function mainMenuClose(callbackFun)
{
	if(callbackFun) callbackFun();
}

function mainMenu(callbackFun)
{
	var mainMenuList = [
		{ name: "CLASSIC MODE", activeFun: classicMenu },
		{ name: "TRAINING MODE", activeFun:  modernMenu },
		{ name: "EDIT MODE", activeFun:  editMenu },
		{ name: "HELP", activeFun: helpMenu }
	];
	
	if(!noDemoData1 || !noDemoData2 ) { //insert demo mode 6/11/2014
		mainMenuList.splice(3, 0, { name: "DEMO MODE", activeFun: demoMenu });
	}	
	
	if(typeof callbackFun == "undefined") callbackFun = null;
	
	menuDialog("MAIN MENU", mainMenuList, mainStage, tileScale, mainMenuClose, callbackFun);
}

function classicMenu(id, callbackFun)
{
	var classicMenuList = [
		{ name: LODERUNNER_NAME1, activeFun: classicPlay },
		{ name: LODERUNNER_NAME2, activeFun:  classicPlay }
	];
	
	if(playMode != PLAY_EDIT) {
		classicMenuList.push({ name: "High Scores", activeFun: hiScoreDisplay });
	}
	
	menuDialog("  CLASSIC MODE  ", classicMenuList, mainStage, tileScale, mainMenu, callbackFun);
}

function modernMenu(id, callbackFun)
{
	var modernMenuList = [
		{ name: LODERUNNER_NAME1, activeFun: modernPlay},
		{ name: LODERUNNER_NAME2, activeFun: modernPlay}
	];
	if(editLevels > 0) {
		modernMenuList.push({ name: USER_CREATED_NAME, activeFun: modernPlay}); 
	}
	
	menuDialog(" TRAINING MODE ", modernMenuList, mainStage, tileScale, mainMenu, callbackFun);
}

function demoMenu(id, callbackFun)
{
	var demoMenuList = [];
	if(!noDemoData1) {
		demoMenuList.push({ name: LODERUNNER_NAME1, activeFun: demoPlay});
	}
	if(!noDemoData2) {
		demoMenuList.push({ name: LODERUNNER_NAME2, activeFun: demoPlay});
	}
	
	menuDialog(" DEMO MODE ", demoMenuList, mainStage, tileScale, mainMenu, callbackFun);
}


function editMenu(id, callbackFun)
{
	if(callbackFun != null) callbackFun();
	disableStageClickEvent();
	startEditMode();
}

		
function classicPlay(id, callbackFun)
{
	if(callbackFun != null) callbackFun();
	if(playMode == PLAY_EDIT) canvasReSize();
	
	playMode = PLAY_CLASSIC;
	playData = id+1;
	
	disableStageClickEvent();
	document.onkeydown = handleKeyDown;
	setLastPlayMode();
	selectIconObj.disable(1);
	initShowDataMsg();
	startGame();
}

function hiScoreDisplay(id, callbackFun)
{
	//if(callbackFun != null) callbackFun();
	showScoreTable(0, null, function() { showScoreTable(1, null, callbackFun, 3500);}, 3500);
}

function modernPlay(id, callbackFun)
{
	if(callbackFun != null) callbackFun();
	if(playMode == PLAY_EDIT) canvasReSize();
	
	playMode = PLAY_MODERN;
	playData = id+1;
	
	disableStageClickEvent();
	document.onkeydown = handleKeyDown;
	setLastPlayMode();
	initShowDataMsg();
	startGame();
}

function demoPlay(id, callbackFun)
{
	if(callbackFun != null) callbackFun();
	if(playMode == PLAY_EDIT) canvasReSize();
	
	playMode = PLAY_DEMO;
	playData = id+4; //4: DEMO: lode runner 1 , 5: DEMO: lode runner 2
	
	anyKeyStopDemo();
	initShowDataMsg();
	startGame();
}

/*
function editPlay(id, callbackFun)
{
	if(callbackFun != null) callbackFun();
	//debug("edit play:" + id);
}
*/

function helpMenu(id, callbackFun)
{
	var id = 0;
	if(playMode == PLAY_EDIT) id = 1;
	if(playMode == PLAY_DEMO) id = 2;
	
	helpObj.showHelp(id, helpMenuClose, callbackFun);
	//debug("help menu:" + id);
}

function helpMenuClose(callbackFun)
{
	if(callbackFun != null) callbackFun();
}


/////////////////////////////////////////////////////

function mainMenuIconClass( _screenX1, _screenY1, _scale, _mainMenuBitmap)
{
	//_scale = _scale*2/3;
	var border = 4 * _scale + 2;
	var mainMainCanvas, stage;
	var	menuIcon, menuBG;
	var saveStateObj;
	var mouseOverHandler = null, mouseOutHandler = null, mouseClickHandler = null;
	
	var bitmapX = _mainMenuBitmap.getBounds().width * _scale;
	var bitmapY = _mainMenuBitmap.getBounds().height * _scale;	
	var self = this;
	var enabled = 0;
	
	init();
	
	function init()
	{
		createCanvas();
		createMenuIcon();
	}
	
	this.enable = function ()
	{
		if(enabled) return;
		enabled = 1;
		disableMouseHandler();
		enableMouseHandler();
		menuIcon.set({alpha:1})
		stage.enableMouseOver(60);
		stage.update();
	}
	
	this.disable = function (hidden)
	{
		disableMouseHandler();
		if(hidden) {
			menuIcon.set({alpha:0})
		} else {
			menuIcon.set({alpha:1})
		}
		stage.update();
		enabled = 0;
		stage.enableMouseOver(0);
	}
	
	function enableMouseHandler()
	{
		mouseOverHandler = menuIcon.on("mouseover", mouseOver);
		mouseOutHandler = menuIcon.on("mouseout", mouseOut);
		mouseClickHandler = menuIcon.on("click", mouseClick);
	}
	
	function disableMouseHandler()
	{
		menuIcon.removeEventListener("mouseover", mouseOverHandler);
		menuIcon.removeEventListener("mouseout", mouseOutHandler);
		menuIcon.removeEventListener("click", mouseClickHandler);
		stage.cursor = "default";
		stage.update();
	}
	
	function createCanvas()
	{
		mainMainCanvas = document.createElement('canvas');
		mainMainCanvas.id     = "main_menu";
		mainMainCanvas.width  = bitmapX+border*2;
		mainMainCanvas.height = bitmapY+border*2;
	
		var left = (_screenX1 - mainMainCanvas.width - bitmapX/3),
			top  = (_screenY1 - mainMainCanvas.height - bitmapY/4);
			//top  = bitmapY/4|0;
		mainMainCanvas.style.left = left + "px";
		mainMainCanvas.style.top =  top + "px";
		mainMainCanvas.style.position = "absolute";
		document.body.appendChild(mainMainCanvas);
	}
	
	function createMenuIcon()
	{
		stage = new createjs.Stage(mainMainCanvas);
		menuIcon = new createjs.Container();
		menuBG = new createjs.Shape();
		
		menuBG.graphics.beginFill("#fefef1")
			      .drawRect(0, 0, bitmapX+border*2, bitmapY+border*2).endFill();
		menuBG.alpha = 0.05;
		menuIcon.addChild(menuBG);
		_mainMenuBitmap.setTransform(border, border, _scale, _scale);
		menuIcon.addChild(_mainMenuBitmap);
		
		menuIcon.set({alpha:0})
		stage.addChild(menuIcon);
		stage.update();
	}
	function mouseOver()
	{
		if(gameState == GAME_PAUSE || 
		   (gameState != GAME_START && gameState != GAME_RUNNING && playMode != PLAY_EDIT)) return;
		stage.cursor = "pointer";
		menuBG.alpha = 1;
		stage.update();
	}
	
	function mouseOut()
	{
		stage.cursor = "default";
		menuBG.alpha = 0.05;
		stage.update();
	}
	
	function mouseClick()
	{
		if(gameState == GAME_PAUSE || 
		   (gameState != GAME_START && gameState != GAME_RUNNING && playMode != PLAY_EDIT)) return;
		saveState();
		mainMenu(restoreState);
		mouseOut();
	}

	function saveState()
	{
		saveStateObj = saveKeyHandler(noKeyDown);
		gamePause();
		if(playMode == PLAY_EDIT) {
			if(editLevelModified()) saveTestState();
			stopEditTicker();
		} else {
			stopPlayTicker();
			stopAllSpriteObj();
		}
		self.disable();
	}
	
	function restoreState()
	{
		restoreKeyHandler(saveStateObj);
		if(playMode == PLAY_EDIT) {
			startEditTicker();
		} else {
			startAllSpriteObj();
			startPlayTicker();
		}
		gameResume();
		self.enable();
	}
}

//////////////////////////////////////////////////////////
function activeSelectMenu(activeFun, postFun)
{
	if(playMode == PLAY_EDIT) {
		var editLevel = testLevelInfo.level> editLevels?0:testLevelInfo.level;
		
		selectDialog(USER_CREATED_NAME, checkBitmap, editLevelData, editLevel, screenX1, screenY1, 
				mainStage, tileScale, activeFun, editSelectMenuClose, postFun)		
	} else {
		//var	titleName = (playData==1)?LODERUNNER_NAME1:((playData==2)?LODERUNNER_NAME2:USER_CREATED_NAME);
	
		switch(playData) {
		case 1:
			titleName = LODERUNNER_NAME1;	
			break;	
		case 2:
			titleName = LODERUNNER_NAME2;	
			break;	
		case 3:
			titleName = USER_CREATED_NAME;	
			break;	
		case 4:
			titleName = "DEMO: " + LODERUNNER_NAME1;	
			break;	
		case 5:
			titleName = "DEMO: " + LODERUNNER_NAME2;	
			break;	
		default:
			titleName = "Unknown";	
			break;	
		}
		
		selectDialog(titleName, checkBitmap, levelData, curLevel, screenX1, screenY1, 
				mainStage, tileScale, activeFun, null, postFun)		
	}
}		

function selectIconClass( _screenX1, _screenY1, _scale, _bitmap)
{
	//_scale = _scale*2/3;
	var border = 4 * _scale + 2;
	var selectCanvas, stage;
	var	selectIcon, selectBG;
	var saveStateObj;
	var mouseOverHandler = null, mouseOutHandler = null, mouseClickHandler = null;
	
	var bitmapX = _bitmap.getBounds().width * _scale;
	var bitmapY = _bitmap.getBounds().height * _scale;	
	var self = this;
	var enabled = 0;
	
	init();
	
	function init()
	{
		createCanvas();
		createSelectIcon();
	}
	
	this.enable = function ()
	{
		if(enabled) return;
		enabled = 1;
		disableMouseHandler();
		enableMouseHandler();
		selectIcon.set({alpha:1})
		stage.enableMouseOver(60);
		stage.update();
	}
	
	this.disable = function (hidden)
	{
		disableMouseHandler();
		if(hidden) {
			selectIcon.set({alpha:0})
		} else {
			selectIcon.set({alpha:1})
		}
		stage.update();
		enabled = 0;
		stage.enableMouseOver(0);
	}
	
	function enableMouseHandler()
	{
		mouseOverHandler = selectIcon.on("mouseover", mouseOver);
		mouseOutHandler = selectIcon.on("mouseout", mouseOut);
		mouseClickHandler = selectIcon.on("click", mouseClick);
	}
	
	function disableMouseHandler()
	{
		selectIcon.removeEventListener("mouseover", mouseOverHandler);
		selectIcon.removeEventListener("mouseout", mouseOutHandler);
		selectIcon.removeEventListener("click", mouseClickHandler);
		stage.cursor = "default";
		stage.update();
	}
	
	function createCanvas()
	{
		selectCanvas = document.createElement('canvas');
		selectCanvas.id     = "select_menu";
		selectCanvas.width  = bitmapX+border*2;
		selectCanvas.height = bitmapY+border*2;
	
		var left = (_screenX1 - selectCanvas.width - bitmapX/3),
			top  = bitmapY/4|0;
			//top  = (_screenY1 - selectCanvas.height - bitmapY/4);
		selectCanvas.style.left = left + "px";
		selectCanvas.style.top =  top + "px";
		selectCanvas.style.position = "absolute";
		document.body.appendChild(selectCanvas);
	}
	
	function createSelectIcon()
	{
		stage = new createjs.Stage(selectCanvas);
		selectIcon = new createjs.Container();
		selectBG = new createjs.Shape();
		
		selectBG.graphics.beginFill("#fefef1")
			      .drawRect(0, 0, bitmapX+border*2, bitmapY+border*2).endFill();
		selectBG.alpha = 0.05;
		selectIcon.addChild(selectBG);
		_bitmap.setTransform(border, border, _scale, _scale);
		selectIcon.addChild(_bitmap);
		
		selectIcon.set({alpha:0})
		stage.addChild(selectIcon);
		stage.update();
	}
	
	function mouseOver()
	{
		if(gameState == GAME_PAUSE || 
		   (gameState != GAME_START && gameState != GAME_RUNNING && playMode != PLAY_EDIT)) return;
		stage.cursor = "pointer";
		selectBG.alpha = 1;
		stage.update();
	}
	
	function mouseOut()
	{
		stage.cursor = "default";
		selectBG.alpha = 0.05;
		stage.update();
	}
	
	function startSelectMenu()
	{
		saveState();
		activeSelectMenu(activeSelectPlay, restoreState);
		mouseOut();
	}
	
	function mouseClick()
	{
		if(gameState == GAME_PAUSE || 
		   (gameState != GAME_START && gameState != GAME_RUNNING && playMode != PLAY_EDIT)) return;
		
		if(playMode == PLAY_EDIT && editLevelModified()) {
			if(editLevelModified())saveTestState();
			editConfirmAbortState(startSelectMenu);
		} else {
			startSelectMenu();
		}
	}

	function activeSelectPlay(level)
	{
		//debug("time play:" + level);
		//if(callbackFun != null) callbackFun();
		switch(playMode) {
		case PLAY_EDIT:
			editSelectLevel(level);
			break;
		case PLAY_DEMO:
			curLevel = level;
			setDemoInfo();	
			startGame();
			break;	
		case PLAY_MODERN:		
			curLevel = level;
			//playMode = PLAY_MODERN;
			//document.onkeydown = handleKeyDown;
			//setLastPlayMode();
			setModernInfo();
			startGame();
			break;	
		default:
			debug("activeSelectPlay design error ! playMode = " + playMode);
			break;	
		}
	}	

	function saveState()
	{
		saveStateObj = saveKeyHandler(noKeyDown);
		gamePause();
		if(playMode == PLAY_EDIT) {
			stopEditTicker();
		} else {
			stopPlayTicker();
			stopAllSpriteObj();
		}
		self.disable();
	}
	
	function restoreState()
	{
		restoreKeyHandler(saveStateObj);
		if(playMode == PLAY_EDIT) {
			startEditTicker();
		} else {
			startAllSpriteObj();
			startPlayTicker();
		}
		gameResume();
		self.enable();
	}
}


///////////////////////////////////////////////////////
function levelPassDialog(_level, _getGold, _guardDead, _time, _hiScore, 
						  _returnBitmap, _menuBitmap, _nextBitmap,
						  _stage, _scale, _callBack)
{
	var TITLE_TEXT_SIZE = 48 * _scale;
	var ITEM_TEXT_SIZE = 40 * _scale;
	var GOLD_X = 32 * _scale;
	
	var TITLE_TEXT_COLOR = "white";
	var TITLE_SHADOW_COLOR = "yellow";
	
	var ITEM_TEXT_COLOR = "white";
	var TIME_NAME_COLOR = "#fad292";
	var SCORE_NAME_COLOR = TIME_NAME_COLOR;
	var HISCORE_NAME_COLOR = TIME_NAME_COLOR;
	
	var TEXT_GAP_Y = ITEM_TEXT_SIZE * 2/3 | 0;

	var COVER_BACKGROUND_COLOR = "black";	

	var BACKGROUND_BORDER_COLOR = "white"
	var BACKGROUND_COLOR = "#5b0680";
	var BACKGROUND_SHADOW = "gold";
	var BACKGROUND_BORDER_SIZE = 8 * _scale;

	var BUTTON_BORDER_SIZE = 8 * _scale;
	var BUTTON_ROUND_RADIUD = 2+ 4 * _scale; 
	var BUTTON_BORDER_COLOR = "gold";
	var BUTTON_COLOR = "#eeffff"
	var BUTTON_BACKGROUND_COLOR = BACKGROUND_COLOR;

	var buttonX = _returnBitmap.getBounds().width * _scale,
	   	buttonY = _returnBitmap.getBounds().height * _scale;
	
	var titleTextObj, goldTextObj, guardTextObj, timeTextObj;
	var goldObj, guardObj, timeNameObj;
	var scoreNameObj, scoreTextObj, 
		hiScoreNameObj, hiScoreTextObj;
	
	var coverBackgroundObj, background1Obj, background2Obj, menuButtonObj;
	var screenX1 = _stage.canvas.width;
	var screenY1 = _stage.canvas.height;
	
	var menuX, menuY, startX, startY
	var timeNameX, maxTextSize;
	var menuButton = [];
	var bitmap = [ _returnBitmap, _menuBitmap, _nextBitmap ];

	var centerX, xOffset, yOffset;

	var levelScore = 0, goldPoint = 0, guardPoint = 0, timePoint = 0;
	var countTime = 85, onePointValue = 100, countAddValue = 47;
	
	init();
	
	function init()
	{
		initContent();
		coverParentStage();
		creatBackground();
		createContent();
		_stage.enableMouseOver(120);
		_stage.update();
		setTimeout(function() { goldScoreCounting(1);}, 200);
	}
	
	function initContent()
	{
		titleTextObj = new createjs.Text("LEVEL " + ("00"+_level).slice(-3), 
										 "bold "+TITLE_TEXT_SIZE + "px Helvetica",TITLE_TEXT_COLOR);
		titleTextObj.shadow = new createjs.Shadow(TITLE_SHADOW_COLOR, 0, 0, 10 );
		
		goldTextObj = new createjs.Text("000", ITEM_TEXT_SIZE + "px Helvetica",ITEM_TEXT_COLOR);
		
		guardTextObj = new createjs.Text("000", ITEM_TEXT_SIZE + "px Helvetica",ITEM_TEXT_COLOR);
		
		timeTextObj = new createjs.Text("000", ITEM_TEXT_SIZE + "px Helvetica",ITEM_TEXT_COLOR);
		
		timeNameObj = new createjs.Text("TIME", "bold " + ITEM_TEXT_SIZE + "px Helvetica", TIME_NAME_COLOR);
		
		scoreNameObj = new createjs.Text("SCORE", "bold " + ITEM_TEXT_SIZE + "px Helvetica", SCORE_NAME_COLOR);
		scoreTextObj = new createjs.Text("000000", ITEM_TEXT_SIZE + "px Helvetica",ITEM_TEXT_COLOR);
		
		hiScoreNameObj = new createjs.Text("HI-SCORE", "bold " + ITEM_TEXT_SIZE + "px Helvetica", HISCORE_NAME_COLOR);
		hiScoreTextObj = new createjs.Text( ("00000"+_hiScore).slice(-6), 
										ITEM_TEXT_SIZE + "px Helvetica",ITEM_TEXT_COLOR);
		
		timeNameX = timeNameObj.getBounds().width;
		maxTextSize = hiScoreNameObj.getBounds().width + hiScoreTextObj.getBounds().width;
		menuX = maxTextSize + TITLE_TEXT_SIZE * 5;
		menuY = TITLE_TEXT_SIZE * 2 + (ITEM_TEXT_SIZE+TEXT_GAP_Y) * 5 + buttonY*3;

		startX = (screenX1-menuX)/2|0;
		startY = (screenY1-menuY)/2|0;
	}
	
	function coverParentStage()
	{
		coverBackgroundObj = new createjs.Shape();
		coverBackgroundObj.graphics.beginFill(COVER_BACKGROUND_COLOR).drawRect(0, 0, screenX1, screenY1).endFill();
		coverBackgroundObj.alpha = 0.6;
		_stage.addChild(coverBackgroundObj);		
	}
	
	function creatBackground()
	{
		background1Obj = new createjs.Shape();
		background1Obj.graphics.beginFill(BACKGROUND_BORDER_COLOR)
			.drawRoundRect(startX, startY, menuX, menuY, 8*_scale).endFill();
		background1Obj.shadow = new createjs.Shadow(BACKGROUND_SHADOW, 3, 3, 5 );

		background2Obj = new createjs.Shape();
		background2Obj.graphics.beginFill(BACKGROUND_COLOR)
			.drawRoundRect(startX+BACKGROUND_BORDER_SIZE, startY+BACKGROUND_BORDER_SIZE, 
						   menuX-BACKGROUND_BORDER_SIZE*2, menuY-BACKGROUND_BORDER_SIZE*2, 8*_scale).endFill();
		_stage.addChild(background1Obj, background2Obj);
	}
	
	function createContent()
	{
		titleTextObj.x = startX + (menuX - titleTextObj.getBounds().width)/2|0;
		titleTextObj.y = startY + TITLE_TEXT_SIZE;
		_stage.addChild(titleTextObj);
		
		var centerGap = 8*_scale;
		
		centerX = startX+ menuX/2|0;
		xOffset = centerX;
		yOffset = startY+TITLE_TEXT_SIZE*3;
		
		goldObj = drawText(xOffset, yOffset, "@", _stage); //@: gold
		var xOffset = centerX - GOLD_X  - centerGap;
		goldObj[0].x = xOffset;
		goldObj[0].alpha = 0;
		
		goldTextObj.x = centerX + centerGap;
		goldTextObj.y = yOffset;
		goldTextObj.alpha = 0;
		_stage.addChild(goldTextObj);
		
		yOffset += (ITEM_TEXT_SIZE + TEXT_GAP_Y);
		guardObj = drawText(xOffset, yOffset, "#", _stage); //#: trap (陷井)
		guardObj[0].alpha = 0;
		
		guardTextObj.x =centerX + centerGap;
		guardTextObj.y = yOffset;
		guardTextObj.alpha = 0;
		_stage.addChild(guardTextObj);
		
		var xOffset = centerX - timeNameX - centerGap;
		yOffset += (ITEM_TEXT_SIZE + TEXT_GAP_Y);
		timeNameObj.x = xOffset;
		timeNameObj.y = yOffset;
		timeNameObj.alpha = 0;
		
		timeTextObj.x = centerX + centerGap;
		timeTextObj.y = yOffset;
		timeTextObj.alpha = 0;
		_stage.addChild(timeNameObj, timeTextObj);
		
		xOffset = centerX - scoreNameObj.getBounds().width - centerGap;
		yOffset += (ITEM_TEXT_SIZE + TEXT_GAP_Y);
		scoreNameObj.x = xOffset;
		scoreNameObj.y = yOffset;
		scoreTextObj.x = centerX + centerGap; 
		scoreTextObj.y = yOffset;
		_stage.addChild(scoreNameObj, scoreTextObj);
		
		xOffset = centerX - hiScoreNameObj.getBounds().width - centerGap;
		yOffset += (ITEM_TEXT_SIZE+ TEXT_GAP_Y/3);
		hiScoreNameObj.x = xOffset;
		hiScoreNameObj.y = yOffset;
		hiScoreTextObj.x = centerX + centerGap; 
		hiScoreTextObj.y = yOffset;
		_stage.addChild(hiScoreNameObj, hiScoreTextObj);
		
		
		yOffset += (ITEM_TEXT_SIZE + buttonY); //xOffset for menu button
		
	}
 	
	function updateHiScore()
	{
		if(_hiScore < levelScore) {
			hiScoreTextObj.text = ("00000" + (levelScore)).slice(-6);
			hiScoreTextObj.color = "gold";
		}		
	}
	
	function goldScoreCounting(firstTime)
	{
		var endCount = 0;
		if(firstTime) {
			goldObj[0].alpha = 1;
			goldTextObj.alpha = 1;
			soundPlay("scoreBell");
			if(_getGold <= 0) {
				endCount = 1;
			} else {
				setTimeout(function() { goldScoreCounting(0); }, countTime );
			}
		} else {
			var addCount = countAddValue, endCount = 0;		   
			if(goldPoint + addCount >= _getGold) {
				endCount = 1;
				addCount = _getGold - goldPoint;
			}
			soundPlay("scoreCount");
			goldPoint += addCount;
			levelScore += (addCount * onePointValue);
			goldTextObj.text = ("00" + (goldPoint)).slice(-3);
			scoreTextObj.text = ("00000" + (levelScore)).slice(-6);
			updateHiScore();
			
			if(!endCount) {
				setTimeout(function() { goldScoreCounting(0); }, countTime );
			}
		}
		_stage.update();
		if(endCount) {
			setTimeout(function() { guardScoreCounting(1); }, countTime*4);
		}
	}
	
 	function guardScoreCounting(firstTime)
	{
		var endCount = 0;
		if(firstTime) {
			guardObj[0].alpha = 1;
			guardTextObj.alpha = 1;
			soundPlay("scoreBell");
			if(_guardDead <= 0) {
				endCount = 1;
			} else {
				setTimeout(function() { guardScoreCounting(0); }, countTime );
			}
		} else {
			var addCount = countAddValue, endCount = 0;		   
			if(guardPoint + addCount >= _guardDead) {
				endCount = 1;
				addCount = _guardDead - guardPoint;
			}
			soundPlay("scoreCount");
			guardPoint += addCount;
			levelScore += (addCount * onePointValue);
			guardTextObj.text = ("00" + (guardPoint)).slice(-3);
			scoreTextObj.text = ("00000" + (levelScore)).slice(-6);
			updateHiScore();

			if(!endCount) {
				setTimeout(function() { guardScoreCounting(0); }, countTime );
			}
		}
		_stage.update();
		if(endCount) {
			setTimeout(function() { timeScoreCounting(1); }, countTime*4 );
		}
	}
	
 	function timeScoreCounting(firstTime)
	{
		var endCount = 0;
		if(firstTime) {
			timeNameObj.alpha = 1;
			timeTextObj.alpha = 1;
			soundPlay("scoreBell");
			if(_time <= 0) {
				endCount = 1;
			} else {
				setTimeout(function() { timeScoreCounting(0); }, countTime );
			}
		} else {
			var addCount = countAddValue, endCount = 0;		   
			if(timePoint + addCount >= _time) {
				endCount = 1;
				addCount = _time - timePoint;
			}
			soundPlay("scoreCount");
			timePoint += addCount;
			levelScore += (addCount * onePointValue);
			timeTextObj.text = ("00" + (timePoint)).slice(-3);
			scoreTextObj.text = ("00000" + (levelScore)).slice(-6);
			updateHiScore();

			if(!endCount) {
				setTimeout(function() { timeScoreCounting(0); }, countTime );
			}
		}
		if(endCount) {
			soundPlay("scoreEnding");
			setTimeout(function() { createButton(); }, 100 );
		}
		_stage.update();
	}
	
	function createButton()
	{
		var border, button;

		for(var i = 0; i < 3; i++ ) {
			menuButton[i] = new createjs.Container();
			border = new createjs.Shape();	
			button = new createjs.Shape();		
		
			xOffset = centerX - buttonX*3 + (buttonX *5/2*i)|0;
	
			//id = 0
			border.graphics.beginFill(BUTTON_BACKGROUND_COLOR)
				.drawRoundRect(-BUTTON_BORDER_SIZE*2, -BUTTON_BORDER_SIZE*2, 
							   buttonX+4*BUTTON_BORDER_SIZE, buttonY+4*BUTTON_BORDER_SIZE,BUTTON_ROUND_RADIUD).endFill();
			//id = 1
			button.graphics.beginFill(BUTTON_COLOR)
				.drawRoundRect(-BUTTON_BORDER_SIZE, -BUTTON_BORDER_SIZE, 
							   buttonX+BUTTON_BORDER_SIZE*2, buttonY+BUTTON_BORDER_SIZE*2,BUTTON_ROUND_RADIUD).endFill();

			//id = 2
			bitmap[i].setTransform(0, 0, _scale, _scale);
			
			menuButton[i].x = xOffset;
			menuButton[i].y = yOffset;
			menuButton[i].addChild(border, button, bitmap[i]);
			
			menuButton[i].on('click', buttonClick);
			menuButton[i].on('mouseover', buttonMouseOver);
			menuButton[i].on('mouseout', buttonMouseOut);	
			menuButton[i].myId = i;
			_stage.addChild(menuButton[i]);

		}
		_stage.update();
	}
	
	function buttonClick()
	{
		removeAllObj();
		_stage.cursor = 'default';
		_stage.enableMouseOver(0);
		if(_callBack) _callBack(this.myId);
		//debug(this.myId);
	}
	
	function buttonMouseOver()
	{
		var border = this.getChildAt(0);
	
		border.graphics.clear();
		border.graphics.beginFill(BUTTON_BORDER_COLOR)
			.drawRoundRect(-BUTTON_BORDER_SIZE*2, -BUTTON_BORDER_SIZE*2, 
						   buttonX+BUTTON_BORDER_SIZE*4, buttonY+BUTTON_BORDER_SIZE*4,BUTTON_ROUND_RADIUD).endFill();

		_stage.cursor = 'pointer';
		_stage.update();
	}
	
	function buttonMouseOut()
	{
		var border = this.getChildAt(0);
	
		border.graphics.clear();
		border.graphics.beginFill(BUTTON_BACKGROUND_COLOR)
			.drawRoundRect(-BUTTON_BORDER_SIZE*2, -BUTTON_BORDER_SIZE*2, 
						   buttonX+BUTTON_BORDER_SIZE*4, buttonY+BUTTON_BORDER_SIZE*4,BUTTON_ROUND_RADIUD).endFill();
		
		_stage.cursor = 'default';
		_stage.update();
	}	
	
	function removeAllObj()
	{
		_stage.removeChild(coverBackgroundObj, background1Obj, background2Obj, titleTextObj);
		
		_stage.removeChild(goldObj[0], goldTextObj);
		_stage.removeChild(guardObj[0], guardTextObj);
		_stage.removeChild(timeNameObj, timeTextObj);
		_stage.removeChild(scoreNameObj, scoreTextObj);
		_stage.removeChild(hiScoreNameObj, hiScoreTextObj);
		
		for(var i = 0; i < 3; i++) {
			_stage.removeChild(menuButton[i]);
		}
		_stage.update();
	}
	
}
////////////////////////////////////////////////////////////
function yesNoDialog(_txtMsg, _yesBitmap, _noBitmap, _stage, _scale, _callBack)
{
	var TEXT_MSG_SIZE = 48 * _scale;
	var TEXT_GAP_Y = TEXT_MSG_SIZE * 3/4 | 0;
	
	var TEXT_MSG_COLOR = "white";
	var TEXT_MSG_SHADOW_COLOR = "yellow";

	var COVER_BACKGROUND_COLOR = "black";	
	
	var BACKGROUND_BORDER_COLOR = "white"
	var BACKGROUND_COLOR = "#5b0680";
	var BACKGROUND_SHADOW = "gold";
	var BACKGROUND_BORDER_SIZE = 8 * _scale;
	
	var BUTTON_BORDER_SIZE = 8 * _scale;
	var BUTTON_ROUND_RADIUD = 2+ 4 * _scale; 
	var BUTTON_BORDER_COLOR = "gold";
	var BUTTON_COLOR = "#eeffff"
	var BUTTON_BACKGROUND_COLOR = BACKGROUND_COLOR;

	var saveStateObj;
	var textObj;
	
	var coverBackgroundObj, background1Obj, background2Obj;
	var screenX1 = _stage.canvas.width;
	var screenY1 = _stage.canvas.height;
	
	var buttonX = _yesBitmap.getBounds().width * _scale,
	   	buttonY = _yesBitmap.getBounds().height * _scale;
	
	var menuX, menuY, startX, startY
	var menuButton = [];
	var bitmap = [ _yesBitmap, _noBitmap ];
	
	init();
	
	function init()
	{
		saveKeyState();
		initTxtMsg();
		coverParentStage();
		creatBackground();
		createTxtMsg();
		createButton();
		
		_stage.enableMouseOver(60);
		_stage.update();
	}
	
	function saveKeyState()
	{
		saveStateObj = saveKeyHandler(noKeyDown);
	}
	
	function restoreKeyState()
	{
		restoreKeyHandler(saveStateObj);
	}
	
	function initTxtMsg()
	{
		var maxTextSize = 0, tmpTextSize;
		
		textObj = [];
		for(var i = 0; i < _txtMsg.length; i++) {
			textObj[i] = new createjs.Text(_txtMsg[i], "bold " + TEXT_MSG_SIZE + "px Helvetica",TEXT_MSG_COLOR);
			textObj[i].shadow = new createjs.Shadow(TEXT_MSG_SHADOW_COLOR, 0, 0, 10 );
			tmpTextSize = textObj[i].getBounds().width;
			if(maxTextSize < tmpTextSize) maxTextSize = tmpTextSize;
		}
		if(maxTextSize < buttonX * 4) maxTextSize = buttonX * 4;
		
		menuY = (TEXT_GAP_Y + TEXT_MSG_SIZE) * _txtMsg.length + TEXT_MSG_SIZE * 2 + buttonY;
		menuX =	maxTextSize + TEXT_MSG_SIZE * 2;
		
		startX = (screenX1-menuX)/2|0;
		startY = (screenY1-menuY)/2|0;
	}
	
	function coverParentStage()
	{
		coverBackgroundObj = new createjs.Shape();
		coverBackgroundObj.graphics.beginFill(COVER_BACKGROUND_COLOR).drawRect(0, 0, screenX1, screenY1).endFill();
		coverBackgroundObj.alpha = 0.6;
		_stage.addChild(coverBackgroundObj);		
	}	

	function creatBackground()
	{
		background1Obj = new createjs.Shape();
		background1Obj.graphics.beginFill(BACKGROUND_BORDER_COLOR)
			.drawRoundRect(startX, startY, menuX, menuY, 8*_scale).endFill();
		background1Obj.shadow = new createjs.Shadow(BACKGROUND_SHADOW, 3, 3, 5 );

		background2Obj = new createjs.Shape();
		background2Obj.graphics.beginFill(BACKGROUND_COLOR)
			.drawRoundRect(startX+BACKGROUND_BORDER_SIZE, startY+BACKGROUND_BORDER_SIZE, 
						   menuX-BACKGROUND_BORDER_SIZE*2, menuY-BACKGROUND_BORDER_SIZE*2, 8*_scale).endFill();
		_stage.addChild(background1Obj, background2Obj);
	}	
	
	function createTxtMsg()
	{
		for(var i = 0; i < textObj.length; i++) {
			textObj[i].x = startX + (menuX - textObj[i].getBounds().width)/2|0
			textObj[i].y = startY + (TEXT_GAP_Y + TEXT_MSG_SIZE) * i + TEXT_GAP_Y;
			_stage.addChild(textObj[i]);
		}
	}
	
	function createButton()
	{
		var border, button;
		var centerX = startX+ menuX/2|0;

		for(var i = 0; i < 2; i++ ) {
			menuButton[i] = new createjs.Container();
			border = new createjs.Shape();	
			button = new createjs.Shape();		
		
			//id = 0
			border.graphics.beginFill(BUTTON_BACKGROUND_COLOR)
				.drawRoundRect(-BUTTON_BORDER_SIZE*2, -BUTTON_BORDER_SIZE*2, 
							   buttonX+4*BUTTON_BORDER_SIZE, buttonY+4*BUTTON_BORDER_SIZE,BUTTON_ROUND_RADIUD).endFill();
			//id = 1
			button.graphics.beginFill(BUTTON_COLOR)
				.drawRoundRect(-BUTTON_BORDER_SIZE, -BUTTON_BORDER_SIZE, 
							   buttonX+BUTTON_BORDER_SIZE*2, buttonY+BUTTON_BORDER_SIZE*2,BUTTON_ROUND_RADIUD).endFill();

			//id = 2
			bitmap[i].setTransform(0, 0, _scale, _scale);
			
			menuButton[i].x = centerX - buttonX*2.5 + (buttonX*4*i);
			menuButton[i].y = textObj[textObj.length-1].y + TEXT_MSG_SIZE*2;
			menuButton[i].addChild(border, button, bitmap[i]);
			
			menuButton[i].on('click', buttonClick);
			menuButton[i].on('mouseover', buttonMouseOver);
			menuButton[i].on('mouseout', buttonMouseOut);	
			menuButton[i].myId = i;
			_stage.addChild(menuButton[i]);

		}
		_stage.update();
	}
	
	function buttonClick()
	{
		restoreKeyState();
		removeAllObj();
		_stage.cursor = 'default';
		_stage.enableMouseOver(0);
		if(_callBack) _callBack(!this.myId+0);
		//debug(this.myId);
	}
	
	function buttonMouseOver()
	{
		var border = this.getChildAt(0);
	
		border.graphics.clear();
		border.graphics.beginFill(BUTTON_BORDER_COLOR)
			.drawRoundRect(-BUTTON_BORDER_SIZE*2, -BUTTON_BORDER_SIZE*2, 
						   buttonX+BUTTON_BORDER_SIZE*4, buttonY+BUTTON_BORDER_SIZE*4,BUTTON_ROUND_RADIUD).endFill();

		_stage.cursor = 'pointer';
		_stage.update();
	}
	
	function buttonMouseOut()
	{
		var border = this.getChildAt(0);
	
		border.graphics.clear();
		border.graphics.beginFill(BUTTON_BACKGROUND_COLOR)
			.drawRoundRect(-BUTTON_BORDER_SIZE*2, -BUTTON_BORDER_SIZE*2, 
						   buttonX+BUTTON_BORDER_SIZE*4, buttonY+BUTTON_BORDER_SIZE*4,BUTTON_ROUND_RADIUD).endFill();
		
		_stage.cursor = 'default';
		_stage.update();
	}	
	
	function removeAllObj()
	{
		_stage.removeChild(coverBackgroundObj, background1Obj, background2Obj);
		
		for(var i = 0; i < textObj.length; i++) {
			_stage.removeChild(textObj[i]);
		}
		
		for(var i = 0; i < menuButton.length; i++) {
			_stage.removeChild(menuButton[i]);
		}
		
		_stage.update();
	}	
}