3 files changed, 100 insertions, 4 deletions
diff --git a/modules/watermark/helpers/watermark.php b/modules/watermark/helpers/watermark.php
index ce2d5e0b..9fb03ecd 100644
--- a/modules/watermark/helpers/watermark.php
+++ b/modules/watermark/helpers/watermark.php
@@ -29,8 +29,7 @@ class watermark_Core {
   public static function get_watermark_postion_form($position="southeast") {
     $form = new Forge("admin/watermark/position", "", "post");
     $group = $form->group("watermark_position")->label(_("Update Position"));
-    $group->hidden("original_position")->value($position);
-    $group->dropdown("new_position")->label(_("Watermark Position"))
+    $group->dropdown("position")->label(_("Watermark Position"))
       ->options(array("northwest",  "north",  "northeast",
                       "west",       "center", "east",
                       "southwest",  "south",  "southeast"))
diff --git a/modules/watermark/js/watermark.js b/modules/watermark/js/watermark.js
index 3c7ca252..d7070ddf 100644
--- a/modules/watermark/js/watermark.js
+++ b/modules/watermark/js/watermark.js
@@ -11,7 +11,72 @@ function ajaxify_watermark_add_form() {
   });
 }
 
+var locations = {
+  areas: {},
+  names: ["northwest", "north",   "northeast",
+          "west",      "center",  "east",
+          "southwest", "south",   "southeast"],
+  nameIndex: function(name) {
+    for (var row=0; row < 3; row++) {
+      for (var col=0; col < 3; col++) {
+        var index = row * 3 + col;
+        if (this.names[index] == name) {
+          return index;
+        }
+      }
+    }
+  },
+  getArea: function(x, y) {
+    for (var row=0; row < 3; row++) {
+      for (var col=0; col < 3; col++) {
+        var name = this.names[row * 3 + col];
+        var area = this.areas[name];
+        var check = area.top <= y && y < area.bottom && area.left <= x && x < area.right;
+        if (check) {
+          return name;
+        }
+      }
+    }
+  },
+  getDimension: function (area) {
+    return this.areas[area];
+  }
+};
+
+
+
+locations.areas["northeast"] = {};
+locations.areas["north"] = {};
+locations.areas["northwest"] = {};
+locations.areas["east"] = {};
+locations.areas["center"] = {};
+locations.areas["west"] = {};
+locations.areas["southeast"] = {};
+locations.areas["south"] = {};
+locations.areas["southwest"] = {};
+
+function calculateAreas(target) {
+  var cell_height = $(target).attr("offsetHeight") / 3;
+  var cell_width = $(target).attr("offsetWidth") / 3;
+
+  var top = $(target).attr("offsetTop");
+  for (var row=0; row < 3; row++) {
+    var left = $(target).attr("offsetLeft");
+    for (var col=0; col < 3; col++) {
+      var name = locations.names[row * 3 + col];
+      locations.areas[name] = {
+        top: top,
+        left: left,
+        right: left + cell_width,
+        bottom: top + cell_height};
+      left += cell_width;
+    }
+    top += cell_height;
+  }
+}
+
 function watermark_dialog_initialize() {
+  // Adjust the size of the dialog to accomodate the image content
   var container = $("#gDialog").parent().parent();
   var container_height = $(container).attr("offsetHeight");
   var container_width = $(container).attr("offsetWidth");
@@ -25,4 +90,36 @@ function watermark_dialog_initialize() {
   container.css("width", width + "px");
   container.css("top", ((document.height - height) / 2) + "px");
   container.css("left", ((document.width - width) / 2) + "px");
+
+  $("#gTargetImage").droppable({
+    accept: "div",
+    greedy: true,
+    hoverClass: "droppable-hover",
+    drop: function(ev, ui) {
+      var areaname = locations.getArea(ui.position.left, ui.position.top);
+      positionWatermark(areaname);
+      $("#position").val(locations.nameIndex(areaname));
+    }
+  });
+
+  $("#gWaterMark").draggable({
+    helper: 'clone',
+    containment: "#gTargetImage",
+    opacity: .6,
+  });
+
+  $("#position").change(function() {
+    positionWatermark($("option:selected", this).text());
+  });
+
+  calculateAreas($("#gTargetImage"));
+  var dropdown = $("#position");
+  positionWatermark($("option:selected", dropdown).text());
+}
+
+function positionWatermark(area) {
+  var region = locations.getDimension(area);
+
+  $("#gWaterMark").css("top", region.top + "px");
+  $("#gWaterMark").css("left", region.left + "px");
 }
diff --git a/modules/watermark/views/watermark_position.html.php b/modules/watermark/views/watermark_position.html.php
index 821a8335..89fd4a50 100644
--- a/modules/watermark/views/watermark_position.html.php
+++ b/modules/watermark/views/watermark_position.html.php
@@ -3,10 +3,10 @@
 $("#gDialog").ready(watermark_dialog_initialize);
 </script>
 <div id="gWatermarkAdmin">
-  <div id="gTarget" class="droppable">
+  <div id="gTarget">
     <img id="gTargetImage" src="<?= $sample_image ?>"></img>
     <div id="gWaterMark" style="float:none;z-index:1005;position:absolute;top:100px">
-      <img id ="gWaterMarkImage" src="<?= $watermark_image ?>" class="draggable"
+      <img id ="gWaterMarkImage" src="<?= $watermark_image ?>"
           width="<?= $watermark_width ?>"  height="<?= $watermark_height ?>" />
     </div>
   </div>