var activeSection;
var activeSectionLink;

function sectionListClick() {
	var id = $(this).attr("id");

	// stick this sub
	$(this).addClass("sectionListOver");
	$("#" + activeSectionLink).removeClass("sectionListOver");
	activeSectionLink = id;

	// fade out then in the new section
	activeSection.fadeOut("slow", 
		function() {
			loadSection($("#"+id+"_detail"));
		}
	);
}

function loadSection(section) {
	activeSection = section;
	activeSection.fadeIn("slow");
//	scrollTo(0,0);
}

function sectionListOver() {
	if($(this).attr("id") != activeSectionLink)
		$(this).addClass("sectionListOver");
}

function sectionListOut() {
	if($(this).attr("id") != activeSectionLink)
		$(this).removeClass("sectionListOver");
}



$(document).ready(function() {
	
	// section list functionality
	$("#sectionList ul li").hover(sectionListOver, sectionListOut);
	$("#sectionList ul li").click(sectionListClick);
	
	// hide all of the sections
	$("#sectionDetails div").css("display", "none", "position", "absolute", "top", "0px", "left", "0px");
	
	

	// find out if we are on a specific section or not
	var query = window.location.search.substring(1).split("&");
	var targetSection = "";
	for(var i=0; i<query.length; i++) {
		var prop = query[i].split("=");
		if(prop[0] == "id" && prop[1] != "") {
			targetSection = prop[1];
		}
	}
	
	// select the first section if we haven't set one
	if(targetSection == "") {
		targetSection = $("#sectionList ul li:first").attr("id");
	}
	
	
	// show the target section
	loadSection($("#"+targetSection+"_detail"));
	
	// let it be know what section we are on
	$("#" + targetSection).addClass("sectionListOver");
	activeSectionLink = targetSection;
	
});