window.onload = function() {
	tabs = $$('ul#t li a');
	
	// initialize our variables
	var totalWidth = 0;
	var tabList = new Array();
	var tabWidth = new Array();
	
	// set our constants for styling
	CONTAINER_WIDTH = 689;
	DEFAULT_PADDING = 11;
	DEFAULT_MARGIN = 6;
	
	if($("tabnav").hasClassName('buttons')) {
		$A(tabs).each(function buildButtons(tab) { 		 	
			tab.insert({top: '<div class="left"></div><div class="right"></div>'}); // add our empty divs for the curved borders
					
			myWidth = tab.getWidth() + DEFAULT_MARGIN; // get the width of the currrent tab, plus our margin		
	
			if(totalWidth + myWidth < CONTAINER_WIDTH) { // if we haven't filled the row yet, then just increment our tab arrays
				totalWidth += myWidth;
				tabList.push(tab); // add this tab to our running list
				tabWidth.push(myWidth - ((DEFAULT_PADDING * 2) + DEFAULT_MARGIN)); // keep track of the width sans-padding, so we can hard-set it later
			} else { // if the next tab would push us over the edge, then stop and resize what we have so far
				tabCount = tabList.length; // total number of tabs
				padTotal = CONTAINER_WIDTH - totalWidth;  // the total number of pixels we have to pad
				
				padNew = Math.floor(padTotal / tabCount);  // rounded down, how many pixels we have to add
				padRemainder = padTotal % tabCount; // the number of pixels left over
				
				padIndividual = Math.floor(padNew / 2) + DEFAULT_PADDING; // how much each half of the tab should be padded
				padCompoundRemainders = (padNew % 2) * tabCount; // how much is left over overall by rounding down
				
				padLeftover = padRemainder + padCompoundRemainders;  // the total number of leftover pixels, the last tab will receive these
				
				for(i = 0; i < tabList.length; i++) {  // for each tab
					if(i == (tabList.length - 1) && padLeftover > 0) {  // if we're the last tab, and there are leftovers
						if(padLeftover % 2) {  // if the leftover is odd
							leftPad = Math.floor(padLeftover / 2) + padIndividual; // figure out our left padding
							rightPad = Math.floor(padLeftover / 2) + padIndividual + 1;  // give the leftover to the right
							tabList[i].setStyle({ padding: "0 " + rightPad + "px 0 " + leftPad + "px" });  // set our styles
						} else {
							tabList[i].setStyle({ padding: "0 " + (padIndividual + (padLeftover / 2)) + "px" }); // if it's even, just pad each side evenly
						}
					} else {  // if we're not the last tab, OR if we are but there is no leftover
						tabList[i].setStyle({ padding: "0 " + padIndividual + "px" });  // pad each side evenly
					}
					tabList[i].setStyle({ width: tabWidth[i] + "px" });  // no matter what, set our width from our stored value, to make up for pixel subdivision errors cross-browser
				}
				
				// at this point, all the tabs in our current row have been padded
				tabList = []; // empty our list
				tabWidth = []; // empty our width list
				totalWidth = 0; // zero out our total width, we're starting a new row
				
				// we still have the tab that intially tipped us over the scales, so this will be the first tab of the next row
				myWidth = tab.getWidth() + DEFAULT_MARGIN; // set myWidth from the current tab
				totalWidth += myWidth; // start the total width off right
				tabList.push(tab); // put the tab that didn't make the cut at the beginning of the list
				tabWidth.push(myWidth - ((DEFAULT_PADDING * 2) + DEFAULT_MARGIN)); // put the tab width in there too
			}
			
			// automatically populate the container with our first tab's content
			if(tab.hasClassName('selected')) {  // if we're the current tab
				liveTab = tab.readAttribute('rel');  // get the name of the div we'll be retrieving
				source = $(liveTab).innerHTML; // get the content of that div
				$('target').innerHTML = source; // populate the target tab with the content
			}
			
			// attach a function to the click event on every tab
			tab.observe('click', function(event) {
				if(this.hasClassName('selected')) { // if the tab is selected
					Event.stop(event); // do nothing
				} else { // otherwise
					liveTab = this.readAttribute('rel'); // get the name of the div to reveal
					source = $(liveTab).innerHTML; // get the content from that div
					$('target').innerHTML = source; // replace the target div with this content
					$$('ul#t li a').each(function(tab) { if(tab.hasClassName('selected')) tab.removeClassName('selected'); });  // deselect the current tab
					this.addClassName('selected'); // make the tab you just clicked selected
					Event.stop(event); // stop the link from being followed in the browser
				}
			});
			
		});
	} else {
		$A(tabs).each(function buildTabs(tab){ 
			// add our empty divs for the curved borders
			tab.insert({top: '<div class="left"></div><div class="right"></div>'});
			
			// automatically populate the container with our first tab's content
			if(tab.hasClassName('selected')) {
				liveTab = tab.readAttribute('rel');
				source = $(liveTab).innerHTML;
				$('target').innerHTML = source;
			}
			
			// set up the onclick function that reveals new tabs, if it's selected, nothing happens
			tab.observe('click', function(event) {
				if(this.hasClassName('selected')) {
					Event.stop(event);
				} else {
					liveTab = this.readAttribute('rel');
					source = $(liveTab).innerHTML;
					$('target').innerHTML = source;
					$$('ul#t li a').each(function(tab) { if(tab.hasClassName('selected')) tab.removeClassName('selected'); });
					this.addClassName('selected');
					Event.stop(event);
				}
			});
		});
	}
	
	
}