Event.observe( window,'load', function(){
	divideTabs();
	showTab(0);
});

function showTabById(id) {
	tabs = $$(".tab_t");
	tabContents = $$(".tab_content");
	
	var object = $(id);
	if(!object) return;
	
	for(var i = 0; i < tabs.length; i += 1) {
		if(object == tabs[i])
			showTab(i);
	}
	for(var i = 0; i < tabContents.length; i += 1) {
		if(object == tabContents[i])
			showTab(i);
	}
}

function showTab(index) {
	tabs = $$(".tab_t");
	tabContents = $$(".tab_content");
	
	if(window.console && (index >= tabs.length || index >= tabContents.length)) {
		console.warn("index too high: %d", index);
		return;
	}
	
	tabContents.each(function(tabContent) {
		tabContent.hide();
	});
	tabs.each(function(tab) {
		tab.removeClassName("selected_t");
	});
	
	tabContents[index].show();
	tabs[index].addClassName("selected_t");
}

function divideTabs() {
	var tabWidths = [
		null,
		null,
		{width: "199px", left: ["0", "219px"]},
		{width: "126px", left: ["0", "147px", "294px"]},
		{width: "90px", left: ["0", "110px", "219px", "329px"]},
		{width: "72px", left: ["0", "92px", "163px", "255px", "346px"]}
	];
	
	tabs = $$(".tab_t");
	tabContents = $$(".tab_content");
	
	if(window.console && tabs.length != tabContents.length)
		console.warn("Found %d tabs and %d contents", tabs.length, tabContents.length);
	
	if(tabs.length < 2) {
		tab_selector = $("product_tabs");
		if(tab_selector) tab_selector.hide();
	} else if (tabs.length > tabWidths.length - 1) {
		console.warn("Too many tabs");
	} else {
		widthSet = tabWidths[tabs.length];
		for(var i = 0; i < tabs.length; i += 1) {
			tabs[i].style.left = widthSet.left[i];
			tabs[i].style.width = widthSet.width;
			// create an anonymous function that returns a function
			// to save "i" on each call
			// edit with caution if you don't have a CS degree
			Event.observe(tabs[i], 'click', function(j) {
				return function() {
					showTab(j);
				};
			}(i));			
		}
	}
}