// Generates content dynamically (all the HTML and structure is contained here

if(!this.PBS) this.PBS = new Object();
PBS.whatson_multi = { feedStart: 0,
                      tabStart: 0,
                      tabs: [ "now", "kids", "tonight" ],
                      style: {
                      '#pbs-whatson ul' : '{ margin:0; padding:0; list-style: none; }',
                      '#pbs-whatson li' : '{ margin:0; padding:0; }',
                      '#pbs-whatson ul.yui-accordionview div.yui-accordion-content': '{ overflow: hidden; margin: 0; padding: 0; }',  
                      '#pbs-whatson ul.yui-accordionview div.yui-accordion-content.hidden': '{ visibility: hidden; position: absolute; }', 
                      '#pbs-whatson ul.yui-accordionview div.yui-accordion-content.almosthidden': '{ position: absolute; left: -9999px; z-index: -10; }',
                      '#pbs-whatson ul.yui-accordionview li.yui-accordion-panel': '{ display: inline; }',
                      '#pbs-whatson ul.yui-accordionview li.yui-accordion-panel a.yui-accordion-toggle': '{ display: block; position: relative; }',
                      '#pbs-whatson ul.submenu li a': '{ display: block; }'
                      },
                      YAHOO: undefined,
                      whatsonTabs: false,
                      html: '<div class="yui-navset" id="pbs-whatson-internal">     <ul class="tab-menu yui-nav">         <li> <a href="#now">now</a> </li><li> <a href="#kids">kids</a> </li><li> <a href="#tonight">tonight</a> </li>     </ul>       <div style="clear: left;" class="yui-content">         <div id="pbswhatson-now">     <ul id="yui-accordionview-block-now">              </ul>      <div class="pbswhatson-feed">         <p> No digital channels are available for your station. </p>     </div> </div><div id="pbswhatson-kids">     <ul id="yui-accordionview-block-kids">              </ul>      <div class="pbswhatson-feed">         <p> No digital channels are available for your station. </p>     </div> </div><div id="pbswhatson-tonight">     <ul id="yui-accordionview-block-tonight">              </ul>      <div class="pbswhatson-feed">         <p> No digital channels are available for your station. </p>     </div> </div>     </div> </div>' };


(function() {
 YAHOO.util.Event.onAvailable("pbs-whatson", function() {
     var _d = PBS.whatson_multi;
     var el = document.getElementById("pbs-whatson");
     el.innerHTML = _d.html;

     var tab = new YAHOO.widget.TabView('pbs-whatson-internal');
     tab.addListener('activeTabChange', function(arg) {
         // console.log("in activeTabChange");
         var tabidx = this.get("activeIndex");

         if(arg.prevValue) {
             var oldtabidx = this.getTabIndex(arg.prevValue);
             _d.accordions[oldtabidx].removeListener("afterPanelOpen");
         }

         var _a = _d.accordions[tabidx];
         _a.addListener("afterPanelOpen", function() {
             var panels = _a.getElementsByClassName('yui-accordion-toggle');
             var activeIndex = 0;
             for(var i=0; i<panels.length; i++) {
                 if(YAHOO.util.Dom.hasClass(panels[i], 'active')) activeIndex=i;
             }

             // console.log("Panel number " + activeIndex + " opened.");
             for(var i=0; i<_d.tabs.length; i++) {
                 if(i != tabidx) _d.accordions[i].openPanel(activeIndex);
             }

             });
         });

     _d.whatsonTabs = tab;
     _d.accordions = new Array();

     for(var i=0; i<_d.tabs.length; i++) {
         var tabname = _d.tabs[i];
         var a = new YAHOO.widget.AccordionView('yui-accordionview-block-' + tabname, { width:'100%', expandItem:0 });
         _d.accordions[i] = a;
     }

     var ns = document.createElement('style');
     document.getElementsByTagName('head')[0].appendChild(ns);
     if(!window.createPopup) ns.appendChild(document.createTextNode(''));
     var s = document.styleSheets[document.styleSheets.length - 1];
     for(var selector in _d.style) {
         try {
             if(s.insertRule) s.insertRule(selector + _d.style[selector], s.cssRules.length)
             else s.addRule(selector, _d.style[selector]);
         } catch(e) {
             // Oh well.
         }
     }


     tab.set('activeIndex', _d.tabStart);
 });
})();