$(document).ready(function(){
        //        alert("hi");

        $("#datepicker").datepicker();

        // form validation
        $.validator.setDefaults({
                submitHandler: function() {
                    $("#orderForm").ajaxSubmit(options); 
 
                    // !!! Important !!! 
                    // always return false to prevent standard browser submit and page navigation 

                    //alert("submitted!"); 
                    return false; 
                },
                    highlight: function(input) {
                    $(input).addClass("ui-state-highlight");
                },
                    unhighlight: function(input) {
                    $(input).removeClass("ui-state-highlight");
                }
            });

        $.validator.addMethod("phoneUS", 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");

        // validate order form on keyup and submit
        $("#orderForm").validate({
                   rules: {
                        amount: "required",
                        city: "required",
                        state: "required",
                        zip: "required",
                        address1: "required",
                        datepicker: {
                            date: true
                        },
                        payment: "required",
                        fullname: {
                            required: true,
                            minlength: 2
                        },
                        email: {
                            required: true,
                            email: true
                        },
                        confirm_email: {
                            required: true,
                            equalTo: "#email"
                        },
                        phone: {
                            required: false,
                            phoneUS: true
                        },
                        agree: "required"
                   },
                   messages: {
                        fullname: "Please enter your full name",
                        lastname: "Please enter your lastname",
                        username: {
                            required: "Please enter a username",
                            minlength: "Your username must consist of at least 2 characters"
                        },
                        phone: {
                            required: "Please enter a your phone number"
                        },
                        confirm_email: {
                            required: "Please confirm your email",
                            equalTo: "Please enter same email as above"
                        },
                        email: "Please enter a valid email address",
                        agree: "Please accept our policy"
                   }
            });

            // 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;
                    }
                });

            $("#orderForm input:not(:submit)").addClass("ui-widget-content");

            //$(":submit").button();


            var options = { 
                target:        '#orders',   // 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:      post        // '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 
            $('#unused...').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; 
                }); 

            // pre-submit callback 
            function showRequest(formData, jqForm, options) { 
                // formData is an array; here we use $.param to convert it to a string to display it 
                // but the form plugin does this for you automatically when it submits the data 
                var queryString = $.param(formData); 
 
                // jqForm is a jQuery object encapsulating the form element.  To access the 
                // DOM element for the form do this: 
                // var formElement = jqForm[0]; 
 
                alert('About to submit: \n\n' + queryString); 
 
                // here we could return false to prevent the form from being submitted; 
                // returning anything other than false will allow the form submit to continue 
                return true; 
            } 
 
            // post-submit callback 
            function showResponse(responseText, statusText, xhr, $form)  { 
                // for normal html responses, the first argument to the success callback 
                // is the XMLHttpRequest object's responseText property 
 
                // if the ajaxSubmit method was passed an Options Object with the dataType 
                // property set to 'xml' then the first argument to the success callback 
                // is the XMLHttpRequest object's responseXML property 
 
                // if the ajaxSubmit method was passed an Options Object with the dataType 
                // property set to 'json' then the first argument to the success callback 
                // is the json data object returned by the server 
 
                alert('status: ' + statusText + '\n\nresponseText: \n' + responseText + 
                      '\n\nThe output div should have already been updated with the responseText.'); 
            } 
    });