var heighttemp=122;
	var widthtemp=200;

	var boundLeft = 30;
	var boundTop = 30;
	var boundRightLeft = widthtemp-boundLeft;
	var boundBottomTop = heighttemp-boundTop;

//the entrance of the program
function changebgid(oldobj,newobjid){
	oldobj.id=newobjid;
}

var isStarted = false;

function start(index,cardType,imgpath){
//var loadedCalendarImagesNum=2

	var indexi=index;
	var cardTypec=cardType;
	var imgpathi=imgpath;
	
	/*
	if(loadedCalendarImagesNum<index){
		if(!IE){	

			//var backImage = document.getElementById("backModelImg"+index);
			var frontImage = document.getElementById("front"+index+"ModelImg");
				if(backImage.width==0||backImage.height==0||
					frontImage.width==0||frontImage.height==0){
						window.setTimeout("start('"+indexi+"','"+cardTypec+"','"+imgpathi+"')",1000);
						return ;
				}
		}else{
		window.setTimeout("start('"+indexi+"','"+cardTypec+"','"+imgpathi+"')",1000);
		return ;
		}
	}*/
	//  建立一個派對機制，已經開始加載的，其它的等待

	if(document.getElementById("frontModelImg")!=null){
		if(!isSampleImageLoaded||isStarted||(document.getElementById("frontModelImg").width==0
									||document.getElementById("frontModelImg").height==0))//  defined in simpleproductlist1.jsp
		{
			window.setTimeout("start('"+indexi+"','"+cardTypec+"','"+imgpathi+"')",1000);
			return ;
		}
	}else return;

	
	//var cardType = document.getElementById("vorh").value;
			
			if(cardType.indexOf("hor")!=-1){
				document.getElementById("front").style.width=widthtemp+"px";
				document.getElementById("front").style.height=heighttemp+"px";
				document.getElementById("frontModelImg").width=widthtemp;
				document.getElementById("frontModelImg").height=heighttemp;
			}else{
				document.getElementById("frontModelImg").width=heighttemp;
				document.getElementById("frontModelImg").height=widthtemp;
				document.getElementById("front").style.width=heighttemp+"px";
				document.getElementById("front").style.height=widthtemp+"px";
			}

	repositionBottomDiv(index,imgpath);

	reArrangeLayers(index);

//	window.setTimeout("setFontType()",1500);
	//showCutLine();

	//window.setTimeout("loadUserImages()",3000);
	//window.setTimeout("loadSystemImages()",200);
	//window.setTimeout("loadBackgrounds()",2500);
	//window.setTimeout("setStartArrow()",2000);
	
		var cardType =cardType;
			if(cardType.indexOf("hor")==-1){
			boundRightLeft = heighttemp - boundLeft;
			boundBottomTop = widthtemp - boundTop;
		}
		isStarted = false;
//alert(document.getElementById("front").innerHTML);
}

//called by start()
function loadSystemImages(){
	var systemImagesIframe2 = document.getElementById("systemImagesIframe2");
	SystemImageIframeSrc = systemImagesIframe2.src ;
	window.setTimeout("loadSystemImagesAgain()",100);
}
var SystemImageIframeSrc = null;
function loadSystemImagesAgain(){
	document.getElementById("systemImagesIframe2").src = SystemImageIframeSrc;
}

//called by start()
function loadBackgrounds(){
	//reload the backgrounds
	var backgroundsframe = document.getElementById("backgroundsframe");
	var src = backgroundsframe.src;
		backgroundsframe.src = "";
		backgroundsframe.src = src;
}

//called by start()
function setStartArrow(){
	document.getElementById("frontArrow").style.display="none";
	document.getElementById("frontArrow").style.display="";
	document.getElementById("front").style.display="none";
	document.getElementById("back").style.display="none";
	document.getElementById("front").style.display="";
	document.getElementById("back").style.display="";
}
function loadUserImages(){
	
var frame = document.getElementById("userimagesframe");

	 if(frame!=null){
	 	frame.src = "design/productminipic/Album_User_image_easy_yes_1.html";
	 }
}
function replaceImageWithCanvas(){
var div = document.getElementById("front");
	replaceImagesWidthCanvasImpl(div);
	div = document.getElementById("back");	
	replaceImagesWidthCanvasImpl(div);
}

function replaceImagesWidthCanvasImpl(card){
	var layers = card.childNodes;
	for(var i=0;i<layers.length;i++){
		var layer = layers[i];
		var id = layer.id;
		if(id!=null&&id.indexOf("layer")!=-1){
			var html = layer.innerHTML;
			if(html.indexOf("<img")!=-1||html.indexOf("<IMG")!=-1){
				var image = layer.firstChild;
				var width = image.height;
				var height = image.width;
				if(width!=0&&height!=0){
					createImageCanvas(layer,image);
				}
			}
		}
	}

}
//called by replaceImagesWidthCanvasImpl()
function createImageCanvas(layer,src,width,height){
	var aheight = height;
	var awidth = width;
	var image = new Image();
		image.src = src;
				layer.setAttribute("src",src);
			var canvas = document.createElement("canvas");
					//canvas.title = " 雙擊轉換圖片 ";
			var ctx = canvas.getContext("2d");
			var filter = layer.getAttribute("filter");
			var rotate = "0";
				if(filter==null||filter.length<5){
					canvas.width = awidth;
					canvas.height = aheight;
					ctx.drawImage(image,0,0,canvas.width,canvas.height);
				}else	if(filter.indexOf("Rotation=1")!=-1){
					rotate = "90";
					canvas.width = aheight;
					canvas.height = awidth;
					ctx.translate(canvas.width,0);
					ctx.rotate(Math.PI/2);
					ctx.drawImage(image,0,0,awidth,aheight);
				}else if(filter.indexOf("Rotation=2")!=-1){
					rotate = "180";
					canvas.width = awidth;
					canvas.height = aheight;
					ctx.translate(canvas.width,canvas.height);
					ctx.rotate(Math.PI);
					ctx.drawImage(image,0,0,canvas.width,canvas.height);
				}else if(filter.indexOf("Rotation=3")!=-1){
					rotate = "270";
					canvas.width = aheight;
					canvas.height = awidth;
					ctx.translate(0,canvas.height);
					ctx.rotate(Math.PI/2*3);
					ctx.drawImage(image,0,0,awidth,aheight);
				}else{
					canvas.width = awidth;
					canvas.height = aheight;
					ctx.drawImage(image,0,0,canvas.width,canvas.height);
				}
				layer.setAttribute("rotate",rotate);
				layer.appendChild(canvas);
}

//called by start()
function replaceFontFamily(){
var frontLayer = document.getElementById("front");
var layers = frontLayer.childNodes;
setFontFamily(layers);//define in this doc
}

//called by replaceFontFamily()
function setFontFamily(){
for(var i=0;i<layers.length;i++){
	
		var subDiv = layers[i];
		var id = subDiv.id;
			if(id==null) continue;
			
			if((id.indexOf("font")!=-1||id.indexOf("back")!=-1)&&id.indexOf("layer")!=-1){
				var inofimg = subDiv.innerHTML.indexOf("<IMG");
				if(inofimg==-1){
					var fontFamily = subDiv.fontFamily;
					if(fontFamily!=null){
						fontFamily = getActualFontFamily(fontFamily);
						subDiv.style.fontFamily=fontFamily;
					}
				}
			}
}
}

//reposition the bottom area div,caculated the 
function repositionBottomDiv(index,imgpath){
var frontLayer = document.getElementById("front");
var layers = frontLayer.childNodes;
setBottomDivInfo(layers,index,imgpath);//defined in start.js

}
//called by repositionBottomDiv
function setBottomDivInfo(layers,index,imgpath){

for(var i=0;i<layers.length;i++){
	
		var subDiv = layers[i];
		var id = subDiv.id;
			if(id==null) continue;
			
			if(id.indexOf("center")!=-1&&id.indexOf("layer")==-1&&id.indexOf("constraint")==-1){
				//var centerx = subDiv.centerx;
				//var centery = subDiv.centery;
				var left = subDiv.getAttribute("left");
				var top = subDiv.getAttribute("top");
				var width = subDiv.getAttribute("width");
				var height = subDiv.getAttribute("height");
					if(!left.match(/^[-]{0,1}\d+$/))
						left = 0;
					if(!top.match(/^[-]{0,1}\d+$/))
						top = 0;
					if(!width.match(/^\d+$/))
						width = 100;
					if(!height.match(/^\d+$/))
						height = 100;	
				//var scalePercent = parseFloat(subDiv.parentNode.scalePercent);
				var scalePercent = 1.000;
				//alert(width);
				
				subDiv.style.width = width*scalePercent;
				subDiv.style.height = height*scalePercent;

				//alert(subDiv.innerHTML);
				if(subDiv.firstChild!=null) {
				subDiv.firstChild.width = width*scalePercent;
				subDiv.firstChild.height = height*scalePercent;
				}
				//subDiv.title = "雙擊添加底圖,單擊選擇底圖";//set the title of the bottom info layer	
				subDiv.style.left = Math.round(left*scalePercent)+"px";
				subDiv.style.top = Math.round(top*scalePercent)+"px";
					
				var bmtImgId = id + "layer";// the id of bottom image layer which containing an image
				var bottomImgLayer = document.getElementById(bmtImgId);
					if(bottomImgLayer == null) createBottomSample(index,imgpath,bmtImgId,id);
	}
}
}
//called by start()
function createBottomSampleImages(){
var baseLayer = document.getElementById("baseLayer");
var calendarLayers = baseLayer.childNodes;
for(var i=0;i<calendarLayers.length;i++){
	var subElements = calendarLayers[i].childNodes;
	for(var j=0;j<subElements.length;j++){
		var subDiv = subElements[j];
		var id = subDiv.id;
			if(id==null) continue;
			if(id.indexOf("center")!=-1&&id.indexOf("layer")==-1){
				var bmtImgId = id + "layer";// the id of bottom image layer which containing an image
				var bottomImgLayer = document.getElementById(bmtImgId);
					if(bottomImgLayer == null) createBottomSample(bmtImgId,id);
			}
	}
}
}
function delDiv_px(Img_WH){
	Img_WH=Img_WH+"";
	var i=Img_WH.indexOf("px");
	if(i!=-1){
		return Img_WH.substring(0,i);
	}else{
		return Img_WH;
	}
}
//called by createEmptyBottomImages()
function createBottomSample(index,imgpath,bmtImgId,centerInfoId,centerInfoLayer){

	centerInfoLayer = document.getElementById(centerInfoId) || centerInfoLayer;
	
	centerInfoId = centerInfoLayer.id;
	var bs=2.612;
var centerNumber = centerInfoId.substring(centerInfoId.indexOf("center")+6,centerInfoId.length);
	if(!centerNumber.match(/^\d+$/))
		alert("in start.js,centerNumber is not a digit:"+centerNumber);
	centerNumber = parseInt(centerNumber);	
var calendarLayer = centerInfoLayer.parentNode;
var bottomImgId = calendarLayer.id+bmtImgId;//covercovercenter1layer  bmtImgId = frontcenter1layer
var constraintLayerId = calendarLayer.id+"center"+centerNumber+"constraint";// frontcenter1constraint
var baseLayer = document.getElementById(bottomImgId);
if(baseLayer!= null) return ;
var constraintLayer = document.createElement("div");
		constraintLayer.id = constraintLayerId;
		constraintLayer.style.overflow = "hidden";
		constraintLayer.style.position =  "absolute";
		constraintLayer.style.left =  Math.round(parseFloat(centerInfoLayer.getAttribute("left"))/bs)+"px";
		constraintLayer.style.top =  Math.round(parseFloat(centerInfoLayer.getAttribute("top"))/bs)+"px";
		constraintLayer.style.width =  Math.round(parseFloat(centerInfoLayer.getAttribute("width"))/bs)+"px";
		constraintLayer.style.height =  Math.round(parseFloat(centerInfoLayer.getAttribute("height"))/bs)+"px";
var	constraintLeft =  Math.round(parseFloat(centerInfoLayer.getAttribute("left"))/bs);
var constraintTop =  Math.round(parseFloat(centerInfoLayer.getAttribute("top"))/bs);
		if(constraintLeft==null)
			constraintLeft = 0;
		if(constraintTop==null)
			constraintTop = 0;	
	baseLayer = document.createElement("div");
	baseLayer.id = bottomImgId;
	baseLayer.style.zIndex = -10;
	baseLayer.style.position = "absolute";
	baseLayer.style.cursor = "move";
	baseLayer.setAttribute("beishu","1.00");
	// baseLayer = document.createElement("<div id='"+bottomImgId+
//"' style='z-index:-10;position:absolute;CURSOR: move;left:20;top:30'"+
//" onclick='mouseclick(this);' beishu='1' onmousedown='BDown(this);'></div>");


var imageId = bottomImgId+"img";//covercenter1layerimg
var image = document.getElementById(imageId);

if(image==null){
	//image = document.createElement("<img id="+imageId+"  width='100' height='60'>");
	if(IE){
	  image = document.createElement("img");
	  image.id = imageId;
  }else{
   	image=new Image();
   	image.id = imageId;
  }
}else{
	image.parentNode.removeChild(image);
	//image = document.createElement("<img id="+imageId+"  width='100' height='60'>");
	image = document.createElement("img");
	image.id = imageId;
}//alert(image==null);
//image.src = "/design/productminipic/image/3266.jpg";
if(imgpath.indexOf(contextpath)==-1&imgpath.indexOf("productminipic")==-1)imgpath=contextpath+"/"+imgpath;
image.src=imgpath;
var width = 630;//image.width;  在服務器上，IE瀏覽器不能獲取正確的圖片高度
var height = 630;//image.height;在服務器上，IE瀏覽器不能獲取正確的圖片高度
    width=image.width;
    height=image.height;
//alert(image.width+":"+image.height)
//alert(width+":"+height);
if(width!=0&&height!=0){//indicate that the image has been sucessfully download
var beishu = parseFloat(width)/parseFloat(height);
baseLayer.setAttribute("beishu",beishu);

var left =  Math.round(parseFloat(centerInfoLayer.getAttribute("left"))/bs);
var top =  Math.round(parseFloat(centerInfoLayer.getAttribute("top"))/bs);
	left = left+"";
	top = top +"";
	if(!left.match(/^\d+$/))
		left = 0;
	if(!top.match(/^\d+$/))
		top = 0;
var scalePercent = 1.0000;//parseFloat(calendarLayer.scalePercent);
var	transparentWidth = parseFloat(parseFloat(centerInfoLayer.getAttribute("width"))/bs) * scalePercent;
var	transparentHeight = parseFloat(parseFloat(centerInfoLayer.getAttribute("height"))/bs) * scalePercent;



if((transparentWidth / transparentHeight) > beishu){
  width = transparentWidth ; 
  height = transparentWidth / beishu;
}else{
	height = transparentHeight;
	width = height * beishu ;
}	

image.width = width;
image.height = height;

top = parseFloat(top);
left = parseFloat(left);
left = left+transparentWidth/2-width/2;
top = top + transparentHeight/2-height/2;
//baseLayer.style.pixelWidth = width;
//baseLayer.style.pixelHeight = height;

baseLayer.style.zIndex= (-10*(topCenterNumber-centerNumber));//topCenterNumber is the top center number,the number smaller the zIndex smaller
constraintLayer.style.zIndex= (-10*(topCenterNumber-centerNumber));
if(!IE){
		baseLayer.setAttribute("src",image.src);
var cimage = new Image();
		cimage.src = image.src;
var canvas = document.createElement("canvas");
		canvas.width = width;
		canvas.height = height;
var ctx = canvas.getContext("2d");
		ctx.beginPath();
		//  圖片沒有加載完
		if(cimage.width==0||cimage.height==0){	
		image.onload = function(){
			try{
					ctx.drawImage(cimage,0,0,canvas.width,canvas.height);	
			}catch(e){alert(e.message);}
		};
		}else
			ctx.drawImage(cimage,0,0,canvas.width,canvas.height);	
	baseLayer.appendChild(canvas);	
}

baseLayer.style.left = Math.round(left-constraintLeft)+"px";
baseLayer.style.top = Math.round(top - constraintTop)+"px";

}
//image.onload = new Function("resizePhoto(this)");//defiled in scaleimage.js

image.onabort = function(){loadingError(image);}
image.onerror = function(){loadingError(image);}

if(IE)baseLayer.appendChild(image);
constraintLayer.appendChild(baseLayer);
calendarLayer.appendChild(constraintLayer);

}

var topCenterNumber = 300;
function repositionDateInfoDiv(){
var baseLayer = document.getElementById("baseLayer");
var calendarLayers = baseLayer.childNodes;	
for(var i=0;i<calendarLayers.length;i++){
	if(calendarLayers[i].id.indexOf("month")==-1) continue;
	var subElements = calendarLayers[i].childNodes;
	for(var j=0;j<subElements.length;j++){
		var subDiv = subElements[j];
		var id = subDiv.id;
		if(id.indexOf("date")!=-1&&id.indexOf("layer")==-1){
				var centerx = parseFloat(subDiv.centerx);
				var centery = parseFloat(subDiv.centery);
				var width = parseFloat(subDiv.width);
				var height = parseFloat(subDiv.height);
				var scalePercent = parseFloat(subDiv.parentNode.scalePercent);
				//alert(width);
				subDiv.style.width = width*scalePercent;
				subDiv.style.height = height*scalePercent;
				subDiv.firstChild.width = width*scalePercent;
				subDiv.firstChild.height = height*scalePercent;
				subDiv.style.left = centerx*scalePercent-width*scalePercent/2;
				subDiv.style.top = centery*scalePercent-height*scalePercent/2;
				//subDiv.title = "雙擊添加圖片";//set the title of the date info layer	
		}
	}
}
}

function repositionDateImages(){
var baseLayer = document.getElementById("baseLayer");
var calendarLayers = baseLayer.childNodes;	
for(var i=0;i<calendarLayers.length;i++){
	if(calendarLayers[i].id.indexOf("month")==-1) continue;
	var subElements = calendarLayers[i].childNodes;
	for(var j=0;j<subElements.length;j++){
		var subDiv = subElements[j];
		var id = subDiv.id;
		if(id.indexOf("date")!=-1&&id.indexOf("layer")!=-1){
			var dateInfo = document.getElementById(id.substring(0,id.indexOf("layer")));
			var left = dateInfo.style.left;
			var top = dateInfo.style.top;		
			
			var width = parseFloat(subDiv.width);
			var height = parseFloat(subDiv.height);
			var scalePercent = parseFloat(subDiv.parentNode.scalePercent);
				//alert(width);
				subDiv.style.width = width*scalePercent;
				subDiv.style.height = height*scalePercent;
			var image = new Image();
				image.src = subDiv.firstChild.firstChild.src;//the image src
			var beishu = parseFloat(image.width) / parseFloat(image.height);	
				
				subDiv.firstChild.style.width = width*scalePercent;
				subDiv.firstChild.style.height = width*scalePercent/beishu;
				
				subDiv.firstChild.firstChild.width = width*scalePercent;//the image width
				subDiv.firstChild.firstChild.height = width*scalePercent/beishu;//the image height	
					
				subDiv.style.left = left;
				subDiv.style.top = top;
				
			var	innerLeft = parseFloat(subDiv.firstChild.innerLeft)*scalePercent;
			var innerTop = parseFloat(subDiv.firstChild.innerTop)*scalePercent;
			
				subDiv.firstChild.style.left = innerLeft;
				subDiv.firstChild.style.top = innerTop;
		}
	}
}
}

//layers include image layer,text layer which user adds himself. Arrange their zIndex,position,fontfamily 
function reArrangeLayers(index){
  var baseLayer = document.getElementById("front");
  var calendarLayers = baseLayer.childNodes;
  reArrangLayersImpl(calendarLayers,index);

}
//called by reArrangeLayers
var textElement=new Array();
function reArrangLayersImpl(calendarLayers,index){
 var bs=2.612;
 for(var i=0;i<calendarLayers.length;i++){
		var subDiv = calendarLayers[i];
		var id = subDiv.id;
		if(id==null) continue;//alert(id);
		if(id.indexOf("center")==-1&&id.indexOf("layer")!=-1&&id.indexOf("date")==-1){
				var numberText = id.substring(id.indexOf("layer")+5,id.length);
				    numberText=subDiv.style.zIndex;
				if(!numberText.match(/^\d+$/))alert("parsing layer number ,error....");
				var layerNumber = parseInt(numberText);
				var innerHTML = subDiv.innerHTML;
				var textContentst=innerHTML.indexOf("<content>");
				    if(textContentst==-1) textContentst = innerHTML.indexOf("<CONTENT>");
				var textContented=innerHTML.indexOf("</content>");
				    if(textContented==-1) textContented = innerHTML.indexOf("</CONTENT>");
				    
				var textTitlest=innerHTML.indexOf("<texttitle>");
				    if(textTitlest==-1) textTitlest = innerHTML.indexOf("<TEXTTITLE>");
				var textTitleed=innerHTML.indexOf("</texttitle>");
				    if(textTitleed==-1) textTitleed = innerHTML.indexOf("</TEXTTITLE>");
				 
				var inOfImg = innerHTML.indexOf("<IMG");
				    if(inOfImg==-1) inOfImg = innerHTML.indexOf("<img");
					
				var scalePercent = parseFloat(subDiv.parentNode.getAttribute("scalePercent"));
				var inOfLine = innerHTML.toLowerCase().indexOf("<line>");
				if(textContentst!=-1){//alert(parent.parent.document.getElementById("CompanyName").value);
					 subDiv.style.left=parseFloat(delDiv_px(subDiv.style.left))/bs+"px";
					 subDiv.style.top=parseFloat(delDiv_px(subDiv.style.top))/bs+"px";
					 subDiv.style.fontSize=parseFloat(delDiv_px(subDiv.style.fontSize))/bs+"px";
					 var filter=subDiv.getAttribute('filter');
					 var contentstr=innerHTML.substring(textContentst+9,textContented);
					 var titlestr=innerHTML.substring(textTitlest+11,textTitleed);
					 if(titlestr.toLowerCase()=="company name"){
					 	  contentstr=parent.parent.document.getElementById("CompanyName").value;
					 }else if(titlestr.toLowerCase()=="message"){
					 	  contentstr=parent.parent.document.getElementById("Message").value;
					 }else if(titlestr.toLowerCase()=="full name"){
					 	  contentstr=parent.parent.document.getElementById("FullName").value;
					 }else if(titlestr.toLowerCase()=="job title"){
					 	  contentstr=parent.parent.document.getElementById("JobTitle").value;
					 }else if(titlestr.toLowerCase()=="address line 1"){
					 	  contentstr=parent.parent.document.getElementById("AddressLine1").value;
					 }else if(titlestr.toLowerCase()=="address line 2"){
					 	  contentstr=parent.parent.document.getElementById("AddressLine2").value;
					 }else if(titlestr.toLowerCase()=="address line 3"){
					 	  contentstr=parent.parent.document.getElementById("AddressLine3").value;
					 }else if(titlestr.toLowerCase()=="phone/other"){
					 	  contentstr=parent.parent.document.getElementById("PhoneOther").value;
					 }else if(titlestr.toLowerCase()=="fax/other"){
					 	  contentstr=parent.parent.document.getElementById("FaxOther").value;
					 }else if(titlestr.toLowerCase()=="e-mail/other"){
					 	  contentstr=parent.parent.document.getElementById("EmailOther").value;
					 }else if(titlestr.toLowerCase()=="web/other"){
					 	  contentstr=parent.parent.document.getElementById("WebOther").value;
					 }
					 subDiv.setAttribute('content_temp',contentstr);
					 var tempText = subDiv.getAttribute('content_temp');
					 		 
					 		  tempText = unReplaceSinglequotes(tempText);// defined in text.js
					 		
					 		  tempText = unReplaceBackslash(tempText); // defined in text.js
					 	if(tempText.indexOf("&amp;")!=-1){
						 		tempText = unReplaceAtChar(tempText);//defined in text.js
					 	}
					 		
					 	if(tempText.indexOf("&nbsp;")!=-1){
					 			tempText = unReplaceSpaceChar(tempText);// defined in text.js
					 	}
					 		 
					 subDiv.setAttribute('content_temp',tempText);
					 subDiv.innerHTML="";
					 if(filter!=""){
		          //subDiv.setAttribute('filter',style);
			           if(filter.indexOf("Rotation=4")!=-1)subDiv.setAttribute('rotate',"90");
			           else if(filter.indexOf("Rotation=2")!=-1)subDiv.setAttribute('rotate',"270");
			           else subDiv.setAttribute('rotate',"0");
		       }else {
			        //subDiv.setAttribute('filter',"");
			           subDiv.setAttribute('rotate',"0");
		       }
				   var leftText = subDiv.style.left;
				   var topText = subDiv.style.top;
				   var left = parseFloat(leftText.substring(0,leftText.indexOf("px")));
				   var top = parseFloat(topText.substring(0,topText.indexOf("px")));
					 subDiv.style.zIndex = layerNumber * 10;
					
					 subDiv.style.left = left+"px";
					 subDiv.style.top = top+"px";
					 subDiv.style.width=parseFloat(delDiv_px(subDiv.style.width))/bs+"px";
					 subDiv.style.height=parseFloat(delDiv_px(subDiv.style.height))/bs+"px";
				   var fontFamily = subDiv.getAttribute("fontFamily");
					
					     fontFamily = getActualFontFamily(fontFamily,subDiv.getAttribute('content_temp'));
					 /*innerHTML = subDiv.innerHTML;
					
					 if(innerHTML.indexOf("&amp;nbsp;")!=-1){
						  innerHTML = replace(innerHTML,"&amp;nbsp;"," ");//defined in text.js
						  subDiv.innerHTML=innerHTML;
					 }*/
					// subDiv.title = " 雙擊編輯文字 ";
					 subDiv.style.fontFamily = fontFamily;
				   var fontSizeText = 	subDiv.style.fontSize;
				   var fontSize = 	parseFloat(fontSizeText.substring(0,fontSizeText.indexOf("px")));
					
					 fontSize = Math.round(fontSize);
					 
					 subDiv.style.fontSize = fontSize;
					 makeTextImage(subDiv);//defined in text.js
					 textElement.push(subDiv);
				}else if(inOfLine!=-1){
					subDiv.style.left=parseFloat(delDiv_px(subDiv.style.left))/bs+"px";
					subDiv.style.top=parseFloat(delDiv_px(subDiv.style.top))/bs+"px";
					subDiv.style.width=parseFloat(delDiv_px(subDiv.style.width))/bs+"px";
					subDiv.style.height=parseFloat(delDiv_px(subDiv.style.height))/bs+"px";
					subDiv.style.zIndex = layerNumber * 10;
					subDiv.style.display = "";
					var line = document.createElement("line");
					subDiv.innerHTML = "";
					subDiv.appendChild(line);
				}
		  }
	
  }
  if(textElement.length>0){
  	for(var j=0;j<textElement.length;j++){
  		 settextimagewh1(textElement[j]); 
  	}
  }

}
//在xml中輸出中文字符就可能以字符的char值輸出(windows),在linux中輸出的中文
function getActualFontFamily(fontFamily,text){
  var af = null;//the chinease character is not normal
  if(fontFamily==null) return "";
  if(fontFamily.indexOf("&#27161;&#26999;&#39636")!=-1)
	   af="SimHei";
	   //af = "標楷體";
  else if(fontFamily.indexOf("&#40657")!=-1)
	   af="DFKai-SB";
	   //af = "黑体";
  else if(fontFamily.indexOf("&#26041;&#27491;&#33298;&#20307")!=-1)
	   af="FZShuTi";//
	   //af = "方正舒体";
  else if(fontFamily.indexOf("&#26041;&#27491;&#23002;&#20307")!=-1)
	   af="FZYaoTi";//
    //af = "方正姚体";
  else if(fontFamily.indexOf("&#21326;&#25991;&#20013;&#23435")!=-1)
	  af="STZhongsong";//
	  //af = "华文中宋";	
  else if(fontFamily.indexOf("&#38582;&#20070;")!=-1)
	  af="LiSu";//
	  //af = "隶书";	
  else if(fontFamily.indexOf("STZhongsong")!=-1)//that is 华文中宋
	  af = "STZhongsong";	
	  //af = "华文中宋";
  else if(hasChinease(text)){
  	if(!isChineaseFont(fontFamily)){
			 af="SimHei";
		}else af=fontFamily;
  	
  }else af=fontFamily;

  return af;
}

var systemFonts = null;//initialize by 
function hasFamily(font){
		if(font==null||font.length<1) return false;
	  if(!IE){
	
	   		var FireFoxFonts = new Array();
	   			FireFoxFonts.push('黑体');
	   			FireFoxFonts.push('SimHei');
	   			FireFoxFonts.push('標楷體');
	   			FireFoxFonts.push('DFKai-SB');
	   			FireFoxFonts.push('华文中宋');
	   			FireFoxFonts.push('STZhongsong');
	   			FireFoxFonts.push('Wingdings 3');
	   			FireFoxFonts.push('Arial');
	   			FireFoxFonts.push('Arial Black');
	   			FireFoxFonts.push('Courier New');
	   			FireFoxFonts.push('Comic Sans MS');
	   			FireFoxFonts.push('Georgia');
	   			FireFoxFonts.push('Impact');
	   	var hasFont = false;
	   	for(var i=0;i<FireFoxFonts.length;i++){
	   		if(FireFoxFonts[i]==font){
	   			hasFont = true;
	   			break;
	   		}
	   	}
	   	return hasFont;
	
	  }
  	 var fonts = new Array();

		 if(hasChinease(font)){  // 把當前的字體名稱改為中英文名稱，放入fonts數組中
			  try{
				  var trtable = document.getElementById("trtable");
				  var rows = trtable.rows;
				 		for(var i=0;i<rows.length;i++){
				 		   if(rows[i].title.indexOf(font)!=-1){
				 		  		font = rows[i].title;
				 		  		if(font.indexOf("|")!=-1){
				 		  			var ttt = font.split("|");
				 		  			for(var j=0;j<ttt.length;j++)fonts.push(ttt[j]);	
				 		  		}else
				 		  			fonts.push(font);
				 		  			font = "";	
				 		  			break;	
				 		  		}
				 		}   
			 }catch(e){ alert("error:"+e.message); }
		 }else{  // 如果是英文名稱則判斷是否是中文字體,是的話就把中文名稱，英文名稱放進fonts
			 try{
				  var trtable = document.getElementById("trtable");
				  var rows = trtable.rows;
				 	for(var i=0;i<rows.length;i++){
				 		  if(rows[i].cells[0].title==font){
				 		  	font = rows[i].title;
				 		  	if(font.indexOf("|")!=-1){
				 		  		var ttt = font.split("|");
				 		  		for(var j=0;j<ttt.length;j++)fonts.push(ttt[j]);	
				 		  	}else
				 		  		fonts.push(font);
				 		  		font = "";	
				 		  		break;	
				 		    }
				 	}   
			}catch(e){ alert("error:"+e.message); }
		}
		
		if(font=="標楷體"){
			fonts.push("DFKai-SB");
			fonts.push("標楷體");
		}else if(font=="黑体"){
			fonts.push("黑体");
			fonts.push("SimHei");
		}else if(font=="方正舒体"){
			fonts.push("方正舒体");
			fonts.push("FZShuTi");
		}else if(font=="方正姚体"){
			fonts.push("方正姚体");
			fonts.push("FZYaoTi");
		}else if(font=="华文中宋"){
			fonts.push("华文中宋");
			fonts.push("STZhongsong");
			fonts.push("Wingdings 3");
		}else if(font=="隶书"){
			fonts.push("隶书");
			fonts.push("LiSu");
		}else if(fonts.length<1){
			fonts.push(font);	
		}

	  if(systemFonts==null){
	  var dlgHelper = document.getElementById("dlgHelper");	
	  var   cnt   =   dlgHelper.fonts.count;
      var fonts2 = new Array();
      for(var i=1;i<=cnt;i++){
      var font2 = dlgHelper.fonts(i);
      	fonts2.push(font2);
      }  
      systemFonts = fonts2;
      }
    
 
      
      for(var i=0;i<systemFonts.length;i++){
      	var sf = systemFonts[i];
      	for(var j=0;j<fonts.length;j++){
      		if(sf==fonts[j]) 
      		return true;
      	}
      }
	return false;
}

//當加載的時候模板還沒有加載完，就開始加載圖片層的話會出現縮放率不正確,所以要一個臨時數組保存圖象對象
var images = new Array();
function reloadImage(){
	reArrangeZIndex(images.pop());
}
//the image onload event on image layer
function reArrangeZIndex(image){
	var bs=2.612;
				var imageLayer = image.parentNode;
				var id = imageLayer.id;
				
				var layerNumber = parseInt(id.substring(id.indexOf("layer")+5,id.length));
				//var scalePercent = parseFloat(imageLayer.parentNode.scalePercent);
				var scalePercent = parseFloat(1.000);
				var stext = "1.000";
					if(stext=="1"||stext=="100"){
						images.push(image);
						window.setTimeout("reloadImage()",1000);
						return ;
					}
					scalePercent = 1.000;	
				var width = parseFloat(imageLayer.getAttribute("width"))/bs;
				var height = parseFloat(imageLayer.getAttribute("height"))/bs;
					imageLayer.setAttribute("beishu",width/height);	
			//	var width = parseFloat(widthText.substring(0,widthText.indexOf("px")));
			//	var height = parseFloat(heightText.substring(0,heightText.indexOf("px")));
					//outputToConsole(width+"  "+height);
				var scalePercent = parseFloat(scalePercent);
				var leftText = imageLayer.style.left;
				var topText = imageLayer.style.top;
				var left = parseFloat(delDiv_px(leftText))/bs;
				var top = parseFloat(delDiv_px(topText))/bs;
			//	var innerHTML = imageLayer.innerHTML;
			//	alert(innerHTML+"  "+layerNumber+"   "+width+"  "+height);
				//alert(width);
				
				//imageLayer.style.width = Math.round(width*scalePercent);
				//imageLayer.style.height = Math.round(height*scalePercent);
				var src = image.src;
				
				imageLayer.removeChild(image);
				width = Math.round(width*scalePercent);
				height = Math.round(height*scalePercent);
				image = new Image(width,height);
				image.src = src;
				//image.title = " 雙擊轉換圖片 ";
				//image.width = ;
				//image.height = ;
				if(IE) imageLayer.appendChild(image);
				else createImageCanvas(imageLayer,src,width,height);
					imageLayer.style.zIndex = layerNumber * 10;
					imageLayer.style.left = Math.round(left*scalePercent)+"px";
					imageLayer.style.top = Math.round(top*scalePercent)+"px";
				
					
}
//centerImages用於保存初始化底圖信息,一個對象var obj = {image:0,width:0,height:0};
var centerImages = new Array();
function wait2(){
	var obj = centerImages[centerImages.length-1];
	if(obj==null) return;
	var image = obj.image;
	var scalePercent = parseFloat(image.parentNode.parentNode.scalePercent);
	var stext = scalePercent+"";
	
		if(stext=="1"||stext=="100"||stext.indexOf(".")==-1){
			window.setTimeout("wait2()",500);
			return;
		}else{
			obj = centerImages.pop();
			setImageSize(obj.image,obj.width,obj.height);
		}
}

//the center image initialization when onload
function setImageSize(image,width,height){
	
	var scalePercent = parseFloat(image.parentNode.parentNode.parentNode.getAttribute("scalePercent"));
	var stext = scalePercent+"";
		
		if(stext=="1"||stext=="100"||stext.indexOf(".")==-1){
			var obj = {image:0,width:0,height:0};
			obj.image = image;
			obj.width = width;
			obj.height = height;
			centerImages.push(obj);
			window.setTimeout("wait2()",500);
			return;
		}
		
	var centerImageLayer = image.parentNode;
	var id = centerImageLayer.id;
	var centerNumber = id.substring(id.indexOf("center")+6,id.indexOf("layer"));
		if(!centerNumber.match(/^\d+$/))
			alert("it is not a number,in start.js:"+centerNumber);
		centerNumber = parseInt(centerNumber);	
	var imgLeft = parseFloat(image.getAttribute("left"));
	var imgTop = parseFloat(image.getAttribute("top"));
		if(imgLeft == null)	imgLeft = 0;
		if(imgTop == null) imgTop = 0;		
		
	var centerx = 0;//(centerImageLayer.centerx)*scalePercent;
	var centery = 0;//(centerImageLayer.centery)*scalePercent;

	
	var src = image.src;
	var awidth = Math.round(parseFloat(width)*scalePercent);
	var aheight = Math.round(parseFloat(height)*scalePercent);		
		centerImageLayer.removeChild(image);
		
		image = new Image(awidth,aheight);
		image.src = src;
		//image.width = ;
		//image.height = ;

		if(IE)
			centerImageLayer.appendChild(image);
		else{
				centerImageLayer.setAttribute("src",src);
				
			var canvas = document.createElement("canvas");
			var ctx = canvas.getContext("2d");
			var filter = centerImageLayer.getAttribute("filter");
			var rotate = "0";
				if(filter.indexOf("Rotation=1")!=-1){
					rotate = "90";
					canvas.width = aheight;
					canvas.height = awidth;
					ctx.translate(canvas.width,0);
					ctx.rotate(Math.PI/2);
					ctx.drawImage(image,0,0,awidth,aheight);
				}else if(filter.indexOf("Rotation=2")!=-1){
					rotate = "180";
					canvas.width = awidth;
					canvas.height = aheight;
					ctx.translate(canvas.width,canvas.height);
					ctx.rotate(Math.PI);
					ctx.drawImage(image,0,0,canvas.width,canvas.height);
				}else if(filter.indexOf("Rotation=3")!=-1){
					rotate = "270";
					canvas.width = aheight;
					canvas.height = awidth;
					ctx.translate(0,canvas.height);
					ctx.rotate(Math.PI/2*3);
					ctx.drawImage(image,0,0,awidth,aheight);
				}else{
					canvas.width = awidth;
					canvas.height = aheight;
					ctx.drawImage(image,0,0,canvas.width,canvas.height);
				}
				centerImageLayer.setAttribute("rotate",rotate);
				centerImageLayer.appendChild(canvas);
		}	

		centerImageLayer.setAttribute("beishu",parseFloat(width)/parseFloat(height));

var constraintLayer = centerImageLayer.parentNode;
var constraintLeft = 	parseFloat(constraintLayer.getAttribute("left"));
var constraintTop = parseFloat(constraintLayer.getAttribute("top"));
		if(constraintLeft==null||constraintTop==null) alert("error ocurred! in start.js ");	
		
		
		centerImageLayer.style.left = Math.round(imgLeft - constraintLeft)+"px";
		centerImageLayer.style.top = Math.round(imgTop - constraintTop)+"px";	
		
	//	outputToConsole(constraintLeft+"  "+constraintLayer.id+"  "+centerImageLayer.style.left);
		centerImageLayer.style.zIndex = (-10*(topCenterNumber - centerNumber));//reset the zIndex,number smaller is back
		constraintLayer.style.zIndex = (-10*(topCenterNumber - centerNumber));
		//centerImageLayer.style.width = parseFloat(width)*scalePercent;
		//centerImageLayer.style.height = parseFloat(height)*scalePercent;
}