custom basemap gallery widget could not change the main map. HELP!

[AllenHuang]

Hi.. I'm a first time user of the ArcGIS API for javascript.

Problem:
My custom BasemapGallery widget, an slightly altered version of the BasemapGallery widget example in the documentation website
link does not change the basemap of my main map like the example.

What did I do wrong. What am I missing. Help.


Description:
Using API 3.4 but using dojo 1.6 non-AMD style coding.

I wanted to modularize  my webmap to be as much as possible so separated the html and javascript code for BasemapGallery into separate custom widgets. I going to use a lot of layers and I don't want to clutter up the main javascript file.

Essentially, I just wrapped the same code that would go in the map web map HTML and javascript into a widget package call customWidget.BasemapGallery

I was successful in making creating a TitlePane that opens up to a BaseMapGallery but that's as far as I went. Whenever I click on a image of a map. The main map doesn't change.

Here is my code.

JAVASCRIPT portion of the main map

app.map = new esri.Map(
  "mapDiv", 
  {
   center: [-64.46968730, 45.08473950], //Kentville, Nova Scotia, Canada
   zoom: 13,
   logo: false,
   showAttribution: false,
   slider: true,
   sliderStyle: "large",
   basemap: "streets"
  }
 );

HTML of the widget: BasemapGallery.html
[HTML]

<div class="${baseClass}">
<div>
  <div id="baseMapGalleryTitlePane">
   <div data-dojo-type="dijit.layout.ContentPane" style="width:380px; height:280px; overflow:auto;">
    <div id="basemapGalleryDiv" ></div>
   </div>
  </div>
</div>
</div>

[/HTML]




JAVASCRIPT  of the widget: BasemapGallery.js

dojo.provide("customWidget.BasemapGallery");

//required library imports from esri
dojo.require("esri.dijit.Basemap");
dojo.require("esri.dijit.BasemapLayer");
dojo.require("esri.dijit.BasemapGallery");

//required library imports from dojo
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dijit.TitlePane");
dojo.require("dijit.layout.ContentPane");
 
dojo.declare("customWidget.BasemapGallery", [dijit._Widget, dijit._Templated], {
 name: 'No Name',
 templateString: dojo.cache('customWidget.BasemapGallery', 'templates/BasemapGallery.html'),
 baseClass: "BasemapGalleryBase",
 title: "",

 postCreate: function(){
  /*
   * add basemap basemapgallery widget.
   * need to be the same extent
   */
  createBasemapGallery();
 },
});

// build the basemap gallery
function createBasemapGallery(){
 var tp = new dijit.TitlePane(
  {
   title:'Switch Basemap', 
   closable:false, 
   open:false
  }, 
  dojo.byId("baseMapGalleryTitlePane")
 );

 var map = dojo.byId("mapDiv");

 var basemapGallery = new esri.dijit.BasemapGallery(
  {
   bingMapKey: "AnwMNXxXUVsOh1xEmG_i6D_ajxScpoxwwXQHTdOjBM5NcPzXsxhxkVU6dq_Hr4Gw",
   map: map,
   showArcGISBasemaps: true
  }, 
  "basemapGalleryDiv"
 );
 //basemapGallery.basemaps = basemaps;
 basemapGallery.startup();
 
}

HELP HELP.

[AllenHuang]

Mystery solved.

The reason the widget didn't effect the main map is because the widget did not have a link to the main map.
Even thought the widget calls the main map by

dojo.byId("mapDiv")

, it is still a separate event.

To solve this I did this:

1. I added a parameter to my support function

function createBasemapGallery(map)

2. I created a widget function

 setupBasemapGallery: function(mainMap){
  /*
   * add basemap basemapgallery widget.
   * need to be the same extent
   */
  createBasemapGallery(mainMap);
 }

3. in my main JAVASCRIPT I call the dijit element on my main HTML and call setupBasemapGallery

 app.customBasemapGallery = dijit.byId("customBasemapGallery");
 app.customBasemapGallery.setupBasemapGallery(app.map);