// JavaScript Document FIT WEB DESIGN ©2009

  $(document).ready(function(){
    
	$("a:not(#left_col div a)").click( function(e) {
		e.preventDefault(e);
	});
	
	// SITELINKS
	$(".sitelink").live("click", function() {
		var theurl = $(this).attr("alt");
		var completeurl = 'http://www.' + theurl;
		window.location = completeurl;
	});
	
  	// TOP NAVIGATION 
    $("div.piece").live( "click", function(){
	  
	  $("div#current").hide();
	  
	  var the_width = $(this).css("width");
	  var thezindex = $(this).css("z-index");
	  var thisname = $(this).attr("id");
	  
	  var thecurrentpage = $("div#current>img").attr("rel"); 
	  var thecurrentpagezindex = $("div#current>img").css("z-index"); 
	  
	  var hiddenwidth = $("div#current>img").attr("width"); 
	  	  
	  changeout(thisname);
	  
	  $("div.piece").each( function() {
	  
	  	if ($(this).css("z-index") > thecurrentpagezindex) {
	  		
			var new_width_a = Number(hiddenwidth) - 35;
			 
			$(this).animate({ 
				left: "+=" + new_width_a + "px"
			}, 1500 );
			
	  	}
	  
	  }); 
	  
	  $("div#" + thecurrentpage).show("slow");
	  
	  $(this).hide("slow");
	  
	  var imgwidth = the_width.replace(/px/g, "");
		
	  $("#current").html("<img width='" + imgwidth + "' src='images/puzzle/" + thisname + ".png' rel='" + thisname +"' style='z-index:" + thezindex +"'/>");
	  
	  $("div.piece").each( function() {
		
		//alert($(this).css("z-index"));
		//alert("thezindex:" + thezindex);
		
		if ($(this).css("z-index") > thezindex) {
			
			nopxwidth = the_width.replace(/px/g, "");
			
			var new_width = Number(nopxwidth) - 35;
			
			//alert(new_width);
			 
			$(this).animate({ 
				left: "-=" + new_width + "px"
			}, 1500 );
	  	
		}
		
	  });
	  
	  $("#current").show("slow");
	  
    });
	
	
	// LINK NAVIGATION
    $("a.pagelink").live( "click", function(e){
	  
	  e.preventDefault(e);
	  
	  $("div#current").hide();
	  
	  var page = $(this).attr('href');
	  
	  var page = page.replace(/http:\/\/www.fitwd.com\//g, "");
	  
	  var the_width = $('div.piece[id="' + page + '"]').css("width");
	  var thezindex = $('div.piece[id="' + page + '"]').css("z-index");
	  var thisname = page;
	  
	  var thecurrentpage = $("#current").children("img").attr("rel"); 
	  var thecurrentpagezindex = $("#current").children("img").css("z-index"); 
	  
	  var hiddenwidth = $("#current").children("img").attr("width");
	  
	  changeout(thisname);
	  
	  $("div.piece").each( function() {
	  
	  	if ($(this).css("z-index") > thecurrentpagezindex) {
			
			var new_width_a = Number(hiddenwidth) - 35;
			 
			$(this).animate({ 
				left: "+=" + new_width_a + "px"
			}, 1500 );
			
	  	}
	  
	  }); 
	  
	  $("div#" + thecurrentpage).show("slow");
	  
	  $('div.piece[id="' + page + '"]').hide("slow");
	  
	  var imgwidth = the_width.replace(/px/g, "");
		
	  $("#current").html("<img width='" + imgwidth + "' src='images/puzzle/" + thisname + ".png' rel='" + thisname +"' style='z-index:" + thezindex +"'/>");
	  
	  $("div.piece").each( function() {
		
		if ($(this).css("z-index") > thezindex) {
			
			nopxwidth = the_width.replace(/px/g, "");
			
			var new_width = Number(nopxwidth) - 35;
			 
			$(this).animate({ 
				left: "-=" + new_width + "px"
			}, 1500 );
	  	
		}
		
	  });
	  
	  $("#current").show("slow");
	  
    });
	
	function changeout(page) {
		
		$('div#page_holder').css('height','auto');
		
		$.ajax({
			type: "POST",
			url: "../ajax/content.php",
			data: "content=" + page,
			dataType: "json",
			success: function(data) {
			
			$("#ajax_content_block").fadeOut("slow", function () {
			
				$("#ajax_content_block").html(data.content_a);
				$("#container").css('background-image','url(../images/edges_top_' + page + '.jpg)');
				$("li.footer").css('background-image','url(../images/right_col_block/rightcol_bot_' + page + '.jpg)');
				$("#graphic_y").css('background-image','url(../images/graphic_y_' + page + '.png)'); 
				$("#puzzle_strip").css('background-image','url(../images/puz_strip_' + page + '.png)');
				
				if (page == "websites") {
					$('.slideshow').cycle({ 
						fx:    'zoom',
						delay: -4000 
					});
				}
				
				if (page != "welcome") {
					$("#footer_block #puzzle_strip ul li a:link").css("color","#161616");
					$("#footer_block #puzzle_strip ul li a:hover").css("color","#FFFFFF");
				} else { 
					$("#footer_block #puzzle_strip ul li a:link").css("color","#FFFFFF");
					$("#footer_block #puzzle_strip ul li a:hover").css("color","#161616");
				}
			});
			
			
			$("#ajax_content_block").fadeIn("slow", function () {
								
				$('div#footer_block').animate({ 
					top: Number($('div#page_holder').attr('offsetHeight')) + 240 + "px"
				}, 1500 );
			
			});
			
			pageTracker._trackPageview("/"+page);
			document.title = data.title;
			}
		});	
	} 
	
	// SHAKE THE PIECES ON MOUSEOVER
	jQuery.fn.shake = function(intShakes, intDistance, intDuration) {
		this.each(function() {
			
			var initial_left = $(this).css('left');
	
			for (var x=1; x<=intShakes; x++) {
				$(this).animate({left:'-=' + intDistance + 'px', opacity: '1.0'}, (((intDuration/intShakes)/4)))
				.animate({left:'+=' + intDistance + 'px'}, ((intDuration/intShakes)/2))
				.animate({left:'+=' + intDistance + 'px'}, ((intDuration/intShakes)/2))
				.animate({left:'-=' + intDistance + 'px', opacity: '0.85'}, (((intDuration/intShakes)/4)));
			}
		});
		return this;
	};	
	
	$('div.piece').mouseover(function() {
		$(this).shake(1, 5, 300);
	});
	
	thisPiece = 0;
	
	// GET QUOTE ANIMATION
	$('#get_quote').mouseover(function() {
		
		image_array = new Array('../images/puzzle/freeQuote.jpg','../images/puzzle/freeQuote_b.jpg','../images/puzzle/freeQuote_c.jpg');		
		imgCt = image_array.length;
		
		refreshIntervalId = setInterval( function() {
			$('#get_quote').attr('src', image_array[thisPiece]);
			thisPiece++; 
			if (thisPiece == imgCt) { thisPiece = 0; }
		}, 400);		
	}).mouseout(function() { 
		
		$('#get_quote').attr('src', image_array[thisPiece]);
		clearInterval(refreshIntervalId);
		
	});

	
	
	//THUMBNAIL PREVIEW FOR GRAPHIC DESIGN PAGE
	$("ul.thumb li, ul.thumb_vertical li").live ( "mouseover", function() {
		
		var theoffset = $(this).offset();
		
		$(this).css('z-index','14');
		
		$(this).find('img').addClass("hover").stop()
			.animate({
				marginTop: (theoffset.top * -.33) + 'px',
				marginLeft: '-110px',
				top: '50%',
				left: '50%',
				width: '330',
				height: '330',
				padding: '20px'
			}, 200);
	
		}).live ( "mouseout", function() {
		$(this).css('z-index','0'); /* Set z-index back to 0 */
		
		
		$(this).find('img').removeClass("hover").stop()
			.animate({
				marginTop: '0',
				marginLeft: '0',
				top: '0',
				left: '0',
				width: '90px',
				height: '90px',
				padding: '5px'
			}, 400);
	});
	
	//CONTACT PAGE
	$('#question').live( "click", function() {
		$('#free_quote_form').hide();
		$('#question_form').show();
	});
	
	$('#quote').live( "click", function() {
		$('#free_quote_form').show();
		$('#question_form').hide();
	});
	
	// CONTACT - SUBMIT CONTACT INFO
	$("a#contact_us").live( "click", function(e) { 
		e.preventDefault();
		
		var elementClicked = '#top';
		var destination = $(elementClicked).offset().top;
		$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-20}, 500, function() { $.fn.colorbox({width:320, height:260, inline:true, open:true, href:"#submit_form_box", title:"Submit Form"}); });
		
		
		
		$("#name").css("border", "2px solid #AAAAAA");
		$("#phone").css("border", "2px solid #AAAAAA");
		$("#email").css("border", "2px solid #AAAAAA");
		
		$.post('../ajax/contact.php', {
			task: 'submit_contact',   
			name: $("#name").val(),
			phone: $("#phone").val(),
			email: $("#email").val(),
			business: $("#business").val(),
			interested: $("#interested").val(),
			quote: $("#quote_text").val(),
			question: $("#question_text").val()
		}, function(data) {
			
			if (data != "sent") {
				
				var all_error_messages = '<h3><img src="images/exclamation.png" align="left" style="margin: 3px 5px 5px;">There Was a Problem Submitting Your Form</h3><p>Please check the following and submit again:</p><ul>';
				
				var values = data.split("|-|");
				
				var error_messages = values[0].split("++");
				var error_fields = values[1].split("++");
				
				for (x in error_messages) {
					all_error_messages += "<li>" + error_messages[x] + "</li>";
				}
				
				all_error_messages += "</ul>";
			    
				$("div#error_messages").html(all_error_messages);
				
				for (x in error_fields) {
					$("input[id='" + error_fields[x] + "']").css("border", "2px solid red");
				}
			
			} else {
			
				$("div#error_messages").html("<h3>Thank You " + $("#name").val() + ". <br>Your Form Has Been Sent.</h3> <p style='padding:4px 0px 0px 0px;'>We will respond to your query promptly. If you are using email filtering remember to add fitwd.com to your list of acceptable recipients.</p>");
				
				$("#name").val("");
				$("#phone").val("");
				$("#email").val("");
				$("#business").val("");
				$("#quote_text").val("");
				$("#question_text").val("");
			}
			
		});
	});	
	
			
  });