$(function(){
	$("#menu a").addClass('js');
	//todo - make the contact form button show errors via ajax 
	
	//make the menu links do ajax stuff
	$("#header").delegate('a', 'mouseover mouseout click', function(event) {
		//prevent normal browser activation of links
		event.preventDefault();
		//find out if this is the link on the current page
		if (event.currentTarget.className.search(' on') == -1) {
			//for rolling link effect
			if (event.type == 'mouseover') {
				$(this).stop().animate({
					backgroundPosition: '0px -16px'
				}, 150);
			}
			else if (event.type == 'mouseout') {
				$(this).stop().animate({
					backgroundPosition: '0px 0px'
				}, 300);
			}
			//for link clicked
			else if (event.type == 'click') {
				//find out which link it was
				url=$(this).attr('href');
				//reset the links to not 'on'
				$("#menu a").removeClass('on');
				//make this current page (by adding marker class'on')
				$(this).addClass('on');
				//load the relevant page fragment
				//into the "main" div
				$("#main").fadeOut(200, function(){
					$(this).empty().show().append('<div class="loading"></div>');
				 	$(this).load(url + ' #main', function() {
						//$(this).remove('<div class="loading"></div>');
						$(this).fadeIn(200);
						//remove old page title image
						//with a nice fade out on the way
						$("#pageTitle").children('img').fadeOut(100, function() {
							$("#pageTitle").empty();
							//generate filename of png for the page title
							if (url == "index.html") {
								titlePNG = "spacer.png";
								 } else {
								titlePNG = url.slice(0, url.indexOf('.')) + "Title.png"; }
								//make an image holder
								var img = new Image();
								//get the image
								img.src = "images/" + titlePNG;
								$(img).load(img.src, function() {
									//and set it to be hidden...
									$(this).hide();
									//stick it in the html
									$("#pageTitle").append(this);
									//give it a source attribute so it draws correctly
									$(this).attr('src', 'images/' + titlePNG);
									//make the banner the right size
									//with a nice animation (!)
									//that budges the logo into the right spot
									$("#banner").animate({
										width: (this.width + 289) + 'px'
									}, 'slow' , function(){
										//make the title magically appear!
										$("#pageTitle img").slideDown(100);
										//flip back the menu link
										//from the last page visited
										$("#menu a").not('.on').animate({
										backgroundPosition: '0px 0px'
										}, 50);
								});
							});
						});
					});
				});
			}
		}
	});
});