Wiki/Team:Waterloo

<html>
<style>
/* --- Control formatting of wiki generated content --- */
body{background:white;padding:0;margin:0;border:none;height:auto !important;height:100%;min-height:100%;font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;}
#globalWrapper{margin:0;padding:0;border:none;height:auto !important;height:100%;min-height:100%;}
#top-section{display:none;}
#content{background-image:url(https://static.igem.org/mediawiki/2010/7/71/Dnabackground.jpg);width:100%;height:auto !important;height:100%;min-height:100%;margin:0;padding:0;border:none;}
.firstHeading{display:none;}
#footer-box{display:none;}

/* --- UW iGEM Wiki Formatting --- */

      div * {overflow:hidden;margin:0;padding:0;border:0;}
      #uwheader {height:85px;width:100%;float:left;clear:all;/*background-image:url(images/aht.png);*/}
      #accordion {width:100%;overflow:hidden;float:left;clear:all;}
      #uwfooter {height:45px;width:100%;float:left;clear:all;/*background-image:url(images/aft.png);*/}
      
      div.verticalSpacer{width:100%;visibility:hidden;}

      /* Formatting for accordion menu components */
 
      /* icon image for headers - positioning for each tab */
      div.icon {position:relative;left:10px; top:12px;height:23px;width:23px;background-image:url('https://static.igem.org/mediawiki/2010/8/8d/A_labels.png');background-repeat:no-repeat;}
      div.aHeaderSelected div.icon{left:9px;}
      #i1{background-position:-23px 0px;}
      div.aHeaderSelected #i1{background-position:0px 0px;}
      #i2{background-position:-69px 0px;}
      div.aHeaderSelected #i2{background-position:-46px 0px;}
      #i3{background-position:-115px -0px;}
      div.aHeaderSelected #i3{background-position:-92px -0px;}
      #i4{background-position:-161px -0px;}
      div.aHeaderSelected #i4{background-position:-138px -0px;}
      #i5{background-position:-207px -0px;}
      div.aHeaderSelected #i5{background-position:-184px -0px;}
      
      /* label image for headers - positioning for each tab */
      div.label {position:relative; left:9px; top:25px;height:200px;width:23px;background-image:url('https://static.igem.org/mediawiki/2010/8/8d/A_labels.png');background-repeat:no-repeat;}
      div.aHeaderSelected div.label{left:8px;}
      #l1{background-position:-23px -24px;}
      div.aHeaderSelected #l1{background-position:-0px -24px;}
      #l2{background-position:-69px -24px;}
      div.aHeaderSelected #l2{background-position:-46px -24px;}
      #l3{background-position:-115px -24px;}
      div.aHeaderSelected #l3{background-position:-92px -24px;}
      #l4{background-position:-161px -24px;}
      div.aHeaderSelected #l4{background-position:-138px -24px;}
      #l5{background-position:-207px -24px;}
      div.aHeaderSelected #l5{background-position:-184px -24px;}
      
      /* formatting for the content divs */
      div.aContent{float:left;overflow:hidden;width:0px;}
      
      /*Left side border and then left side border with vertical sub nav */
      div.aContentLeft{float:left;height:100%;width:7px;overflow:hidden;}
      div.aContentLeft div.aContentTop{height:7px;width:7px;background-image:url('https://static.igem.org/mediawiki/2010/b/b5/A_content.png');overflow:hidden;}
      div.aContentLeft div.aContentMid{background-image:url('https://static.igem.org/mediawiki/2010/b/b5/A_content.png');background-position:-14px 0px;width:7px;overflow:hidden;}
      div.aContentLeft div.aContentBottom{height:7px;width:7px;background-image:url('https://static.igem.org/mediawiki/2010/b/b5/A_content.png');background-position:0px -7px;overflow:hidden;}
      div.aContentLeftVNav{float:left;height:100%;width:7px;overflow:hidden;}
      div.aContentLeftVNav div.aContentTop{height:7px;width:7px;background-image:url('https://static.igem.org/mediawiki/2010/7/74/A_content_vnav.png');overflow:hidden;}
      div.aContentLeftVNav div.aContentMid{background-image:url('https://static.igem.org/mediawiki/2010/7/74/A_content_vnav.png');background-position:-14px 0px;width:7px;overflow:hidden;}
      div.aContentLeftVNav div.aContentBottom{height:7px;width:7px;background-image:url('https://static.igem.org/mediawiki/2010/7/74/A_content_vnav.png');background-position:0px -7px;overflow:hidden;}
      
      /* mid content formatting (no side borders, still top and bottom borders) - first main content area followed by formatting for vertical sub nav */
      div.aContentMidWrap{float:left;height:100%;overflow:hidden;}
      div.aContentMidWrap div.aContentTop{height:7px;width:100%;background-image:url('https://static.igem.org/mediawiki/2010/8/81/A_content2.png');}
      div.aContentMidWrap div.aContentMid{background:#bfdcf3;}
      div.aContentMidWrap div.aContentMid div.aContentMidSub{display:none;overflow:hidden;}
      div.aContentMidWrap div.aContentBottom{height:7px;width:100%;background-image:url('https://static.igem.org/mediawiki/2010/8/81/A_content2.png');background-position:0px -3px;}
      div.aContentMidWrapVNav{float:left;height:100%;overflow:hidden;}
      div.aContentMidWrapVNav div.aContentTop{height:7px;width:100%;background-image:url('https://static.igem.org/mediawiki/2010/3/36/A_content_vnav2.png');}
      div.aContentMidWrapVNav div.aContentMid{background:#0077be;overflow:auto;}
      div.aContentMidWrapVNav div.aContentBottom{height:7px;width:100%;background-image:url('https://static.igem.org/mediawiki/2010/3/36/A_content_vnav2.png');background-position:0px -3px;}
      
      /* Right side border - no vertical sub nav programmed */
      div.aContentRight{float:left;height:100%;width:7px;overflow:hidden;}
      div.aContentRight div.aContentTop{height:7px;width:7px;background-image:url('https://static.igem.org/mediawiki/2010/b/b5/A_content.png');background-position:-7px 0px;}
      div.aContentRight div.aContentMid{background-image:url('https://static.igem.org/mediawiki/2010/b/b5/A_content.png');background-position:-17px 0px;width:7px;}
      div.aContentRight div.aContentBottom{height:7px;width:7px;background-image:url('https://static.igem.org/mediawiki/2010/b/b5/A_content.png');background-position:-7px -7px;}
      
      /* sub nav option formatting */
      div.aContentMenuOption{color:#bfdcf3;float:right;width:85%;text-align:right;padding:8px 5px 8px 0px;margin:5px 0px 5px 0px;cursor:pointer;cursor:hand;}
      div.aContentMenuOptionHover{color:#bfdcf3;float:right;width:85%;text-align:right;padding:8px 5px 8px 0px;margin:5px 0px 5px 0px;font-weight:bold;cursor:pointer;cursor:hand;}
      div.aContentMenuOptionSelected{background:#bfdcf3;color:#0077be;float:right;width:85%;padding:8px 5px 8px 0px;margin:5px 0px 5px 0px;font-weight:bold;text-align:right;cursor:pointer;cursor:hand;}
      
      
      /* tab header formatting, repeated for hover and selected states */
      
      div.aHeader {float:left;width:42px;height:100%;overflow:hidden;}
      div.aHeader div.top{height:12px;width:100%;background-image:url('https://static.igem.org/mediawiki/2010/7/75/A_bar.png');background-position:-42px 0;}
      div.aHeader div.mid{width:100%;background-image:url('https://static.igem.org/mediawiki/2010/7/75/A_bar.png');background-position:-168px 0;overflow:hidden;}
      div.aHeader div.bottom {height:12px;width:100%;background-image:url('https://static.igem.org/mediawiki/2010/7/75/A_bar.png');background-position: -42px -12px;}
      
      div.aHeaderHover {float:left;width:42px;height:100%;overflow:hidden;}
      div.aHeaderHover div.top{height:12px;width:100%;background-image:url('https://static.igem.org/mediawiki/2010/7/75/A_bar.png');background-position:-84px 0;}
      div.aHeaderHover div.mid{width:100%;background-image:url('https://static.igem.org/mediawiki/2010/7/75/A_bar.png');background-position:-210px 0;overflow:hidden;}
      div.aHeaderHover div.bottom {height:12px;width:100%;background-image:url('https://static.igem.org/mediawiki/2010/7/75/A_bar.png');background-position: -84px -12px;}
      
      div.aHeaderSelected {float:left;width:42px;height:100%;overflow:hidden;}
      div.aHeaderSelected div.top{height:12px;width:100%;background-image:url('https://static.igem.org/mediawiki/2010/7/75/A_bar.png');background-position:0px 0;}
      div.aHeaderSelected div.mid{width:100%;background-image:url('https://static.igem.org/mediawiki/2010/7/75/A_bar.png');background-position:-126px 0;overflow:hidden;}
      div.aHeaderSelected div.bottom {height:12px;width:100%;background-image:url('https://static.igem.org/mediawiki/2010/7/75/A_bar.png');background-position: 0px -12px;}

</style>

<!-- Replacement HTML Content -->
<div id="uwheader"></div>
<div id="accordion">

<div id="ah1" class="aHeader" onclick="aSelect(1)" onmouseover="aHover(1, true)" onmouseout="aHover(1,false)">
        <div class="top"></div>
        <div class="mid">
          <div id="i1" class="icon"></div><div id="l1" class="label"></div>
        </div>
        <div class="bottom"></div>
      </div>
      <div id="ac1" class="aContent">
        <div class="aContentLeft">
          <div class="aContentTop"></div>
          <div id="acmid11" class="aContentMid"></div>
          <div class="aContentBottom"></div>
        </div>
        <div  id="acmenu1" class="aContentMidWrapVNav">
          <div class="aContentTop"></div>
          <div class="aContentMid"><div></div></div>
          <div class="aContentBottom"></div>
        </div>
        <div id="acmid1" class="aContentMidWrap">
          <div class="aContentTop"></div>
          <div id="acmid12" class="aContentMid">
            <div class="aContentMidSub" ></div>
            <div id="acmid1sub1" class="aContentMidSub">
              <div id="home">
                <h1>UW iGEM Wiki</h1>
                <div class="aContentText">
                  Superbugs, or antibiotic resistant microorganisms, are microbes that have become resistant to traditional treatments. These types of infections are difficult to diagnose, treat, and eradicate, making the healing process time consuming and resource intensive. The native quorum-sensing unit from S.aureus (the Agr system), will be introduced into a non-pathogenic strain of E.coli. The E.coli will then effectively have the ability to eavesdrop on the activity of the pathogenic organism and emit an indication of the magnitude of the infection in the form of RFP. Using sensitivity tuners the system can be designed such that the response will occur at an exact level, when the size of the population poses a threat to the host. Upon a positive result from a diagnosis, further tests could be done to specify whether MRSA (methicillin-resistant S. aureus) or MSSA (Methicillin-sensitive S. aureus) are present.
                </div>
              </div>
            </div>
          </div>
          <div class="aContentBottom"></div>
        </div>
        <div class="aContentRight">
          <div class="aContentTop"></div>
          <div id="acmid13" class="aContentMid"></div>
          <div class="aContentBottom"></div>
        </div>
      </div>
      <div id="ah2" class="aHeader" onclick="aSelect(2)" onmouseover="aHover(2, true)" onmouseout="aHover(2,false)">
        <div class="top"></div>
        <div class="mid"><div id="i2" class="icon"></div><div id="l2" class="label"></div></div>
        <div class="bottom"></div>
      </div>
      <div id="ac2" class="aContent">
        <div class="aContentLeftVNav">
          <div class="aContentTop"></div>
          <div id="acmid21" class="aContentMid"></div>
          <div class="aContentBottom"></div>
        </div>
        <div id="acmenu2" class="aContentMidWrapVNav">
          <div class="aContentTop"></div>
          <div  class="aContentMid">
            <div class="aContentMenuOption" ></div>
            <div class="aContentMenuOption" onmouseover="aContentMenuHover(1,true)" onmouseout="aContentMenuHover(1,false)" onmousedown="aContentMenuSelect(1)">Project</div>
            <div class="aContentMenuOption" onmouseover="aContentMenuHover(2,true)" onmouseout="aContentMenuHover(2,false)" onmousedown="aContentMenuSelect(2)">Modeling</div>
            <div class="aContentMenuOption" onmouseover="aContentMenuHover(3,true)" onmouseout="aContentMenuHover(3,false)" onmousedown="aContentMenuSelect(3)">Software</div>
            <div class="aContentMenuOption" onmouseover="aContentMenuHover(4,true)" onmouseout="aContentMenuHover(4,false)" onmousedown="aContentMenuSelect(4)">Human<br />Practices</div>
          </div>
          <div class="aContentBottom"></div>
        </div>
        <div id="acmid2" class="aContentMidWrap">
          <div class="aContentTop"></div>
          <div id="acmid22" class="aContentMid">
            <div class="aContentMidSub"></div>
            <div id="acmid2sub1" class="aContentMidSub"></div>
            <div id="acmid2sub2" class="aContentMidSub"></div>
            <div id="acmid2sub3" class="aContentMidSub"></div>
            <div id="acmid2sub4" class="aContentMidSub"></div>            
          </div>
          <div class="aContentBottom"></div>
        </div>
        <div class="aContentRight">
          <div class="aContentTop"></div>
          <div id="acmid23" class="aContentMid"></div>
          <div class="aContentBottom"></div>
        </div>
      </div>
      <div id="ah3" class="aHeader" onclick="aSelect(3)" onmouseover="aHover(3, true)" onmouseout="aHover(3,false)">
        <div class="top"></div>
        <div class="mid"><div id="i3" class="icon"></div><div id="l3" class="label"></div></div>
        <div class="bottom"></div>
      </div>
      <div id="ac3" class="aContent">
        <div class="aContentLeftVNav">
          <div class="aContentTop"></div>
          <div id="acmid31" class="aContentMid"></div>
          <div class="aContentBottom"></div>
        </div>
        <div id="acmenu3" class="aContentMidWrapVNav">
          <div class="aContentTop"></div>
          <div class="aContentMid">       
            <div class="aContentMenuOption" ></div>
            <div class="aContentMenuOption" onmouseover="aContentMenuHover(1,true)" onmouseout="aContentMenuHover(1,false)" onmousedown="aContentMenuSelect(1)">Members</div>
            <div class="aContentMenuOption" onmouseover="aContentMenuHover(2,true)" onmouseout="aContentMenuHover(2,false)" onmousedown="aContentMenuSelect(2)">Staff</div>
            <div class="aContentMenuOption" onmouseover="aContentMenuHover(3,true)" onmouseout="aContentMenuHover(3,false)" onmousedown="aContentMenuSelect(3)">About UW</div>
          </div>
          <div class="aContentBottom"></div>
        </div>
        <div id="acmid3" class="aContentMidWrap">
          <div class="aContentTop"></div>
          <div id="acmid32" class="aContentMid">
            <div class="aContentMidSub"></div>
            <div id="acmid3sub1" class="aContentMidSub"></div>
            <div id="acmid3sub2" class="aContentMidSub"></div>
            <div id="acmid3sub3" class="aContentMidSub"></div>
          </div>
          <div class="aContentBottom"></div>
        </div>
        <div class="aContentRight">
          <div class="aContentTop"></div>
          <div id="acmid33" class="aContentMid"></div>
          <div class="aContentBottom"></div>
        </div>
      </div>
      <div id="ah4" class="aHeader" onclick="aSelect(4)" onmouseover="aHover(4, true)" onmouseout="aHover(4,false)">
        <div class="top"></div>
        <div class="mid"><div id="i4" class="icon"></div><div id="l4" class="label"></div></div>
        <div class="bottom"></div>
      </div>
      <div id="ac4" class="aContent">
        <div class="aContentLeftVNav">
          <div class="aContentTop"></div>
          <div id="acmid41" class="aContentMid"></div>
          <div class="aContentBottom"></div>
        </div>
        <div id="acmenu4" class="aContentMidWrapVNav">
          <div class="aContentTop"></div>
          <div class="aContentMid">
            <div class="aContentMenuOption" ></div>
            <div class="aContentMenuOption" onmouseover="aContentMenuHover(1,true)" onmouseout="aContentMenuHover(1,false)" onmousedown="aContentMenuSelect(1)">Parts List</div>
            <div class="aContentMenuOption" onmouseover="aContentMenuHover(2,true)" onmouseout="aContentMenuHover(2,false)" onmousedown="aContentMenuSelect(2)">Characterization</div>      
          </div>
          <div class="aContentBottom"></div>
        </div>
        <div id="acmid4" class="aContentMidWrap">
          <div class="aContentTop"></div>
          <div id="acmid42" class="aContentMid">
            <div class="aContentMidSub"></div>
            <div id="acmid4sub1" class="aContentMidSub">1</div>
            <div id="acmid4sub2" class="aContentMidSub">2</div>
          </div>
          <div class="aContentBottom"></div>
        </div>
        <div class="aContentRight">
          <div class="aContentTop"></div>
          <div id="acmid43" class="aContentMid"></div>
          <div class="aContentBottom"></div>
        </div>
      </div>
      <div id="ah5" class="aHeader" onclick="aSelect(5)" onmouseover="aHover(5, true)" onmouseout="aHover(5,false)">
        <div class="top"></div>
        <div class="mid"><div id="i5" class="icon"></div><div id="l5" class="label"></div></div>
        <div class="bottom"></div>
      </div>
      <div id="ac5" class="aContent">
        <div class="aContentLeftVNav">
          <div class="aContentTop"></div>
          <div id="acmid51" class="aContentMid"></div>
          <div class="aContentBottom"></div>
        </div>
        <div id="acmenu5" class="aContentMidWrapVNav">
          <div class="aContentTop"></div>
          <div class="aContentMid">
              <div class="aContentMenuOption" ></div>
              <div class="aContentMenuOption" onmouseover="aContentMenuHover(1,true)" onmouseout="aContentMenuHover(1,false)" onmousedown="aContentMenuSelect(1)">Notes</div>
              <div class="aContentMenuOption" onmouseover="aContentMenuHover(2,true)" onmouseout="aContentMenuHover(2,false)" onmousedown="aContentMenuSelect(2)">Misc</div>
          </div>
          <div class="aContentBottom"></div>
        </div>
        <div id="acmid5" class="aContentMidWrap">
          <div class="aContentTop"></div>
          <div id="acmid52" class="aContentMid">
            <div class="aContentMidSub"></div>
            <div id="acmid5sub1" class="aContentMidSub"></div>
            <div id="acmid5sub2" class="aContentMidSub"></div>            
          </div>
          <div class="aContentBottom"></div>
        </div>
        <div class="aContentRight">
          <div class="aContentTop"></div>
          <div id="acmid53" class="aContentMid"></div>
          <div class="aContentBottom"></div>
        </div>
      </div>

</div>
<div id="uwfooter"></div>

<script type="text/javascript">
/**
 * Code by Jon Eubank - joneubank@gmail.com - Oct 27, '010
 * For use by UWaterloo iGEM team 2010.
 */

/* *** Variables *** */

//Note: a = short for accordion
var mainContent;
var aContent = [];
var aContentMenu = [];
var aContentMenuWrap = [];
var aContentMenuOptions = [];
var aContentOptions = [];
var aMid = [];
var aHeader = [];
var aHeaderWrap = [];
var aSelected;
var aLength;
var aContentMenuSelected = []; 

var slideInterval = [];

/* *** Invariables! *** */
//by invariable I mean these are as close to constants as we get in js, set these once then leave them be.
var aHeaderWidth = 42;
var aContentMenuWidth = [0, 0, 125, 110, 170, 110];//first 0 is placeholder, then home-project-team-parts-notes
var aContentBorderWidth = 7;

//banner heights follow, match them to the CSS stylesheet, important for window resize 
var topSpace = 85;
var bottomSpace = 45;

//for animation:
var t=15; //interval call rate (in ms)
var slideSpeed=4.5; //divisor for slideTab movement... lower means faster!

/* *** Initialization Code *** */

function init(accordionLength){
  
  mainContent = document.getElementById("accordion");
  aLength = accordionLength;
  
  
  for(j=1;j<=aLength;j++){
    
    aContent[j] = document.getElementById("ac"+j);
    
    var tempNode = document.getElementById("ah"+j);
    aHeader[j]=tempNode.getElementsByTagName('div');
    aHeaderWrap[j]=tempNode;
    aMid[j] = [];
    aMid[j][0] = document.getElementById("acmid"+j);
    
    for (k=1;k<=3;k++){
      aMid[j][k] = document.getElementById("acmid"+j+k);//poor code, fix if you get a chance - there are only ids of acmid+j+2, 1 and 3 have been removed... really there should be a much better identifier
    }
    
    aContentMenu[j] = [];
    aContentMenu[j] = document.getElementById("acmenu"+j).getElementsByTagName('div');
    aContentMenuWrap[j] = document.getElementById("acmenu"+j);

    //fetch content menu options
    aContentMenuOptions[j]=[];
    aContentMenuOptions[j] = aContentMenu[j][1].getElementsByTagName('div');
    aContentOptions[j]=[];
    aContentOptions[j] = aMid[j][2].getElementsByTagName('div');
    aContentOptions[j][1].style.display = "inline";
    
    //Next few lines are to force initialization for content in every tab through aContentMenuSelect
    aSelected = j;//setting aSelected as something makes it pass the checks in aSelect when called after this block
    aContentMenuSelected[aSelected] = 1;
    if (aContentMenuOptions[aSelected].length > 1) {
      aContentMenuOptions[aSelected][aContentMenuSelected[aSelected]].className = "aContentMenuOptionSelected";
    }
  }
  
  aSelect(1);//Open to home tab
  
  //fit to screen
  windowResize();
  
  //set doc to autoresize with the window
  window.onresize=new Function('windowResize()');
}

/* *** Event Handling Function(s) *** */

function windowResize(){

  var mainHeight = window.innerHeight - topSpace - bottomSpace;
  
  //resize heights of mainContent, each mid div, each aContent
  mainContent.style.height = mainHeight + "px";
  for (j = 1; j <= aLength; j++) {
    aHeader[j][1].style.height = (mainHeight - 24) + "px";
    aContent[j].style.height = (mainHeight) + "px";
    aMid[j][2].style.overflow = "auto";
    var newHeight = (mainHeight - aContentBorderWidth*2) + "px";
    aMid[j][1].style.height = newHeight;
    aMid[j][2].style.height = newHeight;
    aMid[j][3].style.height = newHeight;
    aContentMenu[j][1].style.height = newHeight;
  }
  
  //resize widths of open content tab's sub components
  var maxWidth = mainContent.offsetWidth;
  aContent[aSelected].style.width= (maxWidth-aLength*aHeaderWidth)+"px";
  aMid[aSelected][0].style.width = (aContent[aSelected].offsetWidth-aContentBorderWidth*2-aContentMenuWidth[aSelected])+"px";
  
  //this line sets the content of each tab to a set width based on the window size (the content stays hidden because aMidSelected[0] for the non active tabs is 0px;
  for (j = 1; j <= aLength; j++){
    aMid[j][2].style.width = (maxWidth - aContentBorderWidth*2 -aContentMenuWidth[j]-aLength*aHeaderWidth) + "px";
  }
  //set vertical sub nav width to that specified in the invariables
  aContentMenu[aSelected][1].style.width = aContentMenuWidth[aSelected];
  aContentMenuWrap[aSelected].style.width = aContentMenuWidth[aSelected];
}


/* *** Functions *** */

//to be called when a tab is selected:
//sets intervals to open new tab and close old tab, changes class names to cause selected colours
function aSelect(index){
  if(aSelected!=index){
    if(aSelected){
      if (slideInterval[aSelected]) {
        clearInterval(slideInterval[aSelected]);
      }
      var temp = aSelected;
      slideInterval[temp] = setInterval(function(){slideTab(temp,-1)},t);
      aHeader[aSelected][0].parentNode.className = "aHeader";
      aMid[aSelected][2].style.overflow = "hidden";
    }
    
    aSelected = index;
    aHeader[aSelected][0].parentNode.className = "aHeaderSelected";
    scrollHeight = 0;
    if(aContent[aSelected].childNodes[1]){
      aContent[aSelected].childNodes[1].style.margin = scrollHeight + "px 0px 0px 0px";
    }
    if (slideInterval[aSelected]) {
      clearInterval(slideInterval[aSelected]);
    }
    var temp2 = aSelected;
    slideInterval[temp2] = setInterval(function(){slideTab(temp2,1)},t);
  }
}

//tab opening and closing, animated.
function slideTab(tab, direction){
  var maxWidth = mainContent.offsetWidth-aLength*aHeaderWidth;
  var change;// =(maxWidth-aContent[tab].offsetWidth);
  
  if(direction<0){
    //change rate is a fraction of the remaining space, so fast at first, slow at end, round up so it is gauranteed to close at the end
    change = Math.ceil((aContent[tab].offsetWidth)/slideSpeed)*direction + aContent[tab].offsetWidth;
    if (change < aContentBorderWidth*2)change=0;
  }
  else {
    //purpose is to set the opening tab to the full size needed for the window, so that we don't see accidental blank space to the right of the accordion menu from resizing issues
    change = maxWidth;
    for(j=1;j<=aLength;j++){
      if (j != tab) {
        change -= aContent[j].offsetWidth;
      }
    }
  }
  //apply change to tab width
  aContent[tab].style.width = change + "px";
  
  //set the width of the content tab's sub div's
  //this if checks if the content tab is more narrow than the conent sub menu, 
  if (aContent[tab].offsetWidth < aContentMenuWidth[tab]) {
    var newWidth = (aContent[tab].offsetWidth - aContentBorderWidth * 2) + "px";
  //  aContentMenu[tab][1].style.width = newWidth;
  //  aContentMenu[tab][3].style.width = newWidth;
    aContentMenuWrap[tab].style.width = newWidth;
    aMid[tab][0].style.width = "0px";
  }
  else {
    aContentMenu[tab][1].style.width = aContentMenuWidth[tab] + "px";
    aContentMenuWrap[tab].style.width = aContentMenuWidth[tab] + "px";
    aMid[tab][0].style.width = (aContent[tab].offsetWidth - aContentBorderWidth * 2 - aContentMenuWidth[tab]) + "px";
  }

  
  
  //break conditions
if(direction >0){
  if (aContent[tab].offsetWidth >= maxWidth) {
    aContent[tab].style.width = maxWidth+ "px";
  //  aContentMenu[tab][1].style.width = aContentMenuWidth[tab] +"px";
    aContentMenuWrap[tab].style.width = aContentMenuWidth[tab] +"px";
    aMid[tab][2].style.overflow = "auto";
    clearInterval(slideInterval[tab]);
  }}else if (direction < 0){if(aContent[tab].offsetWidth <= 0){
    aContent[tab].style.width = 0 + "px";
    clearInterval(slideInterval[tab]);
    }}
}

//onmouseover and onmouseout events, called in HTML, change class names to apply hover colours
function aHover(index, hover){
  if (index != aSelected) {
    
    if (hover) {
      aHeader[index][0].parentNode.className = "aHeaderHover";
    }
    else {
      aHeader[index][0].parentNode.className = "aHeader";
    }
  }
}

function aContentMenuSelect(index){
  if (aContentMenuSelected[aSelected]) {
    if (aContentMenuSelected[aSelected] != index) {
      aContentMenuOptions[aSelected][aContentMenuSelected[aSelected]].className = "aContentMenuOption";
      aContentOptions[aSelected][aContentMenuSelected[aSelected]].style.display = "none";
    }
    
  }
  aContentMenuSelected[aSelected] = index;
  aContentMenuOptions[aSelected][aContentMenuSelected[aSelected]].className = "aContentMenuOptionSelected";
  aContentOptions[aSelected][aContentMenuSelected[aSelected]].style.display = "inline";
}

function aContentMenuHover(index, hover){
  if (index != aContentMenuSelected[aSelected]){
    if (hover) {
      aContentMenuOptions[aSelected][index].className = "aContentMenuOptionHover";
    }
    else {
      aContentMenuOptions[aSelected][index].className = "aContentMenuOption";
    }
  } 
}
    init();
</script>

</html>