var selObj=null;
var gLeft=0;
var gTop=0;
var gDisplayBoxVisible=false;
var gProductID="default";	
var gBoxWidth=150;
var gBoxHeight=150;
var gNewBoxWidth=150;
var gNewBoxHeight=150;
var gBoxWScale=0;
var gBoxHScale=0;
var orgCursor=null;
var dragOK=false;
var dragXoffset=0;
var dragYoffset=0;
function recenter() {
	var tFrameWidth=jScale.getWidth();
	var tLeft=Math.round(tFrameWidth/2-464);
	tLeft=Math.max(0,tLeft);
	var tFrameHeight=jScale.getHeight();
	var tTop=Math.round(tFrameHeight/2-314);
	tTop=Math.max(0,tTop);
	tTop=Math.min(200,tTop);	
	gLeft=tLeft;
	gTop=tTop;
	var c=document.getElementById("container");	
	if(c) {c.style.left=gLeft+"px";c.style.top=gTop+"px";};
}
function Init_DisplayBox_Panel() {
	document.write('' + 
		'<div class="groupPic" id="groupPic"  style="position:absolute;z-index:1;top:0;left:0">' + 
		'	<div style="position:relative" >' + 
		'		<div id="bg_top_left" class="bg_top_left">' + 
		'		</div>' + 
		'		<div id="bg_top" class="bg_top">' + 
		'		</div>' + 
		'		<div id="bg_top_right" class="bg_top_right">' + 
		'		</div>' + 
		'		<div id="bg_left" class="bg_left">' + 
		'		</div>' + 
		'		<div id="bg_center" class="bg_center">' + 
		'		</div>' + 
		'		<div id="bg_right" class="bg_right">' + 
		'		</div>' + 
		'		<div id="bg_bottom_left" class="bg_bottom_left">' + 
		'		</div>' + 
		'		<div id="bg_bottom" class="bg_bottom">' + 
		'		</div>' + 
		'		<div id="bg_bottom_right" class="bg_bottom_right">' + 
		'		</div>' + 
		'		<div id="div_load" class="div_load">' +
		'			<img src="./image/popupbox/loading.png" class="moveable" id="load_pic">' + 
		'		</div>' + 
		'		<div id="div_displaybox" class="div_displaybox">' +
		'			<img src="./image/displaybox/default.png" class="moveable" id="product_pic">' + 
		'		</div>' + 
		'		<div id="close_btn" class="close_btn">' + 
		'			<img src="./image/popupbox/close_btn_out.png" class="close_btn_pic" name="close_btn_pic" id="close_btn_pic" onMouseOver="close_btn_rollover()" onMouseOut="close_btn_rollout()" onMouseDown="CloseDisplayBox()">' +
		'		</div>' + 
		'	</div>' +
		'</div>');
	var c = document.getElementById("groupPic");
	if(c) {
		document.getElementById("groupPic").style.visibility="hidden";
		document.getElementById('groupPic').style.top='0px';
		document.getElementById('groupPic').style.left='0px';
	}
}
function moveHandler(e){
	if (e==null){e=window.event} 
	if (e.button<=1&&dragOK){
		document.getElementById("groupPic").style.left=e.clientX-dragXoffset+'px';
		document.getElementById("groupPic").style.top=e.clientY-dragYoffset+'px';
		return false;
	}
}
function cleanup(e) {
	document.onmousemove=null;
	document.onmouseup=null;
	selObj.style.cursor=orgCursor;
	dragOK=false;
}
function dragHandler(e){
	var htype='-moz-grabbing';
	if (e==null){e=window.event;htype='move';} 
	var target = e.target != null ? e.target : e.srcElement;
	selObj=target;
	orgCursor=target.style.cursor;	
	if (target.className=="moveable"||
		target.className=="div_displaybox"||
		target.className=="bg_top_left"||
		target.className=="bg_top_"||
		target.className=="bg_top_right"||
		target.className=="bg_left"||
		target.className=="bg_center"||
		target.className=="bg_right"||
		target.className=="bg_bottom_left"||
		target.className=="bg_bottom"||
		target.className=="bg_bottom_right") {
		target.style.cursor=htype;
		dragOK=true;
		dragXoffset=e.clientX-parseInt(document.getElementById("groupPic").style.left);
		dragYoffset=e.clientY-parseInt(document.getElementById("groupPic").style.top);
		document.onmousemove=moveHandler;
		document.onmouseup=cleanup;
		return false;
	}
}
function Open_dragHandler() {
	document.onmousedown=dragHandler;		
}
function Close_dragHandler() {
	document.onmousedown=null;		
}
function CloseDisplayBox() {
	document.getElementById("groupPic").style.visibility="hidden";
	gDisplayBoxVisible = false;
}
function VisibleDisplayBox(tID,tBG_W,tBG_H) {
	var c=document.getElementById("container");
	if(c) { 
		gProductID=tID;
		gNewBoxWidth=tBG_W;
		gNewBoxHeight=tBG_H;
		document.getElementById("product_pic").src="image/displaybox/default.png";
		if (gDisplayBoxVisible==false) {
			gBoxWidth=gBoxHeight=150;
			reset_popupbox(gBoxWidth, gBoxHeight);
			document.getElementById('groupPic').style.left=(gLeft+(940-(gBoxWidth))/2+(gBoxWidth/2))+"px";
			document.getElementById('groupPic').style.top=(gTop+(640-(gBoxHeight))/2+(gBoxHeight/2)+30)+"px";
			close_btn_rollout();
			gDisplayBoxVisible=true;
			document.getElementById("groupPic").style.visibility="visible";
			document.onmousedown=dragHandler;
		}
		gBoxWScale=parseInt(Math.abs(gNewBoxWidth-gBoxWidth)/3);
		gBoxHScale=parseInt(Math.abs(gNewBoxHeight-gBoxHeight)/3);
		var t=setTimeout("Scale_PopupBox()",50);
	}
}
function Scale_PopupBox() {
	var tW,tH;
	if (gNewBoxWidth>gBoxWidth+10) {
		tW=parseInt(Math.min(gBoxWidth+gBoxWScale, gNewBoxWidth));
	}else if (gNewBoxWidth<gBoxWidth-10) {
		tW=parseInt(Math.max(gBoxWidth-gBoxWScale, gNewBoxWidth));
	}else {
		tW=gNewBoxWidth;
	}
	if (gNewBoxHeight>gBoxHeight+10) {
		tH=parseInt(Math.min(gBoxHeight+gBoxHScale, gNewBoxHeight));
	}else if (gNewBoxHeight<gBoxHeight-10) {
		tH=parseInt(Math.max(gBoxHeight-gBoxHScale, gNewBoxHeight));
	}else {
		tH=gNewBoxHeight;
	}
	gBoxWidth=tW;
	gBoxHeight=tH;
	reset_popupbox(gBoxWidth, gBoxHeight);
	if (gBoxWidth==gNewBoxWidth&&gBoxHeight==gNewBoxHeight) {
		Load_Product_Pic();
	}else {
		var t=setTimeout("Scale_PopupBox()",50);
	}
}
function Load_Product_Pic() {
	document.getElementById("product_pic").src="image/displaybox/"+gProductID+".png";
}
function reset_popupbox(tW,tH) {
	tW-=(tW%2);
	tH-=(tH%2);
	var tStartW=(tW/-2);
	var tStartH=(tH/-2);
	var tBlockW=25;
	var tBlockH=25;
	document.getElementById('bg_top_left').style.left=(tStartW+0)+"px";
	document.getElementById('bg_top_left').style.top=(tStartH+0)+"px";
	document.getElementById('bg_top').style.left=(tStartW+tBlockW)+"px";
	document.getElementById('bg_top').style.top=(tStartH+0)+"px";
	document.getElementById('bg_top').style.width=(tW-tBlockW*2)+"px";
	document.getElementById('bg_top_right').style.left=(tStartW+tW-tBlockW)+"px";
	document.getElementById('bg_top_right').style.top=(tStartH+0)+"px";
	document.getElementById('bg_left').style.left=(tStartW+0)+"px";
	document.getElementById('bg_left').style.top=(tStartH+tBlockH)+"px";
	document.getElementById('bg_left').style.height=(tH-tBlockH*2)+"px";
	document.getElementById('bg_center').style.left=(tStartW+tBlockW)+"px";
	document.getElementById('bg_center').style.top=(tStartH+tBlockH)+"px";
	document.getElementById('bg_center').style.width=(tW-tBlockW*2)+"px";	
	document.getElementById('bg_center').style.height=(tH-tBlockH*2)+"px";
	document.getElementById('bg_right').style.left=(tStartW+tW-tBlockW)+"px";
	document.getElementById('bg_right').style.top=(tStartH+tBlockH)+"px";
	document.getElementById('bg_right').style.height=(tH-tBlockH*2)+"px";
	document.getElementById('bg_bottom_left').style.left=(tStartW+0)+"px";
	document.getElementById('bg_bottom_left').style.top=(tStartH+tH-tBlockH)+"px";
	document.getElementById('bg_bottom').style.left=(tStartW+tBlockW)+"px";
	document.getElementById('bg_bottom').style.top=(tStartH+tH-tBlockH)+"px";
	document.getElementById('bg_bottom').style.width=(tW-tBlockW*2)+"px";
	document.getElementById('bg_bottom_right').style.left=(tStartW+tW-tBlockW)+"px";
	document.getElementById('bg_bottom_right').style.top=(tStartH+tH-tBlockH)+"px";
	document.getElementById('div_load').style.left=(tStartW+(tW-140)/2)+"px";
	document.getElementById('div_load').style.top=(tStartH+(tH-30)/2+5)+"px";
	document.getElementById('close_btn').style.left=(tStartW+tW-26-8-5)+"px";
	document.getElementById('close_btn').style.top=(tStartH+8+5)+"px";
	document.getElementById('div_displaybox').style.left=(tStartW+0)+"px";
	document.getElementById('div_displaybox').style.top=(tStartH+0)+"px";
	document.getElementById('div_displaybox').style.width=tW+"px";
	document.getElementById('div_displaybox').style.height=tH+"px";	
}
function MM_preloadImages() { //v3.0
	var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
		var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
		if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function close_btn_rollover() {
	document.getElementById("close_btn_pic").src="./image/popupbox/close_btn_over.png";
}
function close_btn_rollout() {
	document.getElementById("close_btn_pic").src="./image/popupbox/close_btn_out.png";
}