<!-- Hide script from old browsers
//Studio.js
var strCurrentElementIDTag = "ElementTextColor0";
Browser = navigator.appName
Net = Browser.indexOf("Netscape")
Micro = Browser.indexOf("Microsoft")
Netscape = false
IE = false
if(Net >= 0) {
	Netscape = true
	window.captureEvents(Event.MOUSEDOWN)
	window.onmousedown = clearPalette
}
if(Micro >= 0) {
	IE = true
}

//Need optimization
//Get X and Y
var intCurrentElement = -1;
var intResHigh;
var intDesignWidth;
var cntElements;
var myElement;
var intGap;
var intWhiteSpace;
//Was dragged
var intWasDragged = 0;
//Being resizing or no object found
var booResizing = false; 
//update by zhonghuaqiang 20070929 For UK Localization begin
var intTopEdgeY = 175;
//var intTopEdgeY = 200;
//update by zhonghuaqiang 20070929 For UK Localization end
var myDragStartLeft, myDragStartTop, myDragEndLeft, myDragEndTop;
var myLeft, myTop, myWidth, myHeight, myElementId;
//Is the current object image
var booObjImage = false;
//Zoom in and out
var zoomFactor = 1;
	
function InitStudio(a, b, c, d) {
	intResHigh = a;
	intDesignWidth = b;
	cntElements = c;
	myElement = d-1;
	intGap = 0.125*intResHigh;
	intWhiteSpace = Math.round((570-intDesignWidth*intResHigh)/2);
}

function getOffset(iElement) {
	//Get field coords
	//Might get rid of the parameter later
	iElement = parseInt(event.srcElement.id.substr(10));
	form = document.form1;
	//document.getElementById("divElement" + iElement).canHaveChildren = false;
	//Width
	var boxX = Math.round((570-intDesignWidth*intResHigh)/2 + 200);
	var boxY = intTopEdgeY;
	//Might need image x and y
	if(document.getElementById("divElement" + iElement)) {
		var fieldX = document.getElementById("divElement" + iElement).style.left.replace("px", "");
		var fieldY = document.getElementById("divElement" + iElement).style.top.replace("px", "");
		if(document.getElementById("imgElement" + iElement)) {
			fieldW = document.getElementById("imgElement" + iElement).width;
			fieldH = document.getElementById("imgElement" + iElement).height;
		} else {
			fieldW = document.getElementById("divElement" + iElement).style.width.replace("px", "");
			fieldH = document.getElementById("divElement" + iElement).style.height.replace("px", "");
		}
		intCurrentElement = iElement
		eval("form." + "txtFontFace").value = document.getElementById("divElement" + iElement).style.fontFamily;
		myFontSize = document.getElementById("divElement" + iElement).style.fontSize;
		myFontSize = Math.round(myFontSize.substr(0, myFontSize.length-2)*72/intResHigh/zoomFactor);
		form.txtFontSize.value = myFontSize;
		var textColor = document.getElementById("divElement" + iElement).style.color;
		document.getElementById("divTextColor").style.backgroundColor = textColor;
		if(document.getElementById("divElement" + iElement).style.fontWeight == "bold") {
			document.getElementById("ImgFontWeight").src = "icons/FontBoldY.gif";
		} else {
			document.getElementById("ImgFontWeight").src = "icons/FontBold.gif";
		}
		if(document.getElementById("divElement" + iElement).style.fontStyle == "italic") {
			document.getElementById("ImgFontStyle").src = "icons/FontItalicY.gif";
		} else {
			document.getElementById("ImgFontStyle").src = "icons/FontItalic.gif";
		}
		if(document.getElementById("divElement" + iElement).style.textDecoration == "underline") {
			document.getElementById("ImgTextDecoration").src = "icons/FontUnderlineY.gif";
		} else {
			document.getElementById("ImgTextDecoration").src = "icons/FontUnderline.gif";
		}
		document.getElementById("ImgAlignLeft").src = "icons/AlignLeft.gif";
		document.getElementById("ImgAlignCenter").src = "icons/AlignCenter.gif";
		document.getElementById("ImgAlignRight").src = "icons/AlignRight.gif";
		myAlign = document.getElementById("divElement" + iElement).style.textAlign;
		if(myAlign == "left") {
			document.getElementById("ImgAlignLeft").src = "icons/AlignLeftY.gif";
		} else if(myAlign == "center") {
			document.getElementById("ImgAlignCenter").src = "icons/AlignCenterY.gif";
		} else {
			document.getElementById("ImgAlignRight").src = "icons/AlignRightY.gif";
		}
		objElement = document.getElementById("divElement" + iElement);
		
		/*
		if(event.srcElement.id.indexOf("imgElement") == -1 && 
				intWasDragged == 0)	adjustCursorPos(iElement);
				*/
				
				
		currentX = event.clientX;
		currentY = event.clientY;	
		currentX += document.body.scrollLeft + 100;
		currentY += document.body.scrollTop;
	}
	intWasDragged = 0;
}

function setTxtElements() {
	var objTxtElement, objDivElement, objImgElement;
	var objTxtElementX, objTxtElementY, objTxtElementBoxW, objTxtElementBoxH;
	var boxX, boxY, fieldX, fieldY, fieldW, fieldH;
	var offsetX, offsetY, offsetW, offsetH;
	//Might move as global variables
	boxX = Math.round((570 - intDesignWidth*intResHigh)/2 + 200);
	boxY = intTopEdgeY;
	//Might change to while loop later
	for(var i=0;i<100;i++) {
		objTxtElement = document.getElementById("txtElement" + i);
		if(objTxtElement) {
			// Define objects
			objDivElement = document.getElementById("divElement" + i);
			objImgElement = document.getElementById("imgElement" + i);
			objTxtElementX = document.getElementById("txtElementX" + i);
			objTxtElementY = document.getElementById("txtElementY" + i);
			objTxtElementBoxW = document.getElementById("txtElementBoxW" + i);
			objTxtElementBoxH = document.getElementById("txtElementBoxH" + i);
			// Get values
			fieldX = objDivElement.style.left.replace("px", "");
			fieldY = objDivElement.style.top.replace("px", "");
			if(objImgElement) {
				// For image elements
				fieldW = objImgElement.width;
				fieldH = objImgElement.height;
			} else {
				// For text elements
				fieldW = objDivElement.style.width.replace("px", "");
				fieldH = objDivElement.style.height.replace("px", "");
			}			
			offsetX = Math.round((fieldX-boxX)*72/intResHigh/zoomFactor);
			offsetY = Math.round((fieldY-boxY)*72/intResHigh/zoomFactor);
			offsetW = Math.round(fieldW*72/intResHigh/zoomFactor);
			offsetH = Math.round(fieldH*72/intResHigh/zoomFactor);
			// Put values
			objTxtElementX.value = offsetX;
			objTxtElementY.value = offsetY;
			objTxtElementBoxW.value = offsetW;
			objTxtElementBoxH.value = offsetH;
			// Might want to reset all other values
		}
	}
}

// Change Value on Image
function changeValueOnImg(iElement) {
	if(iElement == 0) {
	    if (event != null) {
	        eId = event.srcElement.id;
    		
		    // Adjust later
		    if(eId.substr(0, 6) == "Studio") {
			    iElement = parseInt(eId.substr(10));
		    } else {
			    iElement = parseInt(eId.substr(10));
		    }
	    }
	}
	form = document.form1;
	
	nameOnImg = "divElement" + iElement;
	//Might have moved out of the element
	if(!isNaN(iElement)) {
		document.getElementById(nameOnImg).innerHTML = document.getElementById("txtElement" + iElement).value;
	}
	//Test later for Firefox
	for(i=0;i<100;i++) {
		objElement = document.getElementById("divElement" + i);
		if(objElement) {
			objElement.style.border = "";
		}
    }	
    
    // Added by Liang on 20080829 begin
    var obj = document.getElementById("divElement" + iElement);
    obj.style.height = obj.offsetHeight + "px";
    
    if (obj.offsetHeight + parseInt(obj.style.top) > intTopEdgeY + document.getElementById("imgDesign").height  - intResHigh*zoomFactor/8 + intAdjustmentY) {
        obj.style.top = intTopEdgeY + document.getElementById("imgDesign").height - obj.offsetHeight  - intResHigh*zoomFactor/8 + intAdjustmentY + "px";
        if (parseInt(obj.style.top) < intTopEdgeY) {
           obj.style.top = intTopEdgeY + "px";
        }
    }
    // Added by Liang on 20080829 begin
    
    intCurrentElement = iElement;	
}
// Change Value in Form
function changeValueInForm(iElement) {
	if(iElement == 0) {
		eId = event.srcElement.id;
		// Adjust later
		if(eId.substr(0, 6) == "Studio") {
			iElement = parseInt(eId.substr(10));
		} else {
			iElement = parseInt(eId.substr(10));
		}
	}
	form = document.form1;
	nameInForm = "txtElement" + iElement;
	nameDefaultInForm = "txtElementDefault" + iElement;
	divText = document.getElementById("divElement" + iElement).innerText;
	
	if(document.getElementById(nameDefaultInForm)) {
	    if(divText == document.getElementById(nameDefaultInForm).value) {
			document.getElementById(nameInForm).value = "";
		} else {
			document.getElementById(nameInForm).value = divText;
		}	
	} else {
		document.getElementById(nameInForm).value = divText;
	}		
	if(document.getElementById("divElement" + iElement).innerText != document.getElementById("divElement" + iElement).innerHTML) {
		//adjustCursorPos(iElement);
	}
}

//update cursor position
function adjustCursorPos(iElement) {
	objElement = document.getElementById("divElement" + iElement)
	
	var saveText = objElement.innerText;
	var range = document.selection.createRange();
	var weirdStr = String.fromCharCode(1);
	//alert(range.text);
	range.text = weirdStr;
	var pos = objElement.innerText.indexOf(weirdStr);
	objElement.innerText = saveText;
	range = document.body.createTextRange();
	range.moveToElementText(objElement);
	range.move('character', pos);
	range.select();
}


//Return key handler
//Might need to handle other characters later
function charHandler(iElement) {
    if(event.keyCode == 13) {
        event.returnValue = false;
    }
    objImgElement = document.getElementById("imgElement" + iElement);
    if(objImgElement) {
        if(event.keyCode == 46) {
            event.returnValue = false;
        }    
        //May add codes to handle element movement later
        if((event.keyCode >= 33) && (event.keyCode <= 40)) {
            event.returnValue = false;
        }
    }
}


function changeFontFace(FontFace) {
	if(intCurrentElement != -1) {
		document.getElementById("divElement" + intCurrentElement).style.fontFamily = FontFace;
		form = document.form1;
		objFontFace = eval("form." + "txtElementFontFace" + intCurrentElement);
		objFontFace.value = FontFace;
	}
}

function changeFontSize(fontSize) {
	if(intCurrentElement != -1) {
		var objDivElement, objTxtElementFontSize, objTxtElementBoxH, objDivElementContainer;
		// Define objects
		objDivElement = document.getElementById("divElement" + intCurrentElement);
		objDivElementContainer = document.getElementById("divElementContainer");
		objTxtElementFontSize = document.getElementById("txtElementFontSize" + intCurrentElement);
		objTxtElementBoxH = document.getElementById("txtElementBoxH" + intCurrentElement);
		// Change font
		objDivElement.style.fontSize = Math.round((fontSize)*intResHigh*zoomFactor/72) + "px";
		objTxtElementFontSize.value = fontSize;
		// Change height
		objDivElement.style.height = Math.round((fontSize*1.2)*intResHigh*zoomFactor/72);
		objTxtElementBoxH.value = Math.round(fontSize*1.2);
		objDivElementContainer.style.height = Math.round((fontSize*1.2)*intResHigh*zoomFactor/72) + 2;
		
		
		// Added by Liang on 20080724 begin
		var objCanvas = document.getElementById("divCanvas");
		var leftEdge = objCanvas.style.left.replace("px", "");
		var rightEdge = parseInt(objCanvas.style.left.replace("px", "")) + parseInt(document.getElementById("imgDesign").width);
		
		var elementX = parseInt(objDivElement.style.left.replace("px", ""));
		
		objDivElementCopy = document.getElementById("spClone");
			
		objDivElementCopy.innerText = objDivElement.innerText;
		
		objDivElementCopy.style.fontFamily = objDivElement.style.fontFamily;
		
		objDivElementCopy.style.fontSize = objDivElement.style.fontSize;
		objDivElementCopy.style.fontWeight = objDivElement.style.fontWeight;
		
		var elementW = elementX + objDivElementCopy.offsetWidth;
		if (elementW < leftEdge) {
		    objDivElement.style.left = leftEdge + "px";
		} else if (elementW > rightEdge) {
		    objDivElement.style.left = elementX - (elementW - rightEdge) + "px";
		}
		// Added by Liang on 20080724 end
		
		objDivElement.style.height = objDivElement.offsetHeight;
		if (objDivElement.offsetHeight + parseInt(objDivElement.style.top) > intTopEdgeY + document.getElementById("imgDesign").height  - intResHigh*zoomFactor/8 + intAdjustmentY) {
            objDivElement.style.top = intTopEdgeY + document.getElementById("imgDesign").height - objDivElement.offsetHeight  - intResHigh*zoomFactor/8 + intAdjustmentY + "px";
            if (parseInt(objDivElement.style.top) < intTopEdgeY) {
               objDivElement.style.top = intTopEdgeY + "px";
            }
        }
		
	}
}

function changeTextColor(CMYKColor, RGBColor, booUseSingleColor) {
	//booUseSingleColor is reserved
	if(intCurrentElement != -1) {
		document.getElementById("divTextColor").style.backgroundColor = RGBColor;
		document.getElementById("divElement" + intCurrentElement).style.color = RGBColor;
		form = document.form1;
		objTextColor = eval("form." + "txtElementTextColor" + intCurrentElement);  
		objTextColor.value = CMYKColor.replace(/-/g, " ");
	}
}

function changeFontWeight() {
	if(intCurrentElement != -1) {
		if(document.getElementById("divElement" + intCurrentElement).style.fontWeight == "bold") {
			FontWeight = "Normal";
			document.getElementById("ImgFontWeight").src = "icons/FontBold.gif";
		} else {
			FontWeight = "Bold";
			document.getElementById("ImgFontWeight").src = "icons/FontBoldY.gif";
		}    
		document.getElementById("divElement" + intCurrentElement).style.fontWeight = FontWeight;
		form = document.form1;
		objFontWeight = eval("form." + "txtElementFontWeight" + intCurrentElement);
		objFontWeight.value = FontWeight;
	}
}

function changeFontStyle() {
	if(intCurrentElement != -1) {
		if(document.getElementById("divElement" + intCurrentElement).style.fontStyle == "italic") {
			FontStyle = "Normal";
			document.getElementById("ImgFontStyle").src = "icons/FontItalic.gif";
		} else {
			FontStyle = "Italic";
			document.getElementById("ImgFontStyle").src = "icons/FontItalicY.gif";
		}    
		document.getElementById("divElement" + intCurrentElement).style.fontStyle = FontStyle;
		form = document.form1;
		objFontStyle = eval("form." + "txtElementFontStyle" + intCurrentElement);
		objFontStyle.value = FontStyle;
	}
}

function changeTextDecoration() {
	if(intCurrentElement != -1) {
		if(document.getElementById("divElement" + intCurrentElement).style.textDecoration == "underline") {
			TextDecoration = "None";
			document.getElementById("ImgTextDecoration").src = "icons/FontUnderline.gif";
		} else {
			TextDecoration = "Underline";
			document.getElementById("ImgTextDecoration").src = "icons/FontUnderlineY.gif";
		}    
		document.getElementById("divElement" + intCurrentElement).style.textDecoration = TextDecoration;
		form = document.form1;
		objTextDecoration = eval("form." + "txtElementTextUnderline" + intCurrentElement);
		objTextDecoration.value = TextDecoration;
	}
}

function changeAlignment(align) {
	// Change div and text, add text to final doc
	document.getElementById("ImgAlignLeft").src = "icons/AlignLeft.gif"; 	
	document.getElementById("ImgAlignCenter").src = "icons/AlignCenter.gif"; 	
	document.getElementById("ImgAlignRight").src = "icons/AlignRight.gif"; 	
	if (document.getElementById("imgElement" + intCurrentElement) == null) {
	    if (document.getElementById("imgElement" + intCurrentElement) == null) {
	        if(align == "left") {
		        document.getElementById("ImgAlignLeft").src = "icons/AlignLeftY.gif"; 	
		        decHAlign = 0;
	        } else if(align == "center") {
		        document.getElementById("ImgAlignCenter").src = "icons/AlignCenterY.gif"; 	
		        decHAlign = 0.5;
	        } else {
		        document.getElementById("ImgAlignRight").src = "icons/AlignRightY.gif"; 	
		        decHAlign = 1;
	        }
	    }
	    //document.getElementById("divElement" + intCurrentElement).style.border = "dotted red 1px";	
	    form = document.form1;
	    objHAlign = eval("form." + "txtElementHAlign" + intCurrentElement);
	    objHAlign.value = decHAlign;  

	    if(intCurrentElement != -1) {
	            var position = document.getElementById("divElement" + intCurrentElement).style.left;
		        document.getElementById("divElement" + intCurrentElement).style.left = 200 + intWhiteSpace + intGap*zoomFactor;
		        document.getElementById("divElement" + intCurrentElement).style.width = (intResHigh*intDesignWidth - 2*intGap)*zoomFactor;
		        document.getElementById("divElement" + intCurrentElement).style.textAlign = align;
		        objLeft = eval("form." + "txtElementX" + intCurrentElement);
		        objWidth = eval("form." + "txtElementBoxW" + intCurrentElement);
		        objLeft.value = 200 + intWhiteSpace + intGap;
		        objWidth.value = intResHigh*intDesignWidth - 2*intGap;	
    	    
	    }
	}
}

//Zoom in
function zoomIn() {
	if(zoomFactor < 3) {
		zoomFactor += 0.25;
		//Change design width and height
		var objImgDesign;
		objImgDesign = document.getElementById("imgDesign");
		objImgDesign.width *= zoomFactor/(zoomFactor - 0.25);
		objImgDesign.height *= zoomFactor/(zoomFactor - 0.25);
		//Change bottom bar position
		var objBottomBar;
		objBottomBar = document.getElementById("divBottomBar");
		objBottomBar.style.top = parseInt(objBottomBar.style.top.replace("px", "")) + 
					0.25*(objImgDesign.height/zoomFactor);
		//Change x, y, w, h and fontsize of element objects
		var canvasX, canvasY;
		canvasX = 200 + intWhiteSpace;
		canvasY = intTopEdgeY;
		for(i=0;i<100;i++) {
			objDivElement = document.getElementById("divElement" + i);
			objImgElement = document.getElementById("imgElement" + i);
			if(objDivElement) {	
				objDivElement.style.left = canvasX + 
					(parseInt(objDivElement.style.left.replace("px", ""))-canvasX)*
					zoomFactor/(zoomFactor-0.25);
				objDivElement.style.top = canvasY + 
					(parseInt(objDivElement.style.top.replace("px", ""))-canvasY)*
					zoomFactor/(zoomFactor-0.25);				
				//setDebug("");
				if(objImgElement) {
					objDivElement.style.width = 
						parseInt(objImgElement.width)*
						zoomFactor/(zoomFactor-0.25);
					objDivElement.style.height = 
						parseInt(objImgElement.height)*
						zoomFactor/(zoomFactor-0.25);
					var newWidth, newHeight;
					newWidth = parseInt(objImgElement.width)*
						zoomFactor/(zoomFactor-0.25);
					newHeight = parseInt(objImgElement.height)*
						zoomFactor/(zoomFactor-0.25);						
					var srcImg, htmlImg;
					srcImg = objImgElement.src;
					htmlImg = "<img id=\"" + "imgElement" + i + 
							  "\" src=\"" + srcImg + 
							  "\" width=\"" + newWidth +
							  "\" height=\"" + newHeight + "\">"
					objImgElement.outerHTML = htmlImg;
				} else {
					objDivElement.style.width =  
						parseInt(objDivElement.style.width.replace("px", ""))*
						zoomFactor/(zoomFactor-0.25);
					objDivElement.style.height = 
						parseInt(objDivElement.style.height.replace("px", ""))*
						zoomFactor/(zoomFactor-0.25);				
					objDivElement.style.fontSize = 
						parseInt(objDivElement.style.fontSize.replace("px", ""))*
						zoomFactor/(zoomFactor-0.25);				
				}				
			}
		}	
		//Clear container
		var objContainer;
		objContainer = document.getElementById("divElementContainer");
		objContainer.style.top = -100;
		objContainer.style.left = -100;
		//Change canvas frame position
		var objCanvasWiBleed;
		objCanvasWiBleed = document.getElementById("divCanvas");
		//18 needs to be dynamic from a variable
		objCanvasWiBleed.style.width = objImgDesign.width + 18;
		objCanvasWiBleed.style.height = objImgDesign.height + 18;
		//Change scissor and cross icon position
		//Left top side is not needed to change
		var objRightTopDownScissors, objRightTopLeftScissors;
		var objLeftBottomUpScissors, objLeftBottomRightScissors;
		var objRightBottomUpScissors, objRightBottomLeftScissors;
		objRightTopDownScissors = document.getElementById("divRightTopDownScissors");
		objRightTopLeftScissors =document.getElementById("divRightTopLeftScissors");
		objLeftBottomUpScissors =document.getElementById("divLeftBottomUpScissors");
		objLeftBottomRightScissors =document.getElementById("divLeftBottomRightScissors");
		objRightBottomUpScissors =document.getElementById("divRightBottomUpScissors");
		objRightBottomLeftScissors =document.getElementById("divRightBottomLeftScissors");
		objRightTopDownScissors.style.left = parseInt(objRightTopDownScissors.style.left.replace("px", "")) +
			0.25*(objImgDesign.width/zoomFactor);
		objRightTopLeftScissors.style.left = parseInt(objRightTopLeftScissors.style.left.replace("px", "")) +
			0.25*(objImgDesign.width/zoomFactor);		
		objLeftBottomUpScissors.style.top = parseInt(objLeftBottomUpScissors.style.top.replace("px", "")) +
			0.25*(objImgDesign.height/zoomFactor);
		objLeftBottomRightScissors.style.top = parseInt(objLeftBottomRightScissors.style.top.replace("px", "")) +
			0.25*(objImgDesign.height/zoomFactor);
		objRightBottomUpScissors.style.left = parseInt(objRightBottomUpScissors.style.left.replace("px", "")) +
			0.25*(objImgDesign.width/zoomFactor);
		objRightBottomUpScissors.style.top = parseInt(objRightBottomUpScissors.style.top.replace("px", "")) +
			0.25*(objImgDesign.height/zoomFactor);			
		objRightBottomLeftScissors.style.left = parseInt(objRightBottomLeftScissors.style.left.replace("px", "")) +
			0.25*(objImgDesign.width/zoomFactor);		
		objRightBottomLeftScissors.style.top = parseInt(objRightBottomLeftScissors.style.top.replace("px", "")) +
			0.25*(objImgDesign.height/zoomFactor);	
		var objRightTopEdge, objLeftBottomEdge, objRightBottomEdge;
		objRightTopEdge = document.getElementById("divRightTopEdge");
		objLeftBottomEdge = document.getElementById("divLeftBottomEdge");
		objRightBottomEdge = document.getElementById("divRightBottomEdge");
		objRightTopEdge.style.left = parseInt(objRightTopEdge.style.left.replace("px", "")) +
			0.25*(objImgDesign.width/zoomFactor);
		objLeftBottomEdge.style.top = parseInt(objLeftBottomEdge.style.top.replace("px", "")) +
			0.25*(objImgDesign.height/zoomFactor);
		objRightBottomEdge.style.left = parseInt(objRightBottomEdge.style.left.replace("px", "")) +
			0.25*(objImgDesign.width/zoomFactor);
		objRightBottomEdge.style.top = parseInt(objRightBottomEdge.style.top.replace("px", "")) +
			0.25*(objImgDesign.height/zoomFactor);									
	}
	//Change icon when needed
	var objImgZoomIn, objImgZoomOut;
	objImgZoomIn = document.getElementById("imgZoomIn");
	objImgZoomOut = document.getElementById("imgZoomOut");
	objImgZoomOut.src = "icons/ZoomOut.gif";	
	if(zoomFactor == 3) {
		objImgZoomIn.src = "icons/ZoomInFade.gif";
	}
}

//Zoom out
function zoomOut() {
	if(zoomFactor > 1) {
		zoomFactor -= 0.25;
		//Change design width and height
		var objImgDesign;
		objImgDesign = document.getElementById("imgDesign");
		objImgDesign.width = objImgDesign.width*zoomFactor/(zoomFactor + 0.25);
		objImgDesign.height = objImgDesign.height*zoomFactor/(zoomFactor + 0.25);	
		//Change bottom bar position
		var objBottomBar;
		objBottomBar = document.getElementById("divBottomBar");
		objBottomBar.style.top = parseInt(objBottomBar.style.top.replace("px", "")) - 
					0.25*(objImgDesign.height/zoomFactor);		
		//Change x, y, w, h and fontsize of element objects
		var canvasX, canvasY;
		canvasX = 200 + intWhiteSpace;
		canvasY = intTopEdgeY;
		for(i=0;i<100;i++) {
			objDivElement = document.getElementById("divElement" + i);
			objImgElement = document.getElementById("imgElement" + i);
			if(objDivElement) {	
				objDivElement.style.left = canvasX + 
					(parseInt(objDivElement.style.left.replace("px", ""))-canvasX)*
					zoomFactor/(zoomFactor+0.25);
				objDivElement.style.top = canvasY + 
					(parseInt(objDivElement.style.top.replace("px", ""))-canvasY)*
					zoomFactor/(zoomFactor+0.25);
				if(objImgElement) {
					objDivElement.style.width =  
						parseInt(objImgElement.width)*
						zoomFactor/(zoomFactor+0.25);
					objDivElement.style.height = 
						parseInt(objImgElement.height)*
						zoomFactor/(zoomFactor+0.25);					
					var newWidth, newHeight;
					newWidth = parseInt(objImgElement.width)*
						zoomFactor/(zoomFactor+0.25);
					newHeight = parseInt(objImgElement.height)*
						zoomFactor/(zoomFactor+0.25);						
					var srcImg, htmlImg;
					srcImg = objImgElement.src;
					htmlImg = "<img id=\"" + "imgElement" + i + 
							  "\" src=\"" + srcImg + 
							  "\" width=\"" + newWidth +
							  "\" height=\"" + newHeight + "\">"
					objImgElement.outerHTML = htmlImg;					
				} else {
					objDivElement.style.width =  
						parseInt(objDivElement.style.width.replace("px", ""))*
						zoomFactor/(zoomFactor+0.25);
					objDivElement.style.height = 
						parseInt(objDivElement.style.height.replace("px", ""))*
						zoomFactor/(zoomFactor+0.25);					
					objDivElement.style.fontSize = 
						parseInt(objDivElement.style.fontSize.replace("px", ""))*
						zoomFactor/(zoomFactor+0.25);				
				}
			}
		}	
		//Clear container	
		//Clear container
		var objContainer;
		objContainer = document.getElementById("divElementContainer");
		objContainer.style.top = -100;
		objContainer.style.left = -100;		
		//Change canvas frame position
		var objCanvasWiBleed;
		objCanvasWiBleed = document.getElementById("divCanvas");
		//18 needs to be dynamic from a variable
		objCanvasWiBleed.style.width = objImgDesign.width + 18;
		objCanvasWiBleed.style.height = objImgDesign.height + 18;
		//Change scissor and cross icon position
		//Left top side is not needed to change
		var objRightTopDownScissors, objRightTopLeftScissors;
		var objLeftBottomUpScissors, objLeftBottomRightScissors;
		var objRightBottomUpScissors, objRightBottomLeftScissors;
		objRightTopDownScissors = document.getElementById("divRightTopDownScissors");
		objRightTopLeftScissors =document.getElementById("divRightTopLeftScissors");
		objLeftBottomUpScissors =document.getElementById("divLeftBottomUpScissors");
		objLeftBottomRightScissors =document.getElementById("divLeftBottomRightScissors");
		objRightBottomUpScissors =document.getElementById("divRightBottomUpScissors");
		objRightBottomLeftScissors =document.getElementById("divRightBottomLeftScissors");
		objRightTopDownScissors.style.left = parseInt(objRightTopDownScissors.style.left.replace("px", "")) -
			0.25*(objImgDesign.width/zoomFactor);
		objRightTopLeftScissors.style.left = parseInt(objRightTopLeftScissors.style.left.replace("px", "")) -
			0.25*(objImgDesign.width/zoomFactor);		
		objLeftBottomUpScissors.style.top = parseInt(objLeftBottomUpScissors.style.top.replace("px", "")) -
			0.25*(objImgDesign.height/zoomFactor);
		objLeftBottomRightScissors.style.top = parseInt(objLeftBottomRightScissors.style.top.replace("px", "")) -
			0.25*(objImgDesign.height/zoomFactor);
		objRightBottomUpScissors.style.left = parseInt(objRightBottomUpScissors.style.left.replace("px", "")) -
			0.25*(objImgDesign.width/zoomFactor);
		objRightBottomUpScissors.style.top = parseInt(objRightBottomUpScissors.style.top.replace("px", "")) -
			0.25*(objImgDesign.height/zoomFactor);			
		objRightBottomLeftScissors.style.left = parseInt(objRightBottomLeftScissors.style.left.replace("px", "")) -
			0.25*(objImgDesign.width/zoomFactor);		
		objRightBottomLeftScissors.style.top = parseInt(objRightBottomLeftScissors.style.top.replace("px", "")) -
			0.25*(objImgDesign.height/zoomFactor);	
		var objRightTopEdge, objLeftBottomEdge, objRightBottomEdge;
		objRightTopEdge = document.getElementById("divRightTopEdge");
		objLeftBottomEdge = document.getElementById("divLeftBottomEdge");
		objRightBottomEdge = document.getElementById("divRightBottomEdge");
		objRightTopEdge.style.left = parseInt(objRightTopEdge.style.left.replace("px", "")) -
			0.25*(objImgDesign.width/zoomFactor);
		objLeftBottomEdge.style.top = parseInt(objLeftBottomEdge.style.top.replace("px", "")) -
			0.25*(objImgDesign.height/zoomFactor);
		objRightBottomEdge.style.left = parseInt(objRightBottomEdge.style.left.replace("px", "")) -
			0.25*(objImgDesign.width/zoomFactor);
		objRightBottomEdge.style.top = parseInt(objRightBottomEdge.style.top.replace("px", "")) -
			0.25*(objImgDesign.height/zoomFactor);			
	}
	//Change icon when needed	
	var objImgZoomIn, objImgZoomOut;
	objImgZoomIn = document.getElementById("imgZoomIn");
	objImgZoomOut = document.getElementById("imgZoomOut");
	objImgZoomIn.src = "icons/ZoomIn.gif";
	if(zoomFactor == 1) {
		objImgZoomOut.src = "icons/ZoomOutFade.gif";
	}	
}

var AddlTextIndex = 0;
//Pretend to be in side A
function addText() {
	//Add div
	parentDiv = document.getElementById("divAllElements");
	newDiv = document.createElement("div");
	myElement += 1;
	MyAddlText = "divElement" + myElement;
	newDiv.id = MyAddlText;
	newDiv.style.position = "absolute";
	fieldX = 200 + intWhiteSpace + intGap*zoomFactor;
	fieldY = intTopEdgeY + intGap*zoomFactor;
	fieldW = (intResHigh*intDesignWidth - 2*intGap)*zoomFactor;
	//10*1.2 adobe standard font height
	fieldH = Math.round(12*intResHigh*zoomFactor/72);	
	newDiv.style.left = fieldX;
	newDiv.style.top = fieldY;
	newDiv.style.width = fieldW;
	newDiv.style.height = fieldH;
	newDiv.style.fontFamily = "Arial";
	newDiv.style.fontSize = Math.round(10*intResHigh*zoomFactor/72) + "px";
	newDiv.style.color = "#000000";
	newDiv.style.fontWeight = "normal";
	newDiv.style.textAlign = "left";
	newDiv.style.zIndex = "3";
	newDiv.contentEditable = true;
	newDiv.innerText = "";
	newDiv.attachEvent("onmouseup", function() {getOffset(0);});
	newDiv.attachEvent("onblur", function() {changeValueOnImg(0);});
	newDiv.attachEvent("onfocus", function() {changeValueInForm(0);});
	newDiv.attachEvent("onkeyup", function() {changeValueInForm(0);});
	for(i=0;i<100;i++) {
		objElement = document.getElementById("divElement" + i);
		if(objElement) {
			objElement.style.border = "";
		}
    }
	document.getElementById("divElementContainer").style.left = fieldX - 1;
	document.getElementById("divElementContainer").style.top = fieldY - 1;
	document.getElementById("divElementContainer").style.width = fieldW + 2;
	document.getElementById("divElementContainer").style.height = fieldH + 2;
	parentDiv.appendChild(newDiv);	
	MAKEDYNAMIC(MyAddlText);
	parentTbl = document.getElementById("tboAllElements");
	row = document.createElement("tr");
	row.id = "trElement" + myElement;
    td = document.createElement("td");
    tbox = document.createElement("input");
    tbox.id = "txtElement" + myElement;
    tbox.value = "";
    tbox.className = "customsmall";
    tbox.style.width = "150px";
    tbox.style.backgroundColor = "#FFFFFF";
    tbox.attachEvent("onfocus", function() {changeValueOnImg(0);});
    tbox.attachEvent("onkeyup", function() {changeValueOnImg(0);});    
    td.appendChild(tbox);
    addTextBox(td, "txtElementX", myElement, "hidden", 9);
    addTextBox(td, "txtElementY", myElement, "hidden", 9);
    addTextBox(td, "txtElementHAlign", myElement, "hidden", 0);
    addTextBox(td, "txtElementFontFace", myElement, "hidden", "Arial");
    addTextBox(td, "txtElementFontSize", myElement, "hidden", 10);
    addTextBox(td, "txtElementTextColor", myElement, "hidden", "0 0 0 100");
    addTextBox(td, "txtElementFontWeight", myElement, "hidden", "Normal");
    addTextBox(td, "txtElementFontStyle", myElement, "hidden", "Normal");
    addTextBox(td, "txtElementTextUnderline", myElement, "hidden", "None");
    addTextBox(td, "txtElementBoxW", myElement, "hidden", 72*intDesignWidth - 18);
    addTextBox(td, "txtElementBoxH", myElement, "hidden", 12);
    row.appendChild(td);
    parentTbl.appendChild(row);   
    var objTBox;
    objTBox = document.getElementById("txtElement" + myElement);
	objTBox.focus();
}

function addTextBox(td, name, iElement, type, value) {
    tbox = document.createElement("input");
    tbox.id = name + iElement;
    if(type == "hidden") {
	    tbox.type = "hidden";
	}
    tbox.value = value;
    td.appendChild(tbox);
}

function deleteElement() {
    if(intCurrentElement != -1) {
		var objDivElement, objTxtElement;
		objDivElement = document.getElementById("divElement" + intCurrentElement);
		objTxtElement = document.getElementById("txtElement" + intCurrentElement);
		if(intCurrentElement >= cntElements) {
			//Move div element far outside off canvas
			/*
			objDivElement.style.top = -1000;
			objDivElement.style.left = -1000;
			objDivElement.innerHtml = "";
			*/
			objDivElement.parentNode.removeChild(objDivElement);
			
			//Text element
			/*
			objTxtElement.style.backgroundColor = "#ECECEC";
	  		objTxtElement.value = "";
			objTxtElement.disabled = true;
			*/
			objTxtElement.parentNode.removeChild(objTxtElement);
			//Might want to also set it inactive
			intCurrentElement = -1
		} else {
			objDivElement.innerText = "";
			objTxtElement.value = "";
		}
		var objContainer;
		objContainer = document.getElementById("divElementContainer");
		objContainer.style.top = -100;
		objContainer.style.left = -100;
	}
}

var AddlImgIndex = 0;
function addImage() {
	window.open('UploadCustomerImage.aspx', '', 'width=600,height=475,resizable,scrollbars');
}

function addImageToCanvas(strImgPath, intImgWidth, intImgHeight) {
	//Add div
	intImgWidthCanvas = intImgWidth*intResHigh*zoomFactor/300;
	intImgHeightCanvas = intImgHeight*intResHigh*zoomFactor/300;
	intImgWidthForm = Math.round(intImgWidth*72/300);
	intImgHeightForm = Math.round(intImgHeight*72/300);
	parentDiv = document.getElementById("divAllElements");
	newDiv = document.createElement("div");
	myElement += 1;
	MyAddlImg = "divElement" + myElement;
	newDiv.id = MyAddlImg;
	newDiv.style.position = "absolute";
	newDiv.style.left = 200 + intWhiteSpace + intGap*zoomFactor;
	newDiv.style.top = intTopEdgeY + intGap*zoomFactor;
	newDiv.style.zIndex = "-1";
	newDiv.contentEditable = true;
	newDiv.innerHTML = "<img id='imgElement" + myElement + "' " + 
						"src='" + strImgPath + "' " + 
						"width='" + intImgWidthCanvas + "' " + 
						"height='" + intImgHeightCanvas + "' " + 
						"onload='javascript:getDefaultSize( this );' " +
						"onresizeend='javascript:finishResize( this );' >";
	newDiv.attachEvent("onmouseup", function() {getOffset(0);});
	newDiv.attachEvent("onkeydown", function() {charHandler(myElement);});
	for(i=0;i<100;i++) {
		objElement = document.getElementById("divElement" + i);
		if(objElement) {
			objElement.style.border = "";
			// only for text elements
			// change later
		}
    }
	parentDiv.appendChild(newDiv);	
	MAKEDYNAMIC(MyAddlImg);
	parentTbl = document.getElementById("tboAllElements");
	row = document.createElement("tr");
	row.id = "trElement" + myElement;
    td = document.createElement("td");
    tbox = document.createElement("input");
    tbox.id = "txtElement" + myElement;
    tbox.value = strImgPath;
    tbox.type = "hidden";
    td.appendChild(tbox);
    addTextBox(td, "txtElementX", myElement, "hidden", 9);
    addTextBox(td, "txtElementY", myElement, "hidden", 9);
    addTextBox(td, "txtElementHAlign", myElement, "hidden", 0);
    addTextBox(td, "txtElementFontFace", myElement, "hidden", "Arial");
    addTextBox(td, "txtElementFontSize", myElement, "hidden", 10);
    addTextBox(td, "txtElementTextColor", myElement, "hidden", "0 0 0 100");
    addTextBox(td, "txtElementFontWeight", myElement, "hidden", "Normal");
    addTextBox(td, "txtElementFontStyle", myElement, "hidden", "Normal");
    addTextBox(td, "txtElementTextUnderline", myElement, "hidden", "None");
    addTextBox(td, "txtElementBoxW", myElement, "hidden", intImgWidthForm);
    addTextBox(td, "txtElementBoxH", myElement, "hidden", intImgHeightForm);
    row.appendChild(td);
    parentTbl.appendChild(row);   
}

//Open a learn-how window
function learnHow() {
	window.open('StudioGuide.aspx', '', 'width=600,height=475,resizable,scrollbars');
}

//Change text color palette
function showPalette(el) {
	document.getElementById("divPalette").style.left = el.offsetLeft + "px";
	//22 is the height of box
	document.getElementById("divPalette").style.top = el.offsetTop + 22 + "px";	
	document.getElementById("divPalette").style.visibility = "visible";
	document.getElementById("divPalette").style.display = "";	
	strCurrentElementIDTag = el.id.substr(3);
}

function clearPalette(event) {
    var strCurrentCMYK;
	if (IE == true) {
		var eObject = event.srcElement;
	}
	else if (Netscape == true) {
		var eObject = event.target;
	}
	eName = eObject.name;
	//alert(eName + " " + eAlt);
	eAlt = eObject.alt;
	if(eName) 
	{   
		if(eName.substr(0, 6) == "Color-") 
		{	
			strCurrentRGB = eAlt;
			strCurrentCMYK = eName.substr(6).replace(/-/g, " ");
			var strCurrentElementDivID;
			var strCurrentElementTxtID;
			if (typeof UseSingleColor == "undefined") {
				strCurrentElementDivID = "div" + strCurrentElementIDTag;
				strCurrentElementTxtID = "txt" + strCurrentElementIDTag;
				document.getElementById(strCurrentElementDivID).style.backgroundColor = strCurrentRGB;
				document.getElementById(strCurrentElementTxtID).value = strCurrentCMYK;			
			} else {
				for(var i=0;i<100;i++) {
					objDivElement = document.getElementById("divElementTextColor" + i);
					if(objDivElement) {
						strCurrentElementDivID = "divElementTextColor" + i;
						strCurrentElementTxtID = "txtElementTextColor" + i;
						document.getElementById(strCurrentElementDivID).style.backgroundColor = strCurrentRGB;
						document.getElementById(strCurrentElementTxtID).value = strCurrentCMYK;							
					}
				}	
			}
		} 
	} 		
	//Need to check hidden and none
	document.getElementById("divPalette").style.visibility = "hidden";
	document.getElementById("divPalette").style.display = "none";	
}

function clearPaletteWiArray(event) {
    var strCurrentCMYK;
	if (IE == true) {
		var eObject = event.srcElement;
	}
	else if (Netscape == true) {
		var eObject = event.target;
	}
	eName = eObject.name;
	eAlt = eObject.alt;
	if(eName) 
	{   
		if(eName.substr(0, 6) == "Color-") 
		{	
			//Need to change and support more than one color selections later
			if (typeof UseSingleColor == "undefined") {
				changeTextColor(eName.substr(6), eAlt, true);
			} else {
				changeTextColor(eName.substr(6), eAlt, false);
			}
		} 
	} 		
	//Need to check hidden and none
	document.getElementById("divPalette").style.visibility = "hidden";
	document.getElementById("divPalette").style.display = "none";	
}

function setMenu(iElement) {
    form = document.form1;
    if(document.getElementById("divElement" + iElement)) {
        intCurrentElement = iElement
		eval("form." + "txtFontFace").value = document.getElementById("divElement" + iElement).style.fontFamily;
		myFontSize = document.getElementById("divElement" + iElement).style.fontSize;
		myFontSize = Math.round(myFontSize.substr(0, myFontSize.length-2)*72/intResHigh/zoomFactor);
		form.txtFontSize.value = myFontSize;
		var textColor = document.getElementById("divElement" + iElement).style.color;
		document.getElementById("divTextColor").style.backgroundColor = textColor;
		if(document.getElementById("divElement" + iElement).style.fontWeight == "bold") {
			document.getElementById("ImgFontWeight").src = "icons/FontBoldY.gif";
		} else {
			document.getElementById("ImgFontWeight").src = "icons/FontBold.gif";
		}
		if(document.getElementById("divElement" + iElement).style.fontStyle == "italic") {
			document.getElementById("ImgFontStyle").src = "icons/FontItalicY.gif";
		} else {
			document.getElementById("ImgFontStyle").src = "icons/FontItalic.gif";
		}
		if(document.getElementById("divElement" + iElement).style.textDecoration == "underline") {
			document.getElementById("ImgTextDecoration").src = "icons/FontUnderlineY.gif";
		} else {
			document.getElementById("ImgTextDecoration").src = "icons/FontUnderline.gif";
		}
		document.getElementById("ImgAlignLeft").src = "icons/AlignLeft.gif";
		document.getElementById("ImgAlignCenter").src = "icons/AlignCenter.gif";
		document.getElementById("ImgAlignRight").src = "icons/AlignRight.gif";
		myAlign = document.getElementById("divElement" + iElement).style.textAlign;
		if(myAlign == "left") {
			document.getElementById("ImgAlignLeft").src = "icons/AlignLeftY.gif";
		} else if(myAlign == "center") {
			document.getElementById("ImgAlignCenter").src = "icons/AlignCenterY.gif";
		} else {
			document.getElementById("ImgAlignRight").src = "icons/AlignRightY.gif";
		}
    }
}
// End hiding script -->