From e1b306c969a470feafd7a0526877aac499da2fd4 Mon Sep 17 00:00:00 2001
From: "brade%netscape.com"
 <brade%netscape.com@18797224-902f-48f8-a5cc-f745e15eee43>
Date: Wed, 26 Apr 2000 10:04:43 +0000
Subject: [PATCH] latest changes to image map editor (submitted by Dan Haddix;
 dan6992@hotmail.com)

git-svn-id: svn://10.0.0.236/trunk@67221 18797224-902f-48f8-a5cc-f745e15eee43
---
 .../editor/ui/dialogs/content/EdImageMap.js   | 164 ++++++++++--------
 .../editor/ui/dialogs/content/EdImageMap.xul  |  59 +++----
 .../ui/dialogs/content/EdImageMapShapes.js    | 122 +++++++++----
 3 files changed, 207 insertions(+), 138 deletions(-)

diff --git a/mozilla/editor/ui/dialogs/content/EdImageMap.js b/mozilla/editor/ui/dialogs/content/EdImageMap.js
index 94c42989366..724be49ebcb 100644
--- a/mozilla/editor/ui/dialogs/content/EdImageMap.js
+++ b/mozilla/editor/ui/dialogs/content/EdImageMap.js
@@ -22,14 +22,12 @@
  *   Brian King
  */
 
-
 var tHide = false;
 var highCont = false;
 var imageElement = null;
 var mapName = '';
 var imageMap = null;
-var oldMap = null;
-var noImg = false;
+var imageEl;
 
 function Startup(){
   if (!InitEditorShell())
@@ -39,21 +37,21 @@ function Startup(){
 }
 
 function initDialog(){
-  //Check to make sure selected element is an image
-  imageElement = editorShell.GetSelectedElement("img");
+  //Get image element from parent
+  imageElement = window.arguments[0];
   if (!imageElement) //If not an image close window
-  {
-    imageElementName = window.opener.document.getElementById('srcInput');
-    imageElementName = imageElementName.value;
-    if ( IsValidImage(imageElementName )) {
-      noImg = true;
-    }
-    else {
-      // Need error message here
-      window.close();
-      return;
-    } 
-  }
+    window.close();
+
+  //Get image map from parent
+  imageMap = window.arguments[1];
+  if (!imageMap) //If no image map close window
+    window.close();
+
+  //find parent inputs
+  srcInput = window.opener.document.getElementById("srcInput");
+  widthInput = window.opener.document.getElementById("widthInput");
+  heightInput = window.opener.document.getElementById("heightInput");
+  borderInput = window.opener.document.getElementById("border");
 
   //Set iframe pointer
   frameDoc = window.frames[0].document;
@@ -78,24 +76,31 @@ function initDialog(){
 
   //Place Image
   var newImg = frameDoc.createElement("img");
-  if ( newImg && noImg == false) {
-    newImg.setAttribute("src", imageElement.getAttribute("src"));
-    newImg.setAttribute("width", imageElement.offsetWidth);
-    newImg.setAttribute("height", imageElement.offsetHeight);
+  if ( newImg ) {
+    newImg.setAttribute("src", srcInput.value);
+    if (parseInt(widthInput.value) > 0)
+      newImg.setAttribute("width", widthInput.value);
+    if (parseInt(heightInput.value) > 0)
+      newImg.setAttribute("height", heightInput.value);
     newImg.setAttribute("id", "mainImg");
-    frameDoc.getElementById("bgDiv").appendChild(newImg);
-    frameDoc.getElementById("bgDiv").style.width = imageElement.offsetWidth;
-  }
-  else if (newImg) {
-    newImg.setAttribute("src", imageElementName);
-    frameDoc.getElementById("bgDiv").appendChild(newImg);
+    imageEl = frameDoc.getElementById("bgDiv").appendChild(newImg);
   }
 
+  //Resize background DIV to fit image
+  fixBgDiv();
+
   //Recreate Image Map if it exists
-  if ( (noImg == false) && (imageElement.getAttribute("usemap")) ) {
-    //alert('test');
     recreateMap();
+}
+
+function fixBgDiv(){
+  imageEl = frameDoc.getElementById("mainImg");
+  if (imageEl.offsetWidth != 0){
+    frameDoc.getElementById("bgDiv").style.width = imageEl.offsetWidth;
+    frameDoc.getElementById("bgDiv").style.height = imageEl.offsetHeight;
   }
+  else
+    setTimeout("fixBgDiv()", 100);
 }
 
 function hideToolbar(){
@@ -117,33 +122,28 @@ function hideToolbar(){
 }
 
 function highContrast(){
-  var imgEl = frameDoc.getElementById("mainImg");
   if (highCont){
-    imgEl.style.opacity = "100%";
+    frameDoc.getElementById("bgDiv").style.background = "url('chrome://editor/skin/images/Map_checker.gif')";
+    frameDoc.getElementById("bgDiv").style.backgroundColor = "white";
+    imageEl.style.opacity = "1.0";
+    document.getElementById("Map:Contrast").setAttribute("checked", "false");
+    document.getElementById("Map:Contrast").setAttribute("toggled", "false");
     highCont = false;
   }
   else{
-    imgEl.style.opacity = "10%";
+    frameDoc.getElementById("bgDiv").style.background = "url('')";
+    frameDoc.getElementById("bgDiv").style.backgroundColor = "#D2D2D2";
+    imageEl.style.opacity = ".3";
+    document.getElementById("Map:Contrast").setAttribute("checked", "true");
+    document.getElementById("Map:Contrast").setAttribute("toggled", "true");
     highCont = true;
   }
 }
 
 function recreateMap(){
-  var map = imageElement.getAttribute("usemap");
-  map = map.substring(1, map.length);
-  mapName = map;
-  var mapCollection = editorShell.editorDocument.getElementsByName(map);
-  oldMap = mapCollection[0];
-  //alert(map);
-  try{
-    alert(oldMap.childNodes.length);
-  }
-  catch (ex){
-    alert(ex);
-  }
-    areaCollection = mapCollection[0].childNodes;
-    var len = areaCollection.length;
-    for(j=0; j<len; j++){
+  areaCollection = imageMap.childNodes;
+  areaColLen = areaCollection.length;
+  for(j=0; j<areaColLen; j++){
       area = areaCollection[j];
       shape = area.getAttribute("shape");
       shape = shape.toLowerCase();
@@ -161,12 +161,17 @@ function recreateMap(){
 }
 
 function finishMap(){
-  var spots = frameDoc.getElementsByName("hotspot");
+  if (!setMapName())
+    return false;
+  if (!deleteAreas())
+    return false;
+
+  spots = frameDoc.getElementsByName("hotspot");
   var len = spots.length;
-  createMap();
   if (len >= 1){
     for(i=0; i<len; i++){
-      var curSpot = spots[i];
+      dump(i+"\n");
+      curSpot = spots[i];
       if (curSpot.getAttribute("class") == "rect")
         createRect(curSpot);
       else if (curSpot.getAttribute("class") == "cir")
@@ -174,27 +179,35 @@ function finishMap(){
       else
         createPoly(curSpot);
     }
-    imageElement.setAttribute("usemap", ("#"+mapName));
-    editorShell.editorDocument.body.appendChild(imageMap);
-    //editorShell.InsertElementAtSelection(imageMap, false);
+    //editorShell.editorDocument.body.appendChild(imageMap);
+    //returnValue = "test";
+    //window.arguments[0] = "test"; //editorShell.editorDocument.body.appendChild(imageMap); //editorShell.InsertElementAtSelection(imageMap, false);
+    //dump(window.arguments[0]+"\n");
+    dump("imageMap.childNodes.length = "+imageMap.childNodes.length+"\n");
   }
   return true;
 }
 
-function createMap(){
+function setMapName(){
   //imageMap = editorShell.CreateElementWithDefaults("map");
-  imageMap = frameDoc.createElement("map");
-  if (mapName == ''){
-  mapName = imageElement.getAttribute("src");
+  //dump(imageMap+"\n");
+  //imageMap = frameDoc.createElement("map");
+
+  mapName = imageMap.getAttribute("name");
+  if (mapName == ""){
+    mapName = String(frameDoc.getElementById("mainImg").getAttribute("src"));
   mapName = mapName.substring(mapName.lastIndexOf("/"), mapName.length);
   mapName = mapName.substring(mapName.lastIndexOf("\\"), mapName.length);
-  mapName = mapName.substring(1, mapName.indexOf("."));
-  }
-  else {
-    editorShell.editorDocument.body.removeChild(oldMap);
+    mapName = mapName.substring(1, mapName.lastIndexOf("."));
+    if (mapName == ""){
+      // BUG causes substring to return nothing when
+      // parameters are 1 & 13 (i.e. string.substring(1, 13);)
+      mapName = "hack";
   }
   imageMap.setAttribute("name", mapName);
 }
+  return true;
+}
 
 function createRect(which){
   //newRect = editorShell.CreateElementWithDefaults("area");
@@ -208,10 +221,10 @@ function createRect(which){
   else{
     newRect.setAttribute("nohref", "");
   }
-  if (which.getAttribute("target") != ""){
+  if (which.getAttribute("hsTarget") != ""){
   newRect.setAttribute("target", which.getAttribute("hsTarget"));
   }
-  if (which.getAttribute("alt") != ""){
+  if (which.getAttribute("hsAlt") != ""){
   newRect.setAttribute("alt", which.getAttribute("hsAlt"));
   }
   //newRect.removeAttribute("id");
@@ -233,11 +246,12 @@ function createCir(which){
   else{
     newCir.setAttribute("nohref", "");
   }
-
-  if ( which.getAttribute("hsTarget") )
+  if (which.getAttribute("hsTarget") != ""){
     newCir.setAttribute("target", which.getAttribute("hsTarget"));
-  if ( which.getAttribute("hsAlt") )
+  }
+  if (which.getAttribute("hsAlt") != ""){
     newCir.setAttribute("alt", which.getAttribute("hsAlt"));
+  }
   //newCir.removeAttribute("id");
   imageMap.appendChild(newCir);
 }
@@ -261,10 +275,12 @@ function createPoly(which){
   else{
     newPoly.setAttribute("nohref", "");
   }
-  if ( which.getAttribute("hsTarget") )
+  if (which.getAttribute("hsTarget") != ""){
     newPoly.setAttribute("target", which.getAttribute("hsTarget"));
-  if ( which.getAttribute("hsAlt") )
+  }
+  if (which.getAttribute("hsAlt") != ""){
     newPoly.setAttribute("alt", which.getAttribute("hsAlt"));
+  }
   //newPoly.removeAttribute("id");
   imageMap.appendChild(newPoly);
 }
@@ -274,14 +290,16 @@ function hotSpotProps(which){
   var currentCir = null;
   if (which == null)
     return;
-  var hotSpotWin = window.openDialog("chrome://editor/content/EdImageMapHotSpot.xul", "_blank", "chrome,close,titlebar,modal", which);
+  hotSpotWin = window.openDialog("chrome://editor/content/EdImageMapHotSpot.xul", "_blank", "chrome,close,titlebar,modal", which);
 }
 
 function deleteAreas(){
-  if (oldMap){
+  dump("deleteAreas called\n");
+  area = imageMap.firstChild;
+  while (area != null){
+    dump(area+"\n");
+    imageMap.removeChild(area);
     area = imageMap.firstChild;
-    while (area){
-      area = imageMap.removeChild(area).nextSibling;
-    }    
   }
+  return true;
 }
\ No newline at end of file
diff --git a/mozilla/editor/ui/dialogs/content/EdImageMap.xul b/mozilla/editor/ui/dialogs/content/EdImageMap.xul
index 1d99e3f3cc3..4964d388087 100644
--- a/mozilla/editor/ui/dialogs/content/EdImageMap.xul
+++ b/mozilla/editor/ui/dialogs/content/EdImageMap.xul
@@ -25,34 +25,26 @@
 
 <?xml-stylesheet href="chrome://editor/skin/EdImageMap.css" type="text/css"?> 
 
-<?xml-stylesheet href="chrome://editor/skin/editor.css" type="text/css"?>
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> 
+<?xml-stylesheet href="chrome://navigator/skin/" type="text/css"?>
+<?xml-stylesheet href="chrome://editor/skin/" type="text/css"?>
 
-<!-- 
-<?xul-overlay href="chrome://global/content/taskbarOverlay.xul"?>
-<?xul-overlay href="chrome://editor/content/EdDialogOverlay.xul"?> 
--->
 <?xul-overlay href="chrome://global/content/dialogOverlay.xul"?>
-<?xul-overlay href="chrome://editor/content/editorOverlay.xul"?>
-<?xul-overlay href="chrome://global/content/globalOverlay.xul"?>
-<?xul-overlay href="chrome://global/content/tasksOverlay.xul"?>
-<!--
-<?xul-overlay href="chrome://communicator/content/sidebar/sidebarOverlay.xul"?>
--->
+<?xul-overlay href="chrome://editor/content/EdDialogOverlay.xul"?> 
 
 <!DOCTYPE window SYSTEM "chrome://editor/locale/EditorImageMap.dtd">
 
 
 <!-- dialog containing a control requiring initial setup -->
-<!-- was class="imap-window" -->
 <window class="dialog" title="&windowTitle.label;"
     xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
     xmlns:html="http://www.w3.org/TR/REC-html40"
     onload = "Startup()"
     onunload="//finishMap();"
     orient="vertical"
+    width="640" height="480"
    >
 <!--
-    width="640" height="480"
 	screenX="10" screenY="10"
 	persist="screenX screenY width height"
 -->
@@ -69,7 +61,11 @@
 
   <keyset id="defaultKeySet">
 
-    <key id="deletespot"   keycode="VK_DELETE" onkeypress="deleteElement(currentElement)" />
+    <key id="deletespot"   keycode="VK_DELETE"   onkeypress="deleteElement(currentElement)" />
+    <key id="nudgeup"      keycode="VK_UP"       onkeypress="nudge(event, 'up')" />
+    <key id="nudgeleft"    keycode="VK_LEFT"     onkeypress="nudge(event, 'left')" />
+    <key id="nudgedown"    keycode="VK_DOWN"     onkeypress="nudge(event, 'down')" />
+    <key id="nudgeright"   keycode="VK_RIGHT"    onkeypress="nudge(event, 'right')" />
     <key id="mapclearkb"   xulkey="true" key="d" observes="Map:Clear" />
     <key id="mapselectkb"  xulkey="true" key="a" observes="Map:SelectAll" />
     <key id="mapclosekb"   xulkey="true" key="l" observes="Map:Close" />
@@ -91,7 +87,7 @@
   <broadcaster id="Map:Apercent" value="&apercentCmd.label;" checked="true" oncommand="zoom('', 1)"/>
   <broadcaster id="Map:Bpercent" value="&bpercentCmd.label;" oncommand="zoom('', 2)"/>
   <broadcaster id="Map:Cpercent" value="&cpercentCmd.label;" oncommand="zoom('', 4)"/>
-  <broadcaster id="Map:Contrast" value="&contrastCmd.label;" onaction=""/>
+  <broadcaster id="Map:Contrast" value="&contrastCmd.label;" oncommand="highContrast()" toggled="0" checked="false"/>
   <broadcaster id="Map:About" value="&aboutCmd.label;" onaction=""/>
   <broadcaster id="Map:ZoomIn" value="&zoominCmd.label;" oncommand="zoom('in')"/>
   <broadcaster id="Map:ZoomOut" value="&zoomoutCmd.label;" disabled="true" oncommand="zoom('out')"/>
@@ -148,31 +144,29 @@
 </menubar>
 
 
-<toolbar id="toolbar" class="standard" persist="collapsed" orient="vertical">
+<toolbar id="toolbar" class="standard" persist="collapsed">
   <titledbutton id="cutButton" class="button28" observes="Map:Cut"/>
   <titledbutton id="copyButton" class="button28" observes="Map:Copy"/>
   <titledbutton id="pasteButton" class="button28" observes="Map:Paste"/>
   <titledbutton id="zoomInButton" class="button28" observes="Map:ZoomIn"/>
   <titledbutton id="zoomOutButton" class="button28" observes="Map:ZoomOut"/>
-  <titledbutton id="contrastButton" class="button28" toggled="0" oncommand="highContrast()"/>
- 
+  <titledbutton id="contrastButton" class="button28" observes="Map:Contrast"/>
   <spring flex="100%"/>
 </toolbar> 
 
-<box align="horizontal" flex="100">
 
-  <toolbar id="toolbox">
-  <box orient="vertical" flex="100">
-    <titledbutton id="pointerButton" class="tool" toggled="1" oncommand="changeTool(event, 'pointer')"/>
-    <titledbutton id="rectButton" class="tool" oncommand="changeTool(event, 'rect')"/>
-    <titledbutton id="cirButton" class="tool" oncommand="changeTool(event, 'cir')"/>
-    <titledbutton id="polyButton" class="tool" oncommand="changeTool(event, 'poly')"/>
+<box orient="horizontal" flex="1">
+
+  <toolbar id="toolbox" orient="vertical">
+    <titledbutton id="pointerButton" class="tool" toggled="1" onclick="changeTool(event, 'pointer')"/>
+    <titledbutton id="rectButton" class="tool" onclick="changeTool(event, 'rect')"/>
+    <titledbutton id="cirButton" class="tool" onclick="changeTool(event, 'cir')"/>
+    <titledbutton id="polyButton" class="tool" onclick="changeTool(event, 'poly')"/>
     <spring flex="100%"/>
-  </box>
   </toolbar>
 
   <!-- Content Area -->
-  <iframe id="content" src="EdImageMapPage.html" flex="100%"/>
+  <html:iframe id="content" src="EdImageMapPage.html" flex="1"/>
 
 </box>
 
@@ -180,13 +174,14 @@
   <!-- not sure if this is needed, but put it in just in case 
   <box id="AdvancedEditButton"/> -->
 
-  <box align="horizontal">
+  <box orient="horizontal">
 
-    <!-- Cheap hack until I get key events hooked up; was class="key-toolbar left" -->
-    <button orient="vertical" id = "DelButton"
-    class   = "dialog"
+    <!-- Cheap hack until I get key events hooked up
+    <button 
+    class   = "push dialog"
+    id	    = "DelButton"
     value="&delSpotCmd.label;" 
-    oncommand="deleteElement(currentElement)"/>
+    onclick="deleteElement(currentElement)"/> -->
     
     <spring flex="100%"/>
 
diff --git a/mozilla/editor/ui/dialogs/content/EdImageMapShapes.js b/mozilla/editor/ui/dialogs/content/EdImageMapShapes.js
index c7f45655ae4..83345ed8488 100644
--- a/mozilla/editor/ui/dialogs/content/EdImageMapShapes.js
+++ b/mozilla/editor/ui/dialogs/content/EdImageMapShapes.js
@@ -21,10 +21,6 @@
  *   Dan Haddix (dan6992@hotmail.com)
  */
 
-
-
-
-
 var downTool = false;
 var dragActive = false;
 var dragObject = false;
@@ -97,8 +93,8 @@ function Rect(coords, href, target, alt, construct){
   if (!coords){
     currentRect.style.left = startX+"px";
     currentRect.style.top = startY+"px";
-    currentRect.width = endX+"px";
-    currentRect.height = endX+"px";
+    //currentRect.style.width = endX+"px";
+    //currentRect.style.height = endX+"px";
   }
   else{
     var coordArray = coords.split(',');
@@ -145,8 +141,8 @@ function Circle(coords, href, target, alt, construct){
   if (!coords){
     currentCir.style.left = startX+"px";
     currentCir.style.top = startY+"px";
-    currentCir.width = endX+"px";
-    currentCir.height = endX+"px";
+    //currentCir.style.width = endX+"px";
+    //currentCir.style.height = endX+"px";
   }
   else{
     var coordArray = coords.split(',');
@@ -164,14 +160,6 @@ function Circle(coords, href, target, alt, construct){
   }
   if (construct)
     currentCir = null;
-
-  //cirImg = frameDoc.createElement("img");
-  //cirImg.setAttribute("src", "chrome://editor/skin/images/Map_circleObject.gif");
-  //cirImg.setAttribute("name", "hotspot");
-  //cirImg.setAttribute("cir", "true");
-  //cirImg.style.width = "100%";
-  //cirImg.style.height = "100%";
-  //currentCir.appendChild(cirImg);
 }
 
 function Poly(coords, href, target, alt, construct){
@@ -183,8 +171,9 @@ function Poly(coords, href, target, alt, construct){
   currentPoly = selectElement(frameDoc.body.appendChild(newPoly));
   if (!coords){
     addPoint(null, startX, startY, true);
-    currentPoly.onclick = addPoint;
-    //currentPoly.addEventListener("click", addPoint, false);
+    //currentPoly.onclick = addPoint;
+    currentPoly.style.cursor = "crosshair";
+    currentPoly.addEventListener("click", addPoint, false);
   }
   else{
     var coordArray = coords.split(',');
@@ -223,9 +212,9 @@ function addPoint(event, pointX, pointY, start){
   newPoint.style.top = pointY+"px";
   if (start){
     newPoint.setAttribute("class", "pointStart");
-    newPoint.style.cursor = "sw-resize";
-    newPoint.onclick = polyFinish;
-    //newPoint.addEventListener("click", polyFinish, false);
+    newPoint.style.cursor = "pointer";
+    //newPoint.onclick = polyFinish;
+    newPoint.addEventListener("click", polyFinish, false);
   }
   currentPoly.appendChild(newPoint);
 }
@@ -266,18 +255,20 @@ function polyFinish(event, construct){
     currentPoly.style.top = polyTop+"px";
     currentPoly.style.width = polyWidth+"px";
     currentPoly.style.height = polyHeight+"px";
-    currentPoly.childNodes[0].onclick = null;
-    currentPoly.onclick = null;
-    //currentPoly.childNodes[0].removeEventListener("click", polyFinish, false);
-    //currentPoly.removeEventListener("click", addPoint, false);
+    //currentPoly.childNodes[0].onclick = null;
+    //currentPoly.onclick = null;
+    currentPoly.style.cursor = "auto";
+    currentPoly.childNodes[0].removeEventListener("click", polyFinish, false);
+    currentPoly.removeEventListener("click", addPoint, false);
     if (!construct)
       hotSpotProps(currentPoly);
-    currentPoly = null;
   }
   else
     deleteElement(currentPoly);
   if (event)
     event.preventBubble();
+
+  currentPoly = null;
 }
 
 function deleteElement(el){
@@ -352,6 +343,9 @@ function deSelectElement(el){
       j++;
   }
   currentElement.pop();
+  if (currentElement.length == 1){
+    selectElement(currentElement[0]);
+  }
   if (currentElement.length >= 1){
     document.getElementById("Map:Cut").setAttribute("disabled", "false");
     document.getElementById("Map:Copy").setAttribute("disabled", "false");
@@ -655,14 +649,26 @@ function changeTool(event, what){
   if (!currentPoly){
     for(i=0; i<4; i++){
       buttonArray[i].setAttribute("toggled", 0);
+      if (event.target == buttonArray[i]){
+        buttonArray[i].setAttribute("toggled", 1);
+      }
     }
     currentTool = what;
+    if (currentTool != "pointer"){
+      frameDoc.getElementById("bgDiv").style.cursor = "crosshair";
+      frameDoc.body.style.cursor = "crosshair";
+    }
+    else{
+      frameDoc.getElementById("bgDiv").style.cursor = "default";
+      frameDoc.body.style.cursor = "default";
+    }
+
     dump(what+" selected\n");
   }
   else {
     for(i=0; i<4; i++){
       if (event.target == buttonArray[i]){
-        buttonArray[i].setAttribute("toggled", 1);
+        buttonArray[i].setAttribute("toggled", 0);
       }
     }
   }
@@ -740,14 +746,16 @@ function zoom(direction, ratio){
   imgEl = frameDoc.getElementById("mainImg");
   dump(imgEl.getAttribute("width")+'\n');
   if (ratio > currentZoom){
-    imgEl.setAttribute("width", (parseInt(imgEl.getAttribute("width"))*(ratio/currentZoom)));
-    imgEl.setAttribute("height", (parseInt(imgEl.getAttribute("height"))*(ratio/currentZoom)));
-    frameDoc.getElementById("bgDiv").style.width = (parseInt(frameDoc.getElementById("bgDiv").style.width)*(ratio/currentZoom));
+    imgEl.setAttribute("width", (parseInt(imgEl.offsetWidth)*(ratio/currentZoom)));
+    imgEl.setAttribute("height", (parseInt(imgEl.offsetHeight)*(ratio/currentZoom)));
+    frameDoc.getElementById("bgDiv").style.width = imgEl.getAttribute("width");
+    frameDoc.getElementById("bgDiv").style.height = imgEl.getAttribute("height");
   }
   else{
-    imgEl.setAttribute("width", (parseInt(imgEl.getAttribute("width"))/(currentZoom/ratio)));
-    imgEl.setAttribute("height", (parseInt(imgEl.getAttribute("height"))/(currentZoom/ratio)));
-    frameDoc.getElementById("bgDiv").style.width = (parseInt(frameDoc.getElementById("bgDiv").style.width)*(ratio/currentZoom));
+    imgEl.setAttribute("width", (parseInt(imgEl.offsetWidth)/(currentZoom/ratio)));
+    imgEl.setAttribute("height", (parseInt(imgEl.offsetHeight)/(currentZoom/ratio)));
+    frameDoc.getElementById("bgDiv").style.width = imgEl.getAttribute("width");
+    frameDoc.getElementById("bgDiv").style.height = imgEl.getAttribute("height");
   }
   currentZoom = ratio;  
 }
@@ -801,4 +809,52 @@ function paste(){
   }
   eval(func);
 }
+
+  function nudge(event, dir){
+  /*prevent scrolling
+  event.stopPropagation(); 
+  event.preventDefault();*/
+
+  len = currentElement.length;
+  amount = 1;
+  if (event.shiftKey)
+    amount = 5;
+
+  
+  boundRectTop = 1000000;
+  boundRectLeft = 1000000;
+  for (i=0; i<len; i++){
+    curTop = parseInt(currentElement[i].style.top);
+    curLeft = parseInt(currentElement[i].style.left);
+    if (curTop < boundRectTop)
+      boundRectTop = curTop;
+    if (curLeft < boundRectLeft)
+      boundRectLeft = curLeft;
+  }
+
+  for (i=0; i<len; i++){
+    if (dir == "up"){
+      curTop = parseInt(currentElement[i].style.top);
+      if (boundRectTop >= amount)
+        currentElement[i].style.top = (curTop-amount) + "px";
+      else
+        currentElement[i].style.top = (curTop-boundRectTop) + "px";
+    }
+    else if (dir == "left"){
+      curLeft = parseInt(currentElement[i].style.left);
+      if (boundRectLeft >= amount)
+        currentElement[i].style.left = (curLeft-amount) + "px";
+      else
+        currentElement[i].style.left = (curLeft-boundRectLeft) + "px";
+    }
+    else if (dir == "down"){
+      curTop = parseInt(currentElement[i].style.top);
+      currentElement[i].style.top = (curTop+amount) + "px";
+    }
+    else if (dir == "right"){
+      curLeft = parseInt(currentElement[i].style.left);
+      currentElement[i].style.left = (curLeft+amount) + "px";
+    }
+  }
+}
   
\ No newline at end of file