diff --git a/src/applications/pholio/view/PholioMockImagesView.php b/src/applications/pholio/view/PholioMockImagesView.php
index d073347616..c6f8d1325d 100644
--- a/src/applications/pholio/view/PholioMockImagesView.php
+++ b/src/applications/pholio/view/PholioMockImagesView.php
@@ -1,71 +1,84 @@
 <?php
 
 final class PholioMockImagesView extends AphrontView {
 
   private $mock;
 
   public function setMock(PholioMock $mock) {
     $this->mock = $mock;
   }
 
   public function render() {
     if (!$this->mock) {
       throw new Exception("Call setMock() before render()!");
     }
 
-    $mockview = "";
+    $main_image_id = celerity_generate_unique_node_id();
+    require_celerity_resource('javelin-behavior-pholio-mock-view');
+    $config = array('mainID' => $main_image_id);
+    Javelin::initBehavior('pholio-mock-view', $config);
 
-    $file = head($this->mock->getImages())->getFile();
+    $mockview = "";
 
-    $main_image_id = celerity_generate_unique_node_id();
+    $main_image = head($this->mock->getImages());
 
-    $main_image_tag = phutil_render_tag(
+      $main_image_tag = javelin_render_tag(
       'img',
       array(
-        'src' => $file->getBestURI(),
-        'class' => 'pholio-mock-image',
         'id' => $main_image_id,
-      ));
+        'src' => $main_image->getFile()->getBestURI(),
+        'sigil' => 'mock-image',
+        'class' => 'pholio-mock-image',
+        'meta' => array(
+          'fullSizeURI' => $main_image->getFile()->getBestURI(),
+          'imageID' => $main_image->getID(),
+        ),
+    ));
+
+    $main_image_tag = javelin_render_tag(
+      'div',
+      array(
+        'id' => 'mock-wrapper',
+        'sigil' => 'mock-wrapper',
+        'class' => 'pholio-mock-wrapper'
+      ),
+      $main_image_tag
+    );
 
     $mockview .= phutil_render_tag(
       'div',
         array(
           'class' => 'pholio-mock-image-container',
         ),
       $main_image_tag);
 
     if (count($this->mock->getImages()) > 1) {
-      require_celerity_resource('javelin-behavior-pholio-mock-view');
-      $config = array('mainID' => $main_image_id);
-      Javelin::initBehavior('pholio-mock-view', $config);
-
       $thumbnails = array();
       foreach ($this->mock->getImages() as $image) {
         $thumbfile = $image->getFile();
 
         $tag = javelin_render_tag(
           'img',
           array(
             'src' => $thumbfile->getThumb160x120URI(),
             'sigil' => 'mock-thumbnail',
             'class' => 'pholio-mock-carousel-thumbnail',
             'meta' => array(
               'fullSizeURI' => $thumbfile->getBestURI(),
-              'imageID' => $image->getID(),
+              'imageID' => $image->getID()
             ),
         ));
         $thumbnails[] = $tag;
       }
 
       $mockview .= phutil_render_tag(
         'div',
           array(
             'class' => 'pholio-mock-carousel',
           ),
         implode($thumbnails));
     }
 
     return $mockview;
   }
-
 }
diff --git a/webroot/rsrc/css/application/pholio/pholio.css b/webroot/rsrc/css/application/pholio/pholio.css
index 5cf10e93dc..86031e9d5e 100644
--- a/webroot/rsrc/css/application/pholio/pholio.css
+++ b/webroot/rsrc/css/application/pholio/pholio.css
@@ -1,23 +1,36 @@
 /**
  * @provides pholio-css
  */
 .pholio-mock-image-container {
   background-color: #282828;
   text-align: center;
 }
 
 .pholio-mock-carousel {
   background-color: #282828;
   text-align: center;
 }
 
 .pholio-mock-carousel-thumbnail {
   margin-right: 5px;
   display: inline-block;
   cursor: pointer;
 }
 
 .pholio-mock-image {
-  margin: 10px 0px;
   display: inline-block;
 }
+
+.pholio-mock-select {
+    border: 1px solid #FF0000;
+    position: absolute;
+}
+
+.pholio-mock-wrapper {
+  position: relative;
+  display: inline-block;
+  cursor: crosshair;
+  padding: 0px;
+  margin: 10px 0px;
+}
+
diff --git a/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js b/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
index c9953e33d6..d9c438eb80 100644
--- a/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
+++ b/webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
@@ -1,17 +1,127 @@
 /**
  * @provides javelin-behavior-pholio-mock-view
  * @requires javelin-behavior
  *           javelin-stratcom
+ *           javelin-dom
+ *           javelin-vector
+ *           javelin-event
  */
 JX.behavior('pholio-mock-view', function(config) {
+  var is_dragging = false;
+  var wrapper = JX.$('mock-wrapper');
+  var image;
+  var imageData;
+  var startPos;
+  var endPos;
+  var selection;
+
   JX.Stratcom.listen(
     'click', // Listen for clicks...
     'mock-thumbnail', // ...on nodes with sigil "mock-thumbnail".
     function(e) {
       var data = e.getNodeData('mock-thumbnail');
 
       var main = JX.$(config.mainID);
+      JX.Stratcom.addData(
+        main,
+        {
+          fullSizeURI: data['fullSizeURI'],
+          imageID: data['imageID']
+        });
+
       main.src = data.fullSizeURI;
+
+      JX.DOM.setContent(wrapper,main);
+    });
+
+
+  function draw_rectangle(node, current, init) {
+    JX.$V(
+      Math.abs(current.x-init.x),
+      Math.abs(current.y-init.y))
+    .setDim(node);
+
+    JX.$V(
+      (current.x-init.x < 0) ? current.x:init.x,
+      (current.y-init.y < 0) ? current.y:init.y)
+    .setPos(node);
+  }
+
+  function getRealXY(parent, point) {
+    var pos = {x: (point.x - parent.x), y: (point.y - parent.y)};
+
+    if (pos.x < 0) pos.x = 0;
+    else if (pos.x > image.clientWidth) pos.x = image.clientWidth - 1;
+
+    if (pos.y < 0) pos.y = 0;
+    else if (pos.y > image.clientHeight) pos.y = image.clientHeight - 2;
+
+    return pos;
+  }
+
+  JX.Stratcom.listen('mousedown', 'mock-wrapper', function(e) {
+    if (!e.isNormalMouseEvent()) {
+      return;
+    }
+
+    image = JX.$(config.mainID);
+    imageData = JX.Stratcom.getData(image);
+
+    e.getRawEvent().target.draggable = false;
+    is_dragging = true;
+
+    startPos = getRealXY(JX.$V(wrapper),JX.$V(e));
+
+    selection = JX.$N(
+      'div',
+      {className: 'pholio-mock-select'}
+    );
+
+
+    JX.$V(startPos.x,startPos.y).setPos(selection);
+
+    JX.DOM.appendContent(wrapper, selection);
+
+
+  });
+
+  JX.enableDispatch(document.body, 'mousemove');
+  JX.Stratcom.listen('mousemove',null, function(e) {
+    if (!is_dragging) {
+      return;
+    }
+
+    draw_rectangle(selection, getRealXY(JX.$V(wrapper), JX.$V(e)), startPos);
+  });
+
+  JX.Stratcom.listen(
+    'mouseup',
+    null,
+    function(e) {
+      if (!is_dragging) {
+        return;
+      }
+      is_dragging = false;
+
+      endPos = getRealXY(JX.$V(wrapper), JX.$V(e));
+
+      comment = window.prompt("Add your comment");
+      if (comment == null || comment == "") {
+        selection.remove();
+        return;
+      }
+
+      selection.title = comment;
+
+      console.log("ImageID: " + imageData['imageID'] +
+        ", coords: (" + Math.min(startPos.x, endPos.x) + "," +
+        Math.min(startPos.y, endPos.y) + ") -> (" +
+        Math.max(startPos.x,endPos.x) + "," + Math.max(startPos.y,endPos.y) +
+        "), comment: " + comment);
+
     });
+
 });
 
+
+