$(document).ready(function(){
	//for hiding and refilling text in form elements on index page.
	$("#index_trialfrm input[type=text]").focus(function(){
		var val = $(this).val();
		if (val == "Business Name" || val == "Full Name" || val == "Area Code" || val == "Phone") {
			$(this).val("");
		}
	});
	$("#index_trialfrm input[type=text]").blur(function(){
		var val = $(this).val();
		var name = $(this).attr("name");
		if (name == "business" && val == "") {
			$(this).val("Business Name");
		} else if (name == "name" && val == "") {
			$(this).val("Full Name");
		} else if (name == "area_code" && val == "") {
			$(this).val("Area Code");
		} else if (name == "phone" && val == "") {
			$(this).val("Phone");
		}
	});
	
	//toggle tabs for index page.
	$("#tb_tabs a").click(function(e){
		e.preventDefault();
		var li = $(this).parents("li");
		//the id of the div to show is show_ + the id of the link
		var showMe = "show_" + $(this).attr("id");
		//hide all the tabbed box content, then show the right one.
		$(".tb_content").hide();
		$("#" + showMe).show();
		
		$("#tb_tabs li").removeClass("selected");
		li.addClass("selected");
	});
	
	//for the design selector on free-trial.php
	//persection determins how many designs to show in the choice box. 3 is pretty much all that fits.
	//get the amount of designs, divide by amount in view gives amount of sections minus one to match base zero for current section.
	persection = 3;
	numdesigns = $("#design_select ul li").size();
	totalsections = Math.round(numdesigns/persection) - 1;
	cursection = 0;
	showThese(cursection);
	//when left is clicked to backwards one if greater than 0
	$("#ds_left").click(function(e){
		e.preventDefault();
		if (cursection > 0) {
			cursection--;
			showThese(cursection);
		}
	});
	//when right is clicked go forward one unless cursection is equal to totalsections
	$("#ds_right").click(function(e){
		e.preventDefault();
		if (cursection < totalsections) {
			cursection++;
			showThese(cursection);
		}
	});
	//hide all the design options then show only the three from start to end.
	function showThese(pos) {
		var start = pos * persection +1;
		var end = start + persection;
		$("#design_select li").hide();
		for (i=start;i<end;i++) {
			$("#design_select ul li:nth-child(" + i + ")").show();
		}
	}
	
	//ajax form submission of contact form and custom-website
	//add a selector to the submit function to make other forms submit ajax like.
	$("input[type=submit]").removeAttr("disabled");
	$("#contact_form,#custom_moreinfo,#trialform_step1,#index_trialfrm,#logo_form").live("submit",function(e){
		e.preventDefault();
		var form = $(this);
		var btn = $(this).find("input[type=submit]");
		btn.attr("disabled","disabled");
		
		var formid = $(this).attr("id");
		//depending on what form we are submitting, set a different path for the ajax submission.
		if (formid == "contact_form"){
			ajaxpath = "ajax/contact-mail.php";
		} else if (formid == "custom_moreinfo") {
			ajaxpath = "ajax/custom-website-mail.php";
		} else if (formid == "trialform_step1") {
			ajaxpath = "ajax/free-trial-submit.php";
		} else if (formid == "index_trialfrm") {
			ajaxpath = "ajax/free-trial-short-submit.php";
		} else if (formid == "logo_form") {
			ajaxpath = "ajax/custom-logo-submit.php";
		}
		
		$.post(ajaxpath,form.serialize(),function(data){
			var err = data.split("|");
			if (err[0] == "error") {
				alert(err[1]);
				btn.removeAttr("disabled");
			} else {
				//here you could add if formid == x do this to change the result of form submissions.
				form.html("<p class='sent'>Your information has been sent.</p>");
			}
		});
	});
	
	//more info pop-up form for custom-websites.php
	$(".more_showform").click(function(e){
		e.preventDefault();
		var reqtype = extractId($(this).attr("id"));
		var pop = "";
		pop += "<div id='popup'>";
		pop += "<div id='popup_top'></div><div id='popup_btm'></div>";
		pop += "<a href='#' id='popup_close'>Close</a>";
		pop += "<form name='custom_moreinfo' id='custom_moreinfo' action='#' method='post'>";
		pop += "<div class='formfield'><label for='cm_name'>Name</label><input type='text' name='name' id='cm_name' /></div>";
		pop += "<div class='formfield'><label for='cm_phone'>Phone</label><input type='text' name='phone' id='cm_phone' /></div>";
		pop += "<div class='formfield'><label for='cm_email'>Email</label><input type='text' name='email' id='cm_email' /></div>";
		pop += "<input type='hidden' name='request_type' value='" + reqtype + "' />";
		pop += "<div class='orange_btn'><input type='submit' value='Send Request' /></div>";
		pop += "</form>";
		pop += "</div>";
		var bg = "<div id='popup_bg'></div>";
		$(bg).appendTo("body").hide().fadeTo("fast",.5);
		$(pop).appendTo("body").hide();
		var ypos = $(window).scrollTop() + ($(window).height() / 2) - $("#popup").height();
		$("#popup").css({"top":ypos}).fadeIn();
	});
	$("#popup_bg,#popup_close").live("click",function(e){
		e.preventDefault();
		$("#popup_bg").fadeOut("fast",function(){
			$(this).detach();
		});
		$("#popup").fadeOut("fast",function(){
			$(this).detach();
		});
	});
});


//takes the id of an element like thiscoolthing_24 and returns the second part... the "24"
function extractId(id){
	var newid = id.split("_");
	return newid[1];
}