/* Author: Charles Elwonger
*/


$(document).ready(function(){
	
	/* 
	Nav & Dynamic loading =============================================================
	*/
	
	//go ahead and add in loading div to load in the background loading image
	$('<div id="loading"></div>').appendTo('header').hide();
	
	// set up header
	$('header').css('height', '180px');
	$('header h1').css({'font-size': '60px', 'padding-top': '80px'});
	$('#contact').css('top', '-5px');
	
	//reference http://css-tricks.com/dynamic-page-replacing-content/
	var newHash      = "",
		slide_up_speed = 0; /* slide_up_speed will adjust animation between home page and other page transitions*/
	boolean = has_viewed_a_page = false;

	$("nav").delegate("a", "click", function() {
		window.location.hash = $(this).attr("href");
		return false;
	});

	$(window).bind('hashchange', function(){

		newHash = window.location.hash.substring(1);

		if (newHash) {
			$("nav a").removeClass("current");
			$("nav a[href="+newHash+"]").addClass("current");
			$('#loading').fadeIn('fast');
			$("nav").animate({'margin-bottom':'99px'},slide_up_speed); /* correction for wave animation part 2, same speed as #main.slideUp */
			$("#main")				
				.slideUp(slide_up_speed, function() {
					if(has_viewed_a_page == false)
					{
						has_viewed_a_page = true;
						slide_up_speed = 300;
						$('header').removeClass('header_home').animate({'height' : '60'}, 'fast', 'swing');
						$('header h1').animate({'font-size': '28px', 'padding-top': '20px'}, 'fast');
						$('#contact').animate({'top': '-100px'}, 'fast');
						$('#main_info').html('<a class="info_box_link" href="mailto:charles@charles-e.com?subject=Hello,%20Charles!"><span class="name">Charles Elwonger</span><span class="desc">Web Design, game development, art &amp;c.</span><span class="email">email</span></a>');
					}
					$("#main").hide().load(newHash + " #div_to_load", function() {
						$("nav").animate({'margin-bottom':'0'},500); /* correction for wave animation part 2, same speed as #main.slideDown */
						$("#main")
							.slideDown(500, 'swing', function(){
								$('#loading').fadeOut('fast');
							})
						if( 'h2:contains("Web, Graphic &amp; Logo Design")' ){ activateWebPanel(); } // !!! Active web panel script, must be done after the content is loaded
						if( $('div').hasClass('colorbox')){ $("a[rel='2d']").colorbox({maxWidth:'100%', maxHeight:'100%'}); } // !!! activate the colorbox script if the page has a div with "colorbox" class
					});
				});
		};

	});

	$(window).trigger('hashchange');
	
	
	/*
	Web Panels =====================================================
	*/
	
	// set as a var to easily activate this script when navigating to the design page (or, for the moment, on any page :|
	var activateWebPanel = function(){
	
		var link_count = 0; // used to move the current indicator into position
		boolean = has_seen = false; // mark as 'unseen' every time this page is initially loaded
		
		// append the current indicator but hide it under the overflow at page load
		$('<div id="panel_current_indicator"></div>').css({
			'left' : '-50px'
		}).appendTo('#web_panel_thumbnails');
		
		// CLick on a project thumbnail
		$('#web_panel_thumbnails a').click(function(){
		
			var update_panel = function(){
				$('#panel_label_to_load').stop().fadeOut(350, function(){
					$('#panel_label').load(title_to_load, function(){
						$('#panel_label_to_load').stop().hide().fadeIn(350);
					});
				});
				$('#panel_screens_to_load').stop().fadeOut(350, function(){
					$('#panel_screens').load(panel_to_load, function(){
						$('#panel_screens_to_load').stop().hide().fadeIn(350);
					});
				});
				$('#panel_description_to_load').stop().animate({'opacity':'0'},'fast').slideUp(350, function(){
					$('#panel_description').load(description_to_load, function(){
						$('#panel_description_to_load').stop().hide().slideDown(350);
					});
				});
			}
			
			if($(this).parent().hasClass('panel_current')) // only give a little 'error animation' if you're clicking on the currently viewed project
			{
				$('#panel_current_indicator')
					.animate({'bottom' : '-15'}, {duration: 50, easing: 'swing', queue: 'false'}).animate({'bottom' : '0'}, {duration: 100, easing: 'swing', queue: 'false'});
			}
			
			else { // if you're actually clicking on a different project, do this
				var panel_to_load = $(this).attr('href') + ' #panel_screens_to_load',
					title_to_load = $(this).attr('href') + ' #panel_label_to_load',
					description_to_load = $(this).attr('href') + ' #panel_description_to_load';
				
				if( has_seen == false) // Do all of this the first time you select a project to view
				{
					has_seen = true;
					$('<div id="panel_screens"><div id="panel_screens_to_load"></div></div><div id="panel_description"><div id="panel_description_to_load"></div></div>').appendTo('#div_to_load');
					$('#panel_screens').hide().slideDown('slow');	
					$('html, body').animate({scrollTop: '140px'}, 'slow');
					$('#to_top')
						.css('left', '-65px')
						.animate({
							'opacity' : '.3',
							'top' : '660px'
						}, 'slow');
				}
				
				$('#web_panel_thumbnails li').removeClass('panel_current'); // adds current class to link to keep it opaque
				$(this).parent().addClass('panel_current');
				link_count = $(this).parent().prevAll().length + 1;	// move current arrow to currently selected project		
				$('#panel_current_indicator').stop().animate(
					{left: link_count * 100 - 71},
					{duration: 240, easing: 'swing', queue: false}
				);
				update_panel(); // finally change the content of the "web panel"
			}
			
			return false;
		});
		
		$('#to_top').click(function(){
			$('html, body').animate({scrollTop: '0'}, 'slow');
		});
	
	};	
	
	
});