var opacityTimerID;
var hideTimerID;
var browser = navigator.appName;

function init() {
	hidePopupGiftDetail();
}


window.onload = init;

function setElementOpacity(opacity) {
	var style = document.getElementById("Div_PopupGiftDetail").style;

	if (browser == "Microsoft Internet Explorer") {
		style.filter = "alpha(opacity=0)";
		document.getElementById("Div_PopupGiftDetail").filters.alpha.opacity = opacity;
	} else if (browser == "Netscape") {
		style.MozOpacity = opacity / 100.0;
	} else // Opera
	{
		style.opacity = opacity ;
	}
}

function clearOpacityTimer() {
	if(typeof this.opacityTimerID == "number")
	{
		window.clearTimeout(this.opacityTimerID);
		if (browser == "Netscape") {
			delete this.opacityTimerID;
		}
	}
}

function clearHideTimer() {
	if(typeof this.hideTimerID == "number")
	{
		window.clearTimeout(this.hideTimerID);
		if (browser == "Netscape") {
			delete this.hideTimerID;
		}
	}
}

function setOpacity(alpha) {
	clearHideTimer();
	alpha = 100;
	if (alpha >= 100) {
		setElementOpacity(100);
		//document.getElementById("Div_PopupGiftDetail").blur();
		clearOpacityTimer();
		alpha = 0;
	} else {
		setElementOpacity(alpha);
		alpha += 10;
		clearOpacityTimer();
		opacityTimerID = window.setTimeout("setOpacity("+alpha+")", 100);
	}

}
function getX(evt) {
	if (document.all) {
		return (evt.clientX);
	}
	return (evt.layerX);
}
function getY(evt) {
	if (document.all) {
		return (evt.clientY);
	}
	return (evt.layerY);
}
/*
function getScrollX() {
	if (document.all) {
		return (document.body.scrollLeft);
	}
	return (window.pageXOffset);
}
function getScrollY() {
	if (document.all) {
		return (document.body.scrollTop);
	}
	return (window.pageYOffset);
}
*/
function getWinWidth() {
	  var myWidth = 0;
	  if( typeof( window.innerWidth ) == 'number' ) {
	    //Non-IE
	    myWidth = window.innerWidth;
	  } else if( document.documentElement && document.documentElement.clientWidth ) {
	    //IE 6+ in 'standards compliant mode'
	    myWidth = document.documentElement.clientWidth;
	  } else if( document.body && document.body.clientWidth ) {
	    //IE 4 compatible
	    myWidth = document.body.clientWidth;
	  }
	  return myWidth;
}

function getWinHeight() {
	  var myHeight = 0;
	  if( typeof( window.innerHeight ) == 'number' ) {
	    //Non-IE
	    myHeight = window.innerHeight;
	  } else if( document.documentElement && document.documentElement.clientHeight ) {
	    //IE 6+ in 'standards compliant mode'
	    myHeight = document.documentElement.clientHeight;
	  } else if( document.body && document.body.clientHeight ) {
	    //IE 4 compatible
	    myHeight = document.body.clientHeight;
	  }
	  return myHeight;
}

function getScrollX() {
	  var scrOfX = 0;
	  if( typeof( window.pageYOffset ) == 'number' ) {
	    //Netscape compliant
	    scrOfX = window.pageXOffset;
	  } else if( document.body && document.body.scrollLeft ) {
	    //DOM compliant
	    scrOfX = document.body.scrollLeft;
	  } else if( document.documentElement && document.documentElement.scrollLeft ) {
	    //IE6 standards compliant mode
	    scrOfX = document.documentElement.scrollLeft;
	  }
	  return scrOfX;
	}

function getScrollY() {
	  var scrOfY = 0;
	  if( typeof( window.pageYOffset ) == 'number' ) {
	    //Netscape compliant
	    scrOfY = window.pageYOffset;
	  } else if( document.body && document.body.scrollTop ) {
	    //DOM compliant
	    scrOfY = document.body.scrollTop;
	  } else if( document.documentElement && document.documentElement.scrollTop ) {
	    //IE6 standards compliant mode
	    scrOfY = document.documentElement.scrollTop;
	  }
	  return scrOfY;
	}

function findPositionX( eID ) {
	var element = document.getElementById(eID);
	
	  if( typeof( element.offsetParent ) != 'undefined' ) {
	    for( var posX = 0; element; element = element.offsetParent ) {
	      posX += element.offsetLeft;
	    }
	    return posX;
	  } else {
	    return element.x;
	  }
	}

function findPositionWidth( eID ) {
	var element = document.getElementById(eID);
	
    return element.clientWidth;
}

function findPositionY( eID ) {
	var element = document.getElementById(eID);
	
	  if( typeof( element.offsetParent ) != 'undefined' ) {
	    for( var posY = 0; element; element = element.offsetParent ) {
	      posY += element.offsetTop;
	    }
	    return posY;
	  } else {
	    return element.y;
	  }
	}

function findPositionHeight( eID ) {
	var element = document.getElementById(eID);
	
    return element.clientHeight;
}

function showPopupGiftDetailInfo(evt, elementID, giftID, reflink, imageContext) {
	BeanHandler.getGift(giftID, function(gift) {
		//alert(gift.giftID + " " + gift.giftName);
		
		var giftConditionID = gift.giftConditionID;
		
		BeanHandler.getGiftCondition(giftConditionID, function(giftCondition) {
		var userID = gift.userID;
		
			BeanHandler.getUser(userID, function(user) {
				//alert(gift.giftID + " " + user.name);
				var detailURL = reflink + "?giftId=" + gift.giftID + "#G" + gift.giftID;
				var image = imageContext + gift.imagePath;
				var giftName = gift.giftName;
				var specGiftName = gift.specGiftName;
				var postDate = gift.lastModified;
				var categoryName = gift.categoryName;
				var price = gift.price;
				var condition = giftCondition.description;
				var userName = user.name;
				var zoneName = user.zoneName;
				var regDate = user.regDate;
				var description = gift.specDescription;
				var expiryDate = gift.expiryDate;
				var preferGift = gift.preferGift;
				var preferGiftCategories = gift.preferGiftCategories;
				var email = user.showEmail ? user.email	: "";
				var telephone = user.showTelephone ? user.telephone : "";
				var pinImage = imageContext + "pin.gif";
				var pinURL = detailURL;
				showPopupGiftImage(evt, elementID, detailURL, image, specGiftName);
				/*
				showPopupGiftDetail(evt, elementID, detailURL, 
						image, giftName, specGiftName, categoryName, postDate, price, 
						condition, userName, zoneName, regDate,
						description, expiryDate, preferGift, preferGiftCategories, 
						email, telephone, pinImage, pinURL);
						*/
			});
		});
	});
}

function showPopupGiftImage(evt, eID, detailURL, image, specGiftName) {
	var posx = 0;
	var posy = 0;
	var e = evt ? evt : (window.event ? window.event : null);
	posx = findPositionX(eID) + 100;
	if(posx + 400 > 1024) {
		posx -= 400;
	}
	posy = findPositionY(eID) + 50;
	var sy = getScrollY();
	if(posy + 400 - sy > 750) {
		posy -= 350;
	}
	var htmlData = 
		  '<div id="Div_PopupGiftDetail_Inner" onmouseover="pause()" onmouseout="hidePopupGiftDetail()" >'
			+ '<div class="title">'
				+ '<div class="giftname"><a href="' + detailURL + '">' + specGiftName + '</a></div>'
				+ '<div class="close" onclick="hidePopupGiftDetail()">Close</div>'
			+ '</div>'
			+ '<div class="contentbody">'
				+ '<div class="detailimage" style="background-image:url(\'' + image + '\');" onclick="window.location=\''+ detailURL + '\'">'
					//+ '<img src="' + image + '" />'
				+ '</div>'
				+ '<div style="width: 300px; font-size: 12px; text-align: center;margin: 0px 0px 0px 0px; padding: 5px 0px 10px 0px;">'
					+ '<a href="' + detailURL + '">More Details...</a>'
				+ '</div>'
			+ '</div>'
		  + '</div>';
	document.getElementById("Div_PopupGiftDetail").style.position = "absolute";
	document.getElementById("Div_PopupGiftDetail").style.top = posy + "px";
	document.getElementById("Div_PopupGiftDetail").style.left = posx + "px";
	document.getElementById("Div_PopupGiftDetail").style.width = 325 + "px";
	document.getElementById("Div_PopupGiftDetail").style.height = 400 + "px";
	document.getElementById("Div_PopupGiftDetail").style.display = "inline";
	document.getElementById("Div_PopupGiftDetail").innerHTML = htmlData;
	setOpacity(0);
	
}

function showPopupGiftDetail(evt, eID, detailURL, 
		image, giftName, specGiftName, categoryName, postDate, price, 
		condition, userName, zoneName, regDate,
		description, expiryDate, preferGift, preferGiftCategories, 
		email, telephone, pinImage, pinURL) {
	// window.open("GiftDetailPopup.jsp","Window1",
	// "menubar=no,width=430,height=360,toolbar=no");
	// dwr.util.setValue("id_text", data);
	// document.getElementById("Div_PopupGiftDetail").style.visibility =
	// "visible";
	var posx = 0;
	var posy = 0;
	var e = evt ? evt : (window.event ? window.event : null);

	/*
	if (e.pageX || e.pageY) {
		posx = e.pageX;
		posy = e.pageY;
	} else if (e.clientX || e.clientY) {
		posx = e.clientX + document.body.scrollLeft
				+ document.documentElement.scrollLeft;
		posy = e.clientY + document.body.scrollTop
				+ document.documentElement.scrollTop;
	}
	*/
	
	//alert("getX:"+getX(e) + "  getScrollX:"+getScrollX() + "  getWinWidth:"+getWinWidth());
	//alert("getY:"+getY(e) + "  getScrollY:"+getScrollY() + "  getWinHeight:"+getWinHeight());
	
	//posx = getX(e);
	//posy = getY(e);
	//posx = getX(e) + getScrollX();
	//posy = getY(e) + getScrollY();
	
	posx = findPositionX(eID) + 100;
	if(posx + 580 > 1024) {
		posx -= 670;
	}
	//posy = findPositionY(eID) + findPositionHeight(eID) - 10;
	posy = findPositionY(eID) + 50;
	//alert("posX:" + posx + "  posY:"+posy);
	//posx += 20;
	//posy += 5;
	/*
	if(posx + 550 > getWinWidth()) 
		posx -= 555;
	if(posx < 0) posx = 0;
	if(posy + 300 > getWinHeight()) 
		posy -= 305;
	if(posy < 0) posy = 0;
	*/
	//var imageData = '<img class="giftimage" src="' + image + '" />';
	//var imagePin = '<img class="pinimage" src="' + pinImage + '" />';
	
	if(preferGift != null && preferGift.length > 0) {
		preferGift += "<br>";
	}
	var htmlData = 
				  '<div id="Div_PopupGiftDetail" onmouseover="pause()" onmouseout="hidePopupGiftDetail()" onclick="window.location=\''+ detailURL + '\'">'
					+ '<div class="title">'
						+ '<a href="' + pinURL + '">' + '<img src="' + pinImage + '" />' + '</a>&nbsp;'
						+ '<a href="' + detailURL + '">' + specGiftName + '</a>'
					+ '</div>'
					+ '<div class="contentbody">'
						+ '<div class="detailimage" style="background-image:url(\'' + image + '\');" onclick="window.location=\''+ detailURL + '\'">'
							//+ '<img src="' + image + '" />'
						+ '</div>'
						+ '<div class="tablediv">'
						  + '<div class="tablerowdiv">'
						    + '<div class="tablecellfield">'
						      + 'Item Name:'
						    + '</div>'
						    + '<div class="tablecellvalue">'
						      + giftName
						    + '</div>'
						  + '</div>'
						  + '<div class="tablerowdiv">'
						    + '<div class="tablecellfield">'
						      + 'Price:'
						    + '</div>'
						    + '<div class="tablecellvalue">'
						      + price
						    + '</div>'
						  + '</div>'
						  + '<div class="tablerowdiv">'
						    + '<div class="tablecellfield">'
						      + 'Condition:'
						    + '</div>'
						    + '<div class="tablecellvalue">'
						      + condition 
						    + '</div>'
						  + '</div>'
						  + '<div class="tablerowdiv">'
						    + '<div class="tablecellfield">'
						      + 'Category:'
						    + '</div>'
						    + '<div class="tablecellvalue">'
						      + categoryName 
						    + '</div>'
						  + '</div>'
						  + '<div class="tablerowdiv">'
						    + '<div class="tablecellfield">'
						      + 'Post Date:'
						    + '</div>'
						    + '<div class="tablecellvalue">'
						      + postDate
						    + '</div>'
						  + '</div>'
						  + '<div class="tablerowdiv">'
						    + '<div class="tablecellfield">'
						      + 'Expiry Date:'
						    + '</div>'
						    + '<div class="tablecellvalue">'
						      + expiryDate
						    + '</div>'
						  + '</div>'
						  + '<br>'
						  + '<div class="tablerowdiv">'
						    + '<div class="tablecellfield">'
						      + 'Owner:'
						    + '</div>'
						    + '<div class="tablecellvalue">'
						      + userName
						    + '</div>'
						  + '</div>'
						  + '<div class="tablerowdiv">'
						    + '<div class="tablecellfield">'
						      + 'Location:'
						    + '</div>'
						    + '<div class="tablecellvalue">'
						      + zoneName
						    + '</div>'
						  + '</div>'
						  + '<div class="tablerowdiv">'
						    + '<div class="tablecellfield">'
						      + 'Reg Date:'
						    + '</div>'
						    + '<div class="tablecellvalue">'
						      + regDate
						    + '</div>'
						  + '</div>'
						  + '<div class="tablerowdiv">'
						    + '<div class="tablecellfield">'
						      + 'Email:'
						    + '</div>'
						    + '<div class="tablecellvalue">'
						      + email
						    + '</div>'
						  + '</div>'
						  + '<div class="tablerowdiv">'
						    + '<div class="tablecellfield">'
						      + 'Telephone:'
						    + '</div>'
						    + '<div class="tablecellvalue">'
						      + telephone
						    + '</div>'
						  + '</div>'
						+ '</div>'
						+ '<div style="clear: left;">&nbsp;</div>'
						+ '<div class="detailinfo">'
						+ '<h3>Description</h3>'
						+ '<p>'+ description + '</p>'
						+ '<h3>Prefer Exchange</h3>'
						+ '<p>'+ preferGift + '</p>'
						+ '</div>'
					+ '</div>'
				  + '</div>';

	/*
	var htmlData = '<table border="0" style="font-size: 11px; margin: 0px; padding: 0px;" '
			+ 'onmouseover="pause()" '
			+ 'onmouseout="hidePopupGiftDetail()" '
			+ '>'
			+ '<tr height="45px">'
			+ '<td colspan="2" style="font-size: 14px;">'
			+ '<a href="'
			+ pinURL
			+ '">'
			+ imagePin
			+ '</a>'
			+ '<b><a href="'
			+ detailURL
			+ '" '
			+
			// 'onmouseover="pause()" '+
			// 'onmouseout="hidePopupGiftDetail()" '+
			'>'
			+ 'Detail Information of '
			+ giftName
			+ '</a>'
			+ '</b></td>'
			+ '<td align="right">'
			+ '</td>'
			+ '</tr>'
			+ '<tr>'
			+ '<td rowspan="9" width="250">'
			+ imageData
			+ '</td>'
			+ '<td width="130"></td>'
			+ '<td width="200"></td>'
			+ '</tr>'
			+ '<tr>'
			+ '<td><b>Description:</b></td>'
			+ '<td>'
			+ description
			+ '</td>'
			+ '</tr>'
			+ '<tr>'
			+ '<td><b>Estimated Price:</b></td>'
			+ '<td>'
			+ price
			+ '</td>'
			+ '</tr>'
			+ '<tr>'
			+ '<td><b>Expiry Date:</b></td>'
			+ '<td>'
			+ expiryDate
			+ '</td>'
			+ '</tr>'
			+ '<tr>'
			+ '<td><b>Prefer Exchange:</b></td>'
			+ '<td>'
			+ preferGift
			+ '</td>'
			+ '</tr>'
			+ '<tr>'
			+ '<td><b>User Name:</b></td>'
			+ '<td>'
			+ userName
			+ '</td>'
			+ '</tr>'
			+ '<tr>'
			+ '<td><b>Email:</b></td>'
			+ '<td>'
			+ email
			+ '</td>'
			+ '</tr>'
			+ '<tr>'
			+ '<td><b>Telephone:</b></td>'
			+ '<td>' + telephone + '</td>' 
			+ '</tr>' 
			+ '<tr>'
			+ '<td><b></b></td>'
			+ '<td>' + " " + '</td>' 
			+ '</tr>' 
			+ '</table><br>';
	*/
	//alert(htmlData);
	document.getElementById("Div_PopupGiftDetail").style.position = "absolute";
	document.getElementById("Div_PopupGiftDetail").style.top = posy + "px";
	document.getElementById("Div_PopupGiftDetail").style.left = posx + "px";
	document.getElementById("Div_PopupGiftDetail").style.width = 600 + "px";
	document.getElementById("Div_PopupGiftDetail").style.height = 470 + "px";
	document.getElementById("Div_PopupGiftDetail").style.display = "inline";
	document.getElementById("Div_PopupGiftDetail").innerHTML = htmlData;
	setOpacity(0);
}

function hidePopupGiftDetail(delaySecond) {
	// document.getElementById("Div_PopupGiftDetail").style.visibility =
	// "hidden";
	//clearOpacityTimer();
	
	if(delaySecond == 0) {
		clearHideTimer();
		clearOpacityTimer();
		document.getElementById("Div_PopupGiftDetail").style.display = "none";
	}
	else {
		clearHideTimer();
		hideTimerID = window.setTimeout("hidePopupGiftDetail(0)", delaySecond * 1000);
	}
}

function pause() {
	clearHideTimer();
	//clearOpacityTimer();
	//setElementOpacity(100);
	
	document.getElementById("Div_PopupGiftDetail").style.display = "inline";
}



function sendMsg(storeID, userID, giftID) {
	var msgList = document.getElementById("id_msglist"); 
	//var msg = document.getElementById("id_msg");
	
	var message = dwr.util.getValue("id_msg");
	
	dwr.util.setValue("id_msg", "");
	
	BeanHandler.saveEnquiryMsg(storeID, giftID, message, userID, function(notices) {
		var i = 0;
		for(i = msgList.childNodes.length - 1; i >= 0 ; i--)
		{
			msgList.removeChild(msgList.childNodes[i]);
		}
		//var p = msgList.parentNode;
		//p.removeChild(msgList);
		for(i = 0; i < notices.length; i++) {
			var data = notices[i];
			this.li = document.createElement("LI");
			this.li.innerHTML = "<b>" + data.userName 
				+ "</b> on " + data.dateAdded 
				+ "<br>" 
				+ "<p>" + data.msg + "</p>";
			msgList.appendChild(this.li);
		}
		//p.appendChild(msgList);
	});

}

function updateImage(imgindex, imageFileName, orgImageFileName, imgCount) {
	var div_image = document.getElementById("id_detailimage"); 
	div_image.style.background = "url('" + imageFileName + "')";
	div_image.style.backgroundRepeat="no-repeat";
	div_image.style.backgroundPosition="center center";
	div_image.innerHTML = '<a onclick="showGallery('+imgCount+')"></a>';
	
	for(var i = 0; i < imgCount; i++) {
		var imgID = "img" + i;
		var img = document.getElementById(imgID);
		if(imgindex == i) {
			img.style.border = "3px #0000CC solid";
			img.style.width = "39px";
			img.style.height = "39px";
		}
		else {
			img.style.border = "0px";
			img.style.width = "45px";
			img.style.height = "45px";
		}
	}
}

function updateImage_nopop(imgindex, imageFileName, orgImageFileName, imgCount) {
	var div_image = document.getElementById("id_detailimage"); 
	div_image.style.background = "url('" + imageFileName + "')";
	div_image.style.backgroundRepeat="no-repeat";
	div_image.style.backgroundPosition="center center";
	
	
	for(var i = 0; i < imgCount; i++) {
		var imgID = "img" + i;
		var img = document.getElementById(imgID);
		if(imgindex == i) {
			img.style.border = "3px #0000CC solid";
			img.style.width = "39px";
			img.style.height = "39px";
		}
		else {
			img.style.border = "0px";
			img.style.width = "45px";
			img.style.height = "45px";
		}
	}
}




function func(msg) {
	alert(msg);
}

function showbigpic(imageURL, giftID) {
	//alert(imageurl);
	//window.open(imageurl);
	BeanHandler.getGift(giftID, function(gift) {
		OpenWindow=window.open("", "_blank");
		if (OpenWindow==null || typeof(OpenWindow)=="undefined") {
			return true;
		}

		OpenWindow.document.write("<TITLE>" + gift.giftName + "</TITLE>");
		OpenWindow.document.write("<BODY BGCOLOR=#ffffff>"); 
		OpenWindow.document.write("<h1>" + gift.giftName + "</h1>");
		
		var giftImageFiles = gift.giftImageFiles;
		var imageFolder = gift.imageFolder;
		if(giftImageFiles != null && giftImageFiles.length > 0) {
			for(var i = 0; i < giftImageFiles.length; i++) {
				if(giftImageFiles[i].originalImageFileName != null &&
						giftImageFiles[i].originalImageFileName.length > 0) {
					OpenWindow.document.write("<img src='" + 
							imageURL + 
							imageFolder + 
							giftImageFiles[i].originalImageFileName + 
							"' /><br>");
				}
				else if(giftImageFiles[i].imageFileName != null &&
						giftImageFiles[i].imageFileName.length > 0) {
					OpenWindow.document.write("<img src='" + 
							imageURL + 
							imageFolder + 
							giftImageFiles[i].imageFileName + 
							"' /><br>");
				}
			}
		}
		
		OpenWindow.document.write("</BODY>");
		OpenWindow.document.write("</HTML>");
		OpenWindow.document.close();
		return false;
	});
}

function addShoppingCart(shopperID, productID,myChoise, qty) {
	BeanHandler.addShoppingCart(shopperID, productID, myChoise, qty, function(success) {
		if(success) {
			alert("The selected product has been added to shopping cart successful");
		}
		else {
			alert("Failed to add the selected product to shopping cart.");
		}
	});
}

function removeShoppingItem(shopperID, productID, qty) {
	BeanHandler.removeShoppingCartItem(shopperID, productID, qty, function(success) {
		if(success) {
			alert("The selected product has been added to shopping cart successful");
		}
		else {
			alert("Failed to add the selected product to shopping cart.");
		}
	});
}

function showhide(divid, spanid) {
	var div = document.getElementById(divid);
	if(div.style.display == "none") {
		div.style.display = "inline";
		dwr.util.setValue(spanid, "X");
	}
	else {
		div.style.display = "none";
		dwr.util.setValue(spanid, "O");
	}
}

function showHowToOrder(evt, userID, userURL) {

	var posx = 0;
	var posy = 0;
	var e = evt ? evt : (window.event ? window.event : null);
	
	var eID = "id_hto" + userID;
	posx = findPositionX(eID) + 100;
	if(posx + 350 > 1024) {
		posx -= 400;
	}
	posy = findPositionY(eID);
	var sy = getScrollY();
	if(posy + 250 - sy > 700) {
		posy -= 450;
	}
	else if(posy + 500 - sy > 700) {
		posy -= 250;
	}

	var email = "Email: ";
	var telephone = "Tel: ";

	BeanHandler.getUser(userID, function(user) {

		if(user.showEmail == true) {
			email += user.email;
		}
		else {
			email += "-";
		}
		if(user.showTelephone == true) {
			telephone += user.telephone;
		}
		else {
			telephone += "-";
		}
			
		var htmlData = 
			  '<div id="Div_PopupStore_Inner" >'
				+ '<div class="title">'
					+ '<div class="giftname">Terms & Conditions</div>'
					+ '<div class="close" onclick="hideHowToOrder()">Close</div>'
				+ '</div>'
				+ '<div class="contentbody">'
						+ user.shopBusinessDisplay
				+ '</div>'	
				+ '<div class="storename">'
					+ '<a href="' + userURL + '">' + user.name + '</a>'
				+ '</div>'
			  + '</div>';

		var div = document.getElementById("Div_PopupStore");
		div.style.position = "absolute";
		div.style.top = posy + "px";
		div.style.left = posx + "px";
		div.style.width = 350 + "px";
		div.style.height = 500 + "px";
		div.style.display = "inline";
		div.innerHTML = htmlData;
	});
}

function hideHowToOrder() {
	document.getElementById("Div_PopupStore").style.display = "none";
}


function showpresence(presence)
{
   var innerFrame = document.getElementById('innerFrame');
      
   var statusIcon = document.createElement('img');
   statusIcon.style.border = 'none';
   statusIcon.src = presence.icon.url;
   statusIcon.width = presence.icon.width;
   statusIcon.height = presence.icon.height;
   statusIcon.alt = presence.statusText;
   statusIcon.title = presence.statusText;

   var displayName = document.createElement('span');
   displayName.style.fontFamily = 'Tahoma, Verdana, sans-serif';
   displayName.style.fontSize = '9pt';
   displayName.title = presence.displayName;
   
   var statusText = document.createElement('span');
   statusText.style.fontFamily = 'Tahoma, Verdana, sans-serif';
   statusText.style.fontSize = '9pt';
   statusText.title = presence.statusText;
   
   var br = document.createElement('br');
   
   innerFrame.appendChild(statusIcon);
   innerFrame.appendChild(displayName);
   innerFrame.appendChild(statusText);
   

   if ((displayName.innerText !== undefined)&&(statusText.innerText !== undefined))
   {
      document.writeln('Hello there!'+presence.displayName);
      displayName.innerText = presence.displayName;
      statusText.innerText = '- ('+ presence.statusText+')';
   }
   else if ((displayName.textContent != undefined)&&(statusText.textContent !== undefined))
   {
      
      displayName.textContent = presence.displayName;
      statusText.textContent = '- ('+presence.statusText+')';
   }
   
}
   function get_full_remarks(){

		var full_remarks = '';
		
		if(document.add_to_cart_form.cart_item_color.value != undefined &&  document.add_to_cart_form.cart_item_color.value != null)
			full_remarks += '[Color] '+ document.add_to_cart_form.cart_item_color.value+'; ';
		else
			full_remarks += '[Color] '+ '--; ';

		if(document.add_to_cart_form.cart_item_size.value != '')
			full_remarks += '[Size] '+ document.add_to_cart_form.cart_item_size.value+'; ';
		else
			full_remarks += '[Size] '+ '--; ';


		if(document.add_to_cart_form.more_words.value != '')
			full_remarks += '[More words] '+ document.add_to_cart_form.more_words.value;
		else
			full_remarks += '[More words] '+ '--';
		
		document.add_to_cart_form.my_words.value = full_remarks;
			
			
	}


	function gd_checkEnter(e){ //e is event object passed from function invocation
		var characterCode; //literal character code will be stored in this variable

		if(e && e.which){ //if which property of event object is supported (NN4)
			e = e;
			characterCode = e.which; //character code is contained in NN4's which property
		}
		else{
			e = e;
			characterCode = e.keyCode; //character code is contained in IE's keyCode property
		}

		if(characterCode == 13){ //if generated character code is equal to ascii 13 (if enter key)
			
			return false;
		}
		else{
			return true;
		}

	}

	function submit_add_to_cart(){
		get_full_remarks();
		document.add_to_cart_form.submit();
	}	

   
	
	// Tell a friend
	function IsEmpty(aTextField) {
		   if ((aTextField.value.length==0) ||
		   (aTextField.value==null)) {
		      return true;
		   }
		   else { return false; }
		}	


	function IsNumeric(sText)
	
	{
	   var ValidChars = "0123456789.";
	   var IsNumber=true;
	   var Char;
	
	 
	   for (i = 0; i < sText.length && IsNumber == true; i++) 
	      { 
	      Char = sText.charAt(i); 
	      if (ValidChars.indexOf(Char) == -1) 
	         {
	         IsNumber = false;
	         }
	      }
	   return IsNumber;
	   
	 }

	function isValidEmail(str) {

	   return (str.indexOf(".") > 2) && (str.indexOf("@") > 0);

	}


	
	function validate_tell_a_friend(tellAFriendForm){
		
		
		if(IsEmpty(tellAFriendForm.friend_email)) 
	   	{ 
	      	alert('Please enter your friend\'s email address.'); 
	      	tellAFriendForm.friend_email.focus(); 
	      	return false; 
	   	} 
	   	if (!isValidEmail(tellAFriendForm.friend_email.value)) 
	   	{ 
	      alert('Please enter a valid email address.'); 
	      tellAFriendForm.friend_email.focus(); 
	      return false; 
	   	} 
	   	
	   	return true;
		
	}
   
	
	
	var gallery;
	
	function build_small_gallery(){
		
		// We only want these styles applied when javascript is enabled
		// >>> $('div.navigation').css({'width' : '200px','height' : '480px', 'float' : 'right', 'border' : '0px'} );
		$('div.gallery_content').css({'width' : '404px', 'height' : '404px', 'display' : 'block'});
		
		
		//alert('Going to build gallery!');
		$('div.navigation').css({'width' : '200px','height' : '350px', 'float' : 'right', 'border' : '0px'} );
		$('#thumbs ul.thumbs ').css({'width' : '200px',  'border' : '0px #ff0000 solid'} );
		$('#thumbs ul.thumbs li').css({'width' : '88px', 'float' : 'left', 'border' : '0px #000000 solid'} );
		
		$('a.advance-link').css({'width' : '400px','height' : '400px'});
		

		// Initially set opacity on thumbs and add
		// additional styling for hover effect on thumbs
		var onMouseOutOpacity = 0.67;
		$('#thumbs ul.thumbs li').opacityrollover({
			mouseOutOpacity:   onMouseOutOpacity,
			mouseOverOpacity:  1.0,
			fadeSpeed:         'fast',
			exemptionSelector: '.selected'
		});
		
		// Initialize Advanced Galleriffic Gallery
		gallery = $('#thumbs').galleriffic({
			delay:                     2500,
			numThumbs:                 5,
			preloadAhead:              5,
			enableTopPager:            false,
			enableBottomPager:         false,
			maxPagesToShow:            2,
			imageContainerSel:         '#slideshow',
			controlsContainerSel:      '#controls',
			captionContainerSel:       '#caption',
			loadingContainerSel:       '#loading',
			renderSSControls:          false,
			renderNavControls:         false,
			playLinkText:              'Play Slideshow',
			pauseLinkText:             'Pause Slideshow',
			prevLinkText:              '&lsaquo; Previous Photo',
			nextLinkText:              'Next Photo &rsaquo;',
			nextPageLinkText:          'Next &rsaquo;',
			prevPageLinkText:          '&lsaquo; Prev',
			enableHistory:             false,
			autoStart:                 false,
			syncTransitions:           true,
			defaultTransitionDuration: 900,
			onSlideChange:             function(prevIndex, nextIndex) {
				// 'this' refers to the gallery, which is an extension of $('#thumbs')
				this.find('ul.thumbs').children()
					.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
					.eq(nextIndex).fadeTo('fast', 1.0);
			},
			onPageTransitionOut:       function(callback) {
				this.fadeTo('fast', 0.0, callback);
			},
			onPageTransitionIn:        function() {
				this.fadeTo('fast', 1.0);
			}
		});

		
		//alert('gallery ready!');
	}


	function build_big_gallery(){
		
		// We only want these styles applied when javascript is enabled
		$('div.navigation').css({'width' : '132px','height' : '580px', 'float' : 'right', 'border' : '0px'} );
		$('div.gallery_content').css({'display' : 'block'});
		
		
		//alert('Going to build gallery!');
		
		

		// Initially set opacity on thumbs and add
		// additional styling for hover effect on thumbs
		var onMouseOutOpacity = 0.67;
		$('#thumbs ul.thumbs li').opacityrollover({
			mouseOutOpacity:   onMouseOutOpacity,
			mouseOverOpacity:  1.0,
			fadeSpeed:         'fast',
			exemptionSelector: '.selected'
		});
		
		// Initialize Advanced Galleriffic Gallery
		gallery = $('#thumbs').galleriffic({
			delay:                     2500,
			numThumbs:                 5,
			preloadAhead:              5,
			enableTopPager:            false,
			enableBottomPager:         false,
			maxPagesToShow:            2,
			imageContainerSel:         '#slideshow',
			controlsContainerSel:      '#controls',
			captionContainerSel:       '#caption',
			loadingContainerSel:       '#loading',
			renderSSControls:          false,
			renderNavControls:         false,
			playLinkText:              'Play Slideshow',
			pauseLinkText:             'Pause Slideshow',
			prevLinkText:              '&lsaquo; Previous Photo',
			nextLinkText:              'Next Photo &rsaquo;',
			nextPageLinkText:          'Next &rsaquo;',
			prevPageLinkText:          '&lsaquo; Prev',
			enableHistory:             false,
			autoStart:                 false,
			syncTransitions:           true,
			defaultTransitionDuration: 900,
			onSlideChange:             function(prevIndex, nextIndex) {
				// 'this' refers to the gallery, which is an extension of $('#thumbs')
				this.find('ul.thumbs').children()
					.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
					.eq(nextIndex).fadeTo('fast', 1.0);
			},
			onPageTransitionOut:       function(callback) {
				this.fadeTo('fast', 0.0, callback);
			},
			onPageTransitionIn:        function() {
				this.fadeTo('fast', 1.0);
			}
		});

		
		//alert('gallery ready!');
	}

	
	/// Control the display of magnifier

	var smallImageNumbers = 0;
	var smallImageCount = 0;
	function setSmallImageNumbers( numb){
		smallImageNumbers = numb;
		smallImageCount = numb;
		//alert('Set small images number = '+smallImageNumbers);
	}
	
	function aSmallImageDownloaded(){
		smallImageNumbers = smallImageNumbers - 1 ;
		
		//alert('A small image downloaded. left: smallImageNumbers='+smallImageNumbers);
		
		if(smallImageNumbers == 0){
			
			showMagnifier();
			//alert('ALL small image downloaded');
			
			
		
			// don't auto popup when log in window need to be shown
			if(!popupLOginWindow){
				showGallery(smallImageCount);
			}	
			
		
			
		}	
		
	}
	
	function showMagnifier(){
		
		var div_magnifier = document.getElementById("magnifier");
		div_magnifier.style.display = "block";
		
		var div_loading = document.getElementById("loading_page");
		div_loading.style.display = "none";
		
		//alert('To build gallery...');
		
		
		// Change to be called in GiftDetail.jsp, before construct the gallery.  
		// initGallerySize();
		
		
		
			if(isSmallGallery){
				build_small_gallery();
				
			}
			else{
				build_big_gallery();
			}
	
	}
	
	function initGallerySize(){
		
		isSmallGallery = false;
		
		var w = 0;
		var h = 0;
		//IE
		if(!window.innerWidth)
		{
		//strict mode
		if(!(document.documentElement.clientWidth == 0))
		{
		w = document.documentElement.clientWidth;
		h = document.documentElement.clientHeight;
		}
		//quirks mode
		else
		{
		w = document.body.clientWidth;
		h = document.body.clientHeight;
		}
		}
		//w3c
		else
		{
		w = window.innerWidth;
		h = window.innerHeight;
		}

		if(h < 600){
			isSmallGallery = true;
			
			 maxGalleryWidth = smallMaxGalleryWidth;
			 maxGalleryWidth_px = smallMaxGalleryWidth_px;
			
			 maxGalleryHeight = smallMaxGalleryHeight;
			 maxGalleryHeight_px = smallMaxGalleryHeight_px;
			
			 maxSlideWidth  = smallMaxSlideWidth; // Max width for the image 
		     maxSlideHeight = smallMaxSlideHeight;    // Max height for the image
		     
		  

		}	
		else{
			
			isSmallGallery = false;
			
			 maxGalleryWidth = bigMaxGalleryWidth;
			 maxGalleryWidth_px = bigMaxGalleryWidth_px;
			
			 maxGalleryHeight = bigMaxGalleryHeight;
			 maxGalleryHeight_px = bigMaxGalleryHeight_px;
			
			 maxSlideWidth  = bigMaxSlideWidth; // Max width for the image 
		     maxSlideHeight = bigMaxSlideHeight;    // Max height for the image
		     
		     
		}	
		return;
	}
	
	
	function playSlideShow(){
		gallery.gotoIndex(0,false, true);// Set the 1st as the current 
		gallery.play();
	}
	
	function pauseSlideShow(){
		gallery.pause();
	}
	
	/*  Now using animated_hide_overlay() instead
	function closeGallery() {
		
		var w = 0;
		var h = 0;
		//IE
		if(!window.innerWidth)
		{
		//strict mode
		if(!(document.documentElement.clientWidth == 0))
		{
		w = document.documentElement.clientWidth;
		h = document.documentElement.clientHeight;
		}
		//quirks mode
		else
		{
		w = document.body.clientWidth;
		h = document.body.clientHeight;
		}
		}
		//w3c
		else
		{
		w = window.innerWidth;
		h = window.innerHeight;
		}

		
		
		
		//get viewport's width and height
		//vpWidth=self.innerWidth;
		//vpHeight=self.innerHeight;
		
		
		var vpWidth=w;
		var vpHeight=h;
		
		var vpLeftCentre_px = vpWidth/2+"px";
		var vpTopCentre_px = vpHeight/2+"px";

		
		 // Stop the show first
		
	
		// move the current image to the first image. Prepare for show again.
		$("#gallery_container").animate({left: dialogLeft_px, top: vpTopCentre_px,  height: "1", width: "750"}, "slow")
			.animate({left: vpLeftCentre_px, top: vpTopCentre_px,  width: "1", opacity: 0.0}, 600)	
			.animate({opacity: "hide"}, "slow", function(){gallery.gotoIndex(0, false, true);gallery.pause();});
		                       
		  

		
		//div_gallery.style.display = "none";
	}
	*/

	var isSmallGallery = false; // changed by initGallerySize()
	
	var maxGalleryWidth = 750;
	var maxGalleryWidth_px = "750px";
	
	var maxGalleryHeight = 680;
	var maxGalleryHeight_px = "680px";
	
	var maxSlideWidth  = 600; // Max width for the image 
    var maxSlideHeight = 600;    // Max height for the image

    
    
	// small
	var smallMaxGalleryWidth = 690;
	var smallMaxGalleryWidth_px = "690px";
		
	var smallMaxGalleryHeight = 490;
	var smallMaxGalleryHeight_px = "490px";
	
	var smallMaxSlideWidth  = 400; // Max width for the image 
    var smallMaxSlideHeight = 400;    // Max height for the image
	
    // Big
	var bigMaxGalleryWidth = 750;
	var bigMaxGalleryWidth_px = "750px";
		
	var bigMaxGalleryHeight = 680;
	var bigMaxGalleryHeight_px = "680px";
	
	var bigMaxSlideWidth  = 600; // Max width for the image 
    var bigMaxSlideHeight = 600;    // Max height for the image
	
	
	
	
	function showGallery(slideCount) {

		
   
			if(slideCount > 1){
				//pauseSlideShow();
				//gallery.gotoIndex(0, false, true);//Show 1st image
				//playSlideShow();
				//alert('About to show...');
				animated_show_overlay(true); // play slide show after overlay open
				
			}
			else{
				//pauseSlideShow();
				animated_show_overlay(false);  // no slide show after overlay open
		}
        
	}