<!DOCTYPE html>
<html>
    <head>
        <title>Symbolic Demo</title>
        <meta charset="UTF-8">
        <link href="../src/css/symbolic.css" rel="stylesheet">
    </head>
    <body>
        <div id="element"></div>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
        <script src="../src/js/symbolic.js"></script>
        <script>
            $(function() {
                $("#element").symbolic({
                    palette: [
                        ["\uD83D\uDE02", "\uD83D\uDE05", "\uD83D\uDE04", "\uD83D\uDE06", "\uD83D\uDE00"],
                        ["\uD83D\uDE39", "\uD83D\uDE38", "\uD83D\uDE3C", "\uD83D\uDE0F"]
                    ],
                    initial: "\uD83D\uDE04"
                }).on("selected.symbolic", function(e, value) {
                    console.log("Selected: ", value);
                });
            });
        </script>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <title>Symbolic Demo</title>
        <meta charset="UTF-8">
        <link href="../src/css/symbolic.css" rel="stylesheet">
    </head>
    <body>
        <div id="element"></div>
        <div style="font-size:18px">
            <label for="custom-value">Set custom value:</label>
            <input type="text" id="custom-value" maxlength="2" style="width:15px" value="A"/>
            <a href="#" id="btn-set">Set</a>
        </div>
        <div id="log" style="font-size:18px"></div>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
        <script src="../src/js/symbolic.js"></script>
        <script>
            $(function() {
                $("#element").symbolic({
                    palette: [
                        ["\uD83D\uDE02", "\uD83D\uDE05", "\uD83D\uDE04", "\uD83D\uDE06", "\uD83D\uDE00"],
                        ["\uD83D\uDE39", "\uD83D\uDE38", "\uD83D\uDE3C", "\uD83D\uDE0F"]
                    ],
                    initial: "\uD83D\uDE04"
                }).on("selected.symbolic", function(e, value) {
                    $("#log").append("<span>Selected:&nbsp;" + value + "</span><br>")
                });
                $("#btn-set").click(function() {
                    console.log("Button set clicked");
                    var text = $("#custom-value").val();
                    $("#element").symbolic("set", text);
                });
            });
        </script>
    </body>
</html>

Enhance example html to demonstrate 'select' event and 'set' call
Enhance example html to demonstrate 'select' event and 'set' call
