$(function() {
	var map=new Array();
	$.Watermark = {
		ShowAll:function(){
			for (var i=0;i<map.length;i++){
				if(map[i].obj.val()==""){
					map[i].obj.val(map[i].text);					
					map[i].obj.css("color",map[i].WatermarkColor);
				}else{
				    map[i].obj.css("color",map[i].DefaultColor);
				}
			}
		},
		HideAll:function(){
			for (var i=0;i<map.length;i++){
				if(map[i].obj.val()==map[i].text)
					map[i].obj.val("");					
			}
		}
	}
	
	$.fn.Watermark = function(text,color) {
		if(!color)
			color="#545454";
		return this.each(
			function(){		
				var input=$(this);
				var defaultColor=input.css("color");
				map[map.length]={text:text,obj:input,DefaultColor:defaultColor,WatermarkColor:color};
				function clearMessage(){
					if(input.val()==text)
						input.val("");
					input.css("color",defaultColor);
				}

				function insertMessage(){
					if(input.val().length==0 || input.val()==text){
						input.val(text);
						input.css("color",color);	
					}else
						input.css("color",defaultColor);				
				}

				input.focus(clearMessage);
				input.blur(insertMessage);								
				input.change(insertMessage);
				
				insertMessage();
			}
		);
	};
});

var current = 1;

function addDevice() {
	current++;
	if(current>=21){alert ("We are sorry, but you are only allowed to add 20 devices per request");}else{
		var strToAdd = '<div class="formField"><label for="model'+current+'" class="field">*Pump #'+current+'</label>'
		strToAdd += '<div class="field"><span class="miniName">Model Number:</span><span class="miniField"><select id="model" name="model'+current+'"><option value="">Select Your Model</option><option value="2001">Medfusion 2001 syringe pump</option><option value="2010">Medfusion 2010 syringe pump</option><option value="2010i">Medfusion 2010i syringe pump</option><option value="3010">Medfusion 3010 syringe pump</option><option value="3010a">Medfusion 3010a syringe pump</option><option value="3500">Medfusion 3500 syringe pump</option></select></span><div class="clear"></div><span class="miniName">Serial Number:</span><span class="miniField"><input type="text" id="serial" name="serial'+current+'" size="15"></span><div class="clear"></div><span class="miniName">Description of Problem:</span><span class="miniField"><textarea name="problem'+current+'" id="problem" rows="1" cols="1" class="miniTextarea"></textarea></span></div>'
		$('#formFieldDevice').append(strToAdd);
	}
}

$(document).ready(function(){
   $('#addDevice').click(addDevice);

});

jQuery.validator.addMethod("phone", function(phone_number, element) {
    phone_number = phone_number.replace(/\s+/g, ""); 
	return this.optional(element) || phone_number.length > 9 &&
		phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
}, "Please specify a valid phone number");

$(function() {
	$("#quickContact").validate();
	
	$("#serviceRequest").validate({
		rules: {
			company: "required",
			first: "required",
			last: "required",
			title: "required",
			email: {
				required: true,
				email: true
			},
			phone: {
				required: true,
				phone: true
			},
			po: "required",
			street: "required",
			city: "required",
			state: {
				required: true,
				maxlength: 2
			},
			zip: {
				required: true,
				number: true,
				maxlength: 5
			},
			model1: "required",
			serial1: "required",
			problem1: "required",
			message: "required"
		},
		messages: {
			company: "Required",
			first: false,
			last: "Required",
			title: "Required",
			email: {
				required: "Required",
				email: "Invalid Email"
			},
			phone: {
				required: "Required",
				phone: "Invalid Phone Number"
			},
			po: "Required",
			street: "Required",
			city: false,
			state: {
				required: false,
				maxlength: false
			},
			zip: {
				required: false,
				number: false,
				maxlength: false
			},
			model1: "Required",
			serial1: "Required",
			problem1: "Required",
			message: "Required"
		}
	});
	
	$('#addDevice').click(addDevice);
	
	$("#successNotify").animate({opacity: 1.0}, 5000);
    $("#successNotify").fadeOut('slow', function() {$(this).remove()});
    
	$("#first").Watermark("First");
	$("#last").Watermark("Last");
	$("#email").Watermark("yourname@email.com");
	$("#phone").Watermark("000-000-0000");
	$("#street").Watermark("Street Address");
	$("#city").Watermark("City");
	$("#state").Watermark("State");
	$("#zip").Watermark("Zip Code");
	
	$.fn.qtip.styles.custom = {
		name: 'cream',
		padding: 10,
		width: 300,
		tip: 'leftMiddle'
	}
	
	$("#helpCompany").qtip({ content: 'Please enter the Company, Business, or Hospital this service request is for.', position: { corner: { target: 'rightMiddle', tooltip: 'leftMiddle'}}, show: { solo: true }, style: { name: 'custom' }}); 
	$("#helpName").qtip({ content: 'Please enter your first and last name.', position: { corner: { target: 'rightMiddle', tooltip: 'leftMiddle'}}, style: { name: 'custom' }}); 
	$("#helpTitle").qtip({ content: 'Please enter your title or position with the above company.', position: { corner: { target: 'rightMiddle', tooltip: 'leftMiddle'}}, show: { solo: true }, style: { name: 'custom' }}); 
	$("#helpEmail").qtip({ content: 'Please enter your email address in the following format: email@domain.com.', position: { corner: { target: 'rightMiddle', tooltip: 'leftMiddle'}}, show: { solo: true }, style: { name: 'custom' }}); 
	$("#helpPhone").qtip({ content: 'Please enter your phone number. Please use format 000-000-0000.', position: { corner: { target: 'rightMiddle', tooltip: 'leftMiddle'}}, show: { solo: true }, style: { name: 'custom' }});  
	$("#helpAddress").qtip({ content: 'Please enter the address we will be sending the device back to.', position: { corner: { target: 'rightMiddle', tooltip: 'leftMiddle'}}, show: { solo: true }, style: { name: 'custom' }}); 
	$("#helpPo").qtip({ content: 'Enter your purchase order number if you have one, otherwise leave this field blank.', position: { corner: { target: 'rightMiddle', tooltip: 'leftMiddle'}}, show: { solo: true }, style: { name: 'custom' }}); 
	$("#helpModel").qtip({ content: 'Please select the model number for the device you are submitting a service request for.', position: { corner: { target: 'rightMiddle', tooltip: 'leftMiddle'}}, show: { solo: true }, style: { name: 'custom' }}); 
	$("#helpSerial").qtip({ content: 'Please enter the serial number for this device. The serial number can be found on the device.', position: { corner: { target: 'rightMiddle', tooltip: 'leftMiddle'}}, show: { solo: true }, style: { name: 'custom' }}); 
	$("#helpProblem").qtip({ content: 'Please enter a detailed description of the problem you are experiencing with this device.', position: { corner: { target: 'rightMiddle', tooltip: 'leftMiddle'}}, show: { solo: true }, style: { name: 'custom' }}); 
	$("#helpInfo").qtip({ content: 'Please enter any other information that will help us to better serve you.', position: { corner: { target: 'rightMiddle', tooltip: 'leftMiddle'}}, show: { solo: true }, style: { name: 'custom' }}); 
});