var comment_digest='';
var comment_current_page=1;
var comment_per_pages=1;
var comment_total=0;
var comment_setup_uri='';

function loadComments(uri, page, perPages) {
    comment_current_page = page;
    comment_per_pages=perPages;
    var client = new XMLHttpRequest();
    client.open('GET', uri+'/'+page+'/'+perPages);
    client.setRequestHeader("Content-Type", "text/json;charset=UTF-8");
    client.send('');
    client.onreadystatechange = function() {
        if(this.readyState == 4) {
            var reply = JSON.parse(client.responseText);
            comment_total = reply.total;
            var items = reply.comments;
            var output = "";
            for (var i=0; i<items.length; i++) {
                var hour = items[i].hour; if (hour<10) hour='0'+hour;
                var minute = items[i].minute; if (minute<10) minute='0'+minute;
                var time = items[i].day+'.'+items[i].month+'.'+items[i].year+' klo '+hour+"."+minute;
                var content = items[i].content;
                output += "<h4>"+content.name+", "+time+"</h4>";
                output += "<p>"+content.text+"</p>";
            }
            if (output!="") {
                $("#comments").html(output);
                pagingComments(uri);
            }
        }
    };
}

function setupComment(uri) {
    comment_setup_uri = uri;
    var client = new XMLHttpRequest();
    client.open('POST', uri);
    client.setRequestHeader("Content-Type", "text/json;charset=UTF-8");
    client.send('');
    client.onreadystatechange = function() {
        if(this.readyState == 4) {
            var reply = JSON.parse(client.responseText);
            comment_digest = reply.digest;
            $("#captcha").html(reply.question);
            $("#comment_ok").hide();
        }
    };
    $("#comment").show();
}

function saveComment(uri) {
    var answer = document.getElementById("comment_answer").value;
    var text = document.getElementById("comment_text").value;
    var name = document.getElementById("comment_name").value;
    var client = new XMLHttpRequest();
    var json = {"digest":comment_digest, "answer":answer, "content":{"name":name, "text":text} };
    var returnCode = 0;

    client.open('PUT', uri);
    client.setRequestHeader("Content-Type", "text/json;charset=UTF-8");
    client.send(JSON.stringify(json));
    client.onreadystatechange = function() {
        if(this.readyState == 4) {
            var reply = JSON.parse(client.responseText);
            returnCode = reply.returnCode;
            if (returnCode != 0) {
                $("#captcha_error").show();
                setupComment(comment_setup_uri);
            }
            else {
                $("#captcha_error").hide();
                $("#comment").hide();
                $("#comment_ok").show();
                document.getElementById("comment_answer").value='';
                document.getElementById("comment_text").value='';
                document.getElementById("comment_name").value='';
                loadComments(uri, 1, comment_per_pages);
            }
        }
    };
}

function pagingComments(uri) {
    var pages = comment_total / comment_per_pages; 
    if (pages>1) {
        var output='<ul>';
        if (comment_current_page>1) {
            output+='<li class="previous"><a href="javascript:loadComments(\''+uri+'\','+(comment_current_page-1)+','+comment_per_pages+');">Edellinen</a></li>';
        }
        else {
            output+='<li class="previous inactive"><span>Edellinen</span></li>';
        }
        for (var i=0; i<pages; i++) {
            if (i+1==comment_current_page) {
                output+="<li>"+(i+1)+"</li>";
            }
            else {
                output+='<li><a href="javascript:loadComments(\''+uri+'\','+(i+1)+','+comment_per_pages+');">'+(i+1)+'</a></li>';
            }
        }
        if (comment_current_page<pages) {
            output+='<li class="next"><a href="javascript:loadComments(\''+uri+'\','+(comment_current_page+1)+','+comment_per_pages+');">Seuraava</a></li>';
        }
        else {
            output+='<li class="next inactive"><span>Seuraava</span></li>';
        }
        output+="</ul>";
        $("#comment_paging").html(output);
        $("#comment_paging").show();
    }
    else {
        $("#comment_paging").html('');
        $("#comment_paging").hide();
    }
}