Ext.ns('GDFIRM.UI.Navigation');

GDFIRM.UI.Navigation.NavigationButton = Ext.extend(Ext.Button, {
    enableToggle: true,
    iconAlign: 'top',
    scale: 'medium',
    toggleGroup: 'navigation'     
});

GDFIRM.UI.Navigation.DropDownButton = Ext.extend(Ext.Button, {
    scale: 'medium',
    iconAlign: 'left'
});




function navigation(){
  /// 
  /// This switches the UI for currently selected button
  /// Also deactivates any listeners that would affect other operations
  /// **Important that this is run first before setting new operations for clicked button
  ///
  var toolbarHandler = function(button) {
    navToolbar.deactivate();
    Mapping.Ext.Esri.MeasureTool.disable();
    toggleParcelHover(false);
    //turnHoverOff();
//    if (button.pressed) {
//      // Here we can set alternate states for button
//      
//    }
  };

  ///
  /// All users buttons
  ///
  var panButton = new GDFIRM.UI.Navigation.NavigationButton({
    id: 'panButton',
    tooltip: 'Pan',
    handler: function() {
      toolbarHandler(this);
      Ext.get('selectedToolText').update('Pan tool active');
      Mapping.Ext.Esri.CursorManager.setCursor('mousePan');
    },
    iconCls: 'pan'
    //,text: 'Pan'
  });
  var zoomInButton = new GDFIRM.UI.Navigation.NavigationButton({
    id: 'zoomInButton',
    tooltip: 'Zoom In',
    handler: function() {
      toolbarHandler(this);
      navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);
      Ext.get('selectedToolText').update('Zoom in tool active');
      Mapping.Ext.Esri.CursorManager.setCursor('mouseZoomIn');
//      var zoomInDisconnect = dojo.connect(navToolbar, "onExtentHistoryChange", function(){
//          Ext.getCmp('panButton').handler.call();
//          Mapping.Ext.Esri.CursorManager.removeCursor('mouseZoomIn');
//          dojo.disconnect(zoomInDisconnect);
//        });
    },
    iconCls: 'zoomIn'
    //,text: 'Zoom<br/>In'
  });
  var zoomOutButton = new GDFIRM.UI.Navigation.NavigationButton({
    id: 'zoomOutButton',
    tooltip: 'Zoom Out',
    handler: function() {
      toolbarHandler(this); 
      navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);
      Ext.get('selectedToolText').update('Zoom out tool active');
      Mapping.Ext.Esri.CursorManager.setCursor('mouseZoomOut');
//      var zoomOutDisconnect = dojo.connect(navToolbar, "onExtentHistoryChange", function(){
//          Ext.getCmp('panButton').handler.call();
//          Mapping.Ext.Esri.CursorManager.removeCursor('mouseZoomOut');
//          dojo.disconnect(zoomOutDisconnect);
//        });
    },
    iconCls: 'zoomOut'
    //,text: 'Zoom<br/>Out'
  });
  var zoomExtentsButton = new GDFIRM.UI.Navigation.NavigationButton({
    id: 'zoomExtentsButton',
    tooltip: 'Zoom Full',
    handler: function() { 
      map.setExtent(new esri.geometry.Extent(initialExtent));
    },
    enableToggle: false,
    iconCls: 'zoomFull'
    //,text: 'Full<br/>Extent'
  });
  var previousExtentButton = new GDFIRM.UI.Navigation.NavigationButton({
    id: 'previousExtentButton',
    tooltip: 'Zoom Previous',
    handler: function() { navToolbar.zoomToPrevExtent(); },
    enableToggle: false,
    disabled: true,
    iconCls: 'prevExtent'
    //,text: 'Previous<br/>Extent'
  });
  var nextExtentButton = new GDFIRM.UI.Navigation.NavigationButton({
    id: 'nextExtentButton',
    tooltip: 'Zoom Next',
    handler: function() { navToolbar.zoomToNextExtent(); },
    enableToggle: false,
    disabled: true,
    iconCls: 'nextExtent'
    //,text: 'Next<br/>Extent'
  });
  var measureButton = new GDFIRM.UI.Navigation.NavigationButton({
    id: 'measureButton',
    tooltip: 'Measure Tool',
    iconCls: 'measureButton',
    scale: 'medium',
    handler: function() {
      toolbarHandler(this); 
      Mapping.Ext.Esri.CursorManager.setCursor('mouseCrossHair');
      Mapping.Ext.Esri.MeasureTool.init(map, geometryService);
    }
  });  


  var coordinateLocatorButton = new GDFIRM.UI.Navigation.NavigationButton({
    id: 'coordinateLocatorButton',
    tooltip: 'Search for Location',
    iconCls: 'coordinateLocatorButton',
    scale: 'medium'
  });
  
  coordinateLocatorButton.setHandler(
    function(b, e) {
      toolbarHandler(this);
      Mapping.Ext.Esri.Marker.init(map);

      locationSearchWindow.show();
      var pp = Ext.get('ParcelPattern');
      if (pp != null)
        pp.update(activeCounty.parcelPattern);
      Ext.getCmp('ParcelCounty').setValue(activeCounty.countyName);
      locationSearchWindow.setActive(true);
      //Ext.get('selectedToolText').update('Search tool active');
    });

    var coordinatePopupButton = new GDFIRM.UI.Navigation.NavigationButton({
      id: 'coordinatePopupButton',
      tooltip: 'Parcel Hover/Pick Tool',
      iconCls: 'coordinatePopupButton',
      scale: 'medium'
      });

    coordinatePopupButton.addEvents('identified');

    coordinatePopupButton.setHandler(
    function(b, e) {
      toolbarHandler(this);
      Mapping.Ext.Esri.CursorManager.setCursor('mouseCrossHair');
      Mapping.Ext.Esri.CursorManager.appendCursor('mouseProgress');
      toggleParcelHover(true);
    });    

  // Toggles the parcel hover tool
  function toggleParcelHover(state) {
    if (state) {
      if (hoverOn()) {
        Ext.get('selectedToolText').update('Hover over parcel for ID');
      }
    } else {
      //turn off hover
      hoverOff();
    }
  }

  var bookmarksButton = new GDFIRM.UI.Navigation.DropDownButton({
    id: 'bookmarksButton',
    tooltip: 'Bookmarks',
    iconCls: 'bookmarksButton',
    handler: function() { 
      //bookmarkWindow.show(); 
      Mapping.Ext.Esri.Bookmarks.show();
      Ext.getCmp('globeButton').menu.hide();
    },
    text: 'Bookmarks'
  });

  var layersButton = new GDFIRM.UI.Navigation.DropDownButton({
    id: 'layersButton',
    tooltip: 'Map Layers',
    iconCls: 'layersButton',
    handler: function() { showLayersWindow(); Ext.getCmp('globeButton').menu.hide();},
    text: 'Layers'
  });

  var overviewButton = new GDFIRM.UI.Navigation.DropDownButton({
    id: 'overviewButton',
    tooltip: 'Overview Map',
    iconCls: 'overviewButton',
    handler: function() { showOverviewMap(); Ext.getCmp('globeButton').menu.hide();},
    text: 'Overview'
  });
  
  var identifyButton = new GDFIRM.UI.Navigation.DropDownButton({
    id: 'identifyButton',
    tooltip: 'Identify Tool',
    iconCls: 'identifyButton',
    handler: function() { Ext.getCmp('globeButton').menu.hide(); },
    text: 'Identify'
  });

  var printButton = new GDFIRM.UI.Navigation.DropDownButton({
    id: 'printButton',
    tooltip: 'Print Map',
    iconCls: 'printButton',
    handler: function() {
      Ext.getCmp('globeButton').menu.hide();
      printMap('SRWMD/Map_Standard_8.5x11'); 
    },
    text: 'Print Map'
  });

  var feedbackButton = new GDFIRM.UI.Navigation.DropDownButton({
    id: 'feedbackButton',
    text: 'Feedback',
    iconCls: 'feedbackButton',
    handler: function() { 
      feedbackWindow.show(); 
      feedbackWindow.setActive(true); 
      Ext.getCmp('infoButton').menu.hide(); 
    }
  });

  var helpButton = new GDFIRM.UI.Navigation.DropDownButton({
    id: 'helpButton',
    text: 'Help',
    iconCls: 'helpButton',
    handler: function() {
    window.open('Help/Default.htm', 'new');
      Ext.getCmp('infoButton').menu.hide();  
    }
  });

  var aboutButton = new GDFIRM.UI.Navigation.DropDownButton({
    id: 'aboutButton',
    text: 'About',
    iconCls: 'aboutButton',
    handler: function() { 
      Ext.getCmp('infoButton').menu.hide(); 
      aboutWindow.show();  
      aboutWindow.setActive(true); 
    }
  });

  var infoButton = new Ext.Button({
    id: 'infoButton',
    tooltip: 'Help',
    iconCls: 'helpButton',
    scale: 'medium',
    arrowAlign: 'top',
    menu: { 
      autoWidth: true,
      items: [ /*feedbackButton,*/ helpButton, aboutButton ], //feedback no enabled
      iconCls: 'infoMenu'
    }
  });
  
  var globeButton = new Ext.Button({
    id: 'globeButton',
    iconCls: 'globeButton',
    scale: 'medium',
    arrowAlign: 'top',
    tooltip: 'Tools',
    menu: {
      autoWidth: true,
      items: [printButton, bookmarksButton, layersButton, overviewButton],//streetButton, satelliteButton],
      iconCls: 'globeMenu'
    }
  });
  //Counties
  var allCountiesButton = new GDFIRM.UI.Navigation.DropDownButton({
    id: 'allCountiesButton',
    tooltip: 'All SRWMD Counties',
    iconCls: 'identifyButton',
    width: 130,
    handler: function() {
      Ext.getCmp('countiesButton').menu.hide();
      switchActiveCounty(allCountiesConfig, false);
      map.setExtent(new esri.geometry.Extent(initialExtent));
    },
    text: 'All SRWMD Counties'
  });

  var alachuaButton = new GDFIRM.UI.Navigation.DropDownButton({
    id: 'alachuaButton',
    tooltip: 'Alachua County',
    iconCls: 'identifyButton',
    width: 130,
    handler: function() {
      Ext.getCmp('countiesButton').menu.hide();
      switchActiveCounty(alachuaConfig, true);
      zoomToActiveCounty();
    },
    text: 'Alachua County'
  });

  var bakerButton = new GDFIRM.UI.Navigation.DropDownButton({
    id: 'bakerButton',
    tooltip: 'Baker County',
    iconCls: 'identifyButton',
    width: 130,
    handler: function() {
      Ext.getCmp('countiesButton').menu.hide();
      switchActiveCounty(bakerConfig, true);
      zoomToActiveCounty();
    },
    text: 'Baker County'
  });

  var bradfordButton = new GDFIRM.UI.Navigation.DropDownButton({
  id: 'bradfordButton',
  tooltip: 'Bradford County',
    iconCls: 'identifyButton',
    width: 130,
    handler: function() {
      Ext.getCmp('countiesButton').menu.hide();
      switchActiveCounty(bradfordConfig, true);
      zoomToActiveCounty();
    },
    text: 'Bradford County'
  });

  var columbiaButton = new GDFIRM.UI.Navigation.DropDownButton({
  id: 'columbiaButton',
  tooltip: 'Columbia County',
    iconCls: 'identifyButton',
    width: 130,
    handler: function() {
      Ext.getCmp('countiesButton').menu.hide();
      switchActiveCounty(columbiaConfig, true);
      zoomToActiveCounty();
    },
    text: 'Columbia County'
  });
  
  var dixieButton = new GDFIRM.UI.Navigation.DropDownButton({
    id: 'dixieButton',
    tooltip: 'Dixie County',
    iconCls: 'identifyButton',
    width: 130,
    handler: function() {
      Ext.getCmp('countiesButton').menu.hide();
      switchActiveCounty(dixieConfig, true);
      zoomToActiveCounty();
    },
    text: 'Dixie County'
  });

  var gilchristButton = new GDFIRM.UI.Navigation.DropDownButton({
    id: 'gilchristButton',
    tooltip: 'Zoom to Gilchrist County',
    iconCls: 'identifyButton',
    width: 130,
    handler: function() {
      Ext.getCmp('countiesButton').menu.hide();
      switchActiveCounty(gilchristConfig, true);
      zoomToActiveCounty();
    },
    text: 'Gilchrist County'
  });

  var hamiltonButton = new GDFIRM.UI.Navigation.DropDownButton({
  id: 'hamiltonButton',
  tooltip: 'Zoom to Hamilton County',
    iconCls: 'identifyButton',
    width: 130,
    handler: function() {
      Ext.getCmp('countiesButton').menu.hide();
      switchActiveCounty(hamiltonConfig, true);
      zoomToActiveCounty();
    },
    text: 'Hamilton County'
  });

  var jeffersonButton = new GDFIRM.UI.Navigation.DropDownButton({
  id: 'jeffersonButton',
  tooltip: 'Zoom to Jefferson County',
    iconCls: 'identifyButton',
    width: 130,
    handler: function() {
      Ext.getCmp('countiesButton').menu.hide();
      switchActiveCounty(jeffersonConfig, true);
      zoomToActiveCounty();
    },
    text: 'Jefferson County'
  });

  var lafayetteButton = new GDFIRM.UI.Navigation.DropDownButton({
  id: 'lafayetteButton',
  tooltip: 'Zoom to Lafayette County',
    iconCls: 'identifyButton',
    width: 130,
    handler: function() {
      Ext.getCmp('countiesButton').menu.hide();
      switchActiveCounty(lafayetteConfig, true);
      zoomToActiveCounty();
    },
    text: 'Lafayette County'
  });

  var levyButton = new GDFIRM.UI.Navigation.DropDownButton({
  id: 'levyButton',
  tooltip: 'Zoom to Levy County',
    iconCls: 'identifyButton',
    width: 130,
    handler: function() {
      Ext.getCmp('countiesButton').menu.hide();
      switchActiveCounty(levyConfig, true);
      zoomToActiveCounty();
    },
    text: 'Levy County'
  });

  var madisonButton = new GDFIRM.UI.Navigation.DropDownButton({
  id: 'madisonButton',
  tooltip: 'Zoom to Madison County',
    iconCls: 'identifyButton',
    width: 130,
    handler: function() {
      Ext.getCmp('countiesButton').menu.hide();
      switchActiveCounty(madisonConfig, true);
      zoomToActiveCounty();
    },
    text: 'Madison County'
  });

  var suwanneeButton = new GDFIRM.UI.Navigation.DropDownButton({
  id: 'suwanneeButton',
  tooltip: 'Zoom to Suwannee County',
    iconCls: 'identifyButton',
    width: 130,
    handler: function() {
      Ext.getCmp('countiesButton').menu.hide();
      switchActiveCounty(suwanneeConfig, true);
      zoomToActiveCounty();
    },
    text: 'Suwannee County'
  });
  
  var taylorButton = new GDFIRM.UI.Navigation.DropDownButton({
    id: 'taylorButton',
    tooltip: 'Taylor County',
    iconCls: 'identifyButton',
    width: 130,
    handler: function() {
      Ext.getCmp('countiesButton').menu.hide();
      switchActiveCounty(taylorConfig, true);
      zoomToActiveCounty();
    },
    text: 'Taylor County'
  });

  var unionButton = new GDFIRM.UI.Navigation.DropDownButton({
  id: 'unionButton',
  tooltip: 'Union County',
    iconCls: 'identifyButton',
    width: 130,
    handler: function() {
      Ext.getCmp('countiesButton').menu.hide();
      switchActiveCounty(unionConfig, true);
      zoomToActiveCounty();
    },
    text: 'Union County'
  });
   
  var countiesButton = new Ext.Button({
    id: 'countiesButton',
    iconCls: 'countyButton',
    scale: 'medium',
    arrowAlign: 'top',
    tooltip: 'Select County',
    menu: {
    autoWidth: true,
    //width: 136,
    items: [allCountiesButton, alachuaButton, /*bakerButton,*/ bradfordButton, columbiaButton,
            dixieButton, gilchristButton, hamiltonButton, /*jeffersonButton,*/ lafayetteButton, 
            levyButton, madisonButton, suwanneeButton, taylorButton, unionButton],
      iconCls: 'globeMenu'
    }
  });
  //END Counties
  var navigationWindow = new Ext.Window({ 
	  layout: 'absolute',
	  header: false,
	  closable: false,
    id:'navigationWindow',
    iconCls: 'navigator',
    width: 586,
    border: false,
    height: 108,
	  plain: true,
	  resizable: false,
	  frame: true,
	  initHidden: false,
	  shadow: true,
    items: [ 
      {
        xtype: 'panel', 
        x:310, 
        y:12, 
        height: 55, 
        width: 270,
        layout: 'hbox', 
        unstyled: true,
        items: [    
          panButton, 
          zoomInButton,
          zoomOutButton,
          zoomExtentsButton, 
          previousExtentButton, 
          nextExtentButton,
          measureButton,
          coordinateLocatorButton,
          coordinatePopupButton
        ] 
      },{
        xtype: 'panel',
        html: '<div id="selectedToolText" style="color:white; text-shadow: 2px 2px 1px #000000;">Pan tool active</div>',
        unstyled: true,
        x: 335,
        y: 43
      },{
        xtype: 'panel', 
        x:100, 
        y:60, 
        height: 85,
        width: 105,
        layout: 'hbox', 
        unstyled: true,
        items: [
          globeButton,
          infoButton,
          countiesButton            
        ]
      }, {
        xtype: 'panel',
        html: '<div id="activeCountyText" style="color:white; text-shadow: 2px 2px 1px #000000;">Active county: ' + 
                                                      allCountiesConfig.countyName +'</div>',
        unstyled: true,
        x: 208,
        y: 66
      } 
    ],
	  x: 100,
	  y: 5
  });
  // Make entire toolbar movable
  navigationWindow.dd.setHandleElId(navigationWindow.el.child('div.x-window-bwrap').id);
 
}

// Add bottom layer toggle buttons to screen
var streetLayerToggleButton = new GDFIRM.UI.Navigation.DropDownButton({
  id: 'streetButton',
  toggleGroup: 'baseLayer',
  pressed: true,
  tooltip: 'Street Map',
  iconCls: 'streetLayerButton',
  ctCls: 'layerToggleButton',
  toggleHandler: function() { displayStreetLayer(); },
  listeners: {
    "render": { fn: function() { Ext.get('streetButton').setOpacity(0.80); } },
    "mouseover": { fn: function() { Ext.get('streetButton').setOpacity(1.00); } },
    "mouseout": { fn: function() { Ext.get('streetButton').setOpacity(0.80); } }
  },  
  text: 'Street',
  width: 60,
  x: -100,
  y: -50 
});

var satelliteLayerToggleButton = new GDFIRM.UI.Navigation.DropDownButton({
  id: 'satelliteButton',
  toggleGroup: 'baseLayer',
  pressed: false,
  tooltip: 'Aerial Map',
  iconCls: 'satelliteLayerButton',
  ctCls: 'layerToggleButton',
  toggleHandler: function() { displaySatelliteLayer(); },
  listeners: {
    "render": { fn: function(){ Ext.get('satelliteButton').setOpacity(0.80); } },
    "mouseover": { fn: function(){ Ext.get('satelliteButton').setOpacity(1.0); } },
    "mouseout": { fn: function(){ Ext.get('satelliteButton').setOpacity(0.80); } }
  },
  text: 'Aerial',
  width: 60,
  x: -100,
  y: -50
});

function setLayerButtons() {
  if (satelliteLayerToggleButton && streetLayerToggleButton &&
    satelliteLayerToggleButton.rendered && streetLayerToggleButton.rendered) {
    // Get visible width/height
    var xOffset = Ext.getCmp('masterViewport').getWidth() - 5;
    var yOffset = 5; 

    // Increment offset by button size and position
    xOffset = xOffset - satelliteLayerToggleButton.getWidth();
    yOffset = yOffset; 
    satelliteLayerToggleButton.setPosition(
      [parseInt(xOffset), yOffset]
    );

    // Increment offset by button size and position  
    xOffset = xOffset - streetLayerToggleButton.getWidth() - 5;
    yOffset = yOffset;
    streetLayerToggleButton.setPosition(
      [parseInt(xOffset), yOffset]
    );
  }
}