var cache = {};

function getHash(){
	var hash = window.location.hash;
	return hash.substring(1);
}
function showCat(response){
	$('#listArea').html(response);
}
$(function(){
	$('#activities ul').children().click(function(){
		var cat =  $(this).attr('id');
		var cat_name = $(this).text();
		
		// TOGGLE OFF
		if($(this).hasClass('on_'+cat)) {
			$('#activities ul').children().removeClass();
			cat = 'all';
			cat_name = 'All';
		} else {
			$('#activities ul').children().removeClass();
			$(this).addClass('on_'+cat);
		}
		// TOGGLE ON
		if(typeof(cache[cat]) !== 'string'){
			var html = '<div id="loading_bkg"></div>';
			html += '<div id="loading">';
			html += '<span class="title">'+cat_name+'</span> loading...<br />';
			html += '<img src="images/hiker_loading.gif" />';
			html += '</div>';
			$('#listArea').prepend(html);
			$('#loading').fadeIn();
			$.ajax({
				url: "app.php",
				type: "POST",
				data: "cat="+escape(cat)+"&title="+escape(cat_name),
				success: function(response){
					cache[cat] = response;
					showCat(response);
				}
			});
		}else{
			showCat(cache[cat]);
		}
		return false;
	});
	var cat = getHash();
	if(cat !== ''){
		$('#'+cat).trigger('click');
	}
	cache.all = $('#listArea').html();
});