Ext.namespace('Mapping.Ext.Esri');

/// 
/// Decalre tool tip object type used to denote specfic zoom levels
///
Mapping.Ext.Esri.ZoomToolTip = Ext.extend(Ext.ToolTip, {
    autoHide: true,
    anchor: 'left',
    overCls: 'mousePointer'
});

// Create the slider
Mapping.Ext.Esri.ZoomSlider = function() {
  
  var map;
  /// The tool tips to be used at various points
  var toolTips = [];
  
  // Ext.slider.SingleSlider acts as UI component
  var zoomSlider = new Ext.slider.SingleSlider({
    height: 200,
    minValue: 8,
    maxValue: 16,
    increment: 1,
    value: 6,
    vertical: true,
    listeners: {
      'changecomplete': function(slider, e){
          map.setLevel(e);
      }
    }
  });

  // panel to hold the above slider component
  var zoomSliderPanel = new Ext.Panel({
    cls: 'zoomSliderPanel',
    items: [ zoomSlider ],
    layout: 'anchor',
    x: 20,
    y: 35,
    unstyled: true,
    listeners: {
      'afterrender': function(panel){
        panel.el.on('mouseover', function(e, t, o){
          // Get vertical and horizontal positioning offset for the zoom slider
          var verticalOffset = zoomSliderPanel.y + zoomSlider.translateValue(zoomSlider.maxValue) - 3;
          var horizontalOffset = zoomSliderPanel.x + (zoomSliderPanel.getWidth() + 3);
              
          for(var i = 0; i < toolTips.length; i++) {
            if(toolTips[i] != null){
              toolTips[i].showAt([horizontalOffset,verticalOffset - zoomSlider.translateValue(i)]);
            }
          }
        });      
      }
    }
  });

  moveSlider = function(newLevel){
    if(newLevel < zoomSlider.minValue) {
      newLevel = zoomSlider.minValue;
    }
    zoomSlider.suspendEvents(false);
    zoomSlider.setValue(newLevel);
    zoomSlider.resumeEvents();
  };

  return Ext.apply(new Ext.util.Observable(), {

    tempToolTips: toolTips,

    slider: zoomSliderPanel,

    /// Add another scale shortcut to the slider
    /// @toolTip Ext.ToolTip The tooltip to add
    /// @index Integer The index [zoom level] of this scale shortcut
    addToolTip: function(toolTip, index) {
      zoomSliderPanel.add(toolTip);
      zoomSliderPanel.doLayout(false);
      toolTips[index] = toolTip;
      toolTips[index].el.on('click', function(event, element, options){
        map.setLevel(options.level);
      }, this, { level: index });
    },    
    
    /// Updates the UI component for a new level without changing map zoom level 
    /// Should be called by the map on zoom change, this function only changes UI slider position
    /// Call map.setLevel(level) instead of this to zoom to a level on the map
    /// @newLevel Integer The level
    updateLevel: function(newLevel) {
      moveSlider(newLevel);
    },
    
    /// Receives zoomend function call from ESRI map and updates the zoom level UI
    /// The inputs are ignored except the level
    /// @level Integer New zoom level
    zoomEnd: function(extent, zoomFactor, anchor, level){
      moveSlider(level);
    },    
    
    /// Initialize the slider and set the associated map control    
    init: function(mapObj) {
      map = mapObj;
      dojo.connect(map, "onZoomEnd", Mapping.Ext.Esri.ZoomSlider.zoomEnd); 
    }
  
  });
  // End of the return Ext.apply() method is here  
}();

//Mapping.Ext.Esri.ZoomSlider.init();

// Loop through all values in sliderText array (in config.js) and place as labels on zoom slider
Mapping.Ext.Esri.ZoomSlider.slider.on('afterrender', function(com){

  for(var i = 0; i < sliderText.length; i++){
      if(sliderText[i] != null){
        Mapping.Ext.Esri.ZoomSlider.addToolTip(
          new Mapping.Ext.Esri.ZoomToolTip({
            html: sliderText[i].split(' ')[0]
          }), i);
      }
  }
});