// Some of the following variables can be changed depending on the specs you use
var speed = 500; // speed of the sliding animation
var subnavs = "";
var urlString = "";
var downArrow = "  <span>&#9660;</span>"; // this is the downward-pointing arrow next to each menu link
var upArrow = "  <span>&#9650;</span>"; // ditto for up, when the menu item is selected

$(document).ready(function(){

	var navLinks = $("li.menu>a.arrow");
	var navLinksActiveSpan = $("li.menu>a.active span");
	var dropDown = $("#submenu");
	
	// the loop below creates the string of classes each named after a submenu's id
	// these classes are used to identify which menu is currenly open

	for (var i = 0, j = navLinks.length; i < j; i++) {
		urlString = $(navLinks[i]).attr('id');
		subnavs = subnavs + " " + urlString;
	}
	
	var currHash = document.location.hash.replace("#","");
	var removeLoading = function() {
		dropDown.removeClass("loading"); // remove the "loading" graphic
	};
	var addLoading = function() {
		dropDown.addClass("loading"); // add the "loading" graphic
	};

	// this is the click handler that decides the primary open/close actions
	navLinks.click(function(){

		var clickedLink = $(this).attr('id');

		// drop-down is already opened
		if (dropDown.hasClass("open")) {
			
			// it's open, and the clicked menu item is the same as the open drop-down
			// so it closes
			if (dropDown.hasClass(clickedLink)){
				dropDown.removeClass("open");
				$(this).removeClass("active");

				$(this).html(downArrow);
				dropDown.removeClass(subnavs);
				dropDown.slideUp(speed, function() {
					addLoading();
					$("#active-tab").removeAttr("id");
					$("#nav").toggleClass('expanded');					
				});

			// if it's open, and the clicked item is different, keep it open
			// then load the new content
			} else {
				//navLinks.find("a.active").html(downArrow);
				$("li.menu>a.active").html(downArrow);

				// add the highlight to the main theme link
				$("a.active").parent("li").removeAttr("id", "");

				navLinks.removeClass("active");
				dropDown.removeClass(subnavs);
				dropDown.addClass(clickedLink);
				dropDown.html("");
				// load the dropdown with the appropriate submenu
				dropDown.html($('li#subnav-' + clickedLink).html());
				removeLoading();										   
				$(this).addClass("active");

				// add the highlight to the main theme link
				$(this).parent("li").attr("id", "active-tab");
				$(this).html(upArrow);
			}

		// drop-down is not already opened; add the right classes, open it, and load the content
		} else {

			dropDown.addClass("open");
			dropDown.removeClass(subnavs);
			dropDown.addClass(clickedLink);
			$(this).addClass("active");
			
			// add the highlight to the main theme link
			//$(this).siblings("a").addClass("active-theme");
			$(this).parent("li").attr("id", "active-tab");
			$("#nav").toggleClass('expanded');

			$(this).html(upArrow);

			dropDown.html("");								   
			dropDown.slideDown(speed, function() { 
				// load the dropdown with the appropriate submenu
				dropDown.html($('li#subnav-' + clickedLink).html());
				removeLoading();
			});
		}		
		return false;

	});	
});