var hash_delay = 100;
var hash_timer = 0;
var last_hash = "";

var fade_to_full = 10; //fading out the small column to show the full column
var hover_expand = 1000;
var hover_fade = 100;

var valid_hashes = ["services", "work", "who_we_are", "contact", "blog"];
var hovered_hash = [0, 0, 0, 0, 0];
var current_hash_index = -1;
var update_hover = true;

$(document).ready(function(){
	hash_timer = setInterval("hash_update()", hash_delay);
	
	$("#tab1").click(function() { if (current_hash_index != 0) location.href = "#services";	});
	$("#tab2").click(function() { if (current_hash_index != 1) location.href = "#work";	});
	$("#tab3").click(function() { if (current_hash_index != 2) location.href = "#who_we_are";	});
	$("#tab4").click(function() { if (current_hash_index != 3) location.href = "#contact";	});
	$("#tab5").click(function() { if (current_hash_index != 4) location.href = "#blog";	});
	
	$("#tab1").hover( column_hover_on, column_hover_off );
	$("#tab2").hover( column_hover_on, column_hover_off );
	$("#tab3").hover( column_hover_on, column_hover_off );
	$("#tab4").hover( column_hover_on, column_hover_off );
	$("#tab5").hover( column_hover_on, column_hover_off );
});

function column_hover_on() {
	var column_id = $(this).attr('id');
	var index = parseInt(column_id.substr(column_id.length - 1, 1)) - 1;
	
	hovered_hash[index] = 1;
	update_hover = true;
}
function column_hover_off() {
	var column_id = $(this).attr('id');
	var index = parseInt(column_id.substr(column_id.length - 1, 1)) - 1;
	
	hovered_hash[index] = 0;
	update_hover = true;
}

function hash_update() {
	var hash = location.hash;
	if (hash != last_hash && hash != "#cf_field_1" && hash != "#cf_field_2" && hash != "#cf_field_3" && hash != "#cf_field_4") {
		last_hash = hash;
		
		if (hash.length > 1) {
			hash = hash.substr(1);
		} 
		
		process_hash(hash);
		update_hover = true;
	}
	
	if (update_hover) {
		processHover();
	}
}


function process_hash(hash) {
	var current_x = 0;
	
	current_hash_index = -1;
	
	var parts = hash.split("|");
	
	hash = parts[0];
	
	var extra = "";
	if (parts.length > 1) {
		extra = parts[1];
	}
	
	if (hash == "services")
		current_hash_index = 0;
	else if (hash == "work")
		current_hash_index = 1;
	else if (hash == "who_we_are")
		current_hash_index = 2;
	else if (hash == "contact")
		current_hash_index = 3;
	else if (hash == "blog")
		current_hash_index = 4;
	
		
	hovered_hash = [0, 0, 0, 0, 0];
	
	update_content(extra);

	menu_update();
}


function processHover() {
	
	var column_widths = [8, 8, 8, 8, 8];
	var hovered_index = -1;
	
	for(i=0; i<hovered_hash.length; i++) {
		if (hovered_hash[i] == 1) {
			hovered_index = i;	
		}
	}

	if (current_hash_index > -1) {
		column_widths[current_hash_index] = 68;
		if (hovered_index > -1) {
			column_widths[hovered_index] += 4;
			column_widths[current_hash_index] -= 4;
		}
	} else {
		column_widths = [20,20,20,20,20];
		if (hovered_index > -1) {
			for(i=0; i<5; i++) {
				if (i == hovered_index) {
					column_widths[i] += 1;
				} else {
					column_widths[i] -= 0.25;
				}
			}
		}				
	}

	var current_x = 0;
	for(i=0; i<5; i++) {
		$("#tab" + (i + 1)).stop();
		
		var new_width = (column_widths[i] + "%");
		var new_left = (current_x + "%");	
		$("#tab" + (i + 1)).animate({width: new_width, left: new_left}, hover_expand, "easeOutBack");
		
		current_x += column_widths[i];
		
		
		if (i != current_hash_index) {
			if (i == hovered_index) {
				$("#t" + (i + 1) + "i2").show();
				$("#t" + (i + 1) + "i3").stop();
				$("#t" + (i + 1) + "i3").animate({ opacity: 0 }, hover_fade);
				$("#link" + (i + 1)).fadeIn();
			} else {
				$("#t" + (i + 1) + "i3").stop();
				$("#t" + (i + 1) + "i3").show();
				$("#t" + (i + 1) + "i3").animate({ opacity: 1 }, hover_fade);
				if (current_hash_index == -1) {
					$("#link" + (i + 1)).fadeIn();
				} else {
					$("#link" + (i + 1)).fadeOut();
				}
			}
		} else {
			$("#t" + (i + 1) + "i1").show();
			$("#t" + (i + 1) + "i3").hide();
			$("#t" + (i + 1) + "i2").fadeOut(fade_to_full);
			$("#link" + (i + 1)).fadeOut();
		}
	}
	
	update_hover = false;
}


function update_content(extra) {
		
	if (current_hash_index == 0) {
		$("#services").hide();
		$("#services").load('/services/' + extra, null, function() { $("#services").fadeIn(); });
	} else {
		$("#services").hide();
	}
	
	if (current_hash_index == 1) {
		$("#work").hide();
		$("#work").load('/work/' + extra, null, function() { $("#work").fadeIn(); });
	} else {
		$("#work").hide();
	}
	
	if (current_hash_index == 2) {
		$("#who_we_are").hide();
		$("#who_we_are").load('/who-we-are/' + extra, null, function() { $("#who_we_are").fadeIn(); });
	} else {
		$("#who_we_are").hide();
	}
	
	if (current_hash_index == 3) {
		$("#contact").hide();
		$("#contact").load('/contact/' + extra, null, function() { $("#contact").fadeIn(); });
	} else {
		$("#contact").hide();
	}
	
	if (current_hash_index == 4) {
		$("#blog").hide();
		if (extra.length == 0) {
			$("#blog").load('/blog/', null, function() { $("#blog").fadeIn(); });
		} else {
			$("#blog").load('/?' + extra, null, function() { $("#blog").fadeIn(); });
		}
	} else {
		$("#blog").hide();
	}
	
	
}