var lastActive = 'null'; 
var lastOpenDiv = 'null';

var clickedStep = 'null';

var hoverOn = false;
$(document).ready(function() { //jQuery: when document is done loading all text and images
	
	/* Hovering on a step */
	
	$(".step").hover(function(){
		if ($(this).attr("id")==clickedStep)
			return;
		$(this).toggleClass("mstep_hover");
		hoverOn = true;
	}, function(){
		if ($(this).attr("id")==clickedStep)
			return;
		$(this).toggleClass("mstep_hover");
		hoverOn = false;
	});

	/* Clicking on a step */
	$(".step").click(function() { //Click on Step
		var currID = $(this).attr("id"); //grab id
		if (clickedStep == currID) //already clicked
			return; 
		
		//remove highlight	
		$(this).toggleClass("mstep_hover");
	
		//change step background if active
		$(this).toggleClass("step_active");

		
		if (clickedStep!='null')
			$("#"+clickedStep).toggleClass("step_active");
		
		clickedStep = currID;
		
		displayStep(currID); //call displayStep with id of step
	
		if (isShowing("#intro")) //if initial content is showing
			hide("#intro"); //hide it

		//hide the subnav if you click on another step
		if (isShowing(".subnav"))
			hide(".subnav");
			
	});

	$("#getstarted").click(function(){ //display step 1 from intro page
		displayStep("step1");
	});

	
	/** Clicking on page title **/
	$("#page_title").click(function(){
		
		$("#"+clickedStep).toggleClass("step_active");
		
		//hide subnav if you click on "get started"
		hide(".subnav");
		
		//if user never clicked on any steps or if the intial content is still showing
		//if (lastActive=='null' || isShowing("#intro"))
		//	return; //do nothing
		
		//else, hide last active div			
		hide("#"+lastActive+"_r");
		//and show the initial content
		show("#intro");
		
		clickedStep = 'null';
		lastActive = 'null';
	});
	
	//open subnav if user clicks on step3 with slide
	$("#step3").click(function() {
		$(".subnav").show(300);
		if (clickedStep != $(this).attr("id"))
			$("#"+clickedStep).toggleClass("step_active");
	});
	
	//open substeps in main nav
	$(".indent").click(function() {
		var currID=$(this).attr("id");
		
		if (clickedStep == currID)
			return;
			
		$("#"+currID).toggleClass("step_active");
		$("#"+lastActive).toggleClass("step_active");
		clickedStep = currID;
		displayStep(currID);
		
	});

	$("#control-back").click(function() {
		(".eric").css("display", "block");
	});

  /* Open/close see more sections of a step */
	
	/* STEP 1 */
	hide("#profile");
	$(".open-example").click(function(){
		if (isHiding("#profile")){ 
	        show("#profile");
	    } else
	        hide("#profile");
	});


	/*** Show/Hide arrow under fold ***/
	//step1
	$("#oe_arrow1").click(function(){
	    var title = expand("#oe_arrow1");
	    $("#oe_arrow1").attr("title", title);
	});

	$("#oe_arrow_span1").click(function(){
	    var title = expand("#oe_arrow1");
	    $("#oe_arrow_span1").attr("title", title);
	});

	
});




	//Make a step visible, hide steps not active
function displayStep(currID){
	if (isShowing("#intro")) //if initial content is showing
   	hide("#intro"); //hide it

	//multiple steps, hide last step if clicking on new step
	if (lastActive!=currID) 
		hide("#"+lastActive+"_r");
		show("#"+currID+"_r"); //make the associated step info visible.
		lastActive=currID;
}

	/* hide step */
function hide(id){
		$(id).css("display", "none");
}
	/* show step */
function show(id){
		$(id).css("display", "block");
}

/* functions for show/hide sections */
function isHiding(id) {
	return $(id).css("display")=="none";
}

function isShowing(id){
	return $(id).css("display")=="block";
}