// JavaScript Document

jQuery(document).ready(function(){
	// Buttons
	jQuery("a.start").click(
	function(){
	jQuery("#header").removeClass("banner").css({"background" : "#FFFFFF", "height" : "130px"});
	jQuery("#header .title").html('<img src="http://67.225.176.228/wp-content/themes/benattar/images/benattar_marble2.png" alt="Benattar Marble &amp; Granite, Inc" />');
	jQuery("ul.nav_estimates").fadeIn(200);
	jQuery("ul.nav_estimates li a#nav-step1").addClass("active");
	jQuery("#start").fadeOut(200);
	jQuery("#complete").fadeOut(200);
	jQuery("#step-1").fadeIn(200);
	});
	jQuery("#step-1 a.next").click(
	function(){
	jQuery("ul.nav_estimates li a#nav-step1").removeClass("active");
	jQuery("ul.nav_estimates li a#nav-step2").addClass("active");
	jQuery("#step-1").fadeOut(200);
	jQuery("#step-2").fadeIn(200);
	});
	jQuery("#step-2 a.next").click(
	function(){
	jQuery("ul.nav_estimates li a#nav-step2").removeClass("active");
	jQuery("ul.nav_estimates li a#nav-step3").addClass("active");
	jQuery("#step-2").fadeOut(200);
	jQuery("#step-3").fadeIn(200);
	});
	jQuery("#step-2 a.back").click(
	function(){
	jQuery("ul.nav_estimates li a#nav-step2").removeClass("active");
	jQuery("ul.nav_estimates li a#nav-step1").addClass("active");
	jQuery("#step-2").fadeOut(200);
	jQuery("#step-1").fadeIn(200);
	});
	jQuery("#step-3 a.next").click(
	function(){
	jQuery("ul.nav_estimates li a#nav-step3").removeClass("active");
	jQuery("ul.nav_estimates li a#nav-step4").addClass("active");
	jQuery("#step-3").fadeOut(200);
	jQuery("#step-4").fadeIn(200);
	});
	jQuery("#step-3 a.back").click(
	function(){
	jQuery("ul.nav_estimates li a#nav-step3").removeClass("active");
	jQuery("ul.nav_estimates li a#nav-step2").addClass("active");
	jQuery("#step-3").fadeOut(200);
	jQuery("#step-2").fadeIn(200);
	});
	jQuery("#step-4 a.back").click(
	function(){
	jQuery("ul.nav_estimates li a#nav-step4").removeClass("active");
	jQuery("ul.nav_estimates li a#nav-step3").addClass("active");
	jQuery("#step-4").fadeOut(200);
	jQuery("#step-3").fadeIn(200);
	});

	// Sidebar Navigation
	jQuery("ul.nav_estimates li a").click(
	function(){
	jQuery("#header").removeClass("banner");
	jQuery("#header .title").html('<img src="http://67.225.176.228/wp-content/themes/benattar/images/benattar_marble2.png" alt="Benattar Marble &amp; Granite, Inc" />');
	jQuery("#header").css({"background" : "none", "height" : "130px"});
	jQuery("ul.nav_estimates li a").removeClass("active");
	jQuery(this).addClass("active");
	if(jQuery(this).is("#nav-step1")) {
		jQuery("ul.steps > li").fadeOut(200);
		jQuery("#step-1").fadeIn(200);
	}
	if(jQuery(this).is("#nav-step2")) {
		jQuery("ul.steps > li").fadeOut(200);
		jQuery("#step-2").fadeIn(200);
	}
	if(jQuery(this).is("#nav-step3")) {
		jQuery("ul.steps > li").fadeOut(200);
		jQuery("#step-3").fadeIn(200);
	}
	if(jQuery(this).is("#nav-step4")) {
		jQuery("ul.steps > li").fadeOut(200);
		jQuery("#step-4").fadeIn(200);
	}
	});
	
	// Error Navigation
	jQuery("#error li a").click(
	function(){
		jQuery("ul.steps > li").fadeOut(200);
		jQuery("#header").removeClass("banner");
	jQuery("#header .title").html('<img src="http://67.225.176.228/wp-content/themes/benattar/images/benattar_marble2.png" alt="Benattar Marble &amp; Granite, Inc" />');
	jQuery("#header").css({"background" : "none", "height" : "130px"});
	});
	jQuery("li.error-step1 a").click(
	function(){
		jQuery("ul.nav_estimates li a#nav-step1").addClass("active");
		jQuery("#step-1").fadeIn(200);
		if(jQuery(this).is("#error-name")) {
			jQuery("input#fullName").focus();
		}
		if(jQuery(this).is("#error-email")) {
			jQuery("input#email").focus();
		}
		if(jQuery(this).is("#error-phone")) {
			jQuery("input#phone").focus();
		}
		if(jQuery(this).is("#error-scope")) {
			jQuery("input#scope").focus();
		}
		if(jQuery(this).is("#error-siteAddress")) {
			jQuery("input#siteAddress").focus();
		}
		if(jQuery(this).is("#error-sqfootage")) {
			jQuery("input#sqfootage").focus();
		}
	});
	jQuery("li.error-step2 a").click(
	function(){
		jQuery("ul.nav_estimates li a#nav-step2").addClass("active");
		jQuery("#step-2").fadeIn(200);
	});
	jQuery("li.error-step3 a").click(
	function(){
		jQuery("ul.nav_estimates li a#nav-step3").addClass("active");
		jQuery("#step-3").fadeIn(200);
	});
	jQuery("li.error-step4 a").click(
	function(){
		jQuery("ul.nav_estimates li a#nav-step4").addClass("active");
		jQuery("#step-4").fadeIn(200);
		jQuery("input#emailFriend").val("");
		jQuery("#email-estimate").fadeIn(200);
		if(jQuery(this).is("#error-emailFriend")) {
			jQuery("input#emailFriend").focus();
		}
	});
	
	// Trigger email overlay
	jQuery("#triggers").click(
	function(){
	jQuery("input#emailFriend").val("");
	jQuery("#email-estimate").fadeIn(200);
	});
	jQuery("a.close").click(
	function(){
	jQuery("#email-estimate").fadeOut(200);
	jQuery("input#emailFriend").delay(200).val("null");
	});

	// Color Wheel
	jQuery("#step-2 area").click(
	function(){
		jQuery(".selectmenu select").fadeOut(200);
		jQuery(".selectmenu select option").attr("selected", "");
		if(jQuery(this).is("#color-ltgrey, #text-ltgrey")) {
			jQuery(".selectmenu select#material-ltgrey").delay(200).fadeIn(200);
			jQuery(".selectmenu h3").text("Light Grey");
		}
		if(jQuery(this).is("#color-white, #text-white")) {
			jQuery(".selectmenu select#material-white").delay(200).fadeIn(200);
			jQuery(".selectmenu h3").text("White");
		}
		if(jQuery(this).is("#color-cream, #text-cream")) {
			jQuery(".selectmenu select#material-cream").delay(200).fadeIn(200);
			jQuery(".selectmenu h3").text("Cream");
		}
		if(jQuery(this).is("#color-rose, #text-rose")) {
			jQuery(".selectmenu select#material-rose").delay(200).fadeIn(200);
			jQuery(".selectmenu h3").text("Rose");
		}
		if(jQuery(this).is("#color-red, #text-red")) {
			jQuery(".selectmenu select#material-red").delay(200).fadeIn(200);
			jQuery(".selectmenu h3").text("Red");
		}
		if(jQuery(this).is("#color-orange, #text-orange")) {
			jQuery(".selectmenu select#material-orange").delay(200).fadeIn(200);
			jQuery(".selectmenu h3").text("Orange");
		}
		if(jQuery(this).is("#color-green, #text-green")) {
			jQuery(".selectmenu select#material-green").delay(200).fadeIn(200);
			jQuery(".selectmenu h3").text("Green");
		}
		if(jQuery(this).is("#color-blue, #text-blue")) {
			jQuery(".selectmenu select#material-blue").delay(200).fadeIn(200);
			jQuery(".selectmenu h3").text("Blue");
		}
		if(jQuery(this).is("#color-ltbrown, #text-ltbrown")) {
			jQuery(".selectmenu select#material-ltbrown").delay(200).fadeIn(200);
			jQuery(".selectmenu h3").text("Light Brown");
		}
		if(jQuery(this).is("#color-dkbrown, #text-dkbrown")) {
			jQuery(".selectmenu select#material-dkbrown").delay(200).fadeIn(200);
			jQuery(".selectmenu h3").text("Dark Brown");
		}
		if(jQuery(this).is("#color-black, #text-black")) {
			jQuery(".selectmenu select#material-black").delay(200).fadeIn(200);
			jQuery(".selectmenu h3").text("Black");
		}
		if(jQuery(this).is("#color-dkgrey, #text-dkgrey")) {
			jQuery(".selectmenu select#material-dkgrey").delay(200).fadeIn(200);
			jQuery(".selectmenu h3").text("Dark Grey");
		}
	});
	
	// Show Project Info
	jQuery("input").blur(function () {
      var fullName = jQuery("#fullName").val();
      var email = jQuery("#email").val();
	  var phone = jQuery("#phone").val();
	  var fax = jQuery("#fax").val();
	  var scope = jQuery("#scope").val();
	  var address = jQuery("#siteAddress").val();
	  var sqfootage = jQuery("#sqfootage").val();
	  jQuery("p#client-info").html("Name: <span>" + 
								fullName + 
								"</span><br />Email: <span>" +
								email + 
								"</span><br />Phone: <span>" + 
								phone + "</span><br />Fax: <span>" + fax + "</span>");
      jQuery("p#project-info").html("Scope of Project:<br /><span>" +
							   scope + 
							   "</span><br /><br />Site Address: <br /><span>" +
							   address +
							   "</span><br /><br />Square Footage: <br /><span>" +
							   sqfootage + "</span>");
    }).blur();
	
	// Show Color and Material
	jQuery(".selectmenu select").click(showMaterial, function(){jQuery(".selectmenu select option").not(this).attr("selected", "");});
	function showMaterial() {
	var material = jQuery(".selectmenu select option:selected").val();
	var color = jQuery(".selectmenu select option:selected").attr("title");
	jQuery("p#color-info span").html(color);
    jQuery("p#material-info span").html(material);
	jQuery("input#color").val(color);
	jQuery("input#material").val(material);
    }
	jQuery(".selectmenu select").change(showMaterial);
	showMaterial();
	
	// Show Edge
	function showEdge() {
	var edge = jQuery("#step-3 input:radio:checked").val();
	if(edge == "1B3"){
		jQuery("p#edge-info span").html('<img src="http://67.225.176.228/wp-content/themes/benattar/images/edge_1b3.gif" alt="1B3" />');
	}
	if(edge == "2B2"){
		jQuery("p#edge-info span").html('<img src="http://67.225.176.228/wp-content/themes/benattar/images/edge_2b2.gif" alt="2B2" />');
	}
	if(edge == "3B1"){
		jQuery("p#edge-info span").html('<img src="http://67.225.176.228/wp-content/themes/benattar/images/edge_3b1.gif" alt="3B1" />');
	}
	if(edge == "4B1"){
		jQuery("p#edge-info span").html('<img src="http://67.225.176.228/wp-content/themes/benattar/images/edge_4b1.gif" alt="4B1" />');
	}
	if(edge == "PE2"){
		jQuery("p#edge-info span").html('<img src="http://67.225.176.228/wp-content/themes/benattar/images/edge_pe2.gif" alt="PE2" />');
	}
	if(edge == "5B1"){
		jQuery("p#edge-info span").html('<img src="http://67.225.176.228/wp-content/themes/benattar/images/edge_5b1.gif" alt="5B1" />');
	}
	if(edge == "6B1"){
		jQuery("p#edge-info span").html('<img src="http://67.225.176.228/wp-content/themes/benattar/images/edge_6b1.gif" alt="6B1" />');
	}
	if(edge == "6B3"){
		jQuery("p#edge-info span").html('<img src="http://67.225.176.228/wp-content/themes/benattar/images/edge_6b3.gif" alt="6B3" />');
	}
	if(edge == "6B5"){
		jQuery("p#edge-info span").html('<img src="http://67.225.176.228/wp-content/themes/benattar/images/edge_6b5.gif" alt="6B5" />');
	}
	if(edge == "7B5"){
		jQuery("p#edge-info span").html('<img src="http://67.225.176.228/wp-content/themes/benattar/images/edge_7b5.gif" alt="7B5" />');
	}
	}
	jQuery("#step-3 input:radio").change(showEdge);
	showEdge();
	
	// Total Calculator
	jQuery("#step-3 a.next, .nav_estimates a#nav-step4").click(
	function() {
		var x = jQuery("#sqfootage").val() || 0;
		var y = jQuery("select[name=material-list] option:selected").attr("class") || 0;
		var z = jQuery("input:radio[name=edge]:checked").attr("class") || 0;
		if(x > 100 || x < 30){
		var total = "Please Call In for Quote,<br /> (415) 821-1500"
		jQuery(".total h3 span").html(total);
		} else {
		var total = (x*y) + (x*z) + 500;
		jQuery(".total h3 span").html("$" + total);
		}
		
		jQuery(".total input#total").val(total);
	});
});