title: What are Shadow Tabs in Magento's UI Object Hierarchy?
body: <p>I'm poking around the Magento internals, and  within the Widget/Tab rendering hierarchy there's this concept of Shadow Tabs that I'm a little fuzzy on. When you're defining tabs for your form, you can bind it as a shadow tab</p>
  
  <pre><code>protected function _prepareLayout()
  {
      parent::_prepareLayout();
      $this-&gt;addTab('bundle_items', array(
          'label'     =&gt; Mage::helper('bundle')-&gt;__('Bundle Items'),
          'url'   =&gt; $this-&gt;getUrl('*/*/bundles', array('_current' =&gt; true)),
          'class' =&gt; 'ajax',
      ));
      $this-&gt;bindShadowTabs('bundle_items', 'customer_options');
  }
  </code></pre>
  
  <p>The <code>bindShadowTabs</code> method is documents with</p>
  
  <pre><code>/**
   * Mark tabs as dependent of each other
   * Arbitrary number of tabs can be specified, but at least two
   *
   * @param string $tabOneId
   * @param string $tabTwoId
   * @param string $tabNId...
   */
  public function bindShadowTabs($tabOneId, $tabTwoId)
  </code></pre>
  
  <p>The Javascript that leverages the PHP objects looks like</p>
  
  <pre><code>showTabContentImmediately : function(tab) {
      this.hideAllTabsContent();
      var tabContentElement = $(this.getTabContentElementId(tab));
      if (tabContentElement) {
          Element.show(tabContentElement);
          Element.addClassName(tab, 'active');
          // load shadow tabs, if any
          if (tab.shadowTabs &amp;&amp; tab.shadowTabs.length) {
              for (var k in tab.shadowTabs) {
                  this.loadShadowTab($(tab.shadowTabs[k]));
              }
          }
          if (!Element.hasClassName(tab, 'ajax only')) {
              Element.removeClassName(tab, 'notloaded');
          }
          this.activeTab = tab;
      }
      if (varienGlobalEvents) {
          varienGlobalEvents.fireEvent('showTab', {tab:tab});
      }
  },
  </code></pre>
  
  <p>From a basic reading, it's not entirely clear to me what the implications of making one tab "dependent" on another is.  Is this a simple "only render the <code>bundle_item</code> tab if the <code>customer_options</code> tab is rendered?  Or something more?</p>