upgraded js libs

jquery from 1.8.2 to 1.8.3
jquery jCrop from 0.9.9 to 0.9.10

git-svn-id: http://piwigo.org/svn/trunk@19682 68402e56-0260-453c-a942-63ccdbb3a9ee

1 files changed, 373 insertions, 278 deletions

diff --git a/themes/default/js/plugins/jquery.Jcrop.js b/themes/default/js/plugins/jquery.Jcrop.js
index 22731d606..2bf9f70f0 100644
--- a/themes/default/js/plugins/jquery.Jcrop.js
+++ b/themes/default/js/plugins/jquery.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.10
+ * jQuery Image Cropping Plugin - released under MIT License 
+ * Author: Kelly Hallman <khallman@gmail.com>
+ * http://github.com/tapmodo/Jcrop
+ * Copyright (c) 2008-2012 Tapmodo Interactive LLC {{{
  *
  * Permission is hereby granted, free of charge, to any person
  * obtaining a copy of this software and associated documentation
@@ -36,10 +37,7 @@
 
     // Internal Methods {{{
     function px(n) {
-      return parseInt(n, 10) + 'px';
-    }
-    function pct(n) {
-      return parseInt(n, 10) + '%';
+      return n + 'px';
     }
     function cssClass(cl) {
       return options.baseClass + '-' + cl;
@@ -49,7 +47,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,28 +58,12 @@
     //}}}
     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) //{{{
@@ -187,6 +168,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 +201,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,7 +233,7 @@
       btndown = true;
       docOffset = getPos($img);
       Selection.disableHandles();
-      myCursor('crosshair');
+      Tracker.setCursor('crosshair');
       var pos = mouseAbs(e);
       Coords.setPressed(pos);
       Selection.update();
@@ -299,17 +285,43 @@
     // 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);
 
@@ -322,30 +334,40 @@
         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({
+        .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), 
+        .width('100%').height('100%').css('zIndex', 320), 
 
         $sel = $('<div />') 
         .css({
           position: 'absolute',
-          zIndex: 300
+          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({
         overflowY: 'hidden'
@@ -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;
 
@@ -516,7 +539,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;
@@ -630,7 +653,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 +741,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 +884,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 +896,55 @@
       //}}}
       function insertHandle(ord) //{{{
       {
+        var hs = options.handleSize;
         return dragDiv(ord, hdep++).css({
-          top: px(-hhs + 1),
-          left: px(-hhs + 1),
           opacity: options.handleOpacity
-        }).addClass(cssClass('handle'));
+        }).width(hs).height(hs).addClass(cssClass('handle'));
       }
       //}}}
       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)
@@ -872,45 +968,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 +1022,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 +1032,6 @@
       function showHandles() //{{{
       {
         if (seehandles) {
-          moveHandles(Coords.getFixed());
           $hdl_holder.show();
         }
       }
@@ -942,7 +1040,6 @@
       {
         seehandles = true;
         if (options.allowResize) {
-          moveHandles(Coords.getFixed());
           $hdl_holder.show();
           return true;
         }
@@ -969,37 +1066,25 @@
         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,6 +1116,7 @@
         showHandles: showHandles,
         disableHandles: disableHandles,
         animMode: animMode,
+        setBgOpacity: setBgOpacity,
         done: done
       };
     }());
@@ -1047,10 +1133,15 @@
         $trk.css({
           zIndex: 450
         });
+        if (Touch.support) {
+          $(document)
+            .bind('touchmove.jcrop', trackTouchMove)
+            .bind('touchend.jcrop', trackTouchEnd);
+        }
         if (trackDoc) {
           $(document)
-            .bind('mousemove',trackMove)
-            .bind('mouseup',trackUp);
+            .bind('mousemove.jcrop',trackMove)
+            .bind('mouseup.jcrop',trackUp);
         }
       } 
       //}}}
@@ -1059,11 +1150,7 @@
         $trk.css({
           zIndex: 290
         });
-        if (trackDoc) {
-          $(document)
-            .unbind('mousemove', trackMove)
-            .unbind('mouseup', trackUp);
-        }
+        $(document).unbind('.jcrop');
       } 
       //}}}
       function trackMove(e) //{{{
@@ -1123,12 +1210,6 @@
       }
       //}}}
 
-      if (Touch.support) {
-        $(document)
-          .bind('touchmove', trackTouchMove)
-          .bind('touchend', trackTouchEnd);
-      }
-
       if (!trackDoc) {
         $trk.mousemove(trackMove).mouseup(trackUp).mouseout(trackUp);
       }
@@ -1169,7 +1250,7 @@
       {
         if (options.allowMove) {
           Coords.moveOffset([x, y]);
-          Selection.updateVisible();
+          Selection.updateVisible(true);
         }
         e.preventDefault();
         e.stopPropagation();
@@ -1177,7 +1258,7 @@
       //}}}
       function parseKey(e) //{{{
       {
-        if (e.ctrlKey) {
+        if (e.ctrlKey || e.metaKey) {
           return true;
         }
         shift_down = e.shiftKey ? true : false;
@@ -1197,7 +1278,7 @@
           doNudge(e, 0, nudge);
           break;
         case 27:
-          Selection.release();
+          if (options.allowSelect) Selection.release();
           break;
         case 9:
           return true;
@@ -1235,10 +1316,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;
@@ -1295,8 +1376,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) //{{{
@@ -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')) {
+      Shade.refresh();
 
-        if (supportsColorFade() && options.fadeTime) {
-          $div.animate({
-            backgroundColor: options.bgColor
-          }, {
-            queue: false,
-            duration: options.fadeTime
-          });
-        } else {
-          $div.css('backgroundColor', options.bgColor);
-        }
-
-        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,60 +1576,37 @@
       }
     };
 
-    if ($.browser.msie) {
-      $div.bind('selectstart', function () {
-        return false;
-      });
-    }
+    if ($.browser.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);
+        }
       }
     });
 
@@ -1549,6 +1614,33 @@
     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 +1659,20 @@
     bgFade: false,
     borderOpacity: 0.4,
     handleOpacity: 0.5,
-    handleSize: 9,
-    handleOffset: 5,
+    handleSize: 7,
 
     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 +1687,7 @@
     // Callbacks / Event Handlers
     onChange: function () {},
     onSelect: function () {},
+    onDblClick: function () {},
     onRelease: function () {}
   };