function assignClassToBody(panelId){
	id = panelId.substr(2);
	body = $('body');
	body.removeAttr("class");
	body.addClass(id);         
}


function toggle(activeId){
	panels = $("div.tabs > div.panel");
	for (i=0; i<panels.length;i++){
		($(panels[i])).removeClass("active");
	}

  $('ul.tablist > li.selected').removeClass("selected");
	renderActive(activeId);
}


function renderActive(activeId){
	arr = activeId.split("#");
	realId = arr[arr.length - 1];

  $('ul.tablist > li > a[@href$="#' + realId + '"]').parent().addClass("selected");
	$('#' + realId).parent().addClass("active");	
	panelId = ($('#' + realId).parent().attr("id"));
	assignClassToBody(panelId);
}


$(document).ready(function(){

	$("div.tabs").addClass("on");
	tabs = $("ul.tablist > li > a");

	tabs.bind("click", function(){
	   toggle($(this).attr("href"));
	}); 
	
	renderActive($(tabs[0]).attr("href"));
	$("body").focus();
	
});