Cacher is the code snippet organizer for pro developers

            // HTML structure
            for( var i = 0; i < AMOUNTOFCOLORS; i++ ) {
                $('#colors').append('<li> \
                        <input style="width: 1em; height: 1em;" class="clickableColor" /> \
                    </li>');
            }

            $('.clickableColor :first').addClass('activeColor');

            // shortcuts for changing color. XXX: selector fails!
            shortcut.add('q', function(e) {
                if( $('.activeColor').prev() ) {
                    console.log('setting prev');
                    $('.activeColor').prev().focus();
                }
            });

            shortcut.add('w', function(e) {
                if( $('.activeColor').next() ) {
                    console.log('setting next');
                    $('.activeColor').next().focus();
                }
            });