$(document).ready(function() {

	$('li#nav_contact a, li#footer_contact a').click(function(e) {
		e.preventDefault();
		$('div.flyout').fadeIn();
	});
	
	$('a.button.cancel').click(function(e) {
		e.preventDefault();
		$('div.flyout').fadeOut();
	});
	
	//Uncomment to initialize shadowbox jquery plugin
	//Shadowbox.init();
	
	//Uncomment to use Cufon replacement syntax
	//Cufon.replace('.some-css-class');
	
	//Uncomment to initilize twitter plugin
	//$(".some-css-class").tweet({}); 
	
	//----------------------------------- Fancybox 
	
	//Basic default implementation
	//$("a.single-image").fancybox();
	
	//Custom Implementation
	/* $("a.come-css-class").fancybox({
		'hideOnContentClick': true,
		'speedIn'		:	600, 
		'speedOut'		:	200, 
		'overlayOpacity':	.5,
		'padding'       :   10,
		'margin'        :   20
	}); */
	
	//Images (use same rel="gallery-name" tag to create galleries)
	//<a id="single_image" href="assets/homepage/images/fullsize.jpg"><img src="assets/homepage/thumbs/thumbnail.jpg" alt=""/></a>

	//Inline content (This LINK will show the content of element who has id="data")
	//<a class="data" href="#data">LINK</a>
	
	/* Notes
		- Use the title attribute for anchors if you want to show a caption
		- For more info check API here - http://fancybox.net/api */

	//----------------------------------- Shadowbox 
	
	//Images (add a rel="shadowbox[gallery-name]" to make it work with shadowbox plugin - the squared brackets value is the gallery name
	//<a href="myimage.jpg" rel="shadowbox[gallery-name]">My Image</a>
	
	/* Notes
		- Use the title attribute for anchors if you want to show a caption
		- Must specify height & width for elements other than images => <a rel="shadowbox;width=520;height=390" href="myswf.swf">swf</a>
		- For More info check API here - http://www.shadowbox-js.com/api.html
		- For More usage info check here - http://www.shadowbox-js.com/usage.html */
		
		
	//----------------------------------- Nivo Slider
	
	/* $(window).load(function() {
	$('#slider').nivoSlider({
		effect:'random',
		slices:15,
		animSpeed:500,
		pauseTime:3000,
		directionNav:true, //Next & Prev
		directionNavHide:true, //Only show on hover
		controlNav:true, //1,2,3...
		pauseOnHover:true, //Stop animation while hovering
		beforeChange: function(){},
		afterChange: function(){}
		});
	}); */
	
	
	/* Notes
		- HTML Format looks something like this...
		
		<div id="slider">
			<img src="images/slide1.jpg" alt="" />
			<a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" /></a>
			<img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
			<img src="images/slide4.jpg" alt="" />
		</div>
		
		- Add the following CSS with to get the Nivo not to flash images on load...
		
			#slider {
				position:relative;
			}
			#slider img {
				position:absolute;
				top:0px;
				left:0px;
			}
			
		- Effect Arguements are     
			* sliceDown
			* sliceDownLeft
			* sliceUp
			* sliceUpLeft
			* sliceUpDown
			* sliceUpDownLeft
			* fold
			* fade
			* random

		
		- More info about arguements, etc. available - http://nivo.dev7studios.com/ */		
		

	//----------------------------------- Captions jQuery Witchcraft 
	
	//Caption slide onscreen from bottom
	/* $('.box-wrapper.slideup').hover(function(){
		$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
	}, function() {
		$(".cover", this).stop().animate({top:'260px'},{queue:false,duration:160});
	}); */
	
	//Image slide out of the way to reveal caption
	/* $('.box-wrapper.slidedown').hover(function(){
		$(".cover", this).stop().animate({top:'-260px'},{queue:false,duration:300});
	}, function() {
		$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
	});*/
	
	/* Notes 
		- Used with the follow HTML format...
		
		<div class="box-wrapper">
			<img src="image.jpg"/>
			<div class="box-caption cover">
				<h3>Title</h3>
				<p>Artist<br/>
				<a href="http://www.nonsensesociety.com/2009/03/art-by-jarek-kubicki/" target="_BLANK">More Work</a></p>
			</div>		
		</div>
		
		- For more information and more variability check out http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/ */
		
	//----------------------------------- Form Field Clearing
	
	 $('input[type="text"],textarea').each(function() {
		$(this).focus(function() {
			$(this).removeClass('not-focused').addClass('focused');
			if( this.value == this.defaultValue ) {
				this.value = "";
			}
		}).blur(function() {
			$(this).removeClass('focused').addClass('not-focused');
			if( !this.value.length ) {
				this.value = this.defaultValue;
			}
		});
	});

	
	//----------------------------------- Contact Form Processing

	function contactSuccess() {
		$('div.flyout').fadeOut("fast", function() {
			alert("Thanks for contacting me.  I will get back to you as soon as possible.");
		});
	}
	
	function sendMail() {
		$.ajax({
			type: "POST",
			url: "includes/contact.action.php",
			data: dataString,
			success: function() {
     			contactSuccess();
   			}
		});
	};
	
	
	//----------------------------------- Form Validation
	 $("form#contact").validate({
		rules: {
			name: {
				required: true
			},
			email: {
				required: true,
				email: true
			},
			message: {
				required: true,
				minlength: 10 //This must be more than the default value of the textfield
			}
		},
		messages: {
			name: "I need you name",
			email: {
				required: " I need your email",
				email: "A real email please"
			},
			message: "I need a message"
		},
		errorClass: "form-error",
		submitHandler: function() {
			var name = $('#name').val();
			var email = $('#email').val();
			var message = $('#message').val();
			dataString = 'name='+ name + '&email=' + email + '&message=' + message; 
			sendMail();
		}
 	});
 	
 	/* Notes
 		- Use the following HTML format...
 					
 			<form action="" id="contact">
				<input id="name" type="text" name="name" value="name" class="not-focused" />
				<input  id="email" type="text" name="email" class="not-focused" value="email" />
				<textarea id="message" name="message" class="not-focused">message</textarea>
				<input type="submit" value="send" />
			</form>
			
			...no need for an action cause the JS grabs the submit action */
});