$(window).resize( winResize );

var BROWSER;

function getBrowser() {
	if( 0 <= navigator.appVersion.indexOf('MSIE 6') ){
		BROWSER = 'IE6';
	}
	else if( 0 <= navigator.appVersion.indexOf('MSIE 7') ){
		BROWSER = 'IE7';
	}
}

function winResize() {
	if( 700 < $(window).height() ) {
  	$('#background-one').height( $(window).height() );
  	$('#background-two').height( $(window).height() );
  }
  else {
  	$('#background-one').height( 700 );
  	$('#background-two').height( 700 );
  }
  if ( 'IE6' == BROWSER ) {
	 if( 1000 < $(window).width() ) {
			$('#background-one').width( $(window).width() );
			$('#background-two').width( $(window).width() );
		}
		else {
			$('#background-one').width( 1000 );
			$('#background-two').width( 1000 );
		} 
  }
}

$(document).ready(function() {
	getBrowser();
	winResize();

	//var currentPage = unescape(self.document.location.hash.substring(6));
	var currentPage = unescape(self.document.location.hash);
	
	if ( -1 != currentPage.indexOf('?id=') ) {
		currentPage = currentPage.substring(6);
	}
	else {
		currentPage = currentPage.substring(2);
	}

  $('#background-one').height( $(window).height() );
  $('#background-two').height( $(window).height() );
	$('#thumbs-list a').address();
	$('#navigation a').address();
	
	$('#contact-link a').click( function() {
		$('#contact-page').animate({ height: '400px' }, 250 );
	});
	$('#ex-contact').click( function() {
		$('#contact-page').animate({ height: '0px' }, 250 );
	});	
	
	
	$('#thumbs-list a').click( function() {
		removePage();
		$('.current').toggleClass('current');
		$(this).parent().get(0).className = 'current'; // don't know why but addClass() wasn't working here so we're doing it old school
		loadProject( $(this).attr('id') );
	});
	
	$('#submit').click(function(){
		var emailVal = $('#email').val();
		var nameVal = $('#name').val();
		var messageVal = $('#message').val();
		
		if( '' != emailVal && 'Email' != emailVal && '' != nameVal && 'Name' != nameVal && '' != messageVal && 'What kind of work are you wanting to have done? Maybe just saying hello?' != messageVal ) {		
			$.post('php/email.php', { email: emailVal, name: nameVal, message: messageVal }, function(data){
				$('#submit').unbind('click');
				$('#contact *').fadeOut(500, function(){
					$('#contact *').remove();
				});
				setTimeout('$("#contact").append("Thank you for contacting me. I will reply as soon as possible.")', 550);
			});
		}
	});
	
	$('#email').focus(function() { if ( 'Email' == $(this).val() ) { $(this).val(''); } });
	$('#email').blur(function() { if ( '' == $(this).val() ) { $(this).val('Email'); } });
	
	$('#name').focus(function() { if ( 'Name' == $(this).val() ) { $(this).val(''); }	});
	$('#name').blur(function() { if ( '' == $(this).val() ) { $(this).val('Name'); }	});
	
	$('#message').focus(function() { if ( 'What kind of work are you wanting to have done? Maybe just saying hello?' == $(this).val() ) { $(this).val(''); } });
	$('#message').blur(function() { if ( '' == $(this).val() ) { $(this).val('What kind of work are you wanting to have done? Maybe just saying hello?'); } });
	
	if ( 'contact.php' === currentPage ) {
		$('#contact-page').animate({ height: '400px' }, 250 );
	}
	else if( currentPage ) {
		removePage();
		$('.current').toggleClass('current');
		$('#thumb-'+currentPage).parent().get(0).className = 'current'; // don't know why but addClass() wasn't working here so we're doing it old school	
		loadProject( 'thumb-'+currentPage );
	}
});

var LIMIT;

function loadProject( nameString ) {	
	$.post('php/project.php', { id: nameString }, function(data){	
		var onner;
	  var offer;
	  
		if (window.DOMParser){
			parser=new DOMParser();
			xmlDoc=parser.parseFromString(data,"text/xml");
		}
		else { // Internet Explorer
			xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
			xmlDoc.async="false";
			xmlDoc.loadXML(data);
		}
		
		if ( 'single' == xmlDoc.getElementsByTagName('type')[0].childNodes[0].nodeValue ) {	
			var bgStyle = xmlDoc.getElementsByTagName('background-css')[0].childNodes[0].nodeValue;
			var bgColor = xmlDoc.getElementsByTagName('background-color')[0].childNodes[0].nodeValue;
			
			if ( 'background-one' == $('.current-bg').attr('id') ) {
				onner = $('#background-one'); offer = $('#background-two');
			}
			else {
				onner = $('#background-two'); offer = $('#background-one');
			}
			
			offer.css('background', bgStyle);
			$('body').css('background', '#' + bgColor);
			
			// here we have some fun to make sure our image is loaded before we show it :D
			var img = new Image();
			
			$('<div id="loader">loading<div>').appendTo('body');
			
			// wrap our new image in jQuery, then:
			$(img)
				// once the image has loaded, execute this code
				.load(function () {
					swapBackgrounds();
				})			
				// if there was an error loading the image, react accordingly
				.error(function () {
					$('#loader').remove();
					// notify the user that the image could not be loaded
				})
				// *finally*, set the src attribute of the new image to our image
				.attr('src', 'images/identity/' + xmlDoc.getElementsByTagName('background')[0].childNodes[0].nodeValue);
		}
		else if ( 'series' == xmlDoc.getElementsByTagName('type')[0].childNodes[0].nodeValue ) {	
			var bgStyle = xmlDoc.getElementsByTagName('background-css')[0].childNodes[0].nodeValue;
			var bgColor = xmlDoc.getElementsByTagName('background-color')[0].childNodes[0].nodeValue;
			
			if ( 'background-one' == $('.current-bg').attr('id') ) {
				onner = $('#background-one'); offer = $('#background-two');
			}
			else {
				onner = $('#background-two'); offer = $('#background-one');
			}
			
			offer.css('background', '#' + bgColor);
			$('<div id="image-trunk" class="new"></div>').appendTo(offer);
			var tempImage;
			var x = 2;
			var tempName = xmlDoc.getElementsByTagName('background-' + x)[0].childNodes[0].nodeValue;
			LIMIT = -400;
			while(null != tempName) {
				tempImage = tempName;
				LIMIT -= 900;
				$('<img src="images/identity/' + tempImage + '" alt="Image" />').appendTo('#image-trunk.new');
				x++;
				try {
					tempName = xmlDoc.getElementsByTagName('background-' + x)[0].childNodes[0].nodeValue;
				}
				catch(e) {
					break;
				}
			}
			
			//this sets the background color to that of this particular piece, so if someone resizes the window they won't see glimpses of the wrong colors
			$('body').css('background', '#' + bgColor);
			
			// here we have some fun to make sure our image is loaded before we show it :D
			var img = new Image();
			
			$('<div id="loader">loading<div>').appendTo('body');
			
			// wrap our new image in jQuery, then:
			$(img)
				// once the image has loaded, execute this code
				.load(function () {
					$(this).prependTo('#image-trunk.new');
					swapBackgrounds();
				})			
				// if there was an error loading the image, react accordingly
				.error(function () {
					$('#loader').remove();
					// notify the user that the image could not be loaded
				})
				// *finally*, set the src attribute of the new image to our image
				.attr('src', 'images/identity/' + xmlDoc.getElementsByTagName('background-1')[0].childNodes[0].nodeValue);
		}		
	});
}

function swapBackgrounds() {
  $('#loader').remove();
  if ( 'IE7' == BROWSER ){ // for some ungodly reason IE7 throws in some space at the top of the wrapper when we do this remove() here or the fadeOut a few lines down. This counteracts that but more research needs to be done on the effects in IE 8.
  	$('#wrapper').css('margin-top', '-5px');
  }
	
	var onner;
  var offer;
  
	if ( 'background-one' == $('.current-bg').attr('id') ) {
		onner = $('#background-one'); offer = $('#background-two');
	}
	else {
		onner = $('#background-two'); offer = $('#background-one');
	}
	
	if ( 'series' == xmlDoc.getElementsByTagName('type')[0].childNodes[0].nodeValue ) {
		$('<div id="right-arrow">next</div>').appendTo(offer);
		$('<div id="left-arrow">previous</div>').appendTo(offer);
	}
	
	onner.fadeOut(1500, function(){
		$('<span id="about-this">about</span>').hide().appendTo('#content');
		if ( 'no link' != xmlDoc.getElementsByTagName('link')[0].childNodes[0].nodeValue ) {
			$('<a id="view-site" target="_blank" href="'+ xmlDoc.getElementsByTagName('link')[0].childNodes[0].nodeValue +'"><span class="external">view site</span></a>').hide().appendTo('#content');		
		}
		$('<div id="description" class="block"></div>').hide().appendTo('#content');
		$('.current-bg #right-arrow').remove();
		$('.current-bg #left-arrow').remove();
		$('.current-bg #image-trunk').remove();
		$('#image-trunk.new').removeClass('new');
		$('#right-arrow').click(function(){
			var tempMarg = $('#image-trunk').css('margin-left');
			tempMarg = tempMarg.substring(0, tempMarg.indexOf('px')) - 0;			
			if ( LIMIT < tempMarg ) {
				tempMarg -= 900;
				tempMarg += 'px';
				$('#image-trunk').animate({ marginLeft: tempMarg }, 250 );
			}
		});
		$('#left-arrow').click(function(){
			var tempMarg = $('#image-trunk').css('margin-left');
			tempMarg = tempMarg.substring(0, tempMarg.indexOf('px')) - 0;
			if ( -400 > tempMarg ) {
				tempMarg += 900;
				tempMarg += 'px';
				$('#image-trunk').animate({ marginLeft: tempMarg }, 250 );
			}
		});
		$(this).removeClass('current-bg');
		$('#description').text( xmlDoc.getElementsByTagName('description')[0].childNodes[0].nodeValue );
		$('#about-this').hover(function(){
			$('#description').slideDown('fast');
		},
		function(){
			$('#description').slideUp('fast');		
		});
		$('#about-this').fadeIn( 1000 );
		$('#view-site').fadeIn( 1000 );
		if ( 'background-one' == $(this).attr('id') ) { $('#background-two').addClass("current-bg"); $('#background-one').fadeIn(100); }
		else { $('#background-one').addClass("current-bg"); $('#background-two').fadeIn(100); }
	});
}

function removePage() {
	$('#content *').fadeOut(1000, function(){
		$('#content *').remove();
	});
	$('#description').fadeOut( 1000, function(){
		$(this).remove();
	});
}