/**
 * @name Google Maps Layer for ArcGIS Server JavaScript API
 * @author: Nianwei Liu 
 * @fileoverview
 * <p>Use Google Maps in application built on ESRI ArcGIS Server JavaScript API.
 *  </p>
 */
// Change log: 
//2012-07-15: v2.0, update to jsapi3.0/dojo1.7, simplified. 
// drop features related to sublayers for google maps, client code can do it after get reference to gmap instance.
// constructor parameter syntax changed slightly for BasemapGallery.
// streetview control is on by default.
// no xbuilt. issues with  loading the xdomain built from googlecode.com while loading jsapi from arcgisonline.
//2011-12-15: v1.07, update to jsapi2.6, oblique rotation, work with esri BasemapGallery, delayed of loading of API until set as visible
//2011-10-24: v1.05, working with basemapcontrol, styled options
//2011-10-18: v1.04, xd built
//2011-10-17: v1.03, added support for StreetView, Sub layers (Traffic, Point of Interest etc)
//2011-10-05: fixed issues with Chrome, IE7, IE8
//2011-08-11: updated for JSAPI 2.4. changed package.

//define("agsjs/layers/GoogleMapsLayer", ["dojo", "dijit", "dojox", "dojo/require","esri/dijit/BasemapGallery"], function(dojo, dijit, dojox) {

  /*global dojo esri  agsjs */
  dojo.require('esri.dijit.BasemapGallery');
  dojo.provide('agsjs.layers.GoogleMapsLayer');
  dojo.declare("agsjs.layers.GoogleMapsLayer", esri.layers.Layer, {
    /**
     * @name GoogleMapsLayerOptions
     * @class This is an object literal that specify the option to construct a {@link GoogleMapsLayer}.
     * @property {String} [id] layerId.
     * @property {Boolean} [visible] default visibility
     * @property {Number} [opacity] opacity (0-1)
     * @property {GoogleMapsAPIOptions} [apiOptions] The options to load Google API. Include property: v, client, sensor, language etc,see {@link GoogleMapsAPIOptions}
     * @property {google.maps.MapOptions} [mapOptions] optional. The options for construct Google Map instance. See <a href=http://code.google.com/apis/maps/documentation/javascript/reference.html#MapOptions>MapOptions</a>.
     */
    /**
     * @name GoogleMapsAPIOptions
     * @class This is an object literal that specify the option to load Google Maps API V3. See <a href=http://code.google.com/apis/maps/documentation/javascript/basics.html>Google documentation</a> for more information.
     * @property {Boolean} [sensor] whether GPS device is used. default to false;
     * @property {Number} [v] API version, 3, 3.1 etc. default to 3.
     * @property {String} [client] client ID for Google Maps Premier license.
     * @property {String} [language] language to use for text such as the names for controls, etc, e.g. cn, ja
     * @property {String} [dir] Bi-directional (Bidi) text. rtl or ltr;
     * @property {String} [libraries] Additonal libraries (geometry|places|adsense);
     *
     */
    /** 
     * Create a GoogleMapsLayer using config {@link GoogleMapsLayerOptions}
     * @name GoogleMapsLayer
     * @constructor
     * @class This class allows Google Maps been used in ESRI ArcGIS JavaScript API.
     * @param {GoogleMapsLayerOptions} opts
     */
    constructor: function(opts) {
      opts = opts || {};
      // this tileInfo does not actually do anything. It simply tricks nav control to 
      // show a slider bar if only gmaps are used, which should be a rare case.
      this.tileInfo = new esri.layers.TileInfo({
        rows: 256,
        cols: 256,
        dpi: 96,
        origin: {
          x: -20037508.342787,
          y: 20037508.342787
        },
        spatialReference: {
          wkid: 102100
        },
        lods: [{
          level: 0,
          resolution: 156543.033928,
          scale: 591657527.591555
        }, {
          level: 1,
          resolution: 78271.5169639999,
          scale: 295828763.795777
        }, {
          level: 2,
          resolution: 39135.7584820001,
          scale: 147914381.897889
        }, {
          level: 3,
          resolution: 19567.8792409999,
          scale: 73957190.948944
        }, {
          level: 4,
          resolution: 9783.93962049996,
          scale: 36978595.474472
        }, {
          level: 5,
          resolution: 4891.96981024998,
          scale: 18489297.737236
        }, {
          level: 6,
          resolution: 2445.98490512499,
          scale: 9244648.868618
        }, {
          level: 7,
          resolution: 1222.99245256249,
          scale: 4622324.434309
        }, {
          level: 8,
          resolution: 611.49622628138,
          scale: 2311162.217155
        }, {
          level: 9,
          resolution: 305.748113140558,
          scale: 1155581.108577
        }, {
          level: 10,
          resolution: 152.874056570411,
          scale: 577790.554289
        }, {
          level: 11,
          resolution: 76.4370282850732,
          scale: 288895.277144
        }, {
          level: 12,
          resolution: 38.2185141425366,
          scale: 144447.638572
        }, {
          level: 13,
          resolution: 19.1092570712683,
          scale: 72223.819286
        }, {
          level: 14,
          resolution: 9.55462853563415,
          scale: 36111.909643
        }, {
          level: 15,
          resolution: 4.77731426794937,
          scale: 18055.954822
        }, {
          level: 16,
          resolution: 2.38865713397468,
          scale: 9027.977411
        }, {
          level: 17,
          resolution: 1.19432856685505,
          scale: 4513.988705
        }, {
          level: 18,
          resolution: 0.597164283559817,
          scale: 2256.994353
        }, {
          level: 19,
          resolution: 0.298582141647617,
          scale: 1128.497176
        }, {
          level: 20,
          resolution: 0.149291070823808,
          scale: 564.248588
        }]
      });
      
      this.fullExtent = new esri.geometry.Extent({
        xmin: -20037508.34,
        ymin: -20037508.34,
        xmax: 20037508.34,
        ymax: 20037508.34,
        spatialReference: {
          wkid: 102100
        }
      });
      this.initialExtent = new esri.geometry.Extent({
        xmin: -20037508.34,
        ymin: -20037508.34,
        xmax: 20037508.34,
        ymax: 20037508.34,
        spatialReference: {
          wkid: 102100
        }
      });
      this.opacity = opts.opacity || 1;
      this._mapOptions = opts.mapOptions || {};
      this._apiOptions = dojo.mixin({
        sensor: false
      }, opts.apiOptions || {});
      
      /*if (this._mapOptions.streetViewControl == undefined) {
       this._mapOptions.streetViewControl = false;
       }*/
      this._gmap = null;
      this.loaded = true;// it seems _setMap will only get called if loaded = true, so set it here first.
      this.onLoad(this);
    },
    
    /**
     * get the wrapped <code>google.maps.Map</code> for further customization.
     * @function
     * @name GoogleMapsLayer#getGoogleMapInstance
     * @return {google.maps.Map}
     */
    getGoogleMapInstance: function() {
      return this._gmap;
    },
    // override parent class abstract method
    /**********************
     * @see http://help.arcgis.com/en/webapi/javascript/arcgis/samples/exp_rasterlayer/javascript/RasterLayer.js
     * Internal Properties
     *
     * _map
     * _element
     * _context
     * _mapWidth
     * _mapHeight
     * _connects
     *
     **********************/
    _setMap: function(map, container) {
      // This overrides an undocumented private method from ESRI API. 
      // It's possible not to do this, but it requires
      // map instance implicitly set to the layer instance, which is a little bit inconvenient.
      // this is likely called inside esriMap.addLayer()
      this._map = map;
      // this style is used to style 0 size divs, mainly for holding it's DOM position but not obstructing events.
      var style = {
        position: 'absolute',
        top: '0px',
        left: '0px',
        width: '0px',
        height: '0px'
      };
      var element = dojo.create('div', {}, container);
      if (this.id) {
        element.id = this.id;
      }
      dojo.style(element, style);
      this._element = element;
      var div = dojo.create('div', {}, element);
      dojo.style(div, style);
      dojo.style(div, 'width', (map.width || container.offsetWidth) + 'px');
      dojo.style(div, 'height', (map.height || container.offsetHeight) + 'px');
      this._gmapDiv = div;
      
      // topDiv is used to mask all esri events in oblique mode.
      var tdiv = dojo.create('div', {}, map.id);
      tdiv.id = 'gmaps_top_' + div.id;
      dojo.style(tdiv, style);
      this._topDiv = tdiv;
      // controlDiv is used to hold pegman and oblique rotater.
      var cdiv = dojo.create('div', {}, map.id);
      cdiv.id = 'gmaps_controls_' + div.id;
      dojo.style(cdiv, dojo.mixin(style, {
        // width: '0px',
        // height: '0px',
        top: '5px',
        left: '5px'
      }));
      this._controlDiv = cdiv;
      
      //this._container = layersDiv;
      // Event connections
      this._connects = [];
      this._connects.push(dojo.connect(this, 'onVisibilityChange', this, this._visibilityChangeHandler));
      this._connects.push(dojo.connect(this, 'onOpacityChange', this, this._opacityChangeHandler));
      
      this.visible = (this.visible === undefined) ? true : this.visible;
      if (this.visible) {
        this._initGMap();
      }
      return element;
    },
    _unsetMap: function(map, layersDiv) {
      // see _setMap. Undocumented method, but probably should be public.
      dojo.forEach(this._connects, dojo.disconnect, dojo);
      if (this._streetView) {
        this._streetView.setVisible(false);
      }
      if (google && google.maps && google.maps.event) {
        if (this._gmapTypeChangeHandle) 
          google.maps.event.removeListener(this._gmapTypeChangeHandle);
        if (this._svVisibleHandle) 
          google.maps.event.removeListener(this._svVisibleHandle);
      }
      if (this._element) 
        this._element.parentNode.removeChild(this._element);
      dojo.destroy(this._element);
      if (this._controlDiv) 
        this._controlDiv.parentNode.removeChild(this._controlDiv);
      dojo.destroy(this._controlDiv);
      if (this._topDiv) 
        this._topDiv.parentNode.removeChild(this._topDiv);
      dojo.destroy(this._topDiv);
      this._element = this._gmapDiv = this._controlDiv = null;
    },
    
    // delayed init and Api loading.
    _initGMap: function() {
      window.google = window.google || {}; // somehow IE needs this, otherwise complain google.maps namespace;
      if (window.google && google.maps) {
        var ext = this._map.extent;
        var center = this._mapOptions.center || this._esriPointToLatLng(ext.getCenter());
        var level = this._map.getLevel();
        var myOptions = dojo.mixin({
          //disableDefaultUI: true,
          center: center,
          zoom: (level > -1) ? level : 1,
          panControl: false,
          mapTypeControl: false,
          zoomControl: false
        }, this._mapOptions);
        
        if (myOptions.mapTypeId) {
          myOptions.mapTypeId = this._getGMapTypeId(myOptions.mapTypeId);
        } else {
          myOptions.mapTypeId = google.maps.MapTypeId.ROADMAP;
        }
        var gmap = new google.maps.Map(this._gmapDiv, myOptions);
        if (level < 0) {
          dojo.connect(this._map, 'onLoad', dojo.hitch(this, function() {
            this._setExtent(ext);
          }));
        }
        this._gmap = gmap;
        this._setExtent(ext);
        
        this._extentChangeHandle = dojo.connect(this._map, 'onExtentChange', this, this._extentChangeHandler);
        this._panHandle = dojo.connect(this._map, 'onPan', this, this._panHandler);
        this._resizeHandle = dojo.connect(this._map, 'onResize', this, this._resizeHandler);
        // 45 deg need move up regardless of streetview
        this._mvHandle = dojo.connect(this._map, 'onMouseMove', dojo.hitch(this, this._moveControls));
        this._gmapTypeChangeHandle = google.maps.event.addListener(this._gmap, 'maptypeid_changed', dojo.hitch(this, this._mapTypeChangeHandler));
        this._gmapTiltChangeHandle = google.maps.event.addListener(this._gmap, 'tilt_changed', dojo.hitch(this, this._mapTiltChangeHandler));
        this.onLoad();
      } else if (agsjs.onGMapsApiLoad) {
        // did another instance already started loading agsjs API but not done?
        // this should be very very rare because one instance of this layer would be sufficient with setMapTypeId.
        dojo.connect(agsjs, 'onGMapsApiLoad', this, this._initGMap);
      } else {
        // this is the first instance that tries to load agsjs API on-demand
        agsjs.onGMapsApiLoad = function() {
          // do nothing, just needed to dispatch event.
        };
        dojo.connect(agsjs, 'onGMapsApiLoad', this, this._initGMap);
        var script = document.createElement('script');
        script.type = 'text/javascript';
        var pro = window.location.protocol;
        if (pro.toLowerCase().indexOf('http') == -1) {
          pro = 'http:';
        }
        var src = pro + '//maps.googleapis.com/maps/api/js?callback=agsjs.onGMapsApiLoad';
        for (var x in this._apiOptions) {
          if (this._apiOptions.hasOwnProperty(x)) {
            src += '&' + x + '=' + this._apiOptions[x];
          }
        }
        script.src = src;
        if (document.getElementsByTagName('head').length > 0) {
          document.getElementsByTagName('head')[0].appendChild(script);
        } else {
          document.body.appendChild(script);
        }
      }
    },
    
    /**
     * Sets Opacity
     * @name GoogleMapsLayer#setOpacity
     * @function
     * @param {Number} opacity from 0-1
     */
    setOpacity: function(opacity) {
      // dojo core should have something do this
      if (this._gmapDiv) {
        opacity = Math.min(Math.max(opacity, 0), 1);
        var st = this._gmapDiv.style;
        if (typeof st.opacity !== 'undefined') {
          st.opacity = opacity;
        } else if (typeof st.filters !== 'undefined') {
          st.filters.alpha.opacity = Math.floor(100 * opacity);
        } else if (typeof st.filter !== 'undefined') {
          st.filter = "alpha(opacity:" + Math.floor(opacity * 100) + ")";
        }
      }
      this.opacity = opacity;
    },
    /**
     * set map type id. e.g <code>GoogleMapsLayer.MAP_TYPE_ROADMAP</code>
     *
     * @name GoogleMapsLayer#setMapTypeId
     * @function
     * @param {String} mapTypeId one of GoogleMapsLayer.MAP_TYPE_ROADMAP|MAP_TYPE_HYBRID|MAP_TYPE_STELLITE|MAP_TYPE_TERRIAN
     */
    setMapTypeId: function(mapTypeId) {
      if (this._gmap) {
        this._gmap.setMapTypeId(this._getGMapTypeId(mapTypeId));
        this._mapTypeChangeHandler();
      } else {
        this._mapOptions.mapTypeId = mapTypeId;
      }
      return;
    },
    /**
     * set map style for customized base map. The style specs are available at <a href="http://code.google.com/apis/maps/documentation/javascript/styling.html">Google Documentation</a>.
     * This class privide a few pre-defined styles: MAP_STYLE_GRAY|MAP_STYLE_NIGHT.
     * @name GoogleMapsLayer#setMapStyle
     * @function
     * @param {Object[]} styles
     */
    setMapStyles: function(styles) {
      if (this._styleOptions) {
        // if has _styleOptions, set it null means clear it.
        styles = styles || [];
      }
      if (styles) {
        if (this._gmap) {
          this._styleOptions = styles;
          this._gmap.setOptions({
            styles: styles
          });
        } else {
          this._mapOptions.styles = styles;
        }
      }
      return;
    },
    /**
     * Fired when Google Map Type (ROAD, SATERLLITE etc) changed
     * @name GoogleMapsLayer#onMapTypeChange
     * @param {String} mapTypeId
     * @event
     */
    onMapTypeChange: function(mapTypeId) {
      // event
    },
    _getGMapTypeId: function(type) {
      // typically the constants is same, however, if google changes, 
      // and API is loaded dynamically but map type is specified before API load,
      // there is a slight chance they are out of sync, so fix here.
      if (google && google.maps) {
        switch (type) {
        case agsjs.layers.GoogleMapsLayer.MAP_TYPE_ROADMAP:
          return google.maps.MapTypeId.ROADMAP;
        case agsjs.layers.GoogleMapsLayer.MAP_TYPE_HYBRID:
          return google.maps.MapTypeId.HYBRID;
        case agsjs.layers.GoogleMapsLayer.MAP_TYPE_SATELLITE:
          return google.maps.MapTypeId.SATELLITE;
        case agsjs.layers.GoogleMapsLayer.MAP_TYPE_TERRAIN:
          return google.maps.MapTypeId.TERRAIN;
        }
      }
      return type;
    },
    _opacityChangeHandler: function(opacity) {
      // this probably should be handled in the core ESRI API using the div returned from _setMap().
      this.setOpacity(opacity);
    },
    
    _visibilityChangeHandler: function(v) {
      if (v) {
        esri.show(this._gmapDiv);
        //if (!this._svDisabled) {
        esri.show(this._controlDiv);
        //}
        this.visible = true;
        if (this._gmap) {
          google.maps.event.trigger(this._gmap, 'resize');
          this._panHandle = this._panHandle || dojo.connect(this._map, "onPan", this, this._panHandler);
          this._extentChangeHandle = this._extentChangeHandle || dojo.connect(this._map, "onExtentChange", this, this._extentChangeHandler);
          this._setExtent(this._map.extent);
        } else {
          this._initGMap();
        }
      } else {
        if (this._gmapDiv) {
          esri.hide(this._gmapDiv);
          esri.hide(this._controlDiv);
          this.visible = false;
          if (this._gmap) {
            this._map.setExtent(this._latLngBoundsToEsriExtent(this._gmap.getBounds()));
          }
          if (this._streetView) {
            this._streetView.setVisible(false);
          }
          if (this._panHandle) {
            dojo.disconnect(this._panHandle);
            this._panHandle = null;
          }
          if (this._extentChangeHandle) {
            dojo.disconnect(this._extentChangeHandle);
            this._extentChangeHandle = null;
          }
        }
      }
    },
    _resizeHandler: function(extent, height, width) {
      dojo.style(this._gmapDiv, {
        width: this._map.width + "px",
        height: this._map.height + "px"
      });
      google.maps.event.trigger(this._gmap, 'resize');
    },
    _extentChangeHandler: function(extent, delta, levelChange, lod) {
      if (levelChange) {
        this._setExtent(extent);
      } else {
        this._gmap.setCenter(this._esriPointToLatLng(extent.getCenter()));
      }
    },
    _panHandler: function(extent, delta) {
      //console.log('pan:'+extent.xmin+','+extent.ymin+','+extent.xmax+','+extent.ymax);
      if (this._gmap.getTilt() == 0) {
        this._gmap.setCenter(this._esriPointToLatLng(extent.getCenter()));
      }
    },
    _mapTypeChangeHandler: function() {
      this._checkZoomLevel();
      this.onMapTypeChange(this._gmap.getMapTypeId());
    },
    
    _checkZoomLevel: function() {
      var id = this._gmap.getMapTypeId();
      var types = this._gmap.mapTypes;
      var maptype = null;
      for (var x in types) {
        if (types.hasOwnProperty(x) && x == id) {
          maptype = types[x];
          break;
        }
      }
      // prevent the case when switch to terrain causing misalignment because terrain only up to level 15.
      if (maptype != null) {
        var mi = maptype.minZoom;
        var mx = maptype.maxZoom;
        var z = this._map.getLevel();
        if (mx !== undefined && z > mx) {
          this._map.setLevel(mx);
        }
        if (mi != undefined && z < mi) {
          this._map.setLevel(mi);
        }
      }
    },
    _setExtent: function(extent) {
      var ct = this._esriPointToLatLng(extent.getCenter());
      var lv = this._map.getLevel();
      /*
       
       if (lv >= 0) {
       this._gmap.setZoom(lv);
       
       } else {
       
       }*/
      // esrimap.getLevel is not reliable. result differnt if first layer is Bing Map vs arcgis tile layer.
      // Google maps fit always get a smaller zoom.
      this._gmap.fitBounds(this._esriExtentToLatLngBounds(extent.expand(0.5)));
      this._gmap.setCenter(ct);
      this._checkZoomLevel();
      
      //console.log('gmaps fit:'+this._gmap.getZoom()+' emap:'+lv);
    },
    // move the street view control on top of map container.
    // Esri API prevents mouse event progaginate to lower divs inside map container
    // this method sort of move it up so it can be dragged. A little bit hack, 
    // but as long as stick to a certain version, should still be workable.
    _moveControls: function() {
      if (this._mvHandle) {
        if (!this._gmap) {
          dojo.disconnect(this._mvHandle);
          this._mvHandle = null;
        } else {
          if (!this._svMoved) {
            this._streetView = this._gmap.getStreetView();
            if (this._streetView) {
              var sv = dojo.query('.gmnoprint img[src*="cb_scout_sprite"]', this._gmapDiv);
              if (sv.length > 0) {
                dojo.forEach(sv, function(s, idx) {
                  dojo.place(s.parentNode.parentNode, this._controlDiv);
                }, this);
                
                this._svMoved = true;
                this._svVisibleHandle = google.maps.event.addListener(this._streetView, 'visible_changed', dojo.hitch(this, this._streetViewVisibilityChangeHandler));
              }
            } else {
              this._svMoved = true;
            }
          }
          if (!this._rotateMoved) {
            var ob = dojo.query('.gmnoprint img[src*="rotate"]', this._gmapDiv);
            if (ob.length > 0) {
              dojo.forEach(ob, function(s, idx) {
                dojo.place(s.parentNode.parentNode, this._controlDiv);
                dojo.style(s, 'position', 'absolute');
                dojo.style(s, 'left', '20px');
              }, this);
              this._rotateMoved = true;
            }
          }
          if (this._rotateMoved && this._svMoved) {
            dojo.disconnect(this._mvHandle);
            this._mvHandle = null;
          }
        }
      }
    },
    _streetViewVisibilityChangeHandler: function() {
      //console.log('_streetViewVisibilityChangeHandler');
      if (this._streetView) {
        var vis = this._streetView.getVisible();
        this._toggleEsriControl(vis);
        this.onStreetViewVisibilityChange(vis);
      }
      
    },
    // when oblique is shown, we should disable esri mouse events because the projection changes.
    _mapTiltChangeHandler: function() {
      //console.log('_mapTiltChangeHandler');
      var t = this._gmap.getTilt();
      if (t == 45) {
        //this._toggleEsriControl(true);
        //this._map._isPanGMaps = this._map.isPan;
        //this._map.disablePan();
        dojo.place(this._gmapDiv, this._topDiv);
        this._map.disableMapNavigation();
      } else if (t == 0) {
        //this._toggleEsriControl(false);
        //if (this._map._isPanGMaps) this._map.enablePan();
        dojo.place(this._gmapDiv, this._element);
        this._map.enableMapNavigation();
      }
      
    },
    _toggleEsriControl: function(turnOff) {
      if (turnOff) {
        this._isZoomSliderDefault = this._map.isZoomSlider;
        this._map.hideZoomSlider();
        // gmaps (as of v3.6) still dispatch events even street view is visible. so we disable it here.
        this._map.disableMapNavigation();
        
      } else {
        if (this._isZoomSliderDefault) {
          this._map.showZoomSlider();
        }
        this._map.enableMapNavigation();
      }
    },
    /**
     * Fired when Street View visibility changed.
     * @name GoogleMapsLayer#onStreetViewVisibilityChange
     * @param {boolean} visibility
     * @event
     */
    onStreetViewVisibilityChange: function(vis) {
      // attach events
    },
     /**
     * Fired when Street View visibility changed.
     * @name GoogleMapsLayer#onStreetViewVisibilityChange
     * @param {boolean} visibility
     * @event
     */
    onLoad: function(){
      
    },
    _esriPointToLatLng: function(pt) {
      var ll = esri.geometry.webMercatorToGeographic(pt);
      return new google.maps.LatLng(ll.y, ll.x);
    },
    _esriExtentToLatLngBounds: function(ext) {
      var llb = esri.geometry.webMercatorToGeographic(ext);
      return new google.maps.LatLngBounds(new google.maps.LatLng(llb.ymin, llb.xmin, true), new google.maps.LatLng(llb.ymax, llb.xmax, true));
    },
    _latLngBoundsToEsriExtent: function(bounds) {
      var ext = new esri.geometry.Extent(bounds.getSouthWest().lng(), bounds.getSouthWest().lat(), bounds.getNorthEast().lng(), bounds.getNorthEast().lat());
      return esri.geometry.geographicToWebMercator(ext);
    }
    
  });
  
  dojo.mixin(agsjs.layers.GoogleMapsLayer, {
    MAP_TYPE_SATELLITE: "satellite",
    MAP_TYPE_HYBRID: "hybrid",
    MAP_TYPE_ROADMAP: "roadmap",
    MAP_TYPE_TERRAIN: "terrain",
    MAP_STYLE_GRAY: [{
      featureType: 'all',
      stylers: [{
        saturation: -80
      }, {
        lightness: 20
      }]
    }],
    MAP_STYLE_LIGHT_GRAY: [{
      featureType: 'all',
      stylers: [{
        saturation: -80
      }, {
        lightness: 60
      }]
    }],
    MAP_STYLE_NIGHT: [{
      featureType: 'all',
      stylers: [{
        invert_lightness: 'true'
      }]
    }]
  });
  
  
  // extend Esri gallery
  // note: should not use dojo.ready here because it will not run until all outstanding dojo.require resolved.
  // that maybe too late to construct a BasemapGallery manually. 
  require(['esri/dijit/BasemapGallery'], function(BasemapGallery) {
    //console.log('has esri.dijit.BasemapGallery');
    esri.dijit.BasemapGallery.prototype._original_postMixInProperties = esri.dijit.BasemapGallery.prototype.postMixInProperties;
    esri.dijit.BasemapGallery.prototype._original_startup = esri.dijit.BasemapGallery.prototype.startup;
    dojo.extend(esri.dijit.BasemapGallery, {
      google: null,
      _googleLayers: [],
      toggleReference: false,
      postMixInProperties: function() {
        if (!this._OnSelectionChangeListenerExt) {
          this._onSelectionChangeListenerExt = dojo.connect(this, 'onSelectionChange', this, this._onSelectionChangeExt)
        }
        if (this.google != undefined && (this.showArcGISBasemaps || this.basemapsGroup)) {
          this.basemaps.push(new esri.dijit.Basemap({
            id: 'google_road',
            layers: [new esri.dijit.BasemapLayer({
              type: 'GoogleMapsRoad'
            })],
            title: "Google Road",
            thumbnailUrl: dojo.moduleUrl("agsjs.dijit", "images/googleroad.png")
          }));
          this.basemaps.push(new esri.dijit.Basemap({
            id: 'google_satellite',
            layers: [new esri.dijit.BasemapLayer({
              type: 'GoogleMapsSatellite'
            })],
            title: "Google Satellite",
            thumbnailUrl: dojo.moduleUrl("agsjs.dijit", "images/googlesatellite.png")
          }));
          this.basemaps.push(new esri.dijit.Basemap({
            id: 'google_hybrid',
            layers: [new esri.dijit.BasemapLayer({
              type: 'GoogleMapsHybrid'
            })],
            title: "Google Hybrid",
            thumbnailUrl: dojo.moduleUrl("agsjs.dijit", "images/googlehybrid.png")
          }));
          
        }
        if (this.loaded) {
          this._onLoadExt();
        } else {
          this._onLoadListenerExt = dojo.connect(this, 'onLoad', this, this._onLoadExt);
        }
        if (this._original_postMixInProperties) {
          this._original_postMixInProperties();
        }
        //console.log('dom' + this.domNode);
      },
      startup: function() {
        // user have option of not calling startup for custom UI.
        // _startupCalled is used to flag if we need refresh UI for toggle reference layer
        this._startupCalled = true;
        this._original_startup();
        // move from _processReferenceLayersExt because domNode may not be available at the time if manual mode.
        if (!this._onGalleryClickListenerExt) {
          this._onGalleryClickListenerExt = dojo.connect(this.domNode, 'click', this, this._onGalleryClickExt);
        }
      },
      _onLoadExt: function() {
        //console.log('inside _onLoad ');
        if (this._onLoadListenerExt) 
          dojo.disconnect(this._onLoadListenerExt);
        if (this.toggleReference) {
          dojo.forEach(this.basemaps, function(basemap) {
            var layers = basemap.getLayers();
            if (layers.length) {
              this._processReferenceLayersExt(basemap);
            } else {
              layers.then(dojo.hitch(this, this._processReferenceLayersExt, basemap));
            }
          }, this);
        }
      },
      _processReferenceLayersExt: function(basemap) {
        var layers = basemap.getLayers();
        var hasRef = false, vis = true;
        dojo.forEach(layers, function(layer) {
          if (layer.isReference) {
            hasRef = true;
            if (layer.visibility === false) {
              vis = false;
            }
          }
        });
        
        if (hasRef && this.toggleReference) {
          basemap.title += '<input type="checkbox"  disabled ' + (vis ? 'checked' : '') + '/>';
          basemap._hasReference = true;
        } else {
          basemap._hasReference = false;
        }
        
        var needsRefresh = 0;
        dojo.forEach(this.basemaps, function(b) {
          // make sure all basemaps are processed. it is decided by each basemap has a _hasReference property, regardless true or false.
          // if there is any basemap not processed, should not refresh.
          // if there are at least one ref layers for that basemap, will refresh.
          if (b._hasReference == undefined) {
            needsRefresh -= this.basemaps.length;
          }
          if (b._hasReference) {
            needsRefresh++;
          }
        }, this);
        if (needsRefresh >= 0) {
          if (needsRefresh > 0 && this._startupCalled) {
            // if startup is executed before all basemap are processed, need recall it. if not called yet, does not matter.
            this.startup();
          }
        }
      },
      _onSelectionChangeExt: function() {
        var selected = this.getSelected();
        var layer;
        if (selected) {
          if (this._googleLayers.length > 0) {
            dojo.forEach(this._googleLayers, function(lay) {
              this.map.removeLayer(lay);
            }, this);
            this._googleLayers.length = 0;
          }
          dojo.query('input', this.domNode).forEach(function(m) {
            m.disabled = true;
          });
          var layers = selected.getLayers();
          dojo.forEach(layers, function(blay) {
            if (blay.type && blay.type.indexOf("GoogleMaps") > -1) {
              var mtype = agsjs.layers.GoogleMapsLayer.MAP_TYPE_ROADMAP;
              if (blay.type == "GoogleMapsSatellite") {
                mtype = agsjs.layers.GoogleMapsLayer.MAP_TYPE_SATELLITE;
              } else if (blay.type == "GoogleMapsHybrid") {
                mtype = agsjs.layers.GoogleMapsLayer.MAP_TYPE_HYBRID;
              }
              this.google = this.google || {};
              this.google.mapOptions = this.google.mapOptions || {};
              this.google.mapOptions.mapTypeId = mtype;
              
              layer = new agsjs.layers.GoogleMapsLayer(this.google);
              this.map.addLayer(layer, 0);
              this._googleLayers.push(layer);
            }
          }, this);
        }
        // when the first basemap is selected, UI may already built, but at that time, 
        // nothing to mark as selected node because first onSelectionChange has not been fired yet.
        var hasSelectedNode = this._checkSelectedNode();
        if (!hasSelectedNode && this._startupCalled) {
          // mark selected basemap in UI.
          this.startup();
          // this enables checkbox;
          this._checkSelectedNode();
        }
        
      },
      _checkSelectedNode: function() {
        var hasSelectedNode = false;
        var layers = this.getSelected().getLayers();
        dojo.query('.esriBasemapGallerySelectedNode', this.domNode).forEach(function(n) {
          hasSelectedNode = true;
          dojo.query('input', n).forEach(function(m) {
            m.disabled = false;
            // jsapi fires onSelectionChange before reference layer updates, (should be a bug) so we can not set vis directly.
            //this._setReferenceVis(m.checked);
            dojo.forEach(layers, function(blay) {
              if (blay.isReference) {
                blay.visibility = m.checked;
              }
            }, this);
            
          }, this);
        }, this);
        return hasSelectedNode;
      },
      _onGalleryClickExt: function(evt) {
        var t = evt.target;
        if (t.tagName.toLowerCase() == 'input') {
          this._setReferenceVis(t.checked);
        } else if (dojo.hasClass(t.parentNode, 'esriBasemapGalleryLabelContainer')) {
          // this allows basemap switch by clicking on label.
          t.parentNode.parentNode.firstChild.click();
        }
      },
      _setReferenceVis: function(visible) {
        //arcgis API does not associate the actual created esri.layers.Layer and esri.dijit.BasemapLayer
        // so have to use undocumented _basemapGalleryLayerType.
        dojo.forEach(this.map.layerIds, function(id) {
          var layer = this.map.getLayer(id);
          if (layer._basemapGalleryLayerType == "reference") {
            if (visible) {
              layer.show();
            } else {
              layer.hide();
            }
            
          }
        }, this);
      },
      /**
       * get array of active google layers. Typically there is only one layer in the array.
       * @return {GoogleMapsLayer[]}
       */
      getGoogleLayers: function() {
        return this._googleLayers;
      }
    });
  });
//});