$(
    function () {
        //find comment form
        //on submit button click validate fields
        //then do an ajax submit
        var itemIdField = $("input[name='itemId']", "#commentsSubmitForm");
        var replyToId = $("input[name='replyToId']", "#commentsSubmitForm");
        var nameField = $("input[name='name']", "#commentsSubmitForm");
        var emailField = $("input[name='email']", "#commentsSubmitForm");
        var websiteField = $("input[name='website']", "#commentsSubmitForm");
        var commentsField = $("textarea[name='comments']", "#commentsSubmitForm");
        var similarField = $("input[name='similar']", "#commentsSubmitForm");

        var uploadLink = $("#uplFanArtLnk");


        uploadLink.click(
            function () {
                $("#addFanArtDlg").remove();
                var dlgHtml = $(
                    "<form id='addFanArtDlg' title='Upload your fan art' target='upl' action='/tutorials/fupl.aspx' method='POST' enctype='multipart/form-data'>" +
                        "Image:<input id='fanArtImg' name='fanArtImg' type='file' size='35'/>" +
                        "<input type='submit' value='Upload' class='ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-state-active'/><br/>" +
                        "<iframe style='height:320px;width:500px;' name='upl' src='/tutorials/fupl.aspx'></iframe>" +
                    "</form>"
                 );
                $("body").append(dlgHtml);

                //$("#addFanArtDlg p").append(
                //"<form target='upl' action='/tutorials/fupl.aspx' method='POST' enctype='multipart/form-data'><input id='fanArtImg' name='fanArtImg' type='file' size='45'/></form>"
                //);
                $("#addFanArtDlg").dialog(
                {
                    modal: true, width: 600,
                    buttons:
                        {
                            OK: function () { $("#fanArtImg").show(); $(this).dialog("close"); },
                            Cancel: function () { $(this).dialog("close"); }
                        }
                });
            }
        );


        nameField
            .focus(function () { $(this).val($(this).val().replace("Name(required)", "")); })
            .blur(function () { if ($(this).val() == "") { $(this).val("Name(required)"); } });
        emailField
            .focus(function () { $(this).val($(this).val().replace("Email(required)", "")); })
            .blur(function () { if ($(this).val() == "") { $(this).val("Email(required)"); } });
        websiteField
            .focus(function () { $(this).val($(this).val().replace("Website(optional)", "")); })
            .blur(function () { if ($(this).val() == "") { $(this).val("Website(optional)"); } });
        $(".commentSubmitButton", "#commentsSubmitForm").click(
            function () {
                if (nameField.val() == "Name(required)") { nameField.val(""); };
                if (emailField.val() == "Email(required)") { emailField.val(""); };
                if (websiteField.val() == "Website(optional)") { websiteField.val(""); };
                var emailNotifyField = $("#emailNotify:checked", "#commentsSubmitForm");
                if (!nameIsValid(nameField.val())) {
                    nameField.addClass("commentFieldInvalid").focus();
                } else {
                    nameField.removeClass("commentFieldInvalid");
                    if (!emailIsValid(emailField.val())) {
                        emailField.addClass("commentFieldInvalid").focus();
                    } else {
                        emailField.removeClass("commentFieldInvalid");

                        if (!websiteIsValid(websiteField.val())) {
                            websiteField.addClass("commentFieldInvalid").focus();
                        } else {
                            websiteField.removeClass("commentFieldInvalid");
                            //alert("validare completa");


                            var saveCommentsURL = document.location.toString();
                            var tutResObj = { cmd: "addComment", replyToId: replyToId.val(), name: nameField.val(), email: emailField.val(), website: websiteField.val(), comment: stripHTML(commentsField.val()), emailNotify: emailNotifyField.length, similar: similarField.val() };
                            if (saveCommentsURL.indexOf("/resources/") >= 0) {
                                saveCommentsURL = saveCommentsURL.replace(".aspx", "").replace("/resources/", "/resources/default.aspx?page=");
                                tutResObj.resourceId = itemIdField.val();
                            } if (saveCommentsURL.indexOf("/design-news/") >= 0) {
                                if (saveCommentsURL.indexOf("default.aspx?page") >= 0) {
                                    
                                } else {
                                    saveCommentsURL = saveCommentsURL.replace(".aspx", "").replace("/design-news/", "/design-news/default.aspx?page=");
                                }
                                tutResObj.designNewsId = itemIdField.val();
                            } else {
                                tutResObj.tutorialId = itemIdField.val();
                            }
                            $.get(
                            saveCommentsURL,
                            tutResObj,
                            function (data) {


                                var lastGravatar = $(".commentsGravatar").last();
                                var lastComment = $(".comment").last();
                                var newGravatar;
                                var newComment;


                                if (lastGravatar.length > 0) {
                                    newGravatar = lastGravatar.clone();
                                    newComment = lastComment.clone();
                                } else {
                                    noPreviousComments = true;
                                    lastComment = $(".commentsArea h3");
                                    newGravatar = $("<img alt=\"\" src=\"\" class=\"commentsGravatar\">");
                                    newComment = $("<div class=\"comment\" ><div class=\"commentHeader\"><div class=\"commentUser\"></div><div class=\"commentDate\"></div>" +
                                                 "<div class=\"commentHeaderEnd\"></div></div><div class=\"commentText\"></div></div>");
                                }


                                //picture, name, link, date, message
                                newGravatar.attr("src", "http://www.gravatar.com/avatar/" + md5(emailField.val()) + "?d=http://www.psd-dude.com/tutorials/images/no-gravatar.gif");
                                newGravatar.attr("alt", nameField.val());
                                if (websiteField.val() != "") {
                                    newComment.find(".commentUser").html("<a href=\"" + websiteField.val() + "\" rel=\"external nofollow\">" + nameField.val() + "</a>");
                                } else {
                                    newComment.find(".commentUser").html(nameField.val());
                                }
                                newComment.find(".commentDate").html("<i>pending approval</i>");
                                newComment.find(".commentText").html(stripHTML(commentsField.val()));

                                newComment.find(".commentText").append("<img src='" + similarField.val() + "' class='fanArtImg'/>");
                                lastComment.after(newGravatar);
                                newGravatar.after(newComment);


                                var x = $(lastComment).offset().top - 100; // 100 provides buffer in viewport
                                $('html,body').animate({ scrollTop: x }, 500);

                                if (data == 1) {
                                    nameField.val("").blur();
                                    emailField.val("").blur();
                                    websiteField.val("").blur();
                                    commentsField.val("");
                                } else {
                                    alert("There was an error while trying to submit your message. Please do not use HTML tags inside the message.");
                                }
                            }


                            );
                        }
                    }


                }


                return false;
            }
        );
    }
);

var reName=/^[A-Za-zÀ-ÖØ-öø-ÿ '\-\.]{1,22}$/;
var reEmail=/^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
var reWebsite = /^(http:\/\/|\.\/|\/).[\w-]+(\.[\w-]+)*(\/\w+(\.\w+)?)*(\/|\?\w*=\w*(&\w*=\w*)*)?$/;

function nameIsValid(name) {
    return reName.test(name);
}
function emailIsValid(email) {
    return reEmail.test(email);
}
function websiteIsValid(website) {
    return reWebsite.test(website) || website=="";
}

function stripHTML(str) {
    return str.replace(/<.*?>/g, "");
}