$(document).ready(function(){
        var color = "#FFFFFF";
        var edit = function(tag1, tag2){
            string = $("#input").val();
            start = $("#input")[0].selectionStart;
            end = $("#input")[0].selectionEnd;
            console.log("string: \"" + string + "\"; start: " + start + "; end: " + end);
            $("#input").val(string.slice(0, start) + tag1 + string.slice(start, end) + tag2 + string.slice(end));
            var newpos = end + tag1.length + tag2.length;
            $("#input")[0].setSelectionRange(newpos, newpos);
        }
        $("#colorbutton").click(function(){
            $("#colorchart").css("display", "block");
        });
        $("#colorchart > table > tbody > tr > td").click(function(){
            color = $(this).css("background-color");
            console.log(color);
        });
        $("#boldbutton").click(function(){
            $("#derp").html($("#input")[0].selectionStart + ' - ' + $("#input")[0].selectionEnd);
        });
        $("#italicbutton").click(edit("[i]", "[/i]"));
    });