// Author: Justin Perry
// Script uses JQuery BBQ plugin for history state capture/navigation http://benalman.com/projects/jquery-bbq-plugin/

$(document).ready(function(){
	
	var show_hide = "show",
		url = "index",
		intro = 0,
		img_src,
		$response,
		$nav = $("#nav"),
		$content_container = $("#content_main"),
		$feat_container = $("#feature_display"),
		$orig_feat_img = $("#feature_img"),
		$orig_title = $("#title"),
		$orig_content = $("#content"),
		$loader = $("<div id='loader'>Loading...</div>");
		
	function transition() {

		// Back to beginning
		if(intro === 0 && url === undefined){
			
			display_loader("show");
					
			// Remove original blocks and replace with newly loaded ones
			
			
			$("#logo")
				.delay(500)
				.fadeIn(1500);
				
			$("#nav")
				.delay(700)
				.fadeIn(1500);	
			
			//(arr, i, opacity_min, opacity_max, anim_speed, delay, callback){
			animate_paths(obj_arr[2], 0, 0, 1, 1000, 100, function () {
				
				$feat_container
				.find("#feature_img")
				.show();
				
				animate_paths(obj_arr[0], 0, 1, 0, 1000, 300); // Shapes
				
				display_content("show");
				display_loader("hide");
				
				intro = 1;
				
			}); 
			
				
		} else {
			
			display_content("hide");
			//if(url = "jet_portfolio"){display_nav("hide");}
			
			// Start shape animations - i.e. fade to black
			animate_paths(obj_arr[0], 0, 0, 1, 1000, 300, function () {
			
				display_loader("show");
				
				if(url === undefined){
				
					// Store
					$title = $orig_title;
					$content = $orig_content;
					$feat_img = $orig_feat_img;
					
					
										
					$content_container
						.find("#title, #content")
						.remove()
						.end()
						.append($title, $content);
					
					
					
					
					
					animate_paths(obj_arr[2], 0, 0, 1, 1000, 100, function () {
						
						display_content("show");
						//if(url = "jet_portfolio"){display_nav("show");}	
						
						animate_paths(obj_arr[0], 0, 1, 0, 1000, 300);
						
						// Remove original blocks and replace with newly loaded ones						
						$feat_container
						.find("#feature_img")
						.remove()
						.end()
						.append($feat_img)
						.find("#feature_img")
						.show();
									
										
						});  // Gridlines
					
					
					
				} else {
					
				$.get(url, function(data){
						
						// Set data to an object variable
						$response = $(data);
						
						// Set newloaded to an object variable	
						$img_src = $response.filter("#feature_img");
						$title = $response.filter("#title");
						$content = $response.filter("#content");
						$feat_img = $img_src;
						
						// Load image
						$img_src.load(function () {
							display_loader("hide");
							
						
							$content_container
								.find("#title, #content")
								.remove()
								.end()
								.append($title, $content);
								
								
							animate_paths(obj_arr[2], 0, 0, 1, 1000, 100, function () {
								
								display_content("show");	
								//if(url = "jet_portfolio"){display_nav("show");}
						
								animate_paths(obj_arr[0], 0, 1, 0, 1000, 300);
						
								$feat_container
								.find("#feature_img")
								.remove()
								.end()
								.append($feat_img)
								.find("#feature_img")
								.show();
																		
						
							});	
								
					
											
						}).error(function () {
						
						});
						
						
						
					}).error(function(xhr) {				
						
					})	
				}
				
			});
		}		
	}
	
	function display_loader(show_hide) {
		// Uncomment to display loader
	//$loader.animate({opacity: show_hide}, 1000);
	}
		
	function display_content(show_hide) {
		
		// Show content blocks 
		$("#section_main")
			.find("#title")
			.delay(0)
			.animate({opacity: show_hide}, 800)
			.end()
			.find("#content p")
			.delay(100)
			.animate({opacity: show_hide}, 1100)
			.end()
			.find("#content ul")
			.delay(100)
			.animate({opacity: show_hide}, 1100);
					
	}
	
	function display_nav(show_hide) {
			
		$("#section_main")
			.find("#nav")
			.delay(0)
			.animate({opacity: show_hide}, 800);
	}

	
	
	$(window).load(function () {
		
		$("#section_main").prepend($loader);
		
		// Initialise Raphael object and create paths
		//$feat_container.height(screen.height);
		initialise_raphael(2500, 1600);	
		create_paths(shapes,"#000000", "none", 1);
		create_paths(static_shapes,"#000000", "none", 1);
		create_paths(gridlines,"none", "#a7a9ac", 0);
		
		// Watch for hash change and start transition	
		$(window).bind( "hashchange", function(e) {
			url = $.bbq.getState( "url" );
			transition();
		});
		
		
		// Trigger history object
		$(window).trigger( "hashchange" );
		
		// Display intro once
		if(intro === 0){
			$("#logo")
				.delay(500)
				.fadeIn(1500);
			$("#nav")
				.delay(700)
				.fadeIn(1500);
		}
		
		// Bind Onlick to navigation
		$nav.find("a").click(function(){		
		
			// Get URL from href and append PHP fragment querystring notifier
			var href = $(this).attr("href") + "?fragment";
			
			// Push this URL "state" onto the history hash.
			$.bbq.pushState({ url: href });
			
	
  			$('#nav a').removeClass('static');
			$(this).addClass('static');
	

	
			
			// Prevent the default click behaviour.
			return false;
		});
		
		
	})
	
	
});