function disablePage() {
	var maskLayer = document.getElementById('maskLayer');
	if (!maskLayer) {
		//CREATE IFRAME TO OVERLAY EMULATOR
		maskLayer = document.createElement('iframe');
		maskLayer.setAttribute("id", "maskLayer");
		document.body.appendChild(maskLayer);
	}
	var maskLayerStyle = document.getElementById('maskLayer').style;

	var height = document.body.clientHeight;
	if (document.documentElement.scrollHeight > height) {
		height = document.documentElement.scrollHeight;
	}
	if (document.documentElement.clientHeight > height) {
		height = document.documentElement.clientHeight;
	}

	var width = document.body.clientWidth;
	if (document.documentElement.scrollWidth > width) {
		width = document.documentElement.scrollWidth;
	}
	if (document.documentElement.clientWidth) {
		width = document.documentElement.clientWidth - 5;
	}
	maskLayerStyle.top = "0px";
	maskLayerStyle.left = "0px";
	maskLayerStyle.height = height + "px";
	maskLayerStyle.width = width + "px";
	maskLayerStyle.zIndex = 1000;
	maskLayerStyle.opacity = ".50";
	maskLayerStyle.filter = "alpha(opacity=50)";
	maskLayerStyle.backgroundColor = "black";
	maskLayerStyle.position = "absolute";
	maskLayerStyle.display = "block";
}

function showColorSchemePreview() {

}

function checkOnScrollBar() {
	var textHeight = document.body.clientHeight;
	var screenHeight = document.documentElement.clientHeight;
	var scrollHeight = document.documentElement.scrollHeight;
	var getSpace, spaceHeightPx, spaceHeight, allHeight;
	getSpace = document.getElementById('space');
	if(getSpace == null){
		allHeight = textHeight;
	}else{
		spaceHeightPx = getSpace.style.height;
		spaceHeight = parseInt(spaceHeightPx.substring(0, 2));
		allHeight = textHeight + spaceHeight * 2;	
	}	

	// alert('textHeight: ' + textHeight);
	// alert('screenHeight: ' + screenHeight);	
	// alert('Scroll height: ' + scrollHeight);
	// alert('Space: ' + spaceHeight);
	// alert('allHeight: ' + allHeight);
	
	/*
	 * When all height text plus space multi 2 less than Screen Height then no scroll bar display
	 */

	if (allHeight < screenHeight) {
		document.body.style.overflow = 'hidden';
	} else {
		document.body.style.overflow = 'hidden';
		document.body.style.overflowX = "hidden";
		document.body.style.overflowY = "auto";
	}
}

function showWarningBrochurePageDeletePageMessage(message, brochureId, pageId) {

	disablePage();

	var height = document.body.clientHeight;
	if (document.documentElement.scrollHeight > height) {
		height = document.documentElement.scrollHeight;
	}
	if (document.documentElement.clientHeight > height) {
		height = document.documentElement.clientHeight;
	}

	var width = document.body.clientWidth;
	if (document.documentElement.scrollWidth > width) {
		width = document.documentElement.scrollWidth;
	}

	if (document.documentElement.clientWidth) {
		width = document.documentElement.clientWidth;
	}

	var container = document.createElement('div');
	container.setAttribute("id", "containerPopup");
	document.body.appendChild(container);
	var containerStyle = document.getElementById('containerPopup').style;
	try {
		// for IE
		containerStyle = document.all.containerPopup.style;
	} catch (e) {
		containerStyle = document.getElementById('containerPopup').style;
	}
	var padding = 10;
	var popupWidth = 420;
	var popupHeiht = 160;

	//containerStyle.top = ((height / 2) - (popupHeiht / 2)) + "px";
	var scrOfY = document.documentElement.scrollTop;
    containerStyle.top = scrOfY + 100 + "px";
	containerStyle.left = ((width / 2) - (popupWidth / 2)) + "px";

	containerStyle.width = popupWidth + "px";
	containerStyle.height = popupHeiht + "px";

	containerStyle.zIndex = 1001;
	containerStyle.position = "absolute";
	containerStyle.display = "block";
	containerStyle.paddingLeft = padding + "px";
	containerStyle.paddingTop = padding + "px";
	containerStyle.paddingRight = padding + "px";
	containerStyle.paddingBottom = padding + "px";
	containerStyle.backgroundColor = "#FFFFFF";

	var divMessage = document.createElement("div");

	var divTop = document.createElement("div");
	divTop.style.background = "url(img/popBar2Top.png) top center no-repeat";
	divTop.style.height = "6px";

	divMessage.appendChild(divTop);

	var divBody = document.createElement("div");
	divBody.style.background = "url(img/popBar2Tile.png) top left repeat-y";
	divBody.style.minHeight = "6px";
	divBody.style.padding = "10px";
	divBody.style.margin = "0px 0px 0px 9px";
	divBody.innerHTML = message;
	divMessage.appendChild(divBody);

	var divBottom = document.createElement("div");
	divBottom.style.background = "url(img/popBar2Bottom.png) top center no-repeat";
	divBottom.style.height = "6px";
	// divBottom.style.width = "362px";
	divMessage.appendChild(divBottom);

	divMessage.style.padding = "20px";
	divMessage.setAttribute("align", "left");

	divMessage.style.margin = "0px 0px 10px 0px";

	container.appendChild(divMessage);

	var divButton = document.createElement("div");
	divButton.setAttribute("align", "center");

	var yes = document.createElement("input");
	yes.setAttribute("type", "button");
	yes.setAttribute("value", "Yes");
    yes.setAttribute("id", "btnyes");
    yes.style.width = '50px';
    
	var no = document.createElement("input");
	no.setAttribute("type", "button");
	no.setAttribute("value", "No");
	no.style.width = '50px';
	
	var span = document.createElement("span");
	span.innerHTML = " ";

	divButton.appendChild(yes);

	yes.onclick = function() {
		enablePage();
		redirect('removepage.do?brochureId=' + brochureId + '&pageId=' + pageId);
	}

	divButton.appendChild(span);

	divButton.appendChild(no);

	no.onclick = function() {
		enablePage();
	}

	container.appendChild(divButton);
	document.getElementById("btnyes").focus();
}

function showWarningInstructionPageDeletePageMessage(message, brochureId) {

	disablePage();

	var height = document.body.clientHeight;
	if (document.documentElement.scrollHeight > height) {
		height = document.documentElement.scrollHeight;
	}
	if (document.documentElement.clientHeight > height) {
		height = document.documentElement.clientHeight;
	}

	var width = document.body.clientWidth;
	if (document.documentElement.scrollWidth > width) {
		width = document.documentElement.scrollWidth;
	}

	if (document.documentElement.clientWidth) {
		width = document.documentElement.clientWidth;
	}

	var container = document.createElement('div');
	container.setAttribute("id", "containerPopup");
	document.body.appendChild(container);
	var containerStyle = document.getElementById('containerPopup').style;

	var padding = 10;
	var popupWidth = 420;
	var popupHeiht = 160;

	//containerStyle.top = ((height / 2) - (popupHeiht / 2)) + "px";
	var scrOfY = document.documentElement.scrollTop;
	containerStyle.top = scrOfY + 100 + "px";
	containerStyle.left = ((width / 2) - (popupWidth / 2)) + "px";

	containerStyle.width = popupWidth + "px";
	containerStyle.height = popupHeiht + "px";

	containerStyle.zIndex = 1001;
	containerStyle.position = "absolute";
	containerStyle.display = "block";
	containerStyle.paddingLeft = padding + "px";
	containerStyle.paddingTop = padding + "px";
	containerStyle.paddingRight = padding + "px";
	containerStyle.paddingBottom = padding + "px";
	containerStyle.backgroundColor = "#FFFFFF";

	var divMessage = document.createElement("div");
	var divTop = document.createElement("div");
	divTop.style.background = "url(img/popBar2Top.png) top center no-repeat";
	divTop.style.height = "6px";

	divMessage.appendChild(divTop);

	var divBody = document.createElement("div");
	divBody.style.background = "url(img/popBar2Tile.png) top left repeat-y";
	divBody.style.minHeight = "6px";
	divBody.style.padding = "10px";
	divBody.style.margin = "0px 0px 0px 9px";
	divBody.innerHTML = message;
	divMessage.appendChild(divBody);

	var divBottom = document.createElement("div");
	divBottom.style.background = "url(img/popBar2Bottom.png) top center no-repeat";
	divBottom.style.height = "6px";
	// divBottom.style.width = "362px";
	divMessage.appendChild(divBottom);

	divMessage.style.padding = "20px";
	divMessage.setAttribute("align", "left");

	divMessage.style.margin = "0px 0px 10px 0px";

	container.appendChild(divMessage);

	var divButton = document.createElement("div");
	divButton.setAttribute("align", "center");

	var yes = document.createElement("input");
	yes.setAttribute("type", "button");
	yes.setAttribute("value", "Yes");
	yes.setAttribute("id", "btnyes");

	var no = document.createElement("input");
	no.setAttribute("type", "button");
	no.setAttribute("value", "No");

	var span = document.createElement("span");
	span.innerHTML = " ";

	divButton.appendChild(yes);

	yes.onclick = function() {
		enablePage();
		redirect('removeinstructionpage.do?brochureId=' + brochureId);
	}

	divButton.appendChild(span);

	divButton.appendChild(no);

	no.onclick = function() {
		enablePage();
	}

	container.appendChild(divButton);
	document.getElementById("btnyes").focus();
}

// MESSAGE DIALOGE FOR REMOVE TAG

function showWarningTagDeleteMessage(message, tagId) {

	disablePage();

	var height = document.body.clientHeight;
	if (document.documentElement.scrollHeight > height) {
		height = document.documentElement.scrollHeight;
	}
	if (document.documentElement.clientHeight > height) {
		height = document.documentElement.clientHeight;
	}

	var width = document.body.clientWidth;
	if (document.documentElement.scrollWidth > width) {
		width = document.documentElement.scrollWidth;
	}

	if (document.documentElement.clientWidth) {
		width = document.documentElement.clientWidth;
	}

	var container = document.createElement('div');
	container.setAttribute("id", "containerPopup");
	document.body.appendChild(container);
	var containerStyle = document.getElementById('containerPopup').style;

	var padding = 10;
	var popupWidth = 420;
	var popupHeiht = 160;

	//containerStyle.top = ((height / 2) - (popupHeiht / 2)) + "px";
	containerStyle.top = window.pageYOffset + 100 + "px";
	containerStyle.left = ((width / 2) - (popupWidth / 2)) + "px";

	containerStyle.width = popupWidth + "px";
	containerStyle.height = popupHeiht + "px";

	containerStyle.zIndex = 1001;
	containerStyle.position = "absolute";
	containerStyle.display = "block";
	containerStyle.paddingLeft = padding + "px";
	containerStyle.paddingTop = padding + "px";
	containerStyle.paddingRight = padding + "px";
	containerStyle.paddingBottom = padding + "px";
	containerStyle.backgroundColor = "#FFFFFF";

	var divMessage = document.createElement("div");

	var divTop = document.createElement("div");
	divTop.style.background = "url(img/popBar2Top.png) top center no-repeat";
	divTop.style.height = "6px";

	divMessage.appendChild(divTop);

	var divBody = document.createElement("div");
	divBody.style.background = "url(img/popBar2Tile.png) top left repeat-y";
	divBody.style.minHeight = "6px";
	divBody.style.padding = "10px";
	divBody.style.margin = "0px 0px 0px 9px";
	divBody.innerHTML = message;
	divMessage.appendChild(divBody);

	var divBottom = document.createElement("div");
	divBottom.style.background = "url(img/popBar2Bottom.png) top center no-repeat";
	divBottom.style.height = "6px";
	// divBottom.style.width = "362px";
	divMessage.appendChild(divBottom);

	divMessage.style.padding = "20px";
	divMessage.setAttribute("align", "left");

	divMessage.style.margin = "0px 0px 10px 0px";

	container.appendChild(divMessage);

	var divButton = document.createElement("div");
	divButton.setAttribute("align", "center");
	var ok = document.createElement("input");
	ok.setAttribute("type", "button");
	ok.setAttribute("value", "OK");
	ok.focus();
	divButton.appendChild(ok);
	if (tagId == '') {

		ok.onclick = function() {
			enablePage();
		}
	} else {
		var cancel = document.createElement("input");
		cancel.setAttribute("type", "button");
		cancel.setAttribute("value", "Cancel");
		var span = document.createElement("span");
		span.innerHTML = " ";

		ok.onclick = function() {
			redirect('removetag.do?tagId=' + tagId);
			enablePage();
		}
		divButton.appendChild(span);

		divButton.appendChild(cancel);
		cancel.onclick = function() {
			enablePage();
		}

	}
	container.appendChild(divButton);
}

function enablePage() {
	var maskLayer = document.getElementById('maskLayer');
	if (maskLayer) {
		$('maskLayer').remove();
	}
	//REMOVE IFRAME FROM THE PAGE
	var iframe = document.getElementById('iframe');
	if (iframe) {
		$('iframe').remove();
	}
	var containerPopup = document.getElementById('containerPopup');
	if (containerPopup) {
		$('containerPopup').remove();
	}
}

function showWarningUpdateTitleMessage(message) {

	disablePage();

	var height = document.body.clientHeight;
	if (document.documentElement.scrollHeight > height) {
		height = document.documentElement.scrollHeight;
	}
	if (document.documentElement.clientHeight > height) {
		height = document.documentElement.clientHeight;
	}

	var width = document.body.clientWidth;
	if (document.documentElement.scrollWidth > width) {
		width = document.documentElement.scrollWidth;
	}

	if (document.documentElement.clientWidth) {
		width = document.documentElement.clientWidth;
	}

	var container = document.createElement('div');
	container.setAttribute("id", "containerPopup");
	document.body.appendChild(container);
	var containerStyle = document.getElementById('containerPopup').style;
	try {
		// for IE
		containerStyle = document.all.containerPopup.style;
	} catch (e) {
		containerStyle = document.getElementById('containerPopup').style;
	}
	var padding = 10;
	var popupWidth = 420;
	var popupHeiht = 160;

	//containerStyle.top = ((height / 2) - (popupHeiht / 2)) + "px";
	containerStyle.top = getYOffset() + 100 + "px";
	containerStyle.left = ((width / 2) - (popupWidth / 2)) + "px";

	containerStyle.width = popupWidth + "px";
	containerStyle.height = popupHeiht + "px";

	containerStyle.zIndex = 1001;
	containerStyle.position = "absolute";
	containerStyle.display = "block";
	containerStyle.paddingLeft = padding + "px";
	containerStyle.paddingTop = padding + "px";
	containerStyle.paddingRight = padding + "px";
	containerStyle.paddingBottom = padding + "px";
	containerStyle.backgroundColor = "#FFFFFF";

	var divMessage = document.createElement("div");

	var divTop = document.createElement("div");
	divTop.style.background = "url(img/popBar2Top.png) top center no-repeat";
	divTop.style.height = "6px";

	divMessage.appendChild(divTop);

	var divBody = document.createElement("div");
	divBody.style.background = "url(img/popBar2Tile.png) top left repeat-y";
	divBody.style.minHeight = "6px";
	divBody.style.padding = "10px";
	divBody.style.margin = "0px 0px 0px 9px";
	divBody.innerHTML = message;
	divMessage.appendChild(divBody);

	var divBottom = document.createElement("div");
	divBottom.style.background = "url(img/popBar2Bottom.png) top center no-repeat";
	divBottom.style.height = "6px";
	// divBottom.style.width = "362px";
	divMessage.appendChild(divBottom);

	divMessage.style.padding = "20px";
	divMessage.setAttribute("align", "left");

	divMessage.style.margin = "0px 0px 10px 0px";

	container.appendChild(divMessage);

	var divButton = document.createElement("div");
	divButton.setAttribute("align", "center");

	var yes = document.createElement("input");
	yes.setAttribute("type", "button");
	yes.setAttribute("value", "Yes");
	yes.style.width="50px";
	//yes.focus();

	var no = document.createElement("input");
	no.setAttribute("type", "button");
	no.setAttribute("value", "No");
	no.style.width="50px";

	var span = document.createElement("span");
	span.innerHTML = " ";

	divButton.appendChild(yes);

	yes.onclick = function() {
		enablePage();
		doUpdatePageCommand();
	}

	divButton.appendChild(span);

	divButton.appendChild(no);

	no.onclick = function() {
		enablePage();
	}

	container.appendChild(divButton);

}

function showFinalPublishWarningMessage(message) {
	disablePage();

	var height = document.body.clientHeight;
	if (document.documentElement.scrollHeight > height) {
		height = document.documentElement.scrollHeight;
	}
	if (document.documentElement.clientHeight > height) {
		height = document.documentElement.clientHeight;
	}

	var width = document.body.clientWidth;
	if (document.documentElement.scrollWidth > width) {
		width = document.documentElement.scrollWidth;
	}

	if (document.documentElement.clientWidth) {
		width = document.documentElement.clientWidth;
	}
	
	var container = document.createElement('div');
	container.setAttribute("id", "containerPopup");
	document.body.appendChild(container);
	var containerStyle = document.getElementById('containerPopup').style;

	var padding = 10;
	var popupWidth = 420;
	var popupHeiht = 175;
	
	//containerStyle.top = ((height / 2) - (popupHeiht / 2)) + "px";
	//containerStyle.top = window.pageYOffset + 100 + "px";
	var scrOfY = document.documentElement.scrollTop;
	containerStyle.top = scrOfY + 100 + "px";
	containerStyle.left = ((width / 2) - (popupWidth / 2)) + "px";

	containerStyle.width = popupWidth + "px";
	containerStyle.height = popupHeiht + "px";
	
	containerStyle.zIndex = 1001;
	containerStyle.position = "absolute";
	containerStyle.display = "block";
	containerStyle.paddingLeft = padding + "px";
	containerStyle.paddingTop = padding + "px";
	containerStyle.paddingRight = padding + "px";
	containerStyle.paddingBottom = padding + "px";
	containerStyle.backgroundColor = "#FFFFFF";

	var divButton = document.createElement("div");
	divButton.setAttribute("align", "right");
	divButton.style.top = "0px";

	var closeImg = document.createElement("img");
	closeImg.setAttribute("src", "css/images/close.png");
	closeImg.setAttribute("title", "Close");

	divButton.appendChild(closeImg);

	closeImg.onclick = function() {
		enablePage();
	}
	
	var divMessage = document.createElement("div");

	var divTop = document.createElement("div");
	divTop.style.background = "url(img/popBar2Top.png) top center no-repeat";
	divTop.style.height = "6px";

	divMessage.appendChild(divTop);

	var divBody = document.createElement("div");
	divBody.style.background = "url(img/popBar2Tile.png) top left repeat-y";
	divBody.style.minHeight = "6px";
	divBody.style.padding = "10px";
	divBody.style.margin = "0px 0px 0px 9px";
	divBody.innerHTML = message;
	divMessage.appendChild(divBody);

	var divBottom = document.createElement("div");
	divBottom.style.background = "url(img/popBar2Bottom.png) top center no-repeat";
	divBottom.style.height = "6px";
	divMessage.appendChild(divBottom);

	divMessage.style.padding = "20px";
	divMessage.style.paddingTop = "0px";
	divMessage.setAttribute("align", "left");

	divMessage.style.margin = "0px 0px 10px 0px";

	container.appendChild(divButton);
	container.appendChild(divMessage);

}

/**
 * Message to show to the user that they reach the limitation of the question
 */
function showQuestionLimitWarningMessage(message) {
    disablePage();

    var height = document.body.clientHeight;
    if (document.documentElement.scrollHeight > height) {
        height = document.documentElement.scrollHeight;
    }
    if (document.documentElement.clientHeight > height) {
        height = document.documentElement.clientHeight;
    }

    var width = document.body.clientWidth;
    if (document.documentElement.scrollWidth > width) {
        width = document.documentElement.scrollWidth;
    }

    if (document.documentElement.clientWidth) {
        width = document.documentElement.clientWidth;
    }

    var container = document.createElement('div');
    container.setAttribute("id", "containerPopup");
    document.body.appendChild(container);
    var containerStyle = document.getElementById('containerPopup').style;
    
	try {
		// for IE
		containerStyle = document.all.containerPopup.style;
	} catch (e) {
		containerStyle = document.getElementById('containerPopup').style;
	}

    var padding = 10;
    var popupWidth = 420;
    var popupHeiht = 175;

    //containerStyle.top = ((height / 2) - (popupHeiht / 2)) + "px";
	var scrOfY = document.documentElement.scrollTop;
    containerStyle.top = scrOfY + 100 + "px";
    containerStyle.left = ((width / 2) - (popupWidth / 2)) + "px";

    containerStyle.width = popupWidth + "px";
    containerStyle.height = popupHeiht + "px";

    containerStyle.zIndex = 1001;
    containerStyle.position = "absolute";
    containerStyle.display = "block";
    containerStyle.paddingLeft = padding + "px";
    containerStyle.paddingTop = padding + "px";
    containerStyle.paddingRight = padding + "px";
    containerStyle.paddingBottom = padding + "px";
    containerStyle.backgroundColor = "#FFFFFF";

    var divButton = document.createElement("div");
    divButton.setAttribute("align", "right");
    divButton.style.top = "0px";

    var closeImg = document.createElement("img");
    closeImg.setAttribute("src", "css/images/close.png");
    closeImg.setAttribute("title", "Close");

    divButton.appendChild(closeImg);

    closeImg.onclick = function() {
        enablePage();
    }

    var divMessage = document.createElement("div");

    var divTop = document.createElement("div");
    divTop.style.background = "url(img/popBar2Top.png) top center no-repeat";
    divTop.style.height = "6px";

    divMessage.appendChild(divTop);

    var divBody = document.createElement("div");
    divBody.style.background = "url(img/popBar2Tile.png) top left repeat-y";
    divBody.style.minHeight = "6px";
    divBody.style.padding = "10px";
    divBody.style.margin = "0px 0px 0px 9px";
    divBody.innerHTML = message;
    divMessage.appendChild(divBody);

    var divBottom = document.createElement("div");
    divBottom.style.background = "url(img/popBar2Bottom.png) top center no-repeat";
    divBottom.style.height = "6px";
    divMessage.appendChild(divBottom);

    divMessage.style.padding = "20px";
    divMessage.style.paddingTop = "0px";
    divMessage.setAttribute("align", "left");

    divMessage.style.margin = "0px 0px 10px 0px";

    container.appendChild(divButton);
    container.appendChild(divMessage);

}
 
function showDeleteColorSchemeMessage(colorSchemeId, userId, colorSchemeName) {
		new Ajax.Request('deleteColorScheme.json', {
	         method: 'post',
	         parameters: {'colorSchemeId': colorSchemeId,
			              'userId': userId},
	         onSuccess: function(transport) {	     		
	     		var json = transport.responseText.evalJSON(); 
	     		if(json.isDelete){
	     			showDeleteMessage('OK','Cancel',colorSchemeId);	
	     			var divText = document.getElementById('divBodyText');
	     			if(divText){
	     				divText.innerHTML = 'Do you want to delete "' + colorSchemeName + '" color scheme?';
	     				divText.style.textAlign='center';
	     			}
	        	}	        	 
	        	else{
	        		showDeleteMessage('OK','', colorSchemeId);
	        		
	        		var divText = document.getElementById('divBodyText');
	     			if(divText){
	     				divText.innerHTML = "Unable to delete color scheme. It's being used by the following applications:";
	     				divText.style.textAlign='left';
	     			}
	     			
	     			var ul = document.createElement('ul');
	     			divText.appendChild(ul);
	     			for(var i=0; i< json.brochuresusing.length; i++){	     				
	     				var li = document.createElement('li');	     				
	     				li.innerHTML = '<a href="newbrochure.html?brochureId='+json.brochureId[i]+'"><span>'+json.brochureTitle[i]+'</span></a>';
					    ul.appendChild(li);
	     			}
	     			
	     			var oldHeight = parseInt($('divMessageParent').offsetHeight);	     			
	     			var containerStyle = document.getElementById('containerPopup').style;
	     			containerStyle.height = oldHeight/2 + parseInt($(divText).offsetHeight) + "px";	     			
	        	}
	         }
	      });		

}

function showDeleteMessage(btOk,btCancel, itemId){
	disablePage();
	
	var height = document.body.clientHeight;
	if (document.documentElement.scrollHeight > height) {
		height = document.documentElement.scrollHeight;
	}
	if (document.documentElement.clientHeight > height) {
		height = document.documentElement.clientHeight;
	}

	var width = document.body.clientWidth;
	if (document.documentElement.scrollWidth > width) {
		width = document.documentElement.scrollWidth;
	}

	if (document.documentElement.clientWidth) {
		width = document.documentElement.clientWidth;
	}

	var container = document.createElement('div');
	container.setAttribute("id", "containerPopup");	     		
	document.body.appendChild(container);
	var containerStyle = document.getElementById('containerPopup').style;
	
	try {
		// for IE
		containerStyle = document.all.containerPopup.style;
	} catch (e) {
		containerStyle = document.getElementById('containerPopup').style;
	}
		
	var padding = 10;
	var popupWidth = 420;
	var popupHeiht = 140;

	//containerStyle.top = ((height / 2) - (popupHeiht / 2)) + "px";
	var scrOfY = document.documentElement.scrollTop;
	containerStyle.top = scrOfY + 100 + "px";
	containerStyle.left = ((width / 2) - (popupWidth / 2)) + "px";

	containerStyle.width = popupWidth + "px";
	containerStyle.height = popupHeiht + "px";

	containerStyle.zIndex = 1001;
	containerStyle.position = "absolute";
	containerStyle.display = "block";	     		
	containerStyle.paddingLeft = padding + "px";
	containerStyle.paddingTop = padding + "px";
	containerStyle.paddingRight = padding + "px";
	containerStyle.paddingBottom = padding + "px";
	containerStyle.backgroundColor = "#FFFFFF";

	var divMessage = document.createElement("div");
	divMessage.setAttribute("id", "divMessageParent");
	divMessage.style.padding = "20px";
	divMessage.setAttribute("align", "left");
	divMessage.style.margin = "0px 0px 10px 0px";

	var divTop = document.createElement("div");
	divTop.style.background = "url(img/popBar2Top.png) top center no-repeat";
	divTop.style.height = "6px";

	divMessage.appendChild(divTop);

	var divBody = document.createElement("div");
	divBody.setAttribute("id", "divBodyText");
	divBody.style.background = "url(img/popBar2Tile.png) top left repeat-y";
	divBody.style.minHeight = "6px";
	divBody.style.padding = "10px";
	divBody.style.margin = "0px 0px 0px 9px";	
	divMessage.appendChild(divBody);

	var divBottom = document.createElement("div");
	divBottom.style.background = "url(img/popBar2Bottom.png) top center no-repeat";
	divBottom.style.height = "6px";
	divMessage.appendChild(divBottom);
	
	container.appendChild(divMessage);

	var divButton = document.createElement("div");
	divButton.setAttribute("align", "center");

	var ok = document.createElement("input");
	ok.setAttribute("type", "button");	
	ok.setAttribute("value", btOk);
	
	divButton.appendChild(ok);
	container.appendChild(divButton);
	
	if(btCancel != ''){
		var cancel = document.createElement("input");
		cancel.setAttribute("type", "button");
		cancel.setAttribute("value", btCancel);
		divButton.appendChild(cancel);
		
		cancel.onclick = function() {
			enablePage();
		}
		
		ok.onclick = function() {
			redirect('colorschemes.html?colorSchemeId='+itemId+'&delete=true');
		}
	}
	else{		
		ok.onclick = function() {
			enablePage();
		}
	}		
			
}

function showWarningMessage(message) {

	disablePage();

	var height = document.body.clientHeight;
	if (document.documentElement.scrollHeight > height) {
		height = document.documentElement.scrollHeight;
	}
	if (document.documentElement.clientHeight > height) {
		height = document.documentElement.clientHeight;
	}

	var width = document.body.clientWidth;
	if (document.documentElement.scrollWidth > width) {
		width = document.documentElement.scrollWidth;
	}

	if (document.documentElement.clientWidth) {
		width = document.documentElement.clientWidth;
	}

	var container = document.createElement('div');
	container.setAttribute("id", "containerPopup");
	document.body.appendChild(container);
	var containerStyle = document.getElementById('containerPopup').style;
	
	try {
		// for IE
		containerStyle = document.all.containerPopup.style;
	} catch (e) {
		containerStyle = document.getElementById('containerPopup').style;
	}
	
	var padding = 10;
	var popupWidth = 420;
	var popupHeiht = 140;

	//containerStyle.top = ((height / 2) - (popupHeiht / 2)) + "px";
	var scrOfY = document.documentElement.scrollTop;
	containerStyle.top = scrOfY + 100 + "px";
	containerStyle.left = ((width / 2) - (popupWidth / 2)) + "px";

	containerStyle.width = popupWidth + "px";
	containerStyle.height = popupHeiht + "px";

	containerStyle.zIndex = 1001;
	containerStyle.position = "absolute";
	containerStyle.display = "block";
	containerStyle.paddingLeft = padding + "px";
	containerStyle.paddingTop = padding + "px";
	containerStyle.paddingRight = padding + "px";
	containerStyle.paddingBottom = padding + "px";
	containerStyle.backgroundColor = "#FFFFFF";

	var divMessage = document.createElement("div");

	var divTop = document.createElement("div");
	divTop.style.background = "url(img/popBar2Top.png) top center no-repeat";
	divTop.style.height = "6px";

	divMessage.appendChild(divTop);

	var divBody = document.createElement("div");
	divBody.style.background = "url(img/popBar2Tile.png) top left repeat-y";
	divBody.style.minHeight = "6px";
	divBody.style.padding = "10px";
	divBody.style.margin = "0px 0px 0px 9px";
	divBody.innerHTML = message;
	divMessage.appendChild(divBody);

	var divBottom = document.createElement("div");
	divBottom.style.background = "url(img/popBar2Bottom.png) top center no-repeat";
	divBottom.style.height = "6px";
	divMessage.appendChild(divBottom);

	divMessage.style.padding = "20px";
	divMessage.setAttribute("align", "left");

	divMessage.style.margin = "0px 0px 10px 0px";

	container.appendChild(divMessage);

	var divButton = document.createElement("div");
	divButton.setAttribute("align", "center");

	var ok = document.createElement("input");
	ok.setAttribute("type", "button");
	ok.setAttribute("value", "OK");
	//ok.focus();
	
	divButton.appendChild(ok);

	ok.onclick = function() {
		enablePage();
	}
	container.appendChild(divButton);

}

function showWarningCreateTitleMessage(message) {

	disablePage();

	var height = document.body.clientHeight;
	if (document.documentElement.scrollHeight > height) {
		height = document.documentElement.scrollHeight;
	}
	if (document.documentElement.clientHeight > height) {
		height = document.documentElement.clientHeight;
	}

	var width = document.body.clientWidth;
	if (document.documentElement.scrollWidth > width) {
		width = document.documentElement.scrollWidth;
	}

	if (document.documentElement.clientWidth) {
		width = document.documentElement.clientWidth;
	}
	
	var container = document.createElement('div');
	container.setAttribute("id", "containerPopup");
	document.body.appendChild(container);
	var containerStyle = document.getElementById('containerPopup').style;
	try {
		// for IE
		containerStyle = document.all.containerPopup.style;
	} catch (e) {
		containerStyle = document.getElementById('containerPopup').style;
	}
	
	var padding = 10;
	var popupWidth = 420;
	var popupHeiht = 160;

	//containerStyle.top = ((height / 2) - (popupHeiht / 2)) + "px";
	//containerStyle.top = window.pageYOffset + 100 + "px";
	containerStyle.top = getYOffset() + 100 + "px";
	containerStyle.left = ((width / 2) - (popupWidth / 2)) + "px";

	containerStyle.width = popupWidth + "px";
	containerStyle.height = popupHeiht + "px";

	containerStyle.zIndex = 1001;
	containerStyle.position = "absolute";
	containerStyle.display = "block";
	containerStyle.paddingLeft = padding + "px";
	containerStyle.paddingTop = padding + "px";
	containerStyle.paddingRight = padding + "px";
	containerStyle.paddingBottom = padding + "px";
	containerStyle.backgroundColor = "#FFFFFF";

	var divMessage = document.createElement("div");

	var divTop = document.createElement("div");
	divTop.style.background = "url(img/popBar2Top.png) top center no-repeat";
	divTop.style.height = "6px";

	divMessage.appendChild(divTop);

	var divBody = document.createElement("div");
	divBody.style.background = "url(img/popBar2Tile.png) top left repeat-y";
	divBody.style.minHeight = "6px";
	divBody.style.padding = "10px";
	divBody.style.margin = "0px 0px 0px 9px";
	divBody.innerHTML = message;
	divMessage.appendChild(divBody);

	var divBottom = document.createElement("div");
	divBottom.style.background = "url(img/popBar2Bottom.png) top center no-repeat";
	divBottom.style.height = "6px";
	divMessage.appendChild(divBottom);

	divMessage.style.padding = "20px";
	divMessage.setAttribute("align", "left");

	divMessage.style.margin = "0px 0px 10px 0px";

	container.appendChild(divMessage);

	var divButton = document.createElement("div");
	divButton.setAttribute("align", "center");

	var yes = document.createElement("input");
	yes.setAttribute("type", "button");
	yes.setAttribute("value", "Yes");
	yes.style.width="50px";
	// yes.focus();
	
	var no = document.createElement("input");
	no.setAttribute("type", "button");
	no.setAttribute("value", "No");
	no.style.width="50px";
		
	var span = document.createElement("span");
	span.innerHTML = " ";

	divButton.appendChild(yes);

	yes.onclick = function() {
		enablePage();
		doCreatePageCommand();
	}

	divButton.appendChild(span);

	divButton.appendChild(no);

	no.onclick = function() {
		enablePage();
	}
	container.appendChild(divButton);

}


function finalPublishConfirmationMessage(message) {

	disablePage();

	var height = document.body.clientHeight;
	if (document.documentElement.scrollHeight > height) {
		height = document.documentElement.scrollHeight;
	}
	if (document.documentElement.clientHeight > height) {
		height = document.documentElement.clientHeight;
	}

	var width = document.body.clientWidth;
	if (document.documentElement.scrollWidth > width) {
		width = document.documentElement.scrollWidth;
	}

	if (document.documentElement.clientWidth) {
		width = document.documentElement.clientWidth;
	}

	var container = document.createElement('div');
	container.setAttribute("id", "containerPopup");
	document.body.appendChild(container);
	var containerStyle = document.getElementById('containerPopup').style;

	var padding = 10;
	var popupWidth = 420;
	var popupHeiht = 160;

	//containerStyle.top = ((height / 2) - (popupHeiht / 2)) + "px";
	//containerStyle.top = window.pageYOffset + 100 + "px";
	var scrOfY = document.documentElement.scrollTop;
	containerStyle.top = scrOfY + 100 + "px";
	containerStyle.left = ((width / 2) - (popupWidth / 2)) + "px";

	containerStyle.width = popupWidth + "px";
	containerStyle.height = popupHeiht + "px";

	containerStyle.zIndex = 1001;
	containerStyle.position = "absolute";
	containerStyle.display = "block";
	containerStyle.paddingLeft = padding + "px";
	containerStyle.paddingTop = padding + "px";
	containerStyle.paddingRight = padding + "px";
	containerStyle.paddingBottom = padding + "px";
	containerStyle.backgroundColor = "#FFFFFF";

	var divMessage = document.createElement("div");

	var divTop = document.createElement("div");
	divTop.style.background = "url(img/popBar2Top.png) top center no-repeat";
	divTop.style.height = "6px";

	divMessage.appendChild(divTop);

	var divBody = document.createElement("div");
	divBody.style.background = "url(img/popBar2Tile.png) top left repeat-y";
	divBody.style.minHeight = "6px";
	divBody.style.padding = "10px";
	divBody.style.margin = "0px 0px 0px 9px";
	divBody.innerHTML = message;
	divMessage.appendChild(divBody);

	var divBottom = document.createElement("div");
	divBottom.style.background = "url(img/popBar2Bottom.png) top center no-repeat";
	divBottom.style.height = "6px";
	divMessage.appendChild(divBottom);

	divMessage.style.padding = "20px";
	divMessage.setAttribute("align", "left");

	divMessage.style.margin = "0px 0px 10px 0px";

	container.appendChild(divMessage);

	var divButton = document.createElement("div");
	divButton.setAttribute("align", "center");

	var yes = document.createElement("input");
	yes.setAttribute("type", "button");
	yes.setAttribute("value", "Yes");
	yes.focus();

	var no = document.createElement("input");
	no.setAttribute("type", "button");
	no.setAttribute("value", "No");

	var span = document.createElement("span");
	span.innerHTML = " ";

	divButton.appendChild(yes);

	yes.onclick = function() {
		enablePage();
		doPublishFinalBrochureCommand();
	}

	divButton.appendChild(span);

	divButton.appendChild(no);

	no.onclick = function() {
		enablePage();
	}

	container.appendChild(divButton);

}


function showWarningPublishMessage(message) {

	disablePage();

	var height = document.body.clientHeight;
	if (document.documentElement.scrollHeight > height) {
		height = document.documentElement.scrollHeight;
	}
	if (document.documentElement.clientHeight > height) {
		height = document.documentElement.clientHeight;
	}

	var width = document.body.clientWidth;
	if (document.documentElement.scrollWidth > width) {
		width = document.documentElement.scrollWidth;
	}

	if (document.documentElement.clientWidth) {
		width = document.documentElement.clientWidth;
	}

	var container = document.createElement('div');
	container.setAttribute("id", "containerPopup");
	document.body.appendChild(container);
	var containerStyle = document.getElementById('containerPopup').style;
	
	try {
		// for IE
		containerStyle = document.all.containerPopup.style;
	} catch (e) {
		containerStyle = document.getElementById('containerPopup').style;
	}

	var padding = 10;
	var popupWidth = 420;
	var popupHeiht = 190;

	//containerStyle.top = window.pageYOffset + 100 + "px";
	containerStyle.top = getYOffset() + 100 + "px";
	containerStyle.left = ((width / 2) - (popupWidth / 2)) + "px";

	containerStyle.width = popupWidth + "px";
	containerStyle.height = popupHeiht + "px";

	containerStyle.zIndex = 1001;
	containerStyle.position = "absolute";
	containerStyle.display = "block";
	containerStyle.paddingLeft = padding + "px";
	containerStyle.paddingTop = padding + "px";
	containerStyle.paddingRight = padding + "px";
	containerStyle.paddingBottom = padding + "px";
	containerStyle.backgroundColor = "#FFFFFF";

	var divMessage = document.createElement("div");

	var divTop = document.createElement("div");
	divTop.style.background = "url(img/popBar2Top.png) top center no-repeat";
	divTop.style.height = "6px";

	divMessage.appendChild(divTop);

	var divBody = document.createElement("div");
	divBody.style.background = "url(img/popBar2Tile.png) top left repeat-y";
	divBody.style.minHeight = "6px";
	divBody.style.padding = "10px";
	divBody.style.margin = "0px 0px 0px 9px";
	divBody.innerHTML = message;
	divMessage.appendChild(divBody);

	var divBottom = document.createElement("div");
	divBottom.style.background = "url(img/popBar2Bottom.png) top center no-repeat";
	divBottom.style.height = "6px";
	divMessage.appendChild(divBottom);

	divMessage.style.padding = "20px";
	divMessage.setAttribute("align", "left");

	divMessage.style.margin = "0px 0px 10px 0px";

	container.appendChild(divMessage);

	var divButton = document.createElement("div");
	divButton.setAttribute("align", "center");

	var yes = document.createElement("input");
	yes.setAttribute("type", "button");
	yes.setAttribute("value", "Yes");
	yes.style.width = '50px';
	//yes.focus();

	var no = document.createElement("input");
	no.setAttribute("type", "button");
	no.setAttribute("value", "No");
	no.style.width = '50px';
	
	var span = document.createElement("span");
	span.innerHTML = " ";

	divButton.appendChild(yes);

	yes.onclick = function() {
		enablePage();
		doGenerateBrochureCommand();
	}

	divButton.appendChild(span);

	divButton.appendChild(no);

	no.onclick = function() {
		enablePage();
	}

	container.appendChild(divButton);

}


function showWarningSubMenuMessage(message, updateTittle) {
    disablePage();

    var height = document.body.clientHeight;
    if (document.documentElement.scrollHeight > height) {
        height = document.documentElement.scrollHeight;
    }
    if (document.documentElement.clientHeight > height) {
        height = document.documentElement.clientHeight;
    }

    var width = document.body.clientWidth;
    if (document.documentElement.scrollWidth > width) {
        width = document.documentElement.scrollWidth;
    }

    if (document.documentElement.clientWidth) {
        width = document.documentElement.clientWidth;
    }

    var container = document.createElement('div');
    container.setAttribute("id", "containerPopup");
    document.body.appendChild(container);
    var containerStyle = document.getElementById('containerPopup').style;
    
    try {
        // for IE
        containerStyle = document.all.containerPopup.style;
    } catch (e) {
        containerStyle = document.getElementById('containerPopup').style;
    }

    var padding = 10;
    var popupWidth = 420;
    var popupHeiht = 190;

    //containerStyle.top = window.pageYOffset + 100 + "px";
    containerStyle.top = getYOffset() + 100 + "px";
    containerStyle.left = ((width / 2) - (popupWidth / 2)) + "px";

    containerStyle.width = popupWidth + "px";
    containerStyle.height = popupHeiht + "px";

    containerStyle.zIndex = 1001;
    containerStyle.position = "absolute";
    containerStyle.display = "block";
    containerStyle.paddingLeft = padding + "px";
    containerStyle.paddingTop = padding + "px";
    containerStyle.paddingRight = padding + "px";
    containerStyle.paddingBottom = padding + "px";
    containerStyle.backgroundColor = "#FFFFFF";

    var divMessage = document.createElement("div");

    var divTop = document.createElement("div");
    divTop.style.background = "url(img/popBar2Top.png) top center no-repeat";
    divTop.style.height = "6px";

    divMessage.appendChild(divTop);

    var divBody = document.createElement("div");
    divBody.style.background = "url(img/popBar2Tile.png) top left repeat-y";
    divBody.style.minHeight = "6px";
    divBody.style.padding = "10px";
    divBody.style.margin = "0px 0px 0px 9px";
    divBody.innerHTML = message;
    divMessage.appendChild(divBody);

    var divBottom = document.createElement("div");
    divBottom.style.background = "url(img/popBar2Bottom.png) top center no-repeat";
    divBottom.style.height = "6px";
    divMessage.appendChild(divBottom);

    divMessage.style.padding = "20px";
    divMessage.setAttribute("align", "left");

    divMessage.style.margin = "0px 0px 10px 0px";

    container.appendChild(divMessage);

    var divButton = document.createElement("div");
    divButton.setAttribute("align", "center");

    var yes = document.createElement("input");
    yes.setAttribute("type", "button");
    yes.setAttribute("value", "Yes");
    yes.style.width = '50px';
    //yes.focus();

    var no = document.createElement("input");
    no.setAttribute("type", "button");
    no.setAttribute("value", "No");
    no.style.width = '50px';
    
    var span = document.createElement("span");
    span.innerHTML = " ";

    divButton.appendChild(yes);

    yes.onclick = function() {
        enablePage();
        $('nosubmenu').value = 'true';
        if (updateTittle) {
            doUpdateTitleCommand();
        } else {
            doCreateTitleCommand();
        }
        
    }

    divButton.appendChild(span);

    divButton.appendChild(no);

    no.onclick = function() {
        enablePage();
    }

    container.appendChild(divButton);

}


/***
 * getYOffset
 * @return Y
 */
function getYOffset() {
	var pageY;
	if (typeof (window.pageYOffset) == 'number') {
		pageY = window.pageYOffset;
	} else {
		//For IE
		pageY = document.documentElement.scrollTop;
	}
	return pageY;
}
/**get Index count*/
function getIndexCount(list){
	var index = 0;
	var inputs = list.getElementsByTagName('input');
	for ( var i = 0; i < inputs.length; ++i) {
		if (inputs[i].name.substr(0, 6) == 'order_') {
			inputs[i].value = index++;
		}
	}
	return index;
}

function getIndexCountLinkCall(list){
    var index = 0;
    var inputs = list.getElementsByTagName('input');
    for ( var i = 0; i < inputs.length; ++i) {
        if (inputs[i].name.substr(0, 7) == 'order1_') {
            inputs[i].value = index++;
        }
    }
    return index;
}

function showAddPopup(con, type) {
	count = getIndexCount($('pagelist'));//get indexCount
	var height = document.body.clientHeight;
	if (document.documentElement.scrollHeight > height) {
		height = document.documentElement.scrollHeight;
	}
	if (document.documentElement.clientHeight > height) {
		height = document.documentElement.clientHeight;
	}

	var width = document.body.clientWidth;
	if (document.documentElement.scrollWidth > width) {
		width = document.documentElement.scrollWidth;
	}
	if (document.documentElement.clientWidth) {
		width = document.documentElement.clientWidth;
	}

	var newimageselect = document.createElement('select');
	newimageselect.id = 'image_id_' + count;
	newimageselect.name = newimageselect.id;
	newimageselect.style.maxWidth = "350px";
	var fullName;
	var name;
	var ext;
	var icon;
	for ( var i = 0; i < userimages.length; ++i) {
		var newoption = document.createElement('option');
		newoption.value = userimages[i].id;
		fullName = userimages[i].name;
		name = fullName.substring(0, fullName.length - 4);
		ext = fullName.substring(fullName.length - 4);
		icon = "files/" + name + "_icon" + ext;
		newoption.style.background = "url(" + icon + ") no-repeat";
		newoption.style.paddingLeft = "20px";
		if (userimages[i].mediaType != '' && userimages[i].imageName != '')
			newoption.appendChild(document
					.createTextNode(userimages[i].imageName + "_"
							+ userimages[i].mediaType));
		else
			newoption.appendChild(document
					.createTextNode(userimages[i].realname));
		newimageselect.appendChild(newoption);
	}

	var container = document.createElement('div');
	container.setAttribute("id", "containerPopup");
	document.body.appendChild(container);
	var containerStyle = document.getElementById('containerPopup').style;
	try {
		//for IE
		containerStyle = document.all.containerPopup.style;
	} catch (e) {
		containerStyle = document.getElementById('containerPopup').style;
	}

	var padding = 10;
	var popupWidth = 500;
	var popupHeiht = 250;

	//containerStyle.top = window.pageYOffset + 100 + "px";
	containerStyle.top = getYOffset() + 100 + "px";
	containerStyle.left = ((width / 2) - (popupWidth / 2)) + "px";

	containerStyle.width = popupWidth + "px";
	containerStyle.height = popupHeiht + "px";

	containerStyle.zIndex = 1001;
	containerStyle.position = "absolute";
	containerStyle.display = "block";
	containerStyle.paddingLeft = padding + "px";
	containerStyle.paddingTop = padding + "px";
	containerStyle.paddingRight = padding + "px";
	containerStyle.paddingBottom = padding + "px";
	containerStyle.backgroundColor = "#FFFFFF";

	var leftWidth = 50;
	var rightWidth = popupWidth - (padding * 2) - leftWidth;

	var table = document.createElement('table');
	table.setAttribute('border', '0');

	var row0 = document.createElement('tr');
	var mythead0 = document.createElement("thead"); //For IE
	mythead0.appendChild(row0);
	table.appendChild(mythead0);

	row0.setAttribute('valign', 'top');

	var col01 = document.createElement('td');
	col01.style.width = leftWidth + "px";
	// Bullet is default value
	col01.innerHTML = "Bullet";
	row0.appendChild(col01);

	var col02 = document.createElement('td');
	col02.setAttribute('valign', 'top');
	col02.appendChild(newimageselect);

	var browseButton = document.createElement('input');
	browseButton.setAttribute("title", "Browse Images");
	browseButton.setAttribute("type", "button");
	browseButton.setAttribute("value", "Browse");
	browseButton.onclick = function() {
		expandingImage(newimageselect);
	}

	col02.appendChild(browseButton);

	/*var tmpImage = document.createElement('img');
	tmpImage.style.width = "50px";
	tmpImage.setAttribute('alt','');
	col02.appendChild(tmpImage);*/
	/*
	 * newimageselect.onchange = function() { tmpImage.src = 'files/' +
	 * $F(newimageselect); }
	 */

	row0.appendChild(col02);

	var row1 = document.createElement('tr');
	var mythead1 = document.createElement("thead");
	mythead1.appendChild(row1);
	table.appendChild(mythead1);

	row1.setAttribute('valign', 'top');
	var col11 = document.createElement('td');
	col11.style.width = leftWidth + "px";
	// Text is default value	
	col11.innerHTML = "Text";
	row1.appendChild(col11);
	var col12 = document.createElement('td');
	var tmpInputText = document.createElement('textarea');
	tmpInputText.style.width = rightWidth + "px";
	tmpInputText.style.height = 150 + "px";
	tmpInputText.style.resize="none";
	tmpInputText.style.color = "#6E6E6E";
	// Check Link or Call for display default value
	/**
	 * type == 1 is Hyperlink
	 * type == 2 is call
	 * type == 3 sms
	 */
	if(type == 1){
		tmpInputText.value = "Hyperlink";		
	}
	else if( type == 2){
		tmpInputText.value = "Click to Call";
	} else if (type ==3) {
		tmpInputText.style.height = 40 + "px"; //reduce the size
		tmpInputText.value = "Click to sms";
	}
	tmpInputText.onclick = function() {
		
	}
	tmpInputText.onfocus = function() {
		//tmpInputText.focus();
		tmpInputText.select();
	}
	tmpInputText.onkeypress = function() {
		tmpInputText.style.color = "#000000";
	}

	col12.appendChild(tmpInputText);
	row1.appendChild(col12);	
	
	/**
	 * Body Text
	 * type == sms 3
	 * */
	if (type == 3) {
		var rowBody = document.createElement('tr');
		var mytheadBody = document.createElement("thead");
		mytheadBody.appendChild(rowBody);
		table.appendChild(mytheadBody);
		var col41 = document.createElement('td');
		// Link is default value
		col41.innerHTML = "Body Text";
		rowBody.appendChild(col41);
		var col42 = document.createElement('td');
		var tmpBodyText = document.createElement('textarea');
		tmpBodyText.style.width = rightWidth + "px";
		tmpBodyText.style.height = 150 + "px";
		tmpBodyText.style.color = "#6E6E6E";
		tmpBodyText.style.resize="none";
		tmpBodyText.value = "Text Message";
		col42.appendChild(tmpBodyText);
		rowBody.appendChild(col42);
		
		tmpBodyText.onclick = function() {
			//tmpBodyText.focus();
			tmpBodyText.select();		
		}
		tmpBodyText.onclick = function() {
		}
		tmpBodyText.onkeypress = function() {
			tmpBodyText.style.color = "#000000";
		}	
		
		//enlarge the size container
		containerStyle.height = popupHeiht + 60 + "px";
	}
	
	var row2 = document.createElement('tr');
	var mythead2 = document.createElement("thead");
	mythead2.appendChild(row2);
	table.appendChild(mythead2);
	var col21 = document.createElement('td');
	// Link is default value
	col21.innerHTML = "Link";
	row2.appendChild(col21);
	var col22 = document.createElement('td');
	var tmpInputLink = document.createElement('input');
	tmpInputLink.setAttribute('type', 'text');
	tmpInputLink.style.width = rightWidth + "px";
	/** link or click to call and sms
	 * type == 1 is Hyperlink
	 * type == 2 is call
	 * type == 3 sms;
	 * */

	if (type == 1) {
		tmpInputLink.value = "http://";
	} else if (type ==2){
		tmpInputLink.value = "call:";
	}else if (type ==3) {
		tmpInputLink.value = "sms:";
	}
	col22.appendChild(tmpInputLink);
	row2.appendChild(col22);

	var row3 = document.createElement('tr');
	//For IE it need Thead
	var mythead3 = document.createElement("thead");
	mythead3.appendChild(row3);
	table.appendChild(mythead3);

	//table.appendChild(row3);
	var col31 = document.createElement('td');
	row3.appendChild(col31);

	var col32 = document.createElement('td');
	row3.appendChild(col32);

	var okButton = document.createElement('input');
	okButton.setAttribute('type', 'button');
	okButton.setAttribute('value', 'OK');
	okButton.onclick = function() {

		var li = document.createElement('li');
		li.setAttribute('id', 'li_' + count);

		var newfields = document.createElement('span');
		newfields.style.padding = "5px 10px 5px 0px";

		var label = document.createElement('label');
		label.innerHTML = $F(tmpInputText);
		newfields.appendChild(label);

		var inputOrder = document.createElement('input');
		inputOrder.setAttribute('type', 'hidden');
		inputOrder.value = count;
		inputOrder.setAttribute('name', 'order_' + count);
		inputOrder.setAttribute('id', 'order_' + count);
		newfields.appendChild(inputOrder);

		var inputImage = document.createElement('input');
		inputImage.setAttribute('type', 'hidden');
		inputImage.value = $F(newimageselect);
		inputImage.setAttribute('name', 'bullet_' + count);
		inputImage.setAttribute('id', 'bullet_' + count);
		newfields.appendChild(inputImage);

		var inputText = document.createElement('input');
		inputText.setAttribute('type', 'hidden');
		inputText.value = $F(tmpInputText);
		inputText.setAttribute('name', 'text_' + count);
		inputText.setAttribute('id', 'text_' + count);
		newfields.appendChild(inputText);

		var inputLink = document.createElement('input');
		inputLink.setAttribute('type', 'hidden');
		inputLink.value = $F(tmpInputLink);
		inputLink.setAttribute('name', 'link_' + count);
		inputLink.setAttribute('id', 'link_' + count);
		newfields.appendChild(inputLink);
		
		/**
		 * click OK
		 * add sms
		 * body text message
		 * */
		if (type ==3) {
			var inputBodyMsg = document.createElement('input');
			inputBodyMsg.setAttribute('type', 'hidden');
			inputBodyMsg.value = $F(tmpBodyText);
			inputBodyMsg.setAttribute('name', 'body_' + count);
			inputBodyMsg.setAttribute('id', 'body_' + count);
			newfields.appendChild(inputBodyMsg);
			
		}	

		li.appendChild(newfields);

		var newcontrols = document.createElement('span');
		newcontrols.className = 'controls';

		var newupbutton = document.createElement('img');
		newupbutton.src = 'img/arrow_up.png';
		newupbutton.alt = newupbutton.title = 'Move Up';
		newupbutton.id = 'upbutton_' + count;
		newupbutton.onclick = function() {
			var ul = $('pagelist');
			moveListRowUp(ul, li);
			updatePreviewLinkCall();
		}
		newcontrols.appendChild(newupbutton);

		var newdownbutton = document.createElement('img');
		newdownbutton.src = 'img/arrow_down.png';
		newdownbutton.alt = newdownbutton.title = 'Move Down';
		newdownbutton.id = 'downbutton_' + count;
		newdownbutton.onclick = function() {
			var ul = $('pagelist');
			moveListRowDown(ul, li);
			updatePreview();
		}
		newcontrols.appendChild(newdownbutton);

		var newtopbutton = document.createElement('img');
		newtopbutton.src = 'img/top.png';
		newtopbutton.alt = newtopbutton.title = 'Move Top';
		newtopbutton.id = 'topbutton_' + count;
		newtopbutton.onclick = function() {
			var ul = $('pagelist');
			moveListRowTop(ul, li);
			updatePreview();
		}
		newcontrols.appendChild(newtopbutton);

		var newbottombutton = document.createElement('img');
		newbottombutton.src = 'img/bottom.png';
		newbottombutton.alt = newbottombutton.title = 'Move Bottom';
		newbottombutton.id = 'bottombutton_' + count;
		newbottombutton.onclick = function() {
			var ul = $('pagelist');
			moveListRowBotton(ul, li);
			updatePreview();
		}
		newcontrols.appendChild(newbottombutton);

		var newremovebutton = document.createElement('img');
		newremovebutton.src = 'img/bin_closed.png';
		newremovebutton.alt = newremovebutton.title = 'Remove';
		newremovebutton.id = 'removebutton_' + count;
		newremovebutton.onclick = function() {
			$(li).remove();
			var ul = $('pagelist');
			resetListOrder(ul);
			updatePreview();
		}
		newcontrols.appendChild(newremovebutton);

		var newremovebutton = document.createElement('img');
		newremovebutton.src = 'img/design.png';
		newremovebutton.alt = newremovebutton.title = 'Edit';
		newremovebutton.id = 'editbutton_' + count;
		newremovebutton.onclick = function() {
			disablePage();
			if (type ==3) { //sms
				showEditPopup(label, inputImage, inputText, inputLink, inputBodyMsg, 3, count);
			}else if (type == 4) {
			     showEditPopup("", inputImage, "", inputLink, "", 4, count);
			} else {
			     showEditPopup(label, inputImage, inputText, inputLink, count);
			}
		}
		newcontrols.appendChild(newremovebutton);
		li.appendChild(newcontrols);

		con.appendChild(li);
		count++;
		updatePreview();
		enablePage();
	}
	col32.appendChild(okButton);

	var cancelButton = document.createElement('input');
	cancelButton.setAttribute('type', 'button');
	cancelButton.setAttribute('value', 'Cancel');
	cancelButton.onclick = function() {
		enablePage();
		newimageselect
	}
	col32.appendChild(cancelButton);

	container.appendChild(table);
}

function showAddPopupSoundBoard(con) {	
	count = getIndexCount($('pagelist'));//get indexCount
	var height = document.body.clientHeight;
	if (document.documentElement.scrollHeight > height) {
		height = document.documentElement.scrollHeight;
	}
	if (document.documentElement.clientHeight > height) {
		height = document.documentElement.clientHeight;
	}

	var width = document.body.clientWidth;
	if (document.documentElement.scrollWidth > width) {
		width = document.documentElement.scrollWidth;
	}
	if (document.documentElement.clientWidth) {
		width = document.documentElement.clientWidth;
	}

	var newimageselect = document.createElement('select');
	newimageselect.id = 'image_id_' + count;
	newimageselect.name = newimageselect.id;
	newimageselect.style.width = getComboWidth() + 'px';
	//newimageselect.style.maxWidth = '350px';
	var fullName;
	var name;
	var ext;
	var icon;
	for ( var i = 0; i < userimages.length; ++i) {
		var newoption = document.createElement('option');
		newoption.value = userimages[i].id;
		fullName = userimages[i].name;
		name = fullName.substring(0, fullName.length - 4);
		ext = fullName.substring(fullName.length - 4);
		icon = "files/" + name + "_icon" + ext;
		newoption.style.background = "url(" + icon + ") no-repeat";
		newoption.style.paddingLeft = "20px";
		if (userimages[i].mediaType != '' && userimages[i].imageName != '')
			newoption.appendChild(document
					.createTextNode(userimages[i].imageName + "_"
							+ userimages[i].mediaType));
		else
			newoption.appendChild(document
					.createTextNode(userimages[i].realname));
		newimageselect.appendChild(newoption);
	}

	var soundImage = document.createElement('input');
	soundImage.setAttribute("type", "hidden");
	soundImage.id = "sound_image_id_"+count;
	soundImage.name = soundImage.id;
	
	newimageselect.onchange = function () {
		soundImage.value = newimageselect.value;
	}
	
	var container = document.createElement('div');
	container.setAttribute("id", "containerPopup");
	document.body.appendChild(container);

	var containerStyle = document.getElementById('containerPopup').style;
	
	try {
		//for IE
		containerStyle = document.all.containerPopup.style;
	} catch (e) {
		containerStyle = document.getElementById('containerPopup').style;
	}

	var padding = 10;
	var popupWidth = 500;
	var popupHeiht = 250;

	containerStyle.top = getYOffset() + 100 + "px";
	containerStyle.left = ((width / 2) - (popupWidth / 2)) + "px";

	containerStyle.width = popupWidth + "px";
	containerStyle.height = popupHeiht + "px";

	containerStyle.zIndex = 1001;
	containerStyle.position = "absolute";
	containerStyle.display = "block";
	containerStyle.paddingLeft = padding + "px";
	containerStyle.paddingTop = padding + "px";
	containerStyle.paddingRight = padding + "px";
	containerStyle.paddingBottom = padding + "px";
	containerStyle.backgroundColor = "#FFFFFF";
	containerStyle.border = "none";

	var leftWidth = 50;
	var rightWidth = popupWidth - (padding * 2) - leftWidth;

	var table = document.createElement('table');
	table.setAttribute('border', '0');

	var row0 = document.createElement('tr');
	row0.setAttribute('valign', 'top');

	var col01 = document.createElement('td');
	col01.style.width = leftWidth + "px";
	//Default value
	col01.innerHTML = "Bullet";
	row0.appendChild(col01);

	var col02 = document.createElement('td');
	col02.setAttribute('valign', 'top');
	col02.appendChild(newimageselect);
	col02.appendChild(soundImage);

	var browseButton = document.createElement('input');
	browseButton.setAttribute("title", "Browse Images");
	browseButton.setAttribute("type", "button");
	browseButton.setAttribute("value", "Browse");
	browseButton.onclick = function() {
		var index =  newimageselect.id.substring(9);
		expandingImage(newimageselect, 12, index);
	}
	
	col02.appendChild(browseButton);

	//var tmpImage = document.createElement('img');
	//tmpImage.style.width = "50px";
	//col02.appendChild(tmpImage);
	/*
	 * newimageselect.onchange = function() { tmpImage.src = 'files/' +
	 * $F(newimageselect); }
	 */
	
	row0.appendChild(col02);
	//table.appendChild(row0);

	var mythead0 = document.createElement("thead"); //For IE
	mythead0.appendChild(row0);
	table.appendChild(mythead0);
	

	var row1 = document.createElement('tr');
	row1.setAttribute('valign', 'top');
	var col11 = document.createElement('td');
	col11.style.width = leftWidth + "px";
	//Default value	
	col11.innerHTML = "Text";
	row1.appendChild(col11);
	var col12 = document.createElement('td');
	var tmpInputText = document.createElement('textarea');
	tmpInputText.style.width = rightWidth + "px";
	tmpInputText.style.height = 150 + "px";
	tmpInputText.style.resize="none";
	col12.appendChild(tmpInputText);
	row1.appendChild(col12);
	
	//table.appendChild(row1);
	var mythead1 = document.createElement("thead"); //For IE
	mythead1.appendChild(row1);
	table.appendChild(mythead1);

	var row2 = document.createElement('tr');
	var col21 = document.createElement('td');
	//Default value	
	col21.innerHTML = "Sound";
	row2.appendChild(col21);
	var col22 = document.createElement('td');
	// var tmpInputLink = document.createElement('input');
	// tmpInputLink.setAttribute('type', 'text');
	// tmpInputLink.style.width = rightWidth + "px";

	var newaudioselect = document.createElement('select');
	newaudioselect.id = 'audio_id_' + count;
	newaudioselect.name = newaudioselect.id;
	for ( var i = 0; i < useraudios.length; ++i) {
		var newoption = document.createElement('option');
		newoption.value = useraudios[i].id;
		newoption.appendChild(document.createTextNode(useraudios[i].realname));
		newaudioselect.appendChild(newoption);
	}
	col22.appendChild(newaudioselect);
	// col22.appendChild(tmpInputLink);
	row2.appendChild(col22);
	//table.appendChild(row2);
	var mythead2 = document.createElement("thead"); //For IE
	mythead2.appendChild(row2);
	table.appendChild(mythead2);

	var row3 = document.createElement('tr');
	//table.appendChild(row3);
	var mythead3 = document.createElement("thead"); //For IE
	mythead3.appendChild(row3);
	table.appendChild(mythead3);
	
	var col31 = document.createElement('td');
	row3.appendChild(col31);

	var col32 = document.createElement('td');
	row3.appendChild(col32);

	var okButton = document.createElement('input');
	okButton.setAttribute('type', 'button');
	okButton.setAttribute('value', 'OK');
	okButton.onclick = function() {
		if ($F(newaudioselect)==-1) {
			alert("Please choose sound!");
			return;
		}
		
		var li = document.createElement('li');
		li.setAttribute('id', 'lii_' + count);

		var newfields = document.createElement('span');
		newfields.style.padding = "5px 10px 5px 0px";
		
		var label = document.createElement('label');
		label.innerHTML = $F(tmpInputText);
		newfields.appendChild(label);
		
		var inputRowId = document.createElement('input');
		inputRowId.setAttribute('type', 'hidden');
		inputRowId.setAttribute('name', 'rowid_' + count);
		inputRowId.setAttribute('id', 'rowid_' + count);
		newfields.appendChild(inputRowId);

		var inputOrder = document.createElement('input');
		inputOrder.setAttribute('type', 'hidden');
		inputOrder.value = count;
		inputOrder.setAttribute('name', 'order_' + count);
		inputOrder.setAttribute('id', 'order_' + count);
		newfields.appendChild(inputOrder);

		var inputImage = document.createElement('input');
		inputImage.setAttribute('type', 'hidden');
		inputImage.value = $F(soundImage);
		inputImage.setAttribute('name', 'bullet_' + count);
		inputImage.setAttribute('id', 'bullet_' + count);
		newfields.appendChild(inputImage);

		var inputText = document.createElement('input');
		inputText.setAttribute('type', 'hidden');
		inputText.value = $F(tmpInputText);
		inputText.setAttribute('name', 'text_' + count);
		inputText.setAttribute('id', 'text_' + count);
		newfields.appendChild(inputText);

		var inputAudio = document.createElement('input');
		inputAudio.setAttribute('type', 'hidden');
		inputAudio.value = $F(newaudioselect);
		inputAudio.setAttribute('name', 'audio_' + count);
		inputAudio.setAttribute('id', 'audio_' + count);
		newfields.appendChild(inputAudio);
		
		var inputBold = document.createElement('input');
        inputBold.setAttribute('type', 'hidden');
        inputBold.value = 0;
        inputBold.setAttribute('name', 'soundboard_bold_' + count);
        inputBold.setAttribute('id', 'soundboard_bold_' + count);
        newfields.appendChild(inputBold);
        
        var inputItalic = document.createElement('input');
        inputItalic.setAttribute('type', 'hidden');
        inputItalic.value = 0;
        inputItalic.setAttribute('name', 'soundboard_italic_' + count);
        inputItalic.setAttribute('id', 'soundboard_italic_' + count);
        newfields.appendChild(inputItalic);

		li.appendChild(newfields);

		var newcontrols = document.createElement('span');
		newcontrols.className = 'controls';
		
		var newboldbutton=document.createElement('img');
        newboldbutton.src ='css/tino/bold-hover.png';
        newboldbutton.alt = newboldbutton.title = 'Bold';
        newboldbutton.id = 'soundboard_boldbutton_' + count;
        newboldbutton.style.width='17px';
        newboldbutton.style.height='17px';
        //newboldbutton.style.marginLeft ='5px';
        newboldbutton.style.marginRight ='9px';
        newcontrols.appendChild(newboldbutton);
        newboldbutton.onclick = function(){
            var newTextView = $F(inputText);
            if($F(inputBold) == 1){
                newTextView = newTextView.replace("<b>","");
                newTextView = newTextView.replace("</b>","");
                inputBold.value= 0;
                newboldbutton.src ='css/tino/bold-hover.png';
            }
            else{
                newTextView = "<b>" + newTextView + "</b>"
                inputBold.value= 1;
                newboldbutton.src ='css/tino/bold.png';
            }
            inputText.value = newTextView;
            label.innerHTML = newTextView;
            updateEmulatorSoundSection();
            
        }
        var newitalicbutton=document.createElement('img');
        newitalicbutton.src ='css/tino/italic-hover.png';
        newitalicbutton.alt = newboldbutton.title = 'Italic';
        newitalicbutton.id = 'soundboard_italicbutton_' + count;
        newitalicbutton.style.width='17px';
        newitalicbutton.style.height='17px';
        newcontrols.appendChild(newitalicbutton);
        newitalicbutton.onclick = function(){
            var newTextView = $F(inputText);
            if($F(inputItalic) == 1){
                newTextView = newTextView.replace("<i>","");
                newTextView = newTextView.replace("</i>","");
                inputItalic.value= 0;
                newitalicbutton.src ='css/tino/italic-hover.png';
            }
            else{
                newTextView = "<i>" + newTextView + "</i>"
                inputItalic.value= 1;
                newitalicbutton.src ='css/tino/italic.png';
            }
            inputText.value = newTextView;
            label.innerHTML = newTextView;
            updateEmulatorSoundSection();
            
        }
		
		//ruler color block
		rulerColorBlockButtonCall(count, newcontrols, 'sound', 'none');

		var newupbutton = document.createElement('img');
		newupbutton.src = 'img/arrow_up.png';
		newupbutton.alt = newupbutton.title = 'Move Up';
		newupbutton.id = 'upbutton_' + count;
		newupbutton.onclick = function() {
			var ul = $('pagelist');
			moveListRowUp(ul, li);
			updateEmulatorSoundSection();
		}
		newcontrols.appendChild(newupbutton);

		var newdownbutton = document.createElement('img');
		newdownbutton.src = 'img/arrow_down.png';
		newdownbutton.alt = newdownbutton.title = 'Move Down';
		newdownbutton.id = 'downbutton_' + count;
		newdownbutton.onclick = function() {
			var ul = $('pagelist');
			moveListRowDown(ul, li);
			updateEmulatorSoundSection();
		}
		newcontrols.appendChild(newdownbutton);
		
		var newtopbutton = document.createElement('img');
		newtopbutton.src = 'img/top.png';
		newtopbutton.alt = newtopbutton.title = 'Move Top';
		newtopbutton.id = 'topbutton_' + count;
		newtopbutton.onclick = function() {
			var ul = $('pagelist');
			moveListRowTop(ul, li);
			updateEmulatorSoundSection();
		}
		newcontrols.appendChild(newtopbutton);
		
		var newbottombutton = document.createElement('img');
		newbottombutton.src = 'img/bottom.png';
		newbottombutton.alt = newbottombutton.title = 'Move Bottom';
		newbottombutton.id = 'bottombutton_' + count;
		newbottombutton.onclick = function() {
			var ul = $('pagelist');
			moveListRowBotton(ul, li);
			updateEmulatorSoundSection();
		}
		newcontrols.appendChild(newbottombutton);		
		
		// paly			
		var playLinkControl = document.createElement('span');
		playLinkControl.className = 'controls';

		var playLink = document.createElement('img');
		playLink.style.display = 'none';
		playLink.src = 'img/play.png';
		playLink.alt = ' Preview  ';
		playLink.title = 'Preview';
		playLink.id = 'paly_' + count;
		playLink.className='buttonOver';		
		
		// if not sound apply
		if ($F(newaudioselect) != -1){
			playLink.style.display = 'inline';
			playLink.onclick = function() {
				redirect("files/"+$F(newaudioselect));
			}	
		}
		
		playLinkControl.appendChild(playLink);
		li.appendChild(playLinkControl);

		var newremovebutton = document.createElement('img');
		newremovebutton.src = 'img/bin_closed.png';
		newremovebutton.alt = newremovebutton.title = 'Remove';
		newremovebutton.id = 'removebutton_' + count;
		
		newremovebutton.onclick = function() {
			$(li).remove();
			var ul = $('pagelist');
			resetListOrder(ul);
			
			updateEmulatorSoundSection();
		}
		newcontrols.appendChild(newremovebutton);
		
		var neweditbutton = document.createElement('img');
		neweditbutton.src = 'img/design.png';
		neweditbutton.alt = neweditbutton.title = 'Edit';
		neweditbutton.id = 'editbutton_' + count;
		neweditbutton.onclick = function() {
			disablePage();
			showEditPopupSoundBoard(label, inputImage, inputText, inputAudio, playLink);
		}
		newcontrols.appendChild(neweditbutton);		
		
		li.appendChild(newcontrols);

		con.appendChild(li);
		count++;
		updateEmulatorSoundSection();
		enablePage();
	}
	col32.appendChild(okButton);

	var cancelButton = document.createElement('input');
	cancelButton.setAttribute('type', 'button');
	cancelButton.setAttribute('value', 'Cancel');
	cancelButton.onclick = function() {
		enablePage();
	}
	col32.appendChild(cancelButton);

	container.appendChild(table);
}

function removeSoundVideoRow(index){
	//removed all
	var litag = document.getElementById('lii_' + index);
	if(litag){
		$('lii_' + index).remove();
	}
}

function findLastIndexOfPagelist(){
	var pagelist = $('pagelist').getElementsByTagName('li');
	var indexId = 0;
	
	for ( var i = 0; i < pagelist.length; ++i) {
		var inputs = pagelist[i].getElementsByTagName('input');		
		
		var bulletId = '';
		for ( var j = 0; j < inputs.length; ++j) {
			if (inputs[j].name.indexOf('bullet') > -1) {
				bulletId = inputs[j].id;
				break;
			}
		}
		
		if(bulletId != ''){
			indexId = parseInt(bulletId.replace('bullet_',''));	
		}
	}
	
	return indexId;
}

function showEditPopup(label, inputImage, inputText, inputLink, bodyText, type, editbuttonid) {
    var isImageLink = false;
    if (type != undefined && type == 4) {
        isImageLink = true;
        bodyText = undefined;
    }
	var height = document.body.clientHeight;
	if (document.documentElement.scrollHeight > height) {
		height = document.documentElement.scrollHeight;
	}
	if (document.documentElement.clientHeight > height) {
		height = document.documentElement.clientHeight;
	}

	var width = document.body.clientWidth;
	if (document.documentElement.scrollWidth > width) {
		width = document.documentElement.scrollWidth;
	}
	if (document.documentElement.clientWidth) {
		width = document.documentElement.clientWidth;
	}

	var newimageselect = document.createElement('select');
	newimageselect.id = 'image_id_' + count;
	newimageselect.name = newimageselect.id;
	newimageselect.style.width = getComboWidth() + "px";
	//newimageselect.style.maxWidth = "350px";
	var fullName;
	var name;
	var ext;
	var icon;
	if(type != 4){
		for ( var i = 0; i < userimages.length; ++i) {
			var newoption = document.createElement('option');
			if ($F(inputImage) == userimages[i].id) {
				newoption.setAttribute('selected', 'selected');
			}
			newoption.value = userimages[i].id;
			newoption.setAttribute("tagId", userimages[i].tagId);
			fullName = userimages[i].name;
			name = fullName.substring(0, fullName.length - 4);
			ext = fullName.substring(fullName.length - 4);
			icon = "files/" + name + "_icon" + ".png";
			newoption.style.background = "url(" + icon + ") no-repeat";
			newoption.style.paddingLeft = "20px";
			if (userimages[i].mediaType != '' && userimages[i].imageName != '')
				newoption.appendChild(document
						.createTextNode(userimages[i].imageName + "_"
								+ userimages[i].mediaType));
			else
				newoption.appendChild(document
						.createTextNode(userimages[i].realname));
			newimageselect.appendChild(newoption);
		}	
	}
	else{
		for ( var i = 0; i < appimages.length; ++i) {
			var newoption = document.createElement('option');		
			if ($F(inputImage) == appimages[i].id) {
				newoption.setAttribute('selected', 'selected');
			}
			newoption.value = appimages[i].id;
			fullName = appimages[i].name;
			name = fullName.substring(0, fullName.length - 4);
			ext = fullName.substring(fullName.length - 4);
			icon = "files/" + name + "_icon" + ".png";
			newoption.style.background = "url(" + icon + ") no-repeat";
			newoption.style.paddingLeft = "20px";
			if (appimages[i].mediaType != '' && appimages[i].imageName != '')
				newoption.appendChild(document
						.createTextNode(appimages[i].imageName + "_"
								+ appimages[i].mediaType));
			else
				newoption.appendChild(document
						.createTextNode(appimages[i].realname));
			newimageselect.appendChild(newoption);
		}
	}	
	//Add the selected value to the combo if it's not exist
	updateParentCombo(newimageselect, $F(inputImage));

	var imageLinkCall = document.createElement('input');
	imageLinkCall.id = "link_call_image_id_" + count;
	imageLinkCall.name = imageLinkCall.id;
	imageLinkCall.setAttribute("type", "hidden");
	
	newimageselect.onchange = function () {
		imageLinkCall.value = newimageselect.value;
	}
	
	var container = document.createElement('div');
	container.setAttribute("id", "containerPopup");
	document.body.appendChild(container);
	var containerStyle = document.getElementById('containerPopup').style;
	try {
		//for IE
		containerStyle = document.all.containerPopup.style;
	} catch (e) {
		containerStyle = document.getElementById('containerPopup').style;
	}

	var padding = 10;
	var popupWidth = 500;
	var popupHeiht = 250;
	if(browserDetect.browser == 'Firefox' || browserDetect.browser == 'Chrome' || browserDetect.browser == 'Explorer') {
		popupHeiht = 270;
	}
	if (type == 4) {
       popupHeiht = 100;
    }

	// containerStyle.top = ((height / 2) - (popupHeiht / 2)) + "px";
	//containerStyle.top = window.pageYOffset + 100 + "px";
	containerStyle.top = getYOffset() + 100 + "px";
	containerStyle.left = ((width / 2) - (popupWidth / 2)) + "px";

	containerStyle.width = popupWidth + "px";
	containerStyle.height = popupHeiht + "px";

	containerStyle.zIndex = 1001;
	containerStyle.position = "absolute";
	containerStyle.display = "block";
	containerStyle.paddingLeft = padding + "px";
	containerStyle.paddingTop = padding + "px";
	containerStyle.paddingRight = padding + "px";
	containerStyle.paddingBottom = padding + "px";
	containerStyle.backgroundColor = "#FFFFFF";

	var leftWidth = 50;
	var rightWidth = popupWidth - (padding * 2) - leftWidth;

	var table = document.createElement('table');
	table.setAttribute('border', '0');

	var row0 = document.createElement('tr');
	var mythead0 = document.createElement("thead"); //For IE
	mythead0.appendChild(row0);
	table.appendChild(mythead0);

	row0.setAttribute('valign', 'top');

	var col01 = document.createElement('td');
	col01.style.width = leftWidth + "px";
	// Default value
	if (isImageLink) {
	   col01.innerHTML = "Image";
	} else {
	   col01.innerHTML = "Bullet";
	}
	row0.appendChild(col01);

	var col02 = document.createElement('td');
	col02.setAttribute('valign', 'top');
	col02.appendChild(newimageselect);
	col02.appendChild(imageLinkCall);
	
	var browseButton = document.createElement('input');
	browseButton.setAttribute("type", "button");
	browseButton.setAttribute("title", "Browse Images");
	browseButton.setAttribute("value", "Browse");
	browseButton.onclick = function() {
		var index = newimageselect.id.substring(9);
		expandingImage(newimageselect, 8, index);
	}
	col02.appendChild(browseButton);
	row0.appendChild(col02);
    if (type != 4) {
    	var row1 = document.createElement('tr');
    
    	var mythead1 = document.createElement("thead"); //For IE
    	mythead1.appendChild(row1);
    	table.appendChild(mythead1);
    
    	row1.setAttribute('valign', 'top');
    	var col11 = document.createElement('td');
    	col11.style.width = leftWidth + "px";
    	// Default value	
    	col11.innerHTML = "Text";
    	row1.appendChild(col11);
    
        var col12 = document.createElement('td');
        var tmpInputText = document.createElement('textarea');
        tmpInputText.style.width = rightWidth + "px";
        tmpInputText.style.height = 150 + "px";
        tmpInputText.style.resize="none";
        tmpInputText.value = inputText.value;
        col12.appendChild(tmpInputText);
        row1.appendChild(col12);
        //tmpInputText.style.color = "#6E6E6E";
        tmpInputText.onfocus = function() {
            tmpInputText.select();      
        }
        tmpInputText.onclick = function() {
        }
        
        /*tmpInputText.onkeypress = function() {
            tmpInputText.style.color = "#000000";
        }*/
    }
	
	/**
	 * Body Text
	 * type == sms 3
	 * */
	if (type == 3) {
		var rowBody = document.createElement('tr');
		var mytheadBody = document.createElement("thead");
		mytheadBody.appendChild(rowBody);
		table.appendChild(mytheadBody);
		var col41 = document.createElement('td');
		// Link is default value
		col41.innerHTML = "Body Text";
		rowBody.appendChild(col41);
		var col42 = document.createElement('td');
		var tmpBodyText = document.createElement('textarea');
		tmpBodyText.style.width = rightWidth + "px";
		tmpBodyText.style.height = 150 + "px";
		tmpBodyText.style.resize="none";
		//tmpBodyText.style.color = "#6E6E6E";
        if (bodyText != undefined) {
        	tmpBodyText.value = bodyText.value;
		}
        else {
        	tmpBodyText.style.color = "#6E6E6E";
        	tmpBodyText.value = "";
        }
		col42.appendChild(tmpBodyText);
		rowBody.appendChild(col42);
		
		tmpBodyText.onfocus = function() {
			tmpBodyText.select();		
		}
		tmpBodyText.onclick = function() {
		}
		/*tmpBodyText.onkeypress = function() {
			tmpBodyText.style.color = "#000000";
		}	*/
		
		//reduce the height
		tmpInputText.style.height = 50 + "px";
		
		//enlarge the size container
		containerStyle.height = popupHeiht + 50 + "px";
	}
	
	
	var row2 = document.createElement('tr');

	var mythead2 = document.createElement("thead"); //For IE
	mythead2.appendChild(row2);
	table.appendChild(mythead2);

	var col21 = document.createElement('td');
	// Default value	
	col21.innerHTML = "Link";
	row2.appendChild(col21);
	var col22 = document.createElement('td');
	var tmpInputLink = document.createElement('input');
	tmpInputLink.setAttribute('type', 'text');
	tmpInputLink.style.width = rightWidth + "px";
	tmpInputLink.value = inputLink.value;
	col22.appendChild(tmpInputLink);
	row2.appendChild(col22);

	var row3 = document.createElement('tr');

	var mythead3 = document.createElement("thead"); //For IE
	mythead3.appendChild(row3);
	table.appendChild(mythead3);

	var col31 = document.createElement('td');
	row3.appendChild(col31);

	var col32 = document.createElement('td');
	row3.appendChild(col32);

	var okButton = document.createElement('input');
	okButton.setAttribute('type', 'button');
	okButton.setAttribute('value', 'OK');
	okButton.onclick = function() {
		 
		 if(type == 4){
			if($F(imageLinkCall) == null){				
				alert('You need to choose the image for the hyperlink.');
				return;				
			}
		}
		
		 if (type != 4) {
	       label.innerHTML = $F(tmpInputText);
           inputText.value = $F(tmpInputText);
	    }   
		inputImage.value = $F(newimageselect);
		inputLink.value = $F(tmpInputLink);
		if (bodyText != undefined && type == 3) {
			bodyText.value = $F(tmpBodyText);
		}
		updatePreview();
		enablePage();
	}
	col32.appendChild(okButton);

	var cancelButton = document.createElement('input');
	cancelButton.setAttribute('type', 'button');
	cancelButton.setAttribute('value', 'Cancel');
	cancelButton.onclick = function() {
		enablePage();
	}
	col32.appendChild(cancelButton);

	container.appendChild(table);
}

function showEditPopupSoundBoard(label, inputImage, inputText, inputAudio, playButton) {

	var height = document.body.clientHeight;
	if (document.documentElement.scrollHeight > height) {
		height = document.documentElement.scrollHeight;
	}
	if (document.documentElement.clientHeight > height) {
		height = document.documentElement.clientHeight;
	}

	var width = document.body.clientWidth;
	if (document.documentElement.scrollWidth > width) {
		width = document.documentElement.scrollWidth;
	}
	if (document.documentElement.clientWidth) {
		width = document.documentElement.clientWidth;
	}

	var newimageselect = document.createElement('select');
	newimageselect.id = 'image_id_' + count;
	newimageselect.name = newimageselect.id;
	newimageselect.style.width = getComboWidth() + "px";
	//newimageselect.style.maxWidth = "350px";
	var fullName;
	var name;
	var ext;
	var icon;
	for ( var i = 0; i < userimages.length; ++i) {
		var newoption = document.createElement('option');
		if ($F(inputImage) == userimages[i].id) {
			newoption.setAttribute('selected', 'selected');
		}
		newoption.value = userimages[i].id;
		fullName = userimages[i].name;
		name = fullName.substring(0, fullName.length - 4);
		ext = fullName.substring(fullName.length - 4);
		icon = "files/" + name + "_icon" + ext;
		newoption.style.background = "url(" + icon + ") no-repeat";
		newoption.style.paddingLeft = "20px";
		if (userimages[i].mediaType != '' && userimages[i].imageName != '')
			newoption.appendChild(document
					.createTextNode(userimages[i].imageName + "_"
							+ userimages[i].mediaType));
		else
			newoption.appendChild(document
					.createTextNode(userimages[i].realname));
		newimageselect.appendChild(newoption);
	}
	
	//Add the selected value to the combo if it's not exist
	updateParentCombo(newimageselect, $F(inputImage));
	
	var soundImage = document.createElement('input');
	soundImage.setAttribute("type", "hidden");
	soundImage.id = "sound_image_id_"+count;
	soundImage.name = soundImage.id;
	
	var container = document.createElement('div');
	container.setAttribute("id", "containerPopup");
	document.body.appendChild(container);
	var containerStyle = document.getElementById('containerPopup').style;

	try {
		//for IE
		containerStyle = document.all.containerPopup.style;
	} catch (e) {
		containerStyle = document.getElementById('containerPopup').style;
	}
	
	var padding = 10;
	var popupWidth = 500;
	var popupHeiht = 250;

	containerStyle.top = getYOffset() + 100 + "px";
	
	containerStyle.left = ((width / 2) - (popupWidth / 2)) + "px";

	containerStyle.width = popupWidth + "px";
	containerStyle.height = popupHeiht + "px";

	containerStyle.zIndex = 1001;
	containerStyle.position = "absolute";
	containerStyle.display = "block";
	containerStyle.paddingLeft = padding + "px";
	containerStyle.paddingTop = padding + "px";
	containerStyle.paddingRight = padding + "px";
	containerStyle.paddingBottom = padding + "px";
	containerStyle.backgroundColor = "#FFFFFF";

	var leftWidth = 50;
	var rightWidth = popupWidth - (padding * 2) - leftWidth;

	var table = document.createElement('table');
	table.setAttribute('border', '0');

	var row0 = document.createElement('tr');
	row0.setAttribute('valign', 'top');

	var col01 = document.createElement('td');
	col01.style.width = leftWidth + "px";
	//Default value	
	col01.innerHTML = "Bullet";
	row0.appendChild(col01);

	var col02 = document.createElement('td');
	col02.setAttribute('valign', 'top');
	col02.appendChild(newimageselect);
	col02.appendChild(soundImage);
	
	var browseButton = document.createElement('input');
	browseButton.setAttribute("type", "button");
	browseButton.setAttribute("title", "Browse Images");
	browseButton.setAttribute("value", "Browse");
	browseButton.onclick = function() {
		var index = newimageselect.id.substring(9);
		expandingImage(newimageselect, 12, index);
	}
	col02.appendChild(browseButton);

	//var tmpImage = document.createElement('img');
	//tmpImage.style.width = "50px";
	//col02.appendChild(tmpImage);
	/*
	 * newimageselect.onchange = function() { tmpImage.src = 'files/' +
	 * $F(newimageselect); }
	 */

	row0.appendChild(col02);
	//table.appendChild(row0);
	var mythead0 = document.createElement("thead"); //For IE
	mythead0.appendChild(row0);
	table.appendChild(mythead0);

	var row1 = document.createElement('tr');
	row1.setAttribute('valign', 'top');
	var col11 = document.createElement('td');
	col11.style.width = leftWidth + "px";
	//Default value	
	col11.innerHTML = "Text";
	row1.appendChild(col11);
	var col12 = document.createElement('td');
	var tmpInputText = document.createElement('textarea');
	tmpInputText.style.width = rightWidth + "px";
	tmpInputText.style.height = 150 + "px";
	tmpInputText.style.resize="none";
	tmpInputText.value = inputText.value;
	col12.appendChild(tmpInputText);
	row1.appendChild(col12);
	//table.appendChild(row1);
	var mythead1 = document.createElement("thead"); //For IE
	mythead1.appendChild(row1);
	table.appendChild(mythead1);

	var row2 = document.createElement('tr');
	var col21 = document.createElement('td');
	
	//Default value	
	col21.innerHTML = "Sound";
	row2.appendChild(col21);
	var col22 = document.createElement('td');
	
	// var tmpInputLink = document.createElement('input');
	// tmpInputLink.setAttribute('type', 'text');
	// tmpInputLink.style.width = rightWidth + "px";
	// tmpInputLink.value = inputLink.value;
	// col22.appendChild(tmpInputLink);

	var newaudioselect = document.createElement('select');
	newaudioselect.id = 'audio_id_' + count;
	newaudioselect.name = newaudioselect.id;
	for ( var i = 0; i < useraudios.length; ++i) {
		var newoption = document.createElement('option');
		if ($F(inputAudio) == useraudios[i].id) {
			newoption.setAttribute('selected', 'selected');
		}
		newoption.value = useraudios[i].id;
		newoption.appendChild(document.createTextNode(useraudios[i].realname));
		newaudioselect.appendChild(newoption);
	}
	col22.appendChild(newaudioselect);

	row2.appendChild(col22);
	//table.appendChild(row2);
	var mythead2 = document.createElement("thead"); //For IE
	mythead2.appendChild(row2);
	table.appendChild(mythead2);

	var row3 = document.createElement('tr');
	//table.appendChild(row3);
	var mythead3 = document.createElement("thead"); //For IE
	mythead3.appendChild(row3);
	table.appendChild(mythead3);
	var col31 = document.createElement('td');
	row3.appendChild(col31);

	var col32 = document.createElement('td');
	col32.setAttribute('colspan','2');
	row3.appendChild(col32);

	var okButton = document.createElement('input');
	okButton.setAttribute('type', 'button');
	okButton.setAttribute('value', 'OK');
	okButton.onclick = function() {
		if ($F(newaudioselect)==-1) {
			alert("Please choose sound!");
			return;
		}
		
		label.innerHTML = $F(tmpInputText);
		inputImage.value = $F(newimageselect);
		inputText.value = $F(tmpInputText);
		inputAudio.value = $F(newaudioselect);		
		if (playButton != undefined) {			
			playButton.onclick = function() {
				redirect("files/"+$F(newaudioselect));
			}
			if (inputAudio.value == -1) {
				playButton.style.display = 'none';
			}else {
				playButton.style.display = 'inline';
			}
		}
		updateEmulatorSoundSection();
		enablePage();
	}
	col32.appendChild(okButton);

	var cancelButton = document.createElement('input');
	cancelButton.setAttribute('type', 'button');
	cancelButton.setAttribute('value', 'Cancel');
	cancelButton.onclick = function() {
		enablePage();
	}
	col32.appendChild(cancelButton);

	container.appendChild(table);
}

function moveListRowDown(ul, li) {
	var lis = ul.getElementsByTagName('li');
	for ( var i = 0; i < lis.length; ++i) {
		if (li == lis[i]) {
			if (i < lis.length - 1) {
			    if (lis[i + 2] != undefined) {
			     ul.insertBefore(li, lis[i + 2]);
			    } else {
			     ul.appendChild(li);
			    }
				
			} else if (i < lis.length) {
				ul.appendChild(li);
			}
			resetListOrder(ul);
			break;
		}
	}
}

function moveListRowUp(ul, li) {
	var lis = ul.getElementsByTagName('li');
	for ( var i = 0; i < lis.length; ++i) {
		if (i > 0 && li == lis[i]) {
			ul.insertBefore(li, lis[i - 1])
			resetListOrder(ul);
			break;
		}
	}
}

function moveListRowTop(ul, li) {
	var lis = ul.getElementsByTagName('li');
	for ( var i = lis.length - 1; i > 0; --i) {
		ul.insertBefore(li, lis[i - 1])
	}
	resetListOrder(ul);
}

function addOneItem(pageList){	
	if(pageList){
		var li = document.createElement('li');
		li.setAttribute('id', 'li_last_index');
		
		var newfields = document.createElement('span');
		newfields.style.padding = "5px 10px 5px 0px";
		
		var inputLastRow = document.createElement('input');
		inputLastRow.type = 'hidden';
		inputLastRow.id = 'last_is_null';
		inputLastRow.name = inputLastRow.id;
		inputLastRow.value = 'last_li_row';
		newfields.appendChild(inputLastRow);
		
		li.appendChild(newfields);
		
		pageList.appendChild(li);
	}
}

function moveListRowBotton(ul, li) {	
	addOneItem(ul);
	var lis = ul.getElementsByTagName('li');	
	for ( var i = 0; i < lis.length - 1; ++i) {		
		try{
			ul.insertBefore(li, lis[i + 1]);
		}catch(e){
			
		}
		
	}
	
	var li_last_index = document.getElementById('li_last_index');
	if(li_last_index){
		$(li_last_index).remove();
	}
	resetListOrder(ul);
}

function resetListOrder(list) {
	var count = 0;
	var inputs = list.getElementsByTagName('input');
	for ( var i = 0; i < inputs.length; ++i) {
		if (inputs[i].name.substr(0, 6) == 'order_') {
			inputs[i].value = count++;
		}
	}
	if (count == 0) resetListOrderCallLink(list);
}

function resetListOrderCallLink(list) {
        var count = 0;
        var inputs = list.getElementsByTagName('input');
        for ( var i = 0; i < inputs.length; ++i) {
                if (inputs[i].name.substr(0, 7) == 'order1_') {
                        inputs[i].value = count++;
                }
        }
}

function showAddPopupLinkAndCallPage(con, type) {	
	count = getIndexCountLinkCall($('pageListLinkCall'));
	var height = document.body.clientHeight;
	if (document.documentElement.scrollHeight > height) {
		height = document.documentElement.scrollHeight;
	}
	if (document.documentElement.clientHeight > height) {
		height = document.documentElement.clientHeight;
	}

	var width = document.body.clientWidth;
	if (document.documentElement.scrollWidth > width) {
		width = document.documentElement.scrollWidth;
	}
	if (document.documentElement.clientWidth) {
		width = document.documentElement.clientWidth;
	}
	var newimageselect = document.createElement('select');
	//newimageselect.id = 'image_id_' + count;
	newimageselect.id = 'image_id_blc_' + count;
	newimageselect.name = newimageselect.id;
	newimageselect.style.width = getComboWidth() + 'px';
	//newimageselect.style.maxWidth = '350px';
	var fullName;
	var name;
	var ext;
	var icon;
	//This is special, the image hyperlink uses the application image
	if (type != 4) {
		for ( var i = 0; i < userimages.length; ++i) {
			var newoption = document.createElement('option');
			newoption.value = userimages[i].id;
			fullName = userimages[i].name;
			name = fullName.substring(0, fullName.length - 4);
			ext = fullName.substring(fullName.length - 4);
			icon = "files/" + name + "_icon.png";
			newoption.style.background = "url(" + icon + ") no-repeat";
			newoption.style.paddingLeft = "20px";
			if (userimages[i].mediaType != '' && userimages[i].imageName != '')
				newoption.appendChild(document
						.createTextNode(userimages[i].imageName + "_"
								+ userimages[i].mediaType));
			else
				newoption.appendChild(document
						.createTextNode(userimages[i].realname));
			newimageselect.appendChild(newoption);
		}
	}
	else {
		for ( var i = 0; i < appimages.length; ++i) {
			var newoption = document.createElement('option');
			newoption.value = appimages[i].id;
			fullName = appimages[i].name;
			name = fullName.substring(0, fullName.length - 4);
			ext = fullName.substring(fullName.length - 4);
			icon = "files/" + name + "_icon.png";
			newoption.style.background = "url(" + icon + ") no-repeat";
			newoption.style.paddingLeft = "20px";
			if (appimages[i].mediaType != '' && appimages[i].imageName != '')
				newoption.appendChild(document
						.createTextNode(appimages[i].imageName + "_"
								+ appimages[i].mediaType));
			else
				newoption.appendChild(document
						.createTextNode(appimages[i].realname));
			newimageselect.appendChild(newoption);
		}
	}
	
	var imageLinkCall = document.createElement('input');
	imageLinkCall.id = "link_call_image_id_" + count;
	imageLinkCall.name = imageLinkCall.id;
	imageLinkCall.value = "-1";
	imageLinkCall.setAttribute("type", "hidden");
	
	newimageselect.onchange = function () {
		imageLinkCall.value = newimageselect.value;
	}
	
	var container = document.createElement('div');
	container.setAttribute("id", "containerPopup");
	document.body.appendChild(container);
	
	var containerStyle = document.getElementById('containerPopup').style;

	try {
		//for IE
		containerStyle = document.all.containerPopup.style;
	} catch (e) {
		containerStyle = document.getElementById('containerPopup').style;
	}

	var padding = 10;
	var popupWidth = 500;
	var popupHeiht = 250;
	if (type == 4) {
	   popupHeiht = 100;
	}

	//containerStyle.top = window.pageYOffset + 100 + "px";
	containerStyle.top = getYOffset() + 100 + "px";
	containerStyle.left = ((width / 2) - (popupWidth / 2)) + "px";

	containerStyle.width = popupWidth + "px";
	containerStyle.height = popupHeiht + "px";

	containerStyle.zIndex = 1001;
	containerStyle.position = "absolute";
	containerStyle.display = "block";
	containerStyle.paddingLeft = padding + "px";
	containerStyle.paddingTop = padding + "px";
	containerStyle.paddingRight = padding + "px";
	containerStyle.paddingBottom = padding + "px";
	containerStyle.backgroundColor = "#FFFFFF";

	var leftWidth = 50;
	var rightWidth = popupWidth - (padding * 2) - leftWidth;

	var table = document.createElement('table');
	table.setAttribute('border', '0');

	var row0 = document.createElement('tr');

	var mythead0 = document.createElement("thead"); //For IE
	mythead0.appendChild(row0);
	table.appendChild(mythead0);

	row0.setAttribute('valign', 'top');

	var col01 = document.createElement('td');
	col01.style.width = leftWidth + "px";
	// Default value	
	if (type == 4) {
	   col01.innerHTML = "Image";
	} else {
	   col01.innerHTML = "Bullet";
	}
	row0.appendChild(col01);

	var col02 = document.createElement('td');
	col02.setAttribute('valign', 'top');
	col02.appendChild(newimageselect);
	col02.appendChild(imageLinkCall);

	var browseButton = document.createElement('input');
	browseButton.setAttribute("title", "Browse Images");
	browseButton.setAttribute("type", "button");
	browseButton.setAttribute("value", "Browse");
	browseButton.onclick = function() {
		var index = newimageselect.id.substring(13);
		expandingImage(newimageselect, 8, index);
	}
	col02.appendChild(browseButton);

	row0.appendChild(col02);
    if (type != 4) {
        var row1 = document.createElement('tr');

        var mythead1 = document.createElement("thead"); //For IE
        mythead1.appendChild(row1);
        table.appendChild(mythead1);
    
        row1.setAttribute('valign', 'top');
        var col11 = document.createElement('td');
        col11.style.width = leftWidth + "px";
        // Default value    
        col11.innerHTML = "Text";
        row1.appendChild(col11);
        
    }
	var col12 = document.createElement('td');
	var tmpInputText = document.createElement('textarea');
	tmpInputText.style.width = rightWidth + "px";
	tmpInputText.style.height = 150 + "px";
	tmpInputText.style.color = "#6E6E6E";
	tmpInputText.style.resize="none";
	/**
	 * type == 1 is Hyperlink
	 * type == 2 is call
	 * type == 3 sms
	 */
	if(type == 1){
		tmpInputText.value = "Hyperlink";		
	} else if(type == 4) {
	   tmpInputText.value = "Image Hyperlink";
	}
	else if( type == 2){
		tmpInputText.value = "Click to Call";
	} else if (type ==3) {
		tmpInputText.style.height = 40 + "px"; //reduce the size
		tmpInputText.value = "Click to sms";
	}
	tmpInputText.onkeypress = function() {
		tmpInputText.style.color = "#000000";
	}
	
	tmpInputText.onfocus = function() {
			tmpInputText.select();
			//tmpInputText.focus();
	}
	tmpInputText.onclick = function() {
	}
    if (type != 4) {
        col12.appendChild(tmpInputText);
        row1.appendChild(col12);
    }
	/**
	 * Body Text
	 * type == sms 3
	 * */
	if (type == 3) {
		var rowBody = document.createElement('tr');
		var mytheadBody = document.createElement("thead");
		mytheadBody.appendChild(rowBody);
		table.appendChild(mytheadBody);
		var col41 = document.createElement('td');
		// Link is default value
		col41.innerHTML = "Body Text";
		rowBody.appendChild(col41);
		var col42 = document.createElement('td');
		col42.setAttribute('colspan','2');
		var tmpBodyText = document.createElement('textarea');
		tmpBodyText.style.width = rightWidth + "px";
		tmpBodyText.style.height = 150 + "px";
		tmpBodyText.style.color = "#6E6E6E";
		tmpBodyText.style.resize="none";
		tmpBodyText.value = "Text Message";
		col42.appendChild(tmpBodyText);
		rowBody.appendChild(col42);
		
		tmpBodyText.onfocus = function() {
			
			tmpBodyText.select();
			//tmpBodyText.focus();
		}
		
		tmpBodyText.onclick = function() {
		}
		tmpBodyText.onkeypress = function() {
			tmpBodyText.style.color = "#000000";
		}	
		
		//enlarge the size container
		containerStyle.height = popupHeiht + 60 + "px";
	}
	
	var row2 = document.createElement('tr');

	var mythead2 = document.createElement("thead"); //For IE
	mythead2.appendChild(row2);
	table.appendChild(mythead2);

	var col21 = document.createElement('td');
	// Default value	
	col21.innerHTML = "Link";
	row2.appendChild(col21);
	var col22 = document.createElement('td');
	var storeInputLink = document.createElement('input');
	storeInputLink.setAttribute('type', 'hidden');
	
	var tmpInputLink = document.createElement('input');
	tmpInputLink.setAttribute('type', 'text');
	tmpInputLink.style.width = rightWidth + "px";
	/** link or click to call and sms
	 * type == 1 is Hyperlink
	 * type == 2 is call
	 * type == 3 sms;
	 * */

	if (type == 1 || type == 4) {
		tmpInputLink.value = "http://";
		storeInputLink.value = "http://";
	} else if (type ==2){
		tmpInputLink.value = "call:";
		storeInputLink.value = "call:";
	}else if (type ==3) {
		tmpInputLink.value = "sms:";
		storeInputLink.value = "sms:";
	}
	col22.appendChild(storeInputLink);
	col22.appendChild(tmpInputLink);
	row2.appendChild(col22);
	
	tmpInputLink.onkeyup = function() {
		var tmpText = tmpInputLink.value;
		var tmpStoreText = storeInputLink.value;
		
		if(tmpText.length <= tmpStoreText.length){
			//tmpInputLink.disabled="disabled";
			tmpInputLink.value = tmpStoreText;
		}
	}

	var row3 = document.createElement('tr');

	var mythead3 = document.createElement("thead"); //For IE
	mythead3.appendChild(row3);
	table.appendChild(mythead3);

	var col31 = document.createElement('td');
	row3.appendChild(col31);

	var col32 = document.createElement('td');
	row3.appendChild(col32);

	var okButton = document.createElement('input');
	okButton.setAttribute('type', 'button');
	okButton.setAttribute('value', 'OK');
	okButton.onclick = function() {
	
		var li = document.createElement('li');
		li.setAttribute('id', 'li_' + count);

		var newfields = document.createElement('span');
		newfields.style.padding = "5px 10px 5px 0px";

		var label = document.createElement('label');
		label.innerHTML = $F(tmpInputText);
		newfields.appendChild(label);
		
		var inputRowId = document.createElement('input');
		inputRowId.type = 'hidden';
		inputRowId.id = 'rowid1call_' + count;
		inputRowId.name = inputRowId.id;
		inputRowId.value = count;
		newfields.appendChild(inputRowId);

		var inputOrder = document.createElement('input');
		inputOrder.setAttribute('type', 'hidden');
		inputOrder.value = count;
		inputOrder.setAttribute('name', 'order1_' + count);
		inputOrder.setAttribute('id', 'order1_' + count);
		newfields.appendChild(inputOrder);
		
		var inputImage = document.createElement('input');
		inputImage.setAttribute('type', 'hidden');
		inputImage.value = $F(imageLinkCall);
		inputImage.setAttribute('name', 'bullet1_' + count);
		inputImage.setAttribute('id', 'bullet1_' + count);
		newfields.appendChild(inputImage);		
		
		var inputText = document.createElement('input');
		inputText.setAttribute('type', 'hidden');
		inputText.value = $F(tmpInputText);
		inputText.setAttribute('name', 'text1_' + count);
		inputText.setAttribute('id', 'text1_' + count);
		newfields.appendChild(inputText);

		var inputLink = document.createElement('input');
		inputLink.setAttribute('type', 'hidden');
		inputLink.value = $F(tmpInputLink);
		inputLink.setAttribute('name', 'link1_' + count);
		inputLink.setAttribute('id', 'link1_' + count);
		newfields.appendChild(inputLink);
		
		var callType = document.createElement('input');
		callType.setAttribute('type', 'hidden');
		callType.setAttribute('name', 'call_type_' + count);
		callType.setAttribute('id', 'call_type_' + count);
		callType.value = type;
		newfields.appendChild(callType);
		
		//The image hyper link doesn't need the bold and italic button
		//if (type != 4) {
		    var inputBold = document.createElement('input');
            inputBold.setAttribute('type', 'hidden');
            inputBold.value = 0;
            inputBold.setAttribute('name', 'link_call_bold_' + count);
            inputBold.setAttribute('id', 'link_call_bold_' + count);
            newfields.appendChild(inputBold);
            
            var inputItalic = document.createElement('input');
            inputItalic.setAttribute('type', 'hidden');
            inputItalic.value = 0;
            inputItalic.setAttribute('name', 'link_call_italic_' + count);
            inputItalic.setAttribute('id', 'link_call_italic_' + count);
            newfields.appendChild(inputItalic);
		//}
		
		/**
		 * click OK
		 * add sms
		 * body text message
		 * */
		if (type ==3) {
			var inputBodyMsg = document.createElement('input');
			inputBodyMsg.setAttribute('type', 'hidden');
			inputBodyMsg.value = $F(tmpBodyText);
			inputBodyMsg.setAttribute('name', 'body1_' + count);
			inputBodyMsg.setAttribute('id', 'body1_' + count);
			newfields.appendChild(inputBodyMsg);
			
		} else if (type == 4) {
		   var inputImageLink = document.createElement('input');
		   inputImageLink.setAttribute('type', 'hidden');
		   inputImageLink.setAttribute('name', 'img_link_' + count);
		   inputImageLink.setAttribute('id', 'img_link_' + count);
		   inputImageLink.value = "true";
		   newfields.appendChild(inputImageLink);
		   
		}
		
		if(type == 4){
			if($F(imageLinkCall) == '-1'){				
				alert('You need to choose the image for the hyperlink.');
				return;				
			}
		}
		
		li.appendChild(newfields);
        
		var newcontrols = document.createElement('span');
		newcontrols.className = 'controls';
		if (type != 4) {
		    var newboldbutton=document.createElement('img');
            newboldbutton.src ='css/tino/bold-hover.png';
            newboldbutton.alt = newboldbutton.title = 'Bold';
            newboldbutton.id = 'link_call_boldbutton_' + count;
            newboldbutton.style.width='17px';
            newboldbutton.style.height='17px';
            //newboldbutton.style.marginLeft ='5px';
            newboldbutton.style.marginRight ='9px';
            newcontrols.appendChild(newboldbutton);
            newboldbutton.onclick = function(){
                var newTextView = $F(inputText);
                if($F(inputBold) == 1){
                    newTextView = newTextView.replace("<b>","");
                    newTextView = newTextView.replace("</b>","");
                    inputBold.value= 0;
                    newboldbutton.src ='css/tino/bold-hover.png';
                }
                else{
                    newTextView = "<b>" + newTextView + "</b>"
                    inputBold.value= 1;
                    newboldbutton.src ='css/tino/bold.png';
                }
                inputText.value = newTextView;
                label.innerHTML = newTextView;
                updatePreviewLinkCall();
                
            }
            var newitalicbutton=document.createElement('img');
            newitalicbutton.src ='css/tino/italic-hover.png';
            newitalicbutton.alt = newboldbutton.title = 'Italic';
            newitalicbutton.id = 'link_call_italicbutton_' + count;
            newitalicbutton.style.width='17px';
            newitalicbutton.style.height='17px';
            newcontrols.appendChild(newitalicbutton);
            newitalicbutton.onclick = function(){
                var newTextView = $F(inputText);
                if($F(inputItalic) == 1){
                    newTextView = newTextView.replace("<i>","");
                    newTextView = newTextView.replace("</i>","");
                    inputItalic.value= 0;
                    newitalicbutton.src ='css/tino/italic-hover.png';
                }
                else{
                    newTextView = "<i>" + newTextView + "</i>"
                    inputItalic.value= 1;
                    newitalicbutton.src ='css/tino/italic.png';
                }
                inputText.value = newTextView;
                label.innerHTML = newTextView;
                updatePreviewLinkCall();
                
            }
		}
		
		//ruler color block		
		rulerColorBlockButtonCall(count, newcontrols, 'call', 'none');		
		
		var newupbutton = document.createElement('img');
		newupbutton.src = 'img/arrow_up.png';
		newupbutton.alt = newupbutton.title = 'Move Up';
		newupbutton.id = 'upbutton1_' + count;
		newupbutton.onclick = function() {
			var ul = $('pageListLinkCall');
			moveListRowUp(ul, li);
			updatePreviewLinkCall();
		}
		newcontrols.appendChild(newupbutton);

		var newdownbutton = document.createElement('img');
		newdownbutton.src = 'img/arrow_down.png';
		newdownbutton.alt = newdownbutton.title = 'Move Down';
		newdownbutton.id = 'downbutton1_' + count;
		newdownbutton.onclick = function() {
			var ul = $('pageListLinkCall');
			moveListRowDown(ul, li);
			updatePreviewLinkCall();
		}
		newcontrols.appendChild(newdownbutton);

		var newtopbutton = document.createElement('img');
		newtopbutton.src = 'img/top.png';
		newtopbutton.alt = newtopbutton.title = 'Move Top';
		newtopbutton.id = 'topbutton1_' + count;
		newtopbutton.onclick = function() {
			var ul = $('pageListLinkCall');
			moveListRowTop(ul, li);
			updatePreviewLinkCall();
		}
		newcontrols.appendChild(newtopbutton);

		var newbottombutton = document.createElement('img');
		newbottombutton.src = 'img/bottom.png';
		newbottombutton.alt = newbottombutton.title = 'Move Bottom';
		newbottombutton.id = 'bottombutton1_' + count;
		newbottombutton.onclick = function() {
			var ul = $('pageListLinkCall');
			moveListRowBotton(ul, li);
			updatePreviewLinkCall();
		}
		newcontrols.appendChild(newbottombutton);

		var newremovebutton = document.createElement('img');
		newremovebutton.src = 'img/bin_closed.png';
		newremovebutton.alt = newremovebutton.title = 'Remove';
		newremovebutton.id = 'removebutton1_' + count;
		newremovebutton.onclick = function() {
			$(li).remove();
			var ul = $('pageListLinkCall');
			resetListOrder(ul);
			updatePreviewLinkCall();			
		}
		newcontrols.appendChild(newremovebutton);

		var neweditbutton = document.createElement('img');
		neweditbutton.src = 'img/design.png';
		neweditbutton.alt = neweditbutton.title = 'Edit';
		neweditbutton.id = 'editbutton1_' + count;
		neweditbutton.onclick = function() {
			disablePage();
			if (type ==3) { //sms
				showEditPopup(label, inputImage, inputText, inputLink, inputBodyMsg, 3, neweditbutton.id);
			}else if (type == 4) {
			     showEditPopup("",inputImage, "",inputLink, "", 4, neweditbutton.id);
			} else {
//				showEditPopup(label, inputImage, inputText, inputLink);
				showEditPopup(label, inputImage, inputText, inputLink, "", "", neweditbutton.id);
			}
		}
		newcontrols.appendChild(neweditbutton);		
		
		li.appendChild(newcontrols);

		con.appendChild(li);
		count++;
		updatePreviewLinkCall();		
		enablePage();
	}
	col32.appendChild(okButton);

	var cancelButton = document.createElement('input');
	cancelButton.setAttribute('type', 'button');
	cancelButton.setAttribute('value', 'Cancel');
	cancelButton.onclick = function() {
//		$("tmp_img_id_" + count).remove();
//		$("tmp_img_src_" + count).remove();
		enablePage();
	}
	col32.appendChild(cancelButton);

	container.appendChild(table);
}

function removeCallList(index){
	//removed all
	var litag = document.getElementById('li_' + index);
	if(litag){		
		//litag.remove();
		$('li_' + index).remove();
	}
}

function callListSection(count, labelName, newimageselect, tmpInputLink, tmpBodyText, type, rowid, con, displayState){	
	var li = document.createElement('li');
	li.setAttribute('id', 'li_' + count);

	var newfields = document.createElement('span');
	newfields.style.padding = "5px 10px 5px 0px";

	var label = document.createElement('label');
	label.innerHTML = labelName;
	newfields.appendChild(label);
	
	var inputRowId = document.createElement('input');
	inputRowId.type = 'hidden';
	inputRowId.id = 'rowid1call_' + count;
	inputRowId.name = inputRowId.id;
	inputRowId.value = rowid;
	newfields.appendChild(inputRowId);

    var inputOrder = document.createElement('input');
	inputOrder.setAttribute('type', 'hidden');
	inputOrder.value = count;
	inputOrder.setAttribute('name', 'order1_' + count);
	inputOrder.setAttribute('id', 'order1_' + count);
	newfields.appendChild(inputOrder);

	var inputImage = document.createElement('input');
	inputImage.setAttribute('type', 'hidden');
	inputImage.value = newimageselect;
	inputImage.setAttribute('name', 'bullet1_' + count);
	inputImage.setAttribute('id', 'bullet1_' + count);
	newfields.appendChild(inputImage);
	
	var inputText = document.createElement('input');
	inputText.setAttribute('type', 'hidden');
	inputText.value = labelName;
	inputText.setAttribute('name', 'text1_' + count);
	inputText.setAttribute('id', 'text1_' + count);
	newfields.appendChild(inputText);

	var inputLink = document.createElement('input');
	inputLink.setAttribute('type', 'hidden');
	inputLink.value = tmpInputLink;
	inputLink.setAttribute('name', 'link1_' + count);
	inputLink.setAttribute('id', 'link1_' + count);
	newfields.appendChild(inputLink);
	
	var callType = document.createElement('input');
	callType.setAttribute('type', 'hidden');
	callType.setAttribute('name', 'call_type_' + count);
	callType.setAttribute('id', 'call_type_' + count);
	callType.value = type;
	newfields.appendChild(callType);
	
	//The image hyper link doesn't need the bold and italic button
	//if (type != 4) {
	    var inputBold = document.createElement('input');
        inputBold.setAttribute('type', 'hidden');    
        inputBold.value = 0;
        inputBold.setAttribute('name', 'link_call_bold_' + count);
        inputBold.setAttribute('id', 'link_call_bold_' + count);
        newfields.appendChild(inputBold);
        
        var inputItalic = document.createElement('input');
        inputItalic.setAttribute('type', 'hidden');
        inputItalic.value = 0;
        inputItalic.setAttribute('name', 'link_call_italic_' + count);
        inputItalic.setAttribute('id', 'link_call_italic_' + count);
        newfields.appendChild(inputItalic);
	//}
	
	/**
	 * click OK
	 * add sms
	 * body text message
	 * */
	if (type ==3) {
		var inputBodyMsg = document.createElement('input');
		inputBodyMsg.setAttribute('type', 'hidden');
		inputBodyMsg.value = tmpBodyText;
		inputBodyMsg.setAttribute('name', 'body1_' + count);
		inputBodyMsg.setAttribute('id', 'body1_' + count);
		newfields.appendChild(inputBodyMsg);
		
	} else if (type == 4) {		
	   var inputImageLink = document.createElement('input');
	   inputImageLink.setAttribute('type', 'hidden');
	   inputImageLink.setAttribute('name', 'img_link_' + count);
	   inputImageLink.setAttribute('id', 'img_link_' + count);
	   inputImageLink.value = "true";
	   newfields.appendChild(inputImageLink);
	   
	}
	
	if(type == 4){
		if(newimageselect == '-1'){				
			alert('You need to choose the image for the hyperlink.');
			return;				
		}
	}
	
	li.appendChild(newfields);
    
	var newcontrols = document.createElement('span');
	newcontrols.className = 'controls';
	if (type != 4) {
	    var newboldbutton=document.createElement('img');
        newboldbutton.src ='css/tino/bold-hover.png';
        newboldbutton.alt = newboldbutton.title = 'Bold';
        newboldbutton.id = 'link_call_boldbutton_' + count;
        newboldbutton.style.width='17px';
        newboldbutton.style.height='17px';
        //newboldbutton.style.marginLeft ='5px';
        newboldbutton.style.marginRight ='9px';
        newcontrols.appendChild(newboldbutton);
        newboldbutton.onclick = function(){
            var newTextView = $F(inputText);  
            if(isCallBoldItalic(newTextView, '<b>')){
        		newTextView = newTextView.replace("<b>","");
                newTextView = newTextView.replace("</b>","");
                
                newTextView = newTextView.replace("<B>","");
                newTextView = newTextView.replace("</B>","");
                
                inputBold.value= 0;
                newboldbutton.src ='css/tino/bold-hover.png';	
        	}
        	else{
        		newTextView = "<b>" + newTextView + "</b>"
                inputBold.value= 1;
                newboldbutton.src ='css/tino/bold.png';
        	}
            inputText.value = newTextView;
            label.innerHTML = newTextView;
            updatePreviewLinkCall();            
        }
        var newitalicbutton=document.createElement('img');
        newitalicbutton.src ='css/tino/italic-hover.png';
        newitalicbutton.alt = newboldbutton.title = 'Italic';
        newitalicbutton.id = 'link_call_italicbutton_' + count;
        newitalicbutton.style.width='17px';
        newitalicbutton.style.height='17px';
        newcontrols.appendChild(newitalicbutton);
        newitalicbutton.onclick = function(){
            var newTextView = $F(inputText);
            if(isCallBoldItalic(newTextView, '<i>')){
        		newTextView = newTextView.replace("<i>","");
                newTextView = newTextView.replace("</i>","");
                
                newTextView = newTextView.replace("<I>","");
                newTextView = newTextView.replace("</I>","");
                
                inputItalic.value= 0;
                newitalicbutton.src ='css/tino/italic-hover.png';	
        	}
        	else{
        		newTextView = "<i>" + newTextView + "</i>"
                inputItalic.value= 1;
                newitalicbutton.src ='css/tino/italic.png';
        	}
            inputText.value = newTextView;
            label.innerHTML = newTextView;
            updatePreviewLinkCall();            
        }
	}
	
	//ruler color block		
	rulerColorBlockButton(count, newcontrols, 'call', displayState);
	
	var newupbutton = document.createElement('img');
	newupbutton.src = 'img/arrow_up.png';
	newupbutton.alt = newupbutton.title = 'Move Up';
	newupbutton.id = 'upbutton1_' + count;
	newupbutton.onclick = function() {
		var ul = $('pageListLinkCall');
		moveListRowUp(ul, li);		
		updatePreviewLinkCall();
		
		recreateCallMoveUpDown();
	}
	newcontrols.appendChild(newupbutton);

	var newdownbutton = document.createElement('img');
	newdownbutton.src = 'img/arrow_down.png';
	newdownbutton.alt = newdownbutton.title = 'Move Down';
	newdownbutton.id = 'downbutton1_' + count;
	newdownbutton.onclick = function() {
		var ul = $('pageListLinkCall');
		moveListRowDown(ul, li);
		updatePreviewLinkCall();
		
		recreateCallMoveUpDown();
	}
	newcontrols.appendChild(newdownbutton);

	var newtopbutton = document.createElement('img');
	newtopbutton.src = 'img/top.png';
	newtopbutton.alt = newtopbutton.title = 'Move Top';
	newtopbutton.id = 'topbutton1_' + count;
	newtopbutton.onclick = function() {
		var ul = $('pageListLinkCall');
		moveListRowTop(ul, li);
		updatePreviewLinkCall();		
		
		recreateCallMoveUpDown();
	}
	newcontrols.appendChild(newtopbutton);

	var newbottombutton = document.createElement('img');
	newbottombutton.src = 'img/bottom.png';
	newbottombutton.alt = newbottombutton.title = 'Move Bottom';
	newbottombutton.id = 'bottombutton1_' + count;
	newbottombutton.onclick = function() {
		var ul = $('pageListLinkCall');
		moveListRowBotton(ul, li);
		updatePreviewLinkCall();
		
		recreateCallMoveUpDown();
	}
	newcontrols.appendChild(newbottombutton);

	var newremovebutton = document.createElement('img');
	newremovebutton.src = 'img/bin_closed.png';
	newremovebutton.alt = newremovebutton.title = 'Remove';
	newremovebutton.id = 'removebutton1_' + count;
	newremovebutton.onclick = function() {
		$(li).remove();
		var ul = $('pageListLinkCall');
		resetListOrder(ul);		
		updatePreviewLinkCall();
		
		var removeIndex = parseInt(newremovebutton.id.replace('removebutton1_',''));
		
		var removerowCall = '-1';
		var rowcallremove= document.getElementById('rowId1_call_' + removeIndex);
		if(rowcallremove){
			removerowCall = rowcallremove.value;
		}
		
		if(removerowCall !='-1'){
			document.getElementById('remove_calllinksms_id_list').value = document.getElementById('remove_calllinksms_id_list').value + "," + removerowCall;	
		}	
		
		var emulatorRowLink = $('emulatorRowLink').getElementsByTagName('tr');
		
		for(var i=0;i<emulatorRowLink.length;i++){
			if(i != removeIndex){
				var divData = document.getElementById('type_call_' + i);
				if(divData){						
					removeCallList(i);
				}
			}
		}
		
		var countData = 0;
		for(var i=0;i<emulatorRowLink.length;i++){
			if(i != removeIndex){
				
				var callTypeValue = '';
				var type_call= document.getElementById('type_call_' + i);
				if(type_call){
					callTypeValue = type_call.value;						
				}
				
				var textData = '';
				var divData = document.getElementById('div_call_data_' + i);
				if(divData){
					if(divData.innerHTML != undefined){
						textData = divData.innerHTML;	
					}						
				}
				
				var sourceimage = '';
				var txt_store_img = document.getElementById('txt_store_img_call_' + i);
				if(txt_store_img){
					sourceimage = txt_store_img.value;
				}
				
				var typeIndex = parseInt(callTypeValue);
				if(typeIndex == 4){
					textData = 'Image Hyperlink';
				}
				
				var displayState1 = 'none';
				var divHr = document.getElementById('div_hr_addhr_call_' + i);
				if(divHr){
					displayState1 = divHr.style.display;
				}
				
				var rowidcall = '-1';
				var rowId1= document.getElementById('rowId1_call_' + i);
				if(rowId1){
					rowidcall = rowId1.value;
				}
				
				var tmpBodyTextData = '';
				var smsbody = document.getElementById('sms_text_body_' + i);
				if(smsbody){
					tmpBodyTextData = smsbody.value;					
			    }
				
				var tmpInputLinkData = '';
				var link_call = document.getElementById('link_call_' + i);
				if(link_call){
					tmpInputLinkData = link_call.value;
			    }
				
				if(type_call){						
					callListSection(countData, textData, sourceimage, tmpInputLinkData, tmpBodyTextData, callTypeValue, rowidcall, con, displayState1);
					countData++;
				}
				
			}
		}
		
	}
	newcontrols.appendChild(newremovebutton);

	var neweditbutton = document.createElement('img');
	neweditbutton.src = 'img/design.png';
	neweditbutton.alt = neweditbutton.title = 'Edit';
	neweditbutton.id = 'editbutton1_' + count;
	neweditbutton.onclick = function() {
		disablePage();
		if (type ==3) { //sms
			showEditPopup(label, inputImage, inputText, inputLink, inputBodyMsg, 3);
		}else if (type == 4) {
		     showEditPopup("",inputImage, "",inputLink, "", 4);
		} else {
			showEditPopup(label, inputImage, inputText, inputLink);
		}
	}
	newcontrols.appendChild(neweditbutton);		
	
	li.appendChild(newcontrols);

	con.appendChild(li);
	updatePreviewLinkCall();
	enablePage();
}

function recreateCallMoveUpDown(){
	updatePreview();
	
	var emulatorRowLink = $('emulatorRowLink').getElementsByTagName('tr');
	
	for(var i=0;i<emulatorRowLink.length;i++){
		var divData = document.getElementById('type_call_' + i);
		if(divData){						
			removeCallList(i);
		}		
	}
	
	var countData = 0;
	for(var i=0;i<emulatorRowLink.length;i++){		
			
		var callTypeValue = '';
		var type_call= document.getElementById('type_call_' + i);
		if(type_call){
			callTypeValue = type_call.value;
		}
			
		var textData = '';
		var divData = document.getElementById('div_call_data_' + i);
		if(divData){
			if(divData.innerHTML != undefined){
				textData = divData.innerHTML;	
			}						
		}
			
		var sourceimage = '';
		var txt_store_img = document.getElementById('txt_store_img_call_' + i);
		if(txt_store_img){
			sourceimage = txt_store_img.value;
		}					
			
		var tmpBodyTextData = '';
		var smsbody = document.getElementById('sms_text_body_' + i);
		if(smsbody){
			tmpBodyTextData = smsbody.value;					
	    }
			
		var typeIndex = parseInt(callTypeValue);
		if(typeIndex == 4){
			textData = 'Image Hyperlink';
		}
			
		var displayState = 'none';
		var divHr = document.getElementById('div_hr_addhr_call_' + i);
		if(divHr){
			displayState = divHr.style.display;
		}
			
		var rowidcall = '-1';
		var rowId1= document.getElementById('rowId1_call_' + i);
		if(rowId1){
			rowidcall = rowId1.value;
		}
			
		var tmpInputLinkData = '';
		var link_call = document.getElementById('link_call_' + i);
		if(link_call){
			tmpInputLinkData = link_call.value;
		}
			
		if(type_call){
			callListSection(countData, textData, sourceimage, tmpInputLinkData, tmpBodyTextData, callTypeValue, rowidcall, $('pageListLinkCall'), displayState);
			countData++;
		}	
		
	}
	
	updatePreviewLinkCall();
}

function isCallBoldItalic(data, tag){
	var index = -1;
	data = data.toLowerCase();
	
	if(data != ''){
		index = data.indexOf(tag);
	}
	
	return (index >= 0 ? true : false);
}

// The function to remove the popup and masklayer form the form 
//access the element by by using # in front of the element name because it conflict with prototype
//, this is jquery style.

function enableExtendPage() {
    var maskLayer = document.getElementById('maskLayer');    
    if (maskLayer) {
        $(maskLayer).remove();        
    }
    
    var containerPopup = document.getElementById('containerPopup');    
    if (containerPopup) {
        $(containerPopup).remove();
    }
}

//ruler color block for call, sound, video
function rulerColorBlockButton(count, newcontrols, note, displayState){
	
	var newaddlinebutton = document.createElement('img');
	newaddlinebutton.src = 'img/smalldivided-ruler.png';
	newaddlinebutton.setAttribute('onmouseover', "this.src = 'img/smalldivided_ruler_over.png' ");
	newaddlinebutton.setAttribute('onmouseout', "this.src = 'img/smalldivided-ruler.png' ");
	newaddlinebutton.alt = 'Add Line';
	newaddlinebutton.title = 'Add Line';
	newaddlinebutton.id = 'addhr_' + note + '_' + count;
	newaddlinebutton.style.paddingLeft='5px';	
	newcontrols.appendChild(newaddlinebutton);
	
	var newremovelinebutton = document.createElement('img');
	newremovelinebutton.src = 'img/smalldivided-ruler_selected.png';
	newremovelinebutton.setAttribute('onmouseover', "this.src = 'img/smalldivided-ruler_selected_over.png' ");
	newremovelinebutton.setAttribute('onmouseout', "this.src = 'img/smalldivided-ruler_selected.png' ");
	newremovelinebutton.alt = 'Remove Line';
	newremovelinebutton.title = 'Remove Line';
	newremovelinebutton.id = 'removehr_' + note + '_' + count;
	newremovelinebutton.style.paddingLeft='5px';	
	newcontrols.appendChild(newremovelinebutton);
	
	//check default display
	if(displayState =='none'){
		newaddlinebutton.style.display = 'inline';
		newremovelinebutton.style.display = 'none';
	}
	else{
		newaddlinebutton.style.display = 'none';
		newremovelinebutton.style.display = 'inline';
	}
	
	var txthrcall = document.createElement('input');
	txthrcall.type = 'hidden';
	txthrcall.id = 'txt_' + newaddlinebutton.id;
	txthrcall.name = txthrcall.id;
	txthrcall.value = displayState;
	newcontrols.appendChild(txthrcall);
   	
	newaddlinebutton.onclick = function() {
		var divHr = document.getElementById('div_hr_' + newaddlinebutton.id);				
		if(divHr){
			divHr.style.display = 'inline';
			txthrcall.value = 'inline';				
			newaddlinebutton.style.display = 'none';
			newremovelinebutton.style.display = 'inline';
			// newaddlinebutton.hide(); work for Firefox
			//newremovelinebutton.show();
		}				
	}
	
	newremovelinebutton.onclick = function() {
		var divHr = document.getElementById('div_hr_' + newaddlinebutton.id);				
		if(divHr){
			divHr.style.display = 'none';
			txthrcall.value = 'none';
			newaddlinebutton.style.display = 'inline';
			newremovelinebutton.style.display = 'none';
			//newaddlinebutton.show();
			//newremovelinebutton.hide();				
		}				
	}
}

function rulerColorBlockButtonCall(count, newcontrols, note, displayState){
	
	var txthrcall = document.createElement('input');
	txthrcall.type = 'hidden';
	txthrcall.id = 'txt_addhr_' + note + '_' + count;
	txthrcall.name = txthrcall.id;
	txthrcall.value = displayState;
	newcontrols.appendChild(txthrcall);
	
	var newaddlinebutton = document.createElement('img');
	newaddlinebutton.src = 'img/smalldivided-ruler.png';
	newaddlinebutton.alt = 'Add Line';
	newaddlinebutton.title = 'Add Line';
	newaddlinebutton.id = 'addhr1_' + note + '_' + count;
	newaddlinebutton.style.paddingLeft='5px';	
	newaddlinebutton.onclick = function() {
		if(txthrcall.value == 'inline'){			
			newaddlinebutton.onmouseover = function() {
				newaddlinebutton.src = 'img/smalldivided_ruler_over.png';
			}
			newaddlinebutton.onmouseout = function() {
				newaddlinebutton.src = 'img/smalldivided-ruler.png';
			}			
			txthrcall.value = 'none';
		}
		else{			
			newaddlinebutton.onmouseover = function() {
				newaddlinebutton.src = 'img/smalldivided-ruler_selected_over.png';
			}
			newaddlinebutton.onmouseout = function() {
				newaddlinebutton.src = 'img/smalldivided-ruler_selected.png';
			}
			txthrcall.value = 'inline';
		}		
		
		if(note == 'sound'){
			updateEmulatorSoundSection();
		}		
		else if(note == 'video'){
			updateEmulatorVideoSection();
		}
		else if(note == 'call'){
			updatePreviewLinkCall();	
		}
	}
	
	newcontrols.appendChild(newaddlinebutton);	
}

function showExtendBox(accId) {
    disablePage();
    
    //Start to calculate the hieght & width for the screen
    var height = document.body.clientHeight;
    if (document.documentElement.scrollHeight > height) {
        height = document.documentElement.scrollHeight;
    }
    if (document.documentElement.clientHeight > height) {
        height = document.documentElement.clientHeight;
    }

    var width = document.body.clientWidth;
    if (document.documentElement.scrollWidth > width) {
        width = document.documentElement.scrollWidth;
    }
    if (document.documentElement.clientWidth) {
        width = document.documentElement.clientWidth;
    }
    
    var container = document.getElementById('containerPopup');
    if(container){
    	$(container).remove();
    }
    
    //Create the container to contain the input text.
    var container = document.createElement('div');
    container.className = 'borderImg';
    container.setAttribute("id", "containerPopup");
    document.body.appendChild(container);
    
    var containerStyle = document.getElementById('containerPopup').style;    
    try {
		// for IE
		containerStyle = document.all.containerPopup.style;
	} catch (e) {
		containerStyle = document.getElementById('containerPopup').style;
	}
    
    var padding = 20;
    var popupWidth = 440;
    var popupHeiht = 30;
    
    var pageY = document.documentElement.scrollTop;
    containerStyle.top = pageY + 300 + "px";    
    containerStyle.left = ((width / 2) - (popupWidth / 2)) + "px";
    
    containerStyle.width = popupWidth + "px";
    containerStyle.height = popupHeiht + "px";
    
    containerStyle.zIndex = 1001;
    containerStyle.position = "absolute";
    containerStyle.display = "block";
    containerStyle.paddingLeft = padding + "px";
    containerStyle.paddingTop = padding + "px";
    containerStyle.paddingRight = padding + "px";
    containerStyle.paddingBottom = padding + "px";
    containerStyle.backgroundColor = "#e2e2e2";
    
    var table = document.createElement('table');
    var tbody = document.createElement('tbody');
    table.appendChild(tbody);

    var label = document.createElement('lable'); 
    label.innerHTML = "No. of days to extend: ";
    
    var tr1 = document.createElement('tr');
    tbody.appendChild(tr1);
    
    var td1 = document.createElement('td');    
    td1.appendChild(label);
    tr1.appendChild(td1);
    
    var nbDay = document.createElement('input');
    nbDay.setAttribute('type', 'text');
    nbDay.setAttribute('value', '30');
    nbDay.setAttribute('name', 'numberDays');
    nbDay.setAttribute('id', 'numberDays');
    
    var td2 = document.createElement('td');    
    td2.appendChild(nbDay);
    tr1.appendChild(td2);
    
    var td3 = document.createElement('td');
    
    //cancelButton
    var cancelButton = document.createElement('input');
    cancelButton.setAttribute('type', 'button');
    cancelButton.setAttribute('value', 'Cancel');    
    cancelButton.onclick = function(){
    	enableExtendPage();
    }
    
    container.appendChild(cancelButton);
    
    //Ok button
    var okButton = document.createElement('input');
    okButton.setAttribute('type', 'button');
    okButton.setAttribute('value', 'Ok');    
    okButton.onclick = function(){
    	updateExpiring();
    }
    
    td3.appendChild(okButton);
    tr1.appendChild(td3);
    
    var td4 = document.createElement('td');
    td4.appendChild(cancelButton);
    tr1.appendChild(td4);
    
    var userId = document.createElement('input');
    userId.setAttribute('type', 'hidden');
    userId.setAttribute('value', accId);
    userId.setAttribute('name', 'userId');
    userId.setAttribute('id', 'userId');
    container.appendChild(userId);
    
    container.appendChild(table);
}

function updateExpiring() {
    var id = document.getElementById('userId');    
    var days = document.getElementById('numberDays');
    new Ajax.Request('expireextend.json', {
         method: 'post',
         parameters: {'userId': id.value,
                      'numberDays': days.value},
         onSuccess: function(transport) {
             //var json = transport.responseText.evalJSON();
            enableExtendPage();
            location.reload(true);   
         }
      }); 
}


function showAddPopupVideo(con) {	
	count = getIndexCount($('pagelist'));//get indexCount
	var height = document.body.clientHeight;
	if (document.documentElement.scrollHeight > height) {
		height = document.documentElement.scrollHeight;
	}
	if (document.documentElement.clientHeight > height) {
		height = document.documentElement.clientHeight;
	}

	var width = document.body.clientWidth;
	if (document.documentElement.scrollWidth > width) {
		width = document.documentElement.scrollWidth;
	}
	if (document.documentElement.clientWidth) {
		width = document.documentElement.clientWidth;
	}

	var newimageselect = document.createElement('select');
	newimageselect.id = 'image_id_' + count;
	newimageselect.name = newimageselect.id;
	newimageselect.style.width = getComboWidth() + 'px';
	//newimageselect.style.maxWidth = '350px';
	var fullName;
	var name;
	var ext;
	var icon;
	for ( var i = 0; i < userimages.length; ++i) {
		var newoption = document.createElement('option');
		newoption.value = userimages[i].id;
		fullName = userimages[i].name;
		name = fullName.substring(0, fullName.length - 4);
		ext = fullName.substring(fullName.length - 4);
		icon = "files/" + name + "_icon" + ext;
		newoption.style.background = "url(" + icon + ") no-repeat";
		newoption.style.paddingLeft = "20px";
		if (userimages[i].mediaType != '' && userimages[i].imageName != '')
			newoption.appendChild(document
					.createTextNode(userimages[i].imageName + "_"
							+ userimages[i].mediaType));
		else
			newoption.appendChild(document
					.createTextNode(userimages[i].realname));
		newimageselect.appendChild(newoption);
	}

	
	var container = document.createElement('div');
	container.setAttribute("id", "containerPopup");
	document.body.appendChild(container);

	var containerStyle = document.getElementById('containerPopup').style;
	
	try {
		//for IE
		containerStyle = document.all.containerPopup.style;
	} catch (e) {
		containerStyle = document.getElementById('containerPopup').style;
	}

	var padding = 10;
	var popupWidth = 500;
	var popupHeiht = 250;

	containerStyle.top = getYOffset() + 100 + "px";
	containerStyle.left = ((width / 2) - (popupWidth / 2)) + "px";

	containerStyle.width = popupWidth + "px";
	containerStyle.height = popupHeiht + "px";

	containerStyle.zIndex = 1001;
	containerStyle.position = "absolute";
	containerStyle.display = "block";
	containerStyle.paddingLeft = padding + "px";
	containerStyle.paddingTop = padding + "px";
	containerStyle.paddingRight = padding + "px";
	containerStyle.paddingBottom = padding + "px";
	containerStyle.backgroundColor = "#FFFFFF";
	containerStyle.border = "none";

	var leftWidth = 50;
	var rightWidth = popupWidth - (padding * 2) - leftWidth;

	var table = document.createElement('table');
	table.setAttribute('border', '0');

	var row0 = document.createElement('tr');
	row0.setAttribute('valign', 'top');

	var col01 = document.createElement('td');
	col01.style.width = leftWidth + "px";
	//Default value
	col01.innerHTML = "Bullet";
	row0.appendChild(col01);

	var col02 = document.createElement('td');
	col02.setAttribute('valign', 'top');
	col02.appendChild(newimageselect);

	var browseButton = document.createElement('input');
	browseButton.setAttribute("title", "Browse Images");
	browseButton.setAttribute("type", "button");
	browseButton.setAttribute("value", "Browse");
	browseButton.onclick = function() {
		var index = newimageselect.id.substring(9);
		expandingImage(newimageselect, 7, index);
	}
	
	col02.appendChild(browseButton);

	//var tmpImage = document.createElement('img');
	//tmpImage.style.width = "50px";
	//col02.appendChild(tmpImage);
	/*
	 * newimageselect.onchange = function() { tmpImage.src = 'files/' +
	 * $F(newimageselect); }
	 */

	row0.appendChild(col02);
	//table.appendChild(row0);

	var mythead0 = document.createElement("thead"); //For IE
	mythead0.appendChild(row0);
	table.appendChild(mythead0);
	

	var row1 = document.createElement('tr');
	row1.setAttribute('valign', 'top');
	var col11 = document.createElement('td');
	col11.style.width = leftWidth + "px";
	//Default value	
	col11.innerHTML = "Text";
	row1.appendChild(col11);
	var col12 = document.createElement('td');
	var tmpInputText = document.createElement('textarea');
	tmpInputText.style.width = rightWidth + "px";
	tmpInputText.style.height = 150 + "px";
	tmpInputText.style.resize="none";
	col12.appendChild(tmpInputText);
	row1.appendChild(col12);
	
	//table.appendChild(row1);
	var mythead1 = document.createElement("thead"); //For IE
	mythead1.appendChild(row1);
	table.appendChild(mythead1);

	var row2 = document.createElement('tr');
	var col21 = document.createElement('td');
	//Default value	
	col21.innerHTML = "Video";
	row2.appendChild(col21);
	var col22 = document.createElement('td');
	// var tmpInputLink = document.createElement('input');
	// tmpInputLink.setAttribute('type', 'text');
	// tmpInputLink.style.width = rightWidth + "px";

	var newVideoSelect = document.createElement('select');
	newVideoSelect.id = 'video_id_' + count;
	newVideoSelect.name = newVideoSelect.id;
	for ( var i = 0; i < userListVideo.length; ++i) {
		var newoption = document.createElement('option');
		newoption.value = userListVideo[i].id;
		newoption.appendChild(document.createTextNode(userListVideo[i].realname));
		newVideoSelect.appendChild(newoption);
	}
	var videoImage = document.createElement('input');
	videoImage.id = "video_image_id_" + count;
	videoImage.name = videoImage.id;
	videoImage.setAttribute("type", "hidden");
	col22.appendChild(videoImage);
	
	newimageselect.onchange = function () {
		videoImage.value = newimageselect.value;
	}
	
	col22.appendChild(newVideoSelect);
	// col22.appendChild(tmpInputLink);
	row2.appendChild(col22);
	//table.appendChild(row2);
	var mythead2 = document.createElement("thead"); //For IE
	mythead2.appendChild(row2);
	table.appendChild(mythead2);

	var row3 = document.createElement('tr');
	//table.appendChild(row3);
	var mythead3 = document.createElement("thead"); //For IE
	mythead3.appendChild(row3);
	table.appendChild(mythead3);
	
	var col31 = document.createElement('td');
	row3.appendChild(col31);

	var col32 = document.createElement('td');
	row3.appendChild(col32);

	var okButton = document.createElement('input');
	okButton.setAttribute('type', 'button');
	okButton.setAttribute('value', 'OK');
	okButton.onclick = function() {
		if ($F(newVideoSelect)==-1) {
			alert("Please choose video!");
			return;
		}
		
		var li = document.createElement('li');
		li.setAttribute('id', 'lii_' + count);

		var newfields = document.createElement('span');
		newfields.style.padding = "5px 10px 5px 0px";
		
		var label = document.createElement('label');
		label.innerHTML = $F(tmpInputText);
		newfields.appendChild(label);
		
		var rowId = document.createElement('input');
		rowId.setAttribute('type', 'hidden');
		rowId.setAttribute('name', 'rowid_' + count);
		rowId.setAttribute('id', 'rowid_' + count);
		newfields.appendChild(rowId);

		var inputOrder = document.createElement('input');
		inputOrder.setAttribute('type', 'hidden');
		inputOrder.value = count;
		inputOrder.setAttribute('name', 'order_' + count);
		inputOrder.setAttribute('id', 'order_' + count);
		newfields.appendChild(inputOrder);

		var inputImage = document.createElement('input');
		inputImage.setAttribute('type', 'hidden');
		inputImage.value = $F(videoImage);
		inputImage.setAttribute('name', 'bullet_' + count);
		inputImage.setAttribute('id', 'bullet_' + count);
		newfields.appendChild(inputImage);

		var inputText = document.createElement('input');
		inputText.setAttribute('type', 'hidden');
		inputText.value = $F(tmpInputText);
		inputText.setAttribute('name', 'text_' + count);
		inputText.setAttribute('id', 'text_' + count);
		newfields.appendChild(inputText);

		var inputVideo = document.createElement('input');
		inputVideo.setAttribute('type', 'hidden');
		inputVideo.value = $F(newVideoSelect);
		inputVideo.setAttribute('name', 'video_' + count);
		inputVideo.setAttribute('id', 'video_' + count);
		newfields.appendChild(inputVideo);
		
		var inputBold = document.createElement('input');
        inputBold.setAttribute('type', 'hidden');
        inputBold.value = 0;
        inputBold.setAttribute('name', 'video_bold_' + count);
        inputBold.setAttribute('id', 'video_bold_' + count);
        newfields.appendChild(inputBold);
        
        var inputItalic = document.createElement('input');
        inputItalic.setAttribute('type', 'hidden');
        inputItalic.value = 0;
        inputItalic.setAttribute('name', 'video_italic_' + count);
        inputItalic.setAttribute('id', 'video_italic_' + count);
        newfields.appendChild(inputItalic);

		li.appendChild(newfields);

		var newcontrols = document.createElement('span');
		newcontrols.className = 'controls';
		
		var newboldbutton=document.createElement('img');
        newboldbutton.src ='css/tino/bold-hover.png';
        newboldbutton.alt = newboldbutton.title = 'Bold';
        newboldbutton.id = 'video_boldbutton_' + count;
        newboldbutton.style.width='17px';
        newboldbutton.style.height='17px';
        //newboldbutton.style.marginLeft ='5px';
        newboldbutton.style.marginRight ='9px';
        newcontrols.appendChild(newboldbutton);
        newboldbutton.onclick = function(){
            var newTextView = $F(inputText);
            if($F(inputBold) == 1){
                newTextView = newTextView.replace("<b>","");
                newTextView = newTextView.replace("</b>","");
                inputBold.value= 0;
                newboldbutton.src ='css/tino/bold-hover.png';
            }
            else{
                newTextView = "<b>" + newTextView + "</b>"
                inputBold.value= 1;
                newboldbutton.src ='css/tino/bold.png';
            }
            inputText.value = newTextView;
            label.innerHTML = newTextView;
            updateEmulatorVideoSection();
            
        }
        var newitalicbutton=document.createElement('img');
        newitalicbutton.src ='css/tino/italic-hover.png';
        newitalicbutton.alt = newboldbutton.title = 'Italic';
        newitalicbutton.id = 'video_italicbutton_' + count;
        newitalicbutton.style.width='17px';
        newitalicbutton.style.height='17px';
        newcontrols.appendChild(newitalicbutton);
        newitalicbutton.onclick = function(){
            var newTextView = $F(inputText);
            if($F(inputItalic) == 1){
                newTextView = newTextView.replace("<i>","");
                newTextView = newTextView.replace("</i>","");
                inputItalic.value= 0;
                newitalicbutton.src ='css/tino/italic-hover.png';
            }
            else{
                newTextView = "<i>" + newTextView + "</i>"
                inputItalic.value= 1;
                newitalicbutton.src ='css/tino/italic.png';
            }
            inputText.value = newTextView;
            label.innerHTML = newTextView;
            updateEmulatorVideoSection();
            
        }
		
		//ruler color block
		rulerColorBlockButtonCall(count, newcontrols, 'video', 'none');		
		
		var newupbutton = document.createElement('img');
		newupbutton.src = 'img/arrow_up.png';
		newupbutton.alt = newupbutton.title = 'Move Up';
		newupbutton.id = 'upbutton_' + count;
		newupbutton.onclick = function() {
			var ul = $('pagelist');
			moveListRowUp(ul, li);
			updateEmulatorVideoSection();
		}
		newcontrols.appendChild(newupbutton);

		var newdownbutton = document.createElement('img');
		newdownbutton.src = 'img/arrow_down.png';
		newdownbutton.alt = newdownbutton.title = 'Move Down';
		newdownbutton.id = 'downbutton_' + count;
		newdownbutton.onclick = function() {
			var ul = $('pagelist');
			moveListRowDown(ul, li);
			updateEmulatorVideoSection();
		}
		newcontrols.appendChild(newdownbutton);

		var newtopbutton = document.createElement('img');
		newtopbutton.src = 'img/top.png';
		newtopbutton.alt = newtopbutton.title = 'Move Top';
		newtopbutton.id = 'topbutton_' + count;
		newtopbutton.onclick = function() {
			var ul = $('pagelist');
			moveListRowTop(ul, li);
			updateEmulatorVideoSection();
		}
		newcontrols.appendChild(newtopbutton);

		var newbottombutton = document.createElement('img');
		newbottombutton.src = 'img/bottom.png';
		newbottombutton.alt = newbottombutton.title = 'Move Bottom';
		newbottombutton.id = 'bottombutton_' + count;
		newbottombutton.onclick = function() {
			var ul = $('pagelist');
			moveListRowBotton(ul, li);
			updateEmulatorVideoSection();
		}
		newcontrols.appendChild(newbottombutton);
		
		
		// play
		var playLink = document.createElement('img');
		var playLinkControl = document.createElement('span');
		playLinkControl.className = 'controls';

		playLink.src = 'img/play.png';
		playLink.alt = ' Preview  ';
		playLink.title = 'Preview';
		playLink.id = 'paly_' + count;
		playLink.className='buttonOver';
		playLink.onclick = function() {
			redirect("files/"+$F(newVideoSelect));
		}
	
		playLinkControl.appendChild(playLink);
		li.appendChild(playLinkControl);
		
		// if not sound apply
		if ($F(newVideoSelect) == -1) {
			playLink.style.display = 'none';
		}else {
			playLink.style.display = 'inline';
		}

		var newremovebutton = document.createElement('img');
		newremovebutton.src = 'img/bin_closed.png';
		newremovebutton.alt = newremovebutton.title = 'Remove';
		newremovebutton.id = 'removebutton_' + count;
		newremovebutton.onclick = function() {
			$(li).remove();
			var ul = $('pagelist');
			resetListOrder(ul);
			
			updateEmulatorVideoSection();
		}
		newcontrols.appendChild(newremovebutton);

		var neweditbutton = document.createElement('img');
		neweditbutton.src = 'img/design.png';
		neweditbutton.alt = neweditbutton.title = 'Edit';
		neweditbutton.id = 'editbutton_' + count;
		neweditbutton.onclick = function() {
			disablePage();
			showEditPopupVideo(label, inputImage, inputText, inputVideo, playLink);
		}
		newcontrols.appendChild(neweditbutton);
		li.appendChild(newcontrols);

		con.appendChild(li);
		count++;
		updateEmulatorVideoSection();
		enablePage();
	}
	col32.appendChild(okButton);

	var cancelButton = document.createElement('input');
	cancelButton.setAttribute('type', 'button');
	cancelButton.setAttribute('value', 'Cancel');
	cancelButton.onclick = function() {
		enablePage();
	}
	col32.appendChild(cancelButton);

	container.appendChild(table);
}

function showEditPopupVideo(label, inputImage, inputText, inputVideo, playButton) {	
	var height = document.body.clientHeight;
	if (document.documentElement.scrollHeight > height) {
		height = document.documentElement.scrollHeight;
	}
	if (document.documentElement.clientHeight > height) {
		height = document.documentElement.clientHeight;
	}

	var width = document.body.clientWidth;
	if (document.documentElement.scrollWidth > width) {
		width = document.documentElement.scrollWidth;
	}
	if (document.documentElement.clientWidth) {
		width = document.documentElement.clientWidth;
	}

	var newimageselect = document.createElement('select');
	newimageselect.id = 'image_id_' + count;
	newimageselect.name = newimageselect.id;
	newimageselect.style.width = getComboWidth() + "px";
	//newimageselect.style.maxWidth = "350px";
	var fullName;
	var name;
	var ext;
	var icon;
	for ( var i = 0; i < userimages.length; ++i) {
		var newoption = document.createElement('option');
		if ($F(inputImage) == userimages[i].id) {
			newoption.setAttribute('selected', 'selected');
		}
		newoption.value = userimages[i].id;
		fullName = userimages[i].name;
		name = fullName.substring(0, fullName.length - 4);
		ext = fullName.substring(fullName.length - 4);
		icon = "files/" + name + "_icon" + ext;
		newoption.style.background = "url(" + icon + ") no-repeat";
		newoption.style.paddingLeft = "20px";
		if (userimages[i].mediaType != '' && userimages[i].imageName != '')
			newoption.appendChild(document
					.createTextNode(userimages[i].imageName + "_"
							+ userimages[i].mediaType));
		else
			newoption.appendChild(document
					.createTextNode(userimages[i].realname));
		newimageselect.appendChild(newoption);
	}

	//Add the selected value to the combo if it's not exist
	updateParentCombo(newimageselect, $F(inputImage));
	
	var container = document.createElement('div');
	container.setAttribute("id", "containerPopup");
	document.body.appendChild(container);
	var containerStyle = document.getElementById('containerPopup').style;

	try {
		//for IE
		containerStyle = document.all.containerPopup.style;
	} catch (e) {
		containerStyle = document.getElementById('containerPopup').style;
	}
	
	var padding = 10;
	var popupWidth = 500;
	var popupHeiht = 250;

	containerStyle.top = getYOffset() + 100 + "px";
	
	containerStyle.left = ((width / 2) - (popupWidth / 2)) + "px";

	containerStyle.width = popupWidth + "px";
	containerStyle.height = popupHeiht + "px";

	containerStyle.zIndex = 1001;
	containerStyle.position = "absolute";
	containerStyle.display = "block";
	containerStyle.paddingLeft = padding + "px";
	containerStyle.paddingTop = padding + "px";
	containerStyle.paddingRight = padding + "px";
	containerStyle.paddingBottom = padding + "px";
	containerStyle.backgroundColor = "#FFFFFF";

	var leftWidth = 50;
	var rightWidth = popupWidth - (padding * 2) - leftWidth;

	var table = document.createElement('table');
	table.setAttribute('border', '0');

	var row0 = document.createElement('tr');
	row0.setAttribute('valign', 'top');

	var col01 = document.createElement('td');
	col01.style.width = leftWidth + "px";
	//Default value	
	col01.innerHTML = "Bullet";
	row0.appendChild(col01);

	var col02 = document.createElement('td');
	col02.setAttribute('valign', 'top');
	col02.appendChild(newimageselect);
	
	var videoImage = document.createElement('input');
	videoImage.id = "video_image_id_" + count;
	videoImage.name = videoImage.id;
	videoImage.setAttribute("type", "hidden");
	col02.appendChild(videoImage);

	newimageselect.onchange = function () {
		videoImage.value = newimageselect.value;
	}
	
	var browseButton = document.createElement('input');
	browseButton.setAttribute("type", "button");
	browseButton.setAttribute("title", "Browse Images");
	browseButton.setAttribute("value", "Browse");
	browseButton.onclick = function() {
		var index = newimageselect.id.substring(9);
		expandingImage(newimageselect, 7, index);
	}
	col02.appendChild(browseButton);

	//var tmpImage = document.createElement('img');
	//tmpImage.style.width = "50px";
	//col02.appendChild(tmpImage);
	/*
	 * newimageselect.onchange = function() { tmpImage.src = 'files/' +
	 * $F(newimageselect); }
	 */

	row0.appendChild(col02);
	//table.appendChild(row0);
	var mythead0 = document.createElement("thead"); //For IE
	mythead0.appendChild(row0);
	table.appendChild(mythead0);

	var row1 = document.createElement('tr');
	row1.setAttribute('valign', 'top');
	var col11 = document.createElement('td');
	col11.style.width = leftWidth + "px";
	//Default value	
	col11.innerHTML = "Text";
	row1.appendChild(col11);
	var col12 = document.createElement('td');
	var tmpInputText = document.createElement('textarea');
	tmpInputText.style.width = rightWidth + "px";
	tmpInputText.style.height = 150 + "px";
	tmpInputText.style.resize="none";
	tmpInputText.value = inputText.value;
	col12.appendChild(tmpInputText);
	row1.appendChild(col12);
	//table.appendChild(row1);
	var mythead1 = document.createElement("thead"); //For IE
	mythead1.appendChild(row1);
	table.appendChild(mythead1);

	var row2 = document.createElement('tr');
	var col21 = document.createElement('td');
	//Default value	
	col21.innerHTML = "Video";
	row2.appendChild(col21);
	var col22 = document.createElement('td');
	// var tmpInputLink = document.createElement('input');
	// tmpInputLink.setAttribute('type', 'text');
	// tmpInputLink.style.width = rightWidth + "px";
	// tmpInputLink.value = inputLink.value;
	// col22.appendChild(tmpInputLink);

	var newVideoSelect = document.createElement('select');
	newVideoSelect.id = 'video_id_' + count;
	newVideoSelect.name = newVideoSelect.id;
	for ( var i = 0; i < userListVideo.length; ++i) {
		var newoption = document.createElement('option');
		if ($F(inputVideo) == userListVideo[i].id) {
			newoption.setAttribute('selected', 'selected');
		}
		newoption.value = userListVideo[i].id;
		newoption.appendChild(document.createTextNode(userListVideo[i].realname));
		newVideoSelect.appendChild(newoption);
	}
	col22.appendChild(newVideoSelect);

	row2.appendChild(col22);
	//table.appendChild(row2);
	var mythead2 = document.createElement("thead"); //For IE
	mythead2.appendChild(row2);
	table.appendChild(mythead2);

	var row3 = document.createElement('tr');
	//table.appendChild(row3);
	var mythead3 = document.createElement("thead"); //For IE
	mythead3.appendChild(row3);
	table.appendChild(mythead3);
	var col31 = document.createElement('td');
	row3.appendChild(col31);

	var col32 = document.createElement('td');
	row3.appendChild(col32);

	var okButton = document.createElement('input');
	okButton.setAttribute('type', 'button');
	okButton.setAttribute('value', 'OK');
	okButton.onclick = function() {
		if ($F(newVideoSelect)==-1) {
			alert("Please choose video!");
			return;
		}
		
		label.innerHTML = $F(tmpInputText);
		inputImage.value = $F(newimageselect);
		inputText.value = $F(tmpInputText);
		inputVideo.value = $F(newVideoSelect);
		if (playButton != undefined) {
			playButton.onclick = function() {
				redirect("files/"+$F(newVideoSelect));
			}
			if (inputVideo.value == -1) {
				playButton.style.display = 'none';
			}else {
				playButton.style.display = 'inline';
			}
		}
		updateEmulatorVideoSection();
		enablePage();
	}
	col32.appendChild(okButton);

	var cancelButton = document.createElement('input');
	cancelButton.setAttribute('type', 'button');
	cancelButton.setAttribute('value', 'Cancel');
	cancelButton.onclick = function() {
		enablePage();
	}
	col32.appendChild(cancelButton);

	container.appendChild(table);
}

function showAddPopupListBullets(con) {	
	count = getIndexCount($('pagelistBullet'));//get indexCount
	var height = document.body.clientHeight;
	if (document.documentElement.scrollHeight > height) {
		height = document.documentElement.scrollHeight;
	}
	if (document.documentElement.clientHeight > height) {
		height = document.documentElement.clientHeight;
	}

	var width = document.body.clientWidth;
	if (document.documentElement.scrollWidth > width) {
		width = document.documentElement.scrollWidth;
	}
	if (document.documentElement.clientWidth) {
		width = document.documentElement.clientWidth;
	}

	var newimageselect = document.createElement('select');
	newimageselect.id = 'image_id_' + count;
	newimageselect.name = newimageselect.id;
	newimageselect.style.width = getComboWidth() + "px";
	//newimageselect.style.maxWidth = "350px";
	var fullName;
	var name;
	var ext;
	var icon;
	for ( var i = 0; i < userimages.length; ++i) {
		var newoption = document.createElement('option');
		newoption.value = userimages[i].id;
		fullName = userimages[i].name;
		name = fullName.substring(0, fullName.length - 4);
		ext = fullName.substring(fullName.length - 4);
		icon = "files/" + name + "_icon" + ext;
		newoption.style.background = "url(" + icon + ") no-repeat";
		newoption.style.paddingLeft = "20px";
		if (userimages[i].mediaType != '' && userimages[i].imageName != '')
			newoption.appendChild(document
					.createTextNode(userimages[i].imageName + "_"
							+ userimages[i].mediaType));
		else
			newoption.appendChild(document
					.createTextNode(userimages[i].realname));
		
		if(userimages[i].imageName.indexOf('bullet_list') > -1){
			newoption.setAttribute('selected','selected');
		}
		newimageselect.appendChild(newoption);
	}

	var imageBulletId = document.createElement("input");
	imageBulletId.id = "img_text_bullet_id_"+count;
	imageBulletId.name = imageBulletId.name;
	imageBulletId.value = newimageselect.value;//get default value
	imageBulletId.setAttribute("type", "hidden");
	
	newimageselect.onchange = function() {
		imageBulletId.value = newimageselect.value;
	};
	
	var container = document.createElement('div');
	container.setAttribute("id", "containerPopup");
	document.body.appendChild(container);

	var containerStyle = document.getElementById('containerPopup').style;
	
	try {
		//for IE
		containerStyle = document.all.containerPopup.style;
	} catch (e) {
		containerStyle = document.getElementById('containerPopup').style;
	}

	var padding = 10;
	var popupWidth = 500;
	var popupHeiht = 250;

	containerStyle.top = getYOffset() + 100 + "px";
	containerStyle.left = ((width / 2) - (popupWidth / 2)) + "px";

	containerStyle.width = popupWidth + "px";
	containerStyle.height = popupHeiht + "px";

	containerStyle.zIndex = 1001;
	containerStyle.position = "absolute";
	containerStyle.display = "block";
	containerStyle.paddingLeft = padding + "px";
	containerStyle.paddingTop = padding + "px";
	containerStyle.paddingRight = padding + "px";
	containerStyle.paddingBottom = padding + "px";
	containerStyle.backgroundColor = "#FFFFFF";
	containerStyle.border = "none";

	var leftWidth = 50;
	var rightWidth = popupWidth - (padding * 2) - leftWidth;

	var table = document.createElement('table');
	table.setAttribute('border', '0');

	var row0 = document.createElement('tr');
	row0.setAttribute('valign', 'top');

	var col01 = document.createElement('td');
	col01.style.width = leftWidth + "px";
	//Default value
	col01.innerHTML = "Bullet";
	row0.appendChild(col01);

	var col02 = document.createElement('td');
	col02.setAttribute('valign', 'top');
	col02.appendChild(newimageselect);
	col02.appendChild(imageBulletId);

	var browseButton = document.createElement('input');
	browseButton.setAttribute("title", "Browse Images");
	browseButton.setAttribute("type", "button");
	browseButton.setAttribute("value", "Browse");
	browseButton.onclick = function() {
		var index = newimageselect.id.substring(9);
		expandingImage(newimageselect, 14, index);
	}
	
	col02.appendChild(browseButton);

	//var tmpImage = document.createElement('img');
	//tmpImage.style.width = "50px";
	//col02.appendChild(tmpImage);
	/*
	 * newimageselect.onchange = function() { tmpImage.src = 'files/' +
	 * $F(newimageselect); }
	 */
	
	row0.appendChild(col02);
	//table.appendChild(row0);

	var mythead0 = document.createElement("thead"); //For IE
	mythead0.appendChild(row0);
	table.appendChild(mythead0);
	

	var row1 = document.createElement('tr');
	row1.setAttribute('valign', 'top');
	var col11 = document.createElement('td');
	col11.style.width = leftWidth + "px";
	//Default value	
	col11.innerHTML = "Text";
	row1.appendChild(col11);
	var col12 = document.createElement('td');
	var tmpInputText = document.createElement('textarea');
	tmpInputText.style.width = rightWidth + "px";
	tmpInputText.style.height = 150 + "px";
	tmpInputText.style.resize="none";
	col12.appendChild(tmpInputText);
	row1.appendChild(col12);
	
	//table.appendChild(row1);
	var mythead1 = document.createElement("thead"); //For IE
	mythead1.appendChild(row1);
	table.appendChild(mythead1);

	var row2 = document.createElement('tr');
	//table.appendChild(row2);
	var mythead2 = document.createElement("thead"); //For IE
	mythead2.appendChild(row2);
	table.appendChild(mythead2);
	
	var col21 = document.createElement('td');
	row2.appendChild(col21);

	var col22 = document.createElement('td');
	row2.appendChild(col22);

	var okButton = document.createElement('input');
	okButton.setAttribute('type', 'button');
	okButton.setAttribute('value', 'OK');
	okButton.onclick = function() {
		var li = document.createElement('li');
		li.setAttribute('id', 'bullet_li_' + count);

		var newfields = document.createElement('span');
		newfields.style.padding = "5px 10px 5px 0px";
		
		var label = document.createElement('label');
		label.innerHTML = $F(tmpInputText);
		newfields.appendChild(label);
		
		var rowId = document.createElement('input');
		rowId.setAttribute('type', 'hidden');
		rowId.setAttribute('name', 'rowid_' + count);
		rowId.setAttribute('id', 'row_id_' + count);
		newfields.appendChild(rowId);

		var inputOrder = document.createElement('input');
		inputOrder.setAttribute('type', 'hidden');
		inputOrder.value = count;
		inputOrder.setAttribute('name', 'order_' + count);
		inputOrder.setAttribute('id', 'order_' + count);
		newfields.appendChild(inputOrder);

		var inputImage = document.createElement('input');
		inputImage.setAttribute('type', 'hidden');
		inputImage.value = $F(imageBulletId);
		inputImage.setAttribute('name', 'bullet_' + count);
		inputImage.setAttribute('id', 'bullet_' + count);
		newfields.appendChild(inputImage);

		var inputText = document.createElement('input');
		inputText.setAttribute('type', 'hidden');
		inputText.value = $F(tmpInputText);
		inputText.setAttribute('name', 'text_' + count);
		inputText.setAttribute('id', 'text_' + count);
		newfields.appendChild(inputText);

		li.appendChild(newfields);

		var newcontrols = document.createElement('span');
		newcontrols.className = 'controls';

		var newupbutton = document.createElement('img');
		newupbutton.src = 'img/arrow_up.png';
		newupbutton.alt = newupbutton.title = 'Move Up';
		newupbutton.id = 'upbutton_' + count;
		newupbutton.onclick = function() {
			var ul = $('pagelistBullet');
			moveListRowUp(ul, li);
			//updateEmulatorSoundSection();
			updateEmulatorListBullet('bulletList');
		}
		newcontrols.appendChild(newupbutton);

		var newdownbutton = document.createElement('img');
		newdownbutton.src = 'img/arrow_down.png';
		newdownbutton.alt = newdownbutton.title = 'Move Down';
		newdownbutton.id = 'downbutton_' + count;
		newdownbutton.onclick = function() {
			var ul = $('pagelistBullet');
			moveListRowDown(ul, li);
			//updateEmulatorSoundSection();
			updateEmulatorListBullet('bulletList');
		}
		newcontrols.appendChild(newdownbutton);

		var newtopbutton = document.createElement('img');
		newtopbutton.src = 'img/top.png';
		newtopbutton.alt = newtopbutton.title = 'Move Top';
		newtopbutton.id = 'topbutton_' + count;
		newtopbutton.onclick = function() {
			var ul = $('pagelistBullet');
			moveListRowTop(ul, li);
			//updateEmulatorSoundSection();
			updateEmulatorListBullet('bulletList');
		}
		newcontrols.appendChild(newtopbutton);

		var newbottombutton = document.createElement('img');
		newbottombutton.src = 'img/bottom.png';
		newbottombutton.alt = newbottombutton.title = 'Move Bottom';
		newbottombutton.id = 'bottombutton_' + count;
		newbottombutton.onclick = function() {
			var ul = $('pagelistBullet');
			moveListRowBotton(ul, li);
			//updateEmulatorSoundSection();
			updateEmulatorListBullet('bulletList');
		}
		newcontrols.appendChild(newbottombutton);
		
		

		var newremovebutton = document.createElement('img');
		newremovebutton.src = 'img/bin_closed.png';
		newremovebutton.alt = newremovebutton.title = 'Remove';
		newremovebutton.id = 'removebutton_' + count;
		newremovebutton.onclick = function() {
			$(li).remove();
			var ul = $('pagelistBullet');
			resetListOrder(ul);
			//updateEmulatorSoundSection();
			updateEmulatorListBullet('bulletList');
		}
		newcontrols.appendChild(newremovebutton);

		var newremovebutton = document.createElement('img');
		newremovebutton.src = 'img/design.png';
		newremovebutton.alt = newremovebutton.title = 'Edit';
		newremovebutton.id = 'editbutton_' + count;
		newremovebutton.onclick = function() {
			disablePage();
			//showEditPopupSoundBoard(label, inputImage, inputText, inputAudio, playLink);
			showEditPopupListBullets(label, inputImage, inputText);
		}
		newcontrols.appendChild(newremovebutton);
		li.appendChild(newcontrols);

		con.appendChild(li);
		count++;
		//updateEmulatorSoundSection();
		updateEmulatorListBullet('bulletList');
		enablePage();
	}
	col22.appendChild(okButton);

	var cancelButton = document.createElement('input');
	cancelButton.setAttribute('type', 'button');
	cancelButton.setAttribute('value', 'Cancel');
	cancelButton.onclick = function() {
		enablePage();
	}
	col22.appendChild(cancelButton);

	container.appendChild(table);
}


function showEditPopupListBullets(label, inputImage, inputText) {

	var height = document.body.clientHeight;
	if (document.documentElement.scrollHeight > height) {
		height = document.documentElement.scrollHeight;
	}
	if (document.documentElement.clientHeight > height) {
		height = document.documentElement.clientHeight;
	}

	var width = document.body.clientWidth;
	if (document.documentElement.scrollWidth > width) {
		width = document.documentElement.scrollWidth;
	}
	if (document.documentElement.clientWidth) {
		width = document.documentElement.clientWidth;
	}

	var newimageselect = document.createElement('select');
	newimageselect.id = 'image_id_' + count;
	newimageselect.name = newimageselect.id;
	newimageselect.style.width = getComboWidth() + "px";
	//newimageselect.style.maxWidth = "350px";
	var fullName;
	var name;
	var ext;
	var icon;
	for ( var i = 0; i < userimages.length; ++i) {
		var newoption = document.createElement('option');
		if ($F(inputImage) == userimages[i].id) {
			newoption.setAttribute('selected', 'selected');
		}
		newoption.value = userimages[i].id;
		fullName = userimages[i].name;
		name = fullName.substring(0, fullName.length - 4);
		ext = fullName.substring(fullName.length - 4);
		icon = "files/" + name + "_icon" + ext;
		newoption.style.background = "url(" + icon + ") no-repeat";
		newoption.style.paddingLeft = "20px";
		if (userimages[i].mediaType != '' && userimages[i].imageName != '')
			newoption.appendChild(document
					.createTextNode(userimages[i].imageName + "_"
							+ userimages[i].mediaType));
		else
			newoption.appendChild(document
					.createTextNode(userimages[i].realname));
		newimageselect.appendChild(newoption);
	}
	
	var imageBulletId = document.createElement("input");
	imageBulletId.id = "img_text_bullet_id_"+count;
	imageBulletId.name = imageBulletId.name;
	imageBulletId.setAttribute("type", "hidden");
	
	newimageselect.onchange = function() {
		imageBulletId.value = newimageselect.value;
	};
	
	//Add the selected value to the combo if it's not exist
	updateParentCombo(newimageselect, $F(inputImage));
	
	var container = document.createElement('div');
	container.setAttribute("id", "containerPopup");
	document.body.appendChild(container);
	var containerStyle = document.getElementById('containerPopup').style;

	try {
		//for IE
		containerStyle = document.all.containerPopup.style;
	} catch (e) {
		containerStyle = document.getElementById('containerPopup').style;
	}
	
	var padding = 10;
	var popupWidth = 500;
	var popupHeiht = 250;

	containerStyle.top = getYOffset() + 100 + "px";
	
	containerStyle.left = ((width / 2) - (popupWidth / 2)) + "px";

	containerStyle.width = popupWidth + "px";
	containerStyle.height = popupHeiht + "px";

	containerStyle.zIndex = 1001;
	containerStyle.position = "absolute";
	containerStyle.display = "block";
	containerStyle.paddingLeft = padding + "px";
	containerStyle.paddingTop = padding + "px";
	containerStyle.paddingRight = padding + "px";
	containerStyle.paddingBottom = padding + "px";
	containerStyle.backgroundColor = "#FFFFFF";

	var leftWidth = 50;
	var rightWidth = popupWidth - (padding * 2) - leftWidth;

	var table = document.createElement('table');
	table.setAttribute('border', '0');

	var row0 = document.createElement('tr');
	row0.setAttribute('valign', 'top');

	var col01 = document.createElement('td');
	col01.style.width = leftWidth + "px";
	//Default value	
	col01.innerHTML = "Bullet";
	row0.appendChild(col01);

	var col02 = document.createElement('td');
	col02.setAttribute('valign', 'top');
	col02.appendChild(newimageselect);
	col02.appendChild(imageBulletId);

	var browseButton = document.createElement('input');
	browseButton.setAttribute("type", "button");
	browseButton.setAttribute("title", "Browse Images");
	browseButton.setAttribute("value", "Browse");
	browseButton.onclick = function() {
		var index = newimageselect.id.substring(9);
		expandingImage(newimageselect, 14, index);
	}
	col02.appendChild(browseButton);

	//var tmpImage = document.createElement('img');
	//tmpImage.style.width = "50px";
	//col02.appendChild(tmpImage);
	/*
	 * newimageselect.onchange = function() { tmpImage.src = 'files/' +
	 * $F(newimageselect); }
	 */

	row0.appendChild(col02);
	//table.appendChild(row0);
	var mythead0 = document.createElement("thead"); //For IE
	mythead0.appendChild(row0);
	table.appendChild(mythead0);

	var row1 = document.createElement('tr');
	row1.setAttribute('valign', 'top');
	var col11 = document.createElement('td');
	col11.style.width = leftWidth + "px";
	//Default value	
	col11.innerHTML = "Text";
	row1.appendChild(col11);
	var col12 = document.createElement('td');
	var tmpInputText = document.createElement('textarea');
	tmpInputText.style.width = rightWidth + "px";
	tmpInputText.style.height = 150 + "px";
	tmpInputText.style.resize="none";
	tmpInputText.value = inputText.value;
	col12.appendChild(tmpInputText);
	row1.appendChild(col12);
	//table.appendChild(row1);
	var mythead1 = document.createElement("thead"); //For IE
	mythead1.appendChild(row1);
	table.appendChild(mythead1);

	var row2 = document.createElement('tr');
	var mythead2 = document.createElement("thead"); //For IE
	mythead2.appendChild(row2);
	table.appendChild(mythead2);
	var col21 = document.createElement('td');
	row2.appendChild(col21);

	var col22 = document.createElement('td');
	col22.setAttribute('colspan','2');
	row2.appendChild(col22);

	var okButton = document.createElement('input');
	okButton.setAttribute('type', 'button');
	okButton.setAttribute('value', 'OK');
	okButton.onclick = function() {
		label.innerHTML = $F(tmpInputText);
		inputImage.value = $F(newimageselect);
		inputText.value = $F(tmpInputText);
		//updateEmulatorSoundSection();
		updateEmulatorListBullet('bulletList');
		enablePage();
	}
	col22.appendChild(okButton);

	var cancelButton = document.createElement('input');
	cancelButton.setAttribute('type', 'button');
	cancelButton.setAttribute('value', 'Cancel');
	cancelButton.onclick = function() {
		enablePage();
	}
	col22.appendChild(cancelButton);

	container.appendChild(table);
}

function getComboWidth(){
	var comboWidth = 360;
	if(browserDetect.browser == 'Opera' || browserDetect.browser == 'Chrome' || browserDetect.browser == 'Explorer') {
		comboWidth = 370;
	}
	
	return comboWidth;
}