/// <reference name="MicrosoftAjax.debug.js" />
/// <reference name="MicrosoftAjaxTimer.debug.js" />
/// <reference name="MicrosoftAjaxWebForms.debug.js" />



Type.registerNamespace("SGis.AjaxToolTip");

// ArrowPosition
// Especifica la posición sonde se va a ubicar  la flecha
//
SGis.AjaxToolTip.ArrowPosition = function() {

}
SGis.AjaxToolTip.ArrowPosition.prototype = {
    Left: 0,
    Right: 1,
    Top: 2,
    Bottom: 3
}
SGis.AjaxToolTip.ArrowPosition.registerEnum('SGis.AjaxToolTip.ArrowPosition', false);



SGis.AjaxToolTip.ToolTipControl = function(element) {
    SGis.AjaxToolTip.ToolTipControl.initializeBase(this, [element]);
    // Propiedades
    this._Opacity = .5;                                          // Opacidad del tooltip
    this._ArrowSize = 10;                                        // Determina el tamaño de la flecha
    this._ArrowOffset = 100;                                     // Determina el offset donde esta la punta de la flecha desde el origen
    this._ArrowPosition = SGis.AjaxToolTip.ArrowPosition.Left;   // Posición de la flecha
    this._Color = '#BBBBBB';                                     // Color de fondo
    this._Border = '#000000';                                    // Color de borde
    this._Beveled = 3;                                           // Nivel de Beveled (cortes en esquinas)
    // Controles
    this._frame = null; // Div utilizado como frame
    // Fields
    // Eventos
}

SGis.AjaxToolTip.ToolTipControl.prototype = {
    initialize: function() {
        SGis.AjaxToolTip.ToolTipControl.callBaseMethod(this, 'initialize');
        // Crea Controles
        this.buildAllControls();
    },
    dispose: function() {
        //Add custom dispose actions here
        SGis.AjaxToolTip.ToolTipControl.callBaseMethod(this, 'dispose');
    },
    buildAllControls: function() {
        var elt = this.get_element();
        var size = Sys.UI.DomElement.getBounds(elt);
        var sizeFrame = { width: size.width - this._ArrowSize, height: size.height };
        // Control frame
        this._frame = $common.createElementFromTemplate(
        {
            nodeName: "div",
            properties: {
                style: {
                    position: 'relative',
                    left: '0px',
                    top: '0px',
                    width: size.width + 'px',
                    height: size.height + 'px'
                }
            }

        }, elt);
        // determina si es horizontal o vertical
        var d0 = 1;  // Dimension 0
        var d1 = 0;  // Dimension 1
        if (this._ArrowPosition == SGis.AjaxToolTip.ArrowPosition.Left || this._ArrowPosition == SGis.AjaxToolTip.ArrowPosition.Right) {
            d0 = 0;
            d1 = 1;
        }
        // 
        var dim = [];
        dim[d0] = sizeFrame.width;
        dim[d1] = sizeFrame.height;
        // de acuerdo a la posición, se administran los márgenes
        var m0 = 0;  // Para Left es el izquierdo
        var m1 = 1;  // Para Left es top
        var m2 = 2;  // Para Left es right
        var m3 = 3;  // Para Left es bottom
        switch (this._ArrowPosition) {
            case SGis.AjaxToolTip.ArrowPosition.Top:
                m0 = 1;
                m1 = 2;
                m2 = 3;
                m3 = 0;
                break;
            case SGis.AjaxToolTip.ArrowPosition.Right:
                m0 = 2;
                m1 = 3;
                m2 = 0;
                m3 = 1;
                break;
            case SGis.AjaxToolTip.ArrowPosition.Bottom:
                m0 = 3;
                m1 = 0;
                m2 = 1;
                m3 = 2;
                break;
        }
        var arrowOffset = this._ArrowOffset;
        switch (this._ArrowPosition) {
            case SGis.AjaxToolTip.ArrowPosition.Right:
                arrowOffset = dim[d1] - this._ArrowOffset;
                break;
            case SGis.AjaxToolTip.ArrowPosition.Top:
                arrowOffset = dim[d1] - this._ArrowOffset;
                break;
        }

        var margenes = []; // Margenes (autorotados por el indice)
        var bordes = [];   // Bordes (autorotados por el indice)
        // Bordes superiores
        var cant = 3 + this._Beveled * 2;
        for (var i = 0; i < this._Beveled; i++) {
            margenes[m0] = (this._Beveled - i) + this._ArrowSize;
            margenes[m1] = i;
            margenes[m2] = this._Beveled - i;
            margenes[m3] = dim[d1] - i - 1;
            if (i == 0) bordes[m1] = true; else bordes[m1] = false;
            bordes[m0] = true;
            bordes[m2] = true;
            bordes[m3] = false;
            //
            this.drawRectangle(this._frame, margenes, bordes, dim);
        }
        // Parte media
        // Sobre flecha
        margenes[m0] = this._ArrowSize;
        margenes[m1] = this._Beveled;
        margenes[m2] = 0;
        margenes[m3] = dim[d1] - arrowOffset + this._ArrowSize - 1;
        bordes[m0] = true;
        bordes[m1] = this._Beveled > 0 ? false : true;
        bordes[m2] = true;
        bordes[m3] = false;
        this.drawRectangle(this._frame, margenes, bordes, dim);
        // En Flecha
        margenes[m0] = this._ArrowSize;
        margenes[m1] = arrowOffset - this._ArrowSize + 1;
        margenes[m2] = 0;
        margenes[m3] = dim[d1] - arrowOffset - this._ArrowSize;
        bordes[m0] = false;
        bordes[m1] = false;
        bordes[m2] = true;
        bordes[m3] = false;
        this.drawRectangle(this._frame, margenes, bordes, dim);
        // Debajo de flecha
        margenes[m0] = this._ArrowSize;
        margenes[m1] = arrowOffset + this._ArrowSize;
        margenes[m2] = 0;
        margenes[m3] = this._Beveled;
        bordes[m0] = true;
        bordes[m1] = false;
        bordes[m2] = true;
        bordes[m3] = this._Beveled > 0 ? false : true;
        this.drawRectangle(this._frame, margenes, bordes, dim);

        // Beveled inferior
        for (var i = this._Beveled - 1; i >= 0; i--) {
            margenes[m0] = (this._Beveled - i) + this._ArrowSize;
            margenes[m1] = dim[d1] - i - 1;
            margenes[m2] = this._Beveled - i;
            margenes[m3] = i;
            if (i == 0) bordes[m3] = true; else bordes[m3] = false;
            bordes[m0] = true;
            bordes[m2] = true;
            bordes[m1] = false;
            //
            this.drawRectangle(this._frame, margenes, bordes, dim);
        }
        // Dibuja flecha
        for (var i = 0; i < this._ArrowSize; i++) {
            margenes[m0] = i;
            margenes[m1] = arrowOffset - i;
            margenes[m2] = dim[d0] - i - 1;
            margenes[m3] = dim[d1] - arrowOffset - i - 1;
            bordes[m0] = i == 0 ? true : false;
            bordes[m1] = true;
            bordes[m2] = false;
            bordes[m3] = true;
            //
            this.drawRectangle(this._frame, margenes, bordes, dim);
        }

    },

    drawRectangle: function(elt, margenes, bordes, dim) {
        var Border = this._Border;
        var color = this._Color;
        //
        var ml = (bordes[0]) ? 1 : 0;
        var mr = (bordes[2]) ? 1 : 0;
        var mt = (bordes[1]) ? 1 : 0;
        var mb = (bordes[3]) ? 1 : 0;
        //
        var x = margenes[0];
        var y = margenes[1];
        var w = dim[0] - margenes[2] - margenes[0] - ml - mr;
        var h = dim[1] - margenes[1] - margenes[3] - mt - mb;
        // Ya que no se puede colocar los bordes, se pinta el fondo del color de bordes
        var borde = true;
        if (w < 0) {
            w = 1;
            if (h < 1) {
                h = 1;
                color = Border;
                borde = false;
            }
        }
        if (h < 0) {
            h = 1;
            if (w < 1) {
                w = 1;
                color = Border;
                borde = false;
            }
        }
        var bl = bordes[0] && borde ? "solid 1px " + Border : "none";
        var bt = bordes[1] && borde ? "solid 1px " + Border : "none";
        var br = bordes[2] && borde ? "solid 1px " + Border : "none";
        var bb = bordes[3] && borde ? "solid 1px " + Border : "none";


        var rec = $common.createElementFromTemplate(
        {
            nodeName: "div",
            properties: {
                style: {
                    backgroundColor: color,
                    position: 'absolute',
                    overflow: 'hidden',
                    left: x + 'px',
                    top: y + 'px',
                    width: w + 'px',
                    height: h + 'px',
                    borderLeft: bl,
                    borderRight: br,
                    borderTop: bt,
                    borderBottom: bb
                }
            },
            opacity: this._Opacity

        }, elt);

    },


    //--------------------------------------------------------------------------
    // Acceso a Propiedades
    //--------------------------------------------------------------------------
    get_Opacity: function() {
        return this._Opacity;
    },
    set_Opacity: function(value) {
        if (this._Opacity != value) {
            this._Opacity = value;
            this.raisePropertyChanged('Opacity');
        }
    },

    get_ArrowSize: function() {
        return this._ArrowSize;
    },
    set_ArrowSize: function(value) {
        if (this._ArrowSize != value) {
            this._ArrowSize = value;
            this.raisePropertyChanged('ArrowSize');
        }
    },

    get_ArrowOffset: function() {
        return this._ArrowOffset;
    },
    set_ArrowOffset: function(value) {
        if (this._ArrowOffset != value) {
            this._ArrowOffset = value;
            this.raisePropertyChanged('ArrowOffset');
        }
    },

    get_ArrowPosition: function() {
        return this._ArrowOffset;
    },
    set_ArrowPosition: function(value) {
        if (this._ArrowPosition != value) {
            this._ArrowPosition = value;
            this.raisePropertyChanged('ArrowPosition');
        }
    },

    get_Color: function() {
        return this._Color;
    },
    set_Color: function(value) {
        if (this._Color != value) {
            this._Color = value;
            this.raisePropertyChanged('Color');
        }
    },

    get_Border: function() {
        return this._Border;
    },
    set_Border: function(value) {
        if (this._Border != value) {
            this._Border = value;
            this.raisePropertyChanged('Border');
        }
    },

    get_Beveled: function() {
        return this._Beveled;
    },
    set_Beveled: function(value) {
        if (this._Beveled != value) {
            this._Beveled = value;
            this.raisePropertyChanged('Beveled');
        }
    }

    //--------------------------------------------------------------------------
    // EVENTS
    //--------------------------------------------------------------------------

    //--------------------------------------------------------------------------
    // EVENT HANDLERS
    //--------------------------------------------------------------------------

}
SGis.AjaxToolTip.ToolTipControl.registerClass('SGis.AjaxToolTip.ToolTipControl', AjaxControlToolkit.ControlBase);

if(typeof(Sys)!=='undefined')Sys.Application.notifyScriptLoaded();