// JScript File
TNRIS.MapToolbar = function(config) {
    this.collapsedWidth = 118;

    Ext.apply(this, config);
    
    var drawingToolConfig = 
    {
        map: this.mapPanel.getMap(), 
        mapPanel: this.mapPanel,
        addShapeProvider: this.mapPanel.getActiveLayer.bind(this.mapPanel)
    };

    var defaultToolAction = new TNRIS.PointTool(drawingToolConfig);

    TNRIS.MapToolbar.superclass.constructor.call(this, {
        floating: true,
        shim: true,
        width: 550,
        cls: 'editingToolbar',
		slideAnchor: 'l',
		collapsible: true,
		elements: 'header,body',
        items: [
            {
                xtype: 'button',
                id: 'shadedBtn',
				minWidth: 55,
                cls: 'mapToolbarBtn',
                text: 'Streets',
                overClass: 'mapBtnHover',
                enableToggle: true,
                toggleGroup: 'mapStyleToggle',
                pressed: true,
                scope: this,
                handler: function(btn) {
                    this.mapPanel.getMap().SetMapStyle(VEMapStyle.Shaded);
                    this.updateToggleGroupPressedState('mapStyleToggle', btn);
                }
            },
            {
                xtype: 'button',
                id: 'aerialBtn',
				minWidth: 55,
                cls: 'mapToolbarBtn',
                text: 'Aerial',
                overClass: 'mapBtnHover',
                enableToggle: true,
                toggleGroup: 'mapStyleToggle',
                scope: this,
                handler: function(btn) {
                    this.mapPanel.getMap().SetMapStyle(VEMapStyle.Aerial);
                    this.updateToggleGroupPressedState('mapStyleToggle', btn);
                }
            },
            {
                xtype: 'button',
                id: 'hybridBtn',
				minWidth: 55,
                cls: 'mapToolbarBtn',
                text: 'Hybrid',
                overClass: 'mapBtnHover',
                enableToggle: true,
                toggleGroup: 'mapStyleToggle',
                scope: this,
                handler: function(btn) {
                    this.mapPanel.getMap().SetMapStyle(VEMapStyle.Hybrid);
                    this.updateToggleGroupPressedState('mapStyleToggle', btn);
                }
            },
            {
                xtype: 'button',
                id: 'trafficBtn',
                minWidth: 55,
                cls: 'mapToolbarBtn',
                text: 'Traffic',
                iconCls:'mapTrafficOff',
                overClass: 'mapBtnHover',
                scope: this,
                handler: function(btn) {
                    if (null == this.trafficSet) { this.trafficSet = false; btn.setIconClass('mapTrafficOff'); }
                    
                    if (this.trafficSet) {
                        this.trafficSet = false;
                        this.mapPanel.getMap().ClearTraffic();
                        btn.setIconClass('mapTrafficOff');
                    } else {
                        this.trafficSet = true;
                        var map = this.mapPanel.getMap();
                        map.LoadTraffic(true);
                        map.ShowTrafficLegend(18,60);
                        map.SetTrafficLegendText("The traffic legend");
                        btn.setIconClass('mapTrafficOn');
                    }
                }
            },
            {
                xtype: 'button',
                id: 'zoomInBtn',
                cls: 'mapToolbarBtn',
                tooltip: 'Zoom In',
                overClass: 'mapBtnHover',
                scope: this,
                handler: function() {
                    this.mapPanel.getMap().ZoomIn();
                }
            },			
            {
                xtype: 'button',
                id: 'zoomOutBtn',
                cls: 'mapToolbarBtn',
                tooltip: 'Zoom Out',
                overClass: 'mapBtnHover',
                scope: this,
                handler: function() {
                    this.mapPanel.getMap().ZoomOut();
                }
            },
            /*{
                xtype: 'splitbutton',
                id: 'drawBtn',
                ctCls: 'splitBtn',
				cls: 'mapToolbarBtn',
				text:'__________________',
                tooltip: "Map Tools",
                handler: this.onToolbarChange,
                scope: this,
                toolAction: defaultToolAction,
                menuAlign: 'bl',
                menu: new Ext.menu.Menu({
                    cls: 'drawToolMenu',
                    items: [
                        {
                            id: 'panMapBtn',
                            icon: 'images/buttons/hand.png',
				            //cls: 'mapToolbarBtn',
				            text: 'Pan Map',
				            tooltip: 'Pan Map',
                            handler: this.changeDrawTool,
                            scope: this,
                            bgIconClass: 'panMapIcon',
                            toolCursor: null,
                            toolAction: new TNRIS.PanMapTool(this.mapPanel)
                        },
                        {
				            icon: 'images/buttons/edit_off.png',
				            //cls: 'mapToolbarBtn',
				            text: 'Edit Shape',
                            tooltip: "Edit a Shape",
                            handler: this.changeDrawTool,
                            scope: this,
                            // TODO - implement edit tool
                            bgIconClass: 'editShapeIcon',
                            hidden: true,
                            toolCursor: 'default',
                            toolAction: new TNRIS.EditTool(drawingToolConfig)
                        },
                        {
                            icon: 'images/buttons/draw_pin_off.png',
                            // cls: 'addPointBtn',
				            text: 'Add Point',
				            tooltip: 'Add a Pushpin',
                            handler: this.changeDrawTool,
                            scope: this,
                            bgIconClass: 'drawPointIcon',
                            hidden: true,
                            toolCursor: 'default',
                            toolAction: defaultToolAction
                        },
                        {
                            icon: 'images/buttons/draw_line_off.png',
                            // cls: 'drawLineBtn',
				            text: 'Draw Line',
                            tooltip: "Draw a line/Measure a Distance",
                            handler: this.changeDrawTool,
                            scope: this,
                            bgIconClass: 'drawLineIcon',
                            hidden: true,
                            toolCursor: 'default',
                            toolAction: new TNRIS.LineTool(drawingToolConfig)
                        },
                        {
                            icon: 'images/buttons/draw_polygon_off.png',
                            // cls: 'drawPolygonBtn',
				            text: 'Draw Polygon',
				            tooltip: "Draw a Shape/Measure an Area",
                            handler: this.changeDrawTool,
                            scope: this,
                            bgIconClass: 'drawPolygonIcon',
                            hidden: true,
                            toolCursor: 'default',
                            toolAction: new TNRIS.PolygonTool(drawingToolConfig)
                        },
                        {
                            icon: 'images/buttons/draw_rectangle_off.png',
                            // cls: 'drawRectangleBtn',
				            text: 'Draw Rectangle',      
				            tooltip: "Draw a Rectangle",
                            handler: this.changeDrawTool,
                            scope: this,
                            bgIconClass: 'drawRectangleIcon',
                            hidden: true,
                            toolCursor: 'default',
                            toolAction: new TNRIS.RectangleTool(drawingToolConfig)
                        },
                        {
                            icon: 'images/buttons/draw_circle_off.png',
                            // cls: 'drawCircleBtn',
				            text: 'Draw Circle',
				            tooltip: "Draw a Circle",
                            handler: this.changeDrawTool,
                            scope: this,
                            bgIconClass: 'drawCircleIcon',
                            hidden: true,
                            toolCursor: 'default',
                            toolAction: new TNRIS.CircleTool(drawingToolConfig)
                        }
                    ]                
                })
            },*/
            {
                xtype:'panel',
                contentEl: 'userOptions',
                //cls: 'userStatusPanel',
                //height: 25,
                //width: 200,
                autoHeight: true,
                autoWidth: true,
                autoShow: true
            }
        ],
        listeners: {
            'beforecollapse': { scope: this, fn: this.changeSizeOnCollapse },
            'beforeexpand': { scope: this, fn: this.changeSizeOnCollapse }
        }
    });
    
    /*this.drawBtn = this.findById('drawBtn');
    this.drawBtn.setIconClass(Ext.getCmp('panMapBtn').bgIconClass);*/
    /*this.toolBase = Ext.getCmp('panMapBtn').toolAction;
    this.toolBase.activate();*/
};

Ext.extend(TNRIS.MapToolbar, Ext.Panel, 
    /** @scope TNRIS.MapToolbar */
    {
    updateToggleGroupPressedState: function(toggleGroupName, currentButton) {
        this.find('toggleGroup',toggleGroupName).each(function(button) {
            button.enable();
        });
        currentButton.disable();
    },
    
    /*changeDrawTool: function(item, e) {
        this.drawBtn.setIconClass(item.bgIconClass);
        this.drawBtn.toolAction = item.toolAction;
        this.drawBtn.toolCursor = item.toolCursor;
        this.onToolbarChange(this.drawBtn);
    },*/
    
    onToolbarChange: function(btn, e) {
        // xxEAS this.updateToggleGroupPressedState('mapToolToggle', btn);
        if (this.toolBase == btn.toolAction) {
            btn.toggle(true);
        } else {
            this.toolBase.deactivate();
            this.toolBase = btn.toolAction;
            this.toolBase.activate();
            this.toolBase.setCursor(btn.toolCursor);
        }
    },
    
    changeSizeOnCollapse: function() {
        // this.collapsed has not been set yet - so the logic appears backwards
        if (this.collapsed) {
            this.setWidth(this.width);
        } else {
            this.setWidth(this.collapsedWidth);
        }
    }
 
});

if (typeof(Sys) !== "undefined") { Sys.Application.notifyScriptLoaded(); }