var isFirstTime = true;
var max_comment = 300;

var emo_path = "/images/emo/";
/* emoticon */
var emos = [
[":)", "emo_1"],
[":D", "emo_2"],
[":P", "emo_3"],
[":x", "emo_4"],
[":'>", "emo_5"],
[":*", "emo_6"],
[":>", "emo_7"],
["B-)", "emo_8"],
["X(", "emo_9"],
[":(", "emo_10"],
[":((", "emo_11"],
["=))", "emo_12"],
[":-S", "emo_13"],
["8-}", "emo_14"],
[";)", "emo_15"],
[";;)", "emo_16"],
[":-?", "emo_17"],
[":|", "emo_18"]
];

$(document).ready(function() {
    $("#comment_box").val('Viết bình luận ...');
    $("#comment_box").click(function() {
        loadCommentBox();
    });
    $("#comment_box").keydown(limitChar);
    $("#comment_box").change(limitChar);
    $("#comment_box").blur(limitChar);
    $("#comment_box").focus(limitChar);
    
    _initialize();
});

function limitChar(e) {
    var comment_count = $(this).val().length;
    var char_left = 0;

    if (comment_count > max_comment) {
        this.value = this.value.substring(0, max_comment);
        char_left = 0;
    } else {
        char_left = max_comment - comment_count;
    }

    $("#div_comment_count").text('Còn ' + char_left + ' ký tự');
}

function loadCommentBox() {
    if (isFirstTime) {
        $("#div_composer_avatar").show();
        $("#div_comment_style").show();
        $("#div_comment_action").show();
        $("#comment_box").val('');
        $("#comment_box").removeClass('form_text_binhluan').addClass('form_binhluan');
        //$("#div_comment").addClass('khoang_7_binhluan');
        isFirstTime = false;
        $("#div_comment_count").text('Còn ' + max_comment + ' ký tự');
    }
}

function reloadCommentBox() {
    $("#div_composer_avatar").hide();
    $("#div_comment_style").hide();
    $("#div_comment_action").hide();
    $("#comment_box").val('Viết bình luận ...');
    $("#comment_box").removeClass('form_binhluan').addClass('form_text_binhluan');
    //$("#div_comment").removeClass('khoang_7_binhluan');
    isFirstTime = true;
}


function _initialize() {
    $("#comment_bold").click(_boldHandler);
    $("#comment_itatlic").click(_italicHandler);
    $("#comment_underline").click(_underlineHandler);
    $("#comment_emo").click(_emoHandler);
}

function _boldHandler() {
    _addTag('B');
}

function _italicHandler(e) {
    _addTag('I');
}

function _underlineHandler(e) {
    _addTag('U');
}

function _emoHandler(e) {
    if ($("#emo_box").length < 1) {
        var div_emo = "<div id=\"emo_box\"><div class=\"emo_inner\">";
        for (i in emos) {
            div_emo += "<a id=\"emo_" + i + "\" href=\"javascript:;\" title=\"" + emos[i][0] + "\"><img src=\"" + emo_path + emos[i][1] + ".gif\" alt=\"emo_" + i + "\" /></a>";
        }
        div_emo += "</div></div>";

        $(this).parent().append(div_emo);

        for (i in emos) {
            $("#emo_" + i).click(_childEmoHandler);
        }
    } else {
        if ($("#emo_box").css('display') == 'none') {
            $("#emo_box").show();
        } else {
            $("#emo_box").hide();
        }
    }
}

function _childEmoHandler(e) {
    var id = $(this).attr('id').toString().split('_')[1];
    _addEmo(emos[id][0]);
    $("#emo_box").hide();
}

function _addTag(tag) {
    _replaceSelection('[' + tag + ']' + _getSelection().text + '[/' + tag + ']', true);
    $("#comment_box").focus();
}

function _addEmo(emo) {
    _replaceSelection(emo);
    $("#comment_box").focus();
}

function _getSelection() {

    var e = document.getElementById("comment_box");

    return (

        /* mozilla / dom 3.0 */
	    ('selectionStart' in e && function() {
	        var l = e.selectionEnd - e.selectionStart;
	        return { start: e.selectionStart, end: e.selectionEnd, length: l, text: e.value.substr(e.selectionStart, l) };
	    }) ||

        /* exploder */
	    (document.selection && function() {

	        e.focus();

	        var r = document.selection.createRange();
	        if (r == null) {
	            return { start: 0, end: e.value.length, length: 0 }
	        }

	        var re = e.createTextRange();
	        var rc = re.duplicate();
	        re.moveToBookmark(r.getBookmark());
	        rc.setEndPoint('EndToStart', re);

	        return { start: rc.text.length, end: rc.text.length + r.text.length, length: r.text.length, text: r.text };
	    }) ||

        /* browser not supported */
	    function() {
	        return { start: 0, end: e.value.length, length: 0 };
	    }
    )();
}

function _replaceSelection() {

    var e = document.getElementById("comment_box");
    var text = arguments[0] || '';

    return (

    /* mozilla / dom 3.0 */
		('selectionStart' in e && function() {
		    e.value = e.value.substr(0, e.selectionStart) + text + e.value.substr(e.selectionEnd, e.value.length);
		    return this;
		}) ||

    /* exploder */
		(document.selection && function() {
		    e.focus();
		    document.selection.createRange().text = text;
		    return this;
		}) ||

    /* browser not supported */
		function() {
		    e.value += text;
		    return this;
		}

	)();
}