$(document).ready(function() {
	$('body').append('<div id="pop-holder" class="pop-contact"></div><div class="pop-bg"></div>');
});

var pop_contact_path = "/images/pop_form/contact/";
var pop_win_win_path = "/images/pop_form/win-win/";

function DoCheckbox (obj)
{
	if ($(obj).attr("class") == "checkbox")
	{
		$(obj).removeClass("checkbox").addClass("checkbox-checked")
	}
	else
	{
		$(obj).removeClass("checkbox-checked").addClass("checkbox")		
	}
}

function DoCheckboxBoolean (obj,other_obj)
{
	if ($(obj).attr("class") == "checkbox")
	{
		$(obj).removeClass("checkbox").addClass("checkbox-checked")
		
		$(other_obj).removeClass("checkbox-checked").addClass("checkbox")		
	}
}

function RenderPopGeneric (task,no_cache)
{
	var html = "";
	html += '<div id="step-n">';
	html += '<div class="logo"></div>';
	html += '<div class="header"></div>';	
	html += '<div class="disclaimer"></div>';	
	html += '<div class="body-com"></div>';	
	html += '<div class="body"></div>';
	html += '<div class="copyright"></div>';
	html += '<div class="btn-close" onclick="ClosePopForm()"></div>';	
	html += '<div class="loading"></div>';	
	html += '</div>';
	
	$('#pop-holder').html(html);
	$('#pop-holder').removeClass();	
	$('#pop-holder').addClass("pop-win-win");	
	
	DoLoadBGImage (".body-com",pop_win_win_path+task+'.png?'+no_cache,0);	
}

function RenderPoppWinWinForm (no_cache)
{
	var html = '';
	html += '<form id="pop-win-win-form">';
	html += '<input type="hidden" id="no-cache" value="'+no_cache+'">';
	html += '<div id="step-n" class="step-1">';
	html += '<div class="logo"></div>';
	html += '<div class="header"></div>';

	html += '<div class="body-1" style="background-position:0px 0px;"></div>';
	
	html += '<div class="body-2" style="background-position:0px 0px;">';
	html += '<div class="first_name" require="1"><input type="text" name="first_name"></div>';
	html += '<div class="last_name" require="1"><input type="text" name="last_name"></div>';
	html += '<div class="company" require="1"><input type="text" name="company"></div>';
	html += '<div class="title" require="1"><input type="text" name="title"></div>';
	html += '<div class="code"><input type="text" name="code"></div>';
	html += '<div id="cb-web-search" class="checkbox" onclick="DoCheckbox(this)"></div>';
	html += '<div id="cb-referal" class="checkbox" onclick="DoCheckbox(this)"></div>';
	html += '<div id="cb-ad" class="checkbox" onclick="DoCheckbox(this)"></div>';
	html += '<div id="cb-met-you" class="checkbox" onclick="DoCheckbox(this)"></div>';
	html += '<div id="cb-already-a-client" class="checkbox" onclick="DoCheckbox(this)"></div>';
	html += '<div id="err-first_name" class="error-msg"></div>';
	html += '<div id="err-last_name" class="error-msg"></div>';
	html += '<div id="err-company" class="error-msg"></div>';
	html += '<div id="err-title" class="error-msg"></div>';
	html += '<div id="err-code" class="error-msg"></div>';
	html += '</div>';
	
	html += '<div class="body-3" style="background-position:0px 0px;">';
	html += '<div class="phone1" require="1"><input type="text" name="phone1"></div>';
	html += '<div class="phone2" require="1"><input type="text" name="phone2"></div>';
	html += '<div class="phone3" require="1"><input type="text" name="phone3"></div>';
	html += '<div class="phone4"><input type="text" name="phone4"></div>';
	html += '<div class="email" require="1"><input type="text" name="email"></div>';
	html += '<div class="mobile1"><input type="text" name="mobile1"></div>';
	html += '<div class="mobile2"><input type="text" name="mobile2"></div>';
	html += '<div class="mobile3"><input type="text" name="mobile3"></div>';
	html += '<div class="street_name" require="1"><input type="text" name="street_name"></div>';
	html += '<div class="street_number" require="1"><input type="text" name="street_number"></div>';
	html += '<div class="suite_unit"><input type="text" name="suite_unit"></div>';
	html += '<div class="city" require="1"><input type="text" name="city"></div>';
	html += '<div class="province_state" require="1"><input type="text" name="province_state"></div>';
	html += '<div class="postal_zip" require="1"><input type="text" name="postal_zip"></div>';
	html += '<div id="err-phone" class="error-msg"></div>';
	html += '<div id="err-email" class="error-msg"></div>';
	html += '<div id="err-street_name" class="error-msg"></div>';
	html += '<div id="err-street_number" class="error-msg"></div>';
	html += '<div id="err-city" class="error-msg"></div>';
	html += '<div id="err-province_state" class="error-msg"></div>';
	html += '<div id="err-postal_zip" class="error-msg"></div>';
	html += '</div>';
	
	html += '<div class="body-4" style="background-position:0px 0px;">';
	html += '<div class="email1"><input type="text" name="email1"></div>';
	html += '<div class="msg1"><textarea id="msg1"></textarea></div>';	
	html += '<div class="email2"><input type="text" name="email2"></div>';
	html += '<div class="msg2"><textarea id="msg2"></textarea></div>';	
	html += '<div class="email3"><input type="text" name="email3"></div>';
	html += '<div class="msg3"><textarea id="msg3"></textarea></div>';	
	html += '<div class="email4"><input type="text" name="email4"></div>';
	html += '<div class="msg4"><textarea id="msg4"></textarea></div>';	
	html += '<div class="email5"><input type="text" name="email5"></div>';
	html += '<div class="msg5"><textarea id="msg5"></textarea></div>';	
	html += '<div class="email6"><input type="text" name="email6"></div>';
	html += '<div class="msg6"><textarea id="msg6"></textarea></div>';	
	html += '<div class="email7"><input type="text" name="email7"></div>';
	html += '<div class="msg7"><textarea id="msg7"></textarea></div>';	
	html += '<div class="email8"><input type="text" name="email8"></div>';
	html += '<div class="msg8"><textarea id="msg8"></textarea></div>';	
	html += '</div>';
	
	html += '<div class="body-5" style="background-position:0px 0px;"></div>';		
	html += '<div class="body"></div>';		
	html += '<div id="btn-prev" class="btn-prev-disabled" onclick="DoPrevStep(\'step-n\')"></div>';
	html += '<div id="btn-next" class="btn-next-disabled" onclick="DoWinWinNextStep(\'step-n\',\''+no_cache+'\')"></div>';
	html += '<div class="copyright"></div>';
	html += '<div class="btn-close" onclick="ClosePopForm()"></div>';
	html += '<div class="loading"></div>';

	html += '</div>';
	

		
	html += '</form>';	
	
	
	$('#pop-holder').html(html);
	$('#pop-holder').removeClass();		
	$('#pop-holder').addClass("pop-win-win");	
	DoLoadBGImage (".body-1",pop_win_win_path+"step-1.png?"+no_cache,5);		
}


function RenderPopContactForm ()
{
	var html = '';
	html += '<form id="pop-contact-form">';
	html += '<div id="step-n" class="step-1">';
	html += '<div class="logo"></div>';
	html += '<div class="header"></div>';
	
	html += '<div class="body-1">';
	html += '<div class="first_name" require="1"><input type="text" name="first_name"></div>';
	html += '<div class="last_name" require="1"><input type="text" name="last_name"></div>';
	html += '<div class="company" require="1"><input type="text" name="company"></div>';
	html += '<div class="title" require="1"><input type="text" name="title"></div>';
	html += '<div class="web_site"><input type="text" name="web_site"></div>';
	html += '<div id="cb-web-search" class="checkbox" onclick="DoCheckbox(this)"></div>';
	html += '<div id="cb-referal" class="checkbox" onclick="DoCheckbox(this)"></div>';
	html += '<div id="cb-ad" class="checkbox" onclick="DoCheckbox(this)"></div>';
	html += '<div id="cb-met-you" class="checkbox" onclick="DoCheckbox(this)"></div>';
	html += '<div id="cb-already-a-client" class="checkbox" onclick="DoCheckbox(this)"></div>';
	html += '<div id="cb-yes" class="checkbox-checked" onclick="DoCheckboxBoolean(this,\'#cb-no\')"></div>';
	html += '<div id="cb-no" class="checkbox" onclick="DoCheckboxBoolean(this,\'#cb-yes\')"></div>';						
	html += '<div id="err-first_name" class="error-msg"></div>';
	html += '<div id="err-last_name" class="error-msg"></div>';
	html += '<div id="err-company" class="error-msg"></div>';
	html += '<div id="err-title" class="error-msg"></div>';
	html += '</div>';

	html += '<div class="body-2">';
	html += '<div class="phone1" require="1"><input type="text" name="phone1"></div>';
	html += '<div class="phone2" require="1"><input type="text" name="phone2"></div>';
	html += '<div class="phone3" require="1"><input type="text" name="phone3"></div>';
	html += '<div class="phone4"><input type="text" name="phone4"></div>';
	html += '<div class="email" require="1"><input type="text" name="email"></div>';
	html += '<div class="mobile1"><input type="text" name="mobile1"></div>';
	html += '<div class="mobile2"><input type="text" name="mobile2"></div>';
	html += '<div class="mobile3"><input type="text" name="mobile3"></div>';
	html += '<div class="street_name" require="1"><input type="text" name="street_name"></div>';
	html += '<div class="street_number" require="1"><input type="text" name="street_number"></div>';
	html += '<div class="suite_unit"><input type="text" name="suite_unit"></div>';
	html += '<div class="city" require="1"><input type="text" name="city"></div>';
	html += '<div class="province_state" require="1"><input type="text" name="province_state"></div>';
	html += '<div class="postal_zip" require="1"><input type="text" name="postal_zip"></div>';
	html += '<div id="err-phone" class="error-msg"></div>';
	html += '<div id="err-email" class="error-msg"></div>';
	html += '<div id="err-street_name" class="error-msg"></div>';
	html += '<div id="err-street_number" class="error-msg"></div>';
	html += '<div id="err-city" class="error-msg"></div>';
	html += '<div id="err-province_state" class="error-msg"></div>';
	html += '<div id="err-postal_zip" class="error-msg"></div>';
	html += '</div>';
	
	html += '<div class="body-3">';
	html += '<div id="cb-trade-show" class="checkbox" onclick="DoCheckbox(this)"></div>';
	html += '<div id="cb-retail" class="checkbox" onclick="DoCheckbox(this)"></div>';
	html += '<div id="cb-big-printing" class="checkbox" onclick="DoCheckbox(this)"></div>';
	html += '<div id="cb-environments" class="checkbox" onclick="DoCheckbox(this)"></div>';
	html += '<div id="cb-custom" class="checkbox" onclick="DoCheckbox(this)"></div>';
	html += '<div id="cb-interactive" class="checkbox" onclick="DoCheckbox(this)"></div>';
	html += '<div id="cb-consultation" class="checkbox" onclick="DoCheckbox(this)"></div>';
	html += '<div id="cb-sales-support" class="checkbox" onclick="DoCheckbox(this)"></div>';
	html += '<div id="cb-desgin-support" class="checkbox" onclick="DoCheckbox(this)"></div>';
	html += '<div id="cb-general-product-info" class="checkbox" onclick="DoCheckbox(this)"></div>';
	html += '<div id="cb-general-services-inquiry" class="checkbox" onclick="DoCheckbox(this)"></div>';
	html += '<div id="cb-email-me-please" class="checkbox" onclick="DoCheckbox(this)"></div>';
	html += '<div id="cb-phone-call" class="checkbox" onclick="DoCheckbox(this)"></div>';
	html += '<div class="comments"><textarea id="comments-field" name="comments"></textarea></div>';
	html += '</div>';
	
	html += '<div class="body-4"></div>';
	
	html += '<div class="body"></div>';	
	
	html += '<div id="btn-prev" class="btn-prev-disabled" onclick="DoPrevStep(\'step-n\')"></div>';
	html += '<div id="btn-next" class="btn-next-disabled" onclick="DoContactNextStep(\'step-n\')"></div>';
	html += '<div class="copyright"></div>';
	html += '<div class="btn-close" onclick="ClosePopForm()"></div>';
	html += '<div class="loading"></div>';
	html += '</div>';

	html += '</form>';
	
	$('#pop-holder').html(html);
	$('#pop-holder').removeClass();		
	$('#pop-holder').addClass("pop-contact");
	DoLoadBGImage (".body-1",pop_contact_path+"step-1.png",4);
}

function DoLoadBGImage (target,imagePath,num_step)
{
	if ($(target).css("background-image") == "none")
	{
	
		var imageObj = new Image();
		
		$(".body").css("display","block")
		$(imageObj).attr("src",imagePath).load(function(){ // do whatever else you want to do in here too 
			$(target).css("background-image","url("+imagePath+")");
			var cur_step 	= $(target).parent().attr("class");
			var step_no		= cur_step.replace("step-","")-1;
			
			$(".body").css("display","none")
			$(".loading").css("display","none")
	
			if (step_no != num_step && $('#btn-next').attr("class") == "btn-next-disabled")
				$('#btn-next').removeClass("btn-next-disabled").addClass("btn-next");
		});
		$(".loading").css("display","block")

	}
}

function DoPrevStep (id)
{
	if ($('#btn-prev').attr("class") != "btn-prev-disabled")
	{
		var cur_step 	= $('#'+id).attr("class");
		var step_no		= cur_step.replace("step-","")-1;
		$('#'+id).removeClass(cur_step).addClass("step-"+step_no)	
		
		if (step_no == 1)
			$('#btn-prev').removeClass("btn-prev").addClass("btn-prev-disabled");
	}
}

function DoValidation (id,cur_step,step_no)
{
	var num_err = 0;
	var err_phone = 0;
	$(".body-"+(step_no-1)+ " div").each(function(){
		if ($(this).attr("require"))
		{
			var tmp = $(this).attr("class")
			if (tmp.indexOf("phone") != -1)
			{
				if ($(this).children("input:text").val() == "")
					err_phone++;
			}
			else if ($(this).children("input:text").val() == "")
			{
				$("#err-"+tmp).show();	
				num_err++;
			}
			else
				$("#err-"+tmp).hide();	
		}
	});
	
	if (err_phone)
	{
		num_err++;
		$("#err-phone").show();		
	}
	else
		$("#err-phone").hide();	
	
	return num_err;
}

function DoWinWinNextStep (id,no_cache)
{
	if ($('#btn-next').attr("class") != "btn-next-disabled")	
	{
		var cur_step 	= $('#'+id).attr("class");
		var step_no		= cur_step.replace("step-","")-0+1;
	
		if (step_no == 5) // submit the form
		{
			$('#btn-prev').removeClass("btn-prev").addClass("btn-prev-disabled");
			$('#btn-next').removeClass("btn-next").addClass("btn-next-disabled");

			$(".loading").css("display","block")
			var data 			= new Object();
			data.task			= "win-win";
			data.no_cache		= $("#no-cache").val()
			data.first_name 	= $("input[name=first_name]").val()
			data.last_name		= $("input[name=last_name]").val()
			data.company		= $("input[name=company]").val()	
			data.title			= $("input[name=title]").val()
			data.code			= $("input[name=code]").val()
			data.hear_about_us	= "";
			
			var tmp				= new Array ("web-search","referal","ad","met-you","already-a-client")
			for (var i=0; i < tmp.length;i++)
			{
				if ($("#cb-"+tmp[i]).attr("class") == "checkbox-checked")
				{
					if (data.hear_about_us)
						data.hear_about_us += ", ";
						
					data.hear_about_us += tmp[i].replace("-", " ");
				}
			}
	
			data.phone			= $("input[name=phone1]").val()+"-"+$("input[name=phone2]").val()+"-"+$("input[name=phone3]").val();
			if ($("input[name=phone4]").val())
				data.phone		+= " ext "+$("input[name=phone4]").val();
					
			data.email			= $("input[name=email]").val();
	
			if ($("input[name=mobile1]").val())
				data.mobile		=  $("input[name=mobile1]").val()+"-"+$("input[name=mobile2]").val()+"-"+$("input[name=mobile3]").val();
			
			data.street_name	= $("input[name=street_name]").val();
			data.street_number	= $("input[name=street_number]").val();
			data.suite_unit		= $("input[name=suite_unit]").val();
			data.city			= $("input[name=city]").val();
			data.province_state	= $("input[name=province_state]").val();
			data.postal_zip		= $("input[name=postal_zip]").val();				
						
			data.email1			= $("input[name=email1]").val();
			data.msg1			= $("#msg1").val();		
			data.email2			= $("input[name=email2]").val();
			data.msg2			= $("#msg2").val();
			data.email3			= $("input[name=email3]").val();
			data.msg3			= $("#msg3").val();
			data.email4			= $("input[name=email4]").val();
			data.msg4			= $("#msg4").val();
			data.email5			= $("input[name=email5]").val();
			data.msg5			= $("#msg5").val();
			data.email6			= $("input[name=email6]").val();
			data.msg6			= $("#msg6").val();
			data.email7			= $("input[name=email7]").val();
			data.msg7			= $("#msg7").val();
			data.email8			= $("input[name=email8]").val();
			data.msg8			= $("#msg8").val();
				
			$.post("/pop_form.php",{data:$.toJSON(data)},
				function(data){	
					$(".loading").css("display","none")
					DoLoadBGImage (".body-"+step_no,pop_win_win_path+"step-"+step_no+".png?"+no_cache,4);
					$('#'+id).removeClass(cur_step).addClass("step-"+step_no)
				});			
		}
		else
		{
			var num_err = DoValidation (id,cur_step,step_no)
			if (!num_err)
			{
				DoLoadBGImage (".body-"+step_no,pop_win_win_path+"step-"+step_no+".png?"+no_cache,4);
				
				if ($('#btn-prev').attr("class") == "btn-prev-disabled")
					$('#btn-prev').removeClass("btn-prev-disabled").addClass("btn-prev");
								
				$('#'+id).removeClass(cur_step).addClass("step-"+step_no)			
				
			}			
		}
	}
}

function DoContactNextStep (id)
{
	if ($('#btn-next').attr("class") != "btn-next-disabled")	
	{
		var cur_step 	= $('#'+id).attr("class");
		var step_no		= cur_step.replace("step-","")-0+1;
		
		if (step_no == 4) // submit the form
		{			
			$('#btn-prev').attr("class","btn-prev-disabled");
			$('#btn-next').attr("class","btn-next-disabled");		
			$('.loading').show();
			var data 			= new Object();
			data.task			= "contact";
			data.first_name 	= $("input[name=first_name]").val()
			data.last_name		= $("input[name=last_name]").val()
			data.company		= $("input[name=company]").val()	
			data.title			= $("input[name=title]").val()
			data.web_site		= $("input[name=web_site]").val()
			data.hear_about_us	= "";
			
			var tmp				= new Array ("web-search","referal","ad","met-you","already-a-client")
			for (var i=0; i < tmp.length;i++)
			{
				if ($("#cb-"+tmp[i]).attr("class") == "checkbox-checked")
				{
					if (data.hear_about_us)
						data.hear_about_us += ", ";
						
					data.hear_about_us += tmp[i].replace("-", " ");
				}
			}
			
			if ($("#cb-yes").attr("class") == "checkbox-checked")
				data.promo_email	= "yes"
			else
				data.promo_email	= "no"
	
			data.phone			= $("input[name=phone1]").val()+"-"+$("input[name=phone2]").val()+"-"+$("input[name=phone3]").val();
			if ($("input[name=phone4]").val())
				data.phone		+= " ext "+$("input[name=phone4]").val();
					
			data.email			= $("input[name=email]").val();
	
			if ($("input[name=mobile1]").val())
				data.mobile		=  $("input[name=mobile1]").val()+"-"+$("input[name=mobile2]").val()+"-"+$("input[name=mobile3]").val();
			
			data.street_name	= $("input[name=street_name]").val();
			data.street_number	= $("input[name=street_number]").val();
			data.suite_unit		= $("input[name=suite_unit]").val();
			data.city			= $("input[name=city]").val();
			data.province_state	= $("input[name=province_state]").val();
			data.postal_zip		= $("input[name=postal_zip]").val();				
			
			
	
			var tmp				= new Array ("trade-show","retail","big-printing","environments","custom","interactive","consultation","sales-support","desgin-support","general-product-info","general-services-inquiry");
			data.inquiry		= "";
			for (var i=0; i < tmp.length;i++)
			{
				if ($("#cb-"+tmp[i]).attr("class") == "checkbox-checked")
				{
					if (data.inquiry)
						data.inquiry += ", ";
						
					data.inquiry += tmp[i].replace("-", " ");
				}
			}
			
			var tmp				= new Array ("email-me-please","phone-call");
			data.contact		= "";
			for (var i=0; i < tmp.length;i++)
			{
				if ($("#cb-"+tmp[i]).attr("class") == "checkbox-checked")
				{
					if (data.contact)
						data.contact += ", ";
						
					data.contact += tmp[i].replace("-", " ");
				}
			}		
			
			data.comments		= $("#comments-field").val();						
			
			$.post("/pop_form.php",{data:$.toJSON(data)},
				function(data){	
					$('.loading').hide();
					DoLoadBGImage (".body-"+step_no,pop_contact_path+"step-"+step_no+".png",3);
					$('#'+id).removeClass(cur_step).addClass("step-"+step_no);
				});					
		}
		else
		{
			var num_err = DoValidation (id,cur_step,step_no)
			if (!num_err)
			{
				DoLoadBGImage (".body-"+step_no,pop_contact_path+"step-"+step_no+".png",3);
				
				if ($('#btn-prev').attr("class") == "btn-prev-disabled")
					$('#btn-prev').removeClass("btn-prev-disabled").addClass("btn-prev");
								
				$('#'+id).removeClass(cur_step).addClass("step-"+step_no)			
				
			}
		}
	}
}

function DisplayWinWinForm (task,no_cache)
{
	$('.pop-bg').css({opacity: 0.9});
	$('.pop-bg').show();		
	if (task != "form")
		RenderPopGeneric (task,no_cache);
	else
		RenderPoppWinWinForm (no_cache);
	$('#pop-holder').CenterIt(); 
	$('#pop-holder').show();		
}

function DisplayContactForm ()
{
	$('.pop-bg').css({opacity: 0.9});
	$('.pop-bg').show();		
	RenderPopContactForm ();
	$('#pop-holder').CenterIt(); 
	$('#pop-holder').show();	
}

function ClosePopForm ()
{
	$('.pop-bg').hide();	
	$('#pop-holder').hide();	
	$('#pop-holder').html("");
}