var MAXLEVEL = 5;
var STARTWIDTH = 480;
var STARTWIDTH_REPLY = 380;

$(function() {
    $("#guestbook").find(".guestbookEntry").each(function(i) {
        var id = $(this).attr("id");
        var level = id.substring(0, id.indexOf("_"));
        level = level > MAXLEVEL ? MAXLEVEL : level;
        if(level > 0) {
            $(this).css({
                width: $(this).width() - (20 * level) + "px",
                marginLeft: $(this).css("margin-left").replace("px", "") + (20 * level) + "px"
            });
            $(this).data("level", {lvl: level});
        }
        

    });
    
    /*if(location.hash != '') {
        $(location.hash).css({ backgroundColor: '#B1EDEF'});
    }*/
    $('div.block div.guestbookEntry').eq(0).css('marginTop', '0px');
    
    var replyForm = $(
        '<div>' +
            '<form id="topLevelReply" action="Guestbook.aspx" method="post" enctype="multipart/form-data">' +
                '<input type="hidden" name="ParentId" value="" />' +
                '<label for="Name">' +
                    'Naam *' +
                '</label>' +
                '<input type="text" name="Name" id="Name" size="25" maxlength="50" style="width: ' + STARTWIDTH_REPLY + 'px;" /><br />' +
                '<label for="Email">' +
                    'E-mailadres *' +
                '</label>' +
                '<input type="text" name="Email" id="Email" size="25" maxlength="100" style="width: ' + STARTWIDTH_REPLY + 'px;" /><br />' +
                '<label for="Picture">' +
					'Foto' + 
				'</label>' +
				'<input type="file" name="Picture" id="Picture" size="25" style="width: ' + STARTWIDTH_REPLY + 'px;" /><br />' +
				'<label>&nbsp;</label>' + $('#maxFileSize').text() + '<br />' +
                '<label for="Caption">' +
					'Bijschrift' + 
				'</label>' +
				'<input type="text" name="Caption" id="Caption" size="25" maxlength="100" style="width: ' + STARTWIDTH_REPLY + 'px;" /><br />' +
                '<label for="Text">' +
                    'Tekst *' +
                '</label>' +
                '<textarea name="Text" id="Text" cols="50" rows="8" style="width: ' + STARTWIDTH_REPLY + 'px;"></textarea><br />' +
                '<input type="submit" class="button" name="submitReply" value="Reageer!" />' +
            '</form>' +
        '</div>');
    replyForm.find("form").eq(0).bind('submit', checkReply);
    $("#reply").html(replyForm);
});

function checkReply(event) {
    //event.preventDefault();
    if(event && event.data && event.data.ParentId && event.data.ParentId != null) {
        var form = $("#frm_" + event.data.ParentId);
    } else {
        var form = $("#topLevelReply");
    }
    var err = false;
    var name = form.find("#Name");
    if(form.find("#Name").val() == '') {
        name.css({backgroundColor: '#ff0000', border: '1px solid #a5afb9', color: '#ffffff'});
        err = true;
    } else {
        name.css({backgroundColor: '#ffffff', border: '1px solid #a5afb9', color: '#000000'});
    }
    
    var email = form.find("#Email");
    if(email.val() == '') {
        email.css({backgroundColor: '#ff0000', border: '1px solid #a5afb9', color: '#ffffff'});
        err = true;
    } else if(!email.val().match(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i)) {
        email.css({backgroundColor: '#ff0000', border: '1px solid #a5afb9', color: '#ffffff'});
        err = true;
    } else {
        email.css({backgroundColor: '#ffffff', border: '1px solid #a5afb9', color: '#000000'});
    }
    
    var text = form.find("#Text");
    if(text.val() == '') {
        text.css({backgroundColor: '#ff0000', border: '1px solid #a5afb9', color: '#ffffff'});
        err = true;
    } else {
        text.css({backgroundColor: '#ffffff', border: '1px solid #a5afb9', color: '#000000'});
    }
    
    if(err) {
        event.preventDefault();
    }
    
}

function toggleReplyForm(postId) {
    var replyDiv = $("#reply_" + postId);
    
    if(replyDiv.is(":hidden")) {
        var level = replyDiv.parent().data("level") != undefined ? replyDiv.parent().data("level").lvl : 0;
        var form = $('<form action="Guestbook.aspx" method="post" id="frm_' + postId + '" enctype="multipart/form-data"></form>');
        form.append('<input type="hidden" name="ParentId" value="' + postId + '" />');
        form.append('<label for="Name">Naam* </label>');
        form.append('<input type="text" name="Name" id="Name" size="25" maxlength="50" style="width: ' + (STARTWIDTH_REPLY - (level * 20)) + 'px;" /><br />');
        form.append('<label for="Email">E-mailadres* </label>');
        form.append('<input type="text" name="Email" id="Email" size="25" maxlength="100" style="width: ' + (STARTWIDTH_REPLY - (level * 20)) + 'px;" /><br />');
        form.append('<label for="Picture">Foto</label>');
		form.append('<input type="file" name="Picture" id="Picture" size="25" style="width: ' + (STARTWIDTH_REPLY - (level * 20)) + 'px;" /><br />');
		form.append($('<label />').html('&nbsp;'));
		form.append($('#maxFileSize').text() + '<br />');
        form.append('<label for="Caption">Bijschrift</label>');
		form.append('<input type="text" name="Caption" id="Caption" size="25" maxlength="100" style="width: ' + (STARTWIDTH_REPLY - (level * 20)) + 'px;" /><br />');
		form.append('<label for="Text">Tekst* </label>');
        form.append('<textarea name="Text" id="Text" cols="50" rows="8" style="width: ' + (STARTWIDTH_REPLY - (level * 20)) + 'px;"></textarea><br />');
        form.append('<input type="submit" class="button" name="submitReply" value="Reageer!" />');
        form.bind('submit', {ParentId: postId}, checkReply);
        
        var formHtml = $('<div style="width: ' + (STARTWIDTH - (level * 20)) + 'px;">');
        var block = $('<div style="width: ' + (STARTWIDTH - (level * 20)) + 'px;"></div>');
        block.append(form);
        formHtml.append(block);
        
        replyDiv.html(formHtml);
        $("div[id^=reply_]:visible").each(function() {
            if($(this).attr("id") != "reply_" + postId) {
                $(this).slideUp(300, function() {
                    $(this).empty();
                });
            }
        });
        replyDiv.slideDown(300);
    } else {
        replyDiv.slideUp(300, function() {
            replyDiv.empty();
        });
    }
}