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(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(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) {
	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 href="'+ orgImageFileName + '" target="_blank"></a>';
	
	for(var i = 0; i < 5; 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, qty) {
	BeanHandler.addShoppingCart(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 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">How to Order</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";
}