var stateIds = ["about","archive","video"];
var defaultState = "video";
var navPrefix = "nav_";
var contentPrefix = "";

$(document).ready(function() {
	initStates();
});

function initStates() {
	// setup click events
	addClickEvents();
	// set default states
	updateStates(null);
}

function addClickEvents() {
	$(stateIds).each(function(key,value) {
		$("#nav li #" + navPrefix + value).click(function (){
			updateStates(value);
		});
	});
}

function isValidState(state) {
	valid = false;
	$(stateIds).each(function(key,value) {
		if(state==value){
			valid = state;
		}
	});
	return valid;
}

function getParentState(state) {
	var parentState = false;
	$(stateIds).each(function(key,value) {
		if(value==state.substring(1,state.indexOf("_"))){
			parentState = value;
		}
	});
	return parentState;
}

function updateStates(activeId) {
	//check if we're using the default active state
	if(activeId==null){
		//check if the current has is a state
		validState = isValidState(window.location.hash.substring(1,window.location.hash.length));
		if(validState!=false){
			activeId = validState;
		} else {
			//check if a valid state parente is set
			validParentState = getParentState(window.location.hash); 
			if(validParentState!=false) {
				activeId=validParentState;
			} else {
				activeId=defaultState;
			}
		}
	}
	// update the states
	$(stateIds).each(function(key,value) {
		if(value==activeId){
			// update nav
			$("#nav li #" + navPrefix + value ).removeClass('inactive');
			// update content
			$("#content #" + value ).removeClass('inactive');
		} else {
			// update nav
			$("#nav li #" + navPrefix + value ).addClass('inactive');
			// update content
			$("#content #" + value ).addClass('inactive');
		}
	});
	
	//update layout based on state
	updateLayoutOnStateChange(activeId);
}