/**
 * Pimcore
 *
 * This source file is available under two different licenses:
 * - GNU General Public License version 3 (GPLv3)
 * - Pimcore Enterprise License (PEL)
 * Full copyright and license information is available in
 * LICENSE.md which is distributed with this source code.
 *
 * @copyright  Copyright (c) 2009-2016 pimcore GmbH (http://www.pimcore.org)
 * @license    http://www.pimcore.org/license     GPLv3 and PEL
 */

pimcore.registerNS("pimcore.element.tag.imagecropper");
pimcore.element.tag.imagecropper = Class.create({

    initialize: function (imageId, data, saveCallback, config) {
        this.imageId = imageId;
        this.data = data;
        this.saveCallback = saveCallback;
        this.modal = true;

        this.ratioX = null;
        this.ratioY = null;
        if(typeof config == "object") {
            if(config["ratioX"] && config["ratioY"]) {
                this.ratioX = config["ratioX"];
                this.ratioY = config["ratioY"];
            }
        }
    },

    open: function (modal) {
        var imageUrl = '/admin/asset/get-image-thumbnail/id/' + this.imageId + '/width/500/height/400/contain/true';

        if(typeof modal != "undefined") {
            this.modal = modal;
        }

        this.editWindow = new Ext.Window({
            width: 500,
            height: 400,
            modal: this.modal,
            closeAction: "close",
            resizable: false,
            bodyStyle: "background: url(" + imageUrl + ") center center no-repeat;position:relative;",
            bbar: ["->", {
                xtype: "button",
                iconCls: "pimcore_icon_apply",
                text: t("save"),
                handler: function () {

                    var originalWidth = this.editWindow.getInnerWidth();
                    var originalHeight = this.editWindow.getInnerHeight();

                    var dimensions = Ext.get("selector").getStyles("top","left","width","height");

                    var newWidth = intval(dimensions.width);
                    var newHeight = intval(dimensions.height);
                    var top = intval(dimensions.top);
                    var left = intval(dimensions.left);

                    this.data = {
                        cropWidth: newWidth * 100 / originalWidth,
                        cropHeight: newHeight * 100 / originalHeight,
                        cropTop: top * 100 / originalHeight,
                        cropLeft: left * 100 / originalWidth,
                        cropPercent: true
                    };

                    if(typeof this.saveCallback == "function") {
                        this.saveCallback(this.data);
                    }

                    this.resizer = null;
                    this.editWindow.close();
                }.bind(this)
            }],
            html: '<img id="selectorImage" src="' + imageUrl + '" />' +
                '<div id="selector" style="cursor:move; position: absolute; top: 10px; left: 10px;z-index:9000;"></div>'
        });

        this.editWindowInitCount = 0;

        this.editWindow.on("afterrender", function ( ){
            this.editWindowInterval = window.setInterval(function () {
                var el = Ext.get("selectorImage");
                var imageWidth = el.getWidth();
                var imageHeight = el.getHeight();

                if(el) {
                    if(el.getWidth() > 30) {
                        clearInterval(this.editWindowInterval);
                        this.editWindowInitCount = 0;

                        var winBodyInnerSize = this.editWindow.body.getSize();
                        var winOuterSize = this.editWindow.getSize();
                        var paddingWidth = winOuterSize["width"] - winBodyInnerSize["width"];
                        var paddingHeight = winOuterSize["height"] - winBodyInnerSize["height"];

                        this.editWindow.setSize(imageWidth + paddingWidth, imageHeight + paddingHeight);

                        Ext.get("selectorImage").remove();

                        var checkSize = function () {
                            // this function checks if the selected area fits into the image
                            var sel = Ext.get("selector");
                            var dimensions;
                            var originalWidth = this.editWindow.getInnerWidth();
                            var originalHeight = this.editWindow.getInnerHeight();
                            var skip = false;

                            while(!skip) {
                                skip = true;
                                 dimensions = sel.getStyles("top","left","width","height");

                                if(intval(dimensions.top) < 0) {
                                    sel.setStyle("top", "0");
                                    skip = false;
                                }
                                if(intval(dimensions.left) < 0) {
                                    sel.setStyle("left", "0");
                                    skip = false;
                                }
                                if((intval(dimensions.left) + intval(dimensions.width)) > originalWidth) {
                                    if(intval(dimensions.left) < originalWidth || intval(dimensions.left) > originalWidth) {
                                        sel.setStyle("left", (originalWidth-intval(dimensions.width)) + "px");
                                    }
                                    if(intval(dimensions.width) > originalWidth) {
                                        sel.setStyle("width", (originalWidth) + "px");
                                    }
                                    skip = false;
                                }
                                if((intval(dimensions.top) + intval(dimensions.height)) > originalHeight) {
                                    if(intval(dimensions.top) < originalHeight || intval(dimensions.top) > originalHeight) {
                                        sel.setStyle("top", (originalHeight-intval(dimensions.height)) + "px");
                                    }
                                    if(intval(dimensions.height) > originalHeight) {
                                        sel.setStyle("height", (originalHeight) + "px");
                                    }
                                    skip = false;
                                }
                            }


                            // check the ratio if given
                            if(this.ratioX && this.ratioY) {
                                dimensions = sel.getStyles("width","height");

                                var height = intval(dimensions.width) * (this.ratioY / this.ratioX);
                                sel.setStyle("height", (height) + "px");
                            }
                        };

                        this.resizer = new Ext.Resizable('selector', {
                            pinned:true,
                            minWidth:50,
                            minHeight: 50,
                            preserveRatio: false,
                            dynamic:true,
                            handles: 'all',
                            draggable:true,
                            width: 100,
                            height: 100,
                            listeners: {
                                resize: checkSize.bind(this)
                            }
                        });

                        this.resizer.dd.endDrag = checkSize.bind(this);

                        if(this.data && this.data["cropPercent"]) {
                            Ext.get("selector").applyStyles({
                                width: (imageWidth * (this.data.cropWidth / 100)) + "px",
                                height: (imageHeight * (this.data.cropHeight / 100)) + "px",
                                top: (imageHeight * (this.data.cropTop / 100)) + "px",
                                left: (imageWidth * (this.data.cropLeft / 100)) + "px"
                            });
                        }

                        return;

                    } else if (this.editWindowInitCount > 60) {
                        // if more than 30 secs cancel and close the window
                        this.resizer = null;
                        this.editWindow.close();
                    }

                    this.editWindowInitCount++;
                }
            }.bind(this), 500);

        }.bind(this));

        this.editWindow.show();
    }

});
