$(document).ready(function() {
	$('.gallery a').colorbox({rel:'gallery'});

	$('#convert').click(function() {

		if ($('#inches').val() === '' && $('#mm').val() === '') {
			alert('Please provide a value to convert');
			return;
		}

		if ($('#inches').val() !== '') {
			// Convert from inches
			$('#mm').val(Math.round(($('#inches').val() * 25.4) * 100) / 100);
		} else {
			// Convert from mm
			$('#inches').val(Math.round(($('#mm').val() * 0.0393700787) * 100) / 100);
		}
	});

	$('#brochure-form').validate({
		rules: {
			name: 'required',
			email: {
				required: true,
				email: true
			},
			telephone: 'required'
		}
	});

	$('#survey-form').validate({
		rules: {
			name: 'required',
			email: {
				required: true,
				email: true
			},
			city: 'required',
			county: 'required',
			postcode: 'required',
			telephone: 'required'
		}
	});

	$('#quote-form').validate({
			rules: {
				name: 'required',
				email: {
					required: true,
					email: true
				},
				city: 'required',
				county: 'required',
				postcode: 'required',
				telephone: 'required'
			}
		});


	$('#calculate-quote').click(function() {
		var sqm = 0,
			seattle             = 200,
			boston              = 270,
			phoenixwhite        = 310,
			phoenixstains       = 310,
			portland            = 330,
			vancouveroiled      = 340,
			vancouverlacquered  = 340,
			hollywood           = 340,
			window1 = parseInt($('#width1').val()) * parseInt($('#height1').val()) / 1000000,
			window2 = parseInt($('#width2').val()) * parseInt($('#height2').val()) / 1000000,
			window3 = parseInt($('#width3').val()) * parseInt($('#height3').val()) / 1000000,
			window4 = parseInt($('#width4').val()) * parseInt($('#height4').val()) / 1000000,
			window5 = parseInt($('#width5').val()) * parseInt($('#height5').val()) / 1000000;

		if ( !isNaN(window1)) sqm += window1;
		if ( !isNaN(window2)) sqm += window2;
		if ( !isNaN(window3)) sqm += window3;
		if ( !isNaN(window4)) sqm += window4;
		if ( !isNaN(window5)) sqm += window5;

		$('#vancouveroiled').val(vancouveroiled * sqm);
		$('#vancouverlacquered').val(vancouverlacquered * sqm);
		$('#phoenixwhite').val(phoenixwhite * sqm);
		$('#phoenixstains').val(phoenixstains * sqm);
		$('#seattle').val(seattle * sqm);
		$('#hollywood').val(hollywood * sqm);
		$('#boston').val(boston * sqm);
		$('#portland').val(portland * sqm);

	});













	function calcQuote()
	{
		var sqMeterage = 0;
		var thisWindow = 0;

		thisWindow=(parseInt(document.getElementById("em_Width_1").value) * parseInt( document.getElementById("em_Height_1").value)) / 1000000;
		if (!isNaN(thisWindow)) { sqMeterage+=thisWindow; }

		thisWindow=(parseInt(document.getElementById("em_Width_2").value) * parseInt( document.getElementById("em_Height_2").value)) / 1000000;
		if (!isNaN(thisWindow)) { sqMeterage+=thisWindow; }

		thisWindow=(parseInt(document.getElementById("em_Width_3").value) * parseInt(document.getElementById("em_Height_3").value)) / 1000000;
		if (!isNaN(thisWindow)) { sqMeterage+=thisWindow; }

		thisWindow=(parseInt(document.getElementById("em_Width_4").value) * parseInt(document.getElementById("em_Height_4").value)) / 1000000;
		if (!isNaN(thisWindow)) { sqMeterage+=thisWindow; }

		thisWindow=(parseInt(document.getElementById("em_Width_5").value) * parseInt(document.getElementById("em_Height_5").value)) / 1000000;
		if (!isNaN(thisWindow)) { sqMeterage+=thisWindow; }

		var cost_vancouveroiled = sqMeterage * 350;
		var cost_vancouverlacquered = sqMeterage * 350;
		var cost_phoenixwhite = sqMeterage * 290;
		var cost_phoenixstains = sqMeterage * 290;
		var cost_seattle = sqMeterage * 200;

		document.getElementById("em_Total_vancouveroiled").value = isNaN( cost_vancouveroiled ) ? 0.00 : round( cost_vancouveroiled, 2 );
		document.getElementById("em_Total_vancouverlacquered").value = isNaN( cost_vancouverlacquered ) ? 0.00 : round( cost_vancouverlacquered, 2 );
		document.getElementById("em_Total_phoenixwhite").value = isNaN( cost_phoenixwhite ) ? 0.00 : round( cost_phoenixwhite, 2 );
		document.getElementById("em_Total_phoenixstains").value = isNaN( cost_phoenixstains ) ? 0.00 : round( cost_phoenixstains, 2 );
		document.getElementById("em_Total_seattle").value = isNaN( cost_seattle ) ? 0.00 : round( cost_seattle, 2 );
	}
	function round( number, places )
	{
		// rounds number to X decimal places, defaults to 2
		places = ( !places ? 2 : places );
		return Math.floor( number * Math.pow( 10, places ) ) / Math.pow( 10, places );
	}

});


/* the 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);

$(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/>').load(function(){
								var $this = $(this);
								$this.css('left',currentImageWidth + 'px');

								if($ps_image_wrapper.children().length > 1)
									$ps_image_wrapper.children(':last').remove();

								$ps_image_wrapper.prepend($this);

								var newImageWidth	= $this.width();

								if(current > idx){
									$this.css('left',-newImageWidth + 'px');
									currentImageWidth = -newImageWidth;
								}
								current = idx;
								$ps_image_wrapper.stop().animate({
									width	: newImageWidth + 'px'
								},350);
								$this.stop().animate({
									left	: '0px'
								},350);
								$currentImage.stop().animate({
									left	: -currentImageWidth + 'px'
								},350);
							}).attr('src',$image);

		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');
		}
	}
});