if ($.browser.msie && parseInt($.browser.version) == 6 && ! document.location.search.match(/\?old-browser-confirmed/))
{
	$(document).ready(function()
	{
		$('<p class="nojs">You are using Internet Explorer 6. This website has not been optimised to display and function completely correctly in IE6 due to the age of the browser.</p><p class="nojs">Are you sure you want to <a href="?old-browser-confirmed">continue</a>?</p>').appendTo('#window-content');
	});
}
else
{
	$(document).ready(function()
	{
		function setUpInputAnimation()
		{
			var inputBoxInterval = null;
			
			var inputShadowColour = '#837658';
			
			$('input, textarea').focus(function()
			{
				// try animating the box-shadow
				var inputBox = $(this);
				
				var currentShadowSize = 10;
				var currentShadowIncreasing = false;
				
				function animateInputBox()
				{
					if (currentShadowIncreasing)
					{
						currentShadowSize++;
					}
					else
					{
						currentShadowSize--;
					}
					
					if (currentShadowSize <= 1)
					{
						currentShadowIncreasing = true;
					}
					else if (currentShadowSize >= 10)
					{
						currentShadowIncreasing = false;
					}
					
					var shadowCss = '0 0 ' + currentShadowSize + 'px ' + inputShadowColour;
					
					inputBox.css('-webkit-box-shadow', shadowCss);
					inputBox.css('-moz-box-shadow', shadowCss);
					inputBox.css('box-shadow', shadowCss);
				}
				
				inputBoxInterval = setInterval(animateInputBox, 100);
			});
			
			$('input, textarea').blur(function()
			{
				clearInterval(inputBoxInterval);
				
				var inputBox = $(this);
				
				var shadowCss = '';
				
				inputBox.css('-webkit-box-shadow', shadowCss);
				inputBox.css('-moz-box-shadow', shadowCss);
				inputBox.css('box-shadow', shadowCss);
			});
		}
		
		
		
		var windowContent = $('#window-content');
		var windowOverlay = $('<div id="window-overlay"></div>').appendTo('#window');
		
		showHello();
		
		function showHello()
		{
			var helloMessage = $('<div class="box">Hello, my name is Mark Wilson</div>').appendTo(windowContent);
			
			helloMessage.css({
				top: -helloMessage.outerHeight(),
				left: 100
			}).animate({
				top: 100
			},
			{
				complete: function()
				{
					setTimeout(function() { showWelcomeMessage(105 + helloMessage.outerHeight()); }, 250);
				}
			});
		}
		
		function showWelcomeMessage(offsetTop)
		{
			var welcomeMessage = $('<div class="box">I am a freelance web developer keen on creating memorable user experiences</div>').appendTo(windowContent);
			
			welcomeMessage.css({
				top: offsetTop,
				left: -welcomeMessage.outerWidth()
			}).animate({
				left: 100
			},
			{
				complete: function()
				{
					setTimeout(function() { showNextStep(welcomeMessage.outerWidth() + 105, offsetTop); }, 250);
				}
			});
		}
		
		function showNextStep(offsetLeft, offsetTop)
		{
			var box = $('<div class="box next-button">&rarr;</div>').css({
				top: offsetTop,
				left: offsetLeft,
				opacity: 0,
			});
			
			box.hover(function()
			{
				box.addClass('next-button-hover');
			},
			function()
			{
				box.removeClass('next-button-hover');
			});
			
			box.click(function()
			{
				box.animate({
					opacity: 0
				},
				{
					duration: 100,
					complete: function()
					{
						$('.box:first').animate({
							left: -100
						},
						{
							duration: 100,
							complete: function()
							{
								$(this).remove();
							}
						});
						
						setTimeout(function()
						{
							$('.box:nth-child(3)').animate({
								left: -100
							},
							{
								duration: 100,
								complete: function()
								{
									$(this).remove();
									
									setTimeout(showInterest, 100)
								}
							});
						}, 50);
						
						box.remove();
					}
				});
				
				return false;
			});
			
			box.appendTo(windowOverlay).animate({
				opacity: 1
			});
		}
		
		function showInterest()
		{
			var interestMessage = $('<div class="box">If you&rsquo;re interested in getting me involved on your project</div>').appendTo(windowContent);
			
			interestMessage.css({
				top: -interestMessage.outerHeight(),
				left: 100
			}).animate({
				top: 100
			},
			{
				complete: function()
				{
					setTimeout(function() { showGetInTouch(105 + interestMessage.outerHeight()); }, 250);
				}
			});
		}
		
		function showGetInTouch(offsetTop)
		{
			var contactMessage = $('<div class="box">Why don&rsquo;t you get in touch?</div>').appendTo(windowContent);
			
			contactMessage.css({
				top: offsetTop,
				left: -contactMessage.outerWidth()
			}).animate({
				left: 100
			},
			{
				complete: function()
				{
					setTimeout(function() { showContactDetails(offsetTop + contactMessage.outerHeight() + 5); }, 100);
				}
			});
		}
		
		function showContactDetails(offsetTop)
		{
			var phoneMessage = $('<div class="box">Tel: +44 7885 251 591</div>').appendTo(windowContent);
			
			phoneMessage.css({
				top: windowContent.innerHeight() + phoneMessage.outerHeight(),
				left: 100
			}).animate({
				top: offsetTop
			});
			
			setTimeout(function()
			{
				showEmailAddress(offsetTop + 5 + phoneMessage.outerHeight(), offsetTop)
			}, 100);
		}
		
		function showEmailAddress(offsetTop, previousOffsetTop)
		{
			var emailMessage = $('<div class="box">E-mail: mark@89allport.co.uk</div>').appendTo(windowContent);
			
			emailMessage.css({
				top: windowContent.innerHeight() + emailMessage.outerHeight(),
				left: 100
			}).animate({
				top: offsetTop
			});
			
			setTimeout(function()
			{
				showFormHeading(previousOffsetTop);
			}, 500);
		}
		
		function showFormHeading(offsetTop)
		{
			var formHeading = $('<div class="box">... Or leave me a message</div>').appendTo(windowContent);
			
			formHeading.css({
				top: offsetTop - 5 - formHeading.outerHeight(),
				right: -formHeading.outerWidth()
			}).animate({
				right: 100
			});
			
			setTimeout(function()
			{
				showNameInput(offsetTop);
			}, 100);
		}
		
		function showNameInput(offsetTop)
		{
			var nameInput = $('<div class="box inputbox"><label for="name">Your name:</label> <input autocomplete="off" id="name" class="inputtext" type="text" name="name" /></div>').appendTo(windowContent);
			
			var nameLabel = nameInput.children('label');
			
			nameInput.css({
				width: nameLabel.outerWidth() + nameInput.children('input').outerWidth() + 1
			});
			
			nameLabel.css({
				marginTop: (nameInput.height() - nameLabel.outerHeight()) / 2
			});
			
			nameInput.css({
				top: offsetTop,
				right: -nameInput.outerWidth()
			}).animate({
				right: 100
			},
			{
				complete: function()
				{
					nameInput.children('input').focus();
				}
			});
			
			setTimeout(function()
			{
				showEmailInput(offsetTop + nameInput.outerHeight() + 5);
			}, 100);
			
			nameInput.keypress(function(e)
			{
				if (e.keyCode == 13)
				{
					handleFormSubmit();
				}
			});
		}
		
		function showEmailInput(offsetTop)
		{
			var emailInput = $('<div class="box inputbox"><label for="email">E-mail:</label> <input type="text" class="inputtext" name="email" autocomplete="off" id="email" /></div>').appendTo(windowContent);
			
			var emailLabel = emailInput.children('label');
			
			emailInput.css({
				width: emailLabel.outerWidth() + emailInput.children('input').outerWidth() + 1
			});
			
			emailLabel.css({
				marginTop: (emailInput.height() - emailLabel.outerHeight()) / 2
			});
			
			emailInput.css({
				top: offsetTop,
				right: -emailInput.outerWidth()
			}).animate({
				right: 100
			});
			
			setTimeout(function()
			{
				showMessageInput(offsetTop + 5 + emailInput.outerHeight());
			}, 100);
			
			emailInput.keypress(function(e)
			{
				if (e.keyCode == 13)
				{
					handleFormSubmit();
				}
			});
		}
		
		function showMessageInput(offsetTop)
		{
			var messageInput = $('<div class="box inputbox"><label for="message">Message:</label> <textarea autocomplete="off" id="message" class="inputtextarea" name="message"></textarea></div>').appendTo(windowContent);
			
			var messageLabel = messageInput.children('label');
			
			messageInput.css({
				width: messageLabel.outerWidth() + messageInput.children('textarea').outerWidth() + 1
			});
			
			messageLabel.css({
				marginTop: (messageInput.height() - messageLabel.outerHeight()) / 2
			});
			
			messageInput.css({
				top: offsetTop,
				right: -messageInput.outerWidth()
			}).animate({
				right: 100
			});
			
			// set up the shadow animation
			setUpInputAnimation();
			
			hideWindowOverlay();
			
			setTimeout(function()
			{
				showSubmitButton(offsetTop + messageInput.outerHeight() + 5);
			}, 200);
		}
		
		function hideWindowOverlay()
		{
			windowOverlay.fadeOut({
				complete: function()
				{
					$(this).remove();
				}
			});
		}
		
		function showSubmitButton(offsetTop)
		{
			var box = $('<div id="submit-form" class="box next-button">&rarr;</div>').css({
				top: offsetTop,
				right: 100,
				opacity: 0
			});
			
			box.hover(function()
			{
				box.addClass('next-button-hover');
			},
			function()
			{
				box.removeClass('next-button-hover');
			});
			
			// submit button clicked
			box.click(function()
			{
				handleFormSubmit();
				
				return false;
			});
			
			// show the submit button
			box.appendTo(windowContent).animate({
				opacity: 1
			});
		}
		
		function handleFormSubmit()
		{
			if (! validateForm())
			{
				return false;
			}
			
			
			$('#submit-form').animate({
				opacity: 0
			},
			{
				duration: 100,
				complete: function()
				{
					$(this).remove();
				}
			});
			
			
			submitForm();
		}
		
		function showErrorMessage(message, offsetTop, offsetLeft)
		{
			var errorMessage = $('<div class="box error"></div>').text(message).appendTo(windowContent);
			
			errorMessage.css({
				top: offsetTop - (errorMessage.outerHeight() / 2),
				left: offsetLeft - 5 - errorMessage.outerWidth(),
				opacity: 0
			}).animate({
				opacity: 1
			},
			{
				duration: 250
			});
		}
		
		function validateForm()
		{
			$('.error').animate({
				opacity: 0
			}, function()
			{
				$(this).remove();
			});
			
			$('input, textarea').blur();
			
			if ($('#name').val() == '')
			{
				$('#name').focus();
				
				showErrorMessage('Please fill in your name', $('#name').parents('.box').position().top + ($('#name').parents('.box').outerHeight() / 2), $('#name').parents('.box').position().left);
				
				return false;
			}
			
			if ($('#email').val() == '')
			{
				$('#email').focus();
				
				showErrorMessage('Please give a reply address', $('#email').parents('.box').position().top + ($('#email').parents('.box').outerHeight() / 2), $('#email').parents('.box').position().left);
				
				return false;
			}
			
			if ($('#message').val() == '')
			{
				$('#message').focus();
				
				showErrorMessage('Please leave a message', $('#message').parents('.box').position().top + ($('#message').parents('.box').outerHeight() / 2), $('#message').parents('.box').position().left);
				
				return false;
			}
			
			return true;
		}
		
		function submitForm()
		{
			// create invisible form with data in
			var formElement = $('<form action="send" method="post"></form>').css({
				display: 'none'
			}).appendTo(windowContent);
			
			var nameText = $('<input type="text" name="name" value="' + $('#name').val() + '" />').appendTo(formElement);
			var messageText = $('<textarea name="message">' + $('#message').val() + '</textarea>').appendTo(formElement);
			var emailText = $('<input type="text" name="email" value="' + $('#email').val() + '" />').appendTo(formElement);
			
			// submit form
			formElement.submit();
		}
	});
}