jcrop-rails 1.0.2 → 1.0.3

checksums.yaml

@@ -0,0 +1,15 @@
+---
+!binary "U0hBMQ==":
+  metadata.gz: !binary |-
+    Y2FkZDhhMWI5ZGE5NzA2Y2MzYjg4YWRiOWM1NDA1OGY3NDhhZWEwMQ==
+  data.tar.gz: !binary |-
+    ZThhNTEzM2NjNGMzMmJkZTJhOTc3MGVlN2NlNzI2N2JjMTkwODA5Nw==
+!binary "U0hBNTEy":
+  metadata.gz: !binary |-
+    Yzc5ZTk0YzFlNWE5MTNmYWZmYTAzZGQ5MTE2M2U4OTgwZWRiYTIyZGNjMWI2
+    NWFlMGRjNGExMzA0ZjQ5ODkxZDY5YWE2MWE0NjJkM2M5YzBhZDA5NTNjZGEx
+    ZGJhMDgxOTYwYThkMDdjOTZmZTc1NGZhNTAwNTUwOGQ1ZDAyMDM=
+  data.tar.gz: !binary |-
+    NzBlOGU0NWUyZjFiNDEyMmI5ZWYxZjFjYzFhNDI2ODEyNTY0YjZkNTNjZjVh
+    ODdkZDY0ZTlmZWUzZTg3NGY3Y2JjMmUyOWE2NTA4ODEzOGE5YjkyMzU4ZDQ3
+    MjlkMGZhZGY4NDZhNjgwMGFkNWY1NmE4MDk3YWQwMDg1MjcyY2E=

data/Gemfile

@@ -1,9 +1,3 @@
 source :gemcutter
 
-# Specify your gem's dependencies in jquery-rails.gemspec
-gemspec
-# Rails is already being pulled in through gemspec
-# gem "rails", :git => "git://github.com/rails/rails.git"
-gem "rack", :git => "git://github.com/rack/rack.git"
-gem "sprockets", :git => "git://github.com/sstephenson/sprockets.git"
-gem "i18n", "0.6.0beta1"
+gemspec

data/Gemfile.lock

@@ -1,120 +1,94 @@
-GIT
-  remote: git://github.com/rack/rack.git
-  revision: a9beb476b27914794743d0677b327d5bafb5e8a3
-  specs:
-    rack (1.2.1)
-
-GIT
-  remote: git://github.com/rails/rails.git
-  revision: 2fbbd08616c25dc2931eca914349dd2161766f69
-  specs:
-    actionmailer (3.1.0.beta)
-      actionpack (= 3.1.0.beta)
-      mail (~> 2.3.0)
-    actionpack (3.1.0.beta)
-      activemodel (= 3.1.0.beta)
-      activesupport (= 3.1.0.beta)
-      builder (~> 3.0.0)
-      erubis (~> 2.7.0)
-      i18n (~> 0.6.0beta1)
-      rack (~> 1.2.1)
-      rack-cache (~> 1.0.0)
-      rack-mount (~> 0.7.2)
-      rack-test (~> 0.5.7)
-      sprockets (~> 2.0.0.beta.2)
-      tzinfo (~> 0.3.23)
-    activemodel (3.1.0.beta)
-      activesupport (= 3.1.0.beta)
-      bcrypt-ruby (~> 2.1.4)
-      builder (~> 3.0.0)
-      i18n (~> 0.6.0beta1)
-    activerecord (3.1.0.beta)
-      activemodel (= 3.1.0.beta)
-      activesupport (= 3.1.0.beta)
-      arel (~> 2.1.0)
-      tzinfo (~> 0.3.23)
-    activeresource (3.1.0.beta)
-      activemodel (= 3.1.0.beta)
-      activesupport (= 3.1.0.beta)
-    activesupport (3.1.0.beta)
-      multi_json (~> 1.0.0)
-    rails (3.1.0.beta)
-      actionmailer (= 3.1.0.beta)
-      actionpack (= 3.1.0.beta)
-      activerecord (= 3.1.0.beta)
-      activeresource (= 3.1.0.beta)
-      activesupport (= 3.1.0.beta)
-      bundler (~> 1.0)
-      railties (= 3.1.0.beta)
-    railties (3.1.0.beta)
-      actionpack (= 3.1.0.beta)
-      activesupport (= 3.1.0.beta)
-      rack-ssl (~> 1.3.2)
-      rake (>= 0.8.7)
-      thor (~> 0.14.4)
-
-GIT
-  remote: git://github.com/sstephenson/sprockets.git
-  revision: c4800417792744c11eb1fb888bbe9a3a82859952
-  specs:
-    sprockets (2.0.0.beta.2)
-      hike (~> 1.0)
-      rack (~> 1.0)
-      tilt (~> 1.0)
-
 PATH
   remote: .
   specs:
-    jquery-rails (0.3)
-      rails (~> 3.1)
-      thor (~> 0.14.4)
+    jcrop-rails (1.0.2)
+      railties (~> 3.0)
+      thor (~> 0.14)
 
 GEM
   remote: http://rubygems.org/
   specs:
-    addressable (2.2.4)
-    arel (2.1.0)
-    bcrypt-ruby (2.1.4)
+    actionmailer (3.2.2)
+      actionpack (= 3.2.2)
+      mail (~> 2.4.0)
+    actionpack (3.2.2)
+      activemodel (= 3.2.2)
+      activesupport (= 3.2.2)
+      builder (~> 3.0.0)
+      erubis (~> 2.7.0)
+      journey (~> 1.0.1)
+      rack (~> 1.4.0)
+      rack-cache (~> 1.1)
+      rack-test (~> 0.6.1)
+      sprockets (~> 2.1.2)
+    activemodel (3.2.2)
+      activesupport (= 3.2.2)
+      builder (~> 3.0.0)
+    activerecord (3.2.2)
+      activemodel (= 3.2.2)
+      activesupport (= 3.2.2)
+      arel (~> 3.0.2)
+      tzinfo (~> 0.3.29)
+    activeresource (3.2.2)
+      activemodel (= 3.2.2)
+      activesupport (= 3.2.2)
+    activesupport (3.2.2)
+      i18n (~> 0.6)
+      multi_json (~> 1.0)
+    arel (3.0.2)
     builder (3.0.0)
-    crack (0.1.8)
     erubis (2.7.0)
-    hike (1.0.0)
-    i18n (0.6.0beta1)
-    mail (2.3.0)
+    hike (1.2.1)
+    i18n (0.6.0)
+    journey (1.0.3)
+    json (1.6.5)
+    mail (2.4.4)
       i18n (>= 0.4.0)
       mime-types (~> 1.16)
       treetop (~> 1.4.8)
-    mime-types (1.16)
-    multi_json (1.0.0)
-    polyglot (0.3.1)
-    rack-cache (1.0.1)
+    mime-types (1.17.2)
+    multi_json (1.1.0)
+    polyglot (0.3.3)
+    rack (1.4.1)
+    rack-cache (1.2)
       rack (>= 0.4)
-    rack-mount (0.7.2)
-      rack (>= 1.0.0)
     rack-ssl (1.3.2)
       rack
-    rack-test (0.5.7)
+    rack-test (0.6.1)
       rack (>= 1.0)
-    rake (0.8.7)
-    rspec (1.3.1)
+    rails (3.2.2)
+      actionmailer (= 3.2.2)
+      actionpack (= 3.2.2)
+      activerecord (= 3.2.2)
+      activeresource (= 3.2.2)
+      activesupport (= 3.2.2)
+      bundler (~> 1.0)
+      railties (= 3.2.2)
+    railties (3.2.2)
+      actionpack (= 3.2.2)
+      activesupport (= 3.2.2)
+      rack-ssl (~> 1.3.2)
+      rake (>= 0.8.7)
+      rdoc (~> 3.4)
+      thor (~> 0.14.6)
+    rake (0.9.2.2)
+    rdoc (3.12)
+      json (~> 1.4)
+    sprockets (2.1.2)
+      hike (~> 1.2)
+      rack (~> 1.0)
+      tilt (~> 1.1, != 1.3.0)
     thor (0.14.6)
-    tilt (1.3)
-    treetop (1.4.9)
+    tilt (1.3.3)
+    treetop (1.4.10)
+      polyglot
       polyglot (>= 0.3.1)
-    tzinfo (0.3.27)
-    webmock (1.6.2)
-      addressable (>= 2.2.2)
-      crack (>= 0.1.7)
+    tzinfo (0.3.32)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
-  bundler (~> 1.0.0)
-  i18n (= 0.6.0beta1)
-  jquery-rails!
-  rack!
-  rails!
-  rspec (~> 1.3)
-  sprockets!
-  webmock (~> 1.6.2)
+  bundler (~> 1.0)
+  jcrop-rails!
+  rails (~> 3.0)

data/LICENSE

@@ -1,11 +1,13 @@
 JCrop jQuery plugin:
 
-Copyright (c) 2011 Tapmodo Interactive LLC,
-  http://github.com/tapmodo/Jcrop
-  
+  Copyright (c) 2011 Tapmodo Interactive LLC,
+    http://github.com/tapmodo/Jcrop
+
 jcrop-rails gem:
 
-Copyright (c) 2011 Nick Ragaz
+  Copyright (c) 2011 Nick Ragaz
+
+Both:
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

data/jcrop-rails.gemspec

@@ -8,14 +8,14 @@ Gem::Specification.new do |s|
   s.authors     = ["Nick Ragaz"]
   s.email       = ["nick.ragaz@gmail.com"]
   s.homepage    = "http://rubygems.org/gems/jcrop-rails"
-  s.summary     = "Use the Jcrop jQuery plugin with Rails 3.1"
-  s.description = "This gem provides the Jcrop jQuery plugin for your Rails 3.1 application."
+  s.summary     = "Use the Jcrop jQuery plugin with Rails 3.1+"
+  s.description = "This gem provides the Jcrop jQuery plugin for your Rails 3.1+ application."
 
   s.required_rubygems_version = ">= 1.3.6"
 
   s.add_dependency "railties", "~> 3.0"
   s.add_dependency "thor",     "~> 0.14"
-  s.add_development_dependency "bundler", "~> 1.0.0"
+  s.add_development_dependency "bundler", "~> 1.0"
   s.add_development_dependency "rails",   "~> 3.0"
 
   s.files        = `git ls-files`.split("\n")

data/lib/jcrop/rails/version.rb

@@ -1,6 +1,6 @@
 module Jcrop
   module Rails
-    VERSION = "1.0.2"
-    JCROP_VERSION = "0.9.9"
+    VERSION = "1.0.3"
+    JCROP_VERSION = "0.9.12"
   end
 end

data/vendor/assets/javascripts/jcrop.js

@@ -1,8 +1,9 @@
 /**
- * jquery.Jcrop.js v0.9.9
- * jQuery Image Cropping Plugin
- * @author Kelly Hallman <khallman@gmail.com>
- * Copyright (c) 2008-2011 Kelly Hallman - released under MIT License {{{
+ * jquery.Jcrop.js v0.9.12
+ * jQuery Image Cropping Plugin - released under MIT License
+ * Author: Kelly Hallman <khallman@gmail.com>
+ * http://github.com/tapmodo/Jcrop
+ * Copyright (c) 2008-2013 Tapmodo Interactive LLC {{{
  *
  * Permission is hereby granted, free of charge, to any person
  * obtaining a copy of this software and associated documentation
@@ -32,14 +33,14 @@
 
   $.Jcrop = function (obj, opt) {
     var options = $.extend({}, $.Jcrop.defaults),
-        docOffset, lastcurs, ie6mode = false;
+        docOffset,
+        _ua = navigator.userAgent.toLowerCase(),
+        is_msie = /msie/.test(_ua),
+        ie6mode = /msie [1-6]\./.test(_ua);
 
     // Internal Methods {{{
     function px(n) {
-      return parseInt(n, 10) + 'px';
-    }
-    function pct(n) {
-      return parseInt(n, 10) + '%';
+      return Math.round(n) + 'px';
     }
     function cssClass(cl) {
       return options.baseClass + '-' + cl;
@@ -49,7 +50,6 @@
     }
     function getPos(obj) //{{{
     {
-      // Updated in v0.9.4 to use built-in dimensions plugin
       var pos = $(obj).offset();
       return [pos.left, pos.top];
     }
@@ -61,37 +61,21 @@
     //}}}
     function setOptions(opt) //{{{
     {
-      if (typeof(opt) !== 'object') {
-        opt = {};
-      }
+      if (typeof(opt) !== 'object') opt = {};
       options = $.extend(options, opt);
 
-      if (typeof(options.onChange) !== 'function') {
-        options.onChange = function () {};
-      }
-      if (typeof(options.onSelect) !== 'function') {
-        options.onSelect = function () {};
-      }
-      if (typeof(options.onRelease) !== 'function') {
-        options.onRelease = function () {};
-      }
-    }
-    //}}}
-    function myCursor(type) //{{{
-    {
-      if (type !== lastcurs) {
-        Tracker.setCursor(type);
-        lastcurs = type;
-      }
+      $.each(['onChange','onSelect','onRelease','onDblClick'],function(i,e) {
+        if (typeof(options[e]) !== 'function') options[e] = function () {};
+      });
     }
     //}}}
-    function startDragMode(mode, pos) //{{{
+    function startDragMode(mode, pos, touch) //{{{
     {
       docOffset = getPos($img);
       Tracker.setCursor(mode === 'move' ? mode : mode + '-resize');
 
       if (mode === 'move') {
-        return Tracker.activateHandlers(createMover(pos), doneSelect);
+        return Tracker.activateHandlers(createMover(pos), doneSelect, touch);
       }
 
       var fc = Coords.getFixed();
@@ -101,7 +85,7 @@
       Coords.setPressed(Coords.getCorner(opp));
       Coords.setCurrent(opc);
 
-      Tracker.activateHandlers(dragmodeHandler(mode, fc), doneSelect);
+      Tracker.activateHandlers(dragmodeHandler(mode, fc), doneSelect, touch);
     }
     //}}}
     function dragmodeHandler(mode, f) //{{{
@@ -187,6 +171,11 @@
         if ((ord === 'move') && !options.allowMove) {
           return false;
         }
+
+        // Fix position of crop area when dragged the very first time.
+        // Necessary when crop image is in a hidden element when page is loaded.
+        docOffset = getPos($img);
+
         btndown = true;
         startDragMode(ord, mouseAbs(e));
         e.stopPropagation();
@@ -215,12 +204,12 @@
     function unscale(c) //{{{
     {
       return {
-        x: parseInt(c.x * xscale, 10),
-        y: parseInt(c.y * yscale, 10),
-        x2: parseInt(c.x2 * xscale, 10),
-        y2: parseInt(c.y2 * yscale, 10),
-        w: parseInt(c.w * xscale, 10),
-        h: parseInt(c.h * yscale, 10)
+        x: c.x * xscale,
+        y: c.y * yscale,
+        x2: c.x2 * xscale,
+        y2: c.y2 * yscale,
+        w: c.w * xscale,
+        h: c.h * yscale
       };
     }
     //}}}
@@ -247,11 +236,11 @@
       btndown = true;
       docOffset = getPos($img);
       Selection.disableHandles();
-      myCursor('crosshair');
+      Tracker.setCursor('crosshair');
       var pos = mouseAbs(e);
       Coords.setPressed(pos);
       Selection.update();
-      Tracker.activateHandlers(selectDrag, doneSelect);
+      Tracker.activateHandlers(selectDrag, doneSelect, e.type.substring(0,5)==='touch');
       KeyManager.watchKeys();
 
       e.stopPropagation();
@@ -268,7 +257,7 @@
     function newTracker() //{{{
     {
       var trk = $('<div></div>').addClass(cssClass('tracker'));
-      if ($.browser.msie) {
+      if (is_msie) {
         trk.css({
           opacity: 0,
           backgroundColor: 'white'
@@ -281,9 +270,6 @@
     // }}}
     // Initialization {{{
     // Sanitize some options {{{
-    if ($.browser.msie && ($.browser.version.split('.')[0] === '6')) {
-      ie6mode = true;
-    }
     if (typeof(obj) !== 'object') {
       obj = $(obj)[0];
     }
@@ -299,52 +285,88 @@
     // character in the DOM will be as you left it.
     var img_css = {
       border: 'none',
+      visibility: 'visible',
       margin: 0,
       padding: 0,
-      position: 'absolute'
+      position: 'absolute',
+      top: 0,
+      left: 0
     };
 
-    var $origimg = $(obj);
-    var $img = $origimg.clone().removeAttr('id').css(img_css);
+    var $origimg = $(obj),
+      img_mode = true;
+
+    if (obj.tagName == 'IMG') {
+      // Fix size of crop image.
+      // Necessary when crop image is within a hidden element when page is loaded.
+      if ($origimg[0].width != 0 && $origimg[0].height != 0) {
+        // Obtain dimensions from contained img element.
+        $origimg.width($origimg[0].width);
+        $origimg.height($origimg[0].height);
+      } else {
+        // Obtain dimensions from temporary image in case the original is not loaded yet (e.g. IE 7.0).
+        var tempImage = new Image();
+        tempImage.src = $origimg[0].src;
+        $origimg.width(tempImage.width);
+        $origimg.height(tempImage.height);
+      }
+
+      var $img = $origimg.clone().removeAttr('id').css(img_css).show();
+
+      $img.width($origimg.width());
+      $img.height($origimg.height());
+      $origimg.after($img).hide();
 
-    $img.width($origimg.width());
-    $img.height($origimg.height());
-    $origimg.after($img).hide();
+    } else {
+      $img = $origimg.css(img_css).show();
+      img_mode = false;
+      if (options.shade === null) { options.shade = true; }
+    }
 
     presize($img, options.boxWidth, options.boxHeight);
 
     var boundx = $img.width(),
         boundy = $img.height(),
-        
-        
+
+
         $div = $('<div />').width(boundx).height(boundy).addClass(cssClass('holder')).css({
         position: 'relative',
         backgroundColor: options.bgColor
       }).insertAfter($origimg).append($img);
 
-    delete(options.bgColor);
     if (options.addClass) {
       $div.addClass(options.addClass);
     }
 
-    var $img2 = $('<img />')
-        .attr('src', $img.attr('src')).css(img_css).width(boundx).height(boundy),
+    var $img2 = $('<div />'),
 
-        $img_holder = $('<div />') 
-        .width(pct(100)).height(pct(100)).css({
+        $img_holder = $('<div />')
+        .width('100%').height('100%').css({
           zIndex: 310,
           position: 'absolute',
           overflow: 'hidden'
-        }).append($img2),
+        }),
 
-        $hdl_holder = $('<div />') 
-        .width(pct(100)).height(pct(100)).css('zIndex', 320), 
+        $hdl_holder = $('<div />')
+        .width('100%').height('100%').css('zIndex', 320),
 
-        $sel = $('<div />') 
+        $sel = $('<div />')
         .css({
           position: 'absolute',
-          zIndex: 300
-        }).insertBefore($img).append($img_holder, $hdl_holder); 
+          zIndex: 600
+        }).dblclick(function(){
+          var c = Coords.getFixed();
+          options.onDblClick.call(api,c);
+        }).insertBefore($img).append($img_holder, $hdl_holder);
+
+    if (img_mode) {
+
+      $img2 = $('<img />')
+          .attr('src', $img.attr('src')).css(img_css).width(boundx).height(boundy),
+
+      $img_holder.append($img2);
+
+    }
 
     if (ie6mode) {
       $sel.css({
@@ -362,7 +384,8 @@
 
     /* }}} */
     // Set more variables {{{
-    var bgopacity = options.bgOpacity,
+    var bgcolor = options.bgColor,
+        bgopacity = options.bgOpacity,
         xlimit, ylimit, xmin, ymin, xscale, yscale, enabled = true,
         btndown, animating, shift_down;
 
@@ -370,13 +393,12 @@
     // }}}
     // }}}
     // Internal Modules {{{
-    // Touch Module {{{ 
+    // Touch Module {{{
     var Touch = (function () {
       // Touch support detection function adapted (under MIT License)
       // from code by Jeffrey Sambells - http://github.com/iamamused/
       function hasTouchSupport() {
-        var support = {},
-            events = ['touchstart', 'touchmove', 'touchend'],
+        var support = {}, events = ['touchstart', 'touchmove', 'touchend'],
             el = document.createElement('div'), i;
 
         try {
@@ -404,25 +426,27 @@
       return {
         createDragger: function (ord) {
           return function (e) {
-            e.pageX = e.originalEvent.changedTouches[0].pageX;
-            e.pageY = e.originalEvent.changedTouches[0].pageY;
             if (options.disabled) {
               return false;
             }
             if ((ord === 'move') && !options.allowMove) {
               return false;
             }
+            docOffset = getPos($img);
             btndown = true;
-            startDragMode(ord, mouseAbs(e));
+            startDragMode(ord, mouseAbs(Touch.cfilter(e)), true);
             e.stopPropagation();
             e.preventDefault();
             return false;
           };
         },
         newSelection: function (e) {
+          return newSelection(Touch.cfilter(e));
+        },
+        cfilter: function (e){
           e.pageX = e.originalEvent.changedTouches[0].pageX;
           e.pageY = e.originalEvent.changedTouches[0].pageY;
-          return newSelection(e);
+          return e;
         },
         isSupported: hasTouchSupport,
         support: detectSupport()
@@ -506,8 +530,8 @@
         // This function could use some optimization I think...
         var aspect = options.aspectRatio,
             min_x = options.minSize[0] / xscale,
-            
-            
+
+
             //min_y = options.minSize[1]/yscale,
             max_x = options.maxSize[0] / xscale,
             max_y = options.maxSize[1] / yscale,
@@ -516,7 +540,7 @@
             rwa = Math.abs(rw),
             rha = Math.abs(rh),
             real_ratio = rwa / rha,
-            xx, yy;
+            xx, yy, w, h;
 
         if (max_x === 0) {
           max_x = boundx * 10;
@@ -599,21 +623,13 @@
       //}}}
       function rebound(p) //{{{
       {
-        if (p[0] < 0) {
-          p[0] = 0;
-        }
-        if (p[1] < 0) {
-          p[1] = 0;
-        }
+        if (p[0] < 0) p[0] = 0;
+        if (p[1] < 0) p[1] = 0;
 
-        if (p[0] > boundx) {
-          p[0] = boundx;
-        }
-        if (p[1] > boundy) {
-          p[1] = boundy;
-        }
+        if (p[0] > boundx) p[0] = boundx;
+        if (p[1] > boundy) p[1] = boundy;
 
-        return [p[0], p[1]];
+        return [Math.round(p[0]), Math.round(p[1])];
       }
       //}}}
       function flipCoords(x1, y1, x2, y2) //{{{
@@ -630,7 +646,7 @@
           ya = y2;
           yb = y1;
         }
-        return [Math.round(xa), Math.round(ya), Math.round(xb), Math.round(yb)];
+        return [xa, ya, xb, yb];
       }
       //}}}
       function getRect() //{{{
@@ -718,13 +734,131 @@
     }());
 
     //}}}
+    // Shade Module {{{
+    var Shade = (function() {
+      var enabled = false,
+          holder = $('<div />').css({
+            position: 'absolute',
+            zIndex: 240,
+            opacity: 0
+          }),
+          shades = {
+            top: createShade(),
+            left: createShade().height(boundy),
+            right: createShade().height(boundy),
+            bottom: createShade()
+          };
+
+      function resizeShades(w,h) {
+        shades.left.css({ height: px(h) });
+        shades.right.css({ height: px(h) });
+      }
+      function updateAuto()
+      {
+        return updateShade(Coords.getFixed());
+      }
+      function updateShade(c)
+      {
+        shades.top.css({
+          left: px(c.x),
+          width: px(c.w),
+          height: px(c.y)
+        });
+        shades.bottom.css({
+          top: px(c.y2),
+          left: px(c.x),
+          width: px(c.w),
+          height: px(boundy-c.y2)
+        });
+        shades.right.css({
+          left: px(c.x2),
+          width: px(boundx-c.x2)
+        });
+        shades.left.css({
+          width: px(c.x)
+        });
+      }
+      function createShade() {
+        return $('<div />').css({
+          position: 'absolute',
+          backgroundColor: options.shadeColor||options.bgColor
+        }).appendTo(holder);
+      }
+      function enableShade() {
+        if (!enabled) {
+          enabled = true;
+          holder.insertBefore($img);
+          updateAuto();
+          Selection.setBgOpacity(1,0,1);
+          $img2.hide();
+
+          setBgColor(options.shadeColor||options.bgColor,1);
+          if (Selection.isAwake())
+          {
+            setOpacity(options.bgOpacity,1);
+          }
+            else setOpacity(1,1);
+        }
+      }
+      function setBgColor(color,now) {
+        colorChangeMacro(getShades(),color,now);
+      }
+      function disableShade() {
+        if (enabled) {
+          holder.remove();
+          $img2.show();
+          enabled = false;
+          if (Selection.isAwake()) {
+            Selection.setBgOpacity(options.bgOpacity,1,1);
+          } else {
+            Selection.setBgOpacity(1,1,1);
+            Selection.disableHandles();
+          }
+          colorChangeMacro($div,0,1);
+        }
+      }
+      function setOpacity(opacity,now) {
+        if (enabled) {
+          if (options.bgFade && !now) {
+            holder.animate({
+              opacity: 1-opacity
+            },{
+              queue: false,
+              duration: options.fadeTime
+            });
+          }
+          else holder.css({opacity:1-opacity});
+        }
+      }
+      function refreshAll() {
+        options.shade ? enableShade() : disableShade();
+        if (Selection.isAwake()) setOpacity(options.bgOpacity);
+      }
+      function getShades() {
+        return holder.children();
+      }
+
+      return {
+        update: updateAuto,
+        updateRaw: updateShade,
+        getShades: getShades,
+        setBgColor: setBgColor,
+        enable: enableShade,
+        disable: disableShade,
+        resize: resizeShades,
+        refresh: refreshAll,
+        opacity: setOpacity
+      };
+    }());
+    // }}}
     // Selection Module {{{
     var Selection = (function () {
-      var awake, hdep = 370;
-      var borders = {};
-      var handle = {};
-      var seehandles = false;
-      var hhs = options.handleOffset;
+      var awake,
+          hdep = 370,
+          borders = {},
+          handle = {},
+          dragbar = {},
+          seehandles = false;
 
       // Private Methods
       function insertBorder(type) //{{{
@@ -743,10 +877,10 @@
           cursor: ord + '-resize',
           position: 'absolute',
           zIndex: zi
-        });
+        }).addClass('ord-'+ord);
 
         if (Touch.support) {
-          jq.bind('touchstart', Touch.createDragger(ord));
+          jq.bind('touchstart.jcrop', Touch.createDragger(ord));
         }
 
         $hdl_holder.append(jq);
@@ -755,100 +889,60 @@
       //}}}
       function insertHandle(ord) //{{{
       {
-        return dragDiv(ord, hdep++).css({
-          top: px(-hhs + 1),
-          left: px(-hhs + 1),
-          opacity: options.handleOpacity
-        }).addClass(cssClass('handle'));
+        var hs = options.handleSize,
+
+          div = dragDiv(ord, hdep++).css({
+            opacity: options.handleOpacity
+          }).addClass(cssClass('handle'));
+
+        if (hs) { div.width(hs).height(hs); }
+
+        return div;
       }
       //}}}
       function insertDragbar(ord) //{{{
       {
-        var s = options.handleSize,
-            h = s,
-            w = s,
-            t = hhs,
-            l = hhs;
-
-        switch (ord) {
-        case 'n':
-        case 's':
-          w = pct(100);
-          break;
-        case 'e':
-        case 'w':
-          h = pct(100);
-          break;
-        }
-
-        return dragDiv(ord, hdep++).width(w).height(h).css({
-          top: px(-t + 1),
-          left: px(-l + 1)
-        });
+        return dragDiv(ord, hdep++).addClass('jcrop-dragbar');
       }
       //}}}
-      function createHandles(li) //{{{
+      function createDragbars(li) //{{{
       {
         var i;
         for (i = 0; i < li.length; i++) {
-          handle[li[i]] = insertHandle(li[i]);
+          dragbar[li[i]] = insertDragbar(li[i]);
         }
       }
       //}}}
-      function moveHandles(c) //{{{
+      function createBorders(li) //{{{
       {
-        var midvert = Math.round((c.h / 2) - hhs),
-            midhoriz = Math.round((c.w / 2) - hhs),
-            north = -hhs + 1,
-            west = -hhs + 1,
-            east = c.w - hhs,
-            south = c.h - hhs,
-            x, y;
-
-        if (handle.e) {
-          handle.e.css({
-            top: px(midvert),
-            left: px(east)
-          });
-          handle.w.css({
-            top: px(midvert)
-          });
-          handle.s.css({
-            top: px(south),
-            left: px(midhoriz)
-          });
-          handle.n.css({
-            left: px(midhoriz)
-          });
-        }
-        if (handle.ne) {
-          handle.ne.css({
-            left: px(east)
-          });
-          handle.se.css({
-            top: px(south),
-            left: px(east)
-          });
-          handle.sw.css({
-            top: px(south)
-          });
+        var cl,i;
+        for (i = 0; i < li.length; i++) {
+          switch(li[i]){
+            case'n': cl='hline'; break;
+            case's': cl='hline bottom'; break;
+            case'e': cl='vline right'; break;
+            case'w': cl='vline'; break;
+          }
+          borders[li[i]] = insertBorder(cl);
         }
-        if (handle.b) {
-          handle.b.css({
-            top: px(south)
-          });
-          handle.r.css({
-            left: px(east)
-          });
+      }
+      //}}}
+      function createHandles(li) //{{{
+      {
+        var i;
+        for (i = 0; i < li.length; i++) {
+          handle[li[i]] = insertHandle(li[i]);
         }
       }
       //}}}
       function moveto(x, y) //{{{
       {
-        $img2.css({
-          top: px(-y),
-          left: px(-x)
-        });
+        if (!options.shade) {
+          $img2.css({
+            top: px(-y),
+            left: px(-x)
+          });
+        }
         $sel.css({
           top: px(y),
           left: px(x)
@@ -857,7 +951,7 @@
       //}}}
       function resize(w, h) //{{{
       {
-        $sel.width(w).height(h);
+        $sel.width(Math.round(w)).height(Math.round(h));
       }
       //}}}
       function refresh() //{{{
@@ -872,45 +966,51 @@
       //}}}
 
       // Internal Methods
-      function updateVisible() //{{{
+      function updateVisible(select) //{{{
       {
         if (awake) {
-          return update();
+          return update(select);
         }
       }
       //}}}
-      function update() //{{{
+      function update(select) //{{{
       {
         var c = Coords.getFixed();
 
         resize(c.w, c.h);
         moveto(c.x, c.y);
+        if (options.shade) Shade.updateRaw(c);
 
-/*
-			options.drawBorders &&
-				borders.right.css({ left: px(c.w-1) }) &&
-					borders.bottom.css({ top: px(c.h-1) });
-      */
+        awake || show();
 
-        if (seehandles) {
-          moveHandles(c);
+        if (select) {
+          options.onSelect.call(api, unscale(c));
+        } else {
+          options.onChange.call(api, unscale(c));
         }
-        if (!awake) {
-          show();
+      }
+      //}}}
+      function setBgOpacity(opacity,force,now) //{{{
+      {
+        if (!awake && !force) return;
+        if (options.bgFade && !now) {
+          $img.animate({
+            opacity: opacity
+          },{
+            queue: false,
+            duration: options.fadeTime
+          });
+        } else {
+          $img.css('opacity', opacity);
         }
-
-        options.onChange.call(api, unscale(c));
       }
       //}}}
       function show() //{{{
       {
         $sel.show();
 
-        if (options.bgFade) {
-          $img.fadeTo(options.fadeTime, bgopacity);
-        } else {
-          $img.css('opacity', bgopacity);
-        }
+        if (options.shade) Shade.opacity(bgopacity);
+          else setBgOpacity(bgopacity,true);
 
         awake = true;
       }
@@ -920,11 +1020,8 @@
         disableHandles();
         $sel.hide();
 
-        if (options.bgFade) {
-          $img.fadeTo(options.fadeTime, 1);
-        } else {
-          $img.css('opacity', 1);
-        }
+        if (options.shade) Shade.opacity(1);
+          else setBgOpacity(1);
 
         awake = false;
         options.onRelease.call(api);
@@ -933,7 +1030,6 @@
       function showHandles() //{{{
       {
         if (seehandles) {
-          moveHandles(Coords.getFixed());
           $hdl_holder.show();
         }
       }
@@ -942,7 +1038,6 @@
       {
         seehandles = true;
         if (options.allowResize) {
-          moveHandles(Coords.getFixed());
           $hdl_holder.show();
           return true;
         }
@@ -952,54 +1047,44 @@
       {
         seehandles = false;
         $hdl_holder.hide();
-      } 
+      }
       //}}}
       function animMode(v) //{{{
       {
-        if (animating === v) {
+        if (v) {
+          animating = true;
           disableHandles();
         } else {
+          animating = false;
           enableHandles();
         }
-      } 
+      }
       //}}}
       function done() //{{{
       {
         animMode(false);
         refresh();
-      } 
+      }
       //}}}
-      /* Insert draggable elements {{{*/
-
+      // Insert draggable elements {{{
       // Insert border divs for outline
-      if (options.drawBorders) {
-        borders = {
-          top: insertBorder('hline'),
-          bottom: insertBorder('hline bottom'),
-          left: insertBorder('vline'),
-          right: insertBorder('vline right')
-        };
-      }
 
-      // Insert handles on edges
-      if (options.dragEdges) {
-        handle.t = insertDragbar('n');
-        handle.b = insertDragbar('s');
-        handle.r = insertDragbar('e');
-        handle.l = insertDragbar('w');
-      }
+      if (options.dragEdges && $.isArray(options.createDragbars))
+        createDragbars(options.createDragbars);
 
-      // Insert side and corner handles
-      if (options.sideHandles) {
-        createHandles(['n', 's', 'e', 'w']);
-      }
-      if (options.cornerHandles) {
-        createHandles(['sw', 'nw', 'ne', 'se']);
-      }
+      if ($.isArray(options.createHandles))
+        createHandles(options.createHandles);
+
+      if (options.drawBorders && $.isArray(options.createBorders))
+        createBorders(options.createBorders);
 
-      
       //}}}
 
+      // This is a hack for iOS5 to support drag/move touch functionality
+      $(document).bind('touchstart.jcrop-ios',function(e) {
+        if ($(e.currentTarget).hasClass('jcrop-tracker')) e.stopPropagation();
+      });
+
       var $track = newTracker().mousedown(createDragger('move')).css({
         cursor: 'move',
         position: 'absolute',
@@ -1031,10 +1116,11 @@
         showHandles: showHandles,
         disableHandles: disableHandles,
         animMode: animMode,
+        setBgOpacity: setBgOpacity,
         done: done
       };
     }());
-    
+
     //}}}
     // Tracker Module {{{
     var Tracker = (function () {
@@ -1042,35 +1128,36 @@
           onDone = function () {},
           trackDoc = options.trackDocument;
 
-      function toFront() //{{{
+      function toFront(touch) //{{{
       {
         $trk.css({
           zIndex: 450
         });
-        if (trackDoc) {
+
+        if (touch)
           $(document)
-            .bind('mousemove',trackMove)
-            .bind('mouseup',trackUp);
-        }
-      } 
+            .bind('touchmove.jcrop', trackTouchMove)
+            .bind('touchend.jcrop', trackTouchEnd);
+
+        else if (trackDoc)
+          $(document)
+            .bind('mousemove.jcrop',trackMove)
+            .bind('mouseup.jcrop',trackUp);
+      }
       //}}}
       function toBack() //{{{
       {
         $trk.css({
           zIndex: 290
         });
-        if (trackDoc) {
-          $(document)
-            .unbind('mousemove', trackMove)
-            .unbind('mouseup', trackUp);
-        }
-      } 
+        $(document).unbind('.jcrop');
+      }
       //}}}
       function trackMove(e) //{{{
       {
         onMove(mouseAbs(e));
         return false;
-      } 
+      }
       //}}}
       function trackUp(e) //{{{
       {
@@ -1094,27 +1181,24 @@
         return false;
       }
       //}}}
-      function activateHandlers(move, done) //{{{
+      function activateHandlers(move, done, touch) //{{{
       {
         btndown = true;
         onMove = move;
         onDone = done;
-        toFront();
+        toFront(touch);
         return false;
       }
       //}}}
       function trackTouchMove(e) //{{{
       {
-        e.pageX = e.originalEvent.changedTouches[0].pageX;
-        e.pageY = e.originalEvent.changedTouches[0].pageY;
-        return trackMove(e);
+        onMove(mouseAbs(Touch.cfilter(e)));
+        return false;
       }
       //}}}
       function trackTouchEnd(e) //{{{
       {
-        e.pageX = e.originalEvent.changedTouches[0].pageX;
-        e.pageY = e.originalEvent.changedTouches[0].pageY;
-        return trackUp(e);
+        return trackUp(Touch.cfilter(e));
       }
       //}}}
       function setCursor(t) //{{{
@@ -1123,12 +1207,6 @@
       }
       //}}}
 
-      if (Touch.support) {
-        $(document)
-          .bind('touchmove', trackTouchMove)
-          .bind('touchend', trackTouchEnd);
-      }
-
       if (!trackDoc) {
         $trk.mousemove(trackMove).mouseup(trackUp).mouseout(trackUp);
       }
@@ -1146,8 +1224,9 @@
         position: 'fixed',
         left: '-120px',
         width: '12px'
-      }),
-          $keywrap = $('<div />').css({
+      }).addClass('jcrop-keymgr'),
+
+        $keywrap = $('<div />').css({
           position: 'absolute',
           overflow: 'hidden'
         }).append($keymgr);
@@ -1169,7 +1248,7 @@
       {
         if (options.allowMove) {
           Coords.moveOffset([x, y]);
-          Selection.updateVisible();
+          Selection.updateVisible(true);
         }
         e.preventDefault();
         e.stopPropagation();
@@ -1177,7 +1256,7 @@
       //}}}
       function parseKey(e) //{{{
       {
-        if (e.ctrlKey) {
+        if (e.ctrlKey || e.metaKey) {
           return true;
         }
         shift_down = e.shiftKey ? true : false;
@@ -1197,7 +1276,7 @@
           doNudge(e, 0, nudge);
           break;
         case 27:
-          Selection.release();
+          if (options.allowSelect) Selection.release();
           break;
         case 9:
           return true;
@@ -1235,10 +1314,10 @@
     //}}}
     function animateTo(a, callback) //{{{
     {
-      var x1 = parseInt(a[0], 10) / xscale,
-          y1 = parseInt(a[1], 10) / yscale,
-          x2 = parseInt(a[2], 10) / xscale,
-          y2 = parseInt(a[3], 10) / yscale;
+      var x1 = a[0] / xscale,
+          y1 = a[1] / yscale,
+          x2 = a[2] / xscale,
+          y2 = a[3] / yscale;
 
       if (animating) {
         return;
@@ -1256,8 +1335,8 @@
           pcent = 0,
           velocity = options.swingSpeed;
 
-      x = animat[0];
-      y = animat[1];
+      x1 = animat[0];
+      y1 = animat[1];
       x2 = animat[2];
       y2 = animat[3];
 
@@ -1271,10 +1350,10 @@
         return function () {
           pcent += (100 - pcent) / velocity;
 
-          animat[0] = x + ((pcent / 100) * ix1);
-          animat[1] = y + ((pcent / 100) * iy1);
-          animat[2] = x2 + ((pcent / 100) * ix2);
-          animat[3] = y2 + ((pcent / 100) * iy2);
+          animat[0] = Math.round(x1 + ((pcent / 100) * ix1));
+          animat[1] = Math.round(y1 + ((pcent / 100) * iy1));
+          animat[2] = Math.round(x2 + ((pcent / 100) * ix2));
+          animat[3] = Math.round(y2 + ((pcent / 100) * iy2));
 
           if (pcent >= 99.8) {
             pcent = 100;
@@ -1284,6 +1363,7 @@
             queueAnimator();
           } else {
             Selection.done();
+            Selection.animMode(false);
             if (typeof(callback) === 'function') {
               callback.call(api);
             }
@@ -1295,8 +1375,9 @@
     //}}}
     function setSelect(rect) //{{{
     {
-      setSelectRaw([
-      parseInt(rect[0], 10) / xscale, parseInt(rect[1], 10) / yscale, parseInt(rect[2], 10) / xscale, parseInt(rect[3], 10) / yscale]);
+      setSelectRaw([rect[0] / xscale, rect[1] / yscale, rect[2] / xscale, rect[3] / yscale]);
+      options.onSelect.call(api, unscale(Coords.getFixed()));
+      Selection.enableHandles();
     }
     //}}}
     function setSelectRaw(l) //{{{
@@ -1346,6 +1427,7 @@
     {
       $div.remove();
       $origimg.show();
+      $origimg.css('visibility','visible');
       $(obj).removeData('Jcrop');
     }
     //}}}
@@ -1368,6 +1450,7 @@
         $img2.width(boundx).height(boundy);
         $trk.width(boundx + (bound * 2)).height(boundy + (bound * 2));
         $div.width(boundx).height(boundy);
+        Shade.resize(boundx,boundy);
         enableCrop();
 
         if (typeof(callback) === 'function') {
@@ -1377,6 +1460,19 @@
       img.src = src;
     }
     //}}}
+    function colorChangeMacro($obj,color,now) {
+      var mycolor = color || options.bgColor;
+      if (options.bgFade && supportsColorFade() && options.fadeTime && !now) {
+        $obj.animate({
+          backgroundColor: mycolor
+        }, {
+          queue: false,
+          duration: options.fadeTime
+        });
+      } else {
+        $obj.css('backgroundColor', mycolor);
+      }
+    }
     function interfaceUpdate(alt) //{{{
     // This method tweaks the interface based on options object.
     // Called when options are changed and at end of initialization.
@@ -1394,6 +1490,10 @@
       Tracker.setCursor(options.allowSelect ? 'crosshair' : 'default');
       Selection.setCursor(options.allowMove ? 'move' : 'default');
 
+      if (options.hasOwnProperty('trueSize')) {
+        xscale = options.trueSize[0] / boundx;
+        yscale = options.trueSize[1] / boundy;
+      }
 
       if (options.hasOwnProperty('setSelect')) {
         setSelect(options.setSelect);
@@ -1401,36 +1501,22 @@
         delete(options.setSelect);
       }
 
-      if (options.hasOwnProperty('trueSize')) {
-        xscale = options.trueSize[0] / boundx;
-        yscale = options.trueSize[1] / boundy;
-      }
-      if (options.hasOwnProperty('bgColor')) {
-
-        if (supportsColorFade() && options.fadeTime) {
-          $div.animate({
-            backgroundColor: options.bgColor
-          }, {
-            queue: false,
-            duration: options.fadeTime
-          });
-        } else {
-          $div.css('backgroundColor', options.bgColor);
-        }
+      Shade.refresh();
 
-        delete(options.bgColor);
+      if (options.bgColor != bgcolor) {
+        colorChangeMacro(
+          options.shade? Shade.getShades(): $div,
+          options.shade?
+            (options.shadeColor || options.bgColor):
+            options.bgColor
+        );
+        bgcolor = options.bgColor;
       }
-      if (options.hasOwnProperty('bgOpacity')) {
-        bgopacity = options.bgOpacity;
 
-        if (Selection.isAwake()) {
-          if (options.fadeTime) {
-            $img.fadeTo(options.fadeTime, bgopacity);
-          } else {
-            $div.css('opacity', options.opacity);
-          }
-        }
-        delete(options.bgOpacity);
+      if (bgopacity != options.bgOpacity) {
+        bgopacity = options.bgOpacity;
+        if (options.shade) Shade.refresh();
+          else Selection.setBgOpacity(bgopacity);
       }
 
       xlimit = options.maxSize[0] || 0;
@@ -1448,9 +1534,7 @@
     //}}}
     //}}}
 
-    if (Touch.support) {
-      $trk.bind('touchstart', Touch.newSelection);
-    }
+    if (Touch.support) $trk.bind('touchstart.jcrop', Touch.newSelection);
 
     $hdl_holder.hide();
     interfaceUpdate(true);
@@ -1481,6 +1565,10 @@
       getScaleFactor: function () {
         return [xscale, yscale];
       },
+      getOptions: function() {
+        // careful: internal values are returned
+        return options;
+      },
 
       ui: {
         holder: $div,
@@ -1488,66 +1576,69 @@
       }
     };
 
-    if ($.browser.msie) {
-      $div.bind('selectstart', function () {
-        return false;
-      });
-    }
+    if (is_msie) $div.bind('selectstart', function () { return false; });
 
     $origimg.data('Jcrop', api);
     return api;
   };
   $.fn.Jcrop = function (options, callback) //{{{
   {
-
-    function attachWhenDone(from) //{{{
-    {
-      var opt = (typeof(options) === 'object') ? options : {};
-      var loadsrc = opt.useImg || from.src;
-      var img = new Image();
-      img.onload = function () {
-        function attachJcrop() {
-          var api = $.Jcrop(from, opt);
-          if (typeof(callback) === 'function') {
-            callback.call(api);
-          }
-        }
-
-        function attachAttempt() {
-          if (!img.width || !img.height) {
-            window.setTimeout(attachAttempt, 50);
-          } else {
-            attachJcrop();
-          }
-        }
-        window.setTimeout(attachAttempt, 50);
-      };
-      img.src = loadsrc;
-    }
-    //}}}
-
+    var api;
     // Iterate over each object, attach Jcrop
     this.each(function () {
       // If we've already attached to this object
       if ($(this).data('Jcrop')) {
         // The API can be requested this way (undocumented)
-        if (options === 'api') {
-          return $(this).data('Jcrop');
-        }
+        if (options === 'api') return $(this).data('Jcrop');
         // Otherwise, we just reset the options...
-        else {
-          $(this).data('Jcrop').setOptions(options);
-        }
+        else $(this).data('Jcrop').setOptions(options);
       }
       // If we haven't been attached, preload and attach
       else {
-        attachWhenDone(this);
+        if (this.tagName == 'IMG')
+          $.Jcrop.Loader(this,function(){
+            $(this).css({display:'block',visibility:'hidden'});
+            api = $.Jcrop(this, options);
+            if ($.isFunction(callback)) callback.call(api);
+          });
+        else {
+          $(this).css({display:'block',visibility:'hidden'});
+          api = $.Jcrop(this, options);
+          if ($.isFunction(callback)) callback.call(api);
+        }
       }
     });
 
     // Return "this" so the object is chainable (jQuery-style)
     return this;
   };
+  //}}}
+  // $.Jcrop.Loader - basic image loader {{{
+
+  $.Jcrop.Loader = function(imgobj,success,error){
+    var $img = $(imgobj), img = $img[0];
+
+    function completeCheck(){
+      if (img.complete) {
+        $img.unbind('.jcloader');
+        if ($.isFunction(success)) success.call(img);
+      }
+      else window.setTimeout(completeCheck,50);
+    }
+
+    $img
+      .bind('load.jcloader',completeCheck)
+      .bind('error.jcloader',function(e){
+        $img.unbind('.jcloader');
+        if ($.isFunction(error)) error.call(img);
+      });
+
+    if (img.complete && $.isFunction(success)){
+      $img.unbind('.jcloader');
+      success.call(img);
+    }
+  };
+
   //}}}
   // Global Defaults {{{
   $.Jcrop.defaults = {
@@ -1567,18 +1658,20 @@
     bgFade: false,
     borderOpacity: 0.4,
     handleOpacity: 0.5,
-    handleSize: 9,
-    handleOffset: 5,
+    handleSize: null,
 
     aspectRatio: 0,
     keySupport: true,
-    cornerHandles: true,
-    sideHandles: true,
+    createHandles: ['n','s','e','w','nw','ne','se','sw'],
+    createDragbars: ['n','s','e','w'],
+    createBorders: ['n','s','e','w'],
     drawBorders: true,
     dragEdges: true,
     fixedSupport: true,
     touchSupport: null,
 
+    shade: null,
+
     boxWidth: 0,
     boxHeight: 0,
     boundary: 2,
@@ -1593,6 +1686,7 @@
     // Callbacks / Event Handlers
     onChange: function () {},
     onSelect: function () {},
+    onDblClick: function () {},
     onRelease: function () {}
   };