1 files changed, 49 insertions, 0 deletions
diff --git a/app/assets/javascripts/profile_photo.js b/app/assets/javascripts/profile_photo.js
new file mode 100644
index 000000000..6d637b439
--- /dev/null
+++ b/app/assets/javascripts/profile_photo.js
@@ -0,0 +1,49 @@
+// Remember to invoke within jQuery(window).load(...)
+// If you don't, Jcrop may not initialize properly
+jQuery(window).load(function(){
+    // The size of the initial selection (largest, centreted rectangle)
+    var w = jQuery('#profile_photo_cropbox').width();
+    var h = jQuery('#profile_photo_cropbox').height();
+    var t = 0;
+    var l = 0;
+    var initial;
+    if (h < w) {
+        initial = h;
+        l = (w - initial) / 2;
+    } else {
+        initial = w;
+        t = (h - initial) / 2;
+    }
+
+    jQuery('#profile_photo_cropbox').Jcrop({
+        onChange: showPreview,
+        onSelect: showPreview,
+        aspectRatio: 1,
+        setSelect: [ l, t, initial, initial ]
+    });
+
+});
+
+// Our simple event handler, called from onChange and onSelect
+// event handlers, as per the Jcrop invocation above
+function showPreview(coords)
+{
+    if (parseInt(coords.w) > 0)
+    {
+        var rx = 100 / coords.w;
+        var ry = 100 / coords.h;
+
+        jQuery('#profile_photo_preview').css({
+            width: Math.round(rx * jQuery('#profile_photo_cropbox').width()) + 'px',
+            height: Math.round(ry * jQuery('#profile_photo_cropbox').height()) + 'px',
+            marginLeft: '-' + Math.round(rx * coords.x) + 'px',
+            marginTop: '-' + Math.round(ry * coords.y) + 'px'
+        });
+
+        $('#x').val(coords.x);
+        $('#y').val(coords.y);
+        $('#w').val(coords.w);
+        $('#h').val(coords.h);
+    }
+}
+