MECS-resizer.js

// This sets the bounding box of the
// resize function. If the image is bigger or smaller than this,
// it's forced to this size. 
var boxWidth = 500;
var boxHeight = 370;

var jcrop;
var defaultSelection;

function initializeJCrop() {    
    var realHeight = $("#imgCrop").height();
    var realWidth = $("#imgCrop").width();

    // Set the initial values incase the user clicks really fast.
    jQuery('#x').val(0);
    jQuery('#y').val(0);
    jQuery('#w').val(realWidth);
    jQuery('#h').val(realHeight);
    
    // Select box with 100% width. Height ignored.
    defaultSelection = {
        x: 0, 
        y: 0,
        x2: realWidth, 
        y2: 0 
    }    
        
    jcrop = $.Jcrop('#imgCrop', {
        aspectRatio: boxWidth / boxHeight,
        onSelect: updateCoordinatesOfHiddenFields,
        boxWidth: boxWidth,
        boxHeight: boxHeight,
        setSelect: [0,0,0,0] // Initial selection is 0 pixels on the top left -  
                             // It's the .animateTo call below sets the actual selection.
    });
    setTimeout("fireInitialSelection()", 1000);
}

function fireInitialSelection() {
    // Animates to the initial selection! Wrooom!
    jcrop.animateTo([defaultSelection.x, defaultSelection.y, defaultSelection.x2, defaultSelection.y2]);
    setTimeout("jcrop.tellSelect()", 500); // Update hidden values after animation completes
}

jQuery(document).ready(function() { $("#imgCrop").load(initializeJCrop) });

function updateCoordinatesOfHiddenFields(newCoordinates) {
    jQuery('#x').val(newCoordinates.x);
    jQuery('#y').val(newCoordinates.y);
    jQuery('#w').val(newCoordinates.w);
    jQuery('#h').val(newCoordinates.h);
};