function getElementsByClass(searchClass,node,tag) {
	var classElements = new Array();
	if ( node == null )
		node = document;
	if ( tag == null )
		tag = '*';
	var els = node.getElementsByTagName(tag);
	var elsLen = els.length;
	var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
	for (i = 0, j = 0; i < elsLen; i++) {
		if ( pattern.test(els[i].className) ) {
			classElements[j] = els[i];
			j++;
		}
	}
	return classElements;
}
function determineTabsWidth(){
	var main = document.getElementById('profilenav');
	var avatar = document.getElementById('profileavatar');
	var name = document.getElementById('profilename');
	var tabs = document.getElementById('profiletabs');
	var totalpadding = 25;
	var avatarMinWidth = 52;
	
	var mainWidth = main.offsetWidth != null ? main.offsetWidth : 0;
	var avatarWidth = (avatar.offsetWidth === null || avatar.offsetWidth < avatarMinWidth)  ? avatarMinWidth : avatar.offsetWidth;
	var nameWidth = name.offsetWidth != null ? name.offsetWidth : 0;
	
	return (mainWidth - avatarWidth - nameWidth - totalpadding) + "px";
}
function setTabsWidth(){
	var tabs = document.getElementById('profiletabs');
	var tabsWidth = determineTabsWidth();
	var newRowFlag = 0;// variable that flags a new variable
	// set #profiletabs to the correct width, hiding any extra tabs (overflow is set to 'hidden' in css doc)
	tabs.style.width = tabsWidth;
	// now make sure the last tab in the row ends graphically
	var allTabs = getElementsByClass('t', tabs);//all tabs
	var tempWidth = 0;
	for(i=0; i<allTabs.length; i++){
		
		// add to the total width of row variable
		tempWidth += allTabs[i].offsetWidth;
		
		
		if(i > 0){
			var divTarget = allTabs[i-1];
			var divTargetClass = divTarget.className;
		
		
			// if the current tab in the loop is the currently selected tab and it is the first in a NEW row, make it begin with the proper graphic
			if(divTargetClass == 'ctab t' && newRowFlag){
				var img = 'cur_L.png';
				var target = divTarget.getElementsByTagName('img');
				target[0].src = "/profile/images/tabs/"+img;
			}
		}
		
		// if the width of all the current tabs make a new row, make the last tab of the previous row end with the correct graphic
		if((tempWidth + 14) > parseInt(tabsWidth)){
			
			var tempMargin = parseInt(tabsWidth)-(tempWidth-allTabs[i].offsetWidth + 14);
			
			divTarget.style.margin = "0px "+tempMargin+"px 23px 0px";
			
			//determine is the current ending tab graphic or the regular ending tab graphic should be displayed
			if(divTargetClass == 'ctab t'){// is the current tab
				var img = 'cur_Last.png';
				
				// now make sure that the next tab has the correct starting, and non current, graphic (img_next)
				var img_next = 'tab_L.png';
				var divTargetNext = allTabs[i];
				var targetNext = divTargetNext.getElementsByTagName('img');
				targetNext[0].src = "/profile/images/tabs/"+img_next;
				
			} else {
				var img = 'tab_Last.png';
			}
			
			// if user's browser is IE 5 or IE 6, user the MS filter property to display the transparent png
			if(document.browserType != 'IE'){ // not IE
				var target = divTarget.getElementsByTagName('img'); // all the images in divTarget (array)
				target[1].src = "/profile/images/tabs/"+img;// replace with ending graphic
				target[1].style.width = 25+"px";// ending graphic is 25px wide
			} else { // IE
				var target = document.getElementById('pic'+(i-1));
				target.innerHTML = '<img src="/profile/images/tabs/spacer.png" style="width:25px; height:27px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'/profile/images/tabs/'+img+'\', sizingMethod=\'scale\');" alt="">';
			}
			
			// display the #moretabs div (prev and next buttons)
			document.getElementById('moretabs').style.display = 'block';
			// set more tabs graphic in background
			document.getElementById('profiletabs_bkgd').style.background = 'url(/profile/images/tabs/tabs_backrow.jpg) no-repeat';
			// increment the total number of tab rows
			document.tabRowsNum++;
			// flag a new row
			newRowFlag = 1;
			// reset tempWidth variable to offsetWidth of current tab since it's already "passed" in the loop
			tempWidth = allTabs[i].offsetWidth;
			
		} else {
			newRowFlag = 0;
		}
		
		// if the current tab is in the current row in the loop, set the current tab row variable (document.curTabRow)
		if(document.curTab == i){
			document.curTabRow = document.tabRowsNum;
		}
		
	}
	// jump to current row
	setCurrentTabRow();
}

function setCurrentTabRow(){
	var tabs = document.getElementById('profiletabs');
	var tabY = parseInt(tabs.style.top);
	var tempY = tabY - (50 * document.curTabRow);
	tabs.style.top = tempY+"px";
	determineBtnDisplay();
}
function nextTabs(){
	var tabs = document.getElementById('profiletabs');
	var tabY = parseInt(tabs.style.top);
	var tempY = tabY - 50;
	tabs.style.top = tempY+"px";
	document.curTabRow++;
	determineBtnDisplay();
}
function prevTabs(){
	var tabs = document.getElementById('profiletabs');
	var tabY = parseInt(tabs.style.top);
	var tempY = tabY + 50;
	tabs.style.top = tempY+"px";
	document.curTabRow--;
	determineBtnDisplay();
}
function determineBtnDisplay(){
	// #nextBtn
	if(document.curTabRow == document.tabRowsNum){
		document.getElementById('nextBtn').style.display = 'none';
		document.getElementById('prevBtn').style.margin = '0px 23px 0px 0px';
	} else {
		document.getElementById('nextBtn').style.display = 'block';
		document.getElementById('prevBtn').style.margin = '0px';
	}
	// #prevBtn
	if(document.curTabRow == 0){
		document.getElementById('prevBtn').style.display = 'none';
	} else {
		document.getElementById('prevBtn').style.display = 'block';
	}
}
function tabs_init(){
	setTabsWidth();	
}