/**
* initTabs - to be called on Window load
* initialise the behaviour for switching between tabs in a pane - requires mootools http://mootools.net/
* The functionality in this script requires some naming conventions:
*  1) all tabsystem navigation divs to have class '._tabBoxTabs'
*  2) all tabsystem navigation divs to have id '[tabsystem_id_no_spaces_no_dashes]-tabs'
*  3) tabsystem content divs to be contained within a divs with id '[tabsystem_id_no_spaces_no_dashes]-content'
*  4) tabsystem buttons are <li> elements with class='tabbutton' and containing <a href='#'>[label]</a> element
*  5) script adds class 'on' or 'off' to the tabbutton <li> elements
*  5) count and order of tabbuttons = count and order of tabcontent divs 
*/
  function initTabs(){
    //use mootools to get all tabsystems on the page
    var tabsystems = $$('._tabBoxTabs');
    var tabbuttons = [];
    
    //loop through tabsystems to initialise each one    
    for(var i=0; i<tabsystems.length; i++){
      
      // when tabsystem in a tabcontent of an other tabsystem with class .inTab do not reorder as tablines and other stuff
      var horizontalTabSystem = tabsystems[i].getParent('.leftNav')==undefined ? true : false; 

      var tabscount = tabsystems[i].getChildren().length;
      
      //follow naming convention and split name to get identifier
      var id=(tabsystems[i].id).split("-")[0];
      if (horizontalTabSystem){
        tabsystems[i].setStyle('position','relative');
      }
      
      var tabsystemWidth = tabsystems[i].offsetWidth;
      if (tabsystemWidth==0){
        tabsystemWidth = 500;
      }            
      var totalWidth = 0;
      var row = 0;

      var contentId = '#'+id+'-content';
      var contentChildren = $$(contentId)[0].getChildren();
      var tabChildern = tabsystems[i].getChildren();
      // only do all kind of stuff when there are tabitems
      if (!(tabChildern[0]==undefined) && !(contentChildren[0]==undefined)){
        var tabHeight = tabChildern[0].offsetHeight;
        if (tabHeight==0){
          tabHeight = 36;
        }            
        var tabSpace = 5;
        
        //loop through the divs and set them all to hidden and apply 'off' class to buttons (count should be equal)
        for(var j=0;j<contentChildren.length;j++){
          contentChildren[j].setStyle('display','none');

          //don't add the 'off' class to any non-button <li>s (such as .endcap)
          if(tabChildern[j].hasClass('tabbutton')){
            tabChildern[j].addClass('off');
            tabChildern[j].removeClass('on');
            if (horizontalTabSystem){
              var tabWidth = tabChildern[j].offsetWidth;
              if (tabWidth==0){
                tabWidth = 100;
              }            
              totalWidth = totalWidth + tabWidth+tabSpace;
              if (totalWidth > (tabsystemWidth - (2 * tabSpace))){
                // tabChildern on the next row
                row = row + 1;
                totalWidth = tabWidth+tabSpace;
              }
              tabChildern[j].setAttribute('value',row);
              tabChildern[j].setStyle('position','absolute');
              tabChildern[j].setStyle('top',(row * tabHeight)+'px');
              tabChildern[j].setStyle('left',(totalWidth-tabWidth+tabSpace)+'px');
              tabChildern[j].top = parseInt(tabChildern[j].getTop()) + (row * tabHeight);
            }
          }
        }

        var maxRow = row;
        var tabsDiv = tabsystems[i].getParent('div');
        
        //show the first tab item as on
        tabChildern[0].addClass('on');
        tabChildern[0].removeClass('off');      
        
        // select the row with the 'on' button
        var tabRow = 0;
        for(var j=0;j<tabChildern.length;j++){
          if (tabChildern[j].hasClass('on')){
            tabRow = tabChildern[j].getAttribute('value');
          }
        }
        
        if (horizontalTabSystem){
          tabsDiv.setStyle('height',((maxRow+1) * tabHeight)+'px');
          tabsystems[i].setStyle('height',((maxRow+1) * tabHeight)+'px');

          reorderTabLines(tabChildern, tabRow, maxRow, tabHeight);
        
          // draw extra lines for the tabrows
          var effectiveTabHeight = 29;
          tabsDiv.setStyle('position','relative');      
          for (var j=0;j<maxRow;j++){
            var newLine = new Element('div');
            newLine.inject(tabsDiv);
            newLine.setStyle('position','absolute');
            newLine.setStyle('top',((j*tabHeight)+effectiveTabHeight)+'px');
            newLine.setStyle('left',tabSpace+'px');
            newLine.setStyle('width',(tabsystemWidth-2*tabSpace)+'px');
            newLine.setStyle('border-top','1px solid #61B01F');
            newLine.setStyle('height','1px');
          }  
          if (maxRow>0){
            var newLine = new Element('div');
            newLine.inject(tabsDiv);
            newLine.setStyle('position','absolute');
            newLine.setStyle('top',effectiveTabHeight+'px');
            newLine.setStyle('left',tabSpace+'px');
            newLine.setStyle('width','1px');
            newLine.setStyle('border-left','1px solid #61B01F');
            newLine.setStyle('height',(maxRow*tabHeight)+'px');
            var newLine = new Element('div');
            newLine.inject(tabsDiv);
            newLine.setStyle('position','absolute');
            newLine.setStyle('top',effectiveTabHeight+'px');
            newLine.setStyle('left',(tabsystemWidth-1*tabSpace)+'px');
            newLine.setStyle('width','1px');
            newLine.setStyle('border-left','1px solid #61B01F');
            newLine.setStyle('height',(maxRow*tabHeight)+'px');
          }
        }
        
        //show the first tab content item
        contentChildren[0].setStyle('display','block');
        
        //the function to be attached to each navbutton click event  
        // @param e eventobject
        var switchContent=function(e){
        
          //console.log(this.mySystemIndex);
          //hide all content      
          var contentId = '#'+this.mySystemID+'-content';
          var contentChildren = $$(contentId)[0].getChildren();
          for(var j=0; j<contentChildren.length; j++){
            if(contentChildren[j].hasClass('tabcontent')){
              contentChildren.setStyle('display','none');
            }
          }
          
          //console.log(this.mySystemID);
          //show the selected content
          contentChildren[this.myIndex].setStyle('display','block');
          
          //reset styles on all buttons
          var tabBoxSystem = $$('._tabBoxTabs')[this.mySystemIndex];
          var tabChildern = tabBoxSystem.getChildren();
          var tabHeight = tabChildern[0].offsetHeight;
          var maxRow = 0;
          for(var j=0;j<tabChildern.length;j++){
            //don't add the 'off' class to any non-button <li>s (such as .endcap)
            if(tabChildern[j].hasClass('tabbutton')){
              tabChildern[j].removeClass('on');
              tabChildern[j].addClass('off');
              if (tabChildern[j].getAttribute('value')>maxRow){
                maxRow = tabChildern[j].getAttribute('value');
              }
            }
          }

      // when tabsystem in a tabcontent of an other tabsystem with class .inTab do not reorder as tablines and other stuff
          var horizontalTabSystem = tabBoxSystem.getParent('.leftNav')==undefined ? true : false; 
          if (horizontalTabSystem){
            var tabRow = this.getParent().getAttribute('value');
            reorderTabLines(tabChildern, tabRow, maxRow, tabHeight);
          }
          
          //add 'on' state to the selected tab
          var p=this.getParent();
          p.addClass('on');
          p.removeClass('off');
          this.blur();
          
          //stop the default <a> event from being executed (no thanks to mootools - documented methods don't work for IE)
          if(e!==undefined){
            if (e.stopPropagation){ 
              e.stopPropagation(); 
              e.preventDefault(); 
            } else { 
              e.returnValue = false; 
              e.cancelBubble = true; 
            } 
            return false; 
          } 
        } // end function switchContent
        
        //bind the onclick event with the <a> element in the tabbutton (thanks again mootools)
        var tabChildernA = tabsystems[i].getChildren();
        for(var k=0;k<tabChildernA.length;k++){
          //var a=$E('a',tabChildernA[k]);        
          var a=tabChildernA[k].getElement('a');        
          if(a!==undefined && tabChildernA[k].hasClass('tabbutton')){
            a.myIndex=k;
            a.mySystemIndex=i;
            a.mySystemID=id;
            a.addEvent('click',switchContent);
          }
        }
      } else {
        // there are no tabs generated because no items in the content: hide the emthy box
        tabsystems[i].getParent().setStyle('display','none');
        var contentBox = $$('.box-61B01F')[i];
        contentBox.setStyle('display','none');
      }
    }
  }
  
  function reorderTabLines(tabChildern, tabRow, maxRow, tabHeight){
    // place the row with the 'on' button at the bottom, the other in reverse order above that row
    for(var j=0;j<tabChildern.length;j++){
      if (tabRow==tabChildern[j].getAttribute('value')){
        // selected row at the bottom
        tabChildern[j].setStyle('top',(maxRow * tabHeight)+'px');
      } else if (tabRow < tabChildern[j].getAttribute('value')){
        tabChildern[j].setStyle('top',((maxRow-tabChildern[j].getAttribute('value')) * tabHeight)+'px');
      } else {
        tabChildern[j].setStyle('top',((maxRow-tabChildern[j].getAttribute('value')-1) * tabHeight)+'px');
      }
    }
  }
  
  //initialise the tabsystems
  window.addEvent('load',initTabs);