$(function(){

	//set global variables and cache DOM elements for reuse later
	var form = $('#contact-form').find('form'),
		formElements = form.find('input[type!="submit"],textarea'),
		formSubmitButton = form.find('[type="submit"]'),
		errorNotice = $('#errors'),
		successNotice = $('#success'),
		loading = $('#loading'),
		errorMessages = {
			required: ' is a required field',
			email: 'You have not entered a valid email address for the field: ',
			minlength: ' must be greater than '
		}
	
	//feature detection + polyfills
	formElements.each(function(){

		//if HTML5 input placeholder attribute is not supported
		if(!Modernizr.input.placeholder){
			var placeholderText = this.getAttribute('placeholder');
			if(placeholderText){
				$(this)
					.addClass('placeholder-text')
					.val(placeholderText)
					.bind('focus',function(){
						if(this.value == placeholderText){
							$(this)
								.val('')
								.removeClass('placeholder-text');
						}
					})
					.bind('blur',function(){
						if(this.value == ''){
							$(this)
								.val(placeholderText)
								.addClass('placeholder-text');
						}
					});
			}
		}
		
		//if HTML5 input autofocus attribute is not supported
		if(!Modernizr.input.autofocus){
			if(this.getAttribute('autofocus')) this.focus();
		}
		
	});
	
	//to ensure compatibility with HTML5 forms, we have to validate the form on submit button click event rather than form submit event. 
	//An invalid html5 form element will not trigger a form submit.
	formSubmitButton.bind('click',function(){
		var formok = true,
			errors = [];
			
		formElements.each(function(){
			var name = this.name,
				nameUC = name.ucfirst(),
				value = this.value,
				placeholderText = this.getAttribute('placeholder'),
				type = this.getAttribute('type'), //get type old school way
				isRequired = this.getAttribute('required'),
				minLength = this.getAttribute('data-minlength');
			
			//if HTML5 formfields are supported			
			if( (this.validity) && !this.validity.valid ){
				formok = false;
				
				console.log(this.validity);
				
				//if there is a value missing
				if(this.validity.valueMissing){
					errors.push(nameUC + errorMessages.required);	
				}
				//if this is an email input and it is not valid
				else if(this.validity.typeMismatch && type == 'email'){
					errors.push(errorMessages.email + nameUC);
				}
				
				this.focus(); //safari does not focus element an invalid element
				return false;
			}
			
			//if this is a required element
			if(isRequired){	
				//if HTML5 input required attribute is not supported
				if(!Modernizr.input.required){
					if(value == placeholderText){
						this.focus();
						formok = false;
						errors.push(nameUC + errorMessages.required);
						return false;
					}
				}
			}

			//if HTML5 input email input is not supported
			if(type == 'email'){ 	
				if(!Modernizr.inputtypes.email){ 
					var emailRegEx = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; 
				 	if( !emailRegEx.test(value) ){	
						this.focus();
						formok = false;
						errors.push(errorMessages.email + nameUC);
						return false;
					}
				}
			}
			
			//check minimum lengths
			if(minLength){
				if( value.length < parseInt(minLength) ){
					this.focus();
					formok = false;
					errors.push(nameUC + errorMessages.minlength + minLength + ' charcters');
					return false;
				}
			}
		});
		
		//if form is not valid
		if(!formok){
			
			//animate required field notice
			$('#req-field-desc')
				.stop()
				.animate({
					marginLeft: '+=' + 5
				},150,function(){
					$(this).animate({
						marginLeft: '-=' + 5
					},150);
				});
			
			//show error message 
			showNotice('error',errors);
			
		}
		//if form is valid
		else {
			loading.show();
			$.ajax({
				url: form.attr('action'),
				type: form.attr('method'),
				data: form.serialize(),
				success: function(){
					showNotice('success');
					form.get(0).reset();
					loading.hide();
				}
			});
		}
		
		return false; //this stops submission off the form and also stops browsers showing default error messages
		
	});

	//other misc functions
	function showNotice(type,data)
	{
		if(type == 'error'){
			successNotice.hide();
			errorNotice.find("li[id!='info']").remove();
			for(x in data){
				errorNotice.append('<li>'+data[x]+'</li>');	
			}
			errorNotice.show();
		}
		else {
			errorNotice.hide();
			successNotice.show();	
		}
	}
	
	String.prototype.ucfirst = function() {
		return this.charAt(0).toUpperCase() + this.slice(1);
	}
	
});

/* images preload plugin */

(function($) {
	$.fn.preload = function(options) {
		var opts 	= $.extend({}, $.fn.preload.defaults, options),
			o		= $.meta ? $.extend({}, opts, this.data()) : opts;
		return this.each(function() {
			var $e	= $(this),
				t	= $e.attr('rel'),
				i	= $e.attr('href'),
				l	= 0;
			$('<img/>').load(function(i){
				++l;
				if(l==2) o.onComplete();
			}).attr('src',i);	
			$('<img/>').load(function(i){
				++l;
				if(l==2) o.onComplete();
			}).attr('src',t);	
		});
	};
	$.fn.preload.defaults = {
		onComplete	: function(){return false;}
	};
})(jQuery);

/* tooltips??? */

$(function() {
	//some elements..
	var $ps_container		= $('#ps_container'),
		$ps_image_wrapper 	= $ps_container.find('.ps_image_wrapper'),
		$ps_next			= $ps_container.find('.ps_next'),
		$ps_prev			= $ps_container.find('.ps_prev'),
		$ps_nav				= $ps_container.find('.ps_nav'),
		$tooltip			= $ps_container.find('.ps_preview'),
		$ps_preview_wrapper = $tooltip.find('.ps_preview_wrapper'),
		$links				= $ps_nav.children('li').not($tooltip),
		total_images		= $links.length,
		currentHovered		= -1,
		current				= 0,
		$loader				= $('#loader');
	
	/*check if you are using a browser*/	
	var ie 				= false;
	if ($.browser.msie) {
		ie = true;//you are not!Anyway let's give it a try
	}
	if(!ie)
		$tooltip.css({
			opacity	: 0
		}).show();
		
		
	/*first preload images (thumbs and large images)*/
	var loaded	= 0;
	$links.each(function(i){
		var $link 	= $(this);
		$link.find('a').preload({
			onComplete	: function(){
				++loaded;
				if(loaded == total_images){
					//all images preloaded,
					//show ps_container and initialize events
					$loader.hide();
					$ps_container.show();
					//when mouse enters the pages (the dots),
					//show the tooltip,
					//when mouse leaves hide the tooltip,
					//clicking on one will display the respective image	
					$links.bind('mouseenter',showTooltip)
						  .bind('mouseleave',hideTooltip)
						  .bind('click',showImage);
					//navigate through the images
					$ps_next.bind('click',nextImage);
					$ps_prev.bind('click',prevImage);
				}
			}
		});
	});
	
	function showTooltip(){
		var $link			= $(this),
			idx				= $link.index(),
			linkOuterWidth	= $link.outerWidth(),
			//this holds the left value for the next position
			//of the tooltip
			left			= parseFloat(idx * linkOuterWidth) - $tooltip.width()/2 + linkOuterWidth/2,
			//the thumb image source
			$thumb			= $link.find('a').attr('rel'),
			imageLeft;
		
		//if we are not hovering the current one
		if(currentHovered != idx){
			//check if we will animate left->right or right->left
			if(currentHovered != -1){
				if(currentHovered < idx){
					imageLeft	= 75;
				}
				else{
					imageLeft	= -75;
				}
			}
			currentHovered = idx;
			
			//the next thumb image to be shown in the tooltip
			var $newImage = $('<img/>').css('left','0px')
									   .attr('src',$thumb);
			
			//if theres more than 1 image 
			//(if we would move the mouse too fast it would probably happen)
			//then remove the oldest one (:last)
			if($ps_preview_wrapper.children().length > 1)
				$ps_preview_wrapper.children(':last').remove();
			
			//prepend the new image
			$ps_preview_wrapper.prepend($newImage);
			
			var $tooltip_imgs		= $ps_preview_wrapper.children(),
				tooltip_imgs_count	= $tooltip_imgs.length;
				
			//if theres 2 images on the tooltip
			//animate the current one out, and the new one in
			if(tooltip_imgs_count > 1){
				$tooltip_imgs.eq(tooltip_imgs_count-1)
							 .stop()
							 .animate({
								left:-imageLeft+'px'
							  },150,function(){
									//remove the old one
									$(this).remove();
							  });
				$tooltip_imgs.eq(0)
							 .css('left',imageLeft + 'px')
							 .stop()
							 .animate({
								left:'0px'
							  },150);
			}
		}
		//if we are not using a "browser", we just show the tooltip,
		//otherwise we fade it
		//
		if(ie)
			$tooltip.css('left',left + 'px').show();
		else
		$tooltip.stop()
				.animate({
					left		: left + 'px',
					opacity		: 1
				},150);
	}
	
	function hideTooltip(){
		//hide / fade out the tooltip
		if(ie)
			$tooltip.hide();
		else
		$tooltip.stop()
			    .animate({
					opacity		: 0
				},150);
	}
	
	function showImage(e){
		var $link				= $(this),
			idx					= $link.index(),
			$image				= $link.find('a').attr('href'),
			$currentImage 		= $ps_image_wrapper.find('img'),
			currentImageWidth	= $currentImage.width();
		
		//if we click the current one return
		if(current == idx) return false;
		
		//add class selected to the current page / dot
		$links.eq(current).removeClass('selected');
		$link.addClass('selected');
		
		//the new image element
		var $newImage = $('<img/>').css('left',currentImageWidth + 'px')
								   .attr('src',$image);
		
		//if the wrapper has more than one image, remove oldest
		if($ps_image_wrapper.children().length > 1)
			$ps_image_wrapper.children(':last').remove();
		
		//prepend the new image
		$ps_image_wrapper.prepend($newImage);
		
		//the new image width. 
		//This will be the new width of the ps_image_wrapper
		var newImageWidth	= $newImage.width();
	
		//check animation direction
		if(current > idx){
			$newImage.css('left',-newImageWidth + 'px');
			currentImageWidth = -newImageWidth;
		}	
		current = idx;
		//animate the new width of the ps_image_wrapper 
		//(same like new image width)
		$ps_image_wrapper.stop().animate({
		    width	: newImageWidth + 'px'
		},350);
		//animate the new image in
		$newImage.stop().animate({
		    left	: '0px'
		},350);
		//animate the old image out
		$currentImage.stop().animate({
		    left	: -currentImageWidth + 'px'
		},350);
	
		e.preventDefault();
	}				
	
	function nextImage(){
		if(current < total_images){
			$links.eq(current+1).trigger('click');
		}
	}
	function prevImage(){
		if(current > 0){
			$links.eq(current-1).trigger('click');
		}
	}
});

/* fancybox stuff */

$(document).ready(function() {
	
	
	$('.projects li figure a img').animate({'opacity' : 1}).hover(function() {
		$(this).animate({'opacity' : .5});
	}, function() {
		$(this).animate({'opacity' : 1});
	});
	$('.zoom img').animate({'opacity' : 1}).hover(function() {
		$(this).animate({'opacity' : .5});
	}, function() {
		$(this).animate({'opacity' : 1});
	});

	$("a[rel=work]").fancybox({
		'transitionIn'		: 'elastic',
		'transitionOut'		: 'elastic',
		'titlePosition' 	: 'over',
		'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
			return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
		}
	});
	$("a[rel=recent_work]").fancybox({
		'transitionIn'		: 'elastic',
		'transitionOut'		: 'elastic',
		'titlePosition' 	: 'over',
		'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
			return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
		}
	});

	
});