<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style>
            input {
                width: 10px;
                height: 10px;
                padding: 2px;
                border: 1px solid rgb(128, 128, 128);
                border-radius: 8px;
                margin: 2px;
                background: -moz-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
                background: -webkit-gradient(linear, left top, left bottom, from(rgb(224, 224, 224)), to(rgb(192, 192, 192)));
            }
            input[src="symbols/loading.svg"] {
                width: 16px;
                height: 16px;
                padding: 0;
                border: 0;
                background: transparent;
            }
            div.symbol {
                float: left;
                position: relative;
                width: 256px;
                height: 256px;
                margin: 4px;
                background-image: 'grid.png' repeat;
            }
            div.symbol > div {
                float: left;
                width: 16px;
                height: 16px;
            }
            img {
                position: relative;
                top: -256px;
                width: 256px;
                height: 256px;
            }
        </style>
        <script src="../../../../build/jquery/jquery.js"></script>
        <script src="../../../Ox.js"></script>
        <script>
            $(function() {
                var $body = $('body')
                    .css({
                        margin: '2px',
                        background: 'rgb(240, 240, 240)'
                    }),
                    $buttons = $('<div>').appendTo($body),
                    $symbols = $('<div>').appendTo($body);
                [
                    'add', 'remove', 'close', 'select',
                    'arrowLeft', 'arrowRight', 'arrowUp', 'arrowDown',
                    'left', 'right', 'up', 'down',
                    'pause', 'playInToOut', 'goToIn', 'goToOut', 'setIn', 'setOut',
                    'goToPoster', 'setPoster',
                    'center', 'zoom', 'grow', 'shrink', 'fill', 'fit',
                    'unmute', 'volumeUp', 'volumeDown', 'mute',
                    'undo', 'redo', 'unlock', 'lock',
                    'mount', 'unmount', 'sync',
                    'info', 'warning', 'help',
                    'check', 'embed', 'bracket',
                    'delete', 'download', 'edit', 'find', 'flag', 'like',
                    'publish', 'set', 'star', 'user', 'view', 'loading'
                ].forEach(function(symbol) {
                    var $symbol, src = 'svg/symbol' + Ox.toTitleCase(symbol) + '.svg';
                    console.log(symbol)
                    $('<input>')
                        .attr({
                            src: src,
                            title: symbol,
                            type: 'image'
                        })
                        .appendTo($buttons);
                    $symbol = $('<div>')
                        .addClass('symbol')
                        .appendTo($symbols);
                    for (var i = 0; i < 256; i++) {
                        color = (i + Math.floor(i / 16)) % 2 == 0 ? 224 : 192;
                        $('<div>')
                            .css({
                                backgroundColor: 'rgb(' + [color, color, color].join(', ') + ')'
                            })
                            .appendTo($symbol)
                    }
                    $('<img>')
                        .attr({
                            src: src
                        })
                        .appendTo($symbol);
                });
            });
        </script>
    </head>
    <body></body>
</html>