// JavaScript Document

$().ready(function() {
				   
						  $('#firstname').watermark({html:"First Name"});
						  $('#lastname').watermark({html:"Last Name"});
						  $('#address').watermark({html:"Enter  Address"});
						  $('#city').watermark({html:"City"});
						  $('#zip').watermark({html:"Zip"});
						  $('#email').watermark({html:"Email"});
						  $('#phone').watermark({html:"Phone"});
						  $('#make').watermark({html:"Mske"});
						  $('#model').watermark({html:"Model"});
						  $('#year').watermark({html:"Year"});
						 $("#creditcardnumber").watermark({html:"Credit Card: numbers only"});
						  $('#cvvcode').watermark({html:"Credit Card Verification Code"});
						// $("#creditcardnumber").numeric();
						// $('#cvvcode').numeric();
						// $('#year').numeric();
						// $('#phone').numeric();
						$('.numeric').numeric();
	// validate the comment form when it is submitted
	//$("cmxform").validate();
	
	// validate signup form on keyup and submit
	$(".cmxform").validate({
		rules: {
			chkterms : "required",
			firstname: "required",
			lastname : "required",
			address: "required",
			make: "required",
			model: "required",
			year:  {
				required: true,
			digits: true,
				maxlength: 4
			},
			vehicletype: "required",
			city: {
				required: true,
				minlength: 2
			},
			zip: {
				required: true,
				minlength: 5
			},
			phone: {
				required: true,
				minlength: 5
			},
			email: {
				email: true
			},
			vehicletype: {
				required: true
			},
			creditcardnumber : {
				required:true,
				digits:true,
				creditcard2: function(){ return $('#cardType').val(); }
			},
			size: "required",
			cvvcode : "required",
			checknumber: "required",
			loginname: "required",
			password: "required"
		},
		messages: {
			firstname: "Please enter your First Name",
			lastname: "Please enter your Last Name",
			address: "Please enter your address",
			size: "Please select size",
			city: {
				required: "Please enter a City",
				minlength: "Please enter valid city name"
			},
			phone: {
				required: "Please provide a phone",
				minlength: "Please provid 10 digit phone number starting with area code"
			},
			zip: {
				required: "Please provide a Zip code",
				minlength: "Your Zip code must be at least 5 characters long"
				
			},
			creditcardnumber : {
				required:"Please provide a credit card number",
				creditcard:"Please enter a valid credit card number"
			},
			chkterms: "Please check the terms and conditions",
			email: "Please enter a valid email address",
			vehicletype: "Please select a vehicle type"
		},
		// the errorPlacement has to take the table layout into account
		errorPlacement: function(error, element) {
			if ( element.is(":radio") )
				error.appendTo( element.parent().next().next() );
			else if ( element.is(":checkbox") )
				error.appendTo ( element.next() );
			else
				error.appendTo( element.parent() );
		}

	});
	$('#cardType').change(function(){
            $(".cmxform").validate().element('#creditcardnumber');
        });

	// propose username by combining first- and lastname
	$("#username").focus(function() {
		var firstname = $("#firstname").val();
		var lastname = $("#lastname").val();
		if(firstname && lastname && !this.value) {
			this.value = firstname + "." + lastname;
		}
	});
	
	// check if confirm password is still valid after password changed
	$("#password").blur(function() {
		$("#confirm_password").valid();
	});
	
	//code to hide size selection, disable for demo
	var tshirt = $("#tshirt");
	// tshirt sizes are optional, hide at first
	var inital = tshirt.is(":checked");
	if (inital) {
					$("#tshirt_sizes").show();
		}
		else
		{
			$("#tshirt_sizes").hide();
		}
	var sizes = $("#tshirt_sizes")[inital ? "removeClass" : "addClass"]("gray");
	var sizeInputs = sizes.find("input").attr("disabled", !inital);
	// show when tshirt is checked
	tshirt.click(function() {
		sizes[this.checked ? "removeClass" : "addClass"]("gray");
		sizeInputs.attr("disabled", !this.checked);
		if (this.checked) {
					$("#tshirt_sizes").show();
		}
		else
		{
			$("#tshirt_sizes").hide();
		}
	});
});

$(document).ready(function(){
						 //  var options = { 
        //target:        '#displaycart'   // 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 
   // }; 
	// bind to the form's submit event 
    //$('.formquantity').submit(function() { 
        // inside event callbacks 'this' is the DOM element so we first 
        // wrap it in a jQuery object and then invoke ajaxSubmit 
     //   $(this).ajaxSubmit(options); 
 
        // !!! Important !!! 
        // always return false to prevent standard browser submit and page navigation 
     //   return false; 
   // }); 
   var bindBehaviors = function(){
   	$("input.quantity").change(function(){
   		var inputstring = $(this).attr("name");
   		var orderCode = inputstring.substring(12, inputstring.length);
   		var quantity = $(this).val();
   		var options = {
   			target: '#displaycart',
   			type: "GET",
   			url: "updatequantity.cfm",
   			data: {
   				"quantity": quantity,
   				"productcode": orderCode,
   				"editquantity": "true"
   			}
   		}
   		$('#displaycart').html('Please wait...');
   		$.post('updatequantity.cfm', {
   			"quantity": quantity,
   			"productcode": orderCode
   		}, function(data){
   			$('#displaycart').html(data);
			bindBehaviors();
   		});
   		return false;
   		
   	});
   };
   
   bindBehaviors();
   

 

						   });