// you must have a container div with the 'tabs' and 'tabContent' divs to use
// each spanTab and divConent must have a unique id
// call createTabs(divName)
// tabSelected class on span indicates selected tab, default first
//
//	<div id='divName'>
//		<div id='tabs'>
//			<span id="tab1">Most Popular Videos</span>
//			<span class="tabSelected" id="tab2">Most Popular Videos</span>
//		</div>
//		<div id="tabContent">
//			<div id="content1" class="tab_content">bleh</div>
//			<div id="content2" class="tab_content">bleh</div>
//		</div>
//	</div>

var mytabs = new Array();
var mycontent = new Array();
var tabsDiv = 'tabs';
var tabsContentDiv = 'tabContent';
var tabClass = 'tab';
var tabSelectedClass = 'tabSelected';

function createTabs(divName) {
	var selected = 0;
	$.each($('#' + divName + ' div#' + tabsDiv + ' span'), function(i, field) {
		mytabs[i] = ($(this).attr('id'));
		if ($(this).hasClass(tabSelectedClass)) {
			selected = i;
		}
		$(this).addClass(tabClass);
		// onclick function
		$(this).click(function() {
			selectTab(i);
		});
	});
	$.each($('#' + divName + ' div#' + tabsContentDiv).children(), function(i, field) {
		$(this).hide();
		mycontent[i] = ($(this).attr('id'));
	});
	
	selectTab(selected);
}

function selectTab(index) {
	// deselect
	for (var i = 0; i < mytabs.length; i++) {
		$('#' + mytabs[i]).removeClass(tabSelectedClass);
		$('#' + mytabs[i]).addClass(tabClass);
		$('#' + mycontent[i]).hide();
	}
	// select
	$('#' + mytabs[index]).addClass(tabSelectedClass);
	$('#' + mycontent[index]).show();
}

function addTab(tabName) {
	
}