function step(direction) { if(direction == 'next') { globalCurrentStep++; } else { if(globalCurrentStep > 1) { globalCurrentStep--; } } if(globalCurrentStep >= 5) { dijit.byId('saveDialog').show(); saveDesign(); } else { var wipeOut = dojo.fx.wipeOut({ node: "roundbox", duration: 500, onEnd:function(){ //do the dirty work after the box collapses switch(globalCurrentStep) { case 1: dojo.byId("step1").style.display="block"; dojo.byId("step2").style.display="none"; dojo.byId("backButton").style.display="none"; dojo.byId("stepDisplay").innerHTML = "Step 1 - Sizes"; var fadeOut = dojo.fadeOut({ node: "designImage", duration: 500, onEnd:function(){ dojo.byId("designImage").style.display="none"; dojo.byId("measureImage").style.display="block"; var fadeIn = dojo.fadeIn({node:"measureImage",duration:500}); fadeIn.play(); } }); fadeOut.play(); break; case 2: var keepMoving = true; if(isNumeric(dojo.byId('sizeSide').value)) { globalSideMeasurement.defaultSize = Math.round(dojo.byId('sizeSide').value); } else { keepMoving = false; globalCurrentStep = 1; alert("Please enter a number for the side measurement"); } if(isNumeric(dojo.byId('sizeHood').value)) { globalHoodMeasurement.defaultSize = Math.round(dojo.byId('sizeHood').value); } else { keepMoving = false; globalCurrentStep = 1; alert("Please enter a number for the hood measurement"); } if(isNumeric(dojo.byId('sizeTop').value)) { globalTopMeasurement.defaultSize = Math.round(dojo.byId('sizeTop').value); } else { keepMoving = false; globalCurrentStep = 1; alert("Please enter a number for the top measurement"); } if(keepMoving) { dojo.byId("step1").style.display="none"; dojo.byId("step2").style.display="block"; dojo.byId("backButton").style.display="block"; dojo.byId("stepDisplay").innerHTML = "Step 2 - Design side graphics"; dojo.byId("themeList").style.display="inline"; dojo.byId("hoodThemeList").style.display="none"; if(themeManager.sideThemeElement != "") { globalSelectedElement = themeManager.sideThemeElement; updateSizeDisplay(); } else { dojo.byId('themeSizeX').innerHTML = 0; dojo.byId('themeSizeY').innerHTML = 0; } var fadeOut = dojo.fadeOut({ node: "measureImage", duration: 500, onEnd:function(){ dojo.byId("measureImage").style.display="none"; dojo.byId("designImage").style.display="block"; //dojo.byId("hoodImage").style.display="none"; dojo.byId("designImage").style.visibility="visible"; if(!globalSideInitialized) initializeSideDesigner(); currentLettering.clearLettering(); currentLettering.writeLettering(); currentLettering.showLettering(); dojo.byId("contentholder").style.width = globalSideMask.w + "px"; dojo.byId("contentholder").style.height = globalSideMask.h + "px"; dojo.byId("mask").setAttribute("src",globalSideMask.filename); var fadeIn = dojo.fadeIn({node:"designImage",duration:500}); fadeIn.play(); } }); fadeOut.play(); } break; case 3: dojo.byId("step1").style.display="none"; dojo.byId("step2").style.display="block"; dojo.byId("backButton").style.display="block"; dojo.byId("stepDisplay").innerHTML = "Step 3 - Design hood graphics"; dojo.byId("themeList").style.display="none"; dojo.byId("hoodThemeList").style.display="inline"; dojo.byId("themeMenu").style.display="block"; if(themeManager.hoodThemeElement != "") { globalSelectedElement = themeManager.hoodThemeElement; updateSizeDisplay(); } else { dojo.byId('themeSizeX').innerHTML = 0; dojo.byId('themeSizeY').innerHTML = 0; } var fadeOut = dojo.fadeOut({ node: "designImage", duration: 500, onEnd:function(){ //dojo.byId("designImage").style.display="none"; //dojo.byId("topImage").style.display="none"; //dojo.byId("hoodImage").style.display="block"; currentLettering.clearLettering(); currentLettering.writeLettering(); currentLettering.showLettering(); dojo.byId("nextButtonLink").innerHTML = "Next"; dojo.byId("contentholder").style.width = globalHoodMask.w + "px"; dojo.byId("contentholder").style.height = globalHoodMask.h + "px"; dojo.byId("mask").setAttribute("src",globalHoodMask.filename); var fadeIn = dojo.fadeIn({node:"designImage",duration:500}); fadeIn.play(); } }); fadeOut.play(); break; case 4: dojo.byId("step1").style.display="none"; dojo.byId("step2").style.display="block"; dojo.byId("backButton").style.display="block"; dojo.byId("stepDisplay").innerHTML = "Step 4 - Design top graphics"; dojo.byId("themeMenu").style.display="none"; var fadeOut = dojo.fadeOut({ node: "designImage", duration: 500, onEnd:function(){ //dojo.byId("hoodImage").style.display="none"; //dojo.byId("topImage").style.display="block"; currentLettering.clearLettering(); currentLettering.writeLettering(); currentLettering.showLettering(); dojo.byId("nextButtonLink").innerHTML = "Finish"; dojo.byId("contentholder").style.width = globalTopMask.w + "px"; dojo.byId("contentholder").style.height = globalTopMask.h + "px"; dojo.byId("mask").setAttribute("src",globalTopMask.filename); var fadeIn = dojo.fadeIn({node:"designImage",duration:500}); fadeIn.play(); } }); fadeOut.play(); break; case 5: break; } } }); var wipeIn = dojo.fx.wipeIn({node: "roundbox",duration: 500}); currentAnimation = dojo.fx.chain([wipeOut, wipeIn]); currentAnimation.play(); } } function showMenu(link) { switch(link) { case 'addlettering': dijit.popup.open({popup: dijit.byId('newTextDialog'), x: dojo.coords('letteringLink',true).x + 20, y: dojo.coords('letteringLink',true).y + 10}); break; case 'changesidecolor': dijit.popup.open({popup: dijit.byId('sideColorDialog'), x: dojo.coords('sideColorLink',true).x + 20, y: dojo.coords('sideColorLink',true).y + 10}); break; case 'textColor': globalChangeColor = 'text'; dijit.popup.open({popup: dijit.byId('colorDialog'), x: dojo.coords('textColorLink',true).x + 20, y: dojo.coords('textColorLink',true).y + 10}); break; case 'textOutlineColor': globalChangeColor = 'outline'; dijit.popup.open({popup: dijit.byId('colorDialog'), x: dojo.coords('outline',true).x + 20, y: dojo.coords('outline',true).y + 10}); break; case 'textOutlineTwoColor': globalChangeColor = 'outlinetwo'; dijit.popup.open({popup: dijit.byId('colorDialog'), x: dojo.coords('outlinetwo',true).x + 20, y: dojo.coords('outlinetwo',true).y + 10}); break; case 'textShadowColor': globalChangeColor = 'shadow'; dijit.popup.open({popup: dijit.byId('colorDialog'), x: dojo.coords('shadow',true).x + 20, y: dojo.coords('shadow',true).y + 10}); break; case 'clipartColor': globalChangeColor = 'clipart'; dijit.popup.open({popup: dijit.byId('colorDialog'), x: dojo.coords('clipartColor',true).x + 20, y: dojo.coords('clipartColor',true).y + 10}); break; case 'uploadDialog': dijit.popup.open({popup: dijit.byId('uploadDialog'), x: dojo.coords('uploadLink',true).x + 20, y: dojo.coords('uploadLink',true).y + 10}); break; case 'gradientColor': dijit.popup.open({popup: dijit.byId('gradientDialog'), x: dojo.coords('gradient',true).x + 20, y: dojo.coords('gradient',true).y + 10}); break; } //dijit.popup.close(dijit.byId("colorDialog")); } function letteringMenu(param, select) { if(param == true) { if(select != null) { globalSelectedElement = select; changeControlPanel(select); } var menuElement = "designLettering"; switch(globalPropertiesArray[globalSelectedElement].type) { case 'clipart': menuElement = "designClipart"; break; case 'image': menuElement = "designImageUpload"; break; case 'text': menuElement = "designLettering"; break; } var fadeOut = dojo.fadeOut({ node: "step2", duration: 500, onEnd:function(){ dojo.byId("step2").style.display="none"; switch(menuElement) { case 'designClipart': dojo.byId('designLettering').style.display="none"; dojo.byId('designClipart').style.display="block"; dojo.byId('designImageUpload').style.display="none"; break; case 'designImageUpload': dojo.byId('designClipart').style.display="none"; dojo.byId('designLettering').style.display="none"; dojo.byId('designImageUpload').style.display="block"; break; case 'designLettering': dojo.byId('designClipart').style.display="none"; dojo.byId('designLettering').style.display="block"; dojo.byId('designImageUpload').style.display="none"; break; } //================== dojo.byId("designTheme").style.display="none"; // certain case when the theme moves and someone clicks off the design theme. themeManager.setZ(); //================== dojo.byId("backButton").style.display="none"; dojo.byId("nextButton").style.display="none"; var fadeIn = dojo.fadeIn({node:menuElement,duration:500}); fadeIn.play(); } }); if(!(globalSelectedElement == themeManager.sideThemeElement || globalSelectedElement == themeManager.hoodThemeElement)) { fadeOut.play(); } clipImage(false); } else { var menuElement = "designLettering"; switch(globalPropertiesArray[globalSelectedElement].type) { case 'clipart': menuElement = "designClipart"; break; case 'image': menuElement = "designImageUpload"; break; case 'text': menuElement = "designLettering"; break; } var fadeOut = dojo.fadeOut({ node: menuElement, duration: 500, onEnd:function(){ dojo.byId("step2").style.display="block"; dojo.byId(menuElement).style.display="none"; dojo.byId("backButton").style.display="block"; dojo.byId("nextButton").style.display="block"; currentLettering.clearLettering(); currentLettering.writeLettering(); var fadeIn = dojo.fadeIn({node:"step2",duration:500}); fadeIn.play(); } }); fadeOut.play(); clipImage(true); } } function themeMenu(param,select) { if(param) { if(select != null) { globalSelectedElement = select; } var fadeOut = dojo.fadeOut({ node: "step2", duration: 500, onEnd:function(){ dojo.byId("step2").style.display="none"; dojo.byId("designTheme").style.display="block"; dojo.byId("backButton").style.display="none"; dojo.byId("nextButton").style.display="none"; var fadeIn = dojo.fadeIn({node:"designTheme",duration:500}); fadeIn.play(); } }); fadeOut.play(); clipImage(false); } else { var fadeOut = dojo.fadeOut({ node: "designTheme", duration: 500, onEnd:function(){ dojo.byId("step2").style.display="block"; dojo.byId("designTheme").style.display="none"; dojo.byId("backButton").style.display="block"; dojo.byId("nextButton").style.display="block"; var fadeIn = dojo.fadeIn({node:"step2",duration:500}); fadeIn.play(); } }); fadeOut.play(); clipImage(true); themeManager.setZ(); } } function updateCarColor(colorId,colorValue) { globalCarColor = colorValue; var fadeOut = dojo.fadeOut({ node: "sideBackground", duration: 500, onEnd:function(){ var urlString = "GenerateImage.ashx?type=box&cw="+globalCarWidth+"&ch="+globalCarHeight; urlString += "&color=" + encodeURIComponent(globalCarColor); dojo.byId('sideBackground').setAttribute('src',urlString); var fadeIn = dojo.fadeIn({node:"sideBackground",duration:500}); fadeIn.play(); } }); fadeOut.play(); } function isNumeric(input) { var reg = new RegExp('^[-+]?[0-9]*\.?[0-9]+$'); return reg.test(input); } //this function is accessed by resizehandle.js //also by overload of moveable function setClip(overRideElement) { if(overRideElement != undefined) clipElement = overRideElement; else clipElement = globalSelectedElement; var boxSize = dojo.coords(dojo.byId(clipElement),true); var parentSize = dojo.coords(dojo.byId(globalContainerElement)); parentSize.w = dojo.byId(globalContainerElement).offsetWidth; // fixes a width bug in safari var clipT = 0; var clipR = boxSize.w; var clipB = boxSize.h; var clipL = 0; if(boxSize.l < 1) clipL = Math.abs(boxSize.l); if(boxSize.w + boxSize.l > parentSize.w) clipR = parentSize.w - boxSize.l ; if(boxSize.t < 1) clipT = Math.abs(boxSize.t); if(boxSize.h + boxSize.t > parentSize.h) clipB = parentSize.h - boxSize.t ; dojo.style(dojo.byId(clipElement),"clip", "rect("+clipT+"px, "+clipR+"px, "+clipB+"px, "+clipL+"px)"); } function getCurrentDirection() { switch(globalCurrentStep) { case 2: return 'side'; break; case 3: return 'hood'; break; case 4: return 'top'; break; } } function updatePrice() { if(globalSelectedElement == themeManager.sideThemeElement) { globalPropertiesArray[globalSelectedElement].price = globalSideThemePrice; } if(globalSelectedElement == themeManager.hoodThemeElement) { globalPropertiesArray[globalSelectedElement].price = globalHoodThemePrice; } if(globalSelectedElement != themeManager.sideThemeElement && globalSelectedElement != themeManager.hoodThemeElement) //regular element { switch(globalPropertiesArray[globalSelectedElement].type) { case 'image': globalPropertiesArray[globalSelectedElement].price = globalImageBase * (globalPropertiesArray[globalSelectedElement].measuredHeight/12 * globalPropertiesArray[globalSelectedElement].measuredWidth/12); break; default: var newsqft = (globalPropertiesArray[globalSelectedElement].measuredHeight/12 * globalPropertiesArray[globalSelectedElement].measuredWidth/12); var PricePerSqft = globalVinylM*Math.pow(newsqft,globalVinylB); var basePrice = PricePerSqft*newsqft; var psqft=basePrice; switch(globalPropertiesArray[globalSelectedElement].colorType) { case 'reflective': psqft += basePrice * globalReflectiveModifier; break; case 'specialty': psqft += basePrice * globalSpecialtyModifier; break; case 'fluorescent': psqft += basePrice * globalFluorescentModifier; break; } if(globalPropertiesArray[globalSelectedElement].outline) { switch(globalPropertiesArray[globalSelectedElement].outlineColorType) { case 'reflective': psqft += basePrice * globalReflectiveModifier; break; case 'standard': psqft += basePrice * globalLetteringNextColor; break; case 'specialty': psqft += basePrice * globalSpecialtyModifier; break; case 'fluorescent': psqft += basePrice * globalFluorescentModifier; break; } } if(globalPropertiesArray[globalSelectedElement].shadow) { switch(globalPropertiesArray[globalSelectedElement].shadowColorType) { case 'reflective': psqft += basePrice * globalReflectiveModifier; break; case 'standard': psqft += basePrice * globalLetteringNextColor; break; case 'specialty': psqft += basePrice * globalSpecialtyModifier; break; case 'fluorescent': psqft += basePrice * globalFluorescentModifier; break; } } if(globalPropertiesArray[globalSelectedElement].outlineTwo) { switch(globalPropertiesArray[globalSelectedElement].outlineTwoColorType) { case 'reflective': psqft += basePrice * globalReflectiveModifier; break; case 'standard': psqft += basePrice * globalLetteringNextColor; break; case 'specialty': psqft += basePrice * globalSpecialtyModifier; break; case 'fluorescent': psqft += basePrice * globalFluorescentModifier; break; } } if(globalSelectedElement != themeManager.sideThemeElement && globalSelectedElement != themeManager.hoodThemeElement && globalPropertiesArray[globalSelectedElement].location == "side") globalPropertiesArray[globalSelectedElement].price = psqft/2; else globalPropertiesArray[globalSelectedElement].price = psqft; break; } } calculateGlobalPrice(); dojo.byId('priceBox').innerHTML = "$"+currencyFormatted(globalPrice); } function calculateGlobalPrice() { globalPrice = 0; dojo.query(".imageContainer").forEach(function(n){ if(n.style.display != "none") { if(n.id != themeManager.sideThemeElement && n.id != themeManager.hoodThemeElement && globalPropertiesArray[n.id].location == "side") { if (isNumeric(globalPropertiesArray[n.id].price)) { globalPrice += (globalPropertiesArray[n.id].price*2); //regular side items 2x for both sides } } else { if (isNumeric(globalPropertiesArray[n.id].price)) { globalPrice += globalPropertiesArray[n.id].price; } } } }); } function currencyFormatted(amount) { var i = parseFloat(amount); if(isNaN(i)) { i = 0.00; } var minus = ''; if(i < 0) { minus = '-'; } i = Math.abs(i); i = parseInt((i + .005) * 100); i = i / 100; s = new String(i); if(s.indexOf('.') < 0) { s += '.00'; } if(s.indexOf('.') == (s.length - 2)) { s += '0'; } s = minus + s; return s; } function showHover(mover) { dojo.byId(mover.target.parentNode).style.padding='0px'; dojo.byId(mover.target.parentNode).style.cursor ='move'; dojo.byId(mover.target.parentNode).style.border='1px dashed #CCCCCC'; /* var blackToWhite = dojo.animateProperty( { node: mover.target.parentNode,duration: 500, properties: { borderColor: { start: "black", end: "white" } }, onEnd:function(){ dojo.byId(mover.target.parentNode).style.border='1px solid #000000'; var whiteToBlack = dojo.animateProperty( { node: mover.target.parentNode,duration: 200, properties: { borderColor: { start: "white", end: "black" } } } ); whiteToBlack.play(); dojo.byId(mover.target.parentNode).style.border='1px dashed #FFFFFF'; } }); blackToWhite.play(); */ } function hideHover(mover) { dojo.byId(mover.target.parentNode).style.border='none'; dojo.byId(mover.target.parentNode).style.padding='1px 1px 1px 1px'; dojo.byId(mover.target.parentNode).style.cursor ='default'; } function clipImage(clip) { if(clip) { dojo.byId("mask").style.zIndex = 999; dojo.query(".dojoxResizeHandle*").style("display","none"); } else { dojo.byId("mask").style.zIndex = 2; } } function setZIndex() { globalZList.forEach(function(n){ var targetNode = dojo.byId(n); targetNode.style.zIndex = globalZList.indexOf(n)+3; //added one to keep it out of the way of the mask }); } function decreaseZIndex() { var targetNode = dojo.byId(globalSelectedElement); currentZ = parseInt(dojo.style(targetNode,"zIndex"))-3; globalZList.removeAt(currentZ); globalZList.insert(currentZ-1,globalSelectedElement); setZIndex(); } function increaseZIndex() { var targetNode = dojo.byId(globalSelectedElement); currentZ = parseInt(dojo.style(targetNode,"zIndex"))-3; globalZList.removeAt(currentZ); globalZList.insert(currentZ+1,globalSelectedElement); setZIndex(); } function frontZIndex() { var targetNode = dojo.byId(globalSelectedElement); currentZ = parseInt(dojo.style(targetNode,"zIndex"))-3; globalZList.removeAt(currentZ); globalZList.add(globalSelectedElement); setZIndex(); } function backZIndex() { var targetNode = dojo.byId(globalSelectedElement); currentZ = parseInt(dojo.style(targetNode,"zIndex"))-3; globalZList.removeAt(currentZ); globalZList.insert(0,globalSelectedElement); setZIndex(); } function deleteObject(delObject) { if(delObject != null) { globalSelectedElement = delObject; } var targetNode = dojo.byId(globalSelectedElement); globalPropertiesArray[globalSelectedElement].active = false; if(!(globalSelectedElement == themeManager.sideThemeElement || globalSelectedElement == themeManager.hoodThemeElement)) { currentZ = parseInt(dojo.style(targetNode,"zIndex"))-3; globalZList.removeAt(currentZ); setZIndex(); } else { themeMenu(false); } dojo.style(targetNode,"display","none"); dojo.query(".dojoxResizeHandle*").style("display","none"); //clear drag handles on load letteringMenu(globalSelectedElement,false); if(globalZList.item(0) != undefined) { globalSelectedElement = globalZList.item(0); } else { //changeControlPanel("nothing"); } currentLettering.clearLettering(); currentLettering.writeLettering(); updatePrice(); } function editManualSize() { dijit.byId('changeSizeDialog').show(); dojo.byId('changeWidth').value = globalPropertiesArray[globalSelectedElement].measuredWidth; dojo.byId('changeHeight').value = globalPropertiesArray[globalSelectedElement].measuredHeight; } function updateNewWidth() { globalPropertiesArray[globalSelectedElement].useCustomSize = true; currentRatio = globalPropertiesArray[globalSelectedElement].measuredWidth / globalPropertiesArray[globalSelectedElement].measuredHeight; if (!isNumeric(dojo.byId('changeHeight').value)) { alert('Please enter a number'); return; } if(dojo.byId('changeHeight').value <= 0) { dojo.byId('changeHeight').value = 4; } dojo.byId('changeWidth').value = Math.round((dojo.byId('changeHeight').value * currentRatio)*100)/100; globalPropertiesArray[globalSelectedElement].measuredWidth = dojo.byId('changeWidth').value; globalPropertiesArray[globalSelectedElement].measuredHeight = dojo.byId('changeHeight').value; updatePrice(); updateSizeDisplay(); } function updateNewHeight() { globalPropertiesArray[globalSelectedElement].useCustomSize = true; currentRatio = globalPropertiesArray[globalSelectedElement].measuredWidth / globalPropertiesArray[globalSelectedElement].measuredHeight; if (!isNumeric(dojo.byId('changeWidth').value)) { alert('Please enter a number'); return; } if(dojo.byId('changeWidth').value <= 0) { dojo.byId('changeWidth').value = 4; } dojo.byId('changeHeight').value = Math.round((dojo.byId('changeWidth').value / currentRatio)*100)/100; globalPropertiesArray[globalSelectedElement].measuredWidth = dojo.byId('changeWidth').value; globalPropertiesArray[globalSelectedElement].measuredHeight = dojo.byId('changeHeight').value; updatePrice(); updateSizeDisplay(); } function resetSize() { globalPropertiesArray[globalSelectedElement].useCustomSize = false; generatePreview(); dijit.byId('changeSizeDialog').hide(); } function updateSizeDisplay(currentElement) { var useElement; if(currentElement != undefined) { useElement = currentElement; } else { useElement = globalSelectedElement; } if(useElement == themeManager.sideThemeElement || useElement == themeManager.hoodThemeElement) { dojo.byId('themeSizeX').innerHTML = globalPropertiesArray[useElement].measuredWidth; dojo.byId('themeSizeY').innerHTML = globalPropertiesArray[useElement].measuredHeight; } if(useElement != themeManager.sideThemeElement && useElement != themeManager.hoodThemeElement) //regular element { switch(globalPropertiesArray[useElement].type) { case 'image': dojo.byId('imageSizeX').innerHTML = globalPropertiesArray[useElement].measuredWidth; dojo.byId('imageSizeY').innerHTML = globalPropertiesArray[useElement].measuredHeight; break; case 'clipart': dojo.byId('clipartSizeX').innerHTML = globalPropertiesArray[useElement].measuredWidth; dojo.byId('clipartSizeY').innerHTML = globalPropertiesArray[useElement].measuredHeight; break; case 'text': dojo.byId('letteringWidth').innerHTML = globalPropertiesArray[useElement].measuredWidth; dojo.byId('letteringHeight').innerHTML = globalPropertiesArray[useElement].measuredHeight; break; } } } function calculateSize(param, currentElement) { var newX; var newY; var useElement; if(currentElement != undefined) { useElement = currentElement; } else { useElement = globalSelectedElement; } if(useElement == themeManager.sideThemeElement) // element is the side theme { switch(globalSideMeasurement.direction) { case "x": newX = ((globalPropertiesArray[useElement].width/ globalSideMask.w) * globalSideMeasurement.defaultSize) / globalSideMeasurement.relativeFill; newY = newX / (globalPropertiesArray[useElement].width/globalPropertiesArray[useElement].height); break; case "y": //console.debug(globalPropertiesArray[globalSelectedElement].height + "/" + globalSideMask.h + "*" + globalSideMeasurement.defaultSize + "/" + globalSideMeasurement.relativeFill); newY = ((globalPropertiesArray[useElement].height/ globalSideMask.h) * globalSideMeasurement.defaultSize) / globalSideMeasurement.relativeFill; newX = newY * (globalPropertiesArray[useElement].width/globalPropertiesArray[useElement].height); break; } globalPropertiesArray[useElement].measuredHeight = Math.round(newY); globalPropertiesArray[useElement].measuredWidth = Math.round(newX); if(globalPropertiesArray[useElement].measuredHeight > 52) { alert("Side themes are limited to 52inches tall to receive standard pricing, if you want greater than 52 tall please click the half wrap link above and choose your theme and size"); globalPropertiesArray[useElement].measuredHeight = 52; } if(globalPropertiesArray[useElement].measuredWidth > 192) { alert("Side themes are limited to 192inches (16ft) long to receive standard pricing, if you want longer than this please click the half wrap link above and choose your theme and size"); globalPropertiesArray[useElement].measuredWidth = 192; } updateSizeDisplay(); } if(useElement == themeManager.hoodThemeElement) // element is the hood theme { switch(globalHoodMeasurement.direction) { case "x": newX = ((globalPropertiesArray[useElement].width/ globalHoodMask.w) * globalHoodMeasurement.defaultSize) / globalHoodMeasurement.relativeFill; newY = newX / (globalPropertiesArray[useElement].width/globalPropertiesArray[useElement].height); break; case "y": //console.debug(globalPropertiesArray[globalSelectedElement].height + "/" + globalSideMask.h + "*" + globalSideMeasurement.defaultSize + "/" + globalSideMeasurement.relativeFill); newY = ((globalPropertiesArray[useElement].height/ globalHoodMask.h) * globalHoodMeasurement.defaultSize) / globalHoodMeasurement.relativeFill; newX = newY * (globalPropertiesArray[useElement].width/globalPropertiesArray[useElement].height); break; } globalPropertiesArray[useElement].measuredHeight = Math.round(newY); globalPropertiesArray[useElement].measuredWidth = Math.round(newX); updateSizeDisplay(); } if(useElement != themeManager.sideThemeElement && useElement != themeManager.hoodThemeElement) //regular element { var defaultSize, relativeFill, maskWidth, maskHeight, direction; switch(globalPropertiesArray[useElement].location) { case 'side': defaultSize = globalSideMeasurement.defaultSize; relativeFill = globalSideMeasurement.relativeFill; maskWidth = globalSideMask.w; maskHeight = globalSideMask.h; direction = globalSideMeasurement.direction; break; case 'top': defaultSize = globalTopMeasurement.defaultSize; relativeFill = globalTopMeasurement.relativeFill; maskWidth = globalTopMask.w; maskHeight = globalTopMask.h; direction = globalTopMeasurement.direction; break; case 'hood': defaultSize = globalHoodMeasurement.defaultSize; relativeFill = globalHoodMeasurement.relativeFill; maskWidth = globalHoodMask.w; maskHeight = globalHoodMask.h; direction = globalHoodMeasurement.direction; break; } switch(globalPropertiesArray[useElement].type) { case 'text': param += "&sr=true"; dojo.xhrGet({ url: param, load: function(responseObject, ioArgs){ switch(direction) { case "x": newX = ((responseObject.w/ maskWidth) * defaultSize) / relativeFill; newY = newX / (responseObject.w/responseObject.h); break; case "y": newY = ((responseObject.h/ maskHeight) * defaultSize) / relativeFill; newX = newY * (responseObject.w/responseObject.h); break; } if(globalPropertiesArray[useElement].useCustomSize == false) { globalPropertiesArray[useElement].measuredHeight = Math.round(newY); globalPropertiesArray[useElement].measuredWidth = Math.round(newX); } updateSizeDisplay(); updatePrice(); return responseObject; }, error: function(response, ioArgs){ return response; }, handleAs: "json-comment-filtered" }); break; default: switch(direction) { case "x": newX = ((globalPropertiesArray[useElement].width/ maskWidth) * defaultSize) / relativeFill; newY = newX / (globalPropertiesArray[useElement].width/globalPropertiesArray[useElement].height); break; case "y": newY = ((globalPropertiesArray[useElement].height/ maskHeight) * defaultSize) / relativeFill; newX = newY * (globalPropertiesArray[useElement].width/globalPropertiesArray[useElement].height); break; } if(globalPropertiesArray[useElement].useCustomSize == false) { globalPropertiesArray[useElement].measuredHeight = Math.round(newY); globalPropertiesArray[useElement].measuredWidth = Math.round(newX); } updateSizeDisplay(); updatePrice(); break; } } } function applyTheme() { if(globalCurrentStep == 2) { if(dojo.byId('themeList').value == "none") { themeManager.removeTheme(); updatePrice(); } else { themeManager.enableTheme(dojo.byId('themeList').value); updatePrice(); } } else { if(dojo.byId('hoodThemeList').value == "none") { themeManager.removeTheme(); updatePrice(); } else { themeManager.enableTheme(dojo.byId('hoodThemeList').value); updatePrice(); } } } function userNewText(text) { if(text == "" || text == undefined) { alert("You must enter text"); } else { newText(text); letteringMenu(true); dijit.popup.close(dijit.byId('newTextDialog')); } } function newText(text) { var newImageName = ""; var counter = 0; dojo.query(".imageContainer").forEach(function(n){counter+=1;}); //count elements var newElementName = "imagebox" + (counter+1); var newImageId = "image" + (counter+1); globalPropertiesArray[newElementName] = new globalProperties(); //initialize properties class globalPropertiesArray[newElementName].text = text; globalPropertiesArray[newElementName].height = 175; globalPropertiesArray[newElementName].width = 175; globalPropertiesArray[newElementName].t = 30; globalPropertiesArray[newElementName].l = 30; globalPropertiesArray[newElementName].location = getCurrentDirection(); var imageBox = document.createElement('div'); dojo.byId("contentholder").appendChild(imageBox); imageBox.style.width = 175 + "px"; imageBox.style.height = 175 + "px"; imageBox.style.position = "absolute"; imageBox.style.left = "30px"; //change this to correspond to position of mouse imageBox.style.top = "30px"; //same here imageBox.style.padding = "1px 1px 1px 1px"; imageBox.style.overflow = "hidden"; imageBox.setAttribute('id',newElementName); dojo.addClass(imageBox, "imageContainer"); var newImage = document.createElement('img'); newImage.setAttribute('src',newImageName); newImage.style.height = "100%"; newImage.style.width = "100%"; newImage.setAttribute('height',"100%"); newImage.setAttribute('width',"100%"); newImage.setAttribute('id',newImageId); dojo.byId(newElementName).appendChild(newImage); var moveable = new dojo.dnd.Moveable(imageBox); //create instances of handles var handle = document.createElement('div'); dojo.byId("contentholder").appendChild(handle); new dojox.layout.ResizeHandle({targetId: newElementName, activeResizing: true,animateSizing: false, direction: "br"},handle); var handle = document.createElement('div'); dojo.byId("contentholder").appendChild(handle); new dojox.layout.ResizeHandle({targetId: newElementName, activeResizing: true,animateSizing: false, direction: "r"},handle); var handle = document.createElement('div'); dojo.byId("contentholder").appendChild(handle); new dojox.layout.ResizeHandle({targetId: newElementName, activeResizing: true,animateSizing: false, direction: "tr"},handle); var handle = document.createElement('div'); dojo.byId("contentholder").appendChild(handle); new dojox.layout.ResizeHandle({targetId: newElementName, activeResizing: true,animateSizing: false, direction: "t"},handle); var handle = document.createElement('div'); dojo.byId("contentholder").appendChild(handle); new dojox.layout.ResizeHandle({targetId: newElementName, activeResizing: true,animateSizing: false, direction: "tl"},handle); var handle = document.createElement('div'); dojo.byId("contentholder").appendChild(handle); new dojox.layout.ResizeHandle({targetId: newElementName, activeResizing: true,animateSizing: false, direction: "l"},handle); var handle = document.createElement('div'); dojo.byId("contentholder").appendChild(handle); new dojox.layout.ResizeHandle({targetId: newElementName, activeResizing: true,animateSizing: false, direction: "bl"},handle); var handle = document.createElement('div'); dojo.byId("contentholder").appendChild(handle); new dojox.layout.ResizeHandle({targetId: newElementName, activeResizing: true,animateSizing: false, direction: "b"},handle); //connect mouseover effect dojo.connect(dojo.byId(newImageId), "onmouseover", function(mover){showHover(mover);}); dojo.connect(dojo.byId(newImageId), "onmouseout", function(mover){hideHover(mover); }); // bind menu to new element dijit.byId('submenu1').bindDomNode(newElementName); //update Z arrayList globalZList.add(newElementName); setZIndex(); currentZ = parseInt(dojo.style(dojo.byId(newElementName),"zIndex")); globalSelectedElement = newElementName; generatePreview('resetbounds'); changeControlPanel(newElementName); } function newClipart(filename,changeColor,isTheme) { var newImageName = ""; var clipartIsTheme = false; if(isTheme != null && isTheme == true) { clipartIsTheme = true; themeSizes = themeManager.getSizes(filename); } var counter = 0; dojo.query(".imageContainer").forEach(function(n){counter+=1;}); //count elements var newElementName = "imagebox" + (counter+1); var newImageId = "image" + (counter+1); globalPropertiesArray[newElementName] = new globalProperties(); //initialize properties class globalPropertiesArray[newElementName].filename = filename; globalPropertiesArray[newElementName].type = "clipart"; globalPropertiesArray[newElementName].location = getCurrentDirection(); if(clipartIsTheme) { globalPropertiesArray[newElementName].t = themeSizes.t; globalPropertiesArray[newElementName].l = themeSizes.l; } else { globalPropertiesArray[newElementName].t = 30; globalPropertiesArray[newElementName].l = 30; } if(changeColor=="True") globalPropertiesArray[newElementName].allowColorChange = true; else globalPropertiesArray[newElementName].allowColorChange = false; var imageBox = document.createElement('div'); dojo.byId("contentholder").appendChild(imageBox); if(clipartIsTheme) { imageBox.style.width = themeSizes.w+"px"; imageBox.style.height = themeSizes.h+"px"; imageBox.style.left = themeSizes.l+"px"; imageBox.style.top = themeSizes.t+"px"; } else { imageBox.style.width = "60px"; imageBox.style.height = "60px"; imageBox.style.left = "30px"; imageBox.style.top = "30px"; } imageBox.style.position = "absolute"; imageBox.style.padding = "1px 1px 1px 1px"; imageBox.style.overflow = "hidden"; imageBox.setAttribute('id',newElementName); dojo.addClass(imageBox, "imageContainer"); var newImage = document.createElement('img'); newImage.setAttribute('src',newImageName); newImage.style.height = "100%"; newImage.style.width = "100%"; newImage.setAttribute('height',"100%"); newImage.setAttribute('width',"100%"); newImage.setAttribute('id',newImageId); dojo.byId(newElementName).appendChild(newImage); var moveable = new dojo.dnd.Moveable(imageBox); //create instances of handles var handle = document.createElement('div'); dojo.byId("contentholder").appendChild(handle); new dojox.layout.ResizeHandle({targetId: newElementName, activeResizing: true,animateSizing: false, direction: "br"},handle); var handle = document.createElement('div'); dojo.byId("contentholder").appendChild(handle); new dojox.layout.ResizeHandle({targetId: newElementName, activeResizing: true,animateSizing: false, direction: "r"},handle); var handle = document.createElement('div'); dojo.byId("contentholder").appendChild(handle); new dojox.layout.ResizeHandle({targetId: newElementName, activeResizing: true,animateSizing: false, direction: "tr"},handle); var handle = document.createElement('div'); dojo.byId("contentholder").appendChild(handle); new dojox.layout.ResizeHandle({targetId: newElementName, activeResizing: true,animateSizing: false, direction: "t"},handle); var handle = document.createElement('div'); dojo.byId("contentholder").appendChild(handle); new dojox.layout.ResizeHandle({targetId: newElementName, activeResizing: true,animateSizing: false, direction: "tl"},handle); var handle = document.createElement('div'); dojo.byId("contentholder").appendChild(handle); new dojox.layout.ResizeHandle({targetId: newElementName, activeResizing: true,animateSizing: false, direction: "l"},handle); var handle = document.createElement('div'); dojo.byId("contentholder").appendChild(handle); new dojox.layout.ResizeHandle({targetId: newElementName, activeResizing: true,animateSizing: false, direction: "bl"},handle); var handle = document.createElement('div'); dojo.byId("contentholder").appendChild(handle); new dojox.layout.ResizeHandle({targetId: newElementName, activeResizing: true,animateSizing: false, direction: "b"},handle); //connect mouseover effect dojo.connect(dojo.byId(newImageId), "onmouseover", function(mover){showHover(mover);}); dojo.connect(dojo.byId(newImageId), "onmouseout", function(mover){hideHover(mover); }); // bind menu to new element dijit.byId('submenu1').bindDomNode(newElementName); //update Z arrayList if(!clipartIsTheme) { globalZList.add(newElementName); } setZIndex(); currentZ = parseInt(dojo.style(dojo.byId(newElementName),"zIndex")); globalSelectedElement = newElementName; if(clipartIsTheme) generatePreview(); else generatePreview('resetbounds'); if(!clipartIsTheme) { changeControlPanel(newElementName); currentLettering.clearLettering(); currentLettering.writeLettering(); } } function newImage(filename) { var newImageName = ""; var counter = 0; dojo.query(".imageContainer").forEach(function(n){counter+=1;}); //count elements var newElementName = "imagebox" + (counter+1); var newImageId = "image" + (counter+1); globalPropertiesArray[newElementName] = new globalProperties(); //initialize properties class globalPropertiesArray[newElementName].filename = filename; globalPropertiesArray[newElementName].type = "image"; globalPropertiesArray[newElementName].t = 30; globalPropertiesArray[newElementName].l = 30; globalPropertiesArray[newElementName].location = getCurrentDirection(); var imageBox = document.createElement('div'); dojo.byId("contentholder").appendChild(imageBox); imageBox.style.width = "60px"; imageBox.style.height = "60px"; imageBox.style.position = "absolute"; imageBox.style.left = "30px"; //change this to correspond to position of mouse imageBox.style.top = "30px"; //same here imageBox.style.padding = "1px 1px 1px 1px"; imageBox.style.overflow = "hidden"; imageBox.setAttribute('id',newElementName); dojo.addClass(imageBox, "imageContainer"); var newImage = document.createElement('img'); newImage.setAttribute('src',newImageName); newImage.style.height = "100%"; newImage.style.width = "100%"; newImage.setAttribute('height',"100%"); newImage.setAttribute('width',"100%"); newImage.setAttribute('id',newImageId); dojo.byId(newElementName).appendChild(newImage); var moveable = new dojo.dnd.Moveable(imageBox); //create instances of handles var handle = document.createElement('div'); dojo.byId("contentholder").appendChild(handle); new dojox.layout.ResizeHandle({targetId: newElementName, activeResizing: true,animateSizing: false, direction: "br"},handle); var handle = document.createElement('div'); dojo.byId("contentholder").appendChild(handle); new dojox.layout.ResizeHandle({targetId: newElementName, activeResizing: true,animateSizing: false, direction: "r"},handle); var handle = document.createElement('div'); dojo.byId("contentholder").appendChild(handle); new dojox.layout.ResizeHandle({targetId: newElementName, activeResizing: true,animateSizing: false, direction: "tr"},handle); var handle = document.createElement('div'); dojo.byId("contentholder").appendChild(handle); new dojox.layout.ResizeHandle({targetId: newElementName, activeResizing: true,animateSizing: false, direction: "t"},handle); var handle = document.createElement('div'); dojo.byId("contentholder").appendChild(handle); new dojox.layout.ResizeHandle({targetId: newElementName, activeResizing: true,animateSizing: false, direction: "tl"},handle); var handle = document.createElement('div'); dojo.byId("contentholder").appendChild(handle); new dojox.layout.ResizeHandle({targetId: newElementName, activeResizing: true,animateSizing: false, direction: "l"},handle); var handle = document.createElement('div'); dojo.byId("contentholder").appendChild(handle); new dojox.layout.ResizeHandle({targetId: newElementName, activeResizing: true,animateSizing: false, direction: "bl"},handle); var handle = document.createElement('div'); dojo.byId("contentholder").appendChild(handle); new dojox.layout.ResizeHandle({targetId: newElementName, activeResizing: true,animateSizing: false, direction: "b"},handle); //connect mouseover effect dojo.connect(dojo.byId(newImageId), "onmouseover", function(mover){showHover(mover);}); dojo.connect(dojo.byId(newImageId), "onmouseout", function(mover){hideHover(mover); }); // bind menu to new element dijit.byId('submenu1').bindDomNode(newElementName); //update Z arrayList globalZList.add(newElementName); setZIndex(); currentZ = parseInt(dojo.style(dojo.byId(newElementName),"zIndex")); globalSelectedElement = newElementName; generatePreview('resetbounds'); changeControlPanel(newElementName); dijit.popup.close(dijit.byId('uploadDialog')); currentLettering.clearLettering(); currentLettering.writeLettering(); } function pasteObject() { if(globalClipBoard != undefined ) { var targetNode = dojo.byId(globalClipBoard); //get clipboard element if(targetNode.style.display == "none") { dojo.style(globalClipBoard,"display","block"); var copyElementCoords = dojo.coords(targetNode,true); //get copied element coords dojo.style(globalClipBoard,"display","none"); } else { var copyElementCoords = dojo.coords(targetNode,true); //get copied element coords } var newImageName = ""; dojo.query("#"+globalClipBoard + " img").forEach(function(n){newImageName=n.src}); var counter = 0; dojo.query(".imageContainer").forEach(function(n){counter+=1;}); //count elements var newElementName = "imagebox" + (counter+1); var newImageId = "image" + (counter+1); globalPropertiesArray[newElementName] = new globalProperties(); //initialize properties class globalPropertiesArray[newElementName].text = globalPropertiesArray[globalClipBoard].text; globalPropertiesArray[newElementName].colorValue = globalPropertiesArray[globalClipBoard].colorValue; globalPropertiesArray[newElementName].colorId = globalPropertiesArray[globalClipBoard].colorId; globalPropertiesArray[newElementName].colorType = globalPropertiesArray[globalClipBoard].colorType; globalPropertiesArray[newElementName].height = globalPropertiesArray[globalClipBoard].height; globalPropertiesArray[newElementName].width = globalPropertiesArray[globalClipBoard].width; globalPropertiesArray[newElementName].font = globalPropertiesArray[globalClipBoard].font; globalPropertiesArray[newElementName].scale = globalPropertiesArray[globalClipBoard].scale; globalPropertiesArray[newElementName].ratio = globalPropertiesArray[globalClipBoard].ratio; globalPropertiesArray[newElementName].bold = globalPropertiesArray[globalClipBoard].bold; globalPropertiesArray[newElementName].italic = globalPropertiesArray[globalClipBoard].italic; globalPropertiesArray[newElementName].shadow = globalPropertiesArray[globalClipBoard].shadow; globalPropertiesArray[newElementName].shadowColorValue = globalPropertiesArray[globalClipBoard].shadowColorValue; globalPropertiesArray[newElementName].shadowColorId = globalPropertiesArray[globalClipBoard].shadowColorId; globalPropertiesArray[newElementName].shadowColorType = globalPropertiesArray[globalClipBoard].shadowColorType; globalPropertiesArray[newElementName].outline = globalPropertiesArray[globalClipBoard].outline; globalPropertiesArray[newElementName].outlineColorValue = globalPropertiesArray[globalClipBoard].outlineColorValue; globalPropertiesArray[newElementName].outlineColorId = globalPropertiesArray[globalClipBoard].outlineColorId; globalPropertiesArray[newElementName].outlineColorType = globalPropertiesArray[globalClipBoard].outlineColorType; globalPropertiesArray[newElementName].outlineTwo = globalPropertiesArray[globalClipBoard].outlineTwo; globalPropertiesArray[newElementName].outlineTwoColorValue = globalPropertiesArray[globalClipBoard].outlineTwoColorValue; globalPropertiesArray[newElementName].outlineTwoColorId = globalPropertiesArray[globalClipBoard].outlineTwoColorId; globalPropertiesArray[newElementName].outlineTwoColorType = globalPropertiesArray[globalClipBoard].outlineTwoColorType; globalPropertiesArray[newElementName].textAlign = globalPropertiesArray[globalClipBoard].textAlign; globalPropertiesArray[newElementName].filename = globalPropertiesArray[globalClipBoard].filename; globalPropertiesArray[newElementName].type = globalPropertiesArray[globalClipBoard].type; globalPropertiesArray[newElementName].flipVertical = globalPropertiesArray[globalClipBoard].flipVertical; globalPropertiesArray[newElementName].flipHorizontal = globalPropertiesArray[globalClipBoard].flipHorizontal; globalPropertiesArray[newElementName].allowColorChange = globalPropertiesArray[globalClipBoard].allowColorChange; globalPropertiesArray[newElementName].location = getCurrentDirection(); globalPropertiesArray[newElementName].useCustomSize = globalPropertiesArray[globalClipBoard].useCustomSize; globalPropertiesArray[newElementName].price = globalPropertiesArray[globalClipBoard].price; globalPropertiesArray[newElementName].gradient = globalPropertiesArray[globalClipBoard].gradient; globalPropertiesArray[newElementName].gradientTopColorValue = globalPropertiesArray[globalClipBoard].gradientTopColorValue; globalPropertiesArray[newElementName].gradientTopColorId = globalPropertiesArray[globalClipBoard].gradientTopColorId; globalPropertiesArray[newElementName].gradientBottomColorValue = globalPropertiesArray[globalClipBoard].gradientBottomColorValue; globalPropertiesArray[newElementName].gradientBottomColorId = globalPropertiesArray[globalClipBoard].gradientBottomColorId; globalPropertiesArray[newElementName].measuredHeight = globalPropertiesArray[globalClipBoard].measuredHeight; globalPropertiesArray[newElementName].measuredWidth = globalPropertiesArray[globalClipBoard].measuredWidth; globalPropertiesArray[newElementName].t = 30; globalPropertiesArray[newElementName].l = 30; var imageBox = document.createElement('div'); dojo.byId("contentholder").appendChild(imageBox); imageBox.style.width = copyElementCoords.w-2 + "px"; imageBox.style.height = copyElementCoords.h-2 + "px"; imageBox.style.position = "absolute"; imageBox.style.left = "30px"; //change this to correspond to position of mouse imageBox.style.top = "30px"; //same here imageBox.style.padding = "1px 1px 1px 1px"; imageBox.style.overflow = "hidden"; imageBox.setAttribute('id',newElementName); dojo.addClass(imageBox, "imageContainer"); var newImage = document.createElement('img'); newImage.setAttribute('src',newImageName); newImage.style.height = "100%"; newImage.style.width = "100%"; newImage.setAttribute('height',"100%"); newImage.setAttribute('width',"100%"); newImage.setAttribute('id',newImageId); dojo.byId(newElementName).appendChild(newImage); var moveable = new dojo.dnd.Moveable(imageBox); //create instances of handles var handle = document.createElement('div'); dojo.byId("contentholder").appendChild(handle); new dojox.layout.ResizeHandle({targetId: newElementName, activeResizing: true,animateSizing: false, direction: "br"},handle); var handle = document.createElement('div'); dojo.byId("contentholder").appendChild(handle); new dojox.layout.ResizeHandle({targetId: newElementName, activeResizing: true,animateSizing: false, direction: "r"},handle); var handle = document.createElement('div'); dojo.byId("contentholder").appendChild(handle); new dojox.layout.ResizeHandle({targetId: newElementName, activeResizing: true,animateSizing: false, direction: "tr"},handle); var handle = document.createElement('div'); dojo.byId("contentholder").appendChild(handle); new dojox.layout.ResizeHandle({targetId: newElementName, activeResizing: true,animateSizing: false, direction: "t"},handle); var handle = document.createElement('div'); dojo.byId("contentholder").appendChild(handle); new dojox.layout.ResizeHandle({targetId: newElementName, activeResizing: true,animateSizing: false, direction: "tl"},handle); var handle = document.createElement('div'); dojo.byId("contentholder").appendChild(handle); new dojox.layout.ResizeHandle({targetId: newElementName, activeResizing: true,animateSizing: false, direction: "l"},handle); var handle = document.createElement('div'); dojo.byId("contentholder").appendChild(handle); new dojox.layout.ResizeHandle({targetId: newElementName, activeResizing: true,animateSizing: false, direction: "bl"},handle); var handle = document.createElement('div'); dojo.byId("contentholder").appendChild(handle); new dojox.layout.ResizeHandle({targetId: newElementName, activeResizing: true,animateSizing: false, direction: "b"},handle); //connect mouseover effect dojo.connect(dojo.byId(newImageId), "onmouseover", function(mover){showHover(mover);}); dojo.connect(dojo.byId(newImageId), "onmouseout", function(mover){hideHover(mover); }); // bind menu to new element dijit.byId('submenu1').bindDomNode(newElementName); //update Z arrayList globalZList.add(newElementName); setZIndex(); currentZ = parseInt(dojo.style(dojo.byId(newElementName),"zIndex")); globalSelectedElement = newElementName; changeControlPanel(globalSelectedElement); updatePrice(); globalEventStack.push({operation: "paste", element: newElementName, currentZ: currentZ}); letteringMenu(true); } } function copyObject() { globalClipBoard = globalSelectedElement; } /******************end event section **************/ function changeControlPanel(passedId) { globalSelectedElement = passedId; if(globalPropertiesArray[passedId] == undefined) { /* dojo.byId("intializeControls").style.display = "block"; dojo.byId("imageControls").style.display = "none"; dojo.byId("clipartControls").style.display = "none"; dojo.byId("textControls").style.display = "none"; */ } else { switch(globalPropertiesArray[passedId].type) { case "text": dojo.byId('textInput').value = globalPropertiesArray[passedId].text; letteringMenu(true); var objList = dojo.byId(fontListId); for(i=0;i< objList.options.length;i++) { if(objList.options[i].value==globalPropertiesArray[passedId].font) objList.selectedIndex = i; } if(globalPropertiesArray[passedId].bold) dijit.byId('bold').setAttribute('checked',true); else dijit.byId('bold').setAttribute('checked',false); if(globalPropertiesArray[passedId].italic) dijit.byId('italic').setAttribute('checked',true); else dijit.byId('italic').setAttribute('checked',false); if(globalPropertiesArray[passedId].shadow) dijit.byId('shadow').setAttribute('checked',true); else dijit.byId('shadow').setAttribute('checked',false); if(globalPropertiesArray[passedId].outline) dijit.byId('outline').setAttribute('checked',true); else dijit.byId('outline').setAttribute('checked',false); if(globalPropertiesArray[passedId].outlineTwo) dijit.byId('outlinetwo').setAttribute('checked',true); else dijit.byId('outlinetwo').setAttribute('checked',false); if(globalPropertiesArray[passedId].gradient) dijit.byId('gradient').setAttribute('checked',true); else dijit.byId('gradient').setAttribute('checked',false); updateSizeDisplay(); break; case "image": letteringMenu(true); break; case "clipart": letteringMenu(true); if(globalPropertiesArray[passedId].flipHorizontal) dijit.byId("fliphorizontal").setAttribute('checked',true); else dijit.byId("fliphorizontal").setAttribute('checked',false); if(globalPropertiesArray[passedId].flipVertical) dijit.byId("flipvertical").setAttribute('checked',true); else dijit.byId("flipvertical").setAttribute('checked',false); break; } } } function getMaxHeight() { var boxSize = dojo.coords(dojo.byId(globalSelectedElement),true); var parentSize = dojo.coords(dojo.byId(globalContainerElement)); return Math.round(parentSize.h-boxSize.t); } function getMaxWidth() { var boxSize = dojo.coords(dojo.byId(globalSelectedElement),true); var parentSize = dojo.coords(dojo.byId(globalContainerElement)); return Math.round(parentSize.w-boxSize.l); } function generatePreview(parameters) { var localUseElement = globalSelectedElement; globalTypeList.removeAt(0); globalTypeList.forEach(function(n){ clearTimeout(n); }); globalTypeList.clear(); maxHeight = getMaxHeight(); maxWidth = getMaxWidth(); var boxSize = dojo.coords(dojo.byId(localUseElement),true); //magic number of the day 2 <---! //dotted line addes 1pixel padding to image //so we must offset for this or image will grow in size currentWidth = boxSize.w-2; currentHeight = boxSize.h-2; //currentWidth = Math.round(currentWidth); //currentHeight = Math.round(currentHeight); var scale = 1; var urlString = "GenerateImage.ashx?type="+globalPropertiesArray[localUseElement].type; urlString += "&mh="+maxHeight+"&mw="+maxWidth; switch(parameters) { case 'resetbounds': urlString += "&rb=true"; globalPropertiesArray[localUseElement].scale = 1; globalScaleDirection = 'corner'; globalResetRatio = true; break; case 'resetboundswithtext': urlString += "&rb=true&rbwt=true&pr="+globalPropertiesArray[localUseElement].ratio; globalPropertiesArray[localUseElement].scale = 1; globalScaleDirection = 'corner'; globalResetRatio = true; if(globalEmptyFlag) { currentHeight = 30; currentWidth = 30; globalEmptyFlag = false; } if(globalExtendBorder) { if(globalPreviousLines > countLines(globalPropertiesArray[localUseElement].text)) { currentHeight = Math.round(((currentHeight / globalPreviousLines)*countLines(globalPropertiesArray[localUseElement].text))); } else { currentHeight = Math.round(currentHeight + (currentHeight / globalPreviousLines)); } globalExtendBorder = false; } break; } switch(globalScaleDirection) { case 'corner': scale = 1; if(globalPropertiesArray[localUseElement].scale != 1) scale = globalPropertiesArray[localUseElement].scale; break; case 'side': scale = (currentWidth/currentHeight)-(globalPropertiesArray[localUseElement].ratio); globalPropertiesArray[localUseElement].scale = scale; break; default: scale = 1; if(globalPropertiesArray[localUseElement].scale != 1) scale = globalPropertiesArray[localUseElement].scale; break; } urlString += "&scale="+encodeURIComponent(scale); urlString += "&ch="+currentHeight+"&cw="+currentWidth; switch(globalPropertiesArray[localUseElement].type) { case "text": urlString += "&f="+encodeURIComponent(globalPropertiesArray[localUseElement].font); urlString += "&color=" + encodeURIComponent(globalPropertiesArray[localUseElement].colorValue); urlString += "&text=" + encodeURIComponent(globalPropertiesArray[localUseElement].text); urlString += "&bold="+globalPropertiesArray[localUseElement].bold+"&italic="+globalPropertiesArray[localUseElement].italic; urlString += "&shadow="+globalPropertiesArray[localUseElement].shadow+"&shadowc="+globalPropertiesArray[localUseElement].shadowColorValue; urlString += "&outline="+globalPropertiesArray[localUseElement].outline+"&outlinec="+globalPropertiesArray[localUseElement].outlineColorValue; urlString += "&outlinetwo="+globalPropertiesArray[localUseElement].outlineTwo+"&outlinetwoc="+globalPropertiesArray[localUseElement].outlineTwoColorValue; urlString += "&ta="+globalPropertiesArray[localUseElement].textAlign; urlString += "&grd="+globalPropertiesArray[localUseElement].gradient+"&grdtc="+globalPropertiesArray[localUseElement].gradientTopColorValue+"&grdbc="+globalPropertiesArray[localUseElement].gradientBottomColorValue; break; case "image": urlString +="&filename="+encodeURIComponent(globalPropertiesArray[localUseElement].filename); break; case "clipart": urlString +="&filename="+encodeURIComponent(globalPropertiesArray[localUseElement].filename); urlString +="&cchange="+encodeURIComponent(globalPropertiesArray[localUseElement].allowColorChange); urlString += "&color=" + encodeURIComponent(globalPropertiesArray[localUseElement].colorValue); urlString +="&flipv="+encodeURIComponent(globalPropertiesArray[localUseElement].flipVertical)+"&fliph="+encodeURIComponent(globalPropertiesArray[localUseElement].flipHorizontal); break; } //timing issue, need to lock the current element for only this instance of loading the image var currentElement = localUseElement; urlString = baseUrl+"/"+urlString; if( dojo.isIE && dojo.isIE < 7 && parameters != 'initialize'){ function syncImage(){ image_1 = new Image(); dojo.connect(image_1, "onload", function(mover){ var localElement = currentElement; globalPropertiesArray[localElement].height = mover.currentTarget.height; globalPropertiesArray[localElement].width = mover.currentTarget.width; if(globalResetRatio) { globalPropertiesArray[localElement].ratio = mover.currentTarget.width / mover.currentTarget.height; globalResetRatio = false; } dojo.query(".dojoxResizeHandle*").style("display","none"); //clear handles setSize(localElement); setClip(localElement); calculateSize(urlString,localElement); globalElementUpdate.add({element:localElement,url:urlString}); setTimeout("switchImage()",750);// moved in here trying to prevent the double call issue dojo.disconnect(this); }); image_1.src = urlString; } syncImage(); } else { image_1 = new Image(); dojo.byId(globalSelectedElement.replace(/box/,"")).setAttribute('src',urlString); // moved below dojo.connect(image_1, "onload", function(mover){ globalPropertiesArray[currentElement].height = mover.currentTarget.height; globalPropertiesArray[currentElement].width = mover.currentTarget.width; if(globalResetRatio) { globalPropertiesArray[currentElement].ratio = mover.currentTarget.width / mover.currentTarget.height; globalResetRatio = false; } dojo.query(".dojoxResizeHandle*").style("display","none"); //clear handles setSize(currentElement); setClip(currentElement); calculateSize(urlString,currentElement); //dojo.byId(currentElement.replace(/box/,"")).setAttribute('src',urlString); // moved in here trying to prevent the double call issue dojo.disconnect(this); }); image_1.src = urlString; } } function switchImage() { if(globalElementUpdate.count > 0) { dojo.byId(globalElementUpdate.item(0).element.replace(/box/,"")).setAttribute('src',globalElementUpdate.item(0).url); globalElementUpdate.removeAt(0); } } function saveDesign() { //document.getElementById('progressdisplay').style.visibility='visible'; var dataArray = new Object(); function signSettings() { this.globalCarColor = globalCarColor; //this.sessionId = dojo.cookie("SID"); // this.auth = dojo.cookie("authorization"); this.sideThemeElement = themeManager.sideThemeElement; this.hoodThemeElement = themeManager.hoodThemeElement; this.loadFrom = globalLoadFrom; this.signTemplateId = globalSignTemplateId; this.sideMeasurement = globalSideMeasurement.defaultSize; this.topMeasurement = globalTopMeasurement.defaultSize; this.hoodMeasurement = globalHoodMeasurement.defaultSize; } dataArray["signSettings"] = new signSettings(); dojo.query(".imageContainer").forEach(function(n){ if(n.style.display != "none") { //javascript can't copy arrays with objects, so we use dojotojson to move //this works, but is very slow, doesn't scale well // dataArray[n.id] = dojo.fromJson(dojo.toJson(globalPropertiesArray[n.id])); var useLayer = true; if(globalPropertiesArray[n.id].t > dataArray["signSettings"].containerHeight || globalPropertiesArray[n.id].l > dataArray["signSettings"].containerWidth) { //The image is outside the box completely useLayer = false; } if((globalPropertiesArray[n.id].type == "text" && globalPropertiesArray[n.id].text == "")||(globalPropertiesArray[n.id].type == "text" && globalPropertiesArray[n.id].text == undefined)) { // we discard the layer useLayer = false; } if(n.id == themeManager.sideThemeElement || n.id == themeManager.hoodThemeElement) { if(globalPropertiesArray[n.id].height == 0 || globalPropertiesArray[n.id].width == 0 || globalPropertiesArray[n.id].measuredHeight == 0 || globalPropertiesArray[n.id].measuredWidth == 0) { //try to save the theme, values didn't get loaded for some reason var themeSize = themeManager.getSizes(globalPropertiesArray[n.id].filename); globalPropertiesArray[n.id].height = themeSize.h; globalPropertiesArray[n.id].width = themeSize.w; globalPropertiesArray[n.id].measuredHeight = 30; globalPropertiesArray[n.id].measuredWidth = (30 * globalPropertiesArray[n.id].width) / globalPropertiesArray[n.id].height; } } if(useLayer) { dataArray[n.id] = globalPropertiesArray[n.id].clone(); //hopefully this works well ? } } }); dataArray["z"] = globalZList.toArray(); //console.debug(dojo.toJson(dataArray,true)); //console.debug(encodeBase64(dojo.toJson(dataArray))); dojo.rawXhrPost( { url: "SaveDesign.ashx", handleAs: "json-comment-filtered", postData: encodeBase64(dojo.toJson(dataArray)), timeout: 10000, load: function(response, ioArgs) { if(response.response == "ok") { window.location = "proof.aspx?D="+globalHash+"&A="+response.id; } return response; }, error: function(response, ioArgs) { dijit.byId('saveDialog').hide(); alert("Error has occured HTTP status code: " + ioArgs.xhr.status); return response; } }); //dojo.byId('progressdisplay').style.display = "none"; } function updateFont() { globalPropertiesArray[globalSelectedElement].font = dojo.byId(fontListId).value; globalPropertiesArray[globalSelectedElement].useCustomSize = false; //reset this because the size typed is no longer accurate generatePreview('resetbounds'); } function countLines(newText) { returnValue = 1; var temp = new Array(); temp = newText.split('\n'); returnValue = temp.length; if(returnValue ==0) returValue = 1; return returnValue; } function updateText() { if(globalPropertiesArray[globalSelectedElement].text == "") globalEmptyFlag = true; if(!globalExtendBorder) { globalPreviousLines = countLines(globalPropertiesArray[globalSelectedElement].text); if(globalPreviousLines != countLines(dojo.byId('textInput').value)) { globalExtendBorder = true; } } globalPropertiesArray[globalSelectedElement].text = dojo.byId('textInput').value; globalPropertiesArray[globalSelectedElement].useCustomSize = false; //reset this because the size typed is no longer accurate globalTypeList.add(setTimeout("generatePreview('resetboundswithtext')",1000)); } function updateBackgroundColor(colorId,colorValue) { globalBackgroundColor = colorValue; dojo.query("#contentholder").style("background","#"+globalBackgroundColor); } function updateColor(colorId,colorValue,colorType) { switch(globalChangeColor) { case 'text': globalPropertiesArray[globalSelectedElement].gradient = false; dijit.byId('gradient').setAttribute('checked',false); globalPropertiesArray[globalSelectedElement].colorId = colorId; globalPropertiesArray[globalSelectedElement].colorValue = colorValue; globalPropertiesArray[globalSelectedElement].colorType = colorType; generatePreview(); break; case 'outline': updateOutlineColor(colorId,colorValue,colorType); break; case 'outlinetwo': updateOutlineTwoColor(colorId,colorValue,colorType); break; case 'shadow': updateShadowColor(colorId,colorValue,colorType); break; case 'clipart': globalPropertiesArray[globalSelectedElement].colorId = colorId; globalPropertiesArray[globalSelectedElement].colorValue = colorValue; globalPropertiesArray[globalSelectedElement].colorType = colorType; generatePreview(); break; } } function updateBottomGradientColor(colorId,colorValue,colorType) { globalPropertiesArray[globalSelectedElement].gradientBottomColorId = colorId; globalPropertiesArray[globalSelectedElement].gradientBottomColorValue = colorValue; generatePreview(); } function updateTopGradientColor(colorId,colorValue,colorType) { globalPropertiesArray[globalSelectedElement].gradientTopColorId = colorId; globalPropertiesArray[globalSelectedElement].gradientTopColorValue = colorValue; generatePreview(); } function updateOutlineTwoColor(colorId,colorValue,colorType) { globalPropertiesArray[globalSelectedElement].outlineTwoColorId = colorId; globalPropertiesArray[globalSelectedElement].outlineTwoColorValue = colorValue; globalPropertiesArray[globalSelectedElement].outlineTwoColorType = colorType; generatePreview(); } function updateOutlineColor(colorId,colorValue,colorType) { globalPropertiesArray[globalSelectedElement].outlineColorId = colorId; globalPropertiesArray[globalSelectedElement].outlineColorValue = colorValue; globalPropertiesArray[globalSelectedElement].outlineColorType = colorType; generatePreview(); } function updateShadowColor(colorId,colorValue,colorType) { globalPropertiesArray[globalSelectedElement].shadowColorId = colorId; globalPropertiesArray[globalSelectedElement].shadowColorValue = colorValue; globalPropertiesArray[globalSelectedElement].shadowColorType = colorType; generatePreview(); } function setSize(passedId) { dojo.style(passedId,"height",globalPropertiesArray[passedId].height+"px"); dojo.style(passedId,"width",globalPropertiesArray[passedId].width+"px"); } function updateTextAlign(parameter) { globalPropertiesArray[globalSelectedElement].textAlign = parameter; generatePreview(); } function updateChecked(parameter) { switch(parameter) { case 'bold': globalPropertiesArray[globalSelectedElement].bold = dojo.byId(parameter).checked; globalPropertiesArray[globalSelectedElement].useCustomSize = false; //reset this because the size typed is no longer accurate generatePreview('resetbounds'); break; case 'italic': globalPropertiesArray[globalSelectedElement].italic = dojo.byId(parameter).checked; globalPropertiesArray[globalSelectedElement].useCustomSize = false; //reset this because the size typed is no longer accurate generatePreview('resetbounds'); break; case 'outline': globalPropertiesArray[globalSelectedElement].outline = dojo.byId(parameter).checked; globalPropertiesArray[globalSelectedElement].useCustomSize = false; //reset this because the size typed is no longer accurate if(globalPropertiesArray[globalSelectedElement].outlineTwo) { globalPropertiesArray[globalSelectedElement].outline = true; dijit.byId('outline').setAttribute('checked',true); } generatePreview('resetbounds'); break; case 'outlinetwo': globalPropertiesArray[globalSelectedElement].outlineTwo = dojo.byId(parameter).checked; globalPropertiesArray[globalSelectedElement].useCustomSize = false; //reset this because the size typed is no longer accurate if(globalPropertiesArray[globalSelectedElement].outlineTwo) { globalPropertiesArray[globalSelectedElement].outline = true; dijit.byId('outline').setAttribute('checked',true); } generatePreview('resetbounds'); break; case 'shadow': globalPropertiesArray[globalSelectedElement].shadow = dojo.byId(parameter).checked; globalPropertiesArray[globalSelectedElement].useCustomSize = false; //reset this because the size typed is no longer accurate generatePreview('resetbounds'); break; case 'flipvertical': globalPropertiesArray[globalSelectedElement].flipVertical = dojo.byId(parameter).checked; globalPropertiesArray[globalSelectedElement].useCustomSize = false; //reset this because the size typed is no longer accurate generatePreview(); break; case 'fliphorizontal': globalPropertiesArray[globalSelectedElement].flipHorizontal = dojo.byId(parameter).checked; globalPropertiesArray[globalSelectedElement].useCustomSize = false; //reset this because the size typed is no longer accurate generatePreview(); break; case 'gradient': globalPropertiesArray[globalSelectedElement].gradient = dojo.byId(parameter).checked; generatePreview(); break; } } function moveElement(direction) { dojo.query(".dojoxResizeHandle*").style("display","none"); //clear handles var boxSize = dojo.coords(globalSelectedElement,true); switch(direction) { case 'left': dojo.style(globalSelectedElement,'left',boxSize.l-1+"px"); break; case 'up': dojo.style(globalSelectedElement,'top',boxSize.t-1+"px"); break; case 'down': dojo.style(globalSelectedElement,'top',boxSize.t+1+"px"); break; case 'right': dojo.style(globalSelectedElement,'left',boxSize.l+1+"px"); break; } setClip(); } function swapArrow(direction) { switch(direction) { case 'left': dojo.byId('arrow').setAttribute('src','images/arrowsleft.jpg'); break; case 'top': dojo.byId('arrow').setAttribute('src','images/arrowsup.jpg'); break; case 'bottom': dojo.byId('arrow').setAttribute('src','images/arrowsdown.jpg'); break; case 'right': dojo.byId('arrow').setAttribute('src','images/arrowsright.jpg'); break; case 'off': dojo.byId('arrow').setAttribute('src','images/arrows.jpg'); break; } }