function ImageResize(element, width, height, imagex, imagey, imagesize, allow_resize, handle, track, ratio)
{
    element         = $(element);
    var parent      = element.getOffsetParent();
    width           = (typeof width         != 'undefined') ? width         : 400;
    height          = (typeof height        != 'undefined') ? height        : 400;
    imageX          = (typeof imagex        != 'undefined') ? $(imagex)     : $('imagex');
    imageY          = (typeof imagey        != 'undefined') ? $(imagey)     : $('imagey');
    imageSize       = (typeof imagesize     != 'undefined') ? $(imagesize)  : $('imagesize');
    handle          = (typeof handle        != 'undefined') ? $(handle)     : $('scale-handle');
    track           = (typeof track         != 'undefined') ? $(track)     : $('scale-track');
    allow_resize    = (typeof allow_resize  != 'undefined') ? allow_resize : true;
    
    var originSize, initialScale;
    
    var mouseDownX, mouseDownY;
    var newOffsetX, newOffsetY;
    
    // initializer
    function init()
    {
        // events on frame
        parent.observe('mousedown', panMouseDown);
        
        // remove mouse events on image
        element.onmousedown = element.onmousemove = function(){ return false; }; // remove mousedown from img
        
        // set size of container box
        parent.setStyle({
            width:  width + 'px',
            height: height + 'px'
        });
        
        // stop processing if image resizing is turned off
        if(!allow_resize) return false;
        
		originSize          = element.getDimensions();	
        var image_min       = Math.min(originSize.width, originSize.height);
        var box_max         = Math.max(width, height);
        var down_ratio      = box_max / image_min;
        var up_ratio        = image_min / box_max;
		
		initialScale        = { width: Math.ceil(originSize.width * down_ratio),
								height: Math.ceil(originSize.height * down_ratio) };
		
        // resize the element
        element.setStyle({
            width:  initialScale.width + 'px',
            height: initialScale.height + 'px'
        });
        
        // update hidden input
        imageSize.writeAttribute('value', initialScale.width + 'x' + initialScale.height);
        
		var ratioValue = 1;
		
		if((typeof ratio  != 'undefined'))
		{
			ratioValue = ratio.value;
			element.setStyle({
				left:  imagex.value + 'px',
				top: imagey.value + 'px'
			});
		}
		
        // create the scale slider
        var slider = new Control.Slider(handle, track, {
            range: $R(1, up_ratio),
            sliderValue: ratioValue,
            onChange: scaleSlideChange,
            onSlide: scaleSlideMove
        });
		
		if(ratioValue != 1)
		{
			scaleSlideChange(ratioValue);
		}
    }

    // Mouse Event: capture the mouse down and start observing the move
    function panMouseDown(event)
    {
        mouseDownX = event.pointerX();
        mouseDownY = event.pointerY();

        // observe mouse moving
        $(document.body).observe('mousemove', panMouseMove);
        $(document.body).observe('mouseup', panMouseUp);
    }
    
    // Mouse Event: remove mouse move and adjust hidden input values
    function panMouseUp(event)
    {
        var dimensions = element.getDimensions();
        imageX.writeAttribute('value', newOffsetX);
        imageY.writeAttribute('value', newOffsetY);
        
        // stop events
        $(document.body).stopObserving('mousemove', panMouseMove);
        $(document.body).stopObserving('mouseup', panMouseUp);
    }
    
    // Mouse Event: observe the mouse move and adjust the position
    function panMouseMove(event)
    {
        var dimensions  = element.getDimensions();
        var x           = event.pointerX() - mouseDownX;
        var y           = event.pointerY() - mouseDownY;

        var offsetX     = parseInt(imageX.readAttribute('value'), 10) + x;
        var offsetY     = parseInt(imageY.readAttribute('value'), 10) + y;
        
        offsetX = newOffsetX = (offsetX >= 0) ? 0:
                            (offsetX + dimensions.width < width) ? (-1 * dimensions.width + width) : offsetX;
        offsetY = newOffsetY = (offsetY >= 0) ? 0:
                            (offsetY + dimensions.height < height) ? (-1 * dimensions.height + height) : offsetY;

        element.setStyle({
            left: offsetX + 'px',
            top:  offsetY + 'px'
        });
    }
    
    // Slider Event: update hidden inputs on slider change
    function scaleSlideChange(value)
    {
        scaleSlideMove(value);
        
        var dimensions = element.getDimensions();
        imageSize.writeAttribute('value', dimensions.width + 'x' + dimensions.height);
        imageX.writeAttribute('value', parseInt(element.getStyle('left'), 10));
        imageY.writeAttribute('value', parseInt(element.getStyle('top'), 10));
		ratio.writeAttribute('value', value);
    }
    
    // Slider Event: scale image based on handle position
    function scaleSlideMove(value)
    {
	    var dimensions      = element.getDimensions();
        var newWidth        = Math.ceil(initialScale.width * value);
        var newHeight       = Math.ceil(initialScale.height * value);
        
        element.setStyle({
            width:  newWidth + 'px',
            height: newHeight + 'px'
        });
        
        // update positioning if resized from right/bottom edge
        var left            = parseInt(element.getStyle('left'), 10);
        var top             = parseInt(element.getStyle('top'), 10);
        var left_pixels     = newWidth + left;
        var top_pixels      = newHeight + top;
        
        if(left_pixels < width)
            element.style.left = left + width - left_pixels + 'px';
        
        if(top_pixels < height)
            element.style.top = top + width - top_pixels + 'px';
    }
    
    init();
}