$(function(){
    var url = "/api/emoji/?callback={callback}";
    $.getJSONP( url, function(json) {
        var code = '';
        for (var i in json.emoji){
            code += '<a href="javascript:void(0);" onclick="insertEmoji(\'' + json.emoji[i] + '\');"><img src = "/img/shared/emoji/' + json.emoji[i] + '.gif" class="img_emoji" /></a>';
        }
        $("#emoji").html(code);
        $("#emoji2").html(code);

        $("img.img_emoji").hover(
            function(){
                this.style.borderColor = "green";
            },
            function(){
                this.style.borderColor = "gray";
            }
        );

        $("#entry_title").focus(
            function(){
                $("#active_element").val('entry_title');
            }
        );

        $("#entry_body").focus(
            function(){
                $("#active_element").val('entry_body');
            }
        );

        $("#comment_title").focus(
            function(){
                $("#active_element").val('comment_title');
            }
        );

        $("#comment_body").focus(
            function(){
                $("#active_element").val('comment_body');
            }
        );

        $("button#emoji_view").click(
            function(){
                $("#emoji").toggle(1000);
            }
        );
    });
});

function getAreaRange(obj) {
   var selection = new Selection(obj);
    var pos = selection.create();

 return pos;


    var pos = new Object();

    if (isIE) {
        obj.focus();
        var range = document.selection.createRange();
        var clone = range.duplicate();

        clone.moveToElementText(obj);
        clone.setEndPoint( 'EndToEnd', range );

        pos.start = clone.text.length - range.text.length;
        pos.end = clone.text.length - range.text.length + range.text.length;
    } else if(window.getSelection()) {
        pos.start = obj.selectionStart;
        pos.end = obj.selectionEnd;
    }

    return pos;
}
var isIE = (navigator.appName.toLowerCase().indexOf('internet explorer')+1?1:0);

function insertEmoji(emoji_code) {
    var obj = $("#active_element").val();

    var target = document.getElementById(obj);
    var pos = getAreaRange(target);

    var val = target.value;
    var range = val.slice(pos.start, pos.end);
    var beforeNode = val.slice(0, pos.start);
    var afterNode = val.slice(pos.end);
    var insertNode;

    if (range || pos.start != pos.end) {
        insertNode = '{# EMOJI_' + emoji_code + ' #}';
        var insposstr = beforeNode + insertNode;
        target.focus();
        target.value = beforeNode + insertNode + afterNode;
        target.setSelectionRange(insposstr.length, insposstr.length);
    } else if (pos.start == pos.end) {
        insertNode = '{# EMOJI_' + emoji_code + ' #}';
        var insposstr = beforeNode + insertNode;
        target.focus();
        target.value = beforeNode + insertNode + afterNode;
        if (isIE){
          var range = target.createTextRange();
          range.move('character', insposstr.length);
          range.select();
        }
        else{
          target.setSelectionRange(insposstr.length, insposstr.length);
        }
    }
}