Two tabs and a common menu bar

[SamirGambhir]

Hi,
My application has two tabs with base map on each. It also has a menu bar with a number of items. I would like these items to perform specific actions depending on which tab is in focus. I would like to focus on overview map to begin with. Right now the overview map responds to action on the first tab only. If the second tab is clicked and the basemap is zoomed in or out, the overview map does not respond to this action. Here is the relevant code:

HTML code:
...
<div dojoType="dijit.form.DropDownButton">
      <span><strong>Overview Map</strong></span>
        <div dojoType="dijit.TooltipDialog" id="tooltip2" style="width:inherit;">
          <div id="OVMapM"></div>
          <div id="OVMapA"></div>
        </div>
      </div>
...

CSS code:
...
#OVMapM, #OVMapA {
  width:50px;height:50px;margin-left:2px;position:relative; display:none;
}
...

JavaScript code:
...
function init(){
...
var selectChildEvent = dojo.subscribe("projectTabContainer-selectChild", null, onSelectChild);
        dijit.byId('projectTabContainer').selectChild(dijit.byId('analysisTab'));
        dijit.byId('projectTabContainer').selectChild(dijit.byId('mappingTab'));
        dojo.unsubscribe(selectChildEvent);
...
}

function onSelectChild(page) {
      switch(page.id){
        case 'mappingTab':
          mapM = new esri.Map("mapM", {extent : iniExtentM});
          StreetMapM = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
          StreetMapM.setOpacity(0.60);
          mapM.addLayer(StreetMapM);
          ovExtentM = new esri.geometry.Extent({"xmin": 7256469.033685486, "ymin": 607780.9570028302, "xmax": 10835388.124604845, "ymax": 4634224.864539183, "spatialReference":{"wkid":102100}});
          ovMapM = new esri.Map("OVMapM", {extent: ovExtentM, slider:false});
         
       
          var StreetMapOvM = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
          ovMapM.addLayer(StreetMapOvM);
         
          show('OVMapM');
          hide('OVMapA');
         
          dojo.connect(ovMapM, "onLoad", function() {ovMapM.disableMapNavigation();overViewBoxM(mapM.extent);});
          dojo.connect(ovMapM, "onClick", CenterMap);
          dojo.connect(mapM, "onExtentChange", overViewBoxM);
          break;
        case 'analysisTab':
          mapA = new esri.Map("mapA", {extent : iniExtentA});
          StreetMapA = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
          StreetMapA.setOpacity(0.60);
          mapA.addLayer(StreetMapA);
          ovExtentA = new esri.geometry.Extent({"xmin": 7256469.033685486, "ymin": 607780.9570028302, "xmax": 10835388.124604845, "ymax": 4634224.864539183, "spatialReference":{"wkid":102100}});
          ovMapA = new esri.Map("OVMapA", {extent: ovExtentA, slider:false});
         
       
          var StreetMapOvA = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
          ovMapA.addLayer(StreetMapOvA);
         
          show('OVMapA');
          hide('OVMapM');

          dojo.connect(ovMapA, "onLoad", function() {ovMapA.disableMapNavigation();overViewBoxA(mapA.extent);});
          dojo.connect(ovMapA, "onClick", CenterMap);
          dojo.connect(mapA, "onExtentChange", overViewBoxA);
          break;
      }
    }

function show(myDiv){
      var showDojo = dojo.byId(myDiv).style;
      if (showDojo.display="none"){
        showDojo.display="block";
      }
      else{
        showDojo.display="block";
      }
    }
   
    function hide(myDiv){
      var hideDojo = dojo.byId(myDiv).style;
      if (hideDojo.display="block"){
        hideDojo.display="none";
      }
      else{
        hideDojo.display="none";
      }
    }

I'll appreciate any suggestions,
Thanks
Samir

[SamirGambhir]

Hi,
This question has been viewed by many but no solutions so far. I understand it might be time-intensive to provide full solution or coding for this problem, but can somesuggest an approach to solve this problem? 
Thanks
Samir

[StephenLead]

Hi Samir,

You could try posting this on www.stackoverflow.com as it may be more of a general internet question, rather than specific to the ArcGIS Server JS API.

Another approach is to simplify the problem by trying to get your buttons, menus and toolbars to interact with 2 divs on a page (eg, have two divs with a span each. Depending on which tab is in focus, update that span when you press a button).

Once that's working, you'll have a pattern which works for two maps on a map, and you can hook it up to the ArcGIS-specific functions.

Good luck,
Steve

[SamirGambhir]

Thanks Steve,
I have posted this question on stackoverflow.com
Samir