$(function() {
        
        var email = $("#email"),
            password = $("#password"), 
            sname = $("#sname"),
            semail = $("#semail"),
            spassword = $("#spassword"),  
            allLoginFields = $([]).add(email).add(password),
            allSignupFields = $([]).add(sname).add(semail).add(spassword),
            Logintips = $("#validateLoginTips");
            Signuptips = $("#validateSignupTips");

        function updateTips(t,form) {
        if(form=="login")
            Logintips.text(t).effect("highlight",{},1500);
        else    
            Signuptips.text(t).effect("highlight",{},1500);
        }

        function checkLength(o,n,min,max,form) {   

            if ( o.val().length > max || o.val().length < min ) {
                o.addClass('ui-state-error');
                updateTips("Length of " + n + " must be between "+min+" and "+max+".",form);
                return false;
            } else {
                return true;
            }
        }

        function checkRegexp(o,regexp,n,form) {

            if ( !( regexp.test( o.val() ) ) ) {
                o.addClass('ui-state-error');
                updateTips(n,form);
                return false;
            } else {
                return true;
            }

        }
        
        $("#LoginDiv").dialog({
            bgiframe: true,
            autoOpen: false,
            height: 300,
            modal: true,
            buttons: {
                'Login Now': function() {    
                    var bValid = true;
                    allLoginFields.removeClass('ui-state-error');

                    //bValid = bValid && checkLength(name,"username",3,16);
                    bValid = bValid && checkLength(email,"email",6,80,"login");
                    bValid = bValid && checkLength(password,"password",1,15,"login");

                    //bValid = bValid && checkRegexp(name,/^[a-z]([0-9a-z_])+$/i,"Username may consist of a-z, 0-9, underscores, begin with a letter.");
                    // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
                    bValid = bValid && checkRegexp(email,/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i,"Please enter valid login email. eg. youremail@creditmagic.org","login");
                    bValid = bValid && checkRegexp(password,/^([0-9a-zA-Z])+$/,"Password field only allow : a-z 0-9","login");
                    
                    if (bValid) {
                        $('#users tbody').append('<tr>' +
                            //'<td>' + name.val() + '</td>' + 
                            '<td>' + email.val() + '</td>' + 
                            '<td>' + password.val() + '</td>' +
                            '</tr>'); 
                        $("#login-form").submit();          
                   }
                },
                Cancel: function() {
                    $(this).dialog('close');
                }
            },
            close: function() {
                allLoginFields.val('').removeClass('ui-state-error');
            }
        });
        $("#SignupDiv").dialog({
            bgiframe: true,
            autoOpen: false,
            height: 350,
            modal: true,
            buttons: {
                'SignUp': function() {    
                    var bValid = true;
                    allSignupFields.removeClass('ui-state-error');

                    bValid = bValid && checkLength(sname,"name",3,16,"signup");
                    bValid = bValid && checkLength(semail,"email",6,80,"signup");
                    bValid = bValid && checkLength(spassword,"password",1,15,"signup");

                    bValid = bValid && checkRegexp(sname,/^[a-z]([0-9a-z_])+$/i,"Username may consist of a-z, 0-9, underscores, begin with a letter.","signup");
                    // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
                    bValid = bValid && checkRegexp(semail,/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i,"Please enter valid login email. eg. youremail@creditmagic.org","signup");
                    bValid = bValid && checkRegexp(spassword,/^([0-9a-zA-Z])+$/,"Password field only allow : a-z 0-9","signup");
                    
                    if (bValid) {
                        $('#users tbody').append('<tr>' +
                            '<td>' + sname.val() + '</td>' + 
                            '<td>' + semail.val() + '</td>' + 
                            '<td>' + spassword.val() + '</td>' +
                            '</tr>'); 
                        $("#SignUpForm").submit();          
                   }
                },
                Cancel: function() {
                    $(this).dialog('close');
                }
            },
            close: function() {
                allSignupFields.val('').removeClass('ui-state-error');
            }
        });

        $('#login').click(function() {
            $('#LoginDiv').dialog('open');
        })
        $('#signup').click(function() {
            $('#SignupDiv').dialog('open');
        })
        $('#signupbox').click(function() {
            $('#LoginDiv').dialog('close');
            $('#SignupDiv').dialog('open');
        })
        $('#loginbox').click(function() {
            $('#LoginDiv').dialog('open');
            $('#SignupDiv').dialog('close');
        })
        .hover(
            function(){ 
                $(this).addClass("ui-state-hover"); 
            },
            function(){ 
                $(this).removeClass("ui-state-hover"); 
            }
        ).mousedown(function(){
            $(this).addClass("ui-state-active"); 
        })
        .mouseup(function(){
                $(this).removeClass("ui-state-active");
        });

    });