Ext.namespace('Kwc.Abstract.Image');
Kwc.Abstract.Image.CropWindow = Ext.extend(Ext.Window, {
    cropData: null,
    imageUrl: '',
    resizable: false,
    title: 'Image Crop Utility',
    width: 660,
    height: 510,
    modal: true,
    preserveRatio: false,

    initComponent: function() {
        this.fbar = {
            xtype: 'toolbar',
            items: [
                {
                    xtype: 'button',
                    text: 'cancel',
                    itemId: 'cancelButton'
                },
                {
                    xtype: 'button',
                    text: 'save',
                    itemId: 'saveButton'
                }
            ]
        };

        Kwc.Abstract.Image.CropWindow.superclass.initComponent.call(this);

        //TODO implement mask while loading
        var imgLoad = new Image();
        imgLoad.onerror = (function() {
            Ext.Msg.alert(trl('Error'), trl('Couldn\'t load image.'));
        });
        imgLoad.onload = (function(){
            this.setSize(imgLoad.width+14, imgLoad.height + 69);
            var cropWidth, cropHeight, cropX = 0, cropY = 0;
            if (this.cropData) {
                cropX = this.cropData.x;
                cropY = this.cropData.y;
                cropWidth = this.cropData.width;
                cropHeight = this.cropData.height;
            } else {
                cropWidth = imgLoad.width;
                cropHeight = imgLoad.height;

                if (this.preserveRatio) {
                    if (cropHeight / this.outHeight > cropWidth / this.outWidth) {
                        // orientate on width
                        cropHeight = this.outHeight * cropWidth / this.outWidth;
                        cropY = (imgLoad.height - cropHeight)/2;
                    } else {
                        // orientate on height
                        cropWidth = this.outWidth * cropHeight / this.outHeight;
                        cropX = (imgLoad.width - cropWidth)/2;
                    }
                }
            }

            this.cropData = {
                x: cropX,
                y: cropY,
                width: cropWidth,
                height: cropHeight
            };
            var crop = new Kwc.Abstract.Image.CropImage({
                src: this.imageUrl,
                preserveRatio: this.preserveRatio,
                width: imgLoad.width,
                height: imgLoad.height,
                cropWidth: cropWidth,
                cropHeight: cropHeight,
                cropX: cropX,
                cropY: cropY
            });

            crop.on('changeCrop', function(foo,x) {
                this.fireEvent('changeCrop', foo, x);
                this.cropData = x;
            }, this);
            this.add(crop);
            this.doLayout();
        }).createDelegate(this);
        imgLoad.src = this.imageUrl;
    }
});

Ext.reg('kwc.image.cropwindow', Kwc.Abstract.Image.CropWindow);

@@ -158,16 +158,23 @@
  title: 
+trlKwf(
 'Image C
@@ -185,16 +185,17 @@
 Utility'
+)
 ,%0A    wi
@@ -455,16 +455,24 @@
 xt: 
-'c
+trlKwf('C
 ancel'
+)
 ,%0A  
@@ -616,14 +616,22 @@
 xt: 
-'s
+trlKwf('S
 ave'
+)
 ,%0A  
@@ -937,16 +937,19 @@
 lert(trl
+Kwf
 ('Error'
@@ -954,16 +954,19 @@
 r'), trl
+Kwf
 ('Couldn

Add trlKwf for strings