$(document).ready(function(){

	lastBlock = $("#a1");
	maxWidth = 350;
	minWidth = 75;	
	sliderValue = 0;
	newBlock = $("#a1");
	
	switchBlocks();
	
	$('p.message').hide();
	$('p.submit').hide();	
	$('p.phone').hide();


	$('input.text').click(function() {
		$("#formContainer").animate({height: "450px"}, { queue:false, duration:500 });
		$('p.message').fadeIn();
		$('p.submit').fadeIn();
		$('p.phone').fadeIn();
	});
	$("#slider").slider({ value: 0, max: 7,
		slide: function(event, ui) {	// Do this when the slider moves:
			newBlock = $("#a"+(ui.value+1));
			switchBlocks();			
		}
	});
	
	function switchBlocks(){
		$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:500 }); // Make the last block skinny
		$(newBlock).animate({width: maxWidth+"px"}, { queue:false, duration:500}); // Widen the new block
		lastBlock = newBlock;
		var currentId = "hurp durp";
		currentId = newBlock.attr("id"); 
		var foo = "bar";
		foo = currentId.split("");
		newSliderPos = (foo[1] - 1);
		$( "#slider" ).slider( "option", "value", newSliderPos );
	}
	
	$("ul li .card").hover(function(){
		newBlock = $(this);	// Set newBlock to the block being hovered,then
		switchBlocks();		// switch to it
	});
	
	$("#contactLink").click(function(){
		$("#home").fadeOut(function(){
			$("#contact").fadeIn();
		});
		return false;
	});
	$("#homeLink").click(function(){
		$("#contact").fadeOut(function(){
			$("#home").fadeIn();
		});
		return false;
	});
	
	var lastForm;
	var currentForm;
	$(".reps a").click(function(){
			currentForm = $(this).next(".contactFormWrapper")

			if(lastForm) {
				if (currentForm.hasClass("contractedForm")){
					lastForm.fadeOut();
					lastForm.removeClass("expandedForm").addClass("contractedForm");
				} else {
					currentForm.fadeOut();
					currentForm.removeClass("expandedForm").addClass("contractedForm");
					return false;
				}
			}
			if (lastForm != currentForm) {
				currentForm.fadeIn();
				currentForm.addClass("expandedForm").removeClass("contractedForm");
			}
			lastForm = currentForm;
			$('.ie7 .repLink').hide();
		return false;
	});
	
	$("a.close").click(function(){
		$(this).parent().parent().removeClass("expandedForm").addClass("contractedForm").fadeOut();
		$('.ie7 .repLink').show();
	});
	
	
	$.validator.setDefaults({
	submitHandler: function() { alert("submitted!"); }
	});
	
	
	var options = { 
        target:        '.result',   // target element(s) to be updated with server response 
        beforeSubmit:  showRequest,  // pre-submit callback 
        success:       showResponse  // post-submit callback 
 
        // other available options: 
        //url:       url         // override for form's 'action' attribute 
        //type:      type        // 'get' or 'post', override for form's 'method' attribute 
        //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
        //clearForm: true        // clear all form fields after successful submit 
        //resetForm: true        // reset the form after successful submit 
 
        // $.ajax options can be used here too, for example: 
        //timeout:   3000 
    }; 
 

	$(".contact").each(function(){
		$(this).validate({
			submitHandler: function(form) {
				$(form).ajaxSubmit(options);
				return false;
   		}
		})
	});
	
	$("#rep7").append("<p class='caption'>(Alaska and Hawaii)</p>");
	
	
 
});



var formHeight = 200;

function showRequest(formData, jqForm, options) { 
    // formData is an array; here we use $.param to convert it to a string to display it 
    // but the form plugin does this for you automatically when it submits the data 
    var queryString = $.param(formData); 
 
    // jqForm is a jQuery object encapsulating the form element.  To access the 
    // DOM element for the form do this: 
    // var formElement = jqForm[0]; 
 	
 	$(".submitting").fadeIn();
 	
	$("input:submit").attr("value", "Submitting...").attr("disabled", "disabled");
	 
    // here we could return false to prevent the form from being submitted; 
    // returning anything other than false will allow the form submit to continue 
    return true; 
} 

function showResponse(responseText, statusText, xhr, $form)  { 
    // for normal html responses, the first argument to the success callback 
    // is the XMLHttpRequest object's responseText property 
 
    // if the ajaxSubmit method was passed an Options Object with the dataType 
    // property set to 'xml' then the first argument to the success callback 
    // is the XMLHttpRequest object's responseXML property 
 
    // if the ajaxSubmit method was passed an Options Object with the dataType 
    // property set to 'json' then the first argument to the success callback 
    // is the json data object returned by the server 
	$("input:submit").attr("value", "Success!").hide();
 	$(".submitting").css("background", "#fff").html("<h2>Thank You!</h2><p>A Mosaic Sales Manager will contact you shortly.</p>");
}