/// <reference path="../jQueryPath/jquery-1.4.1-vsdoc.js" />
// REQUIRES JQuery Validate

(function($) {

    $.widget("ui.login", {
        options: {
            usrNameId: "user"
            , usrNameText: "User"
            , usrNameError: "User name is required"
            , usrPwdId: "password"
            , usrPwdText: "Password"
            , usrPwdError: "Password is required"
            , btnLoginId: "btnLogin"
            , btnLoginText: "Login"
            , rememberMeText: "Remember Me"
            , formId: "frmLogin"
        }
        , _create: function() {

            var w = this;
            var $el = $(this.element);
            var o = w.options;

            $el.addClass('ui-login ui-widget ui-widget-content ui-corner-all')
                .append('<div class="ui-login-usrBox"><label class="ui-login-fieldName">' + o.usrNameText + '</label><input type="text" id="' + o.usrNameId + '" name="' + o.usrNameId + '" /></div>')
                .append('<div class="ui-login-pwdBox"><label class="ui-login-fieldName">' + o.usrPwdText + '</label><input type="password" id="' + o.usrPwdId + '" name="' + o.usrPwdId + '" /></div>')
                .append('<div class="ui-login-buttonsBox"><table><tr><td class="ui-login-left"><input type="checkbox" /><a href="javascript:void(0);">' + o.rememberMeText + '</a></td><td><button id="' + o.btnLoginId + '" name="' + o.btnLoginId + '">' + o.btnLoginText + '</button></td></tr></table></div>')
                .append('<ul class="ui-login-formError"></ul>')
                .wrapInner('<form id="' + o.formId + '" name="' + o.formId + '"></form>')
                .find("div.ui-login-buttonsBox button")
                    .button({
                        icons: {
                            primary: 'ui-icon-transferthick-e-w'
                        }
                    })
                    .click(function() {
                        $el.find('form').submit();
                        return false;
                    })
                .end()
                .find("input[type=text], input[type=password]")
                    .addClass('ui-widget ui-widget-content ui-corner-all')
                .end()
                .find('div.ui-login-buttonsBox a')
                    .click(function() {
                        $el.find('input[type=checkbox]').attr('checked', !($el.find('input:checked').length > 0));
                    });

            var validator = $el.find('form').validate({
                debug: false
                , errorClass: "ui-state-error"
                , errorElement: "div"
                , errorContainer: $el.find("ul.ui-login-formError")
                , errorLabelContainer: $el.find("ul.ui-login-formError")
                , wrapper: "li"
                , highlight: function(element, errorClass) {
                    $(element).addClass(errorClass);
                }
                , unhighlight: function(element, errorClass, validClass) {
                    $(element).removeClass(errorClass);
                }
                , submitHandler: function(form) {
                    var data = { name: $el.find("input[type=text]").val(), pwd: $el.find("input[type=password]").val(), remember: $el.find('input[type=checkbox]').is(':checked') };
                    w._trigger('submitForm', null, data);
                }
            });

            $el.find('input[type=text]')
                    .addClass('ui-widget ui-widget-content ui-corner-all')
                    .rules("add", {
                        required: true,
                        messages: {
                            required: o.usrNameError
                        }
                    });

            $el.find('input[type=password]')
                    .addClass('ui-widget ui-widget-content ui-corner-all')
                    .rules("add", {
                        required: true,
                        messages: {
                            required: o.usrPwdError
                        }
                    });

        },
        destroy: function() {
            $(this.element).removeClass('ui-login ui-widget ui-widget-content ui-corner-all').find('*').remove();
            $.Widget.prototype.destroy.call(this);
        }
    });

})(jQuery);