// to get this script to function, you must have the same dom tree for the tabbed navigation.
// <ul class="ajax_tabs">
//    <li class="activeTab">
// 		 <a class="ajax_tab">

var j = jQuery.noConflict();
// use j(this) instead of $(this)
var umbrella_class_name = '.ajax_tabs';
var tab_class_name = '.ajax_tab';
var active_tab_name = 'activeTab';
var content_frame_class = 'tabbed_content';
var loading_content = '<div width="100%" height="200px" style="text-align:center;"><img style="margin-top: 100px;" src="/assets/ajax_loader.gif"/><br/><span class="loading_text">loading...</span></div>';

function add_tab_handlers() {

	var li = $$(tab_class_name);
	
	var item; 
	
	j(tab_class_name + ' a').click(function() {
			j(tab_class_name).removeClass(active_tab_name);
			j(this).parent('li').addClass(active_tab_name);
			
			ajax_request_tab(j(this).attr('href'));
			
			return false;
	});
	/* old prototype code
	for(var i = 0; item = li[i]; i++) {
		Event.observe(item.down('a'), 'click', function(e) {
			e.stop();
			var a = e.element();
			var li = a.up('li');
			li.up(umbrella_class_name).select('.activeTab').invoke('removeClassName', 'activeTab');
			li.addClassName(active_tab_name);
			
			ajax_request_tab(a);
			
			return false;
		})
	}
	*/
}

function ajax_request_tab(page) {
	new Ajax.Request('auxiliary/serve_tabs.php?p=' + page, {
		onSuccess: function(response) {
			fill_content(response);
			return false;
	  	}, 
		onFailure: function(response) {
	  		alert("There was a problem displaying the page: " + response);
		},
		onCreate: function(response) {
			$(content_frame_class).innerHTML = loading_content;
		}
	});
	return false;
}

function fill_content(data) {
	$(content_frame_class).innerHTML = data.responseText;
}

document.observe("dom:loaded", function() {
	add_tab_handlers();
});