Ext.define("IceCap.component.Selector", {

    xtype: "icecap-selector",

    alias: [
        "widget-icecap-selector"
    ],

    extend: "Ext.Component",

    hidden: true,

    baseCls: Ext.baseCSSPrefix + "icecap-selector",

    listeners: {
        beforerender: {
            fn: function (i_selector) {

                var i_self = this;

                var o_data = i_self.renderData || i_self.data || {};

                Ext.applyIf(o_data, {
                    width: i_self.width || 0,
                    height: i_self.height || 0,
                });

                i_self.renderData = i_self.data = o_data;
            }
        },
        afterrender: {
            fn: function (i_selector) {

                i_selector.el.dom.setAttribute("draggable", false);
                i_selector.update();
            }
        },
        show: {
            fn: function (i_selector) {

                i_selector.update();
            }
        }
    },

    renderTpl: [
        "<span id=\"{id}-selector\" draggable=false role=presentation data-ref=\"selectorEl\"",
        "style=\"",
            "border:1px dotted black;",
            "position: absolute;",
            "width: 100%;",
            "height: 100%;",
        "\">",
        "</span>"
    ],

    childEls: [
        {
            name: "selectorEl",
            itemId: "selector"
        },
    ],

    config: {
        top: 0,
        left: 0,
        selecting: false,
        theme: ""
    },

    constructor: function (o_config) {

        var i_self = this;

        i_self.callParent(arguments);
    },

    initComponent: function () {

        var i_self = this;
        i_self.cls = ["iceCap-selector", i_self.getTheme()].filter(Boolean).join("-");

        i_self.callParent(arguments);

        i_self.mon(Ext.getDoc(), "mousedown", function(i_event) {

            i_self.setWidth(0);
            i_self.setHeight(0);
            i_self.setTop(i_event.getY());
            i_self.setLeft(i_event.getX());
            i_self.update();

            i_self.setSelecting(true);
        });

        i_self.mon(Ext.getDoc(), "mousemove", function (i_event) {

            if (i_self.getSelecting()) {

                var n_left = i_event.getX();
                var n_top = i_event.getY();

                i_self.calculateArea(n_left, n_top);
                i_self.update();
            }
        });

        i_self.mon(Ext.getDoc(), "mouseup", function (i_event) {

            i_self.setWidth(0);
            i_self.setHeight(0);
            i_self.setSelecting(false);
            i_self.update();

        });
    },

    update: function() {

        var i_self = this;

        if (i_self.rendered) {

            i_self.setX(i_self.getLeft());
            i_self.setY(i_self.getTop());
        }
    },

    updateSelecting: function(b_selecting) {

        var i_self = this;

        if (i_self.rendered) {
            i_self[b_selecting ? "show": "hide"]();
        }
    },

    calculateArea: function(n_x, n_y) {

        var i_self = this;
        var n_left = i_self.getLeft();
        var n_top = i_self.getTop();

        var n_xMin = Math.min(n_left, n_x);
        var n_xMax = Math.max(n_left, n_x);

        var n_yMin = Math.min(n_top, n_y);
        var n_yMax = Math.max(n_top, n_y);

        var n_width = n_xMax - n_xMin;
        var n_height = n_yMax - n_yMin;

        i_self.setWidth(n_width);
        i_self.setHeight(n_height);
    }
});
