﻿/// <reference path="jquery-1.4.1.min-vsdoc.js"/>
/// <reference path="CommentsRepository.js"/>
/// <reference path="http://api.recaptcha.net/js/recaptcha_ajax.js"/>
$(document).ready(function() {
    RegisterEventHandlers();
});

function RegisterEventHandlers() {
    $(".commentsButton").click(function() {
        DisplayComments(this.href);
        return false;
    });

    $(".submitComment").click(function() {
        HandleSubmitButton(this);
    });
}

function DisplayComments(commentHref) {
    var commentHrefArray = commentHref.toString().split("/");
    var articleId = commentHrefArray[commentHrefArray.length - 1];

    ResetCommentDisplay(articleId);

    var targetElement = $("#" + articleId);

    targetElement.slideToggle();

    DisplayRecaptcha(articleId);

    RetrieveAndRenderComments(articleId);

    return false;
}

function RetrieveAndRenderComments(articleId) {
    var url = "/Comments/GetComments/" + articleId;
    
    var comments = '';

    $.getJSON(url, null, function(data) {
        if(data.length == 0)
            comments = 'No comments...';
            
        $.each(data, function(index, value) {
            comments += "<div class='comment'>\n";
            
            if(value.Website == '') {
                comments += "<div class='commentSigLine'>On " + value.CommentDateTimeString + " " + value.Name + " said...</div>\n";
            } else {
                comments += "<div class='commentSigLine'>On " + value.CommentDateTimeString + " <a href='" + value.Website + "' target='_new'>" + value.Name + "</a> said...</div>\n";
            }
            
            comments += "<div class='commentBody'>" + value.CommentBody + "</div>\n";
            comments += "</div>\n";
        });

        $("#" + articleId + " .comments").html(comments);
    });
}

function HandleSubmitButton(submitButton) {
    $(submitButton).attr("disabled","true");
    
    var articleId = $(submitButton).parent().parent().parent().parent().attr("id");
    
    if(ValidateCommentArea(articleId)) {
        
        var name = $("#commenterName-" + articleId).val();
        var website = $("#commenterWebsite-" + articleId).val();
        var comment = $("#actualComment-" + articleId).val();

        $.post("/Comments/SubmitComment",
               { challenge: Recaptcha.get_challenge(), 
                 response: Recaptcha.get_response(), 
                 name: name, 
                 website: website, 
                 comment: comment,
                 articleId: articleId },
               function(data) {
                    HandleSubmitResponse(articleId,data);
                    
                    $(submitButton).attr("disabled","");
               })
    } else {
        $(submitButton).attr("disabled","");
    }
}

function ResetCommentDisplay(articleId) {
    $(".commentsDisplay").each(function() {
        var currentElement = $(this);

        if (currentElement.attr("id") != articleId)
            currentElement.hide('slow');
    });
}

function DisplayRecaptcha(articleId) {
    var recapId = "recaptcha-" + articleId;

    Recaptcha.create("6LdXfAgAAAAAADJ7lQDGOL6lmONKJtJCV-EWnmHN", recapId, {
        lang: 'en'
    });
    
    return false;
}

function HandleSubmitResponse(articleId,response) {
    var responseArray = response.split(",");
    
    if(responseArray[0].toString() == "false") {
        Recaptcha.reload();
    } else {
        RetrieveAndRenderComments(articleId);
        ClearCommentsForm(articleId);
    }
}

function ClearCommentsForm(articleId) {
    $("#commenterName-" + articleId).val("");
    $("#commenterWebsite-" + articleId).val("");
    $("#actualComment-" + articleId).val("");
    
    Recaptcha.reload();
}

function ValidateCommentArea(articleId) {
    var formValidity = 0;
    
    var name = $("#commenterName-" + articleId);
    var website = $("#commenterWebsite-" + articleId);
    var comment = $("#actualComment-" + articleId);
    
    formValidity = RequiredField(name);
    formValidity += RequiredField(comment);
    formValidity += MustBeNothingOrAUrl(website);
    
    if(formValidity == 3)
        return true;
    return false;
}

function RequiredField(element) {
    if($.trim(element.val()) == '') {
        element.addClass("invalidField");
        return 0;
    } else {
        element.removeClass("invalidField");
        return 1;
    }
}

function MustBeNothingOrAUrl(element) {
    var urlValue = $.trim(element.val());
    
    if(urlValue == '') {
        element.removeClass("invalidField");
        return 1;
    }
    
    var urlPattern = new RegExp("((http|https)(:\/\/))?([a-zA-Z0-9]+[.]{1}){2}[a-zA-z0-9]+(\/{1}[a-zA-Z0-9]+)*\/?", "i");
    
    if(urlPattern.test(urlValue)) {
        element.removeClass("invalidField");
        return 1;
    }
        
    var secondUrlPattern = new RegExp("([a-zA-Z0-9]+[.]{1}){2}[a-zA-z0-9]+(\/{1}[a-zA-Z0-9]+)*\/?", "i");
    
    if(secondUrlPattern.test(urlValue)) {
        element.removeClass("invalidField");
        return 1;
    }
        
    element.addClass("invalidField");
    return 0;
}