$(document).ready(function() {

    $("#" + PeopleNet_TipEnVen_TriggerID).css({ cursor: "pointer" });

    $("#" + PeopleNet_TipEnVen_TriggerID).click(function(event) {

        var headerTextDiv = "<div class=\"energinet_tipenven_headertext\">" + tipenven_headerText + "</div>";

        var tableStart = "<div class=\"energinet_tipenven_contentdiv\">";

        var yourNameTextSpan = "<li><span class=\"abonnement_formText\">" + tipenven_yourNameText + "</span><span class=\"abonnement_formInput\">" + '<input id="' + tipenven_prefix + 'FromName" class="required" type="text"></input>' + "</span></li>";
        var yourEmailTextSpan = "<li><span class=\"abonnement_formText\">" + tipenven_yourEmailText + "</span><span class=\"abonnement_formInput\">" + '<input id="' + tipenven_prefix + 'FromEmail" class="required email" type="text"></input>' + "</span></li>";
        //var recipientsNameTextSpan = "<li><span>" + tipenven_recipientsNameText + "</span></li>";
        var recipientsEmailTextSpan = "<li><span class=\"abonnement_formText\">" + tipenven_recipientsEmailText + "</span><span class=\"abonnement_formInput\">" + '<input id="' + tipenven_prefix + 'ToEmail" class="required multiemail" type="text"></input>' + "</span></li>";
        var emptyRowTextSpan = "<li><span class=\"abonnement_formText\">&nbsp;</span><span class=\"abonnement_formInput\">" + tipenven_multipleRecipientsHelpText + "</span></li>";
        var messageTextSpan = "<li><span class=\"abonnement_formText\">" + tipenven_messageText + "</span><span class=\"abonnement_formInput\">" + '<textarea id="' + tipenven_prefix + 'Message" type="text" rows="6" cols="20"></textarea>' + "</span></li>";
        var cancelButtonInput = "<div class=\"abonnement_buttonContainer\"><span  class=\"abonnement_standardButton\">" + '<input id="' + tipenven_prefix + 'CancelButton" type="button" value="' + tipenven_cancelButtonText + '"></input>' + "</span>";
        var okButtonInput = "<span class=\"abonnement_standardButton\">" + '<input id="' + tipenven_prefix + 'OkButton" type="button" value="' + tipenven_okButtonText + '"></input>' + "</span></div>";
        var textList = "<ul class=\"abonnement_list\">" +
            yourNameTextSpan +
            yourEmailTextSpan +
        //recipientsNameTextSpan +
            recipientsEmailTextSpan +
            emptyRowTextSpan +
            messageTextSpan +                                   
            "</ul>";

        /*
        var yourNameInput = "<li><span>" + '<input id="' + tipenven_prefix + 'FromName" class="required" type="text"></input>' + "</span></li>";
        var yourEmailInput = "<li><span>" + '<input id="' + tipenven_prefix + 'FromEmail" class="required email" type="text"></input>' + "</span></li>";
        //var recipientsNameInput = "<li><span>" + '<input id="' + tipenven_prefix + 'ToName" class="required" type="text"></input>' + "</span></li>";
        var recipientsEmailInput = "<li><span>" + '<input id="' + tipenven_prefix + 'ToEmail" class="required multiemail" type="text"></input>' + "</span></li>";
        var recipientsHelpTextInput = "<li><span>" + tipenven_multipleRecipientsHelpText + "</span></li>";
        var messageInput = "<li><span>" + '<textarea id="' + tipenven_prefix + 'Message" type="text" rows="6" cols="20"></textarea>' + "</span></li>";
        var cancelButtonInput = "<li><span  class=\"abonnement_standardButton\">" + '<input id="' + tipenven_prefix + 'CancelButton" type="button" value="' + tipenven_cancelButtonText + '"></input>' + "</span>";
        var okButtonInput = "<span class=\"abonnement_standardButton\">" + '<input id="' + tipenven_prefix + 'OkButton" type="button" value="' + tipenven_okButtonText + '"></input>' + "</span></li>";
        var inputList = "<ul style=\"float: left;\">" +
        yourNameInput +
        yourEmailInput +
        //recipientsNameInput +
        recipientsEmailInput +
        recipientsHelpTextInput +
        messageInput +
        cancelButtonInput +
        okButtonInput +
        "</ul>";
        */

        var tableEnd = "</div>";

        $("." + PeopleNet_TipEnVen_HideWhenActiveID).children().hide();
        $("#" + PeopleNet_TipEnVen_ClientID).show();
        $("#" + PeopleNet_TipEnVen_ClientID).empty();
        $("#" + PeopleNet_TipEnVen_ClientID).html(headerTextDiv +
                                      tableStart +
                                      textList +
                                      "<div class=\"abonnement_buttonContainer\">" +
                                      cancelButtonInput +
                                      okButtonInput +
                                      "</div>" +
                                      tableEnd);

        $("#" + tipenven_prefix + "CancelButton").click(function(event) {
            $("." + PeopleNet_TipEnVen_HideWhenActiveID).children().show();
            $("#" + PeopleNet_TipEnVen_ClientID).hide();
        });

        /*
        * Translated default messages for the jQuery validation plugin.
        * Language: DA
        * Skipped date/dateISO/number.
        */
        jQuery.extend(jQuery.validator.messages, {
            required: tipenven_required,
            maxlength: jQuery.validator.format(tipenven_maxlength),
            minlength: jQuery.validator.format(tipenven_minlength),
            rangelength: jQuery.validator.format(tipenven_rangelength),
            email: tipenven_email,
            url: tipenven_url,
            dateDE: tipenven_dateDE,
            numberDE: tipenven_numberDE,
            digits: tipenven_digits,
            equalTo: tipenven_equalTo,
            range: jQuery.validator.format(tipenven_range),
            max: jQuery.validator.format(tipenven_max),
            min: jQuery.validator.format(tipenven_min),
            creditcard: tipenven_creditcard
        });

        //additional email validator for multiple emails sepereated by , or ;
        jQuery.validator.addMethod("multiemail", function(value, element) {
            if (this.optional(element)) // return true on optional element
                return true;
            var commaIsTrue = false;
            var emails = value.split(new RegExp("\\s*,\\s*", "gi"));
            valid = true;
            for (var i in emails) {
                value = emails[i];
                valid = valid && jQuery.validator.methods.email.call(this, value, element);
            }
            commaIsTrue = valid;
            if (valid) {
                return true;
            }
            else {
                //also check for ;
                var emails = value.split(new RegExp("\\s*;\\s*", "gi"));
                valid = true;
                for (var i in emails) {
                    value = emails[i];
                    valid = valid && jQuery.validator.methods.email.call(this, value, element);
                }
                return valid;
            }
        },
                jQuery.validator.messages.email
        );

        $("#" + tipenven_prefix + "OkButton").click(function(event) {

            if ($("#" + tipenven_prefix + "FromName").valid() == 1 &&
                $("#" + tipenven_prefix + "FromEmail").valid() == 1 &&                
                $("#" + tipenven_prefix + "ToEmail").valid() == 1) {
                var trimmedTitleText = $.trim($("title").html());
                __doPostBack('', 'PeopleNet.Energinet.TipEnVen.Action=submitTip' +
                    '@@@fromName=' + $("#" + tipenven_prefix + "FromName").val() +
                    '@@@fromEmail=' + $("#" + tipenven_prefix + "FromEmail").val() +
                    '@@@toName=' + $("#" + tipenven_prefix + "ToName").val() +
                    '@@@toEmail=' + $("#" + tipenven_prefix + "ToEmail").val() +
                    '@@@message=' + $("#" + tipenven_prefix + "Message").val() +
                    '@@@headerTitle=' + trimmedTitleText);
            }

        });

        //styling
        $(".abonnement_formText").css({ "width": "180px",
            "display": "inline-block",
            "vertical-align": "top",
            "padding-top": "5px"
        });

        $(".abonnement_formInput").css({
            "display": "inline-block",
            "vertical-align": "top"
        });

        $(".abonnement_formInput").children('input').css({ "width": "150px" });

        //$(".abonnement_formInput").children('label').css({ "color": "red", "padding-left": "2px" });

//        $(".abonnement_buttonContainer").css({
//            "display": "block",
//            "text-align": "center"
//        });

        $(".abonnement_standardButton").css({
            "padding": "10px"
        });

        $(".abonnement_list").css({
            "display": "inline-block",
            "list-style": "none"
        });

        $(".abonnement_list").children('li').css({ "padding": "2px" });
        // validate signup form on keyup and submit
        $("form").validate();
    });

});