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

Type.registerNamespace("SGis.MapToolkit");

SGis.MapToolkit.NavigatorBehavior = function(element) {
    SGis.MapToolkit.NavigatorBehavior.initializeBase(this, [element]);
    // Referencia a Controles y objetos
    this._thisContainer = null;  // contenedor de este control
    this._mapControl = null;
    this._mapContainer = null;    // Referencia al contenedor de mapas
    this._parentControl = null;   // Referencia al control de mapas
    // Referencia a Controles y objetos
    this._centralBar = null;
    this._leftBar = null;
    this._rightBar = null;
    this._txtDiv = null;
    this._leftArrow = null;
    this._rightArrow = null;
    this._upArrow = null;
    this._downArrow = null;
    this._zoomIn = null;
    this._zoomOut = null;
    // Propiedades
    this._ZoomRelation = 3;     // Relacion de zoom para acercar o alejar
    this._PanPixels = 250;      // Pixeles a desplazar 
    // 
    // Eventos
    this._mapControl$onMapExtentChanged$delegate = Function.createDelegate(this, this._mapControl_onMapExtentChanged);
    // Botones
    this._leftArrow$delegates = {
        mousedown: Function.createDelegate(this, this._leftArrow_onMouseDownHandler),
        click: Function.createDelegate(this, this._leftArrow_onClickHandler)
    }
    this._rightArrow$delegates = {
        mousedown: Function.createDelegate(this, this._rightArrow_onMouseDownHandler),    
        click: Function.createDelegate(this, this._rightArrow_onClickHandler)
    }
    this._upArrow$delegates = {
    mousedown: Function.createDelegate(this, this._upArrow_onMouseDownHandler),
    click: Function.createDelegate(this, this._upArrow_onClickHandler)
    }
    this._downArrow$delegates = {
    mousedown: Function.createDelegate(this, this._downArrow_onMouseDownHandler),
    click: Function.createDelegate(this, this._downArrow_onClickHandler)
    }
    this._zoomIn$delegates = {
    mousedown: Function.createDelegate(this, this._zoomIn_onMouseDownHandler), 
    click: Function.createDelegate(this, this._zoomIn_onClickHandler)
    }
    this._zoomOut$delegates = {
    mousedown: Function.createDelegate(this, this._zoomOut_onMouseDownHandler),
    click: Function.createDelegate(this, this._zoomOut_onClickHandler)
    }
}

SGis.MapToolkit.NavigatorBehavior.prototype = {
    initialize: function() {
        SGis.MapToolkit.NavigatorBehavior.callBaseMethod(this, 'initialize');
        //
        this._mapContainer = this.get_element().control._mapContainer;
        this._mapControl = this.get_element();
        this._parentControl = this.get_element().control;
        // Attach event handlers
        this._parentControl.add_mapExtentChanged(this._mapControl$onMapExtentChanged$delegate);

        // Construye elementos
        this.buildControls();
    },
    dispose: function() {
        this._parentControl.remove_mapExtentChanged(this._mapControl$onMapExtentChanged$delegate);
        //Add custom dispose actions here
        SGis.MapToolkit.NavigatorBehavior.callBaseMethod(this, 'dispose');
    },
    get_PlugInId: function() {
        /// <value type="string" mayBeNull="false">
        /// Gets de plugIn unique id
        /// </value>
        return 'sgis.navigator';
    },
    /// <summary>
    // loads the current plugin into the main map container, creates menu, toolbar, atach events, etc
    /// </summary>
    /// <param name="container" type="SGis.MapToolkit.MapControl">
    /// The map control container
    /// </param>
    load: function(container) {
        // Carga inicial
    },
    unload: function() {
        Sys.Debug.trace('Unloading navigator');
    },
    buildControls: function() {
        //
        this._thisContainer = $common.createElementFromTemplate(
        {
            nodeName: "div",
            cssClasses: ["sgmap_nav_container"]

        }, this._mapControl);
        //
        var background = $common.createElementFromTemplate(
        {
            nodeName: "div",
            cssClasses: ["sgmap_nav_background"],
            opacity: .3
        }, this._thisContainer);
        //
        this._leftArrow = $common.createElementFromTemplate(
        {
            nodeName: "a",
            cssClasses: ["sgmap_nav_button", "sgmap_nav_button_left"],
            opacity: .8,
            properties: {
                href: "#",
                innerHtml: "Desplazamiento al Oeste",
                title: "Desplazamiento al Oeste"
            },
            events: this._leftArrow$delegates
        }, this._thisContainer);
        //
        this._rightArrow = $common.createElementFromTemplate(
        {
            nodeName: "a",
            cssClasses: ["sgmap_nav_button", "sgmap_nav_button_right"],
            opacity: .8,
            properties: {
                href: "#",
                innerHtml: "Desplazamiento al Este",
                title: "Desplazamiento al Este"
            },
            events: this._rightArrow$delegates
        }, this._thisContainer);
        //
        this._upArrow = $common.createElementFromTemplate(
        {
            nodeName: "a",
            cssClasses: ["sgmap_nav_button", "sgmap_nav_button_up"],
            opacity: .8,
            properties: {
                href: "#",
                innerHtml: "Desplazamiento al Norte",
                title: "Desplazamiento al Norte"
            },
            events: this._upArrow$delegates
        }, this._thisContainer);
        //
        this._downArrow = $common.createElementFromTemplate(
        {
            nodeName: "a",
            cssClasses: ["sgmap_nav_button", "sgmap_nav_button_down"],
            opacity: .8,
            properties: {
                href: "#",
                innerHtml: "Desplazamiento al Sur",
                title: "Desplazamiento al Sur"
            },
            events: this._downArrow$delegates
        }, this._thisContainer);
        //
        this._zoomIn = $common.createElementFromTemplate(
        {
            nodeName: "a",
            cssClasses: ["sgmap_nav_button", "sgmap_nav_button_zoomin"],
            opacity: .8,
            properties: {
                href: "#",
                innerHtml: "Acercar",
                title: "Acercar"
            },
            events: this._zoomIn$delegates
        }, this._thisContainer);
        //
        this._zoomOut = $common.createElementFromTemplate(
        {
            nodeName: "a",
            cssClasses: ["sgmap_nav_button", "sgmap_nav_button_zoomout"],
            opacity: .8,
            properties: {
                href: "#",
                innerHtml: "Alejar",
                title: "Alejar"
            },
            events: this._zoomOut$delegates
        }, this._thisContainer);
    },
    //--------------------------------------------------------------------------
    // PROPIEDADES
    //--------------------------------------------------------------------------
    get_ZoomRelation: function() {
        return this._ZoomRelation;
    },
    set_ZoomRelation: function(value) {
        if (this._ZoomRelation != value) {
            this._ZoomRelation = value;
            this.raisePropertyChanged('ZoomRelation');
        }
    },
    get_PanPixels: function() {
        return this._PanPixels;
    },
    set_PanPixels: function(value) {
        if (this._PanPixels != value) {
            this._PanPixels = value;
            this.raisePropertyChanged('PanPixels');
        }
    },
    //--------------------------------------------------------------------------
    // Manejadores de Eventos
    //--------------------------------------------------------------------------
    // Al cambiar la extensión del mapa
    _mapControl_onMapExtentChanged: function(sender, args) {
        // por ahora no hace nada
    },
    _leftArrow_onMouseDownHandler: function(sender, args) {
        this._parentControl.offsetCenter(this._parentControl._Zoom * this._PanPixels * -1, 0);
    },
    _leftArrow_onClickHandler: function(sender, args) {
        sender.preventDefault();
        sender.stopPropagation();
    },
    //
    _rightArrow_onMouseDownHandler: function(sender, args) {
        this._parentControl.offsetCenter(this._parentControl._Zoom * this._PanPixels, 0);
    },
    _rightArrow_onClickHandler: function(sender, args) {
        sender.preventDefault();
        sender.stopPropagation();
    },
    //
    _upArrow_onMouseDownHandler: function(sender, args) {
        this._parentControl.offsetCenter(0, this._parentControl._Zoom * this._PanPixels);
    },
    _upArrow_onClickHandler: function(sender, args) {
        sender.preventDefault();
        sender.stopPropagation();
    },
    //
    _downArrow_onMouseDownHandler: function(sender, args) {
        this._parentControl.offsetCenter(0, this._parentControl._Zoom * this._PanPixels * -1);
    },
    _downArrow_onClickHandler: function(sender, args) {
        sender.preventDefault();
        sender.stopPropagation();
    },
    //
    _zoomIn_onMouseDownHandler: function(sender, args) {
        this._parentControl.changeZoom(this._parentControl._Zoom / this._ZoomRelation);
    },
    _zoomIn_onClickHandler: function(sender, args) {
        sender.preventDefault();
        sender.stopPropagation();
    },
    //
    _zoomOut_onMouseDownHandler: function(sender, args) {
        this._parentControl.changeZoom(this._parentControl._Zoom * this._ZoomRelation);
    },
    _zoomOut_onClickHandler: function(sender, args) {
        sender.preventDefault();
        sender.stopPropagation();
    }


}
SGis.MapToolkit.NavigatorBehavior.registerClass('SGis.MapToolkit.NavigatorBehavior', AjaxControlToolkit.BehaviorBase, SGis.MapToolkit.IPlugIn);



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