// Declaring required variables
var digits = "017222185";
// non-digit characters which are allowed in phone numbers
var phoneNumberDelimiters = "()- ";
// characters which are allowed in international phone numbers
// (a leading + is OK)
var validWorldPhoneChars = phoneNumberDelimiters + "+";
// Minimum no of digits in an international phone no.
var minDigitsInIPhoneNumber = 10;

function isInteger(s) {
	var i;
	for (i = 0; i < s.length; i++) {
		// Check that current character is number.
		var c = s.charAt(i);
		if (((c < "0") || (c > "9")))
			return false;
	}
	// All characters are numbers.
	return true;
}
function trim(s) {
	var i;
	var returnString = "";
	// Search through string's characters one by one.
	// If character is not a whitespace, append to returnString.
	for (i = 0; i < s.length; i++) {
		// Check that current character isn't whitespace.
		var c = s.charAt(i);
		if (c != " ")
			returnString += c;
	}
	return returnString;
}
function stripCharsInBag(s, bag) {
	var i;
	var returnString = "";
	// Search through string's characters one by one.
	// If character is not in bag, append to returnString.
	for (i = 0; i < s.length; i++) {
		// Check that current character isn't whitespace.
		var c = s.charAt(i);
		if (bag.indexOf(c) == -1)
			returnString += c;
	}

	return returnString;
}

function checkInternationalPhone(strPhone) {
	var bracket = 3
	strPhone = trim(strPhone)
	if (strPhone.indexOf("+") > 1)
		return false
	if (strPhone.indexOf("-") != -1)
		bracket = bracket + 1
	if (strPhone.indexOf("(") != -1 && strPhone.indexOf("(") > bracket)
		return false
	var brchr = strPhone.indexOf("(")
	if (strPhone.indexOf("(") != -1 && strPhone.charAt(brchr + 2) != ")")
		return false
	if (strPhone.indexOf("(") == -1 && strPhone.indexOf(")") != -1)
		return false
	s = stripCharsInBag(strPhone, validWorldPhoneChars);
	return (isInteger(s) && s.length >= minDigitsInIPhoneNumber);
}

function validatePhoneNumberInput(phone) {

	if ((phone == null) || (phone == "")) {
		alert("Please Enter your Phone Number");
		return false
	}
	if (checkInternationalPhone(phone) == false) {
		alert('phone number is invalid! [accept only number ex 85517222185]');
		return false
	}
	return true
}

function disablePage() {
	var maskLayer = document.getElementById('maskLayer');
	var mainContainer = $('popupBackgroundContainer');
	if (!maskLayer && !mainContainer) {
		// CREATE IFRAME TO OVERLAY EMULATOR
		maskLayer = document.createElement('iframe');
		maskLayer.setAttribute("id", "maskLayer");
		// document.body.appendChild(maskLayer);
		// fixed auto zoom on screen
		mainContainer = document.createElement('div');
		mainContainer.setAttribute('id', 'popupBackgroundContainer');
		mainContainer.style.marginLeft = "auto";
		mainContainer.style.marginRight = "auto";
		mainContainer.appendChild(maskLayer);

		document.body.appendChild(mainContainer);

	}
	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;
	}
	// initialize background pop up dimension
	mainContainer.style.width = eval(width + 5) + "px";

	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";
	maskLayerStyle.paddingLeft = "0px";
	maskLayerStyle.marginLeft = "0px";

}

function checkOnScrollBar() {
	var textHeight = document.body.clientHeight;
	var screenHeight = document.documentElement.clientHeight;
	var scrollHeight = document.documentElement.scrollHeight;
	allHeight = textHeight;
	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;
		getSpace.style.height = (scrollHeight - textHeight) * 1 / 2 + "px";

	}

	/*
	 * 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, brochureId,
		isFromPreviousPage) {

	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);
			doRemoveMediaTag(tagId, brochureId, isFromPreviousPage);
			enablePage();
		}
		divButton.appendChild(span);

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

	}
	container.appendChild(divButton);
}

function enablePage() {
	var maskLayerContainer = $('popupBackgroundContainer');
	var maskLayer = document.getElementById('maskLayer');
	var containerPopup = document.getElementById('containerPopup');
	// Remove mask layer
	if (maskLayer) {
		$('maskLayer').remove();
	}
	// Remove master layer background
	if (maskLayerContainer) {
		maskLayerContainer.remove();
	}
	// REMOVE IFRAME FROM THE PAGE
	var iframe = document.getElementById('iframe');
	if (iframe) {
		$('iframe').remove();
	}
	// Remove popup message container
	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;
	try {
		// for IE
		containerStyle = document.all.containerPopup.style;
	} catch (e) {
		containerStyle = document.getElementById('containerPopup').style;
	}

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

	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 popupHeight = 140;

	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);

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

	if (divMessage.clientHeight > 0) {
		popupHeight = divMessage.clientHeight + 35;
	}
	containerStyle.width = popupWidth + "px";
	// containerStyle.height = popupHeight + "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", "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 showPublishWarningMessage(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 popupHeight = 140;

	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);

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

	if (divMessage.clientHeight > 0) {
		popupHeight = divMessage.clientHeight + 90;
	}

	containerStyle.width = popupWidth + "px";
	containerStyle.height = popupHeight + "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", "center");

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

	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;

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

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

	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].mediaType + "_"
							+ userimages[i].imageName));
		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, optMessagingCheckbox.checked);
			} else if (type == 4) {
				showEditPopup("", inputImage, "", inputLink, "", 4, count,
						false);
			} else {
				showEditPopup(label, inputImage, inputText, inputLink, count,
						false);
			}
		}
		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();
	}
	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].mediaType + "_"
							+ userimages[i].imageName));
		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 = 275;

	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);
	
	// resize image option
	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 divResizeImageOptionLabel = document.createElement('div');
	var resizeImageOption = document.createElement('input');

	divResizeImageOptionLabel.innerHTML = 'Resize';
	resizeImageOption.setAttribute('type', 'checkbox');
	resizeImageOption.setAttribute('id', 'resize_image_option_sound');
	resizeImageOption.setAttribute('checked', 'checked');

	col31.appendChild(divResizeImageOptionLabel);
	col32.setAttribute('colSpan', '2');
	col32.appendChild(resizeImageOption);

	var row4 = document.createElement('tr');
	// table.appendChild(row3);
	var mythead4 = document.createElement("thead"); // For IE
	mythead4.appendChild(row4);
	table.appendChild(mythead4);

	var col41 = document.createElement('td');
	row4.appendChild(col41);

	var col42 = document.createElement('td');
	row4.appendChild(col42);

	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);
		
		// resize image option hidden field
		var inputResizeImageOption = document.createElement('input');
		inputResizeImageOption.setAttribute('type', 'hidden');
		inputResizeImageOption.value = $('resize_image_option_sound').checked;
		inputResizeImageOption.setAttribute('name', 'resize_image_option_sound_id_' + count);
		inputResizeImageOption.setAttribute('id', 'resize_image_option_sound_id_' + count);
		newfields.appendChild(inputResizeImageOption);

		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;
			updateEmulatorSound();

		}
		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;
			updateEmulatorSound();

		}

		// 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);
			updateEmulatorSound();
		}
		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);
			updateEmulatorSound();
		}
		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);
			updateEmulatorSound();
		}
		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);
			updateEmulatorSound();
		}
		newcontrols.appendChild(newbottombutton);

		// paly
		var ahrefLink = document.createElement('a');
		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));
			// }
			// open new window tab when preview sound
			ahrefLink.setAttribute('href', "files/" + $F(newaudioselect));
		}
		ahrefLink.setAttribute('target', '_blank');
		ahrefLink.appendChild(playLink);
		playLinkControl.appendChild(ahrefLink);
		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);

			updateEmulatorSound();
		}
		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,inputResizeImageOption);
		}
		newcontrols.appendChild(neweditbutton);

		li.appendChild(newcontrols);

		con.appendChild(li);
		count++;
		updateEmulatorSound();
		enablePage();
	}
	col42.appendChild(okButton);

	var cancelButton = document.createElement('input');
	cancelButton.setAttribute('type', 'button');
	cancelButton.setAttribute('value', 'Cancel');
	cancelButton.onclick = function() {
		enablePage();
	}
	col42.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;
}

/**
 * The function to show the popup for editing the internal link
 * 
 * @param index
 *            of the selected row
 * @return
 */
function showEditInternalink(obj, objIdPrefix, menuStyle) {
	disablePage();
	initPopUp(500, 280, 10);

	var index = parseInt(obj.id.replace(objIdPrefix, ''));
	var GRID_MENU = 'grid.tmp';
	var CAROUSEL_MENU = 'carouselmenu.tmp';
	var label = document.createElement("label");
	//
	var iconSelection, pageSelection, description;

	// table data, it will stores the labels, combo box, and buttons
	var td1, td2, td3;
	// These variables used for the selection box
	var fullName, name, ext, icon;

	// Add the table to store all fields
	var mainTable = document.createElement('table');
	var tbody = document.createElement('tbody');
	mainTable.setAttribute("cellSpacing", "5px");
	mainTable.appendChild(tbody);
	var tr1 = document.createElement('tr');
	var tr2 = document.createElement('tr');
	var tr3 = document.createElement('tr');
	var tr4 = document.createElement('tr');
	var tr5 = document.createElement('tr');

	//
	tbody.appendChild(tr1);
	tbody.appendChild(tr2);
	tbody.appendChild(tr3);
	tbody.appendChild(tr4);
	tbody.appendChild(tr5);

	// Each row will contains 3 column
	td1 = document.createElement("td");
	td2 = document.createElement("td");
	td3 = document.createElement("td");

	// label column
	label.innerHTML = "Icon";
	td1.appendChild(label);

	//
	iconSelection = document.createElement("select");
	iconSelection.id = 'icon_image_id';
	iconSelection.name = iconSelection.id;
	iconSelection.style.width = "300px";

	for ( var i = 0; i < userimages.length; ++i) {
		var newoption = document.createElement('option');
		if ($F('internal_img_id_' + index) == 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].tagName != '' && userimages[i].imageName != '') {
			newoption.appendChild(document.createTextNode(userimages[i].tagName
					+ "_" + userimages[i].imageName));
		} else {
			newoption.appendChild(document
					.createTextNode(userimages[i].realname));
		}
		iconSelection.appendChild(newoption);
	}

	updateParentCombo(iconSelection, $F('internal_img_id_' + index));
	td2.appendChild(iconSelection);

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

	tr1.appendChild(td1);
	tr1.appendChild(td2);
	tr1.appendChild(td3);

	// The second row
	td1 = document.createElement('td');
	td2 = document.createElement('td');
	td3 = document.createElement('td');

	label = document.createElement('label');
	label.innerHTML = "Page";
	td1.appendChild(label);

	pageSelection = document.createElement("select");
	pageSelection.id = 'page_id';
	pageSelection.name = pageSelection.id;
	pageSelection.style.width = "300px";
	for ( var i = 0; i < brochurepages.length; i++) {
		pageoption = document.createElement("option");
		if (brochurepages[i] != null && brochurepages[i] != undefined
				&& brochurepages[i].id != null
				&& brochurepages[i].id != undefined) {
			if ($F('page_id_' + index) == brochurepages[i].id) {
				pageoption.setAttribute('selected', 'selected');
			}
			pageoption.value = brochurepages[i].id;
			pageoption.appendChild(document
					.createTextNode(brochurepages[i].name));
			pageSelection.appendChild(pageoption);
		}
	}
	td2.appendChild(pageSelection);

	tr2.appendChild(td1);
	tr2.appendChild(td2);
	tr2.appendChild(td3);

	// Third row
	td1 = document.createElement('td');
	td2 = document.createElement('td');
	td3 = document.createElement('td');

	label = document.createElement('label');
	label.innerHTML = "Description";
	td1.setAttribute("valign", "top");
	td1.appendChild(label);

	description = document.createElement('textarea');
	var leftWidth = 50;
	var rightWidth = 480 - leftWidth;
	description.style.width = 300 + "px";
	description.style.height = 150 + "px";
	description.style.resize = "none";
	description.id = "page_comment";
	description.name = description.id;
	description.value = $F('page_comment_' + index);
	td2.appendChild(description);

	tr3.appendChild(td1);
	tr3.appendChild(td2);
	tr3.appendChild(td3);

	// Fourth row. it contains image resize option
	td1 = document.createElement('td');
	td2 = document.createElement('td');
	var divResizeImageOptionLabel = document.createElement('div');
	var resizeImageOption = document.createElement('input');

	td1.appendChild(divResizeImageOptionLabel);
	td2.appendChild(resizeImageOption);
	td2.setAttribute('colSpan', '2');

	divResizeImageOptionLabel.innerHTML = 'Resize';
	resizeImageOption.setAttribute('type', 'checkbox');
	resizeImageOption.setAttribute('id', 'resize_image_option')
	resizeImageOption.setAttribute('value',
			$('resize_image_option_id_' + index).value)
	if ($F('resize_image_option_id_' + index) == 'true') {
		resizeImageOption.setAttribute('checked', 'checked');
	}
	if ($F('currentpage') == GRID_MENU || $F('currentpage') == CAROUSEL_MENU ) {
		 resizeImageOption.style.display = 'none';
		 divResizeImageOptionLabel.style.display = 'none';
	}

	tr4.appendChild(td1);
	tr4.appendChild(td2);

	// Five row. It contains buttons ok and cancel
	td1 = document.createElement('td');

	var okButton = document.createElement('input');
	okButton.setAttribute('type', 'button');
	okButton.setAttribute('value', 'OK');
	okButton.onclick = function() {
		// var cbo = document.getElementById('page_id');
		var comment = $F('page_comment')
		 if (comment == '' && $F('currentpage') == CAROUSEL_MENU) {
			 alert('Each carousel item must have icon and display text.');
			 return;
		 }
		updateInternalRow($F('icon_image_id'),
				$('resize_image_option').checked, $F('page_id'),
				$F('page_comment'), index, menuStyle);
		updateRequest();
		updatePreview();
		enablePage();
	}
	td1.appendChild(okButton);

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

	tr5.appendChild(td1);

	$('containerPopup').appendChild(mainTable);
}

function initPopUp(popupWidth, popupHeight, padding) {
	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;
	}

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

	containerStyle.width = popupWidth + "px";
	containerStyle.height = popupHeight + "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;
}

/**
 * This function responsible for displying the popup for adding new internal
 * link
 * 
 * @return
 */
function showAddInternalLink(menuStyle) {
	disablePage();
	initPopUp(500, 280, 10);

	var GRID_MENU = 'grid.tmp';
	var CAROUSEL_MENU = 'carouselmenu.tmp';
	var label = document.createElement("label");
	//
	var iconSelection, pageSelection, description;

	// table data, it will stores the labels, combo box, and buttons
	var td1, td2, td3;
	// These variables used for the selection box
	var fullName, name, ext, icon;

	// Add the table to store all fields
	var mainTable = document.createElement('table');
	var tbody = document.createElement('tbody');
	mainTable.setAttribute("cellSpacing", "5px");
	mainTable.appendChild(tbody);
	var tr1 = document.createElement('tr');
	var tr2 = document.createElement('tr');
	var tr3 = document.createElement('tr');
	var tr4 = document.createElement('tr');
	var tr5 = document.createElement('tr');

	//
	tbody.appendChild(tr1);
	tbody.appendChild(tr2);
	tbody.appendChild(tr3);
	tbody.appendChild(tr4);
	tbody.appendChild(tr5);

	// Each row will contains 3 column
	td1 = document.createElement("td");
	td2 = document.createElement("td");
	td3 = document.createElement("td");

	// label column
	label.innerHTML = "Icon";
	td1.appendChild(label);

	//
	iconSelection = document.createElement("select");
	iconSelection.id = 'icon_image_id';
	iconSelection.name = iconSelection.id;
	iconSelection.style.width = "300px";

	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].tagName != '' && userimages[i].imageName != '') {
			newoption.appendChild(document.createTextNode(userimages[i].tagName
					+ "_" + userimages[i].imageName));
		} else {
			newoption.appendChild(document
					.createTextNode(userimages[i].realname));
		}
		iconSelection.appendChild(newoption);
	}
	td2.appendChild(iconSelection);

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

	tr1.appendChild(td1);
	tr1.appendChild(td2);
	tr1.appendChild(td3);

	// The second row
	td1 = document.createElement('td');
	td2 = document.createElement('td');
	td3 = document.createElement('td');

	label = document.createElement('label');
	label.innerHTML = "Page";
	td1.appendChild(label);

	pageSelection = document.createElement("select");
	pageSelection.id = 'page_id';
	pageSelection.name = pageSelection.id;
	pageSelection.style.width = "300px";
	for ( var i = 0; i < brochurepages.length; i++) {
		pageoption = document.createElement("option");
		if (brochurepages[i] != null && brochurepages[i] != undefined
				&& brochurepages[i].id != null
				&& brochurepages[i].id != undefined) {
			pageoption.value = brochurepages[i].id;
			pageoption.appendChild(document
					.createTextNode(brochurepages[i].name));
			pageSelection.appendChild(pageoption);
		}
	}
	td2.appendChild(pageSelection);

	tr2.appendChild(td1);
	tr2.appendChild(td2);
	tr2.appendChild(td3);

	// Third row
	td1 = document.createElement('td');
	td2 = document.createElement('td');
	td3 = document.createElement('td');

	label = document.createElement('label');
	label.innerHTML = "Description";
	td1.setAttribute("valign", "top");
	td1.appendChild(label);

	description = document.createElement('textarea');
	var leftWidth = 50;
	var rightWidth = 480 - leftWidth;
	description.style.width = 300 + "px";
	description.style.height = 150 + "px";
	description.style.resize = "none";
	description.id = "page_comment";
	description.name = description.id;
	td2.appendChild(description);

	tr3.appendChild(td1);
	tr3.appendChild(td2);
	tr3.appendChild(td3);

	// Fourth row. it contains image resize option
	td1 = document.createElement('td');
	td2 = document.createElement('td');
	var divResizeImageOptionLabel = document.createElement('div');
	var resizeImageOption = document.createElement('input');

	td1.appendChild(divResizeImageOptionLabel);
	td2.appendChild(resizeImageOption);
	td2.setAttribute('colSpan', '2');

	divResizeImageOptionLabel.innerHTML = 'Resize';
	resizeImageOption.setAttribute('type', 'checkbox');
	resizeImageOption.setAttribute('id', 'resize_image_option');
	resizeImageOption.setAttribute('checked', 'checked');
	if ($F('currentpage') == GRID_MENU || $F('currentpage') == CAROUSEL_MENU ) {
		 resizeImageOption.style.display = 'none';
		 divResizeImageOptionLabel.style.display = 'none';
	}

	tr4.appendChild(td1);
	tr4.appendChild(td2);

	// Fifth row. It contains buttons ok and cancel
	td1 = document.createElement('td');
	td2 = document.createElement('td');
	td3 = document.createElement('td');

	var okButton = document.createElement('input');
	okButton.setAttribute('type', 'button');
	okButton.setAttribute('value', 'OK');
	okButton.onclick = function() {
		var cbo = document.getElementById('page_id');
		if (cbo.selectedIndex != -1) {
			// var comment = cbo.options[cbo.selectedIndex].text;
			 var comment = $F('page_comment')
			 if (comment == '' && $F('currentpage') == CAROUSEL_MENU) {
				 alert('Each carousel item must have icon and display text.');
				 return;
			 }
			newInternalRow($F('icon_image_id'),
					$('resize_image_option').checked, $F('page_id'),
					comment, menuStyle);
			updateRequest();
			updatePreview();
			enablePage();
		} else {
			alert("Please select the page to be linked.");
		}
	}
	td1.appendChild(okButton);

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

	tr5.appendChild(td1);

	$('containerPopup').appendChild(mainTable);

	//
}

function showEditPopup(label, inputImage, inputText, inputLink, bodyText, type,
		editbuttonid, isOptMessaging,inputResizeImageOption) {

	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].tagName != '' && userimages[i].imageName != '') {
				newoption.appendChild(document
						.createTextNode(userimages[i].tagName + "_"
								+ userimages[i].imageName));
			} 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].tagName != '' && appimages[i].imageName != '') {
				newoption.appendChild(document
						.createTextNode(appimages[i].tagName + "_"
								+ appimages[i].imageName));
			} 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 = 270;
	if (browserDetect.browser == 'Firefox' || browserDetect.browser == 'Chrome'
			|| browserDetect.browser == 'Explorer') {
		popupHeiht = 290;
	}
	if (type == 4) {
		popupHeiht = 110;
	}

	// 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"; }
		 */
	}

	/**
	 * link or click to call and sms type == 1 is Hyperlink type == 2 is call
	 * type == 3 sms;
	 */

	if (type == 1 || type == 4) {

		storeInputLink = "http://";
	} else if (type == 2) {

		storeInputLink = "call:";
	} else if (type == 3) {

		storeInputLink = "sms:";

		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);
	// Add Opt for messaging for edit sms popup
	if (type == 3) {
		rowOptMessaging = document.createElement("tr");
		rowOptMessagingTHead = document.createElement("thead");
		rowOptMessagingTHead.appendChild(rowOptMessaging);
		// add blank td
		blankTd = document.createElement('td');
		rowOptMessaging.appendChild(blankTd);
		
		colOptMessaging_1 = document.createElement("td");
		optMessagingCheckbox = document.createElement("input");
		optMessagingCheckbox.setAttribute("type", "checkbox");
		optMessagingCheckbox.setAttribute("id", "optmessageCheck");
		optMessagingCheckbox.setAttribute("name", "optmessageCheck");
		if (isOptMessaging.value == "1") {
			optMessagingCheckbox.checked = true;
			optMessagingCheckbox.defaultChecked = "selected";

		}
		divOptMessaging_1 = document.createElement("div")
		divOptMessaging_1.innerHTML = "Opt for messaging";
		divOptMessaging_1.appendChild(optMessagingCheckbox);
		colOptMessaging_1.appendChild(divOptMessaging_1);
		rowOptMessaging.appendChild(colOptMessaging_1);
		
		table.appendChild(rowOptMessagingTHead);
		containerStyle.height = (popupHeiht + 80) + "px";
	}

	/** action key up with http://, call:, sms: */
	tmpInputLink.onkeyup = function() {
		var tmpText = tmpInputLink.value;
		var tmpStoreText = storeInputLink;

		if (tmpText.length <= tmpStoreText.length) {
			// tmpInputLink.disabled="disabled";
			tmpInputLink.value = tmpStoreText;
		}
	}

	// resize image option
	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 divResizeImageOptionLabel = document.createElement('div');
	var resizeImageOption = document.createElement('input');

	divResizeImageOptionLabel.innerHTML = 'Resize';
	resizeImageOption.setAttribute('type', 'checkbox');
	resizeImageOption.setAttribute('id', 'resize_image_option_linkcallsms');
	if(inputResizeImageOption.value == 'true'){
		resizeImageOption.setAttribute('checked', 'checked');
	}

	col31.appendChild(divResizeImageOptionLabel);
	col32.setAttribute('colSpan', '2');
	col32.appendChild(resizeImageOption);
	
	
	var row4 = document.createElement('tr');

	var mythead4 = document.createElement("thead"); // For IE
	mythead4.appendChild(row4);
	table.appendChild(mythead4);

	var col41 = document.createElement('td');
	row4.appendChild(col41);

	var col42 = document.createElement('td');
	row4.appendChild(col42);

	var okButton = document.createElement('input');
	okButton.setAttribute('type', 'button');
	okButton.setAttribute('value', 'OK');
	okButton.onclick = function() {
		/**
		 * check if type 2 or 3 need to validate the field before next process
		 */
		var telNum = tmpInputLink.value;
		// alert(telNum);alert(type);
		if (type == 2) {
			telNum = telNum.substring(5);
			if (!validateTelNumber(telNum)) {
				return;
			}
		} else if (type == 3) {
			telNum = telNum.substring(4);
			if (!validateTelNumber(telNum)) {
				return;
			}
		}

		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);
			isOptMessaging.value = (optMessagingCheckbox.checked == true ? "1"
					: "0");
		}
		// assign new image resize value
		inputResizeImageOption.value = resizeImageOption.checked;
		
		updatePreview();
		enablePage();
	}
	col42.appendChild(okButton);

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

	container.appendChild(table);
}

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

	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].tagName != '' && userimages[i].imageName != '') {
			newoption.appendChild(document.createTextNode(userimages[i].tagName
					+ "_" + userimages[i].imageName));
		} 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 = 275;

	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);
	
	// resize image option
	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 divResizeImageOptionLabel = document.createElement('div');
	var resizeImageOption = document.createElement('input');

	divResizeImageOptionLabel.innerHTML = 'Resize';
	resizeImageOption.setAttribute('type', 'checkbox');
	resizeImageOption.setAttribute('id', 'resize_image_option_sound');
	if(inputResizeImageOption.value == 'true'){
		resizeImageOption.setAttribute('checked', 'checked');
	}

	col31.appendChild(divResizeImageOptionLabel);
	col32.setAttribute('colSpan', '2');
	col32.appendChild(resizeImageOption);
	
	var row4 = document.createElement('tr');
	// table.appendChild(row3);
	var mythead4 = document.createElement("thead"); // For IE
	mythead4.appendChild(row4);
	table.appendChild(mythead4);
	var col41 = document.createElement('td');
	row4.appendChild(col41);

	var col42 = document.createElement('td');
	col42.setAttribute('colspan', '2');
	row4.appendChild(col42);

	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';
			}
		}
		inputResizeImageOption.value = resizeImageOption.checked
		updateEmulatorSound();
		enablePage();
	}
	col42.appendChild(okButton);

	var cancelButton = document.createElement('input');
	cancelButton.setAttribute('type', 'button');
	cancelButton.setAttribute('value', 'Cancel');
	cancelButton.onclick = function() {
		enablePage();
	}
	col42.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].tagName != '' && userimages[i].imageName != '') {
				newoption.appendChild(document
						.createTextNode(userimages[i].tagName + "_"
								+ userimages[i].imageName));
			} 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].tagName != '' && appimages[i].imageName != '') {
				newoption.appendChild(document
						.createTextNode(appimages[i].tagName + "_"
								+ appimages[i].imageName));
			} 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 = 270;
	if (type == 4) {
		popupHeiht = 110;
	}

	// 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:";

		// Add Opt for messaging for sms
		rowOptMessaging = document.createElement("tr");
		rowOptMessagingTHead = document.createElement("thead");
		rowOptMessagingTHead.appendChild(rowOptMessaging);
		// add blank td
		blankTd = document.createElement('td');
		rowOptMessaging.appendChild(blankTd);
		// create opt for messaging td
		colOptMessaging_1 = document.createElement("td");
		optMessagingCheckbox = document.createElement("input");
		optMessagingCheckbox.setAttribute("type", "checkbox");
		optMessagingCheckbox.setAttribute("id", "optmessageCheck");
		divOptMessaging_1 = document.createElement("div")
		divOptMessaging_1.innerHTML = "Opt for messaging";
		divOptMessaging_1.appendChild(optMessagingCheckbox);
		colOptMessaging_1.appendChild(divOptMessaging_1);
		rowOptMessaging.appendChild(colOptMessaging_1);
		table.appendChild(rowOptMessagingTHead);
		containerStyle.height = (popupHeiht + 80) + "px";
	}
	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;
		}
	}

	// resize image option
	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 divResizeImageOptionLabel = document.createElement('div');
	var resizeImageOption = document.createElement('input');

	divResizeImageOptionLabel.innerHTML = 'Resize';
	resizeImageOption.setAttribute('type', 'checkbox');
	resizeImageOption.setAttribute('id', 'resize_image_option_linkcallsms');
	resizeImageOption.setAttribute('checked', 'checked');

	col31.appendChild(divResizeImageOptionLabel);
	col32.setAttribute('colSpan', '2');
	col32.appendChild(resizeImageOption);
	
	var row4 = document.createElement('tr');

	var mythead4 = document.createElement("thead"); // For IE
	mythead4.appendChild(row4);
	table.appendChild(mythead4);

	var col41 = document.createElement('td');
	row4.appendChild(col41);

	var col42 = document.createElement('td');
	row4.appendChild(col42);

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

		/**
		 * check if type 2 or 3 need to validate the field before next process
		 */
		var telNum = tmpInputLink.value;
		if (type == 2) {
			telNum = telNum.substring(5);
			if (!validateTelNumber(telNum)) {
				return;
			}
		} else if (type == 3) {
			telNum = telNum.substring(4);
			if (!validateTelNumber(telNum)) {
				return;
			}
		}

		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);

			var inputOptMessaging = document.createElement('input');
			inputOptMessaging.setAttribute('type', 'hidden');
			inputOptMessaging.setAttribute('name', 'opt_messaging_' + count);
			inputOptMessaging.setAttribute('id', 'opt_messaging_' + count);
			if (optMessagingCheckbox.checked) {
				inputOptMessaging.value = "1";
			} else {
				inputOptMessaging.value = "0";
			}
			newfields.appendChild(inputOptMessaging);
		}

		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;
			}
		}
		
		// resize image option hidden field
		var inputResizeImageOption = document.createElement('input');
		inputResizeImageOption.setAttribute('type', 'hidden');
		inputResizeImageOption.value = $('resize_image_option_linkcallsms').checked;
		inputResizeImageOption.setAttribute('name', 'resize_image_option_linkcallsms_id_' + count);
		inputResizeImageOption.setAttribute('id', 'resize_image_option_linkcallsms_id_' + count);
		newfields.appendChild(inputResizeImageOption);
		
		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, inputOptMessaging,inputResizeImageOption);
			} else if (type == 4) {
				showEditPopup("", inputImage, "", inputLink, "", 4,
						neweditbutton.id, false,inputResizeImageOption);
			} else {
				// showEditPopup(label, inputImage, inputText, inputLink);
				showEditPopup(label, inputImage, inputText, inputLink, "", "",
						neweditbutton.id, false,inputResizeImageOption);
			}
		}
		newcontrols.appendChild(neweditbutton);

		li.appendChild(newcontrols);

		con.appendChild(li);
		count++;
		updatePreviewLinkCall();
		enablePage();
	}
	col42.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();
	}
	col42.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') {
			updateEmulatorSound();
		} else if (note == 'video') {
			updateEmulatorVideo();
		} 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].mediaType + "_"
							+ userimages[i].imageName));
		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 = 275;

	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);

	// resize image option
	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 divResizeImageOptionLabel = document.createElement('div');
	var resizeImageOption = document.createElement('input');

	divResizeImageOptionLabel.innerHTML = 'Resize';
	resizeImageOption.setAttribute('type', 'checkbox');
	resizeImageOption.setAttribute('id', 'resize_image_option_video');
	resizeImageOption.setAttribute('checked', 'checked');

	col31.appendChild(divResizeImageOptionLabel);
	col32.setAttribute('colSpan', '2');
	col32.appendChild(resizeImageOption);
	
	var row4 = document.createElement('tr');
	// table.appendChild(row3);
	var mythead4 = document.createElement("thead"); // For IE
	mythead4.appendChild(row4);
	table.appendChild(mythead4);

	var col41 = document.createElement('td');
	row4.appendChild(col41);

	var col42 = document.createElement('td');
	row4.appendChild(col42);

	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);
		
		// resize image option hidden field
		var inputResizeImageOption = document.createElement('input');
		inputResizeImageOption.setAttribute('type', 'hidden');
		inputResizeImageOption.value = $('resize_image_option_video').checked;
		inputResizeImageOption.setAttribute('name', 'resize_image_option_video_id_' + count);
		inputResizeImageOption.setAttribute('id', 'resize_image_option_video_id_' + count);
		newfields.appendChild(inputResizeImageOption);
		
		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;
			updateEmulatorVideo();

		}
		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;
			updateEmulatorVideo();

		}

		// 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);
			updateEmulatorVideo();
		}
		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);
			updateEmulatorVideo();
		}
		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);
			updateEmulatorVideo();
		}
		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);
			updateEmulatorVideo();
		}
		newcontrols.appendChild(newbottombutton);

		// play
		var ahrefLink = document.createElement('a');
		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));
		// }

		// open new window tab when preview video
		ahrefLink.appendChild(playLink);
		ahrefLink.setAttribute('href', 'files/' + $F(newVideoSelect));
		ahrefLink.setAttribute('target', '_blank');

		playLinkControl.appendChild(ahrefLink);
		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);

			updateEmulatorVideo();
		}
		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,inputResizeImageOption);
		}
		newcontrols.appendChild(neweditbutton);
		li.appendChild(newcontrols);

		con.appendChild(li);
		count++;
		updateEmulatorVideo();
		enablePage();
	}
	col42.appendChild(okButton);

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

	container.appendChild(table);
}

function showEditPopupVideo(label, inputImage, inputText, inputVideo,
		playButton,inputResizeImageOption) {
	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].tagName != '' && userimages[i].imageName != '') {
			newoption.appendChild(document.createTextNode(userimages[i].tagName
					+ "_" + userimages[i].imageName));
		} 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 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 = 275;

	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);

	// resize image option
	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 divResizeImageOptionLabel = document.createElement('div');
	var resizeImageOption = document.createElement('input');

	divResizeImageOptionLabel.innerHTML = 'Resize';
	resizeImageOption.setAttribute('type', 'checkbox');
	resizeImageOption.setAttribute('id', 'resize_image_option_sound');
	if(inputResizeImageOption.value == 'true'){
		resizeImageOption.setAttribute('checked', 'checked');
	}

	col31.appendChild(divResizeImageOptionLabel);
	col32.setAttribute('colSpan', '2');
	col32.appendChild(resizeImageOption);
	
	var row4 = document.createElement('tr');
	// table.appendChild(row3);
	var mythead4 = document.createElement("thead"); // For IE
	mythead4.appendChild(row4);
	table.appendChild(mythead4);
	var col41 = document.createElement('td');
	row4.appendChild(col41);

	var col42 = document.createElement('td');
	row4.appendChild(col42);

	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';
			}
		}
		inputResizeImageOption.value = resizeImageOption.checked
		updateEmulatorVideo();
		enablePage();
	}
	col42.appendChild(okButton);

	var cancelButton = document.createElement('input');
	cancelButton.setAttribute('type', 'button');
	cancelButton.setAttribute('value', 'Cancel');
	cancelButton.onclick = function() {
		enablePage();
	}
	col42.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].mediaType + "_"
							+ userimages[i].imageName));
		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);
			updateEmulatorListBulletPlatform();
		}
		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);
			updateEmulatorListBulletPlatform();
		}
		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);
			updateEmulatorListBulletPlatform();
		}
		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);
			updateEmulatorListBulletPlatform();
		}
		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);
			updateEmulatorListBulletPlatform();
		}
		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++;

		updateEmulatorListBulletPlatform();
		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].tagName != '' && userimages[i].imageName != '') {
			newoption.appendChild(document.createTextNode(userimages[i].tagName
					+ "_" + userimages[i].imageName));
		} else {
			newoption.appendChild(document
					.createTextNode(appimages[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);
		updateEmulatorListBulletPlatform();
		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;
}

function createColorScheme() {
	disablePage();
	// Create container
	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 = 860;
	var popupHeiht = 600;

	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";

	// Close image
	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();
	}
	container.appendChild(divButton);

	// Popup title
	var div = document.createElement('div');
	var label = document.createElement('label');
	label.innerHTML = "<h3>New ColorScheme</h3>";
	container.appendChild(label);

	var mainDiv = document.createElement('div');
	mainDiv.style.width = (popupWidth - 15) + "px";
	mainDiv.style.height = (popupHeiht - 10) + "px";
	mainDiv.style.marginLeft = "0px";

	var element = document.getElementById('popup');
	var div = document.createElement('div');
	div.innerHTML = element.innerHTML;
	mainDiv.appendChild(div);
	container.style.overflow = "scroll";
	container.style.top = (getYOffset()) + "px";
	container.appendChild(mainDiv);
}

function validatePhoneNumber(phone) {
	// var regexObj = /^(?:[+0-9] ?){6,14}[0-9]$/;
	// var rePhoneNumber = new RegExp(/^\([1-9]\d{2}\)\s?\d{3}\-\d{4}$/);(555)
	// 555-1234
	var regexObj = /\d{3}\d{3}\d{4}/;

	if (!regexObj.test(phone)) {
		alert('phone number is invalid! [accept only number ex 85517123456]');
		return false;
	}

	return true;
}

function showAddPopupAdventCalendar(label, startDate, endDate, startImage,
		endImage, link, media, text) {
	disablePage();
	count = getIndexCount($('adventCalendarGridListItems'));// 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 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 = 650;
	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 tbody = document.createElement("tbody"); // For IE
	table.appendChild(tbody);

	/* add advent calendar label row */
	var adventCalLabelRow = document.createElement('tr');
	var textLabelCell = document.createElement('td');
	var textboxCell = document.createElement('td');
	var divLabelContent = document.createElement('div');
	var textboxComponent = document.createElement('input');

	divLabelContent.innerHTML = "Label";
	textLabelCell.appendChild(divLabelContent);
	textboxComponent.setAttribute('type', 'text');
	textboxComponent.setAttribute('id', 'textboxLabel');
	textboxComponent.setAttribute('value', label == undefined ? ''
			: label.innerHTML);
	textboxCell.setAttribute('colSpan', '2');
	textboxCell.appendChild(textboxComponent);
	adventCalLabelRow.appendChild(textLabelCell);
	adventCalLabelRow.appendChild(textboxCell);
	tbody.appendChild(adventCalLabelRow);

	/* Add start image for grid Items */
	var adventCalStartImageRow = document.createElement('tr');
	var textStartImageCell = document.createElement('td');
	var selectorStartImageCell = document.createElement('td');
	var startImageBrowseImageCell = document.createElement('td');
	var divStartImageContent = document.createElement('div');
	var startImageSelectorComponent = document.createElement('select');
	var startImageSelectorHidden = document.createElement('input');

	startImageSelectorHidden.setAttribute('type', 'hidden');
	startImageSelectorHidden.setAttribute('id', 'advent_start_image_hidden');
	textStartImageCell.appendChild(startImageSelectorHidden);
	divStartImageContent.innerHTML = "Image";
	startImageSelectorComponent.id = 'start_image_id_' + count;
	startImageSelectorComponent.name = startImageSelectorComponent.id;
	startImageSelectorComponent.style.width = getComboWidth() + 'px';

	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].mediaType + "_"
							+ userimages[i].imageName));
		else
			newoption.appendChild(document
					.createTextNode(userimages[i].realname));
		startImageSelectorComponent.appendChild(newoption);
	}

	/* Edit Popup panel action */
	if (startImage != undefined) {
		startImageSelectorHidden.value = startImage.value;
		startImageSelectorComponent.value = startImage.value;
		updateParentCombo(startImageSelectorComponent,
				startImageSelectorHidden.value);
	}

	/* create browser image button */
	var startImagebrowseButton = document.createElement('input');
	startImagebrowseButton.setAttribute("title", "Browse Images");
	startImagebrowseButton.setAttribute("type", "button");
	startImagebrowseButton.setAttribute("value", "Browse");

	startImagebrowseButton.onclick = function() {
		var index = startImageSelectorComponent.id.substring(15);
		expandingImage(startImageSelectorComponent, 17, index);
		updateParentCombo(startImageSelectorComponent, startImageSelectorHidden);
	}
	startImageBrowseImageCell.appendChild(startImagebrowseButton);
	selectorStartImageCell.appendChild(startImageSelectorComponent);
	textStartImageCell.appendChild(divStartImageContent);
	adventCalStartImageRow.appendChild(textStartImageCell);
	adventCalStartImageRow.appendChild(selectorStartImageCell);
	adventCalStartImageRow.appendChild(startImageBrowseImageCell);
	tbody.appendChild(adventCalStartImageRow);

	/* Add end image for grid Items */
	var adventCalEndImageRow = document.createElement('tr');
	/**
	 * TINO-994 Change to the advent calendar template invisible end image
	 * because andirod version not support yet
	 * 
	 */
	adventCalEndImageRow.style.display = "none";
	var textEndImageCell = document.createElement('td');
	var selectorEndImageCell = document.createElement('td');
	var endImageBrowseImageCell = document.createElement('td');
	var divEndImageContent = document.createElement('div');
	var endImageSelectorComponent = document.createElement('select');
	var endImagebrowseButton = document.createElement('input');
	var endImageSelectorHidden = document.createElement('input');

	endImageSelectorHidden.setAttribute('type', 'hidden');
	endImageSelectorHidden.setAttribute('id', 'advent_end_image_hidden');
	textEndImageCell.appendChild(endImageSelectorHidden);
	divEndImageContent.innerHTML = "End Image";
	endImageSelectorComponent.id = 'end_image_id_' + count;
	endImageSelectorComponent.name = endImageSelectorComponent.id;
	endImageSelectorComponent.style.width = getComboWidth() + 'px';

	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].mediaType + "_"
							+ userimages[i].imageName));
		else
			newoption.appendChild(document
					.createTextNode(userimages[i].realname));
		endImageSelectorComponent.appendChild(newoption);
	}

	/* Edit Popup panel action */
	if (endImage != undefined) {
		endImageSelectorHidden.value = endImage.value;
		endImageSelectorComponent.value = endImage.value;
		updateParentCombo(endImageSelectorComponent,
				endImageSelectorHidden.value);
	}
	/* create browser image button */
	endImagebrowseButton.setAttribute("title", "Browse Images");
	endImagebrowseButton.setAttribute("type", "button");
	endImagebrowseButton.setAttribute("value", "Browse");

	endImagebrowseButton.onclick = function() {
		var index = endImageSelectorComponent.id.substring(15);
		expandingImage(endImageSelectorComponent, 18, index);
		updateParentCombo(endImageSelectorComponent, endImageSelectorHidden);
	}
	endImageBrowseImageCell.appendChild(endImagebrowseButton);
	selectorEndImageCell.appendChild(endImageSelectorComponent);
	textEndImageCell.appendChild(divEndImageContent);
	adventCalEndImageRow.appendChild(textEndImageCell);
	adventCalEndImageRow.appendChild(selectorEndImageCell);
	adventCalEndImageRow.appendChild(endImageBrowseImageCell);
	tbody.appendChild(adventCalEndImageRow);

	/* Add Start Date for grid Items */
	var adventCalStartDateRow = document.createElement('tr');
	var textStartDateCell = document.createElement('td');
	var textboxStartDateCell = document.createElement('td');
	var divStartDateContent = document.createElement('div');
	var textboxStartDateComponent = document.createElement('input');
	var calendarButtonStartDate = document.createElement('input');

	divStartDateContent.innerHTML = "Date the action starts";
	textStartDateCell.appendChild(divStartDateContent);

	textboxStartDateComponent.setAttribute('type', 'text');
	textboxStartDateComponent.setAttribute('id', 'start_date');
	textboxStartDateComponent.setAttribute('name', 'start_date');
	textboxStartDateComponent.setAttribute('value', startDate == undefined ? ''
			: startDate.value);

	calendarButtonStartDate.setAttribute('type', 'button');
	calendarButtonStartDate.setAttribute('id', 'btnStartDate');
	calendarButtonStartDate.setAttribute('name', 'btnStartDate');
	calendarButtonStartDate.className = 'calendarButton';

	textboxStartDateCell.setAttribute('colSpan', '2');
	textboxStartDateCell.appendChild(textboxStartDateComponent);
	textboxStartDateCell.appendChild(calendarButtonStartDate);

	calendarButtonStartDate.onclick = function() {
		showCalendar('start_date', 'y-mm-dd');
	}

	adventCalStartDateRow.appendChild(textStartDateCell);
	adventCalStartDateRow.appendChild(textboxStartDateCell);
	tbody.appendChild(adventCalStartDateRow);

	/* Add end Date for grid Items */
	var adventCalEndDateRow = document.createElement('tr');
	var textEndDateCell = document.createElement('td');
	var textboxEndDateCell = document.createElement('td');
	var divEndDateContent = document.createElement('div');
	var textboxEndDateComponent = document.createElement('input');
	var calendarButtonEndDate = document.createElement('input');

	divEndDateContent.innerHTML = "Date the action ends";
	textEndDateCell.appendChild(divEndDateContent);

	textboxEndDateComponent.setAttribute('type', 'text');
	textboxEndDateComponent.setAttribute('id', 'end_date');
	textboxEndDateComponent.setAttribute('name', 'end_date');
	textboxEndDateComponent.setAttribute('value', endDate == undefined ? ''
			: endDate.value);

	calendarButtonEndDate.setAttribute('type', 'button');
	calendarButtonEndDate.setAttribute('id', 'btnEndDate');
	calendarButtonEndDate.setAttribute('name', 'btnEndDate');
	calendarButtonEndDate.className = 'calendarButton';

	textboxEndDateCell.setAttribute('colSpan', '2');
	textboxEndDateCell.appendChild(textboxEndDateComponent);
	textboxEndDateCell.appendChild(calendarButtonEndDate);

	calendarButtonEndDate.onclick = function() {
		showCalendar('end_date', 'y-mm-dd');
	}

	adventCalEndDateRow.appendChild(textEndDateCell);
	adventCalEndDateRow.appendChild(textboxEndDateCell);
	tbody.appendChild(adventCalEndDateRow);

	/* Add link field */
	var adventCalLinkRow = document.createElement('tr');
	var linkLabelCell = document.createElement('td');
	var linkSelectorCell = document.createElement('td');
	var divLinkContent = document.createElement('div');
	var linkSelectorComponent = document.createElement('select');

	linkSelectorComponent.id = 'link_selector';
	linkSelectorComponent.name = linkSelectorComponent.id;

	// var selectorOptions = ["Page","Video","Sound","Image","Hyperlink"];
	for ( var i = 0; i < linkTypeList.length; ++i) {
		var newOption = document.createElement('option');
		if (linkTypeList[i] != null && linkTypeList[i] != undefined
				&& linkTypeList[i].id != null
				&& linkTypeList[i].id != undefined) {
			newOption.value = linkTypeList[i].id;
			newOption.appendChild(document
					.createTextNode(linkTypeList[i].label));
			linkSelectorComponent.appendChild(newOption);
		}
	}

	linkSelectorComponent.value = link == undefined ? '0' : link.value;
	linkSelectorComponent.onchange = function() {
		switchElementBascLinkType(mediaSelectorCell,
				linkSelectorComponent.value);
	}

	divLinkContent.innerHTML = "Link";
	linkLabelCell.appendChild(divLinkContent);

	linkSelectorCell.setAttribute('colSpan', '2');
	linkSelectorCell.appendChild(linkSelectorComponent);

	adventCalLinkRow.appendChild(linkLabelCell);
	adventCalLinkRow.appendChild(linkSelectorCell);
	tbody.appendChild(adventCalLinkRow);

	/* Add media field */
	var adventCalMediaRow = document.createElement('tr');
	var mediaLabelCell = document.createElement('td');
	var mediaSelectorCell = document.createElement('td');
	var divMediaContent = document.createElement('div');
	var mediaSourceComponent = document.createElement('select');

	mediaSelectorCell.setAttribute('id', 'media_cell')
	mediaSourceComponent.id = 'media_source';
	mediaSourceComponent.name = mediaSourceComponent.id;
	fillDataSelector(mediaSourceComponent, brochurepages);

	divMediaContent.innerHTML = "Media";
	mediaLabelCell.appendChild(divMediaContent);

	mediaSelectorCell.setAttribute('colSpan', '2');
	mediaSelectorCell.appendChild(mediaSourceComponent);

	adventCalMediaRow.appendChild(mediaLabelCell);
	adventCalMediaRow.appendChild(mediaSelectorCell);
	tbody.appendChild(adventCalMediaRow);

	/* Action event for popup panel */
	var adventCalActionPopup = document.createElement('tr');
	var okButtonCell = document.createElement('td');
	okButtonCell.setAttribute('align', 'right');
	var cancelButtonCell = document.createElement('td');
	cancelButtonCell.setAttribute('colSpan', '2');

	var okButton = document.createElement('input');
	okButton.setAttribute('type', 'button');
	okButton.setAttribute('value', 'Save');
	okButton.onclick = function() {
		/*
		 * if ($F(newaudioselect)==-1) { alert("Please choose sound!"); return; }
		 */
		if (label != undefined) {
			if (!validationAdventCalendarControl(
					textboxStartDateComponent.value,
					textboxEndDateComponent.value,
					startImageSelectorComponent.value,
					endImageSelectorComponent.value)) {
				label.innerHTML = textboxComponent.value;
				startDate.value = textboxStartDateComponent.value;
				endDate.value = textboxEndDateComponent.value;
				startImage.value = startImageSelectorComponent.value
				// endImage.value = endImageSelectorComponent.value
				link.value = linkSelectorComponent.value;
				media.value = $F('media_source');
				text.value = textboxComponent.value;
			} else {
				return;
			}
		} else {
			if (!validationAdventCalendarControl(
					textboxStartDateComponent.value,
					textboxEndDateComponent.value,
					startImageSelectorComponent.value,
					endImageSelectorComponent.value)) {
				addAdventCalendarStoredElements(count, textboxComponent.value,
						textboxStartDateComponent.value,
						textboxEndDateComponent.value,
						startImageSelectorComponent.value,
						endImageSelectorComponent.value,
						linkSelectorComponent.value, $F('media_source'));
			} else {
				return;
			}
			// count++;
		}
		updatePreviewAdventCalendarEmulator();
		enablePage();
	}
	okButtonCell.appendChild(okButton);

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

	cancelButtonCell.appendChild(cancelButton);
	adventCalActionPopup.appendChild(okButtonCell);
	adventCalActionPopup.appendChild(cancelButtonCell);
	tbody.appendChild(adventCalActionPopup);

	container.appendChild(table);
	/* Update media source depending on link type */
	if (media != undefined) {
		switchElementBascLinkType(mediaSelectorCell,
				linkSelectorComponent.value);
		$('media_source').value = media.value;
		if (linkSelectorComponent.value == '4') {
			updateParentCombo($('media_source'), media.value);
		}

	}
}

function validationAdventCalendarControl(startDate, endDate, startImage,
		endImage) {
	var empty = false;
	if (startDate != '' && endDate != '') {
		var dateStart = new Date(startDate);
		var dateEnd = new Date(endDate);
		if (dateStart.getTime() > dateEnd.getTime()) {
			alert('Application does not allow start date greater than end date!');
			return true;
		}
	}
	if (startImage == '0') {
		alert('Advent calendar template does not allow start image to empty field!');
		empty = true;
	}
	// else if(endImage == '0'){
	// alert('Advent calendar template does not allow end image to empty
	// field!');
	// empty=true;
	// }
	return empty;
}

function updatePreviewAdventCalendarEmulator() {
	/* Update j2me emulator content */
	updateEmulatorAdventCalendarGridPlatform('j2meEmulatorBodyContainer');
	/* Update andoid emulator content */
	updateEmulatorAdventCalendarGridPlatform('androidEmulatorBodyContainer');
	/* Update iphone emulator content */
	updateEmulatorAdventCalendarGridPlatform('iphoneEmulatorBodyContainer');
}

/**
 * Switch Element when user changes link type
 * 
 * @param type
 * @return
 */
function switchElementBascLinkType(mediaSelectorCell, type) {
	mediaSelectorCell.removeChild($('media_source'));
	switch (type) {
	case '1':/* Page Item */
		if ($('image_link_browser')) {
			mediaSelectorCell.removeChild($('image_link_browser'));
			mediaSelectorCell.removeChild($('image_link_hidden'));
		}
		var mediaSourceComponent = document.createElement('select');
		mediaSourceComponent.id = 'media_source';
		mediaSourceComponent.name = mediaSourceComponent.id;
		mediaSelectorCell.appendChild(mediaSourceComponent);
		fillDataSelector(mediaSourceComponent, brochurepages);
		break;

	case '2': /* Video Item */
		if ($('image_link_browser')) {
			mediaSelectorCell.removeChild($('image_link_browser'));
			mediaSelectorCell.removeChild($('image_link_hidden'));
		}
		var mediaSourceComponent = document.createElement('select');
		mediaSourceComponent.id = 'media_source';
		mediaSourceComponent.name = mediaSourceComponent.id;
		mediaSelectorCell.appendChild(mediaSourceComponent);
		fillDataSelector(mediaSourceComponent, userVideos);
		break;

	case '3': /* Sound Item */
		if ($('image_link_browser')) {
			mediaSelectorCell.removeChild($('image_link_browser'));
			mediaSelectorCell.removeChild($('image_link_hidden'));
		}
		var mediaSourceComponent = document.createElement('select');
		mediaSourceComponent.id = 'media_source';
		mediaSourceComponent.name = mediaSourceComponent.id;
		mediaSelectorCell.appendChild(mediaSourceComponent);
		fillDataSelector(mediaSourceComponent, userAudios);
		break;

	case '4': /* Image Item */
		var mediaSourceComponent = document.createElement('select');
		mediaSourceComponent.id = 'media_source';
		mediaSourceComponent.name = mediaSourceComponent.id;
		mediaSourceComponent.style.width = "360px";
		mediaSelectorCell.appendChild(mediaSourceComponent);

		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].mediaType + "_"
								+ userimages[i].imageName));
			else
				newoption.appendChild(document
						.createTextNode(userimages[i].realname));
			mediaSourceComponent.appendChild(newoption);
		}

		/* create browser image button */
		var imageLinkButton = document.createElement('input')
		imageLinkButton.setAttribute("title", "Browse Images");
		imageLinkButton.setAttribute("type", "button");
		imageLinkButton.setAttribute("value", "Browse");
		imageLinkButton.setAttribute("id", "image_link_browser");
		imageLinkButton.style.marginLeft = "5px";

		var imageLinkHidden = document.createElement('input');
		imageLinkHidden.setAttribute('type', 'hidden');
		imageLinkHidden.setAttribute('id', 'image_link_hidden');
		imageLinkHidden.setAttribute('name', 'image_link_hidden');

		imageLinkButton.onclick = function() {
			expandingImage(mediaSourceComponent, 19, 0);
			updateParentCombo(mediaSourceComponent, imageLinkHidden);
		}
		mediaSelectorCell.appendChild(imageLinkHidden);
		mediaSelectorCell.appendChild(imageLinkButton);
		break;

	case '5': /* Hyperlink Item */
		if ($('image_link_browser')) {
			mediaSelectorCell.removeChild($('image_link_browser'));
			mediaSelectorCell.removeChild($('image_link_hidden'));
		}
		var mediaSourceComponent = document.createElement('input');
		mediaSourceComponent.setAttribute('id', 'media_source');
		mediaSourceComponent.setAttribute('type', 'text');
		mediaSourceComponent.setAttribute('name', 'media_source');
		mediaSelectorCell.appendChild(mediaSourceComponent);
		mediaSourceComponent.value = "http://";
		break;

	case '6': /* call Item */
		if ($('image_link_browser')) {
			mediaSelectorCell.removeChild($('image_link_browser'));
			mediaSelectorCell.removeChild($('image_link_hidden'));
		}
		var mediaSourceComponent = document.createElement('input');
		mediaSourceComponent.setAttribute('id', 'media_source');
		mediaSourceComponent.setAttribute('type', 'text');
		mediaSourceComponent.setAttribute('name', 'media_source');
		mediaSelectorCell.appendChild(mediaSourceComponent);
		mediaSourceComponent.value = "call:";
		break;
	}

}
/**
 * Adding options to selector element
 * 
 * @param selectorID
 * @param items
 * @return
 */
function fillDataSelector(selectorID, items) {
	for ( var i = 0; i < items.length; ++i) {
		var newoption = document.createElement('option');
		if (items[i] != null && items[i] != undefined && items[i].id != null
				&& items[i].id != undefined) {
			newoption.value = items[i].id;
			newoption.appendChild(document.createTextNode(items[i].label));
			selectorID.appendChild(newoption);
		}
	}
}

/**
 * Adding elements for storing data which user fill in popup panel
 * 
 * @param rowIndex
 * @param label
 * @param startDate
 * @param endDate
 * @param startImage
 * @param endImage
 * @param link
 * @param media
 * @return
 */
function addAdventCalendarStoredElements(rowIndex, label, startDate, endDate,
		startImage, endImage, link, media) {
	var li = document.createElement('li');
	li.setAttribute('id', 'lii_' + rowIndex);

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

	var inputRowId = document.createElement('input');
	inputRowId.setAttribute('type', 'hidden');
	inputRowId.setAttribute('name', 'rowid_' + rowIndex);
	inputRowId.setAttribute('id', 'rowid_' + rowIndex);
	newfields.appendChild(inputRowId);

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

	var labelComponent = document.createElement('label');
	labelComponent.innerHTML = label;
	labelComponent.id = 'label_' + rowIndex;
	newfields.appendChild(labelComponent);

	var labelStoring = document.createElement('input');
	labelStoring.setAttribute('type', 'hidden');
	labelStoring.setAttribute('name', 'text_' + rowIndex);
	labelStoring.setAttribute('id', 'text_' + rowIndex);
	labelStoring.value = label;
	newfields.appendChild(labelStoring);

	var startDateStoring = document.createElement('input');
	startDateStoring.setAttribute('type', 'hidden');
	startDateStoring.setAttribute('name', 'start_date_' + rowIndex);
	startDateStoring.setAttribute('id', 'start_date_' + rowIndex);
	startDateStoring.value = startDate;
	newfields.appendChild(startDateStoring);

	var endDateStoring = document.createElement('input');
	endDateStoring.setAttribute('type', 'hidden');
	endDateStoring.setAttribute('name', 'end_date_' + rowIndex);
	endDateStoring.setAttribute('id', 'end_date_' + rowIndex);
	endDateStoring.value = endDate;
	newfields.appendChild(endDateStoring);

	var startImageStoring = document.createElement('input');
	startImageStoring.setAttribute('type', 'hidden');
	startImageStoring.value = startImage;
	startImageStoring.setAttribute('name', 'start_image_' + rowIndex);
	startImageStoring.setAttribute('id', 'start_image_' + rowIndex);
	newfields.appendChild(startImageStoring);

	var endImageStoring = document.createElement('input');
	endImageStoring.setAttribute('type', 'hidden');
	endImageStoring.value = endImage;
	endImageStoring.setAttribute('name', 'end_image_' + rowIndex);
	endImageStoring.setAttribute('id', 'end_image_' + rowIndex);
	newfields.appendChild(endImageStoring);

	var linkTypeStoring = document.createElement('input');
	linkTypeStoring.setAttribute('type', 'hidden');
	linkTypeStoring.value = link;
	linkTypeStoring.setAttribute('name', 'link_type_' + rowIndex);
	linkTypeStoring.setAttribute('id', 'link_type_' + rowIndex);
	newfields.appendChild(linkTypeStoring);

	var mediaSourceStoring = document.createElement('input');
	mediaSourceStoring.setAttribute('type', 'hidden');
	mediaSourceStoring.value = media;
	mediaSourceStoring.setAttribute('name', 'media_source_' + rowIndex);
	mediaSourceStoring.setAttribute('id', 'media_source_' + rowIndex);
	newfields.appendChild(mediaSourceStoring);

	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_' + rowIndex;
	newupbutton.onclick = function() {
		var ul = $('adventCalendarGridListItems');
		moveListRowUp(ul, li);
		updatePreviewAdventCalendarEmulator();
	}
	newcontrols.appendChild(newupbutton);

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

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

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

	var newremovebutton = document.createElement('img');
	newremovebutton.src = 'img/bin_closed.png';
	newremovebutton.alt = newremovebutton.title = 'Remove';
	newremovebutton.id = 'removebutton_' + rowIndex;

	newremovebutton.onclick = function() {
		$(li).remove();
		var ul = $('adventCalendarGridListItems');
		resetListOrder(ul);

		updatePreviewAdventCalendarEmulator();
	}
	newcontrols.appendChild(newremovebutton);

	var neweditbutton = document.createElement('img');
	neweditbutton.src = 'img/design.png';
	neweditbutton.alt = neweditbutton.title = 'Edit';
	neweditbutton.id = 'editbutton_' + rowIndex;
	neweditbutton.onclick = function() {
		disablePage();
		showAddPopupAdventCalendar(labelComponent, startDateStoring,
				endDateStoring, startImageStoring, endImageStoring,
				linkTypeStoring, mediaSourceStoring, labelStoring);
	}
	newcontrols.appendChild(neweditbutton);

	li.appendChild(newcontrols);

	$('adventCalendarGridListItems').appendChild(li);
}