// That code snippet belongs to JotaPajaro Studios - http://jotapajaro.com/work

	$(document).ready(function(){
		var selected_work_id = "#work_details_1";
		var animating_work_show = false;
		if(window.location.hash){
			var selectedIndex = window.location.hash.substring(1);
			showWork(selectedIndex);
		}
		function setSelectable(){
			var selectedIndex = $('.numbers a').index($('.numbers a.selected'));
			if(selectedIndex == 0){
				$('.arrows a.left').removeClass("selectable");
			}else{
				$('.arrows a.left').addClass("selectable");				
			}
			if(selectedIndex == $('.numbers a').length - 1){
				$('.arrows a.right').removeClass("selectable");
			}else{
				$('.arrows a.right').addClass("selectable");				
			}
		}
		function showWork(at_index){
			$('.works_in_category a').removeClass("selected");
			$('.numbers a').removeClass("selected");
			$($('.works_in_category a')[at_index - 1]).addClass("selected");
			$($('.numbers a')[at_index - 1]).addClass("selected");
			
			var target_div_id = '#work_details_' + at_index;
			if(target_div_id != selected_work_id && !animating_work_show){
				animating_work_show = true;
				var previously_selected_work = selected_work_id;
				selected_work_id = target_div_id;
								
				$(previously_selected_work).addClass("fixed");
				$(previously_selected_work + " .responsibilities").hide();
				$(previously_selected_work + " .explanation").hide();
				$(previously_selected_work).fadeOut(2000, function(){
					$(previously_selected_work).removeClass("fixed");
					animating_work_show = false;
				});
				
				$(target_div_id + " .responsibilities").fadeIn(2000);
				$(target_div_id + " .explanation").fadeIn(2000);
				$(target_div_id).fadeIn(2000);
			}
			setSelectable();
		}
		$('.works_in_category a').click(function(event){
			var selectedIndex = this.href.split("#")[1];
			showWork(selectedIndex);
		});
		$('.numbers a').click(function(event){
			var selectedIndex = this.href.split("#")[1];
			showWork(selectedIndex);
		});
		$('.arrows a.left').click(function(event){
			var selectedIndex = $('.numbers a').index($('.numbers a.selected'));			
			event.preventDefault();
			$($('.numbers a')[selectedIndex - 1]).click();
			setSelectable();
		});
		$('.arrows a.right').click(function(event){
			var selectedIndex = $('.numbers a').index($('.numbers a.selected'));
			event.preventDefault();
			$($('.numbers a')[selectedIndex + 1]).click();
			setSelectable();
		});
	});