diff --git a/MediaflowPlugin.php b/MediaflowPlugin.php
index 6cf1b45..e70233a 100644
--- a/MediaflowPlugin.php
+++ b/MediaflowPlugin.php
@@ -6,6 +6,40 @@
 
 class MediaflowPlugin extends BasePlugin {
 
+    public function init()
+    {
+        craft()->on('entries.onBeforeSaveEntry', function($event)
+        {
+            $entry = $event->params['entry'];
+            $fieldLayout = $entry->getFieldLayout();
+            $fields = $fieldLayout->getFields();
+
+            foreach ($fields as $fieldLayoutField) {
+                $field = $fieldLayoutField->getField();
+                $isMediaField = $field->getFieldType() instanceof Mediaflow_MediaFieldType;
+                if (!$isMediaField) {
+                    continue;
+                }
+
+                $handle = $field->handle;
+                $fieldValue = $entry->$handle;
+                $supportsCrop = is_array($fieldValue->version) || $fieldValue->version instanceof \Traversable;
+                if ($supportsCrop) {
+                    $urls = $fieldValue->urls ?: array();
+                    foreach ($fieldValue->version as $name => $version) {
+                        $hash = null;
+                        if (isset($urls[$name]) && isset($urls[$name]['hash'])) {
+                            $hash = $urls[$name]['hash'];
+                        }
+                        $urls[$name] = $fieldValue->saveVersion($name, $entry->slug, $hash);
+                    }
+                    $fieldValue->urls = $urls;
+                    $entry->getContent()->setAttribute($handle, $fieldValue);
+                }
+            }
+        });
+    }
+
     public function getName()
     {
         return Craft::t('Mediaflow');
@@ -13,12 +47,12 @@ public function getName()
 
     public function getVersion()
     {
-        return '0.1.2';
+        return '1.0.0-rc1';
     }
 
     public function getDeveloper()
     {
-        return 'KeyTeq Labs';
+        return 'Keyteq Labs';
     }
 
     public function getDeveloperUrl()
@@ -29,10 +63,11 @@ public function getDeveloperUrl()
 
     protected function defineSettings()
     {
+        $string = AttributeType::String;
         return array(
-            'url' => array(AttributeType::String, 'required' => true, 'label' => 'URL', 'default' => Craft::t('Mediaflow URL')),
-            'username' => array(AttributeType::String, 'required' => true, 'label' => 'Username', 'default' => Craft::t('Username')),
-            'apiKey' => array(AttributeType::String, 'required' => true, 'label' => 'API Key', 'default' => Craft::t('API key'))
+            'url' => array($string, 'required' => true, 'label' => 'URL', 'default' => Craft::t('Mediaflow URL')),
+            'username' => array($string, 'required' => true, 'label' => 'Username', 'default' => Craft::t('Username')),
+            'apiKey' => array($string, 'required' => true, 'label' => 'API Key', 'default' => Craft::t('API key'))
         );
     }
 
diff --git a/README.md b/README.md
index cfd8605..c832261 100644
--- a/README.md
+++ b/README.md
@@ -40,6 +40,9 @@ Craft CMS Keyteq Mediaflow plugin. Read more [Visit Mediaflow!](http://getmediaf
 </noscript>
 ```
 
-### Using Picturefill.js
-```
+If you use Interchange and have set crops for your image you can
+have Mediaflow build the interchange string straightup for you by specifying the crop aliases:
+
+```smarty
+<img data-interchange="{{media.interchange(['default','large'])}}">
 ```
diff --git a/composer.json b/composer.json
index 58be5f7..8c6cef1 100644
--- a/composer.json
+++ b/composer.json
@@ -16,7 +16,7 @@
     ],
     "require": {
         "php": ">=5.3.0",
-        "keyteqlabs/keymedia": "~1.1",
+        "keyteqlabs/keymedia": "~1.2",
         "composer/installers": "~1.0"
     },
     "autoload": {
diff --git a/composer.lock b/composer.lock
index 918cc14..67903fb 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,20 +4,20 @@
         "Read more about it at http://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file",
         "This file is @generated automatically"
     ],
-    "hash": "6b09e52cdcf30f80f42d115da51479db",
+    "hash": "da7dec7c2626742f7c0c782e7865478b",
     "packages": [
         {
             "name": "composer/installers",
-            "version": "v1.0.19",
+            "version": "v1.0.20",
             "source": {
                 "type": "git",
                 "url": "https://github.com/composer/installers.git",
-                "reference": "89d77bfbee79e16653f7162c86e602cc188471db"
+                "reference": "1bff8aa77a18f3616f468ed8000cf86a5725bac3"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/composer/installers/zipball/89d77bfbee79e16653f7162c86e602cc188471db",
-                "reference": "89d77bfbee79e16653f7162c86e602cc188471db",
+                "url": "https://api.github.com/repos/composer/installers/zipball/1bff8aa77a18f3616f468ed8000cf86a5725bac3",
+                "reference": "1bff8aa77a18f3616f468ed8000cf86a5725bac3",
                 "shasum": ""
             },
             "replace": {
@@ -59,6 +59,7 @@
                 "Hurad",
                 "MODX Evo",
                 "OXID",
+                "SMF",
                 "Thelia",
                 "WolfCMS",
                 "agl",
@@ -97,20 +98,20 @@
                 "zend",
                 "zikula"
             ],
-            "time": "2014-11-29 01:29:17"
+            "time": "2015-01-11 03:51:11"
         },
         {
             "name": "keyteqlabs/keymedia",
-            "version": "v1.1.1",
+            "version": "v1.2.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/KeyteqLabs/keymedia-php.git",
-                "reference": "cbb39681dde79ca0e11df29bf16e5b0353a74681"
+                "reference": "a1f03533d6ec737b9089a67ec97b2544bf741b84"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/KeyteqLabs/keymedia-php/zipball/cbb39681dde79ca0e11df29bf16e5b0353a74681",
-                "reference": "cbb39681dde79ca0e11df29bf16e5b0353a74681",
+                "url": "https://api.github.com/repos/KeyteqLabs/keymedia-php/zipball/a1f03533d6ec737b9089a67ec97b2544bf741b84",
+                "reference": "a1f03533d6ec737b9089a67ec97b2544bf741b84",
                 "shasum": ""
             },
             "require": {
@@ -148,7 +149,7 @@
                 }
             ],
             "description": "Keymedia API wrapper in PHP",
-            "time": "2014-12-17 12:32:14"
+            "time": "2015-01-23 13:18:32"
         },
         {
             "name": "mashape/unirest-php",
diff --git a/fieldtypes/Mediaflow_MediaFieldType.php b/fieldtypes/Mediaflow_MediaFieldType.php
index c5175b3..7288732 100644
--- a/fieldtypes/Mediaflow_MediaFieldType.php
+++ b/fieldtypes/Mediaflow_MediaFieldType.php
@@ -8,6 +8,11 @@ public function getName()
         return Craft::t('Mediaflow item');
     }
 
+    public function getSearchKeywords($value)
+    {
+        return 'mediaflow';
+    }
+
     public function getInputHtml($name, $value)
     {
         $id = craft()->templates->namespaceInputId($name);
@@ -17,16 +22,24 @@ public function getInputHtml($name, $value)
         return craft()->templates->render('mediaflow/input', array(
             'id' => $id,
             'name'  => $name,
+            'settings' => $this->getSettings(),
             'value' => $value ? $value->getAttributes() : $emptyDefaults,
             'emptyDefaults' => $emptyDefaults
         ));
     }
 
+    public function getStaticHtml($value)
+    {
+        $inputHtml = $this->getInputHtml($this->model->attributes['handle'], $value);
+        $inputHtml = preg_replace('/<(?:input|textarea|select|button)\s[^>]*/i', '$0 disabled', $inputHtml);
+
+        return $inputHtml;
+    }
+
     public function prepValue($value) {
         if (!$value) {
             return null;
         }
-        $data = array();
         $copy = array(
             'name' => 'name',
             'host' => 'host',
@@ -36,13 +49,19 @@ public function prepValue($value) {
             'thumbnailUrl' => 'thumb',
             'thumb' => 'thumb',
             '_id' => 'id',
-            'id' => 'id'
+            'id' => 'id',
+            'version' => 'version',
+            'versions' => 'versions',
+            'urls' => 'urls'
         );
+        $data = array();
         foreach ($copy as $now => $key) {
             if (isset($value[$now])) {
                 $data[$key] = $value[$now];
             }
         }
+        $data['fieldtype-settings'] = $this->getSettings();
+        $data['versions'] = $data['fieldtype-settings']['versions'];
         if (isset($value['file'])) {
             $file = $value['file'];
             $data['file'] = array(
@@ -56,6 +75,13 @@ public function prepValue($value) {
             );
         }
         $model = Mediaflow_MediaModel::populateModel($data);
+        if (!isset($data['shareUrl'])) {
+            $model->shareUrl = $model->url(array(
+                'width' => 2000,
+                'height' => 2000,
+                'crop' => false
+            ));
+        }
         return $model;
     }
 
@@ -70,6 +96,31 @@ public function prepValueFromPost($value)
         return $value;
     }
 
+    public function prepSettings($settings)
+    {
+        return array(
+            'versions' => json_decode($settings['versions']) ?: array()
+        );
+    }
+
+    public function defineSettings()
+    {
+        return array('versions' => AttributeType::Mixed);
+    }
+
+    /**
+	 * @inheritDoc ISavableComponentType::getSettingsHtml()
+	 *
+	 * @return string|null
+	 */
+	public function getSettingsHtml()
+	{
+		// If they are both selected or nothing is selected, the select showBoth.
+        return craft()->templates->render('mediaflow/fieldtype-settings', array(
+			'settings' => $this->getSettings()
+		));
+	}
+
     public function defineContentAttribute()
     {
         return AttributeType::Mixed;
diff --git a/models/Mediaflow_MediaModel.php b/models/Mediaflow_MediaModel.php
index 1a4b401..fea806d 100644
--- a/models/Mediaflow_MediaModel.php
+++ b/models/Mediaflow_MediaModel.php
@@ -1,5 +1,6 @@
 <?php
 namespace Craft;
+use Keyteq\Keymedia\KeymediaClient;
 
 class Mediaflow_MediaModel extends BaseModel
 {
@@ -18,10 +19,80 @@ protected function defineAttributes()
 			'uploaded'    => AttributeType::Number,
 			'shareUrl'    => AttributeType::String,
 			'file' => AttributeType::Mixed,
+			'version' => AttributeType::Mixed,
+			'versions' => AttributeType::Mixed,
+			'urls' => AttributeType::Mixed,
 		));
 	}
 
-    public function url(array $options = array()) {
+    public function saveVersion($name, $slug, $checksum)
+    {
+        if (!isset($this->version[$name])) {
+            return null;
+        }
+        $data = $this->version[$name];
+        if (!is_array($data)) {
+            return null;
+        }
+        if (!isset($data['coords'])) {
+            $data = array('coords' => $data, 'width'=>100,'height'=>100);
+        }
+        list($x, $y, $w, $h) = $data['coords'];
+        list($basename) = explode('.', $this->name);
+        $hash = $this->getHash(array($x, $x+$w, $y, $y+$h));
+        if ($hash === $checksum) {
+            return null;
+        }
+        $payload = array(
+            'slug' => $slug . '-' . $basename . '-' . $name,
+            'width' => $data['width'],
+            'height' => $data['height'],
+            'coords' => array($x, $y, $x + $w, $y + $h)
+        );
+        $result = $this->_client()->addMediaVersion($this->id, $payload);
+        $response = $result['version'];
+        $response['hash'] = $hash;
+        return $response;
+    }
+
+    public function getHash($coords)
+    {
+        return md5(implode('-', $coords));
+    }
+
+    /**
+     * Example usage:
+     * <img data-interchange="{{image.interchange(['default','large'])}}">
+     * This only works if you have specified crops with these names, and those crops have been set
+     */
+    public function interchange($versions = array())
+    {
+        $output = array();
+        foreach ($versions as $name) {
+            $output[] = '[' . $this->versionUrl($name) . " ($name)]";
+        }
+        return implode(', ', $output);
+    }
+
+    public function versionUrl($name)
+    {
+        if (isset($this->urls[$name])) {
+            $data = $this->urls[$name]; $host = craft()->plugins->getPlugin('mediaflow')->getSettings()->url;
+            $path = $data['media'] . '/' . $data['slug'];
+            return $host . $path . $this->file['ending'];
+        }
+        else {
+            $version = $this->versions[$name];
+            list($width, $height) = $version;
+            return $this->url(compact('width', 'height'));
+        }
+    }
+
+    public function url($options = array())
+    {
+        if (is_string($options)) {
+            return $this->versionUrl($options);
+        }
         $options += array(
             'width' => false,
             'height' => false,
@@ -52,4 +123,9 @@ public function url(array $options = array()) {
         }
         return $url;
     }
+
+    protected function _client() {
+        $s = craft()->plugins->getPlugin('mediaflow')->getSettings();
+        return new KeymediaClient($s->username, $s->url, $s->apiKey);
+    }
 }
diff --git a/package.json b/package.json
index 960e623..1eecfb2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mediaflow-craft",
-  "version": "0.0.6",
+  "version": "1.0.0-rc1",
   "description": "Mediaflow plugin for Craft",
   "main": "index.js",
   "scripts": {
diff --git a/resources/_mixin.scss b/resources/_mixin.scss
index c327070..8e50f42 100644
--- a/resources/_mixin.scss
+++ b/resources/_mixin.scss
@@ -33,7 +33,6 @@
 	$color: #666;
 	background-color: #eee;
 	background-image: linear-gradient(45deg, $color 25%, transparent 25%, transparent 75%, $color 75%, $color), 
-	linear-gradient(45deg, $color 25%, transparent 25%, transparent 75%, $color 75%, $color);
-	background-size: 8px;
-	background-position:0 0, 4px 4px;
+	linear-gradient(135deg, $color 25%, transparent 25%, transparent 75%, $color 75%, $color);
+	background-size: 16px 16px;
 }
diff --git a/resources/jcrop.css b/resources/jcrop.css
new file mode 100644
index 0000000..5f7f639
--- /dev/null
+++ b/resources/jcrop.css
@@ -0,0 +1,352 @@
+/*! Jcrop.css v2.0.0-RC1 - build: 20130909
+ *  Copyright 2008-2013 Tapmodo Interactive LLC
+ *  Free software under MIT License
+ **/
+
+/*
+  The outer-most container in a typical Jcrop instance
+  If you are having difficulty with formatting related to styles
+  on a parent element, place any fixes here or in a like selector
+
+  You can also style this element if you want to add a border, etc
+  A better method for styling can be seen below with .jcrop-light
+  (Add a class to the holder and style elements for that extended class)
+*/
+.jcrop-active {
+  direction: ltr;
+  text-align: left;
+  /* IE10 touch compatibility */
+  -ms-touch-action: none;
+}
+/* Selection Borders */
+.jcrop-border {
+  background: #ffffff url("Jcrop.gif");
+  line-height: 1px !important;
+  font-size: 0 !important;
+  overflow: hidden;
+  position: absolute;
+  filter: alpha(opacity=50) !important;
+  opacity: 0.5 !important;
+}
+.jcrop-border.ord-w,
+.jcrop-border.ord-e,
+.jcrop-border.ord-n {
+  top: 0px;
+}
+.jcrop-border.ord-n,
+.jcrop-border.ord-s {
+  left: 0px !important;
+  width: 100%;
+  height: 1px !important;
+}
+.jcrop-border.ord-w,
+.jcrop-border.ord-e {
+  height: 100%;
+  width: 1px !important;
+}
+.jcrop-border.ord-e {
+  right: 0;
+}
+.jcrop-border.ord-s {
+  bottom: 0;
+}
+.jcrop-selection {
+  position: absolute;
+}
+.jcrop-box {
+  display: block;
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: 0;
+  z-index: 15;
+}
+.jcrop-box:focus {
+  outline: 1px rgba(128, 128, 128, 0.65) dotted;
+}
+.jcrop-active,
+.jcrop-box {
+  position: relative;
+}
+.jcrop-box {
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+  cursor: move;
+}
+/* Selection Handles */
+.jcrop-handle {
+  z-index: 10;
+  background-color: rgba(49, 28, 28, 0.58);
+  border: 1px #eeeeee solid;
+  width: 8px;
+  height: 8px;
+  font-size: 0;
+  position: absolute;
+  filter: alpha(opacity=80) !important;
+  opacity: 0.8 !important;
+}
+.jcrop-handle.ord-n {
+  left: 50%;
+  margin-left: -5px;
+  margin-top: -5px;
+  top: 0;
+  cursor: n-resize;
+}
+.jcrop-handle.ord-s {
+  bottom: 0;
+  left: 50%;
+  margin-bottom: -5px;
+  margin-left: -5px;
+  cursor: s-resize;
+}
+.jcrop-handle.ord-e {
+  margin-right: -5px;
+  margin-top: -5px;
+  right: 0;
+  top: 50%;
+  cursor: e-resize;
+}
+.jcrop-handle.ord-w {
+  left: 0;
+  margin-left: -5px;
+  margin-top: -5px;
+  top: 50%;
+  cursor: w-resize;
+}
+.jcrop-handle.ord-nw {
+  left: 0;
+  margin-left: -5px;
+  margin-top: -5px;
+  top: 0;
+  cursor: nw-resize;
+}
+.jcrop-handle.ord-ne {
+  margin-right: -5px;
+  margin-top: -5px;
+  right: 0;
+  top: 0;
+  cursor: ne-resize;
+}
+.jcrop-handle.ord-se {
+  bottom: 0;
+  margin-bottom: -5px;
+  margin-right: -5px;
+  right: 0;
+  cursor: se-resize;
+}
+.jcrop-handle.ord-sw {
+  bottom: 0;
+  left: 0;
+  margin-bottom: -5px;
+  margin-left: -5px;
+  cursor: sw-resize;
+}
+/* Larger Selection Handles for Touch */
+.jcrop-touch .jcrop-handle {
+  z-index: 10;
+  background-color: rgba(49, 28, 28, 0.58);
+  border: 1px #eeeeee solid;
+  width: 16px;
+  height: 16px;
+  font-size: 0;
+  position: absolute;
+  filter: alpha(opacity=80) !important;
+  opacity: 0.8 !important;
+}
+.jcrop-touch .jcrop-handle.ord-n {
+  left: 50%;
+  margin-left: -9px;
+  margin-top: -9px;
+  top: 0;
+  cursor: n-resize;
+}
+.jcrop-touch .jcrop-handle.ord-s {
+  bottom: 0;
+  left: 50%;
+  margin-bottom: -9px;
+  margin-left: -9px;
+  cursor: s-resize;
+}
+.jcrop-touch .jcrop-handle.ord-e {
+  margin-right: -9px;
+  margin-top: -9px;
+  right: 0;
+  top: 50%;
+  cursor: e-resize;
+}
+.jcrop-touch .jcrop-handle.ord-w {
+  left: 0;
+  margin-left: -9px;
+  margin-top: -9px;
+  top: 50%;
+  cursor: w-resize;
+}
+.jcrop-touch .jcrop-handle.ord-nw {
+  left: 0;
+  margin-left: -9px;
+  margin-top: -9px;
+  top: 0;
+  cursor: nw-resize;
+}
+.jcrop-touch .jcrop-handle.ord-ne {
+  margin-right: -9px;
+  margin-top: -9px;
+  right: 0;
+  top: 0;
+  cursor: ne-resize;
+}
+.jcrop-touch .jcrop-handle.ord-se {
+  bottom: 0;
+  margin-bottom: -9px;
+  margin-right: -9px;
+  right: 0;
+  cursor: se-resize;
+}
+.jcrop-touch .jcrop-handle.ord-sw {
+  bottom: 0;
+  left: 0;
+  margin-bottom: -9px;
+  margin-left: -9px;
+  cursor: sw-resize;
+}
+/* Selection Dragbars */
+.jcrop-dragbar {
+  font-size: 0;
+  z-index: 8;
+  position: absolute;
+}
+.jcrop-dragbar.ord-n,
+.jcrop-dragbar.ord-s {
+  height: 8px !important;
+  width: 100%;
+}
+.jcrop-dragbar.ord-e,
+.jcrop-dragbar.ord-w {
+  top: 0px;
+  height: 100%;
+  width: 8px !important;
+}
+.jcrop-dragbar.ord-n {
+  margin-top: -5px;
+  cursor: n-resize;
+  top: 0px;
+}
+.jcrop-dragbar.ord-s {
+  bottom: 0;
+  margin-bottom: -5px;
+  cursor: s-resize;
+}
+.jcrop-dragbar.ord-e {
+  margin-right: -5px;
+  right: 0;
+  cursor: e-resize;
+}
+.jcrop-dragbar.ord-w {
+  margin-left: -5px;
+  cursor: w-resize;
+}
+/* Shading panels */
+.jcrop-shades {
+  position: relative;
+  top: 0;
+  left: 0;
+  z-index: 10;
+}
+.jcrop-shades div {
+  cursor: crosshair;
+}
+/* Various special states */
+.jcrop-noresize .jcrop-dragbar,
+.jcrop-noresize .jcrop-handle {
+  display: none;
+}
+.jcrop-selection.jcrop-nodrag .jcrop-box,
+.jcrop-nodrag .jcrop-shades div {
+  cursor: default;
+}
+/* The "jcrop-light" class/extension */
+.jcrop-light .jcrop-border {
+  background: #ffffff;
+  filter: alpha(opacity=70) !important;
+  opacity: .70!important;
+}
+.jcrop-light .jcrop-handle {
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  background-color: #000000;
+  border-color: #ffffff;
+  border-radius: 3px;
+}
+/* The "jcrop-dark" class/extension */
+.jcrop-dark .jcrop-border {
+  background: #000000;
+  filter: alpha(opacity=70) !important;
+  opacity: 0.7 !important;
+}
+.jcrop-dark .jcrop-handle {
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  background-color: #ffffff;
+  border-color: #000000;
+  border-radius: 3px;
+}
+/* Simple macro to turn off the antlines */
+.solid-line .jcrop-border {
+  background: #ffffff;
+}
+.jcrop-thumb {
+  position: absolute;
+  overflow: hidden;
+  z-index: 35;
+}
+/* Fix for twitter bootstrap et al. */
+.jcrop-active img,
+.jcrop-thumb img,
+.jcrop-thumb canvas {
+  min-width: none;
+  min-height: none;
+  max-width: none;
+  max-height: none;
+}
+/* Improved multiple selection styles - in progress */
+.jcrop-hl-active .jcrop-border {
+  filter: alpha(opacity=20) !important;
+  opacity: .20!important;
+}
+.jcrop-hl-active .jcrop-handle {
+  filter: alpha(opacity=10) !important;
+  opacity: .10!important;
+}
+.jcrop-hl-active .jcrop-selection:hover {
+  /*
+    .jcrop-handle {
+      filter:Alpha(opacity=35)!important;
+      opacity:.35!important;
+    }
+    */
+
+}
+.jcrop-hl-active .jcrop-selection:hover .jcrop-border {
+  background-color: #ccc;
+  filter: alpha(opacity=50) !important;
+  opacity: .50!important;
+}
+.jcrop-hl-active .jcrop-selection.jcrop-current .jcrop-border {
+  background: #808080 url('Jcrop.gif');
+  opacity: .35!important;
+  filter: alpha(opacity=35) !important;
+}
+.jcrop-hl-active .jcrop-selection.jcrop-current .jcrop-handle {
+  filter: alpha(opacity=30) !important;
+  opacity: .30!important;
+}
+.jcrop-hl-active .jcrop-selection.jcrop-focus .jcrop-border {
+  background: url('Jcrop.gif');
+  opacity: .65!important;
+  filter: alpha(opacity=65) !important;
+}
+.jcrop-hl-active .jcrop-selection.jcrop-focus .jcrop-handle {
+  filter: alpha(opacity=60) !important;
+  opacity: .60!important;
+}
diff --git a/resources/jcrop.js b/resources/jcrop.js
new file mode 100644
index 0000000..dce8d4f
--- /dev/null
+++ b/resources/jcrop.js
@@ -0,0 +1,1929 @@
+/*! Jcrop.js v2.0.0-RC1 - build: 20130914
+ *  @copyright 2008-2013 Tapmodo Interactive LLC
+ *  @license Free software under MIT License
+ *  @website http://jcrop.org/
+ **/
+(function($){
+  'use strict';
+
+  /**
+   *  BackoffFilter
+   *  move out-of-bounds selection into allowed position at same size
+   */
+  var BackoffFilter = function(){
+    this.minw = 40;
+    this.minh = 40;
+    this.maxw = 0;
+    this.maxh = 0;
+    this.core = null;
+  };
+  $.extend(BackoffFilter.prototype,{
+    tag: 'backoff',
+    priority: 22,
+    filter: function(b){
+      var r = this.bound;
+
+      if (b.x < r.minx) { b.x = r.minx; b.x2 = b.w + b.x; }
+      if (b.y < r.miny) { b.y = r.miny; b.y2 = b.h + b.y; }
+      if (b.x2 > r.maxx) { b.x2 = r.maxx; b.x = b.x2 - b.w; }
+      if (b.y2 > r.maxy) { b.y2 = r.maxy; b.y = b.y2 - b.h; }
+
+      return b;
+    },
+    refresh: function(sel){
+      this.elw = sel.core.container.width();
+      this.elh = sel.core.container.height();
+      this.bound = {
+        minx: 0 + sel.edge.w,
+        miny: 0 + sel.edge.n,
+        maxx: this.elw + sel.edge.e,
+        maxy: this.elh + sel.edge.s
+      };
+    }
+  });
+
+  /**
+   *  ConstrainFilter
+   *  a filter to constrain crop selection to bounding element
+   */
+  var ConstrainFilter = function(){
+    this.core = null;
+  };
+  $.extend(ConstrainFilter.prototype,{
+    tag: 'constrain',
+    priority: 5,
+    filter: function(b,ord){
+      if (ord == 'move') {
+        if (b.x < this.minx) { b.x = this.minx; b.x2 = b.w + b.x; }
+        if (b.y < this.miny) { b.y = this.miny; b.y2 = b.h + b.y; }
+        if (b.x2 > this.maxx) { b.x2 = this.maxx; b.x = b.x2 - b.w; }
+        if (b.y2 > this.maxy) { b.y2 = this.maxy; b.y = b.y2 - b.h; }
+      } else {
+        if (b.x < this.minx) { b.x = this.minx; }
+        if (b.y < this.miny) { b.y = this.miny; }
+        if (b.x2 > this.maxx) { b.x2 = this.maxx; }
+        if (b.y2 > this.maxy) { b.y2 = this.maxy; }
+      }
+      b.w = b.x2 - b.x;
+      b.h = b.y2 - b.y;
+      return b;
+    },
+    refresh: function(sel){
+      this.elw = sel.core.container.width();
+      this.elh = sel.core.container.height();
+      this.minx = 0 + sel.edge.w;
+      this.miny = 0 + sel.edge.n;
+      this.maxx = this.elw + sel.edge.e;
+      this.maxy = this.elh + sel.edge.s;
+    }
+  });
+
+  /**
+   *  ExtentFilter
+   *  a filter to implement minimum or maximum size
+   */
+  var ExtentFilter = function(){
+    this.core = null;
+  };
+  $.extend(ExtentFilter.prototype,{
+    tag: 'extent',
+    priority: 12,
+    offsetFromCorner: function(corner,box,b){
+      var w = box[0], h = box[1];
+      switch(corner){
+        case 'bl': return [ b.x2 - w, b.y, w, h ];
+        case 'tl': return [ b.x2 - w , b.y2 - h, w, h ];
+        case 'br': return [ b.x, b.y, w, h ];
+        case 'tr': return [ b.x, b.y2 - h, w, h ];
+      }
+    },
+    getQuadrant: function(s){
+      var relx = s.opposite[0]-s.offsetx
+      var rely = s.opposite[1]-s.offsety;
+
+      if ((relx < 0) && (rely < 0)) return 'br';
+        else if ((relx >= 0) && (rely >= 0)) return 'tl';
+        else if ((relx < 0) && (rely >= 0)) return 'tr';
+        return 'bl';
+    },
+    filter: function(b,ord,sel){
+
+      if (ord == 'move') return b;
+
+      var w = b.w, h = b.h, st = sel.state, r = this.limits;
+      var quad = st? this.getQuadrant(st): 'br';
+
+      if (r.minw && (w < r.minw)) w = r.minw;
+      if (r.minh && (h < r.minh)) h = r.minh;
+      if (r.maxw && (w > r.maxw)) w = r.maxw;
+      if (r.maxh && (h > r.maxh)) h = r.maxh;
+
+      if ((w == b.w) && (h == b.h)) return b;
+
+      return Jcrop.wrapFromXywh(this.offsetFromCorner(quad,[w,h],b));
+    },
+    refresh: function(sel){
+      this.elw = sel.core.container.width();
+      this.elh = sel.core.container.height();
+
+      this.limits = {
+        minw: sel.minSize[0],
+        minh: sel.minSize[1],
+        maxw: sel.maxSize[0],
+        maxh: sel.maxSize[1]
+      };
+    }
+  });
+
+  /**
+   *  GridFilter
+   *  a rudimentary grid effect
+   */
+  var GridFilter = function(){
+    this.stepx = 1;
+    this.stepy = 1;
+    this.core = null;
+  };
+  $.extend(GridFilter.prototype,{
+    tag: 'grid',
+    priority: 19,
+    filter: function(b){
+      
+      var n = {
+        x: Math.round(b.x / this.stepx) * this.stepx,
+        y: Math.round(b.y / this.stepy) * this.stepy,
+        x2: Math.round(b.x2 / this.stepx) * this.stepx,
+        y2: Math.round(b.y2 / this.stepy) * this.stepy
+      };
+      
+      n.w = n.x2 - n.x;
+      n.h = n.y2 - n.y;
+
+      return n;
+    }
+  });
+
+  /**
+   *  RatioFilter
+   *  implements aspectRatio locking
+   */
+  var RatioFilter = function(){
+    this.ratio = 0;
+    this.core = null;
+  };
+  $.extend(RatioFilter.prototype,{
+    tag: 'ratio',
+    priority: 15,
+    offsetFromCorner: function(corner,box,b){
+      var w = box[0], h = box[1];
+      switch(corner){
+        case 'bl': return [ b.x2 - w, b.y, w, h ];
+        case 'tl': return [ b.x2 - w , b.y2 - h, w, h ];
+        case 'br': return [ b.x, b.y, w, h ];
+        case 'tr': return [ b.x, b.y2 - h, w, h ];
+      }
+    },
+    getBoundRatio: function(b,quad){
+      var box = Jcrop.getLargestBox(this.ratio,b.w,b.h);
+      return Jcrop.wrapFromXywh(this.offsetFromCorner(quad,box,b));
+    },
+    getQuadrant: function(s){
+      var relx = s.opposite[0]-s.offsetx
+      var rely = s.opposite[1]-s.offsety;
+
+      if ((relx < 0) && (rely < 0)) return 'br';
+        else if ((relx >= 0) && (rely >= 0)) return 'tl';
+        else if ((relx < 0) && (rely >= 0)) return 'tr';
+        return 'bl';
+    },
+    filter: function(b,ord,sel){
+
+      if (!this.ratio) return b;
+
+      var rt = b.w / b.h;
+      var st = sel.state;
+
+      var quad = st? this.getQuadrant(st): 'br';
+      ord = ord || 'se';
+
+      if (ord == 'move') return b;
+
+      switch(ord) {
+        case 'n':
+          b.x2 = this.elw;
+          b.w = b.x2 - b.x;
+          quad = 'tr';
+          break;
+        case 's':
+          b.x2 = this.elw;
+          b.w = b.x2 - b.x;
+          quad = 'br';
+          break;
+        case 'e':
+          b.y2 = this.elh;
+          b.h = b.y2 - b.y;
+          quad = 'br';
+          break;
+        case 'w':
+          b.y2 = this.elh;
+          b.h = b.y2 - b.y;
+          quad = 'bl';
+          break;
+      }
+
+      return this.getBoundRatio(b,quad);
+    },
+    refresh: function(sel){
+      this.ratio = sel.aspectRatio;
+      this.elw = sel.core.container.width();
+      this.elh = sel.core.container.height();
+    }
+  });
+
+  /**
+   *  RoundFilter
+   *  rounds coordinate values to integers
+   */
+  var RoundFilter = function(){
+    this.core = null;
+  };
+  $.extend(RoundFilter.prototype,{
+    tag: 'round',
+    priority: 90,
+    filter: function(b){
+      
+      var n = {
+        x: Math.round(b.x),
+        y: Math.round(b.y),
+        x2: Math.round(b.x2),
+        y2: Math.round(b.y2)
+      };
+      
+      n.w = n.x2 - n.x;
+      n.h = n.y2 - n.y;
+
+      return n;
+    }
+  });
+
+  /**
+   *  ShadeFilter
+   *  A filter that implements div-based shading on any element
+   *
+   *  The shading you see is actually four semi-opaque divs
+   *  positioned inside the container, around the selection
+   */
+  var ShadeFilter = function(opacity,color){
+    this.color = color || 'black';
+    this.opacity = opacity || 0.5;
+    this.core = null;
+    this.shades = {};
+  };
+  $.extend(ShadeFilter.prototype,{
+    tag: 'shader',
+    fade: true,
+    fadeEasing: 'swing',
+    fadeSpeed: 320,
+    priority: 95,
+    init: function(){
+      var t = this;
+
+      if (!t.attached) {
+        t.visible = false;
+
+        t.container = $('<div />').addClass(t.core.opt.css_shades)
+          .prependTo(this.core.container).hide();
+
+        t.elh = this.core.container.height();
+        t.elw = this.core.container.width();
+
+        t.shades = {
+          top: t.createShade(),
+          right: t.createShade(),
+          left: t.createShade(),
+          bottom: t.createShade()
+        };
+
+        t.attached = true;
+      }
+    },
+    destroy: function(){
+      this.container.remove();
+    },
+    setColor: function(color,instant){
+      var t = this;
+
+      if (color == t.color) return t;
+
+      this.color = color;
+      var colorfade = Jcrop.supportsColorFade();
+      $.each(t.shades,function(u,i){
+        if (!t.fade || instant || !colorfade) i.css('backgroundColor',color);
+          else i.animate({backgroundColor:color},{queue:false,duration:t.fadeSpeed,easing:t.fadeEasing});
+      });
+      return t;
+    },
+    setOpacity: function(opacity,instant){
+      var t = this;
+
+      if (opacity == t.opacity) return t;
+
+      t.opacity = opacity;
+      $.each(t.shades,function(u,i){
+        if (!t.fade || instant) i.css({opacity:opacity});
+          else i.animate({opacity:opacity},{queue:false,duration:t.fadeSpeed,easing:t.fadeEasing});
+      });
+      return t;
+    },
+    createShade: function(){
+      return $('<div />').css({
+        position: 'absolute',
+        backgroundColor: this.color,
+        opacity: this.opacity
+      }).appendTo(this.container);
+    },
+    refresh: function(sel){
+      var m = this.core, s = this.shades;
+
+      this.setColor(sel.bgColor?sel.bgColor:this.core.opt.bgColor);
+      this.setOpacity(sel.bgOpacity?sel.bgOpacity:this.core.opt.bgOpacity);
+        
+      this.elh = m.container.height();
+      this.elw = m.container.width();
+      s.right.css('height',this.elh+'px');
+      s.left.css('height',this.elh+'px');
+    },
+    filter: function(b,ord,sel){
+
+      if (!sel.active) return b;
+
+      var t = this,
+        s = t.shades;
+      
+      s.top.css({
+        left: Math.round(b.x)+'px',
+        width: Math.round(b.w)+'px',
+        height: Math.round(b.y)+'px'
+      });
+      s.bottom.css({
+        top: Math.round(b.y2)+'px',
+        left: Math.round(b.x)+'px',
+        width: Math.round(b.w)+'px',
+        height: (t.elh-Math.round(b.y2))+'px'
+      });
+      s.right.css({
+        left: Math.round(b.x2)+'px',
+        width: (t.elw-Math.round(b.x2))+'px'
+      });
+      s.left.css({
+        width: Math.round(b.x)+'px'
+      });
+
+      if (!t.visible) {
+        t.container.show();
+        t.visible = true;
+      }
+
+      return b;
+    }
+  });
+
+  /**
+   *  CropAnimator
+   *  manages smooth cropping animation
+   *
+   *  This object is called internally to manage animation.
+   *  An in-memory div is animated and a progress callback
+   *  is used to update the selection coordinates of the
+   *  visible selection in realtime.
+   */
+  // var CropAnimator = function(selection){{{
+  var CropAnimator = function(selection){
+    this.selection = selection;
+    this.core = selection.core;
+  };
+  // }}}
+
+  $.extend(CropAnimator.prototype,{
+    // getElement: function(){{{
+    getElement: function(){
+      var b = this.selection.get();
+
+      return $('<div />')
+        .css({
+          position: 'absolute',
+          top: b.y+'px',
+          left: b.x+'px',
+          width: b.w+'px',
+          height: b.h+'px'
+        });
+    },
+    // }}}
+    // animate: function(x,y,w,h,cb){{{
+    animate: function(x,y,w,h,cb){
+      var t = this;
+
+      t.selection.allowResize(false);
+
+      t.getElement().animate({
+        top: y+'px',
+        left: x+'px',
+        width: w+'px',
+        height: h+'px'
+      },{
+        easing: t.core.opt.animEasing,
+        duration: t.core.opt.animDuration,
+        complete: function(){
+          t.selection.allowResize(true);
+          cb && cb.call(this);
+        },
+        progress: function(anim){
+          var props = {}, i, tw = anim.tweens;
+
+          for(i=0;i<tw.length;i++){
+            props[tw[i].prop] = tw[i].now; }
+
+          var b = {
+            x: parseInt(props.left),
+            y: parseInt(props.top),
+            w: parseInt(props.width),
+            h: parseInt(props.height)
+          };
+
+          b.x2 = b.x + b.w;
+          b.y2 = b.y + b.h;
+
+          t.selection.updateRaw(b,'se');
+        }
+      });
+    }
+    // }}}
+  });
+
+  /**
+   *  DragState
+   *  an object that handles dragging events
+   *
+   *  This object is used by the built-in selection object to
+   *  track a dragging operation on a selection
+   */
+  // var DragState = function(e,selection,ord){{{
+  var DragState = function(e,selection,ord){
+    var t = this;
+
+    t.x = e.pageX;
+    t.y = e.pageY;
+
+    t.selection = selection;
+    t.eventTarget = selection.core.opt.dragEventTarget;
+    t.orig = selection.get();
+
+    selection.callFilterFunction('refresh');
+
+    var p = selection.core.container.position();
+    t.elx = p.left;
+    t.ely = p.top;
+
+    t.offsetx = 0;
+    t.offsety = 0;
+    t.ord = ord;
+    t.opposite = t.getOppositeCornerOffset();
+
+    t.initEvents(e);
+
+  };
+  // }}}
+
+  $.extend(DragState.prototype,{
+    // getOppositeCornerOffset: function(){{{
+    // Calculate relative offset of locked corner
+    getOppositeCornerOffset: function(){
+
+      var o = this.orig;
+      var relx = this.x - this.elx - o.x;
+      var rely = this.y - this.ely - o.y;
+
+      switch(this.ord){
+        case 'nw':
+        case 'w':
+          return [ o.w - relx, o.h - rely ];
+          return [ o.x + o.w, o.y + o.h ];
+
+        case 'sw':
+          return [ o.w - relx, -rely ];
+          return [ o.x + o.w, o.y ];
+
+        case 'se':
+        case 's':
+        case 'e':
+          return [ -relx, -rely ];
+          return [ o.x, o.y ];
+
+        case 'ne':
+        case 'n':
+          return [ -relx, o.h - rely ];
+          return [ o.w, o.y + o.h ];
+      }
+
+      return [ null, null ];
+    },
+    // }}}
+    // initEvents: function(e){{{
+    initEvents: function(e){
+      $(this.eventTarget)
+        .on('mousemove.jcrop',this.createDragHandler())
+        .on('mouseup.jcrop',this.createStopHandler());
+    },
+    // }}}
+    // dragEvent: function(e){{{
+    dragEvent: function(e){
+      this.offsetx = e.pageX - this.x;
+      this.offsety = e.pageY - this.y;
+      this.selection.updateRaw(this.getBox(),this.ord);
+    },
+    // }}}
+    // endDragEvent: function(e){{{
+    endDragEvent: function(e){
+      var sel = this.selection;
+      sel.element.trigger('cropend',[sel,sel.core.unscale(sel.get())]);
+    },
+    // }}}
+    // createStopHandler: function(){{{
+    createStopHandler: function(){
+      var t = this;
+      return function(e){
+        $(t.eventTarget).off('.jcrop');
+        t.endDragEvent(e);
+        return false;
+      };
+    },
+    // }}}
+    // createDragHandler: function(){{{
+    createDragHandler: function(){
+      var t = this;
+      return function(e){
+        t.dragEvent(e);
+        return false;
+      };
+    },
+    // }}}
+    //update: function(x,y){{{
+    update: function(x,y){
+      var t = this;
+      t.offsetx = x - t.x;
+      t.offsety = y - t.y;
+    },
+    //}}}
+    //resultWrap: function(d){{{
+    resultWrap: function(d){
+      var b = {
+          x: Math.min(d[0],d[2]),
+          y: Math.min(d[1],d[3]),
+          x2: Math.max(d[0],d[2]),
+          y2: Math.max(d[1],d[3])
+        };
+
+      b.w = b.x2 - b.x;
+      b.h = b.y2 - b.y;
+
+      return b;
+    },
+    //}}}
+    //getBox: function(){{{
+    getBox: function(){
+      var t = this;
+      var o = t.orig;
+      var _c = { x2: o.x + o.w, y2: o.y + o.h };
+      switch(t.ord){
+        case 'n': return t.resultWrap([ o.x, t.offsety + o.y, _c.x2, _c.y2 ]);
+        case 's': return t.resultWrap([ o.x, o.y, _c.x2, t.offsety + _c.y2 ]);
+        case 'e': return t.resultWrap([ o.x, o.y, t.offsetx + _c.x2, _c.y2 ]);
+        case 'w': return t.resultWrap([ o.x + t.offsetx, o.y, _c.x2, _c.y2 ]);
+        case 'sw': return t.resultWrap([ t.offsetx + o.x, o.y, _c.x2, t.offsety + _c.y2 ]);
+        case 'se': return t.resultWrap([ o.x, o.y, t.offsetx + _c.x2, t.offsety + _c.y2 ]);
+        case 'ne': return t.resultWrap([ o.x, t.offsety + o.y, t.offsetx + _c.x2, _c.y2 ]);
+        case 'nw': return t.resultWrap([ t.offsetx + o.x, t.offsety + o.y, _c.x2, _c.y2 ]);
+        case 'move':
+          _c.nx = o.x + t.offsetx;
+          _c.ny = o.y + t.offsety;
+          return t.resultWrap([ _c.nx, _c.ny, _c.nx + o.w, _c.ny + o.h ]);
+      }
+    }
+    //}}}
+  });
+
+  /**
+   *  EventManager
+   *  provides internal event support
+   */
+  var EventManager = function(core){
+    this.core = core;
+  };
+  $.extend(EventManager,{
+    prototype: {
+      on: function(n,cb){ $(this).on(n,cb); },
+      off: function(n){ $(this).off(n); },
+      trigger: function(n){ $(this).trigger(n); }
+    }
+  });
+
+  /**
+   * Image Loader
+   * Reliably pre-loads images
+   */
+  // var ImageLoader = function(src,element,cb){{{
+  var ImageLoader = function(src,element,cb){
+    this.src = src;
+    if (!element) element = new Image;
+    this.element = element;
+    this.callback = cb;
+    this.load();
+  };
+  // }}}
+
+  $.extend(ImageLoader,{
+    // attach: function(el,cb){{{
+    attach: function(el,cb){
+      return new ImageLoader(el.src,el,cb);
+    },
+    // }}}
+    // prototype: {{{
+    prototype: {
+      getDimensions: function(){
+        var el = this.element;
+
+        if (el.naturalWidth)
+          return [ el.naturalWidth, el. naturalHeight ];
+
+        if (el.width)
+          return [ el.width, el.height ];
+
+        return null;
+      },
+      fireCallback: function(){
+        this.element.onload = null;
+        if (typeof this.callback == 'function')
+          this.callback.apply(this,this.getDimensions());
+      },
+      isLoaded: function(){
+        return this.element.complete;
+      },
+      load: function(){
+        var t = this;
+        var el = t.element;
+
+        el.src = t.src;
+
+        if (t.isLoaded()) t.fireCallback();
+          else t.element.onload = function(e){
+            t.fireCallback();
+          };
+      }
+    }
+    // }}}
+  });
+  // }}}
+
+  /**
+   * JcropTouch
+   * Detects and enables mobile touch support
+   */
+  // var JcropTouch = function(core){{{
+  var JcropTouch = function(core){
+    this.core = core;
+    this.init();
+  };
+  // }}}
+
+  $.extend(JcropTouch,{
+    // support: function(){{{
+    support: function(){
+      if(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch)
+        return true;
+    },
+    // }}}
+    prototype: {
+      // init: function(){{{
+      init: function(){
+        var t = this,
+          p = $.Jcrop.component.DragState.prototype;
+
+        // A bit of an ugly hack to make sure we modify prototype
+        // only once, store a key on the prototype
+        if (!p.touch) {
+          t.initEvents();
+          t.shimDragState();
+          t.shimStageDrag();
+          p.touch = true;
+        }
+      },
+      // }}}
+      // shimDragState: function(){{{
+      shimDragState: function(){
+        var t = this;
+        $.Jcrop.component.DragState.prototype.initEvents = function(e){
+          
+          // Attach subsequent drag event handlers based on initial
+          // event type - avoids collecting "pseudo-mouse" events
+          // generated by some mobile browsers in some circumstances
+          if (e.type.substr(0,5) == 'touch') {
+
+            $(this.eventTarget)
+              .on('touchmove.jcrop.jcrop-touch',t.dragWrap(this.createDragHandler()))
+              .on('touchend.jcrop.jcrop-touch',this.createStopHandler());
+
+          }
+          
+          // For other events, use the mouse handlers that
+          // the default DragState.initEvents() method sets...
+          else {
+
+            $(this.eventTarget)
+              .on('mousemove.jcrop',this.createDragHandler())
+              .on('mouseup.jcrop',this.createStopHandler());
+
+          }
+
+        };
+      },
+      // }}}
+      // shimStageDrag: function(){{{
+      shimStageDrag: function(){
+        this.core.container
+          .addClass('jcrop-touch')
+          .on('touchstart.jcrop.jcrop-stage',this.dragWrap(this.core.ui.stage.startDragHandler()));
+      },
+      // }}}
+      // dragWrap: function(cb){{{
+      dragWrap: function(cb){
+        return function(e){
+          e.preventDefault();
+          e.stopPropagation();
+          if (e.type.substr(0,5) == 'touch') {
+            e.pageX = e.originalEvent.changedTouches[0].pageX;
+            e.pageY = e.originalEvent.changedTouches[0].pageY;
+            return cb(e);
+          }
+          return false;
+        };
+      },
+      // }}}
+      // initEvents: function(){{{
+      initEvents: function(){
+        var t = this, c = t.core;
+
+        c.container.on(
+          'touchstart.jcrop.jcrop-touch',
+          '.'+c.opt.css_drag,
+          t.dragWrap(c.startDrag())
+        );
+      }
+      // }}}
+    }
+  });
+
+  /**
+   *  KeyWatcher
+   *  provides keyboard support
+   */
+  // var KeyWatcher = function(core){{{
+  var KeyWatcher = function(core){
+    this.core = core;
+    this.init();
+  };
+  // }}}
+  $.extend(KeyWatcher,{
+    // defaults: {{{
+    defaults: {
+      eventName: 'keydown.jcrop',
+      passthru: [ 9 ],
+      debug: false
+    },
+    // }}}
+    prototype: {
+      // init: function(){{{
+      init: function(){
+        $.extend(this,KeyWatcher.defaults);
+        this.enable();
+      },
+      // }}}
+      // disable: function(){{{
+      disable: function(){
+        this.core.container.off(this.eventName);
+      },
+      // }}}
+      // enable: function(){{{
+      enable: function(){
+        var t = this, m = t.core;
+        m.container.on(t.eventName,function(e){
+          var nudge = e.shiftKey? 16: 2;
+
+          if ($.inArray(e.keyCode,t.passthru) >= 0)
+            return true;
+
+          switch(e.keyCode){
+            case 37: m.nudge(-nudge,0); break;
+            case 38: m.nudge(0,-nudge); break;
+            case 39: m.nudge(nudge,0); break;
+            case 40: m.nudge(0,nudge); break;
+
+            case 46:
+            case 8:
+              m.requestDelete();
+              return false;
+              break;
+
+            default:
+              if (t.debug) console.log('keycode: ' + e.keyCode);
+              break;
+          }
+
+          if (!e.metaKey && !e.ctrlKey)
+            e.preventDefault();
+        });
+      }
+      // }}}
+    }
+  });
+
+  /**
+   * Selection
+   * Built-in selection object
+   */
+  var Selection = function(){};
+
+  $.extend(Selection,{
+    // defaults: {{{
+    defaults: {
+      minSize: [ 8, 8 ],
+      maxSize: [ 0, 0 ],
+      aspectRatio: 0,
+      edge: { n: 0, s: 0, e: 0, w: 0 },
+      bgColor: null,
+      bgOpacity: null,
+      last: null,
+
+      state: null,
+      active: true,
+      linked: true,
+      canDelete: true,
+      canDrag: true,
+      canResize: true,
+      canSelect: true
+    },
+    // }}}
+    prototype: {
+      // init: function(core){{{
+      init: function(core){
+        this.core = core;
+        this.startup();
+        this.linked = this.core.opt.linked;
+        this.attach();
+        this.setOptions(this.core.opt);
+        core.container.trigger('cropcreate',[this]);
+      },
+      // }}}
+      // attach: function(){{{
+      attach: function(){
+        // For extending init() sequence
+      },
+      // }}}
+      // startup: function(){{{
+      startup: function(){
+        var t = this, o = t.core.opt;
+        $.extend(t,Selection.defaults);
+        t.filter = t.core.getDefaultFilters();
+
+        t.element = $('<div />').addClass(o.css_selection).data({ selection: t });
+        t.frame = $('<button />').addClass(o.css_button).data('ord','move');
+        t.element.append(t.frame).appendTo(t.core.container);
+
+        // IE background/draggable hack
+        if (t.core.opt.is_msie) t.frame.css({
+          opacity: 0,
+          backgroundColor: 'white'
+        });
+
+        t.insertElements();
+
+        // Bind focus and blur events for this selection
+        t.frame.on('focus.jcrop',function(e){
+          t.element.trigger('cropfocus',t);
+          t.core.setSelection(t);
+          t.element.addClass('jcrop-focus');
+        }).on('blur.jcrop',function(e){
+          t.element.removeClass('jcrop-focus');
+          t.element.trigger('cropblur',t);
+        });
+      },
+      // }}}
+      // propagate: [{{{
+      propagate: [
+        'canDelete', 'canDrag', 'canResize', 'canSelect',
+        'minSize', 'maxSize', 'aspectRatio', 'edge'
+      ],
+      // }}}
+      // setOptions: function(opt){{{
+      setOptions: function(opt){
+        Jcrop.propagate(this.propagate,opt,this);
+        this.refresh();
+        return this;
+      },
+      // }}}
+      // refresh: function(){{{
+      refresh: function(){
+        this.allowResize();
+        this.allowDrag();
+        this.allowSelect();
+        this.callFilterFunction('refresh');
+        this.updateRaw(this.get(),'se');
+      },
+      // }}}
+      // callFilterFunction: function(f,args){{{
+      callFilterFunction: function(f,args){
+        for(var i=0;i<this.filter.length;i++)
+          if (this.filter[i][f]) this.filter[i][f](this);
+        return this;
+      },
+      // }}}
+      //addFilter: function(filter){{{
+      addFilter: function(filter){
+        filter.core = this.core;
+        if (!this.hasFilter(filter)) {
+          this.filter.push(filter);
+          this.sortFilters();
+          if (filter.init) filter.init();
+          this.refresh();
+        }
+      },
+      //}}}
+      // hasFilter: function(filter){{{
+      hasFilter: function(filter){
+        var i, f = this.filter, n = [];
+        for(i=0;i<f.length;i++) if (f[i] === filter) return true;
+      },
+      // }}}
+      // sortFilters: function(){{{
+      sortFilters: function(){
+        this.filter.sort(
+          function(x,y){ return x.priority - y.priority; }
+        );
+      },
+      // }}}
+      //clearFilters: function(){{{
+      clearFilters: function(){
+        var i, f = this.filter;
+
+        for(var i=0;i<f.length;i++)
+          if (f[i].destroy) f[i].destroy();
+
+        this.filter = [];
+      },
+      //}}}
+      // removeFiltersByTag: function(tag){{{
+      removeFilter: function(tag){
+        var i, f = this.filter, n = [];
+
+        for(var i=0;i<f.length;i++)
+          if ((f[i].tag && (f[i].tag == tag)) || (tag === f[i])){
+            if (f[i].destroy) f[i].destroy();
+          }
+          else n.push(f[i]);
+
+        this.filter = n;
+      },
+      // }}}
+      // runFilters: function(b,ord){{{
+      runFilters: function(b,ord){
+        for(var i=0;i<this.filter.length;i++)
+          b = this.filter[i].filter(b,ord,this);
+        return b;
+      },
+      // }}}
+      //endDrag: function(){{{
+      endDrag: function(){
+        if (this.state) {
+          $(document.body).off('.jcrop');
+          this.focus();
+          this.state = null;
+        }
+      },
+      //}}}
+      // startDrag: function(e,ord){{{
+      startDrag: function(e,ord){
+        var t = this;
+        var m = t.core;
+
+        ord = ord || $(e.target).data('ord');
+
+        this.focus();
+
+        if ((ord == 'move') && t.element.hasClass(t.core.opt.css_nodrag))
+          return false;
+
+        this.state = new Jcrop.component.DragState(e,this,ord);
+        return false;
+      },
+      // }}}
+      // allowSelect: function(v){{{
+      allowSelect: function(v){
+        if (v === undefined) v = this.canSelect;
+
+        if (v && this.canSelect) this.frame.attr('disabled',false);
+          else this.frame.attr('disabled','disabled');
+
+        return this;
+      },
+      // }}}
+      // allowDrag: function(v){{{
+      allowDrag: function(v){
+        var t = this, o = t.core.opt;
+        if (v == undefined) v = t.canDrag;
+
+        if (v && t.canDrag) t.element.removeClass(o.css_nodrag);
+          else t.element.addClass(o.css_nodrag);
+
+        return this;
+      },
+      // }}}
+      // allowResize: function(v){{{
+      allowResize: function(v){
+        var t = this, o = t.core.opt;
+        if (v == undefined) v = t.canResize;
+
+        if (v && t.canResize) t.element.removeClass(o.css_noresize);
+          else t.element.addClass(o.css_noresize);
+
+        return this;
+      },
+      // }}}
+      // remove: function(){{{
+      remove: function(){
+        this.element.trigger('cropremove',this);
+        this.element.remove();
+      },
+      // }}}
+      // toBack: function(){{{
+      toBack: function(){
+        this.active = false;
+        this.element
+          .removeClass('jcrop-current')
+          .removeClass('jcrop-focus')
+          .css({zIndex:20});
+      },
+      // }}}
+      // toFront: function(){{{
+      toFront: function(){
+        this.active = true;
+        this.element
+          .addClass('jcrop-current')
+          .css({zIndex:30});
+        this.callFilterFunction('refresh');
+        this.refresh();
+      },
+      // }}}
+      // redraw: function(b){{{
+      redraw: function(b){
+        this.moveTo(b.x,b.y);
+        this.resize(b.w,b.h);
+        this.last = b;
+        return this;
+      },
+      // }}}
+      // update: function(b,ord){{{
+      update: function(b,ord){
+        return this.updateRaw(this.core.scale(b),ord);
+      },
+      // }}}
+      // update: function(b,ord){{{
+      updateRaw: function(b,ord){
+        b = this.runFilters(b,ord);
+        this.redraw(b);
+        this.element.trigger('cropmove',[this,this.core.unscale(b)]);
+        return this;
+      },
+      // }}}
+      // animateTo: function(box,cb){{{
+      animateTo: function(box,cb){
+        var ca = new Jcrop.component.Animator(this),
+            b = this.core.scale(Jcrop.wrapFromXywh(box));
+
+        ca.animate(b.x,b.y,b.w,b.h,cb);
+      },
+      // }}}
+      // center: function(instant){{{
+      center: function(instant){
+        var b = this.get(), m = this.core;
+        var elw = m.container.width(), elh = m.container.height();
+        var box = [ (elw-b.w)/2, (elh-b.h)/2, b.w, b.h ];
+        return this[instant?'setSelect':'animateTo'](box);
+      },
+      // }}}
+      //createElement: function(type,ord){{{
+      createElement: function(type,ord){
+        return $('<div />').addClass(type+' ord-'+ord).data('ord',ord);
+      },
+      //}}}
+      //moveTo: function(x,y){{{
+      moveTo: function(x,y){
+        this.element.css({top: y+'px', left: x+'px'});
+      },
+      //}}}
+      // blur: function(){{{
+      blur: function(){
+        this.element.blur();
+        return this;
+      },
+      // }}}
+      // focus: function(){{{
+      focus: function(){
+        this.core.setSelection(this);
+        this.frame.focus();
+        return this;
+      },
+      // }}}
+      //resize: function(w,h){{{
+      resize: function(w,h){
+        this.element.css({width: w+'px', height: h+'px'});
+      },
+      //}}}
+      //get: function(){{{
+      get: function(){
+        var b = this.element,
+          o = b.position(),
+          w = b.width(),
+          h = b.height(),
+          rv = { x: o.left, y: o.top };
+
+        rv.x2 = rv.x + w;
+        rv.y2 = rv.y + h;
+        rv.w = w;
+        rv.h = h;
+
+        return rv;
+      },
+      //}}}
+      //insertElements: function(){{{
+      insertElements: function(){
+        var t = this, i,
+          m = t.core,
+          fr = t.element,
+          o = t.core.opt,
+          b = o.borders,
+          h = o.handles,
+          d = o.dragbars;
+
+        for(i=0; i<b.length; i++)
+          fr.append(t.createElement(o.css_borders,b[i]));
+
+        for(i=0; i<d.length; i++)
+          fr.append(t.createElement(o.css_dragbars,d[i]));
+
+        for(i=0; i<h.length; i++)
+          fr.append(t.createElement(o.css_handles,h[i]));
+      }
+      //}}}
+    }
+  });
+
+
+  /**
+   * StageDrag
+   * Facilitates dragging
+   */
+  // var StageDrag = function(manager,opt){{{
+  var StageDrag = function(manager,opt){
+    $.extend(this,StageDrag.defaults,opt || {});
+    this.manager = manager;
+    this.core = manager.core;
+  };
+  // }}}
+  // StageDrag.defaults = {{{
+  StageDrag.defaults = {
+    offset: [ -8, -8 ],
+    active: true,
+    minsize: [ 20, 20 ]
+  };
+  // }}}
+
+  $.extend(StageDrag.prototype,{
+    // start: function(e){{{
+    start: function(e){
+      var c = this.core;
+
+      // Do nothing if allowSelect is off
+      if (!c.opt.allowSelect) return false;
+
+      // Also do nothing if we can't draw any more selections
+      if (c.opt.multi && c.opt.multiMax && (c.ui.multi.length >= c.opt.multiMax)) return false;
+
+      // calculate a few variables for this drag operation
+      var o = $(e.currentTarget).offset();
+      var origx = e.pageX - o.left + this.offset[0];
+      var origy = e.pageY - o.top + this.offset[1];
+      var m = c.ui.multi;
+
+      // Determinenewly dragged crop behavior if multi disabled
+      if (!c.opt.multi) {
+        // For multiCleaanup true, remove all existing selections
+        if (c.opt.multiCleanup){
+          for(var i=0;i<m.length;i++) m[i].remove();
+          c.ui.multi = [];
+        }
+        // If not, only remove the currently active selection
+        else {
+          c.removeSelection(c.ui.selection);
+        }
+      }
+
+      // Create the new selection
+      var sel = c.newSelection()
+        // and position it
+        .updateRaw(Jcrop.wrapFromXywh([origx,origy,1,1]));
+
+      sel.element.trigger('cropstart',[sel,this.core.unscale(sel.get())]);
+      
+      return sel.startDrag(e,'se');
+    },
+    // }}}
+    // end: function(x,y){{{
+    end: function(x,y){
+      this.drag(x,y);
+      var b = this.sel.get();
+
+      if ((b.w < this.minsize[0]) || (b.h < this.minsize[1]))
+        this.core.requestDelete();
+
+        else this.sel.focus();
+    }
+    // }}}
+  });
+
+  /**
+   * StageManager
+   * Provides basic stage-specific functionality
+   */
+  // var StageManager = function(core){{{
+  var StageManager = function(core){
+    this.core = core;
+    this.ui = core.ui;
+    this.init();
+  };
+  // }}}
+
+  $.extend(StageManager.prototype,{
+    // init: function(){{{
+    init: function(){
+      this.setupEvents();
+      this.dragger = new StageDrag(this);
+    },
+    // }}}
+    // tellConfigUpdate: function(options){{{
+    tellConfigUpdate: function(options){
+      for(var i=0,m=this.ui.multi,l=m.length;i<l;i++)
+        if (m[i].setOptions && (m[i].linked || (this.core.opt.linkCurrent && m[i] == this.ui.selection)))
+          m[i].setOptions(options);
+    },
+    // }}}
+    // startDragHandler: function(){{{
+    startDragHandler: function(){
+      var t = this;
+      return function(e){
+        if (!e.button || t.core.opt.is_ie_lt9) return t.dragger.start(e);
+      };
+    },
+    // }}}
+    // removeEvents: function(){{{
+    removeEvents: function(){
+      this.core.event.off('.jcrop-stage');
+      this.core.container.off('.jcrop-stage');
+    },
+    // }}}
+    // shimLegacyHandlers: function(options){{{
+    // This method uses the legacyHandlers configuration object to
+    // gracefully wrap old-style Jcrop events with new ones
+    shimLegacyHandlers: function(options){
+      var _x = {}, core = this.core, tmp;
+
+      $.each(core.opt.legacyHandlers,function(k,i){
+        if (k in options) {
+          tmp = options[k];
+          core.container.off('.jcrop-'+k)
+            .on(i+'.jcrop.jcrop-'+k,function(e,s,c){
+              tmp.call(core,c);
+            });
+          delete options[k];
+        }
+      });
+    },
+    // }}}
+    // setupEvents: function(){{{
+    setupEvents: function(){
+      var t = this, c = t.core;
+
+      c.event.on('configupdate.jcrop-stage',function(e){
+        t.shimLegacyHandlers(c.opt);
+        t.tellConfigUpdate(c.opt)
+        c.container.trigger('cropconfig',[c,c.opt]);
+      });
+
+      this.core.container
+        .on('mousedown.jcrop.jcrop-stage',this.startDragHandler());
+    }
+    // }}}
+  });
+
+  // Jcrop constructor
+  // var Jcrop = function(element,opt){{{
+  var Jcrop = function(element,opt){
+    var _ua = navigator.userAgent.toLowerCase();
+
+    this.opt = $.extend({},Jcrop.defaults,opt || {});
+
+    this.container = $(element);
+
+    this.opt.is_msie = /msie/.test(_ua);
+    this.opt.is_ie_lt9 = /msie [1-8]\./.test(_ua);
+
+    this.container.addClass(this.opt.css_container);
+
+    this.ui = {};
+    this.state = null;
+    this.ui.multi = [];
+    this.ui.selection = null;
+    this.filter = {};
+
+    this.init();
+    this.setOptions(opt);
+    this.applySizeConstraints();
+    this.container.trigger('cropinit',this);
+      
+    // IE<9 doesn't work if mouse events are attached to window
+    if (this.opt.is_ie_lt9)
+      this.opt.dragEventTarget = document.body;
+
+  };
+  // }}}
+
+  // Jcrop component storage
+  Jcrop.component = {
+    Animator: CropAnimator,
+    DragState: DragState,
+    EventManager: EventManager,
+    ImageLoader: ImageLoader,
+    StageManager: StageManager,
+    Selection: Selection,
+    Keyboard: KeyWatcher,
+    Touch: JcropTouch
+  };
+
+  // Jcrop static functions
+  $.extend(Jcrop,{
+    //defaults: default settings {{{
+    defaults: {
+
+      // Selection Behavior
+      edge: { n: 0, s: 0, e: 0, w: 0 },
+      setSelect: null,
+      linked: true,
+      linkCurrent: true,
+      canDelete: true,
+      canSelect: true,
+      canDrag: true,
+      canResize: true,
+
+      // Component constructors
+      eventManagerComponent:  Jcrop.component.EventManager,
+      keyboardComponent:      Jcrop.component.Keyboard,
+      dragstateComponent:     Jcrop.component.DragState,
+      stagemanagerComponent:  Jcrop.component.StageManager,
+      animatorComponent:      Jcrop.component.Animator,
+      selectionComponent:     Jcrop.component.Selection,
+
+      // Stage Behavior
+      allowSelect: true,
+      multi: false,
+      multiMax: false,
+      multiCleanup: true,
+      animation: true,
+      animEasing: 'swing',
+      animDuration: 400,
+      fading: true,
+      fadeDuration: 300,
+      fadeEasing: 'swing',
+      bgColor: 'black',
+      bgOpacity: .5,
+
+      // Startup options
+      applyFilters: [ 'constrain', 'extent', 'backoff', 'ratio', 'shader', 'round' ],
+      borders:  [ 'n', 's', 'e', 'w' ],
+      handles:  [ 'n', 's', 'e', 'w', 'sw', 'ne', 'nw', 'se' ],
+      dragbars: [ 'n', 'e', 'w', 's' ],
+
+      dragEventTarget: window,
+
+      xscale: 1,
+      yscale: 1,
+
+      boxWidth: null,
+      boxHeight: null,
+
+      // CSS Classes
+      // @todo: These need to be moved to top-level object keys
+      // for better customization. Currently if you try to extend one
+      // via an options object to Jcrop, it will wipe out all
+      // the others you don't specify. Be careful for now!
+      css_nodrag: 'jcrop-nodrag',
+      css_drag: 'jcrop-drag',
+      css_container: 'jcrop-active',
+      css_shades: 'jcrop-shades',
+      css_selection: 'jcrop-selection',
+      css_borders: 'jcrop-border',
+      css_handles: 'jcrop-handle jcrop-drag',
+      css_button: 'jcrop-box jcrop-drag',
+      css_noresize: 'jcrop-noresize',
+      css_dragbars: 'jcrop-dragbar jcrop-drag',
+
+      legacyHandlers: {
+        onChange: 'cropmove',
+        onSelect: 'cropend'
+      }
+    },
+    //}}}
+    //filter: built-in filter collection {{{
+    filter: {
+      constrain: ConstrainFilter,
+      extent: ExtentFilter,
+      grid: GridFilter,
+      backoff: BackoffFilter,
+      shader: ShadeFilter,
+      ratio: RatioFilter,
+      round: RoundFilter
+    },
+    //}}}
+    // attach: function(element,opt){{{
+    attach: function(element,opt){
+      var obj = new $.Jcrop(element,opt);
+      return obj;
+    },
+    // }}}
+    //supportsCanvas: function(){{{
+    supportsCanvas: function(){
+        var elem = document.createElement('canvas');
+        return !!(elem.getContext && elem.getContext('2d'));
+    },
+    // }}}
+    // imgCopy: function(imgel){{{
+    imgCopy: function(imgel){
+      var img = new Image;
+      img.src = imgel.src;
+      return img;
+    },
+    // }}}
+    // imageClone: function(imgel){{{
+    imageClone: function(imgel){
+      return Jcrop.supportsCanvas()?
+        Jcrop.canvasClone(imgel):
+        Jcrop.imgCopy(imgel);
+    },
+    // }}}
+    // canvasClone: function(imgel){{{
+    canvasClone: function(imgel){
+      var canvas = document.createElement('canvas'),
+          $canvas = $(canvas).width(imgel.width).height(imgel.height),
+          ctx = canvas.getContext('2d');
+      canvas.width = imgel.naturalWidth;
+      canvas.height = imgel.naturalHeight;
+      ctx.drawImage(imgel,0,0,imgel.naturalWidth,imgel.naturalHeight);
+      return $canvas;
+    },
+    // }}}
+    // propagate: function(plist,config,obj){{{
+    propagate: function(plist,config,obj){
+      for(var i=0,l=plist.length;i<l;i++)
+        if (config.hasOwnProperty(plist[i]))
+          obj[plist[i]] = config[plist[i]];
+    },
+    // }}}
+    // getLargestBox: function(ratio,w,h){{{
+    getLargestBox: function(ratio,w,h){
+      if ((w/h) > ratio)
+        return [ h * ratio, h ];
+          else return [ w, w / ratio ];
+    },
+    // }}}
+    // supportsColorFade: function(){{{
+    supportsColorFade: function(){
+      return $.fx.step.hasOwnProperty('backgroundColor');
+    },
+    // }}}
+    // wrapFromXywh: function(xywh){{{
+    wrapFromXywh: function(xywh){
+      var b = { x: xywh[0], y: xywh[1], w: xywh[2], h: xywh[3] };
+      b.x2 = b.x + b.w;
+      b.y2 = b.y + b.h;
+      return b;
+    }
+    // }}}
+  });
+
+  // Jcrop API methods
+  $.extend(Jcrop.prototype,{
+    //init: function(){{{
+    init: function(){
+      this.event = new this.opt.eventManagerComponent(this);
+      this.ui.keyboard = new this.opt.keyboardComponent(this);
+      this.ui.stage = new this.opt.stagemanagerComponent(this);
+      this.applyFilters();
+
+      if ($.Jcrop.component.Touch.support())
+        new $.Jcrop.component.Touch(this);
+
+      this.initEvents();
+    },
+    //}}}
+    // applySizeConstraints: function(){{{
+    applySizeConstraints: function(){
+      var o = this.opt,
+          img = this.opt.imgTarget;
+
+      if (img){
+
+        var iw = img.naturalWidth || img.width,
+            ih = img.naturalHeight || img.height,
+            bw = o.boxWidth || iw,
+            bh = o.boxHeight || ih;
+
+        if (img && ((iw > bw) || (ih > bh))){
+          var bx = Jcrop.getLargestBox(iw/ih,bw,bh);
+          $(img).width(bx[0]).height(bx[1]);
+          this.resizeContainer(bx[0],bx[1]);
+          this.opt.xscale = iw / bx[0];
+          this.opt.yscale = ih / bx[1];
+        }
+          
+      }
+    },
+    // }}}
+    // setOptions: function(opt){{{
+    setOptions: function(opt,proptype){
+
+      if (!$.isPlainObject(opt)) opt = {};
+
+      $.extend(this.opt,opt);
+
+      // Handle a setSelect value
+      if (this.opt.setSelect) {
+
+        // If there is no current selection
+        // passing setSelect will create one
+        if (!this.ui.multi.length)
+          this.newSelection();
+
+        // Use these values to update the current selection
+        this.ui.multi[0].update(Jcrop.wrapFromXywh(this.opt.setSelect));
+        // Set to null so it doesn't get called again
+        this.opt.setSelect = null;
+      }
+
+      this.event.trigger('configupdate');
+      return this;
+    },
+    // }}}
+    //destroy: function(){{{
+    destroy: function(){
+      if (this.opt.imgTarget) {
+        this.container.before(this.opt.imgTarget);
+        this.container.remove();
+        $(this.opt.imgTarget).removeData('Jcrop');
+      } else {
+        // @todo: more elegant destroy() process for non-image containers
+        this.container.remove();
+      }
+    },
+    // }}}
+    // applyFilters: function(){{{
+    applyFilters: function(){
+      var obj;
+      for(var i=0,f=this.opt.applyFilters,l=f.length; i<l; i++){
+        if ($.Jcrop.filter[f[i]])
+          obj = new $.Jcrop.filter[f[i]];
+          obj.core = this;
+          if (obj.init) obj.init();
+          this.filter[f[i]] = obj;
+      }
+    },
+    // }}}
+    // getDefaultFilters: function(){{{
+    getDefaultFilters: function(){
+      var rv = [];
+
+      for(var i=0,f=this.opt.applyFilters,l=f.length; i<l; i++)
+        if(this.filter.hasOwnProperty(f[i]))
+          rv.push(this.filter[f[i]]);
+
+      rv.sort(function(x,y){ return x.priority - y.priority; });
+      return rv;
+    },
+    // }}}
+    // setSelection: function(sel){{{
+    setSelection: function(sel){
+      var m = this.ui.multi;
+      var n = [];
+      for(var i=0;i<m.length;i++) {
+        if (m[i] !== sel) n.push(m[i]);
+        m[i].toBack();
+      }
+      n.unshift(sel);
+      this.ui.multi = n;
+      this.ui.selection = sel;
+      sel.toFront();
+      return sel;
+    },
+    // }}}
+    // getSelection: function(raw){{{
+    getSelection: function(raw){
+      var b = this.ui.selection.get();
+      return b;
+    },
+    // }}}
+    // newSelection: function(){{{
+    newSelection: function(sel){
+      if (!sel)
+        sel = new this.opt.selectionComponent();
+
+      sel.init(this);
+      this.setSelection(sel);
+
+      return sel;
+    },
+    // }}}
+    // hasSelection: function(sel){{{
+    hasSelection: function(sel){
+      for(var i=0;i<this.ui.multi;i++)
+        if (sel === this.ui.multi[i]) return true;
+    },
+    // }}}
+    // removeSelection: function(sel){{{
+    removeSelection: function(sel){
+      var i, n = [], m = this.ui.multi;
+      for(var i=0;i<m.length;i++){
+        if (sel !== m[i])
+          n.push(m[i]);
+        else m[i].remove();
+      }
+      return this.ui.multi = n;
+    },
+    // }}}
+    //addFilter: function(filter){{{
+    addFilter: function(filter){
+      for(var i=0,m=this.ui.multi,l=m.length; i<l; i++)
+        m[i].addFilter(filter);
+
+      return this;
+    },
+    //}}}
+    // removeFiltersByTag: function(tag){{{
+    removeFilter: function(filter){
+      for(var i=0,m=this.ui.multi,l=m.length; i<l; i++)
+        m[i].removeFilter(filter);
+
+      return this;
+    },
+    // }}}
+    // blur: function(){{{
+    blur: function(){
+      this.ui.selection.blur();
+      return this;
+    },
+    // }}}
+    // focus: function(){{{
+    focus: function(){
+      this.ui.selection.focus();
+      return this;
+    },
+    // }}}
+    //initEvents: function(){{{
+    initEvents: function(){
+      var t = this;
+      t.container.on('selectstart',function(e){ return false; })
+        .on('mousedown','.'+t.opt.css_drag,t.startDrag());
+    },
+    //}}}
+    // maxSelect: function(){{{
+    maxSelect: function(){
+      this.setSelect([0,0,this.elw,this.elh]);
+    },
+    // }}}
+    // nudge: function(x,y){{{
+    nudge: function(x,y){
+      var s = this.ui.selection, b = s.get();
+
+      b.x += x;
+      b.x2 += x;
+      b.y += y;
+      b.y2 += y;
+
+      if (b.x < 0) { b.x2 = b.w; b.x = 0; }
+        else if (b.x2 > this.elw) { b.x2 = this.elw; b.x = b.x2 - b.w; }
+
+      if (b.y < 0) { b.y2 = b.h; b.y = 0; }
+        else if (b.y2 > this.elh) { b.y2 = this.elh; b.y = b.y2 - b.h; }
+      
+      s.element.trigger('cropstart',[s,this.unscale(b)]);
+      s.updateRaw(b,'move');
+      s.element.trigger('cropend',[s,this.unscale(b)]);
+    },
+    // }}}
+    // refresh: function(){{{
+    refresh: function(){
+      for(var i=0,s=this.ui.multi,l=s.length;i<l;i++)
+        s[i].refresh();
+    },
+    // }}}
+    // blurAll: function(){{{
+    blurAll: function(){
+      var m = this.ui.multi;
+      for(var i=0;i<m.length;i++) {
+        if (m[i] !== sel) n.push(m[i]);
+        m[i].toBack();
+      }
+    },
+    // }}}
+    // scale: function(b){{{
+    scale: function(b){
+      var xs = this.opt.xscale,
+          ys = this.opt.yscale;
+
+      return {
+        x: b.x / xs,
+        y: b.y / ys,
+        x2: b.x2 / xs,
+        y2: b.y2 / ys,
+        w: b.w / xs,
+        h: b.h / ys
+      };
+    },
+    // }}}
+    // unscale: function(b){{{
+    unscale: function(b){
+      var xs = this.opt.xscale,
+          ys = this.opt.yscale;
+
+      return {
+        x: b.x * xs,
+        y: b.y * ys,
+        x2: b.x2 * xs,
+        y2: b.y2 * ys,
+        w: b.w * xs,
+        h: b.h * ys
+      };
+    },
+    // }}}
+    // requestDelete: function(){{{
+    requestDelete: function(){
+      if ((this.ui.multi.length > 1) && (this.ui.selection.canDelete))
+        return this.deleteSelection();
+    },
+    // }}}
+    // deleteSelection: function(){{{
+    deleteSelection: function(){
+      if (this.ui.selection) {
+        this.removeSelection(this.ui.selection);
+        this.ui.multi[0].focus();
+        this.ui.selection.refresh();
+      }
+    },
+    // }}}
+    // animateTo: function(box){{{
+    animateTo: function(box){
+      if (this.ui.selection)
+        this.ui.selection.animateTo(box);
+      return this;
+    },
+    // }}}
+    // setselect: function(box){{{
+    setSelect: function(box){
+      if (this.ui.selection)
+        this.ui.selection.update(Jcrop.wrapFromXywh(box));
+      return this;
+    },
+    // }}}
+    //startDrag: function(){{{
+    startDrag: function(){
+      var t = this;
+      return function(e){
+        var $targ = $(e.target);
+        var selection = $targ.closest('.'+t.opt.css_selection).data('selection');
+        var ord = $targ.data('ord');
+        t.container.trigger('cropstart',[selection,t.unscale(selection.get())]);
+        selection.startDrag(e,ord);
+        return false;
+      };
+    },
+    //}}}
+    // resizeContainer: function(w,h){{{
+    resizeContainer: function(w,h){
+      this.container.width(w).height(h);
+      this.refresh();
+    },
+    // }}}
+    // setImage: function(src,cb){{{
+    setImage: function(src,cb){
+      var t = this, targ = t.opt.imgTarget;
+
+      if (!targ) return false;
+
+      new $.Jcrop.component.ImageLoader(src,null,function(w,h){
+        t.resizeContainer(w,h);
+
+        targ.src = src;
+        $(targ).width(w).height(h);
+        t.applySizeConstraints();
+        t.refresh();
+        t.container.trigger('cropimage',[t,targ]);
+
+        if (typeof cb == 'function')
+          cb.call(t,w,h);
+      });
+    },
+    // }}}
+    // update: function(b){{{
+    update: function(b){
+      if (this.ui.selection)
+        this.ui.selection.update(b);
+    }
+    // }}}
+  });
+
+  // Jcrop jQuery plugin function
+  // $.fn.Jcrop = function(options,callback){{{
+  $.fn.Jcrop = function(options,callback){
+
+    var first = this.eq(0).data('Jcrop');
+    var args = Array.prototype.slice.call(arguments);
+
+    // Return API if requested
+    if (options == 'api') { return first; }
+
+    // Allow calling API methods (with arguments)
+    else if (first && (typeof options == 'string')) {
+
+      // Call method if it exists
+      if (first[options]) {
+        args.shift();
+        first[options].apply(first,args);
+        return first;
+      }
+
+      // Unknown input/method does not exist
+      return false;
+    }
+
+    // Otherwise, loop over selected elements
+    this.each(function(){
+      var t = this, $t = $(this);
+      var exists = $t.data('Jcrop');
+      var obj;
+
+      // If Jcrop already exists on this element only setOptions()
+      if (exists)
+        exists.setOptions(options);
+
+      // Otherwise, if it's an IMG, create a wrapper
+      else if (this.tagName == 'IMG')
+
+        $.Jcrop.component.ImageLoader.attach(this,function(w,h){
+          var $wrapper = $t.wrap('<div />').parent();
+
+          $wrapper.width(w).height(h);
+
+          obj = $.Jcrop.attach($wrapper,$.extend({},options,{
+            imgTarget: t
+          }));
+
+          $t.data('Jcrop',obj);
+
+          if (typeof callback == 'function')
+            callback.call(obj);
+        });
+
+      // Or hope it's a block element, because we're attaching
+      else {
+
+        obj = $.Jcrop.attach(this,options);
+        $t.data('Jcrop',obj);
+
+        if (typeof callback == 'function')
+          callback.call(obj);
+      }
+
+      return this;
+    });
+  };
+  // }}}
+
+  // Attach to jQuery object
+  $.Jcrop = Jcrop;
+
+})(jQuery);
diff --git a/resources/mediaflow-ng.js b/resources/mediaflow-ng.js
index 9d9cf48..961f8e3 100644
--- a/resources/mediaflow-ng.js
+++ b/resources/mediaflow-ng.js
@@ -1,4 +1,4 @@
-var mediaflow = angular.module('mediaflow', ['angularFileUpload']);
+var mediaflow = angular.module('mediaflow', ['angularFileUpload', 'mfImageCrop']);
 
 mediaflow.filter('sizeConverter', function () {
     return function (size, precision) {
@@ -54,25 +54,9 @@ mediaflow.controller('MediaFlowCtrl', function ($scope, $http, $upload) {
             });
         });
     };
-
-    $scope.onFileSelect = function($files) {
-        $scope.spin = true;
-        for (var i = 0; i < $files.length; i++) {
-            var $file = $files[i];
-            $scope.upload = $upload.upload({
-                url: '/admin/mediaflow/upload',
-                file: $file
-            }).then(function(args) {
-                $scope.media.unshift(args.data);
-                $scope.spin = false;
-            }, function(args) {
-                console.log('err', args);
-                $scope.spin = false;
-            });
-        }
-    }
 });
 
+
 mediaflow.directive('showFocus', ['$timeout', function($timeout) {
     return function(scope, element, attrs) {
         scope.$watch(attrs.showFocus, function(showing) {
@@ -93,12 +77,14 @@ mediaflow.controller('MediaFlowFieldCtrl', function ($scope, $http, $upload) {
             .getMedia(search)
             .success(function(results) {
                 $scope.media.splice
-                    .bind($scope.media, 0, $scope.media.length - 1)
+                    .bind($scope.media, 0, $scope.media.length)
                     .apply($scope.media, results);
                 $scope.spin = false;
             });
     };
-    updateMedia();
+    $scope.triggerUpdate = function() {
+        updateMedia();
+    };
 
     var timeout;
     $scope.$watch('searchText', function(searchText, ov) {
@@ -122,6 +108,23 @@ mediaflow.controller('MediaFlowFieldCtrl', function ($scope, $http, $upload) {
         if (!$el) { return; }
         $el.click();
     };
+
+    $scope.onFileSelect = function($files) {
+        $scope.spin = true;
+        for (var i = 0; i < $files.length; i++) {
+            var $file = $files[i];
+            $scope.upload = $upload.upload({
+                url: '/admin/mediaflow/upload',
+                file: $file
+            }).then(function(args) {
+                $scope.media.unshift(args.data);
+                $scope.spin = false;
+            }, function(args) {
+                console.log('err', args);
+                $scope.spin = false;
+            });
+        }
+    }
 });
 
 mediaflow.controller('MediaFlowBrowseCtrl', function ($scope, $http, $upload) {
@@ -147,4 +150,21 @@ mediaflow.controller('MediaFlowBrowseCtrl', function ($scope, $http, $upload) {
             timeout = setTimeout(updateMedia, 250, searchText);
         }
     });
+
+    $scope.onFileSelect = function($files) {
+        $scope.spin = true;
+        for (var i = 0; i < $files.length; i++) {
+            var $file = $files[i];
+            $scope.upload = $upload.upload({
+                url: '/admin/mediaflow/upload',
+                file: $file
+            }).then(function(args) {
+                $scope.media.unshift(args.data);
+                $scope.spin = false;
+            }, function(args) {
+                console.log('err', args);
+                $scope.spin = false;
+            });
+        }
+    }
 });
diff --git a/resources/ng-image-crop.html b/resources/ng-image-crop.html
new file mode 100644
index 0000000..17c3526
--- /dev/null
+++ b/resources/ng-image-crop.html
@@ -0,0 +1,13 @@
+<div class="cropper-menu">
+    <div class="btngroup">
+        <button class="btn" type="button"
+            ng-repeat="(name,size) in versions"
+            ng-click="crop(name,size)"
+            ng-class="active===name?'active':''">
+                {{name}} ({{size[0]}}x{{size[1]}})
+        </button>
+    </div>
+</div>
+<div class="cropper">
+    <img ng-src="{{selected.shareUrl}}" width="{{box[0]}}" height="{{box[1]}}">
+</div>
diff --git a/resources/ng-image-crop.js b/resources/ng-image-crop.js
new file mode 100644
index 0000000..e54a12c
--- /dev/null
+++ b/resources/ng-image-crop.js
@@ -0,0 +1,98 @@
+angular.module('mfImageCrop', []).directive('mfImageCrop', function() {
+    var objectify = function(data) {
+        var result = {};
+        if (typeof data === 'string') {
+            try { result = JSON.parse(data); }
+            catch (e) {}
+        }
+        return result;
+    };
+    return {
+        templateUrl: '/admin/resources/mediaflow/ng-image-crop.html',
+        scope: {
+            selected: '='
+        },
+        controller: function($scope) {
+            var ctrl = this;
+            ctrl.current = {name:null,size:[]}
+            ctrl.stopPropagation = function(e) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            ctrl.saveCrop = function(e,s,c) {
+                ctrl.stopPropagation(e);
+                var selection = [c.x, c.y, c.w, c.h].map(Math.round);
+                if (!$scope.selected.version) {
+                    $scope.selected.version = {};
+                }
+                $scope.selected.version[ctrl.current.name] = {
+                    coords: selection,
+                    width: ctrl.current.size[0],
+                    height: ctrl.current.size[1]
+                }
+                // Rawr
+                $scope.$apply();
+            }
+            ctrl.defaultOptions = function(w,h) {
+                return {
+                    aspectRatio: w/h,
+                    minSize: [w,h]
+                }
+            };
+        },
+        link: function($scope, $element, attrs, ctrl) {
+            var boxWidth = 600;
+            var boxHeight = 400;
+            $scope.versions = objectify(attrs.versions);
+            if (!('version' in $scope.selected)) {
+                $scope.selected.version = {};
+            }
+
+            var onInitialize = function() {
+                this.container.on('cropstart cropmove', ctrl.stopPropagation);
+                this.container.on('cropend', ctrl.saveCrop);
+                // TODO PR to Jcrop 2.x to fucking fix this
+                this.container.find('button').attr('type', 'button');
+            };
+
+            var $crop = $($element[0]).find('.cropper img');
+            var setCrop = function(selection, size) {
+                var width = size[0], height = size[1];
+                $crop.Jcrop({
+                    aspectRatio: width / height,
+                    boxWidth: boxWidth,
+                    boxHeight: boxHeight,
+                    setSelect: (selection || [0, 0, width, height])
+                }, onInitialize);
+            };
+
+            $scope.crop = function(name) {
+                var size = ctrl.current.size = $scope.versions[name];
+                $scope.active = ctrl.current.name = name;
+                var crops = $scope.selected.version;
+                var selection = crops && name in crops ? crops[name].coords : null;
+                setCrop(selection, size);
+                setCrop(selection, size);
+            }
+            if ($scope.selected) {
+                var w = $scope.selected.file.width;
+                var h = $scope.selected.file.height;
+                var ratio = w/h;
+                var boxRatio = boxWidth/boxHeight;
+                var factor = ratio > boxRatio ? w / boxWidth : h / boxHeight;
+                var iw = w / factor;
+                var ih = h / factor;
+                $scope.box = [iw,ih];
+            }
+            else {
+                $scope.box = [100,100];
+            }
+            setTimeout(function() {
+                for (var version in $scope.versions) {
+                    $scope.crop(version);
+                    break;
+                }
+            },100);
+        }
+    };
+});
diff --git a/resources/style.css b/resources/style.css
index d90c298..a7a784c 100644
--- a/resources/style.css
+++ b/resources/style.css
@@ -11,9 +11,8 @@
     .mediaflow-preview .thumb img {
       border-radius: 3px;
       background-color: #eee;
-      background-image: linear-gradient(45deg, #666 25%, transparent 25%, transparent 75%, #666 75%, #666), linear-gradient(45deg, #666 25%, transparent 25%, transparent 75%, #666 75%, #666);
-      background-size: 8px;
-      background-position: 0 0, 4px 4px; }
+      background-image: linear-gradient(45deg, #666 25%, transparent 25%, transparent 75%, #666 75%, #666), linear-gradient(135deg, #666 25%, transparent 25%, transparent 75%, #666 75%, #666);
+      background-size: 16px 16px; }
   .mediaflow-preview .mediaflow-meta th, .mediaflow-preview .mediaflow-meta td {
     padding: 0 10px 2px 0; }
   .mediaflow-preview .mediaflow-meta th, .mediaflow-preview .mediaflow-meta .title {
@@ -53,9 +52,8 @@
       height: 100px;
       border-radius: 3px;
       background-color: #eee;
-      background-image: linear-gradient(45deg, #666 25%, transparent 25%, transparent 75%, #666 75%, #666), linear-gradient(45deg, #666 25%, transparent 25%, transparent 75%, #666 75%, #666);
-      background-size: 8px;
-      background-position: 0 0, 4px 4px;
+      background-image: linear-gradient(45deg, #666 25%, transparent 25%, transparent 75%, #666 75%, #666), linear-gradient(135deg, #666 25%, transparent 25%, transparent 75%, #666 75%, #666);
+      background-size: 16px 16px;
       -webkit-transition: all 0.4s ease;
       -moz-transition: all 0.4s ease;
       -o-transition: all 0.4s ease;
@@ -71,9 +69,11 @@
         transform: translate(-5px, -5px); }
   .mediaflow-fold .close {
     float: right; }
+  .mediaflow-fold.scaler:after {
+    left: 118px; }
   .mediaflow-fold:after {
     bottom: 100%;
-    left: 5%;
+    left: 56px;
     border: solid transparent;
     content: " ";
     height: 0;
@@ -85,6 +85,25 @@
     border-width: 10px;
     margin-left: -10px; }
 
+.mediaflow-upload-cell {
+  width: 150px; }
+  .mediaflow-upload-cell .buttons .mediaflow-upload-button.btn {
+    margin-top: 3px; }
+
+.mediaflow-spinner {
+  left: 128px; }
+
+.cropper-menu {
+  margin: 0 0 10px 0;
+  clear: both; }
+  .cropper-menu button {
+    text-transform: capitalize; }
+
+.cropper > img, .cropper .jcrop-active > img {
+  background-color: #eee;
+  background-image: linear-gradient(45deg, #666 25%, transparent 25%, transparent 75%, #666 75%, #666), linear-gradient(135deg, #666 25%, transparent 25%, transparent 75%, #666 75%, #666);
+  background-size: 16px 16px; }
+
 @-webkit-keyframes mediaflow-spinner {
   0% {
     -webkit-transform: rotate(0deg);
diff --git a/resources/style.scss b/resources/style.scss
index 009aafe..2d08d7c 100644
--- a/resources/style.scss
+++ b/resources/style.scss
@@ -86,9 +86,13 @@
         float: right;
     }
 
+    &.scaler:after {
+        left: 118px;
+    }
+
     &:after {
         bottom: 100%;
-        left: 5%;
+        left: 56px;
         border: solid transparent;
         content: " ";
         height: 0;
@@ -101,5 +105,28 @@
         margin-left: -10px;
     }
 }
+.mediaflow-upload-cell {
+  width: 150px;
+  .buttons .mediaflow-upload-button.btn {
+    margin-top: 3px;
+  }
+}
+.mediaflow-spinner {
+  left:128px;
+}
+
+.cropper-menu {
+    margin: 0 0 10px 0;
+    clear: both;
+    button {
+        text-transform: capitalize;
+    }
+}
+.cropper {
+    &>img, .jcrop-active>img {
+        @include checkered();
+    }
+}
+
 
 @import 'spinner';
diff --git a/templates/fieldtype-settings.html b/templates/fieldtype-settings.html
new file mode 100644
index 0000000..e958473
--- /dev/null
+++ b/templates/fieldtype-settings.html
@@ -0,0 +1,7 @@
+{% import "_includes/forms" as forms %}
+
+{{ forms.textareaField({
+	id: 'versions',
+	name: 'versions',
+	value: settings.versions|json_encode()
+}) }}
diff --git a/templates/index.html b/templates/index.html
index f0a27af..d3d67af 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -4,25 +4,6 @@
 {% set hasSidebar = true %}
 
 {% set sidebar %}
-<div class="buttons first">
-    <input type="file"
-        multiple="multiple"
-        name="assets-upload"
-        style="display: none;">
-    <div class="btn submit assets-upload-button"
-        data-icon="↑"
-        style="position: relative; overflow: hidden;"
-        role="button"
-    >
-        <label for="mediaflow_file_upload">Upload files</label>
-        <input style="display:none"
-            id="mediaflow_file_upload"
-            type="file"
-            ng-file-select="onFileSelect($files)"
-            multiple
-        >
-    </div>
-</div>
 <nav>
     <ul>
         <li>
@@ -43,6 +24,28 @@
                 <table class="inputs fullwidth">
                     <tbody>
                     <tr>
+                        <td class="mediaflow-upload-cell">
+                            <div class="buttons first">
+                                <input type="file"
+                                       multiple="multiple"
+                                       name="assets-upload"
+                                       style="display: none;">
+
+                                <div class="btn submit assets-upload-button mediaflow-upload-button"
+                                     data-icon="↑"
+                                     style="position: relative; overflow: hidden;"
+                                     role="button"
+                                        >
+                                    <label for="mediaflow_file_upload">Upload files</label>
+                                    <input style="display:none"
+                                           id="mediaflow_file_upload"
+                                           type="file"
+                                           ng-file-select="onFileSelect($files)"
+                                           multiple
+                                            >
+                                </div>
+                            </div>
+                        </td>
                         <td>
                             <div class="texticon search icon">
                                 <input class="text nicetext fullwidth" type="search" autocomplete="off" ng-model="searchText"
@@ -60,7 +63,7 @@
                     </tr>
                     </tbody>
                 </table>
-                <div class="spinner hidden" ng-class="{hidden: !spin}"></div>
+                <div class="spinner hidden mediaflow-spinner" ng-class="{hidden: !spin}"></div>
             </div>
 
             <div class="elements" ng-show="view==='list'">
@@ -107,6 +110,8 @@
 {% endraw %}
 
 {% includeJsResource "mediaflow/angularjs-file-upload.js" %}
+{% includeJsResource "mediaflow/jcrop.js" %}
+{% includeJsResource "mediaflow/ng-image-crop.js" %}
 {% includeJsResource "mediaflow/mediaflow-ng.js" %}
 {% includeCssResource "mediaflow/style.css" %}
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
diff --git a/templates/input.html b/templates/input.html
index 94239a8..6587cc0 100644
--- a/templates/input.html
+++ b/templates/input.html
@@ -34,17 +34,29 @@
                 </table>
         </div>
 
-        <button
-            type="button"
+        <button type="button"
             class="btn dashed"
-            ng-show="!showMedia"
-            ng-click="showMedia = true">Browse</button>
-        <button
-            type="button"
+            ng-click="showMedia = true;scaling = false;triggerUpdate()">Browse</button>
+        <button type="button"
+            class="btn"
+            ng-show="selected.id"
+            ng-click="scaling = true; showMedia = false">Crop</button>
+        <button type="button"
             class="btn danger"
             ng-show="selected.id"
-            ng-click="selected = emptyDefaults">Remove</button>
+            ng-click="selected = emptyDefaults;scaling = false">Remove</button>
 
+        <div ng-if="selected.id && scaling" class="mediaflow-fold scaler">
+            <div class="clearafter">
+                <mf-image-crop 
+                    {% endraw %}
+                    versions={{settings.versions|json_encode()}}
+                    {% raw %}
+                    selected="selected">
+                    No media selected, no crop possible
+                </mf-image-crop>
+            </div>
+        </div>
         <div ng-show="showMedia" class="mediaflow-fold">
             <div class="clearafter">
                 <div class="texticon search icon">
@@ -61,29 +73,29 @@
                         Upload
                     </button>
                     <div class="mediaflow-spinner" ng-class="{hidden: !spin}">Loading ...</div>
-                    <a class="close" ng-click="showMedia = false">Close</a>
+                    <a class="close" ng-click="showMedia = false;searchText = ''">Close</a>
                 </div>
             </div>
 
             <div class="thumbs clearafter">
                 <ul>
-                    <li ng-repeat="medium in media">
-                        <img ng-show="medium.isImage"
-                            ng-src="{{medium.thumb}}"
-                            ng-click="select(medium)"
-                        >
+                    <li ng-repeat="medium in media" ng-show="medium.isImage">
+                        <img ng-src="{{medium.thumb}}" ng-click="select(medium)">
                     </li>
                 </ul>
             </div>
         </div>
+        <input type="hidden" value="{{selected|json}}"
         {% endraw %}
+            name="{{name}}">
         <div ng-init="selected={{value|json_encode()}}"></div>
-        <input type="hidden"
-            {% raw %}value="{{selected|json}}"{% endraw %}
-            name="{{name}}" />
     </div>
 </div>
 {% includeJsResource "mediaflow/angular.min.js" %}
 {% includeJsResource "mediaflow/angularjs-file-upload.js" %}
+{% includeJsResource "mediaflow/jcrop.js" %}
+{% includeJsResource "mediaflow/ng-image-crop.js" %}
 {% includeJsResource "mediaflow/mediaflow-ng.js" %}
+
+{% includeCssResource "mediaflow/jcrop.css" %}
 {% includeCssResource "mediaflow/style.css" %}