122

src/main/webapp/static/ace/docs/assets/js/language/css.js

@@ -0,0 +1,72 @@
+/**
+ * CSS patterns
+ *
+ * @author Craig Campbell
+ * @version 1.0.9
+ */
+Rainbow.extend('css', [
+    {
+        'name': 'comment',
+        'pattern': /\/\*[\s\S]*?\*\//gm
+    },
+    {
+        'name': 'constant.hex-color',
+        'pattern': /#([a-f0-9]{3}|[a-f0-9]{6})(?=;|\s|,|\))/gi
+    },
+    {
+        'matches': {
+            1: 'constant.numeric',
+            2: 'keyword.unit'
+        },
+        'pattern': /(\d+)(px|em|cm|s|%)?/g
+    },
+    {
+        'name': 'string',
+        'pattern': /('|")(.*?)\1/g
+    },
+    {
+        'name': 'support.css-property',
+        'matches': {
+            1: 'support.vendor-prefix'
+        },
+        'pattern': /(-o-|-moz-|-webkit-|-ms-)?[\w-]+(?=\s?:)(?!.*\{)/g
+    },
+    {
+        'matches': {
+            1: [
+                {
+                    'name': 'entity.name.sass',
+                    'pattern': /&/g
+                },
+                {
+                    'name': 'direct-descendant',
+                    'pattern': />/g
+                },
+                {
+                    'name': 'entity.name.class',
+                    'pattern': /\.[\w\-_]+/g
+                },
+                {
+                    'name': 'entity.name.id',
+                    'pattern': /\#[\w\-_]+/g
+                },
+                {
+                    'name': 'entity.name.pseudo',
+                    'pattern': /:[\w\-_]+/g
+                },
+                {
+                    'name': 'entity.name.tag',
+                    'pattern': /\w+/g
+                }
+            ]
+        },
+        'pattern': /([\w\ ,\n:\.\#\&\;\-_]+)(?=.*\{)/g
+    },
+    {
+        'matches': {
+            2: 'support.vendor-prefix',
+            3: 'support.css-value'
+        },
+        'pattern': /(:|,)\s*(-o-|-moz-|-webkit-|-ms-)?([a-zA-Z-]*)(?=\b)(?!.*\{)/g
+    }
+], true);

src/main/webapp/static/ace/docs/assets/js/language/generic.js

@@ -0,0 +1,65 @@
+/**
+ * Generic language patterns
+ *
+ * @author Craig Campbell
+ * @version 1.0.11
+ */
+Rainbow.extend([
+    {
+        'matches': {
+            1: [
+                {
+                    'name': 'keyword.operator',
+                    'pattern': /\=|\+/g
+                },
+                {
+                    'name': 'keyword.dot',
+                    'pattern': /\./g
+                }
+            ],
+            2: {
+                'name': 'string',
+                'matches': {
+                    'name': 'constant.character.escape',
+                    'pattern': /\\('|"){1}/g
+                }
+            }
+        },
+        'pattern': /(\(|\s|\[|\=|:|\+|\.)(('|")([^\\\1]|\\.)*?(\3))/gm
+    },
+    {
+        'name': 'comment',
+        'pattern': /\/\*[\s\S]*?\*\/|(\/\/|\#)[\s\S]*?$/gm
+    },
+    {
+        'name': 'constant.numeric',
+        'pattern': /\b(\d+(\.\d+)?(e(\+|\-)?\d+)?(f|d)?|0x[\da-f]+)\b/gi
+    },
+    {
+        'matches': {
+            1: 'keyword'
+        },
+        'pattern': /\b(and|array|as|b(ool(ean)?|reak)|c(ase|atch|har|lass|on(st|tinue))|d(ef|elete|o(uble)?)|e(cho|lse(if)?|xit|xtends|xcept)|f(inally|loat|or(each)?|unction)|global|if|import|int(eger)?|long|new|object|or|pr(int|ivate|otected)|public|return|self|st(ring|ruct|atic)|switch|th(en|is|row)|try|(un)?signed|var|void|while)(?=\(|\b)/gi
+    },
+    {
+        'name': 'constant.language',
+        'pattern': /true|false|null/g
+    },
+    {
+        'name': 'keyword.operator',
+        'pattern': /\+|\!|\-|&(gt|lt|amp);|\||\*|\=/g
+    },
+    {
+        'matches': {
+            1: 'function.call'
+        },
+        'pattern': /(\w+?)(?=\()/g
+    },
+    {
+        'matches': {
+            1: 'storage.function',
+            2: 'entity.name.function'
+        },
+        'pattern': /(function)\s(.*?)(?=\()/g
+    }
+]);

src/main/webapp/static/ace/docs/assets/js/language/html.js

@@ -0,0 +1,132 @@
+/**
+ * HTML patterns
+ *
+ * @author Craig Campbell
+ * @version 1.0.9
+ */
+Rainbow.extend('html', [
+    {
+        'name': 'source.php.embedded',
+        'matches': {
+            2: {
+                'language': 'php'
+            }
+        },
+        'pattern': /<\?=?(?!xml)(php)?([\s\S]*?)(\?>)/gm
+    },
+    {
+        'name': 'source.css.embedded',
+        'matches': {
+            1: {
+                'matches': {
+                    1: 'support.tag.style',
+                    2: [
+                        {
+                            'name': 'entity.tag.style',
+                            'pattern': /^style/g
+                        },
+                        {
+                            'name': 'string',
+                            'pattern': /('|")(.*?)(\1)/g
+                        },
+                        {
+                            'name': 'entity.tag.style.attribute',
+                            'pattern': /(\w+)/g
+                        }
+                    ],
+                    3: 'support.tag.style'
+                },
+                'pattern': /(<\/?)(style.*?)(>)/g
+            },
+            2: {
+                'language': 'css'
+            },
+            3: 'support.tag.style',
+            4: 'entity.tag.style',
+            5: 'support.tag.style'
+        },
+        'pattern': /(<style.*?>)([\s\S]*?)(<\/)(style)(>)/gm
+    },
+    {
+        'name': 'source.js.embedded',
+        'matches': {
+            1: {
+                'matches': {
+                    1: 'support.tag.script',
+                    2: [
+                        {
+                            'name': 'entity.tag.script',
+                            'pattern': /^script/g
+                        },
+
+                        {
+                            'name': 'string',
+                            'pattern': /('|")(.*?)(\1)/g
+                        },
+                        {
+                            'name': 'entity.tag.script.attribute',
+                            'pattern': /(\w+)/g
+                        }
+                    ],
+                    3: 'support.tag.script'
+                },
+                'pattern': /(<\/?)(script.*?)(>)/g
+            },
+            2: {
+                'language': 'javascript'
+            },
+            3: 'support.tag.script',
+            4: 'entity.tag.script',
+            5: 'support.tag.script'
+        },
+        'pattern': /(<script(?! src).*?>)([\s\S]*?)(<\/)(script)(>)/gm
+    },
+    {
+        'name': 'comment.html',
+        'pattern': /<\!--[\S\s]*?-->/g
+    },
+    {
+        'matches': {
+            1: 'support.tag.open',
+            2: 'support.tag.close'
+        },
+        'pattern': /(<)|(\/?\??>)/g
+    },
+    {
+        'name': 'support.tag',
+        'matches': {
+            1: 'support.tag',
+            2: 'support.tag.special',
+            3: 'support.tag-name'
+        },
+        'pattern': /(<\??)(\/|\!?)(\w+)/g
+    },
+    {
+        'matches': {
+            1: 'support.attribute'
+        },
+        'pattern': /([a-z-]+)(?=\=)/gi
+    },
+    {
+        'matches': {
+            1: 'support.operator',
+            2: 'string.quote',
+            3: 'string.value',
+            4: 'string.quote'
+        },
+        'pattern': /(=)('|")(.*?)(\2)/g
+    },
+    {
+        'matches': {
+            1: 'support.operator',
+            2: 'support.value'
+        },
+        'pattern': /(=)([a-zA-Z\-0-9]*)\b/g
+    },
+    {
+        'matches': {
+            1: 'support.attribute'
+        },
+        'pattern': /\s(\w+)(?=\s|>)(?![\s\S]*<)/g
+    }
+], true);

src/main/webapp/static/ace/docs/assets/js/language/javascript.js

@@ -0,0 +1,93 @@
+/**
+ * Javascript patterns
+ *
+ * @author Craig Campbell
+ * @version 1.0.9
+ */
+Rainbow.extend('javascript', [
+
+    /**
+     * matches $. or $(
+     */
+    {
+        'name': 'selector',
+        'pattern': /(\s|^)\$(?=\.|\()/g
+    },
+    {
+        'name': 'support',
+        'pattern': /\b(window|document)\b/g
+    },
+    {
+        'matches': {
+            1: 'support.property'
+        },
+        'pattern': /\.(length|node(Name|Value))\b/g
+    },
+    {
+        'matches': {
+            1: 'support.function'
+        },
+        'pattern': /(setTimeout|setInterval)(?=\()/g
+
+    },
+    {
+        'matches': {
+            1: 'support.method'
+        },
+        'pattern': /\.(getAttribute|push|getElementById|getElementsByClassName|log|setTimeout|setInterval)(?=\()/g
+    },
+
+    /**
+     * matches any escaped characters inside of a js regex pattern
+     *
+     * @see https://github.com/ccampbell/rainbow/issues/22
+     *
+     * this was causing single line comments to fail so it now makes sure
+     * the opening / is not directly followed by a *
+     *
+     * @todo check that there is valid regex in match group 1
+     */
+    {
+        'name': 'string.regexp',
+        'matches': {
+            1: 'string.regexp.open',
+            2: {
+                'name': 'constant.regexp.escape',
+                'pattern': /\\(.){1}/g
+            },
+            3: 'string.regexp.close',
+            4: 'string.regexp.modifier'
+        },
+        'pattern': /(\/)(?!\*)(.+)(\/)([igm]{0,3})/g
+    },
+
+    /**
+     * matches runtime function declarations
+     */
+    {
+        'matches': {
+            1: 'storage',
+            3: 'entity.function'
+        },
+        'pattern': /(var)?(\s|^)(\S*)(?=\s?=\s?function\()/g
+    },
+
+    /**
+     * matches constructor call
+     */
+    {
+        'matches': {
+            1: 'keyword',
+            2: 'entity.function'
+        },
+        'pattern': /(new)\s+(.*)(?=\()/g
+    },
+
+    /**
+     * matches any function call in the style functionName: function()
+     */
+    {
+        'name': 'entity.function',
+        'pattern': /(\w+)(?=:\s{0,}function)/g
+    }
+]);

src/main/webapp/static/ace/docs/assets/js/language/php.js

@@ -0,0 +1,123 @@
+/**
+ * PHP patterns
+ *
+ * @author Craig Campbell
+ * @version 1.0.8
+ */
+Rainbow.extend('php', [
+    {
+        'name': 'support',
+        'pattern': /\becho\b/g
+    },
+    {
+        'matches': {
+            1: 'variable.dollar-sign',
+            2: 'variable'
+        },
+        'pattern': /(\$)(\w+)\b/g
+    },
+    {
+        'name': 'constant.language',
+        'pattern': /true|false|null/ig
+    },
+    {
+        'name': 'constant',
+        'pattern': /\b[A-Z0-9_]{2,}\b/g
+    },
+    {
+        'name': 'keyword.dot',
+        'pattern': /\./g
+    },
+    {
+        'name': 'keyword',
+        'pattern': /\b(die|end(for(each)?|switch|if)|case|require(_once)?|include(_once)?)(?=\(|\b)/g
+    },
+    {
+        'matches': {
+            1: 'keyword',
+            2: {
+                'name': 'support.class',
+                'pattern': /\w+/g
+            }
+        },
+        'pattern': /(instanceof)\s([^\$].*?)(\)|;)/g
+    },
+
+    /**
+     * these are the top 50 most used PHP functions
+     * found from running a script and checking the frequency of each function
+     * over a bunch of popular PHP frameworks then combining the results
+     */
+    {
+        'matches': {
+            1: 'support.function'
+        },
+        'pattern': /\b(array(_key_exists|_merge|_keys|_shift)?|isset|count|empty|unset|printf|is_(array|string|numeric|object)|sprintf|each|date|time|substr|pos|str(len|pos|tolower|_replace|totime)?|ord|trim|in_array|implode|end|preg_match|explode|fmod|define|link|list|get_class|serialize|file|sort|mail|dir|idate|log|intval|header|chr|function_exists|dirname|preg_replace|file_exists)(?=\()/g
+    },
+    {
+        'name': 'variable.language.php-tag',
+        'pattern': /(<\?(php)?|\?>)/g
+    },
+    {
+        'matches': {
+            1: 'keyword.namespace',
+            2: {
+                'name': 'support.namespace',
+                'pattern': /\w+/g
+            }
+        },
+        'pattern': /\b(namespace|use)\s(.*?);/g
+    },
+    {
+        'matches': {
+            1: 'storage.modifier',
+            2: 'storage.class',
+            3: 'entity.name.class',
+            4: 'storage.modifier.extends',
+            5: 'entity.other.inherited-class',
+            6: 'storage.modifier.extends',
+            7: 'entity.other.inherited-class'
+        },
+        'pattern': /\b(abstract|final)?\s?(class|interface|trait)\s(\w+)(\sextends\s)?([\w\\]*)?(\simplements\s)?([\w\\]*)?\s?\{?(\n|\})/g
+    },
+    {
+        'name': 'keyword.static',
+        'pattern': /self::|static::/g
+    },
+    {
+        'matches': {
+            1: 'storage.function',
+            2: 'support.magic'
+        },
+        'pattern': /(function)\s(__.*?)(?=\()/g
+    },
+    {
+        'matches': {
+            1: 'keyword.new',
+            2: {
+                'name': 'support.class',
+                'pattern': /\w+/g
+            }
+        },
+        'pattern': /\b(new)\s([^\$].*?)(?=\)|\(|;)/g
+    },
+    {
+        'matches': {
+            1: {
+                'name': 'support.class',
+                'pattern': /\w+/g
+            },
+            2: 'keyword.static'
+        },
+        'pattern': /([\w\\]*?)(::)(?=\b|\$)/g
+    },
+    {
+        'matches': {
+            2: {
+                'name': 'support.class',
+                'pattern': /\w+/g
+            }
+        },
+        'pattern': /(\(|,\s?)([\w\\]*?)(?=\s\$)/g
+    }
+]);

src/main/webapp/static/ace/docs/assets/js/rainbow.js

@@ -0,0 +1,778 @@
+/**
+ * Copyright 2013 Craig Campbell
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Rainbow is a simple code syntax highlighter
+ *
+ * @preserve @version 1.2
+ * @url rainbowco.de
+ */
+window['Rainbow'] = (function() {
+
+    /**
+     * array of replacements to process at the end
+     *
+     * @type {Object}
+     */
+    var replacements = {},
+
+        /**
+         * an array of start and end positions of blocks to be replaced
+         *
+         * @type {Object}
+         */
+        replacement_positions = {},
+
+        /**
+         * an array of the language patterns specified for each language
+         *
+         * @type {Object}
+         */
+        language_patterns = {},
+
+        /**
+         * an array of languages and whether they should bypass the default patterns
+         *
+         * @type {Object}
+         */
+        bypass_defaults = {},
+
+        /**
+         * processing level
+         *
+         * replacements are stored at this level so if there is a sub block of code
+         * (for example php inside of html) it runs at a different level
+         *
+         * @type {number}
+         */
+        CURRENT_LEVEL = 0,
+
+        /**
+         * constant used to refer to the default language
+         *
+         * @type {number}
+         */
+        DEFAULT_LANGUAGE = 0,
+
+        /**
+         * used as counters so we can selectively call setTimeout
+         * after processing a certain number of matches/replacements
+         *
+         * @type {number}
+         */
+        match_counter = 0,
+
+        /**
+         * @type {number}
+         */
+        replacement_counter = 0,
+
+        /**
+         * @type {null|string}
+         */
+        global_class,
+
+        /**
+         * @type {null|Function}
+         */
+        onHighlight;
+
+    /**
+     * adds a class to a given code block
+     *
+     * @param {Element} el
+     * @param {string} class_name   class name to add
+     * @returns void
+     */
+    function _addClass(el, class_name) {
+        el.className += el.className ? ' ' + class_name : class_name;
+    }
+
+    /**
+     * checks if a block has a given class
+     *
+     * @param {Element} el
+     * @param {string} class_name   class name to check for
+     * @returns {boolean}
+     */
+    function _hasClass(el, class_name) {
+        return (' ' + el.className + ' ').indexOf(' ' + class_name + ' ') > -1;
+    }
+
+    /**
+     * gets the language for this block of code
+     *
+     * @param {Element} block
+     * @returns {string|null}
+     */
+    function _getLanguageForBlock(block) {
+
+        // if this doesn't have a language but the parent does then use that
+        // this means if for example you have: <pre data-language="php">
+        // with a bunch of <code> blocks inside then you do not have
+        // to specify the language for each block
+        var language = block.getAttribute('data-language') || block.parentNode.getAttribute('data-language');
+
+        // this adds support for specifying language via a css class
+        // you can use the Google Code Prettify style: <pre class="lang-php">
+        // or the HTML5 style: <pre><code class="language-php">
+        if (!language) {
+            var pattern = /\blang(?:uage)?-(\w+)/,
+                match = block.className.match(pattern) || block.parentNode.className.match(pattern);
+
+            if (match) {
+                language = match[1];
+            }
+        }
+
+        return language;
+    }
+
+    /**
+     * makes sure html entities are always used for tags
+     *
+     * @param {string} code
+     * @returns {string}
+     */
+    function _htmlEntities(code) {
+        return code.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/&(?![\w\#]+;)/g, '&amp;');
+    }
+
+    /**
+     * determines if a new match intersects with an existing one
+     *
+     * @param {number} start1    start position of existing match
+     * @param {number} end1      end position of existing match
+     * @param {number} start2    start position of new match
+     * @param {number} end2      end position of new match
+     * @returns {boolean}
+     */
+    function _intersects(start1, end1, start2, end2) {
+        if (start2 >= start1 && start2 < end1) {
+            return true;
+        }
+
+        return end2 > start1 && end2 < end1;
+    }
+
+    /**
+     * determines if two different matches have complete overlap with each other
+     *
+     * @param {number} start1   start position of existing match
+     * @param {number} end1     end position of existing match
+     * @param {number} start2   start position of new match
+     * @param {number} end2     end position of new match
+     * @returns {boolean}
+     */
+    function _hasCompleteOverlap(start1, end1, start2, end2) {
+
+        // if the starting and end positions are exactly the same
+        // then the first one should stay and this one should be ignored
+        if (start2 == start1 && end2 == end1) {
+            return false;
+        }
+
+        return start2 <= start1 && end2 >= end1;
+    }
+
+    /**
+     * determines if the match passed in falls inside of an existing match
+     * this prevents a regex pattern from matching inside of a bigger pattern
+     *
+     * @param {number} start - start position of new match
+     * @param {number} end - end position of new match
+     * @returns {boolean}
+     */
+    function _matchIsInsideOtherMatch(start, end) {
+        for (var key in replacement_positions[CURRENT_LEVEL]) {
+            key = parseInt(key, 10);
+
+            // if this block completely overlaps with another block
+            // then we should remove the other block and return false
+            if (_hasCompleteOverlap(key, replacement_positions[CURRENT_LEVEL][key], start, end)) {
+                delete replacement_positions[CURRENT_LEVEL][key];
+                delete replacements[CURRENT_LEVEL][key];
+            }
+
+            if (_intersects(key, replacement_positions[CURRENT_LEVEL][key], start, end)) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    /**
+     * takes a string of code and wraps it in a span tag based on the name
+     *
+     * @param {string} name     name of the pattern (ie keyword.regex)
+     * @param {string} code     block of code to wrap
+     * @returns {string}
+     */
+    function _wrapCodeInSpan(name, code) {
+        return '<span class="' + name.replace(/\./g, ' ') + (global_class ? ' ' + global_class : '') + '">' + code + '</span>';
+    }
+
+    /**
+     * finds out the position of group match for a regular expression
+     *
+     * @see http://stackoverflow.com/questions/1985594/how-to-find-index-of-groups-in-match
+     *
+     * @param {Object} match
+     * @param {number} group_number
+     * @returns {number}
+     */
+    function _indexOfGroup(match, group_number) {
+        var index = 0,
+            i;
+
+        for (i = 1; i < group_number; ++i) {
+            if (match[i]) {
+                index += match[i].length;
+            }
+        }
+
+        return index;
+    }
+
+    /**
+     * matches a regex pattern against a block of code
+     * finds all matches that should be processed and stores the positions
+     * of where they should be replaced within the string
+     *
+     * this is where pretty much all the work is done but it should not
+     * be called directly
+     *
+     * @param {RegExp} pattern
+     * @param {string} code
+     * @returns void
+     */
+    function _processPattern(regex, pattern, code, callback)
+    {
+        if (typeof regex === "undefined" || regex === null) {
+            //console.warn("undefined regular expression")
+            return callback();
+        }
+        var match = regex.exec(code);
+
+        if (!match) {
+            return callback();
+        }
+
+        ++match_counter;
+
+        // treat match 0 the same way as name
+        if (!pattern['name'] && typeof pattern['matches'][0] == 'string') {
+            pattern['name'] = pattern['matches'][0];
+            delete pattern['matches'][0];
+        }
+
+        var replacement = match[0],
+            start_pos = match.index,
+            end_pos = match[0].length + start_pos,
+
+            /**
+             * callback to process the next match of this pattern
+             */
+            processNext = function() {
+                var nextCall = function() {
+                    _processPattern(regex, pattern, code, callback);
+                };
+
+                // every 100 items we process let's call set timeout
+                // to let the ui breathe a little
+				//return match_counter % 100 > 0 ? nextCall() : setTimeout(nextCall, 0);
+				//ACE
+				//the timeout brings up errors when multiple blocks are being highlighted quickly one after one
+				return nextCall();
+            };
+
+        // if this is not a child match and it falls inside of another
+        // match that already happened we should skip it and continue processing
+        if (_matchIsInsideOtherMatch(start_pos, end_pos)) {
+            return processNext();
+        }
+
+        /**
+         * callback for when a match was successfully processed
+         *
+         * @param {string} replacement
+         * @returns void
+         */
+        var onMatchSuccess = function(replacement) {
+                // if this match has a name then wrap it in a span tag
+                if (pattern['name']) {
+                    replacement = _wrapCodeInSpan(pattern['name'], replacement);
+                }
+
+                // console.log('LEVEL', CURRENT_LEVEL, 'replace', match[0], 'with', replacement, 'at position', start_pos, 'to', end_pos);
+
+                // store what needs to be replaced with what at this position
+                if (!replacements[CURRENT_LEVEL]) {
+                    replacements[CURRENT_LEVEL] = {};
+                    replacement_positions[CURRENT_LEVEL] = {};
+                }
+
+                replacements[CURRENT_LEVEL][start_pos] = {
+                    'replace': match[0],
+                    'with': replacement
+                };
+
+                // store the range of this match so we can use it for comparisons
+                // with other matches later
+                replacement_positions[CURRENT_LEVEL][start_pos] = end_pos;
+
+                // process the next match
+                processNext();
+            },
+
+            // if this pattern has sub matches for different groups in the regex
+            // then we should process them one at a time by rerunning them through
+            // this function to generate the new replacement
+            //
+            // we run through them backwards because the match position of earlier
+            // matches will not change depending on what gets replaced in later
+            // matches
+            group_keys = keys(pattern['matches']),
+
+            /**
+             * callback for processing a sub group
+             *
+             * @param {number} i
+             * @param {Array} group_keys
+             * @param {Function} callback
+             */
+            processGroup = function(i, group_keys, callback) {
+                if (i >= group_keys.length) {
+                    return callback(replacement);
+                }
+
+                var processNextGroup = function() {
+                        processGroup(++i, group_keys, callback);
+                    },
+                    block = match[group_keys[i]];
+
+                // if there is no match here then move on
+                if (!block) {
+                    return processNextGroup();
+                }
+
+                var group = pattern['matches'][group_keys[i]],
+                    language = group['language'],
+
+                    /**
+                     * process group is what group we should use to actually process
+                     * this match group
+                     *
+                     * for example if the subgroup pattern looks like this
+                     * 2: {
+                     *     'name': 'keyword',
+                     *     'pattern': /true/g
+                     * }
+                     *
+                     * then we use that as is, but if it looks like this
+                     *
+                     * 2: {
+                     *     'name': 'keyword',
+                     *     'matches': {
+                     *          'name': 'special',
+                     *          'pattern': /whatever/g
+                     *      }
+                     * }
+                     *
+                     * we treat the 'matches' part as the pattern and keep
+                     * the name around to wrap it with later
+                     */
+                    process_group = group['name'] && group['matches'] ? group['matches'] : group,
+
+                    /**
+                     * takes the code block matched at this group, replaces it
+                     * with the highlighted block, and optionally wraps it with
+                     * a span with a name
+                     *
+                     * @param {string} block
+                     * @param {string} replace_block
+                     * @param {string|null} match_name
+                     */
+                    _replaceAndContinue = function(block, replace_block, match_name) {
+                        replacement = _replaceAtPosition(_indexOfGroup(match, group_keys[i]), block, match_name ? _wrapCodeInSpan(match_name, replace_block) : replace_block, replacement);
+                        processNextGroup();
+                    };
+
+                // if this is a sublanguage go and process the block using that language
+                if (language) {
+                    return _highlightBlockForLanguage(block, language, function(code) {
+                        _replaceAndContinue(block, code);
+                    });
+                }
+
+                // if this is a string then this match is directly mapped to selector
+                // so all we have to do is wrap it in a span and continue
+                if (typeof group === 'string') {
+                    return _replaceAndContinue(block, block, group);
+                }
+
+                // the process group can be a single pattern or an array of patterns
+                // _processCodeWithPatterns always expects an array so we convert it here
+                _processCodeWithPatterns(block, process_group.length ? process_group : [process_group], function(code) {
+                    _replaceAndContinue(block, code, group['matches'] ? group['name'] : 0);
+                });
+            };
+
+        processGroup(0, group_keys, onMatchSuccess);
+    }
+
+    /**
+     * should a language bypass the default patterns?
+     *
+     * if you call Rainbow.extend() and pass true as the third argument
+     * it will bypass the defaults
+     */
+    function _bypassDefaultPatterns(language)
+    {
+        return bypass_defaults[language];
+    }
+
+    /**
+     * returns a list of regex patterns for this language
+     *
+     * @param {string} language
+     * @returns {Array}
+     */
+    function _getPatternsForLanguage(language) {
+        var patterns = language_patterns[language] || [],
+            default_patterns = language_patterns[DEFAULT_LANGUAGE] || [];
+
+        return _bypassDefaultPatterns(language) ? patterns : patterns.concat(default_patterns);
+    }
+
+    /**
+     * substring replace call to replace part of a string at a certain position
+     *
+     * @param {number} position         the position where the replacement should happen
+     * @param {string} replace          the text we want to replace
+     * @param {string} replace_with     the text we want to replace it with
+     * @param {string} code             the code we are doing the replacing in
+     * @returns {string}
+     */
+    function _replaceAtPosition(position, replace, replace_with, code) {
+        var sub_string = code.substr(position);
+        return code.substr(0, position) + sub_string.replace(replace, replace_with);
+    }
+
+   /**
+     * sorts an object by index descending
+     *
+     * @param {Object} object
+     * @return {Array}
+     */
+    function keys(object) {
+        var locations = [],
+            replacement,
+            pos;
+
+        for(var location in object) {
+            if (object.hasOwnProperty(location)) {
+                locations.push(location);
+            }
+        }
+
+        // numeric descending
+        return locations.sort(function(a, b) {
+            return b - a;
+        });
+    }
+
+    /**
+     * processes a block of code using specified patterns
+     *
+     * @param {string} code
+     * @param {Array} patterns
+     * @returns void
+     */
+    function _processCodeWithPatterns(code, patterns, callback)
+    {
+        // we have to increase the level here so that the
+        // replacements will not conflict with each other when
+        // processing sub blocks of code
+        ++CURRENT_LEVEL;
+
+        // patterns are processed one at a time through this function
+        function _workOnPatterns(patterns, i)
+        {
+            // still have patterns to process, keep going
+            if (i < patterns.length) {
+                return _processPattern(patterns[i]['pattern'], patterns[i], code, function() {
+                    _workOnPatterns(patterns, ++i);
+                });
+            }
+
+            // we are done processing the patterns
+            // process the replacements and update the DOM
+            _processReplacements(code, function(code) {
+
+                // when we are done processing replacements
+                // we are done at this level so we can go back down
+                delete replacements[CURRENT_LEVEL];
+                delete replacement_positions[CURRENT_LEVEL];
+                --CURRENT_LEVEL;
+                callback(code);
+            });
+        }
+
+        _workOnPatterns(patterns, 0);
+    }
+
+    /**
+     * process replacements in the string of code to actually update the markup
+     *
+     * @param {string} code         the code to process replacements in
+     * @param {Function} onComplete   what to do when we are done processing
+     * @returns void
+     */
+    function _processReplacements(code, onComplete) {
+
+        /**
+         * processes a single replacement
+         *
+         * @param {string} code
+         * @param {Array} positions
+         * @param {number} i
+         * @param {Function} onComplete
+         * @returns void
+         */
+        function _processReplacement(code, positions, i, onComplete) {
+            if (i < positions.length) {
+                ++replacement_counter;
+                var pos = positions[i],
+                    replacement = replacements[CURRENT_LEVEL][pos];
+                code = _replaceAtPosition(pos, replacement['replace'], replacement['with'], code);
+
+                // process next function
+                var next = function() {
+                    _processReplacement(code, positions, ++i, onComplete);
+                };
+
+                // use a timeout every 250 to not freeze up the UI
+				//return replacement_counter % 250 > 0 ? next() : setTimeout(next, 0);
+				//ACE
+				//the timeout brings up errors when multiple blocks are being highlighted quickly one after one
+				return next()
+            }
+
+            onComplete(code);
+        }
+
+        var string_positions = keys(replacements[CURRENT_LEVEL]);
+        _processReplacement(code, string_positions, 0, onComplete);
+    }
+
+    /**
+     * takes a string of code and highlights it according to the language specified
+     *
+     * @param {string} code
+     * @param {string} language
+     * @param {Function} onComplete
+     * @returns void
+     */
+    function _highlightBlockForLanguage(code, language, onComplete) {
+        var patterns = _getPatternsForLanguage(language);
+        _processCodeWithPatterns(_htmlEntities(code), patterns, onComplete);
+    }
+
+    /**
+     * highlight an individual code block
+     *
+     * @param {Array} code_blocks
+     * @param {number} i
+     * @returns void
+     */
+    function _highlightCodeBlock(code_blocks, i, onComplete) {
+        if (i < code_blocks.length) {
+            var block = code_blocks[i],
+                language = _getLanguageForBlock(block);
+
+            if (!_hasClass(block, 'rainbow') && language) {
+                language = language.toLowerCase();
+
+                _addClass(block, 'rainbow');
+
+                return _highlightBlockForLanguage(block.innerHTML, language, function(code) {
+                    block.innerHTML = code;
+
+                    // reset the replacement arrays
+                    replacements = {};
+                    replacement_positions = {};
+
+                    // if you have a listener attached tell it that this block is now highlighted
+                    if (onHighlight) {
+                        onHighlight(block, language);
+                    }
+
+                    // process the next block
+                    setTimeout(function() {
+                        _highlightCodeBlock(code_blocks, ++i, onComplete);
+                    }, 0);
+                });
+            }
+            return _highlightCodeBlock(code_blocks, ++i, onComplete);
+        }
+
+        if (onComplete) {
+            onComplete();
+        }
+    }
+
+    /**
+     * start highlighting all the code blocks
+     *
+     * @returns void
+     */
+    function _highlight(node, onComplete) {
+
+        // the first argument can be an Event or a DOM Element
+        // I was originally checking instanceof Event but that makes it break
+        // when using mootools
+        //
+        // @see https://github.com/ccampbell/rainbow/issues/32
+        //
+        node = node && typeof node.getElementsByTagName == 'function' ? node : document;
+
+        var pre_blocks = node.getElementsByTagName('pre'),
+            code_blocks = node.getElementsByTagName('code'),
+            i,
+            final_pre_blocks = [],
+            final_code_blocks = [];
+
+        // first loop through all pre blocks to find which ones to highlight
+        // also strip whitespace
+        for (i = 0; i < pre_blocks.length; ++i) {
+
+            // strip whitespace around code tags when they are inside of a pre tag
+            // this makes the themes look better because you can't accidentally
+            // add extra linebreaks at the start and end
+            //
+            // when the pre tag contains a code tag then strip any extra whitespace
+            // for example
+            // <pre>
+            //      <code>var foo = true;</code>
+            // </pre>
+            //
+            // will become
+            // <pre><code>var foo = true;</code></pre>
+            //
+            // if you want to preserve whitespace you can use a pre tag on its own
+            // without a code tag inside of it
+            if (pre_blocks[i].getElementsByTagName('code').length) {
+                pre_blocks[i].innerHTML = pre_blocks[i].innerHTML.replace(/^\s+/, '').replace(/\s+$/, '');
+                continue;
+            }
+
+            // if the pre block has no code blocks then we are going to want to
+            // process it directly
+            final_pre_blocks.push(pre_blocks[i]);
+        }
+
+        // @see http://stackoverflow.com/questions/2735067/how-to-convert-a-dom-node-list-to-an-array-in-javascript
+        // we are going to process all <code> blocks
+        for (i = 0; i < code_blocks.length; ++i) {
+            final_code_blocks.push(code_blocks[i]);
+        }
+
+        _highlightCodeBlock(final_code_blocks.concat(final_pre_blocks), 0, onComplete);
+    }
+
+    /**
+     * public methods
+     */
+    return {
+
+        /**
+         * extends the language pattern matches
+         *
+         * @param {*} language     name of language
+         * @param {*} patterns      array of patterns to add on
+         * @param {boolean|null} bypass      if true this will bypass the default language patterns
+         */
+        extend: function(language, patterns, bypass) {
+
+            // if there is only one argument then we assume that we want to
+            // extend the default language rules
+            if (arguments.length == 1) {
+                patterns = language;
+                language = DEFAULT_LANGUAGE;
+            }
+
+            bypass_defaults[language] = bypass;
+            language_patterns[language] = patterns.concat(language_patterns[language] || []);
+        },
+
+        /**
+         * call back to let you do stuff in your app after a piece of code has been highlighted
+         *
+         * @param {Function} callback
+         */
+        onHighlight: function(callback) {
+            onHighlight = callback;
+        },
+
+        /**
+         * method to set a global class that will be applied to all spans
+         *
+         * @param {string} class_name
+         */
+        addClass: function(class_name) {
+            global_class = class_name;
+        },
+
+        /**
+         * starts the magic rainbow
+         *
+         * @returns void
+         */
+        color: function() {
+
+            // if you want to straight up highlight a string you can pass the string of code,
+            // the language, and a callback function
+            if (typeof arguments[0] == 'string') {
+                return _highlightBlockForLanguage(arguments[0], arguments[1], arguments[2]);
+            }
+
+            // if you pass a callback function then we rerun the color function
+            // on all the code and call the callback function on complete
+            if (typeof arguments[0] == 'function') {
+                return _highlight(0, arguments[0]);
+            }
+
+            // otherwise we use whatever node you passed in with an optional
+            // callback function as the second parameter
+            _highlight(arguments[0], arguments[1]);
+        }
+    };
+}) ();
+
+/**
+ * adds event listener to start highlighting
+ */
+(function() {
+    if (document.addEventListener) {
+        return document.addEventListener('DOMContentLoaded', Rainbow.color, false);
+    }
+}) ();
+
+// When using Google closure compiler in advanced mode some methods
+// get renamed.  This keeps a public reference to these methods so they can
+// still be referenced from outside this library.
+Rainbow["onHighlight"] = Rainbow.onHighlight;
+Rainbow["addClass"] = Rainbow.addClass;

src/main/webapp/static/ace/docs/assets/js/themes/all-hallows-eve.css

@@ -0,0 +1,49 @@
+/**
+ * All Hallows Eve theme
+ *
+ * Adapted from Ultraviolet RubyGem
+ *
+ * @author Flinn Mueller
+ * @version 1.0.1
+ */
+pre {
+    background: #000;
+    word-wrap: break-word;
+    margin: 0px;
+    padding: 10px;
+    color: #fff;
+    font-size: 14px;
+    margin-bottom: 20px;
+}
+
+pre, code {
+    font-family: 'Monaco', courier, monospace;
+}
+
+pre .comment {
+    color: #9933CC;
+}
+
+pre .constant {
+    color: #3387CC;
+}
+
+pre .storage {
+    color: #CC7833;
+}
+
+pre .string {
+    color: #66CC33;
+}
+
+pre .keyword, pre .selector {
+    color: #CC7833;
+}
+
+pre .inherited-class {
+    font-style: italic;
+}
+
+pre .support {
+    color: #C83730;
+}

src/main/webapp/static/ace/docs/assets/js/themes/blackboard.css

@@ -0,0 +1,62 @@
+/**
+ * Blackboard theme
+ *
+ * Adapted from Domenico Carbotta's TextMate theme of the same name
+ *
+ * @author Domenico Carbotta
+ * @author Craig Campbell
+ * @version 1.0.2
+ */
+pre {
+    background: #0B1022;
+    word-wrap: break-word;
+    margin: 0px;
+    padding: 10px;
+    color: #fff;
+    font-size: 14px;
+    margin-bottom: 20px;
+}
+
+pre, code {
+    font-family: 'Monaco', courier, monospace;
+}
+
+pre .comment {
+    color: #727272;
+}
+
+pre .constant {
+    color: #D8FA3C;
+}
+
+pre .storage {
+    color: #FBDE2D;
+}
+
+pre .string, pre .comment.docstring {
+    color: #61CE3C;
+}
+
+pre .string.regexp, pre .support.tag.script, pre .support.tag.style {
+    color: #fff;
+}
+
+pre .keyword, pre .selector {
+    color: #FBDE2D;
+}
+
+pre .inherited-class {
+    font-style: italic;
+}
+
+pre .entity {
+    color: #FF6400;
+}
+
+pre .support, *[data-language="c"] .function.call {
+    color: #8DA6CE;
+}
+
+pre .variable.global, pre .variable.class, pre .variable.instance {
+    color: #FF6400;
+}

src/main/webapp/static/ace/docs/assets/js/themes/dreamweaver.css

@@ -0,0 +1,109 @@
+/**
+ * Dreamweaver theme
+ *
+ * @author Sean Coker
+ * @url http://seancoker.com
+ * @version 1.0
+ */
+
+pre {
+    /* original is white background with no border */
+    background-color: #fff;
+    word-wrap: break-word;
+    margin: 0;
+    padding: 10px;
+    color: #000;
+    font-size: 13px;
+    line-height: 16px;
+    margin-bottom: 20px
+}
+
+pre, code {
+    font-family: monospace;
+}
+
+pre .comment {
+    color: #888;
+}
+
+pre .support {
+    color: #cd57d5;
+}
+
+pre .constant.numeric, pre .php.embedded {
+    color: #fa0002;
+    font-weight: bold;
+}
+
+pre .keyword, pre .constant.language {
+    color: #000789;
+    font-weight: bold;
+}
+
+pre .selector, pre .support.property, pre .entity.name.function {
+    color: #000;
+}
+
+pre .storage.function, pre .variable.self, pre .support.function, pre .constant.language {
+    color: #000;
+    font-weight: bold;
+}
+
+pre .string {
+    color: #0d43fa;
+    font-weight: normal;
+}
+
+pre .css-property + span, pre .keyword.unit, pre .support.css-value {
+    color: #0d43fa !important;
+    font-weight: normal !important;
+}
+
+pre .entity.tag.style + .string, pre .php.embedded .constant.language, pre .php.embedded .keyword {
+    color: #37a348 !important;
+}
+
+pre .support.method {
+    color: #2bd5bb;
+}
+
+pre .entity.name {
+    color: #fd74e0;
+}
+
+pre .support.css-property, pre .support.tag-name, pre .support.tag, pre .support.attribute, pre .support.attribute + .operator {
+    color: #000789;
+}
+
+pre .storage.module, pre .storage.class {
+    color: #122573;
+    font-weight: bold;
+}
+
+pre .css.embedded .support.tag, pre .css.embedded .style.tag {
+    color: #cd57d5;
+}
+
+pre .keyword.operator {
+    color: #2852eb;
+    font-weight: normal;
+}
+
+pre .php.embedded .variable, pre .php.embedded .storage.function {
+     color: #0d43fa;
+     font-weight: normal;
+}
+
+pre .php.embedded .string, pre .js.embedded .tag.script {
+     color: #c4001e;
+}
+
+pre .php.embedded .comment {
+     color: #f4b441;
+     font-weight: normal;
+}
+
+pre .php.embedded .function.name {
+     color: #000;
+     font-weight: normal;
+}

src/main/webapp/static/ace/docs/assets/js/themes/espresso-libre.css

@@ -0,0 +1,67 @@
+/**
+ * Espresso Libre theme
+ *
+ * Adapted from Ultraviolet RubyGem
+ *
+ * @author Flinn Mueller
+ * @version 1.0
+ */
+pre {
+    background-color: #2a211c;
+    word-wrap: break-word;
+    margin: 0px;
+    padding: 10px;
+    color: #bdae9d;
+    font-size: 14px;
+    margin-bottom: 20px;
+}
+
+pre, code {
+    font-family: 'Monaco', courier, monospace;
+}
+
+pre .support.class, pre .support.type {
+    color: #6d79de;
+}
+
+pre .support.constant {
+    color: #00af0e;
+}
+
+pre .constant.language {
+    color: #585cf6;
+}
+
+pre .support.function {
+    font-weight: bold;
+    color: #7290d9;
+}
+
+pre .string {
+    color: #049b0a;
+}
+
+pre .constant.numeric {
+    color: #44aa43;
+}
+
+pre .keyword, pre .storage {
+    color: #43a8ed;
+}
+
+pre .entity.function {
+    color: #ff9358;
+}
+
+pre .comment {
+    color: #0066ff;
+    font-style: italic;
+}
+
+pre .constant.symbol {
+    color:#c5656b;
+}
+
+pre .variable.instance, pre .variable.language, pre .constant {
+    color: #318495;
+}

src/main/webapp/static/ace/docs/assets/js/themes/github.css

@@ -0,0 +1,88 @@
+/**
+ * GitHub theme
+ *
+ * @author Craig Campbell
+ * @version 1.0.4
+ */
+pre {
+    border: 1px solid #ccc;
+    word-wrap: break-word;
+    padding: 6px 10px;
+    line-height: 19px;
+    margin-bottom: 20px;
+}
+
+code {
+    border: 1px solid #eaeaea;
+    margin: 0px 2px;
+    padding: 0px 5px;
+    font-size: 12px;
+}
+
+pre code {
+    border: 0px;
+    padding: 0px;
+    margin: 0px;
+    -moz-border-radius: 0px;
+    -webkit-border-radius: 0px;
+    border-radius: 0px;
+}
+
+pre, code {
+    font-family: Consolas, 'Liberation Mono', Courier, monospace;
+    color: #333;
+    background: #f8f8f8;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+}
+
+pre, pre code {
+    font-size: 13px;
+}
+
+pre .comment {
+    color: #998;
+}
+
+pre .support {
+    color: #0086B3;
+}
+
+pre .tag, pre .tag-name {
+    color: navy;
+}
+
+pre .keyword, pre .css-property, pre .vendor-prefix, pre .sass, pre .class, pre .id, pre .css-value, pre .entity.function, pre .storage.function {
+    font-weight: bold;
+}
+
+pre .css-property, pre .css-value, pre .vendor-prefix, pre .support.namespace {
+    color: #333;
+}
+
+pre .constant.numeric, pre .keyword.unit, pre .hex-color {
+    font-weight: normal;
+    color: #099;
+}
+
+pre .entity.class {
+    color: #458;
+}
+
+pre .entity.id, pre .entity.function {
+    color: #900;
+}
+
+pre .attribute, pre .variable {
+    color: teal;
+}
+
+pre .string, pre .support.value  {
+    font-weight: normal;
+    color: #d14;
+}
+
+pre .regexp {
+    color: #009926;
+}

src/main/webapp/static/ace/docs/assets/js/themes/kimbie-dark.css

@@ -0,0 +1,48 @@
+/**
+ * Kimbie (Dark)
+ *
+ * @author Jan T. Sott
+ * @version 1.0.0
+ * @url http://github.com/idleberg/Kimbie-Rainbow
+ */
+pre {
+    background-color: #221a0f;
+    word-wrap: break-word;
+    margin: 0px;
+    padding: 10px;
+    color: #fbebd4;
+    font-size: 14px;
+    margin-bottom: 20px;
+}
+
+pre, code {
+    font-family: 'Monaco', courier, monospace;
+}
+
+pre .comment {
+    color: #a57a4c;
+}
+
+pre .variable.global, pre .variable.class, pre .variable.instance {
+    color: #dc3958; /* red */
+}
+
+pre .constant.numeric, pre .constant.language, pre .constant.hex-color, pre .keyword.unit {
+    color: #f79a32; /* orange */
+}
+
+pre .constant, pre .entity, pre .entity.class, pre .support {
+    color: #f06431; /* yellow */
+}
+
+pre .constant.symbol, pre .string {
+    color: #889b4a; /* green */
+}
+
+pre .entity.function, pre .support.css-property, pre .selector {
+    color: #8ab1b0; /* blue */
+}
+
+pre .keyword, pre .storage {
+    color: #98676a; /* purple */
+}

src/main/webapp/static/ace/docs/assets/js/themes/kimbie-light.css

@@ -0,0 +1,48 @@
+/**
+ * Kimbie (Light)
+ *
+ * @author Jan T. Sott
+ * @version 1.0.0
+ * @url http://github.com/idleberg/Kimbie-Rainbow
+ */
+pre {
+    background-color: #fbebd4;
+    word-wrap: break-word;
+    margin: 0px;
+    padding: 10px;
+    color: #221a0f;
+    font-size: 14px;
+    margin-bottom: 20px;
+}
+
+pre, code {
+    font-family: 'Monaco', courier, monospace;
+}
+
+pre .comment {
+    color: #d6baad;
+}
+
+pre .variable.global, pre .variable.class, pre .variable.instance {
+    color: #dc3958; /* red */
+}
+
+pre .constant.numeric, pre .constant.language, pre .constant.hex-color, pre .keyword.unit {
+    color: #f79a32; /* orange */
+}
+
+pre .constant, pre .entity, pre .entity.class, pre .support {
+    color: #f06431; /* yellow */
+}
+
+pre .constant.symbol, pre .string {
+    color: #889b4a; /* green */
+}
+
+pre .entity.function, pre .support.css-property, pre .selector {
+    color: #8ab1b0; /* blue */
+}
+
+pre .keyword, pre .storage {
+    color: #98676a; /* purple */
+}

src/main/webapp/static/ace/docs/assets/js/themes/monokai.css

@@ -0,0 +1,81 @@
+/**
+ * Monokai theme
+ *
+ * Adapted from Wimer Hazenberg's TextMate theme of the same name
+ *
+ * @author Wimer Hazenberg
+ * @author Michael Fasani
+ * @author Craig Campbell
+ * @version 1.0.0
+ */
+pre {
+    background: #272822;
+    word-wrap: break-word;
+    margin: 0px;
+    padding: 10px;
+    color: #fff;
+    font-size: 14px;
+    margin-bottom: 20px;
+}
+
+pre, code {
+    font-family: 'Monaco', courier, monospace;
+}
+
+pre .comment {
+    color: #75715E;
+}
+
+pre .constant {
+    color: #AE81FF;
+}
+
+pre .storage {
+    color: #66D9EF;
+}
+
+pre .string, pre .comment.docstring {
+    color: #E6DB74;
+}
+
+pre .support.tag {
+    color: #fff;
+}
+
+pre .keyword {
+    /* @todo some keywords use this light blue, most use the pink */
+    /*color: #66D9EF;*/
+    color: #F92672;
+}
+
+pre .selector {
+    color: #F92672;
+}
+
+pre .inherited-class {
+    font-style: italic;
+}
+
+pre .operator, pre .support.tag-name , pre .entity.tag {
+    color: #F92672;
+}
+
+pre .entity, pre .support.attribute, pre .entity.attribute {
+    color: #A6E22E;
+}
+
+pre .support, *[data-language="c"] .function.call {
+    color: #66D9EF;
+}
+
+*[data-language="html"] .support.operator {
+    color: #fff;
+}
+
+pre .css-property, pre .storage.function {
+    font-style: italic;
+}
+
+pre .variable.global, pre .variable.class, pre .variable.instance {
+    color: #A6E22E;
+}

src/main/webapp/static/ace/docs/assets/js/themes/obsidian.css

@@ -0,0 +1,72 @@
+/**
+ * Obsidian theme
+ *
+ * Adapted from a theme based on:
+ * http://studiostyl.es/schemes/son-of-obsidian
+ *
+ * @author Dan Stewart <dan@stewshack.com>
+ * @version 1.0
+ */
+pre {
+    background: #22282A;
+    word-wrap: break-word;
+    margin: 0px;
+    padding: 10px;
+    color: #F1F2F3;
+    font-size: 14px;
+    margin-bottom: 20px;
+}
+
+pre, code {
+    font-family: 'Monaco', courier, monospace;
+}
+
+pre .comment {
+	color: #66747B;
+}
+
+pre .constant {
+	color: #EC7600;
+}
+
+pre .storage {
+	color: #EC7600;
+}
+
+pre .string, pre .comment.docstring {
+	color: #EC7600;
+}
+
+pre .string.regexp, pre .support.tag.script, pre .support.tag.style {
+    color: #fff;
+}
+
+
+pre .keyword, pre .selector {
+	color: #93C763;
+}
+
+pre .inherited-class {
+    font-style: italic;
+}
+
+pre .entity {
+	color: #93C763;
+}
+
+pre .integer {
+	color: #FFCD22;
+}
+
+pre .support, *[data-language="csharp"] .function.call {
+	color: #FACD22;
+}
+
+pre .variable.global, pre .variable.class, pre .variable.instance {
+	color: #CCC;
+}
+
+/* C# specific rule */
+pre .preprocessor {
+	color: #66747B;
+}

src/main/webapp/static/ace/docs/assets/js/themes/paraiso-dark.css

@@ -0,0 +1,48 @@
+/**
+ * Paraíso (Dark)
+ *
+ * @author Jan T. Sott
+ * @version 1.0.0
+ * @url http://github.com/idleberg/Paraiso-Rainbow
+ */
+pre {
+    background-color: #2f1e2e;
+    word-wrap: break-word;
+    margin: 0px;
+    padding: 10px;
+    color: #e7e9db;
+    font-size: 14px;
+    margin-bottom: 20px;
+}
+
+pre, code {
+    font-family: 'Monaco', courier, monospace;
+}
+
+pre .comment {
+    color: #776e71;
+}
+
+pre .variable.global, pre .variable.class, pre .variable.instance {
+    color: #ef6155; /* red */
+}
+
+pre .constant.numeric, pre .constant.language, pre .constant.hex-color, pre .keyword.unit {
+    color: #f99b15; /* orange */
+}
+
+pre .constant, pre .entity, pre .entity.class, pre .support {
+    color: #fec418; /* yellow */
+}
+
+pre .constant.symbol, pre .string {
+    color: #48b685; /* green */
+}
+
+pre .entity.function, pre .support.css-property, pre .selector {
+    color: #06b6ef; /* blue */
+}
+
+pre .keyword, pre .storage {
+    color: #815ba4; /* purple */
+}

src/main/webapp/static/ace/docs/assets/js/themes/paraiso-light.css

@@ -0,0 +1,48 @@
+/**
+ * Paraíso (Light)
+ *
+ * @author Jan T. Sott
+ * @version 1.0.0
+ * @url http://github.com/idleberg/Paraiso-Rainbow
+ */
+pre {
+    background-color: #e7e9db;
+    word-wrap: break-word;
+    margin: 0px;
+    padding: 10px;
+    color: #2f1e2e;
+    font-size: 14px;
+    margin-bottom: 20px;
+}
+
+pre, code {
+    font-family: 'Monaco', courier, monospace;
+}
+
+pre .comment {
+    color: #8d8687;
+}
+
+pre .variable.global, pre .variable.class, pre .variable.instance {
+    color: #ef6155; /* red */
+}
+
+pre .constant.numeric, pre .constant.language, pre .constant.hex-color, pre .keyword.unit {
+    color: #f99b15; /* orange */
+}
+
+pre .constant, pre .entity, pre .entity.class, pre .support {
+    color: #fec418; /* yellow */
+}
+
+pre .constant.symbol, pre .string {
+    color: #48b685; /* green */
+}
+
+pre .entity.function, pre .support.css-property, pre .selector {
+    color: #06b6ef; /* blue */
+}
+
+pre .keyword, pre .storage {
+    color: #815ba4; /* purple */
+}

src/main/webapp/static/ace/docs/assets/js/themes/pastie.css

@@ -0,0 +1,102 @@
+/**
+ * Pastie theme
+ *
+ * @author pygments.org
+ * @author pastie.org
+ * @author Simon Potter
+ * @version 1.0
+ */
+
+pre {
+    /* original is white background with no border */
+    background-color: #F8F8FF;
+    border: 1px solid #DEDEDE;
+    word-wrap: break-word;
+    margin: 0;
+    padding: 10px;
+    color: #000;
+    font-size: 13px;
+    line-height: 16px;
+    margin-bottom: 20px
+}
+
+pre, code {
+    font-family: monospace;
+}
+
+pre .comment {
+    color: #888;
+}
+
+pre .keyword, pre .selector, pre .storage.module, pre .storage.class, pre .storage.function {
+    color: #080;
+    font-weight: bold;
+}
+
+pre .keyword.operator {
+    color: #000;
+    font-weight: normal;
+}
+
+pre .constant.language {
+    color: #038;
+    font-weight:bold;
+}
+
+pre .constant.symbol, pre .class, pre .constant {
+    color: #036;
+    font-weight: bold;
+}
+
+pre .keyword.namespace, pre .entity.name.class {
+    color: #B06;
+    font-weight: bold;
+}
+
+pre .constant.numeric {
+    color: #00D;
+    font-weight: bold;
+}
+
+pre .string, pre .comment.docstring {
+    color: #D20;
+    background-color: #FFF0F0;
+}
+
+pre .string.regexp {
+    background-color: #FFF0FF;
+    color: #808;
+}
+
+pre .variable.instance {
+    color: #33B;
+}
+
+pre .entity.name.function {
+    color: #06B;
+    font-weight: bold;
+}
+
+pre .support.tag-name, pre .entity.tag.script, pre .entity.tag.style {
+    color: #070;
+}
+
+pre .support.attribute {
+    color: #007;
+    font-style: italic;
+}
+
+pre .entity.name.tag, pre .storage.type {
+    color: #070;
+    font-weight: bold;
+}
+
+pre .variable.self, pre .support.function {
+    color: #038;
+    font-weight: bold;
+}
+
+pre .entity.function, pre .support.magic, pre.support.method {
+    color: #C00;
+    font-weight: bold;
+}

src/main/webapp/static/ace/docs/assets/js/themes/solarized-dark.css

@@ -0,0 +1,86 @@
+/**
+ * Solarized Dark theme
+ *
+ * Adaptation of Solarized Dark from ethanschoonover.com/solarized
+ *
+ * @author Ethan Schoonover
+ * @author David Litmark
+ * @version 1.0.0
+ */
+pre {
+    background: #002b36; /* base03 */
+    word-wrap: break-word;
+    margin: 0px;
+    padding: 10px;
+    color: #839496; /* base0 */
+    font-size: 14px;
+    margin-bottom: 20px;
+}
+
+pre, code {
+    font-family: 'Monaco', courier, monospace;
+}
+
+pre .comment {
+    color: #586e75; /* base01 */
+}
+
+pre .constant {
+    color: #839496; /* base0 */
+}
+
+pre .constant.language {
+    color: #268bd2; /* blue */
+}
+
+pre .constant.regexp {
+    color: #2aa198; /* cyan */
+}
+
+pre .storage {
+    color: #268bd2; /* blue */
+}
+
+pre .string, pre .comment.docstring {
+    color: #2aa198; /* cyan */
+}
+
+pre .support.tag.script, pre .support.tag.style {
+    color: #2aa198; /* cyan */
+}
+
+pre .string.regexp {
+    color: #2aa198; /* cyan */
+}
+
+pre .string.regexp.open, pre .string.regexp.close {
+    color: #2aa198; /* cyan */
+}
+
+pre .keyword, pre .selector {
+    color: #859900; /* green */
+}
+
+pre .inherited-class {
+    font-style: italic;
+}
+
+pre .entity {
+    color: #b58900; /* yellow */
+}
+
+pre .support, *[data-language="c"] .function.call {
+    color: #859900; /* green */
+}
+
+pre .support.method {
+    color: #839496; /* base0 */
+}
+
+pre .support.property {
+    color: #839496; /* base0 */
+}
+
+pre .variable.global, pre .variable.class, pre .variable.instance {
+    color: #839496; /* base0 */
+}

src/main/webapp/static/ace/docs/assets/js/themes/solarized-light.css

@@ -0,0 +1,86 @@
+/**
+ * Solarized Light theme
+ *
+ * Adaptation of Solarized Light from ethanschoonover.com/solarized
+ *
+ * @author Ethan Schoonover
+ * @author David Litmark
+ * @version 1.0.0
+ */
+pre {
+    background: #fdf6e3; /* base3 */
+    word-wrap: break-word;
+    margin: 0px;
+    padding: 10px;
+    color: #657b83; /* base00 */
+    font-size: 14px;
+    margin-bottom: 20px;
+}
+
+pre, code {
+    font-family: 'Monaco', courier, monospace;
+}
+
+pre .comment {
+    color: #93a1a1; /* base1 */
+}
+
+pre .constant {
+    color: #657b83; /* base00 */
+}
+
+pre .constant.language {
+    color: #268bd2; /* blue */
+}
+
+pre .constant.regexp {
+    color: #2aa198; /* cyan */
+}
+
+pre .storage {
+    color: #268bd2; /* blue */
+}
+
+pre .string, pre .comment.docstring {
+    color: #2aa198; /* cyan */
+}
+
+pre .support.tag.script, pre .support.tag.style {
+    color: #2aa198; /* cyan */
+}
+
+pre .string.regexp {
+    color: #2aa198; /* cyan */
+}
+
+pre .string.regexp.open, pre .string.regexp.close {
+    color: #2aa198; /* cyan */
+}
+
+pre .keyword, pre .selector {
+    color: #859900; /* green */
+}
+
+pre .inherited-class {
+    font-style: italic;
+}
+
+pre .entity {
+    color: #b58900; /* yellow */
+}
+
+pre .support, *[data-language="c"] .function.call {
+    color: #859900; /* green */
+}
+
+pre .support.method {
+    color: #657b83; /* base00 */
+}
+
+pre .support.property {
+    color: #657b83; /* base00 */
+}
+
+pre .variable.global, pre .variable.class, pre .variable.instance {
+    color: #657b83; /* base00 */
+}

src/main/webapp/static/ace/docs/assets/js/themes/sunburst.css

@@ -0,0 +1,94 @@
+/**
+ * Sunburst theme
+ *
+ * Adapted from the Textmate Sunburst theme by Stanley Rost
+ *
+ * @author Stanley Rost
+ * @author Rachel Baker
+ * @version 1.0.0
+ */
+pre {
+    background-color: #000;
+    word-wrap: break-word;
+    margin: 0px;
+    padding: 10px;
+    color: #fff;
+    font-size: 14px;
+    margin-bottom: 20px;
+}
+
+pre, code {
+    font-family: 'Monaco', courier, monospace;
+}
+
+pre .comment {
+    color: #AEAEAE; font-style: italic;
+}
+
+pre .constant {
+    color: #3387CC;
+}
+
+pre .storage {
+    color: #99CF50;
+}
+
+pre .string, pre .entity.name.class, pre .comment.docstring {
+color: #65B042;
+/* green */
+}
+
+pre .string.regexp {
+ color: #E9C062;
+    }
+
+pre .string.constant {
+    color: #DDF2A4;
+}
+
+pre .constant.hex-color {
+    color: #DD7B3B;
+    /* orange */
+}
+pre .support, pre .tag.script, pre .function.call {
+    color: #dad085;
+}
+pre .support.css-property {
+    color: #C5AF75;
+}
+pre .support.tag.style {
+    color: #fff;
+}
+pre .keyword, pre .selector {
+    color: #E28964;
+    /* dark pink */
+}
+
+pre .keyword.namespace {
+    color: #3387CC;
+    font-weight: bold;
+}
+
+pre .inherited-class {
+    font-style: italic;
+}
+
+pre .entity, pre .variable.instance, pre .support.namespace, pre .support.tag, pre .support.tag-name {
+    color: #89BDFF;
+}
+
+pre .entity.name.id {
+    color: #8693A5;
+}
+
+*[data-language="c"] .function.call {
+    color: #8DA6CE;
+}
+
+pre .variable, pre .variable.global {
+    color: #3E87E3;
+    }
+pre .variable.class {
+
+    }
+

src/main/webapp/static/ace/docs/assets/js/themes/tomorrow-night.css

@@ -0,0 +1,48 @@
+/**
+ * Tomorrow Night theme
+ *
+ * @author Chris Kempson
+ * @author skim
+ * @version 1.0.0
+ */
+pre {
+    background-color: #1d1f21;
+    word-wrap: break-word;
+    margin: 0px;
+    padding: 10px;
+    color: #c5c8c6;
+    font-size: 14px;
+    margin-bottom: 20px;
+}
+
+pre, code {
+    font-family: 'Monaco', courier, monospace;
+}
+
+pre .comment {
+    color: #969896;
+}
+
+pre .variable.global, pre .variable.class, pre .variable.instance {
+    color: #cc6666; /* red */
+}
+
+pre .constant.numeric, pre .constant.language, pre .constant.hex-color, pre .keyword.unit {
+    color: #de935f; /* orange */
+}
+
+pre .constant, pre .entity, pre .entity.class, pre .support {
+    color: #f0c674; /* yellow */
+}
+
+pre .constant.symbol, pre .string {
+    color: #b5bd68; /* green */
+}
+
+pre .entity.function, pre .support.css-property, pre .selector {
+    color: #81a2be; /* blue */
+}
+
+pre .keyword, pre .storage {
+    color: #b294bb; /* purple */
+}

src/main/webapp/static/ace/docs/assets/js/themes/tricolore.css

@@ -0,0 +1,59 @@
+/**
+ * Tricolore theme
+ *
+ * @author Jean Nicolas
+ * @version 1.0.1
+ */
+pre {
+    background: #FFF;
+    word-wrap: break-word;
+    margin: 0px;
+    padding: 10px;
+    color: #000;
+    font-size: 12px;
+    margin-bottom: 20px;
+	line-height: 16px;
+}
+
+pre, code {
+    font-family: 'Monaco', 'Consolas', monospace;
+}
+
+pre .comment {
+    color: #7E7E7E;
+	font-style: italic;
+}
+
+pre .constant {
+    color: #18838A;
+	font-weight: bold;
+}
+
+pre .storage {
+    color: #0000A1;
+}
+
+pre .string {
+    color: #8E0022;
+}
+
+pre .keyword, pre .selector {
+    color: #0000A1;
+	font-weight: bold;
+}
+
+pre .inherited-class {
+    font-style: italic;
+}
+
+pre .entity {
+    color: #3E853F;
+}
+
+pre .support {
+    color: #192140;
+}
+
+pre .variable.global, pre .variable.class, pre .variable.instance {
+    color: #3E853F;
+}

src/main/webapp/static/ace/docs/assets/js/themes/twilight.css

@@ -0,0 +1,82 @@
+/**
+ * Twilight theme
+ *
+ * Adapted from Michael Sheets' TextMate theme of the same name
+ *
+ * @author Michael Sheets
+ * @author Jesse Farmer <jesse@20bits.com>
+ * @version 1.0.1
+ */
+pre {
+    background: #141414;
+    word-wrap: break-word;
+    margin: 0px;
+    padding: 10px;
+    color: #F8F8F8;
+    font-size: 14px;
+    margin-bottom: 20px;
+}
+
+pre, code {
+    font-family: 'Monaco', courier, monospace;
+}
+
+pre .comment {
+    color: #5F5A60;
+}
+
+pre .constant.numeric {
+    color: #D87D50;
+}
+
+pre .constant {
+    color: #889AB4;
+}
+
+pre .constant.symbol, pre .constant.language {
+    color: #D87D50;
+}
+
+pre .storage {
+    color: #F9EE98;
+}
+
+pre .string {
+    color: #8F9D6A;
+}
+
+pre .string.regexp {
+    color: #E9C062;
+}
+
+pre .keyword, pre .selector, pre .storage {
+    color: #CDA869;
+}
+
+pre .inherited-class {
+    color: #9B5C2E;
+}
+
+pre .entity {
+    color: #FF6400;
+}
+
+pre .support {
+    color: #9B859D;
+}
+
+pre .support.magic {
+    color: #DAD69A;
+}
+
+pre .variable {
+    color: #7587A6;
+}
+
+pre .function, pre .entity.class {
+    color: #9B703F;
+}
+
+pre .support.class-name, pre .support.type {
+    color: #AB99AC;
+}

src/main/webapp/static/ace/docs/assets/js/themes/zenburnesque.css

@@ -0,0 +1,59 @@
+/**
+ * Zenburnesque theme
+ *
+ * Adapted from Ultraviolet RubyGem
+ *
+ * @author Flinn Mueller
+ * @version 1.0
+ */
+pre {
+    background: #404040;
+    word-wrap: break-word;
+    margin: 0px;
+    padding: 10px;
+    color: #dedede;
+    font-size: 14px;
+    margin-bottom: 20px;
+}
+
+pre, code {
+    font-family: 'Monaco', courier, monospace;
+}
+
+pre .comment {
+    color: #709070;
+    font-style: italic;
+}
+
+pre .integer {
+    color: #22C0FF;
+}
+
+pre .storage {
+    color: #6080FF;
+}
+
+/* This includes regexes */
+pre .string {
+    color: #FF2020;
+}
+
+pre .keyword, pre .selector {
+    color: #ffffa0;
+}
+
+pre .inherited-class {
+    font-style: italic;
+}
+
+pre .entity {
+  color: #F09040;
+}
+
+pre .support {
+    color: #C83730;
+}
+
+pre .variable.class {
+  color: #FF8000;
+}

src/main/webapp/static/ace/docs/blank.html

@@ -0,0 +1 @@
+<!-- used for redirecting to an external link, to hide referral url -->

src/main/webapp/static/ace/docs/index.html

@@ -0,0 +1,816 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Welcome - Ace Docs</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <link href="../assets/css/bootstrap.css" rel="stylesheet">
+	<link href="../assets/css/font-awesome.css" rel="stylesheet" />
+
+    <link href="../assets/css/prettify.css" rel="stylesheet">
+
+	<link rel="stylesheet" href="../assets/css/ace-fonts.css" />
+	<link rel="stylesheet" href="../assets/css/ace.css" class="ace-main-stylesheet" />
+	<!--[if lte IE 9]>
+		<link rel="stylesheet" href="../assets/css/ace-part2.css" class="ace-main-stylesheet" />
+	<![endif]-->
+	<link rel="stylesheet" href="../assets/css/ace-skins.css" />
+	
+	<link href="assets/js/themes/sunburst.css" rel="stylesheet" />
+
+	<style>
+		.navbar {
+			background: #438EB9 !important;
+		}
+		body {
+			font-size: 14px;
+		}
+		.skin-3 .main-container:before {
+			background: #F6F6F6;
+		}
+		.page-content {
+			padding-top: 25px;
+			padding-bottom: 75px;
+			max-width: 700px;
+			margin: 0 auto;
+		}
+
+		.help-content {
+			background-color: #FFF;
+			max-width: 680px;
+			margin: 0 auto;
+			padding: 12px 24px;
+			border:1px solid #C5D0DC;
+		}
+		.help-content > .widget-box > .widget-header > .info-title {
+			cursor: pointer;
+		}
+		.help-content > .widget-box > .widget-header > .info-title:hover {
+			background-color: #DCE8F1;
+		}
+		.help-content > .widget-box.collapsed > .widget-header {
+			border-bottom-width: 0;
+		}
+		
+		.help-content > .widget-box {
+			border-bottom: 1px solid #DCE8F1;
+			margin-bottom: 10px;
+			padding-bottom: 5px;
+			transition: none;
+		}
+		.help-content > .widget-box.collapsed {
+			padding-bottom: 10px;
+			transition: padding-bottom 0.1s;
+		}
+		.help-content > .widget-box:last-child {
+			border-bottom-width: 0;
+			margin-bottom: 0;
+		}
+		
+		.help-content > .widget-box:only-child {
+			padding-bottom: 0;
+			padding-bottom: 5px;
+		}
+		
+		
+		.info-list {
+			margin: 0;
+		}
+		.info-list > li:nth-child(odd) > .ace-icon:first-child {
+			color: #478FCA;
+		}
+		.info-list > li:nth-child(even) > .ace-icon:first-child {
+			color: #69AA46;
+		}
+		.info-list > li:not(.hr) {
+			margin-top: 0;
+			margin-bottom: 0;
+			padding: 16px 12px;
+			line-height: 22px;
+		}
+		.info-list > li:not(.hr):nth-child(even) {
+			background-color: #FFF;
+			border: 1px solid #E9E9E9;
+		}
+		.info-list > li:not(.hr):nth-child(odd) {
+			background-color: #F0F4F9;
+		}
+		
+		.info-list > li:not(.hr):nth-child(even)  code
+		{
+			background-color: #F0F4F9;
+		}
+		.info-list > li:not(.hr):nth-child(odd)  code
+		{
+			background-color: #FFF;
+		}
+		
+		
+		.help-more {
+			color: #4E82A3;
+			border-bottom: 1px dotted #8BA8BA;			
+			padding: 0 1px 1px;
+		}
+		.help-more:hover {
+			text-decoration: none;
+			border-bottom-color: #628DB2;
+			background-color: #E4EAC7;
+		}
+		
+		u.dotted {
+			text-decoration: none;
+			border-bottom: 1px dotted #999;
+		}
+
+		@media only screen and (min-width: 992px) {
+			.sidebar {
+				padding-top: 4px;
+			}
+		}
+		
+		pre .close {
+			float: inherit;
+			font-size: inherit;
+			font-weight: inherit;
+			line-height: inherit;
+			opacity: inherit;
+			text-shadow: inherit;
+		}
+		
+		.open-file {
+			cursor: pointer;
+			-webkit-transition: all 0.12s;
+			transition: all 0.12s;
+		}
+		.open-file:hover {
+			background-color: #CEE0EA !important;
+		}
+		.open-file .brief-show {
+			display: none;
+		}
+		.open-file:hover .brief-show {
+			display: inline;
+		}
+		
+		.code-modal .modal-dialog {
+			margin-top: 6px;
+			margin-bottom: 6px;
+		}
+		.code-modal .modal-header {
+			padding-top: 6px;
+			padding-bottom: 6px;
+		}
+		.code-modal .modal-body {
+			padding: 10px 12px
+		}
+		
+		
+		pre {
+			border-width: 0;
+			box-shadow: none;
+			border-radius: 0;
+			margin-top: 8px;
+		}
+		
+		a[href^="http"]:before {
+		   font-family: FontAwesome;
+		   font-size: 15px;
+		   content: "\f08e";
+		   display: inline;
+		   margin-right: 3px;
+		}
+		a.external_link[href^="http"]:before {
+			display: none;
+		}
+		
+		.thumbnail {
+		  margin: 12px 0 8px;
+		}
+	</style>
+  </head>
+
+  <body class="no-skin skin-3">	
+     <div id="navbar" class="navbar navbar-default navbar-fixed-top h-navbar">
+		<div class="navbar-container container" id="navbar-container">
+			<div class="navbar-header pull-left ace-navbar-brand">
+				<span class="no-skin">
+				 <button data-target="#sidebar" type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler">
+					<span class="sr-only">Toggle sidebar</span>
+					<span class="icon-bar"></span>
+					<span class="icon-bar"></span>
+					<span class="icon-bar"></span>
+				 </button>
+				</span>
+				<a href="#" class="navbar-brand">
+					<small>
+						&nbsp;<i class="glyphicon glyphicon-book"></i>&nbsp;
+						Help <span class="smaller-75">(v1.3.4)</span>
+					</small>
+				</a><!-- /.brand -->
+			</div>
+			
+			<div class="navbar-header pull-right ace-navbar-buttons">
+				<ul class="nav ace-nav">
+					<li class="margin-2 no-border">
+						<a href="#" id="help-move-prev"><i class="ace-icon fa fa-chevron-left"></i></a>
+					</li>
+					<li class="margin-2 no-border">
+						<a href="#" id="help-move-next"><i class="ace-icon fa fa-chevron-right"></i></a>
+					</li>
+				</ul>
+			</div>
+		</div>
+    </div>
+
+    <div  class="main-container container">
+		<script>
+		 if(document.location.protocol == 'file:') {
+			document.write('<div class="alert alert-danger">\
+			<strong>Please open this page using <span class="text-info">`http` protocol</span>, i.e. access it like this <span class="text-primary">http://127.0.0.1/path/to/ace/docs/index.html</span></strong><br />\
+			Demo pages, documentation & CSS/JS builder pages, load data dynamically using ajax and <b>`file` protocol</b> prevents that due to browser restrictions.\<br />\
+			Also some browsers such as Firefox don\'t load fonts when resource files are inside an upper level directory.\
+			</div>');
+		 }
+		</script>
+      <div class="sidebar responsive sidebar-fixed" id="sidebar">
+        <ul class="nav nav-list">
+          <li class="highlight">
+			<a href="#intro">
+				<span class="menu-icon">&#x2170;.</span>
+				<span class="menu-text">Introduction</span>
+			</a>
+			<b class="arrow"></b>
+		  </li>
+
+		  <li class="highlight hover">
+			<a href="#changes" class="dropdown-toggle">
+				<span class="menu-icon">&#x2171;.</span>
+				<span class="menu-text">Changes & Updates</span>
+				<b class="arrow fa fa-angle-right"></b>
+			</a>
+			<b class="arrow"></b>
+			<ul class="submenu">
+				<li class="hover"><a href="#changes.v9"><i class="menu-icon fa fa-caret-right"></i> v1.3.3 <i class="fa fa-long-arrow-right"></i> v1.3.4</a></li>
+				<li class="hover"><a href="#changes.v8"><i class="menu-icon fa fa-caret-right"></i> v1.3.2 <i class="fa fa-long-arrow-right"></i> v1.3.3</a></li>
+				<li class="hover"><a href="#changes.v7"><i class="menu-icon fa fa-caret-right"></i> v1.3.1 <i class="fa fa-long-arrow-right"></i> v1.3.2</a></li>
+				<li class="hover"><a href="#changes.v6"><i class="menu-icon fa fa-caret-right"></i> v1.3.0 <i class="fa fa-long-arrow-right"></i> v1.3.1</a></li>
+				<li class="hover"><a href="#changes.v5"><i class="menu-icon fa fa-caret-right"></i> v1.2.0 <i class="fa fa-long-arrow-right"></i> v1.3.0</a></li>
+				<li class="hover"><a href="#changes.v4"><i class="menu-icon fa fa-caret-right"></i> v1.1.3 <i class="fa fa-long-arrow-right"></i> v1.2.0</a></li>
+				<li class="hover"><a href="#changes.v3"><i class="menu-icon fa fa-caret-right"></i> v1.1.2 <i class="fa fa-long-arrow-right"></i> v1.1.3</a></li>
+				<li class="hover"><a href="#changes.v2"><i class="menu-icon fa fa-caret-right"></i> v1.1.0 <i class="fa fa-long-arrow-right"></i> v1.1.2</a></li>
+				<li class="hover"><a href="#changes.fontawesome"><i class="menu-icon fa fa-caret-right"></i> Fontawesome & Icons</a></li>
+			</ul>
+			<b class="arrow"></b>
+		  </li>
+
+		  <li class="highlight hover">
+			<a href="#" class="dropdown-toggle">
+				<span class="menu-icon">&#x2172;.</span>
+				<span class="menu-text">Files</span>
+				<b class="arrow fa fa-angle-right"></b>
+			</a>
+			<b class="arrow"></b>
+			<ul class="submenu">
+				<li class="hover"><a href="#files/html"><i class="menu-icon fa fa-caret-right"></i> HTML Files</a></li>
+				<li class="hover"><a href="#files/mustache"><i class="menu-icon fa fa-caret-right"></i> Mustache Files</a></li>
+				<li class="hover"><a href="#files/css"><i class="menu-icon fa fa-caret-right"></i> CSS/LESS Files</a></li>
+				<li class="hover"><a href="#files/javascript"><i class="menu-icon fa fa-caret-right"></i> Javascript Files</a></li>
+				<li class="hover"><a href="#files/examples"><i class="menu-icon fa fa-caret-right"></i> Example Files</a></li>
+			</ul>
+		  </li>
+		  
+		  <li class="highlight hover">
+			<a href="#" class="dropdown-toggle">
+				<span class="menu-icon">&#x2173;.</span>
+				<span class="menu-text">Basics</span>
+				<b class="arrow fa fa-angle-right"></b>
+			</a>
+			<b class="arrow"></b>
+			<ul class="submenu">
+				<li class="hover"><a href="#basics/layout"><i class="menu-icon fa fa-caret-right"></i> Page Layout</a></li>
+				<li class="hover"><a href="#basics/navbar"><i class="menu-icon fa fa-caret-right"></i> Navbar</a></li>
+				<li class="hover"><a href="#basics/sidebar"><i class="menu-icon fa fa-caret-right"></i> Sidebar</a></li>
+				<li class="hover"><a href="#basics/content"><i class="menu-icon fa fa-caret-right"></i> Content</a></li>
+				<li class="hover"><a href="#basics/ajax"><i class="menu-icon fa fa-caret-right"></i> Ajax Content</a></li>
+				<li class="hover"><a href="#basics/footer"><i class="menu-icon fa fa-caret-right"></i> Footer</a></li>
+			</ul>
+		  </li>
+
+		  <li class="highlight hover">
+			<a href="#elements" class="dropdown-toggle">
+				<span class="menu-icon">&#x2174;.</span>
+				<span class="menu-text">Elements</span>
+				<b class="arrow fa fa-angle-right"></b>
+			</a>
+			<b class="arrow"></b>
+			<ul class="submenu">
+				<li class="hover"><a href="#elements.button"><i class="menu-icon fa fa-caret-right"></i> Buttons</a></li>
+				<li class="hover"><a href="#elements.label-badge"><i class="menu-icon fa fa-caret-right"></i> Labels & Badges</a></li>
+				<li class="hover"><a href="#elements.icon"><i class="menu-icon fa fa-caret-right"></i> Icons</a></li>
+				<li class="hover"><a href="#elements.form"><i class="menu-icon fa fa-caret-right"></i> Form Control</a></li>
+				<li class="hover"><a href="#elements.tab"><i class="menu-icon fa fa-caret-right"></i> Tabs</a></li>
+				<li class="hover"><a href="#elements.accordion"><i class="menu-icon fa fa-caret-right"></i> Accordion</a></li>
+				<li class="hover"><a href="#elements.tooltip"><i class="menu-icon fa fa-caret-right"></i> Tooltip & Popover</a></li>
+				<li class="hover"><a href="#elements.dropdown"><i class="menu-icon fa fa-caret-right"></i> Dropdown</a></li>
+				<li class="hover"><a href="#elements.other"><i class="menu-icon fa fa-caret-right"></i> Other</a></li>
+			</ul>
+		  </li>
+
+		  <li class="highlight hover">
+			<a href="#" class="dropdown-toggle">
+				<span class="menu-icon">&#x2175;.</span>
+				<span class="menu-text">Custom Elements</span>
+				<b class="arrow fa fa-angle-right"></b>
+			</a>
+			<b class="arrow"></b>
+			<ul class="submenu">
+				<li class="hover"><a href="#custom/widget-box"><i class="menu-icon fa fa-caret-right"></i> Widget Boxes</a></li>
+				<li class="hover"><a href="#custom/scrollbar"><i class="menu-icon fa fa-caret-right"></i> Scrollbars</a></li>
+				<li class="hover"><a href="#custom/file-input"><i class="menu-icon fa fa-caret-right"></i> File Input</a></li>
+				<li class="hover"><a href="#custom/checkbox"><i class="menu-icon fa fa-caret-right"></i> Checkbox & Switches</a></li>				
+				<li class="hover"><a href="#custom/colorpicker"><i class="menu-icon fa fa-caret-right"></i> Simple Color Picker</a></li>
+				<li class="hover"><a href="#custom/inline-editable"><i class="menu-icon fa fa-caret-right"></i> Inline Editable Addons</a></li>
+				<li class="hover"><a href="#custom/content-slider"><i class="menu-icon fa fa-caret-right"></i> Content Slider</a></li>
+				<li class="hover"><a href="#custom/onpage-help"><i class="menu-icon fa fa-caret-right"></i> Onpage Help</a></li>
+				<li class="hover"><a href="#custom/extra"><i class="menu-icon fa fa-caret-right"></i> Extra Classes</a></li>
+			</ul>
+		  </li>
+		  
+		  <li class="highlight hover">
+			<a href="#" class="dropdown-toggle">
+				<span class="menu-icon">&#x2176;.</span>
+				<span class="menu-text">Pages</span>
+				<b class="arrow fa fa-angle-right"></b>
+			</a>
+			<b class="arrow"></b>
+			<ul class="submenu">
+				<li class="hover"><a href="#pages/dashboard"><i class="menu-icon fa fa-caret-right"></i> Dashboard</a></li>
+				<li class="hover"><a href="#pages/gallery"><i class="menu-icon fa fa-caret-right"></i> Gallery</a></li>
+				<li class="hover"><a href="#pages/pricing"><i class="menu-icon fa fa-caret-right"></i> Pricing</a></li>
+				<li class="hover"><a href="#pages/invoice"><i class="menu-icon fa fa-caret-right"></i> Invoice</a></li>
+				<li class="hover"><a href="#pages/faq"><i class="menu-icon fa fa-caret-right"></i> FAQ</a></li>
+				<li class="hover"><a href="#pages/inbox"><i class="menu-icon fa fa-caret-right"></i> Inbox</a></li>
+				<li class="hover"><a href="#pages/email"><i class="menu-icon fa fa-caret-right"></i> Email Templates</a></li>
+				<li class="hover"><a href="#pages/profile"><i class="menu-icon fa fa-caret-right"></i> Profile</a></li>
+				<li class="hover"><a href="#pages/timeline"><i class="menu-icon fa fa-caret-right"></i> Timeline</a></li>
+				<li class="hover"><a href="#pages/login"><i class="menu-icon fa fa-caret-right"></i> Login</a></li>
+				<li class="hover"><a href="#pages/error"><i class="menu-icon fa fa-caret-right"></i> Error</a></li>
+			</ul>
+		  </li>
+		  
+		  <li class="highlight hover">
+			<a href="#" class="dropdown-toggle">
+				<span class="menu-icon">&#x2177;.</span>
+				<span class="menu-text">Plugins</span>
+				<b class="arrow fa fa-angle-right"></b>
+			</a>
+
+			<b class="arrow"></b>
+			<ul class="submenu">
+				<li class="hover">
+					<a href="#plugins/tools" class="dropdown-toggle">
+						<i class="menu-icon fa fa-caret-right"></i> Tools
+						<b class="arrow fa fa-angle-right"></b>
+					</a>
+
+					<b class="arrow"></b>
+					<ul class="submenu">
+						<li class="hover"><a href="#plugins/tools.node-js">Node.js</a></li>
+						<li class="hover"><a href="#plugins/tools.less-js">Less.js</a></li>
+						<li class="hover"><a href="#plugins/tools.mustache">Mustache Compilers</a></li>
+						<li class="hover"><a href="#plugins/tools.uglifyjs">UglifyJS</a></li>
+						<li class="hover"><a href="#plugins/tools.yui-compressor">YUI Compressor</a></li>
+					</ul>
+				</li>
+				
+				<li class="hover"><a href="#plugins/bootstrap"><i class="menu-icon fa fa-caret-right"></i> Bootstrap</a></li>
+				<li class="hover"><a href="#plugins/jquery"><i class="menu-icon fa fa-caret-right"></i> jQuery</a></li>
+				<li class="hover">
+					<a href="#plugins/date-time" class="dropdown-toggle">
+						<i class="menu-icon fa fa-caret-right"></i> Date & Time
+						<b class="arrow fa fa-angle-right"></b>
+					</a>
+
+					<b class="arrow"></b>
+					<ul class="submenu">
+						<li class="hover"><a href="#plugins/date-time.datepicker">Date picker</a></li>
+						<li class="hover"><a href="#plugins/date-time.daterangepicker">Daterange Picker</a></li>
+						<li class="hover"><a href="#plugins/date-time.timepicker">Time Picker</a></li>
+						<li class="hover"><a href="#plugins/date-time.datetimepicker">Datetime Picker</a></li>
+						<li class="hover"><a href="#plugins/date-time.fullcalendar">FullCalendar</a></li>
+					</ul>
+				</li>
+				
+				<li class="hover">
+					<a href="#plugins/charts" class="dropdown-toggle">
+						<i class="menu-icon fa fa-caret-right"></i> Charts
+						<b class="arrow fa fa-angle-right"></b>
+					</a>
+
+					<b class="arrow"></b>
+					<ul class="submenu">
+						<li class="hover"><a href="#plugins/charts.flot">jQuery Flot Charts</a></li>
+						<li class="hover"><a href="#plugins/charts.sparkline">jQuery Sparklines</a></li>
+						<li class="hover"><a href="#plugins/charts.easypiechart">Easy Pie Chart</a></li>
+						<li class="hover"><a href="#plugins/charts.knob">jQuery Knob</a></li>
+					</ul>
+				</li>
+				
+				<li class="hover">
+					<a href="#plugins/tables" class="dropdown-toggle">
+						<i class="menu-icon fa fa-caret-right"></i> Table & Grids
+						<b class="arrow fa fa-angle-right"></b>
+					</a>
+
+					<b class="arrow"></b>
+					<ul class="submenu">
+						<li class="hover"><a href="#plugins/tables.datatables">jQuery dataTables</a></li>
+						<li class="hover"><a href="#plugins/tables.jqgrid">jQuery jqGrid</a></li>
+					</ul>
+				</li>
+				
+				<li class="hover">
+					<a href="#plugins/input" class="dropdown-toggle">
+						<i class="menu-icon fa fa-caret-right"></i> Input & Controls
+						<b class="arrow fa fa-angle-right"></b>
+					</a>
+
+					<b class="arrow"></b>
+					<ul class="submenu">
+						<li class="hover"><a href="#plugins/input.chosen">Chosen</a></li>
+						<li class="hover"><a href="#plugins/input.select2">Select2</a></li>
+						<li class="hover"><a href="#plugins/input.tag-input">Tag Input</a></li>
+						<li class="hover"><a href="#plugins/input.duallist">Dual listbox</a></li>
+						<li class="hover"><a href="#plugins/input.multiselect">Multiselect</a></li>
+
+						<li class="hover"><a href="#plugins/input.masked-input">Masked Input</a></li>
+						<li class="hover"><a href="#plugins/input.limiter">Input Limiter</a></li>
+
+						<li class="hover"><a href="#plugins/input.autosize">Textarea Autosize</a></li>
+					</ul>
+				</li>
+				
+				<li class="hover">
+					<a href="#plugins/editor" class="dropdown-toggle">
+						<i class="menu-icon fa fa-caret-right"></i> Editors
+						<b class="arrow fa fa-angle-right"></b>
+					</a>
+
+					<b class="arrow"></b>
+					<ul class="submenu">
+						<li class="hover"><a href="#plugins/editor.wysiwyg">Wysiwyg Editor</a></li>
+						<li class="hover"><a href="#plugins/editor.markdown">Markdown Editor</a></li>
+					</ul>
+				</li>
+				
+				<li class="hover">
+					<a href="#plugins/fuelux" class="dropdown-toggle">
+						<i class="menu-icon fa fa-caret-right"></i> FuelUX
+						<b class="arrow fa fa-angle-right"></b>
+					</a>
+
+					<b class="arrow"></b>
+					<ul class="submenu">
+						<li class="hover"><a href="#plugins/fuelux.spinner">Spinner</a></li>
+						<li class="hover"><a href="#plugins/fuelux.wizard">Wizard</a></li>
+						<li class="hover"><a href="#plugins/fuelux.treeview">Treeview</a></li>
+					</ul>
+				</li>
+				
+
+				<li class="hover">
+					<a href="#plugins/misc" class="dropdown-toggle">
+						<i class="menu-icon fa fa-caret-right"></i> Miscellaneous
+						<b class="arrow fa fa-angle-right"></b>
+					</a>
+
+					<b class="arrow"></b>
+					<ul class="submenu">
+						<li class="hover"><a href="#plugins/misc.inline-editable">Inline Editable</a></li>
+						<li class="hover"><a href="#plugins/misc.jquery-validate">jQuery Validate</a></li>
+						<li class="hover"><a href="#plugins/misc.colorbox">Colorbox</a></li>
+						<li class="hover"><a href="#plugins/misc.dropzone">Dropzone.js</a></li>
+						<li class="hover"><a href="#plugins/misc.colorpicker">Colorpicker</a></li>
+						
+						<li class="hover"><a href="#plugins/misc.bootbox">Bootbox</a></li>
+						<li class="hover"><a href="#plugins/misc.gritter">Gritter</a></li>
+						<li class="hover"><a href="#plugins/misc.nestable-list">Nestable Lists</a></li>
+						<li class="hover"><a href="#plugins/misc.slimscroll">SlimScroll</a></li>
+						
+						<li class="hover"><a href="#plugins/misc.raty">Star Rating</a></li>
+					</ul>
+				</li>
+
+			</ul>
+		  </li>
+		  
+		  		  
+		  <li class="highlight hover">
+			<a href="#settings" class="dropdown-toggle">
+				<span class="menu-icon">&#x2178;.</span>
+				<span class="menu-text">Settings</span>
+				<b class="arrow fa fa-angle-right"></b>
+			</a>
+			<b class="arrow"></b>
+			<ul class="submenu">
+				<li class="hover"><a href="#settings.page"><i class="menu-icon fa fa-caret-right"></i> Page options</a></li>
+				<li class="hover"><a href="#settings.sidebar"><i class="menu-icon fa fa-caret-right"></i> Sidebar options</a></li>
+				<li class="hover"><a href="#settings.skins"><i class="menu-icon fa fa-caret-right"></i> Skins</a></li>
+				<li class="hover"><a href="#settings.rtl"><i class="menu-icon fa fa-caret-right"></i> RTL (right to left)</a></li>
+				<li class="hover"><a href="#settings.storage"><i class="menu-icon fa fa-caret-right"></i> Cookies & Storage</a></li>
+			</ul>
+		  </li>
+		  
+		  <li class="highlight">
+			<a href="#credits">
+				<span class="menu-icon">&#x2179;.</span>
+				<span class="menu-text">Credits</span>
+			</a>
+			<b class="arrow"></b>
+		  </li>
+		  
+
+		   <li class="highlight">
+			<a href="#issues">
+				<i class="menu-icon fa fa-gavel"></i>
+				<span class="menu-text">Notes &amp; Issues</span>
+			</a>
+			<b class="arrow"></b>
+		  </li>
+		  
+        </ul>
+		
+		<div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
+		 	<i class="ace-icon fa fa-angle-double-left" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
+		 </div>
+      </div>
+	  
+	  
+      <div class="main-content">
+		<div class="page-content">
+
+
+        </div><!-- /.page-content -->
+      </div><!-- /.main-content -->
+
+	 
+ 	  <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
+		<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
+	  </a><!-- /.btn-scroll-up -->
+		
+  </div><!-- /.main-container -->
+
+
+	<!--[if !IE]> -->
+	<script src="../assets/js/jquery.js"></script>
+	<!-- <![endif]-->
+	<!--[if IE]>
+	<script src="../assets/js/jquery1x.js"></script>
+	<![endif]-->
+	
+	<script src="../assets/js/bootstrap.js"></script>
+    <script src="../assets/js/prettify.js"></script>
+	
+	<script src="../assets/js/ace-extra.js"></script>
+	<script src="../assets/js/ace-elements.js"></script>
+	<script src="../assets/js/ace.js"></script>
+
+
+	<script>
+	$(function() {
+		//$('body').scrollspy({ target: '.sidebar' })
+	
+		//used for top next/prev buttons
+		var section_list = [], section_map = {}, current = 0;
+		var sindex = 0;
+		$('.sidebar .nav-list a').each(function() {
+			var href = getHref($(this).attr('href'));
+			if(href) {
+				section_list.push(href);
+				section_map[href] = sindex++;
+			}
+		});
+
+		$('#help-move-prev').on('click', function(e) {
+			e.preventDefault();
+			if( --current >= 0 ) {
+				var href = section_list[current];
+				document.location.hash = href;
+			}
+			if(current < 0) current = 0;
+		});
+		$('#help-move-next').on('click', function(e) {
+			e.preventDefault();
+			if( ++current < section_list.length ) {
+				var href = section_list[current];
+				document.location.hash = href;
+			}
+			if(current >= section_list.length) current = section_list.length - 1;
+		});
+
+		
+
+		//$(document).on('show.ace.widget hide.ace.widget', '.help-content > .widget-box', function(e) {
+			//disable button action
+			//e.preventDefault();
+		//});
+		$(document).on(ace.click_event, '.help-content > .widget-box > .widget-header > .info-title', function(e) {
+			var widget_box = $(this).closest('.widget-box').widget_box('toggle');
+			//widget_box.siblings('.widget-box').widget_box('hide');
+		});
+		
+		
+		$(document).off(ace.click_event+'.ace.submenu', '.sidebar .nav-list');
+		$(document).on(ace.click_event+'.ace.submenu', '.sidebar .nav-list a', function(e) {
+			var href = getHref($(this).attr('href'));
+			if(!href) return false;
+		});
+
+		$(window).on('hashchange.help', function(e) {
+			var href = getHref(window.location.hash);
+			if(!href) return false;
+			return gotoUrl(href);			
+		})
+		$(document).on(ace.click_event+'.help', '.help-more', function(ev) {
+			//clicking on a link triggers 'hashchange', so it's not needed
+			//but if we already are on a hash such as '#hash1'
+			//and click a '#hash1' link, 'hashchange' won't be triggered and we won't scroll to our content
+			var href = $(this).attr('href');
+			if(window.location.hash == href) gotoUrl(href);
+		});
+		
+		
+		var href = getHref(window.location.hash);
+		if(!href) window.location.hash = '#intro';
+		else $(window).triggerHandler('hashchange.help');
+		
+		var prev_target = null;
+
+		function gotoUrl(href) {
+			current = section_map[href];
+
+			var url = href.replace(/\..*$/g, '').replace(/#/gi , '')
+			var parts = url.split('/');
+			if(parts.length == 1) {
+				if(url.length == 0) url = 'intro';
+				url = url+'/index.html';
+			}
+			else if(parts.length > 1) {
+				url = url+'.html';
+			}
+			
+			$('.sidebar .active').removeClass('active');
+			var link = $('a[href="'+href+'"]').eq(0);
+			link.parents('li').addClass('active');
+			
+			var text = $.trim(link.find('.menu-text').text());
+			if(text.length == 0) text = $.trim(link.text());
+			document.title = text + " - Ace Docs";
+			//if(text == '');
+
+			var ret = scrollToTarget(href);
+			if(ret === false) {
+				$('.page-content').empty().html('<i class="ace-icon fa fa-spinner fa-spin blue fa-2x"></i>');
+			
+				//otherwise try downloading the page
+				$.ajax({url: 'sections/'+url}).done(function(result) {
+					result = result.replace(/\<pre(?:\s+)data\-language=["'](?:html|javascript|php)["']\>([\S|\s]+?)\<\/pre\>/ig, function(a, b){
+						return a.replace(b , b.replace(/\</g , '&lt;').replace(/\>/g , '&gt;'));
+					});
+					
+					$('.page-content').addClass('hidden').empty().html(result);
+					formatResult();
+					
+					ret = scrollToTarget(href);
+					if(ret) document.title = ret + " - Ace Docs";
+				}).fail(function() {
+					$('.page-content').empty().html('<div class="alert alert-danger"><i class="fa fa-warning"></i> Unable to load page!</div>');
+				});
+			}
+			else if(ret) document.title = ret + " - Ace Docs";
+
+
+			return true;
+		}
+		
+		function formatResult() {
+			$('.page-content .info-section').each(function() {
+				var header = $(this).prevAll('.info-title').eq(0).addClass('widget-title').wrap('<div class="widget-header" />')
+				.parent().append('<div class="widget-toolbar no-border">\
+				<a href="#" data-action="collapse">\
+					<i data-icon-hide="fa-minus" data-icon-show="fa-plus" class="ace-icon fa fa-plus"></i>\
+				</a>\
+			</div>').closest('.widget-header');
+
+				$(this).wrap('<div class="widget-box transparent'+(header.length > 0 ? ' collapsed':'')+'"><div class="widget-body"><div class="widget-main"></div></div></div>');
+				$(this).closest('.widget-box').prepend(header);
+				
+				$(this).ace_scroll({size: parseInt($(window).height()  - 200), reset: true});
+				//.parent().css({'max-height':400, 'overflow-y':'scroll'});//
+			});
+			
+			Rainbow.color();
+			
+			$('.page-content').removeClass('hidden');
+		}
+		
+		function getHref(href) {
+			href = href && href.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
+			href = $.trim(href);
+			if(href.match(/[\#\/]$/i)) return false;
+			return href;
+		}
+		
+		function scrollToTarget(href) {
+			target = $('[data-id="'+href+'"]').eq(0);
+			if(target.length == 1) {
+				target.closest('.widget-box').widget_box('show');
+
+				//if target exists on page scroll to it
+				$('html,body').animate({scrollTop: target.offset().top - 75} , 300);
+				if(prev_target) prev_target.find('.fa-angle-right').remove();
+				
+				if(!target.is('h1')) target.prepend('<i class="fa fa-angle-right red"></i> ');
+				prev_target = target;
+	
+				return target.text().replace(/^[\d\s\.]+/ig, '');//convert "4. something" to "something"
+			}
+			return false;//section not found, go back and get it via ajax
+		}
+		
+		
+		$(document).on(ace.click_event, '.open-file[data-open-file]', function() {
+			var url = $(this).text();
+			var language = $(this).attr('data-open-file');
+			$.ajax({url: '../'+url, dataType:'text'}).done(function(content) {
+				if(language != 'json') {
+					if(language != 'css') {
+						//replace each tab character with two spaces (only those that start at a new line)
+						content = content.replace(/\n[\t]{1,}/g, function(p, q) {
+							return p.replace(/\t/g, "  ");
+						});
+					} else {
+						content = content.replace(/\t/g , "  ")
+					}
+				}
+				else {
+					content = JSON.stringify(JSON.parse(content), null, 2);
+				}
+				content = content.replace(/\>/g, '&gt;').replace(/\</g, '&lt;')
+				Rainbow.color(content, language, function(highlighted_code) {
+					display_code(url, highlighted_code);
+					
+				});
+			});
+		});
+		
+		function display_code(url, highlighted_code) {
+			var modal = $(document.body).find('#code-modal');
+			if(modal.length == 0) {
+				modal = $('<div id="code-modal" class="modal fade code-modal" tabindex="-1" role="dialog" aria-labelledby="CodeDialog" aria-hidden="true">\
+				  <div class="modal-dialog modal-lg">\
+					<div class="modal-content">\
+						<div class="modal-header">\
+						  <button aria-hidden="true" data-dismiss="modal" class="close" type="button">&times;</button>\
+						  <i class="fa fa-file-o"></i>\
+						  <code class="code-url"></code>\
+						</div>\
+						<div class="modal-body"><pre class="code-content"></pre></div>\
+					</div>\
+				  </div>\
+				</div>').appendTo('body');
+			}
+			
+			modal.find('.code-url').html(url);
+			modal.find('.code-content').html(highlighted_code);
+			modal.modal('show');
+		}
+
+		$(document).on('click', 'a[href^="http"]', function(ev) {
+			//go to a url, using meta refresh tag, to avoid sending 'referrer' url,
+			//maybe because of hiding development server's directory and folders
+			
+			ev.preventDefault();
+			var url = $(this).attr('href');
+			
+			var win = window.open('blank.html');
+			win.onload = function() {
+				win.document.write('<meta http-equiv="refresh" content="0; url='+url+'">');
+			}
+		});
+	});
+	</script>
+	
+	<script src="assets/js/rainbow.js"></script>
+	<script src="assets/js/language/generic.js"></script>
+	<script src="assets/js/language/html.js"></script>
+	<script src="assets/js/language/javascript.js"></script>
+	<script src="assets/js/language/css.js"></script>
+	<script src="assets/js/language/php.js"></script>
+
+
+  </body>
+</html>

src/main/webapp/static/ace/docs/sections/basics/ajax.html

@@ -0,0 +1,517 @@
+<section>
+	<h1 class="blue" data-id="#basics/ajax"><i class="ace-icon fa fa-desktop grey"></i> Ajax Content</h1>
+  <hr />
+
+  <div class="alert alert-danger">
+	<button class="close" data-dismiss="alert"><i class="ace-icon fa fa-times"></i></button>
+	<i class="ace-icon fa fa-exclamation-triangle"></i>
+	Ajax handling has been changed in v1.3.2
+	<br />
+	Please make sure to read through and apply the changes
+  </div>
+	
+	<div class="hr hr-double hr32"></div>
+
+
+	<!-- #section:basics/ajax -->
+	<div class="help-content">
+		<h3 class="info-title smaller">1. Overview</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Ajax loading is useful for updating an element's content without reloading the whole page.
+			</li>
+
+			<li>
+				If your application data and sections depend a lot on dynamic loading via ajax,
+				you may need more advanced solutions such as AngularJS which requires
+				some work to integrate with the template.
+			</li>
+			
+			<li>
+				In demo ajax pages some pages are not included such as horizontal menu page and jQuery UI page.
+				<br />
+				This is because for horizontal menu, layout changes as well.
+				<br />
+				And for jQuery UI when loading jQuery UI library, tooltip and datepicker override Bootstrap's.
+				<br />
+				This wouldn't be a problem, since in your app you either use jQuery UI datepicker or Bootstrap
+				datepicker, but not both at the same time. Same is true for tooltips.
+			</li>
+
+			<li>
+				To enable ajax on an element you should call the following function:
+<pre data-language="javascript">
+ $('#some-content-area').ace_ajax({
+    //options
+ });
+</pre>
+			</li>
+			
+			<li>
+				In Ace demo there is a <code>.page-content-area[data-ajax-content=true]</code>
+				element inside <code>.page-content</code> and its content is updated via ajax because
+				the following code is available by default in Ace:
+<pre data-language="javascript">
+ $('[data-ajax-content=true]').ace_ajax({
+    //options
+ });
+</pre>
+			</li>
+			
+			<li>
+				The new page's content sent from server is something like this:
+<pre data-language="html">
+ <title>New Title</title>
+ 
+ <link rel="stylesheet" href="maybe_new_stylesheet.css" />
+ <style>
+  .new_ruels_maybe {
+     color: red;
+  }
+ </style>
+ 
+ <div cass="page-header">
+    <!-- optional page header -->
+ </div>
+ 
+ <div class="row">
+   <div class="col-xs-12">
+      <!-- new page content here -->
+   </div>
+ </div>
+ 
+ 
+ <script type="text/javascript">
+  /* Load new scripts here. See "Loading JS &amp; CSS Files" for more info */
+ </script>
+</pre>
+			</li>
+			
+			<li>
+				Before loading content, you should have a basic empty layout.
+				<br />
+				For an example you can see <code>html/ajax/ajax.html</code> file.
+				<br />
+				And using <b>default_url</b> option as shown in next section you can load your default content after that.
+			</li>
+		 </ul><!-- /.info-list -->
+		</div><!-- /.info-section -->
+		
+		
+		
+		<h3 class="info-title smaller">2. Setting up</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				By default any element which has <code>data-ajax-content="true"</code> attribute will have ajax enabled.
+			</li>
+			
+			<li>
+				It's defined inside:
+				<br />
+				<code>assets/js/ace/ace.js</code> or <code>assets/js/ace.js</code> or <code>dist/js/ace.min.js</code>
+				<br />				
+				The "content_url" option which retrieves remote content based on window hash
+				is the most important part and you should change this to return the URL to your content
+				based on the hash tag.
+			</li>
+			
+			<li>
+				So for example you can have a <code>.page-content-area</code> element with <code>data-ajax-content="true"</code> attribute.
+				<br />
+				This way you should change "content_url" option in above mentioned files.
+				<br />
+				Or you can initiate ajax on your own element:
+<pre data-language="javascript">
+$('#some-content-area').ace_ajax({
+  content_url: function(hash) {
+    //hash is the value from document url hash
+
+    //take "url" param and return the relevant url to load
+    return "path/to/content/"+hash+".html";
+  },
+  default_url: 'homepage'//default url
+  ,
+  loading_icon: "fa-cog fa-2x blue"
+});
+</pre>
+			</li>
+			
+			<li>
+				Your links' <code>href</code> attribute should be like "#mypage1", "#mypage2" so that window hash changes and new ajax content is loaded.
+			</li>
+		 </ul><!-- /.info-list -->
+		</div><!-- /.info-section -->
+		
+		
+
+
+		<h3 class="info-title smaller" data-id="#basics/ajax.options">3. Options</h3>
+		<!-- #section:basics/ajax.options -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				The following options are available when enabling ajax content for an element:
+				<ul>
+					<li><code>content_url</code>: is the most important part.
+						A function that returns a url to retrieve. 
+						<div class="alert alert-info">Please note that if your ajax content is loaded recursively you need to fix this function and return a valid url based on functions value.</div>
+					</li>
+					<li><code>default_url</code>: default url (hash) to load</li>
+					
+					<li><code>loading_overlay</code>: specify the element to put the transparent layer over.</li>
+					<li><code>loading_icon</code>: the icon to show when loading new content. Default is "fa fa-spin fa-spinner fa-2x orange"</li>
+					<li><code>loading_text</code>: the text to show when loading new content. Default is "" (empty string)</li>
+					
+					<li><code>update_active</code>: a function or boolean value indicating whether to update "active" state of newly selected link and its parents. Default is true</li>
+					<li><code>update_breadcrumbs</code> a function or boolean value indicating whether to update breadcrumbs. Default is true</li>
+					<li><code>update_title</code>: a function or boolean value indicating whether to update window title. Default is true</li>
+					
+					<li><code>close_active</code>: whether to close submenu of previously active items or not. Default is false</li>
+					<li><code>max_load_wait</code>: time to wait in seconds before stopping ajax content retrieval if it takes too long for content to arrive. Default is false</li>
+				</ul>
+			</li>
+			<li>
+				If your new page content has <code>title</code> tag and <code>update_title</code> option is true (which is the default),
+				window title will be updated.
+			</li>
+			
+			<li>
+				An example would be something like this:
+<pre data-language="javascript">
+$('#some-content-area').ace_ajax({
+  content_url: function(hash) {
+    //hash is the value from document url hash
+
+    //take "hash" param and return the relevant url to load
+    return "content/"+hash+".html";
+  },
+  default_url: 'homepage.html'//default url
+  ,
+  loading_icon: "fa-cog fa-2x blue"
+});
+</pre>
+			</li>
+			
+			<li>
+				Please note that if you find your ajax content loading recursively for example when opening
+				homepage, you should modify <code>content_url</code> option to return
+				the correct url.
+			</li>
+						
+			<li>
+				For <code>update_active:true</code> to work,
+				the sidebar link element should have <code>data-url</code> attribute equal to window hash:
+				<pre data-language="html">
+  <ul class="nav nav-list">
+    <li>
+       <a href="#somepage" data-url="somepage">Some Page</a>
+    </li>
+  </ul>
+</pre>
+			</li>
+			
+			<li>
+				You can use a function for <code>update_active</code> option, to mark the active item:
+<pre data-language="javascript">
+ update_active: function(hash, url) {
+    //do something for example mark selected elements as active
+	
+    //and return the active element to be used in updating breadcrumbs
+    //return active_link_element;
+ }
+</pre>
+			</li>
+			
+			<li>
+				You can use a function for <code>update_breadcrumbs</code> option, to update breadcrumbs:
+<pre data-language="javascript">
+ update_breadcrumbs: function(hash, url, active_link_element) {
+    //do something and update breadcrumbs
+	
+    //and return some text to be used in updating window title
+    //return some_text;
+ }
+</pre>
+			</li>
+			
+			<li>
+				You can use a function for <code>update_title</code> option, to update window title:
+<pre data-language="javascript">
+ update_title: function(hash, url, some_text) {
+    //do something and update title
+ }
+</pre>
+				Or just insert a <code>title</code> tag inside your ajax content.
+
+			</li>
+			
+		 </ul><!-- /.info-list -->
+		</div><!-- /.info-section -->
+		<!-- /section:basics/ajax.options -->
+		
+		
+		<h3 class="info-title smaller">4. Functions</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				The following functions are available:
+				<ul>
+					<li><code>stopLoading</code>: call this for ajax loader to stop
+<pre data-language="javascript">
+$('#some-content-area').ace_ajax('stopLoading', true);
+</pre>
+					</li>
+					
+					<li><code>startLoading</code> is called to start loader:
+<pre data-language="javascript">
+$('#some-content-area').ace_ajax('startLoading');
+</pre>
+					</li>
+					
+					<li>
+						<code>loadScripts</code> is used to load scripts for new ajax page and described in next section.
+					</li>
+					
+					<li>
+						<code>loadUrl</code> is used to load a new url based on a hash:
+<pre data-language="javascript">
+$('#some-content-area').ace_ajax('loadUrl', hash, /* cache or not */);
+</pre>
+					</li>
+					
+					<li>
+						<code>loadAddr</code> is used to load a url:
+<pre data-language="javascript">
+$('#some-content-area').ace_ajax('loadAddr', 'path/to/file.html', null /* optional hash */, /* cache or not */);
+</pre>
+					</li>
+					
+					<li>
+						<code>post</code> is used to make a post request:
+<pre data-language="javascript">
+$('#some-content-area').ace_ajax('post', url, data, updateView, extraParams);
+</pre>
+						<ul>
+							<li><code>data</code> is an object or string containing data that you want to post</li>
+							<li><code>updateView</code> specifies whether content area should be updated with new content received from server</li>
+							<li><code>extraParams</code> optional extra ajax parameters to send to jQuery ajax method</li>
+						</ul>
+						
+						<div class="well">
+							There is also a <code>ajaxpostdone</code> event triggered right after <code>ajaxloaddone</code> is triggered.
+							<br />
+							You can use that to set <code>updateView</code> to <code>false</code> to prevent updating content area.
+						</div>
+					</li>
+					
+					<li>
+						<code>reload</code> is used to reload current page
+					</li>
+					
+					<li>
+						<code>working</code> returns whether ajax loading is in progress or not:
+<pre data-language="javascript">
+var is_working = $('#some-content-area').ace_ajax('working');
+</pre>
+					</li>
+				</ul>
+			</li>
+		 </ul><!-- /.info-list -->
+		</div><!-- /.info-section -->
+
+
+		<h3 class="info-title smaller">5. Loading JS &amp; CSS Files</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				To add new styles to a page, you can simply insert "link" and "style" tags:
+<pre data-language="html">
+ <title>New Title</title>
+ 
+ <link rel="stylesheet" href="maybe_new_style.css" />
+ <style>
+  .new_ruels_maybe {
+     color: red;
+  }
+ </style>
+</pre>
+			</li>
+			
+			<li>
+				To add new scripts to a page, you can insert "script" tags or use "loadScripts" 
+				function which loads and runs scripts and caches them. It prevents scripts from running more than once:
+<pre data-language="html">
+ <script type="text/javascript">
+ var scripts = ['path/to/plugin1.js', 'path/to/other-plugin.js']
+ $('#some-content-area').ace_ajax('loadScripts', scripts, function() {
+   //put inline scripts related to this page here
+   alert('hello!');
+ })
+ </script>
+</pre>
+				
+			</li>
+
+			<li>
+				Please note that, scripts loaded via "loadScripts" function, will be loaded and executed only once.
+				<br />
+				But sometimes, some scripts are related to a page and should be run everytime the page is loaded.
+				<br />
+				In that case you can load the script using jQuery's getScript function:
+<pre data-language="html">
+ <script type="text/javascript">
+ var scripts = ['path/to/plugin1.js', 'path/to/other-plugin.js']
+ $('#some-content-area').ace_ajax('loadScripts', scripts, function() {
+   //for example put inline scripts related to this page here
+   jQuery.getScript('path/to/mypage-script.js', function() {
+      //this page's script is loaded
+      //now do domething else
+   });
+ })
+ </script>
+</pre>
+			</li>
+			
+			<li>
+				Also when you initiate a plugin on a page and then leave to another page,
+				it may leave elements that need to be cleaned up manually before loading new page:
+<pre data-language="javascript">
+ var scripts = ['path/to/plugin1.js', 'path/to/other-plugin.js']
+ $('#some-content-area').ace_ajax('loadScripts', scripts, function() {
+     //put inline scripts related to this page here
+	 
+     //and clean up some plugin remainings before leaving to another page
+     $('#some-content-area').one('ajaxloadstart', function(e, params) {
+        //cleanup plugin1
+        //for example for jqGrid: 
+		$.jgrid.gridDestroy('#grid_selector');
+        $('.ui-jqdialog').remove();
+        
+        //or for some datepicker, etc elements:
+        $('.daterangepicker.dropdown-menu').remove();
+        
+        //or inline editable
+        $('.editable').editable('destroy');
+     })
+ })
+</pre>
+
+				Note that we need <code>ajaxloadstart</code> event only once, thus using "one" instead of "on".
+				<br />
+				
+				See end of some of files at
+				<code>mustache/app/views/assets/scripts/</code>
+				for more examples.
+			</li>
+		 </ul><!-- /.info-list -->
+		</div><!-- /.info-section -->
+		
+		
+		<h3 class="info-title smaller">6. Events</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				There are some events triggered on ajax-enabled element (which can also be captured on document level) :
+				<ol>
+					<li><code>ajaxloadstart</code> triggered when new content is requested.
+					<br />
+					If you call "preventDefault()" on event object, loading will be cancelled</li>
+					<li><code>ajaxloaddone</code> is triggered when ajax content is loaded</li>
+					<li><code>ajaxpostdone</code> is triggered right after "ajaxloaddone" event in POST requests and you can use <code>e.preventDefault()</code> to prevent content area from being updated</li>
+					<li><code>ajaxloadcomplete</code> is triggered when ajax content is loaded and inserted into dom</li>
+					<li><code>ajaxloaderror</code> is triggered when loading ajax content has failed</li>
+					<li><code>ajaxloadlong</code> if <b>max_load_wait</b> is specified, this event is triggered when loading ajax has taken too long</li>
+					<li><code>ajaxscriptsloaded</code> is triggered when loading scripts is finished</li>
+				</ol>
+			</li>
+			
+			<li>
+<pre data-language="javascript">
+ $('#some-content-area')
+ //or
+ //$(document)
+ .on('ajaxloadstart', function(e, params) {
+    //params.url, params.hash, params.method, params.data are available
+	//for "ajaxpostdone" event params.result is also available which is the response received from making the post request
+	
+    if(params.url == 'something') e.preventDefault();
+    if(params.hash == 'something') e.preventDefault();
+    //you can also return "false" from "content_url" function to prevent loading
+ })
+</pre>
+			</li>
+		 </ul><!-- /.info-list -->
+		</div><!-- /.info-section -->
+		
+		
+		
+		<h3 class="info-title smaller">7. Notes</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Please note that, inserting large pieces of content and running javascript code in ajax mode
+				may be somewhat slow on mobile devices.
+			</li>
+			
+			<li>
+				For better results, you should make sure you don't insert many scripts that contain long pieces of code when new ajax content is loaded.
+			</li>
+			
+			<li>
+				It would also be faster to keep most of your application logic inside one file
+				and inserted into document once and later used by different ajax pages or sections of your app.
+			</li>
+		 </ul><!-- /.info-list -->
+		</div><!-- /.info-section -->
+		
+		
+		
+		
+		<h3 class="info-title smaller" data-id="#basics/ajax.pace">8. PACE progressbar</h3>
+		<!-- #section:basics/ajax.pace -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				You can use PACE plugin to add content loading progress bar in ajax mode.
+			</li>
+			
+			<li>
+				You should include it in document's <code>head</code> along with its options:
+<pre data-language="html">
+<!--[if !IE]> -->
+<link rel="stylesheet" href="path/to/css/pace.css" />
+<script data-pace-options='{ "ajax": true, "document": true, "eventLag": false, "elements": false }' src="path/to/js/pace.js"></script>
+<!-- <![endif]-->
+</pre>
+
+				IE8 is a little slow in completing progress so we exclude it.
+			</li>
+			
+			<li>
+				You can choose a different style for PACE progress bars from
+				<span class="text-info">http://github.hubspot.com/pace/docs/welcome/</span>
+			</li>z
+			
+			<li>
+				In Ace's demo, when ajax is used and PACE is available we change <code>loading_overlay</code>
+				option to 'body', so that transparent overlay covers document body.
+				<br />
+				Also the spinning icon is an ace ajax option. You can hide it by setting <code>loading_icon</code> to null.
+			</li>
+			
+			<li>
+				Please see <code>assets/js/ace/ace.js</code> and look for <code>enableDemoAjax</code> function
+				for an example
+			</li>
+			
+		 </ul><!-- /.info-list -->
+		</div><!-- /.info-section -->
+		<!-- /section:basics/ajax.pace -->
+		
+
+	</div><!-- /.help-content -->
+	<!-- /section:basics/ajax -->
+
+</section>

src/main/webapp/static/ace/docs/sections/basics/content.html

@@ -0,0 +1,236 @@
+<section>
+	<h1 class="blue" data-id="#basics/content"><i class="ace-icon fa fa-desktop grey"></i> Content</h1>
+
+	<div class="hr hr-double hr32"></div>
+
+
+	<!-- #section:basics/content -->
+	<div class="help-content">
+		<h3 class="info-title smaller">1. Layout</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Default HTML layout used for content area is:
+				<ol>
+					<li>
+						<b>breadcrumbs</b> and searchbox
+					</li>
+					<li>
+						<b>page title</b> optional
+					</li>
+					<li>
+						<b>page conent</b>
+					</li>
+					<li>
+						<b>settings box</b> optional
+					</li>
+				</ol>
+				
+				<div class="space-4"></div>
+<pre data-language="html">
+<div class="main-container" id="main-container">
+  <!-- sidebar here -->
+
+  <div class="main-content"><div class="main-content-inner">
+    <div class="breadcrumbs" id="breadcrumbs">
+      <!-- breadcrumbs here -->
+    </div>
+
+    <div class="page-content">
+      <div class="ace-settings-container" id="ace-settings-container">
+        <!-- settings box goes here -->
+      </div>
+
+      <div class="page-header">
+        <!-- page header goes here -->
+      </div>
+	  
+      <div class="row">
+        <div class="col-xs-12">
+          <!-- page content goes here -->
+        </div>
+      </div>
+
+    </div><!-- /.page-content -->
+  </div></div><!-- /.main-content -->
+ 
+  <a class="btn-scroll-up" id="btn-scroll-up">
+   ...
+  </a>
+</div><!-- /.main-container -->
+</pre>
+			</li>
+
+			<li>
+				Starting with the following file you can find more details:
+				<br />
+				<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/</span>default.mustache</code>
+			</li>
+		 </ul><!-- /.info-list -->
+		</div><!-- /.info-section -->
+
+
+		<h3 class="info-title smaller" data-id="#basics/content.breadcrumbs">2. Breadcrumbs</h3>
+		<!-- #section:basics/content.breadcrumbs -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				<code>.breadcrumbs</code> is inside <code>.main-content</code> and 
+				contains <code>ul.breadcrumb</code> and searchbox.
+				<br />
+<pre data-language="html">
+ <div id="breadcrumbs" class="breadcrumbs">
+   <ul class="breadcrumb">
+     <li><i class="fa fa-home home-icon"></i> <a href="#">Home</a></li>
+     <li><a href="#">...</a></li>
+     <li><a href="#">...</a></li>
+     <li class="active">...</li>
+   </ul><!-- /.breadcrumb -->
+
+   <!-- searchbox -->
+ </div>
+</pre>
+			</li>
+			
+			<li>
+				For an example on generating breadcrumbs list in your application,
+				see <a href="#basics/sidebar.mark_active" class="help-more">sidebar active item</a> section.
+			</li>
+		 </ul><!-- /.info-list -->
+		</div><!-- /.info-section -->
+		<!-- /section:basics/content.breadcrumbs -->
+
+
+		<h3 class="info-title smaller" data-id="#basics/content.searchbox">3. Search box</h3>
+		<!-- #section:basics/content.searchbox -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Search box is inside <code>.breadcrumbs</code>
+				<br />
+				You can also have a search box inside <a href="#basics/navbar.form" class="help-more">.navbar</a>
+			</li>
+			<li>
+<pre data-language="html">
+  <div id="nav-search" class="nav-search">
+    <form class="form-search">
+      <span class="input-icon">
+        <input type="text" class="nav-search-input" id="nav-search-input" autocomplete="off" placeholder="Search ..." />
+        <i class="ace-icon fa fa-search nav-search-icon"></i>
+      </span>
+    </form>
+  </div>
+</pre>			
+			</li>
+			
+			<li>
+				Optional auto complete is powered by
+				<a href="#plugins/bootstrap.typeahead" class="help-more">typeahead plugin</a> of Bootstrap 2,
+				which has been removed in Bootstrap 3, but is lightweight and functional.
+				<br />
+<pre data-language="javascript">
+ //auto complete's data source is a static array
+ $('#nav-search-input').typeahead({
+   source: some_static_array,
+   updater: function (item) {
+     //when an item is selected from dropdown menu, focus back to input element
+     $('#nav-search-input').focus();
+     return item;
+   }
+ });
+</pre>
+
+You can also retrieve auto complete data from a remote database:
+<pre data-language="javascript">
+ //auto complete's data is dynamically retrieved from server
+ source: function(query, process) {
+    $.ajax({url: 'source.php?q='+encodeURIComponent(query)}).done(function(result_items){
+       process(result_items);
+    })
+ }
+</pre>
+			</li>
+			
+			<li>
+				Adding <code>.minimized</code> class to <code>.nav-search</code> makes it minimized by default:
+<pre data-language="html">
+ <div id="nav-search" class="nav-search minimized">
+   ...
+ </div>
+</pre>
+			</li>
+		 </ul><!-- /.info-list -->
+		</div><!-- /.info-section -->
+		<!-- /section:basics/content.searchbox -->
+		
+		
+		<h3 class="info-title smaller" data-id="#basics/content.content">4. Page Title &amp; Content</h3>
+		<!-- #section:basics/content.content -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				<code>.page-content</code> should be after (optional) <code>.breadcrumbs</code>
+			</li>
+			<li>
+				It contains optional settings box, optional header and the content area:
+<pre data-language="html">
+<div class="page-content">
+  <div class="ace-settings-container" id="ace-settings-container">
+    <!-- settings box goes here -->
+  </div>
+
+  <div class="page-header">
+    <!-- page header goes here -->
+  </div>
+  
+  <div class="row">
+    <div class="col-xs-12">
+       <!-- page content goes here -->
+    </div>
+  </div>
+
+</div><!-- /.page-content -->
+</pre>
+			</li>
+			
+			<li>
+				Optional page header consists of a heading text and smaller description:
+<pre data-language="html">
+<div class="page-header">
+  <h1>
+     Dashboard
+     <small><i class="ace-icon fa fa-angle-double-right"></i> overview &amp; stats</small>
+   </h1>
+</div>
+</pre>
+			</li>
+			
+			<li>
+				Please note that page content must be wrapped inside <code>.row</code> and <code>.col-xs-12</code>
+<pre data-language="html">
+<div class="row">
+  <div class="col-xs-12">
+    <!-- page content goes here -->
+  </div>
+</div>
+</pre>
+			</li>			
+		 </ul><!-- /.info-list -->
+		</div><!-- /.info-section -->
+		<!-- /section:basics/content.content -->
+		
+		
+		<h3 class="info-title smaller">5. Settings Box</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Settings box is optional.
+				For more info please see <a href="#settings.box" class="help-more">settings box section</a>
+			</li>
+		 </ul><!-- /.info-list -->
+		</div><!-- /.info-section -->
+
+	</div><!-- /.help-content -->
+	<!-- /section:basics/content -->
+
+</section>

src/main/webapp/static/ace/docs/sections/basics/footer.html

@@ -0,0 +1,43 @@
+<section>
+	<h1 class="blue" data-id="#basics/footer"> Footer</h1>
+
+
+	<div class="help-content">
+		<!-- #section:basics/footer -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				<code>.footer</code> should be after <code>.main-content</code> and has the following markup:
+<pre data-language="html">
+<div class="main-content"> ... </div>
+
+<div class="footer">
+  <div class="footer-inner">
+    <div class="footer-content">
+       <!-- footer content here -->
+    </div>
+  </div>
+</div>
+</pre>
+			</li>
+			
+			<li>
+			  Please see the following file for more info:<br />
+			  <code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/default/</span>footer.mustache</code>
+			</li>
+			
+			<li>
+				Also if you are using two sidebar elements and the second one which is inside <code>.main-content</code>
+				is a normal sidebar(i.e. not horizontal), you should move <code>.footer</code>
+				and put it next to <code>.page-content</code>.
+				<br />
+				Please see <a class="help-more" href="#basics/sidebar.multiple">Multiple menu</a> section for more info.
+			</li>
+		 </ul>
+		</div>
+		<!-- /section:basics/footer -->
+		
+	</div><!-- /.help-content -->
+
+
+</section>

src/main/webapp/static/ace/docs/sections/basics/layout.html

@@ -0,0 +1,337 @@
+<section>
+	<h1 class="blue" data-id="#basics/layout"><i class="ace-icon fa fa-desktop grey"></i> Layout</h1>
+
+	<div class="hr hr-double hr32"></div>
+	<h2 class="blue lighter" data-id="#basics/layout.default">
+		Default layout
+	</h2>
+	<div class="space-4"></div>
+
+	<div class="help-content">
+		<h3 class="info-title smaller">1. Layout</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Default layout used for all pages (except for login) is:
+				<img src="images/default.png" />
+				
+				<ul>
+					<li>
+						1) Navbar
+					</li>
+					
+					<li>
+						Inside <b>main-container</b> area:
+						<ul>
+							<li> 2) Sidebar </li>
+							<li> 3) Breadcrumbs (inside "main-content") </li>
+							<li> 4) Page content (inside "main-content") </li>
+							<li> 5) Settings box (inside "page-content") </li>
+							<li> 6) Footer </li>
+						</ul>
+					</li>
+				</ul>
+				
+				
+				<div class="space-4"></div>
+<pre data-language="html">
+&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+ &lt;head&gt;
+    &lt;!-- title, meta tags, list of stylesheets, etc ... --&gt;
+ &lt;/head&gt;
+  
+ &lt;body class="no-skin"&gt;
+    &lt;div class="navbar" id="navbar"&gt;
+     &lt;!-- navbar goes here --&gt;
+    &lt;/div&gt;
+ 
+    &lt;div class="main-container" id="main-container"&gt;
+     &lt;div class="sidebar responsive" id="sidebar"&gt;
+      &lt;!-- sidebar goes here --&gt;
+     &lt;/div&gt;
+  
+     &lt;div class="main-content"&gt;
+      &lt;div class="breadcrumbs"&gt;
+       &lt;!-- breadcrumbs goes here --&gt;
+      &lt;/div&gt;
+   
+      &lt;div class="page-content"&gt;
+        &lt;!-- setting box goes here if needed --&gt;
+
+        &lt;div class="row"&gt;
+          &lt;div class="col-xs-12"&gt;
+           &lt;!-- page content goes here --&gt;
+          &lt;/div&gt;&lt;!-- /.col --&gt;
+        &lt;/div&gt;&lt;!-- /.row --&gt;
+
+      &lt;/div&gt;&lt;!-- /.page-content --&gt;
+     &lt;/div&gt;&lt;!-- /.main-content --&gt;
+	 
+     &lt;!-- footer area --&gt;
+
+   &lt;/div&gt;&lt;!-- /.main-container --&gt;
+
+   &lt;!-- list of script files --&gt;
+   
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+			</li>
+
+			<li>
+				Starting with the following file you can find more details:
+				<br />
+				<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/</span>default.mustache</code>
+			</li>
+		 </ul><!-- /.info-list -->
+		</div><!-- /.info-section -->
+	
+	
+		<h3 class="info-title smaller">2. Head element</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				<code>head</code> element contains title, meta tags, stylesheets and some scripts:
+<pre data-language="html">
+&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+ &lt;head&gt;
+  &lt;meta charset="utf-8" /&gt;
+  &lt;!-- use the following meta to force IE use its most up to date rendering engine --&gt;
+  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /&gt;
+  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
+  
+  &lt;title&gt; page tite &lt;/title&gt;
+  &lt;meta name="description" content="page description" /&gt;
+  
+  &lt;!-- stylesheets are put here, refer to files/css documentation --&gt;
+  &lt;!-- some scripts should be  here, refer to files/javascript documentation --&gt;
+ &lt;/head&gt;
+</pre>
+
+		For more info about stylesheets and order of use, please see <a href="#files/css.order">CSS order</a>.
+		<br />
+		For more info about scripts and order of use, please see <a href="#files/javascript.order">Javascript order</a>.
+		
+			</li>
+		 </ul><!-- /.info-list -->
+		</div><!-- /.info-section -->
+		
+		
+		<h3 class="info-title smaller">3. Viewport meta tag</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Please note that with mobile devices, pages may not look good when user zooms in/out,
+				especially when navbar or sidebar is fixed.
+				<br />
+				One option is preventing user from zooming in/out using <code>user-scalable=no</code> property:
+<pre data-language="html">
+  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /&gt;
+</pre>
+
+			The following links have more info:
+			<br />
+			<a href="http://www.javascriptkit.com/dhtmltutors/cssmediaqueries3.shtml">
+				http://www.javascriptkit.com/dhtmltutors/cssmediaqueries3.shtml
+			</a>
+			<br />
+			<a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html">
+				developer.apple.com
+			</a>
+			</li>
+		 </ul><!-- /.info-list -->
+		</div><!-- /.info-section -->
+		
+		
+		<h3 class="info-title smaller">4. Body element</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+<pre data-language="html">
+ &lt;body class="no-skin"&gt;
+   ...
+ &lt;/body&gt;
+</pre>
+
+				You can use one of the following classes to apply different skins:
+				<ol>
+					<li><code>.no-skin</code></li>
+					<li><code>.skin-1</code></li>
+					<li><code>.skin-2</code></li>
+					<li><code>.no-skin.skin-3</code></li>
+				</ol>
+				
+				There is more information about this in
+				<a href="#settings.skins" class="help-more">Skins section</a>
+			</li>
+		 </ul><!-- /.info-list -->
+		</div><!-- /.info-section -->
+
+		
+		<h3 class="info-title smaller">5. End of document</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Here you put your script list and inline scripts.
+				<br />
+				For more info about scripts and order of use, please see <a href="#files/javascript.order">Javascript order</a>.
+			</li>
+		 </ul><!-- /.info-list -->
+		</div><!-- /.info-section -->
+
+	</div><!-- /.help-content -->
+	
+	
+	
+	<div class="hr hr-double hr32"></div>
+	<h2 class="blue lighter" data-id="#basics/layout.empty">
+		Empty layout
+	</h2>
+	<div class="space-4"></div>
+
+	<!-- #section:basics/layout.empty -->
+	<div class="help-content">
+		<h3 class="info-title smaller">Layout</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Empty layout is similar to default layout and is only used for 
+				<code data-open-file="html" class="open-file">html/empty.html</code>
+				file which has minimal code for easier investigation:
+				<div class="space-4"></div>
+<pre data-language="html">
+ &lt;html&gt;
+  &lt;head&gt;
+     &lt;!-- title, meta tags, list of stylesheets, etc ... --&gt;
+  &lt;/head&gt;
+  
+  &lt;body class="no-skin"&gt;
+    &lt;div class="navbar" id="navbar"&gt;
+     &lt;!-- navbar goes here --&gt;
+    &lt;/div&gt;
+ 
+    &lt;div class="main-container" id="main-container"&gt;
+     &lt;div class="sidebar responsive" id="sidebar"&gt;
+      &lt;!-- sidebar goes here --&gt;
+     &lt;/div&gt;
+  
+     &lt;div class="main-content"&gt;
+   
+      &lt;div class="page-content"&gt;
+        &lt;div class="row"&gt;
+          &lt;div class="col-xs-12"&gt;
+           &lt;!-- page content goes here --&gt;
+          &lt;/div&gt;&lt;!-- /.col --&gt;
+        &lt;/div&gt;&lt;!-- /.row --&gt;
+      &lt;/div&gt;&lt;!-- /.page-content --&gt;
+     &lt;/div&gt;&lt;!-- /.main-content --&gt;
+	 
+   &lt;/div&gt;&lt;!-- /.main-container --&gt;
+
+   &lt;!-- list of script files --&gt;
+   
+  &lt;/body&gt;
+ &lt;/html&gt;
+</pre>
+			</li>
+
+			<li>
+				Starting with the following file you can find more details:
+				<br />
+				<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/</span>empty.mustache</code>
+			</li>
+		 </ul><!-- /.info-list -->
+		</div><!-- /.info-section -->
+
+	</div><!-- /.help-content -->
+	<!-- /section:basics/layout.empty -->
+	
+	
+	
+	
+	
+	
+	<div class="hr hr-double hr32"></div>
+	<h2 class="blue lighter" data-id="#basics/layout.login">
+		Login layout
+	</h2>
+	<div class="space-4"></div>
+
+	<!-- #section:basics/layout.login -->
+	<div class="help-content">
+		<h3 class="info-title smaller">1. Layout</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Login layout used only for the login page is as follows:
+				<div class="space-4"></div>
+<pre data-language="html">
+&lt;html&gt;
+ &lt;head&gt;
+  
+ &lt;/head&gt;
+
+ &lt;body class="login-layout"&gt;
+ 
+  &lt;div class="main-container"&gt;
+   &lt;div class="main-content"&gt;
+    &lt;div class="row"&gt;
+     &lt;div class="col-sm-10 col-sm-offset-1"&gt;
+     &lt;!-- page content goes here --&gt;
+     &lt;/div&gt;&lt;!-- /.col --&gt;
+    &lt;/div&gt;&lt;!-- /.row --&gt;
+   &lt;/div&gt;&lt;!-- /.main-content --&gt;
+  &lt;/div&gt;&lt;!-- /.main-container --&gt;
+
+
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+			</li>
+			
+			<li>
+				For more info about login page, please see <a href="#pages/login" class="help-more">login page</a>
+			</li>
+
+			<li>
+				Starting with the following file you can find more details:
+				<br />
+				<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/</span>login.mustache</code>
+			</li>
+		 </ul><!-- /.info-list -->
+		</div><!-- /.info-section -->
+		
+		
+		<h3 class="info-title smaller">2. Scripts</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Fewer scripts are needed for login page.
+				<br />
+				Basically, you just need <b>jquery</b> and the following snippet to switch to a different box:
+<pre data-language="javascript">
+jQuery(function($) {
+ $(document).on('click', '.toolbar a[data-target]', function(e) {
+    e.preventDefault();
+    var target = $(this).data('target');
+    $('.widget-box.visible').removeClass('visible');//hide others
+    $(target).addClass('visible');//show target
+ })
+})
+</pre>
+				<code data-open-file="javascript" class="open-file"><span class="brief-show">mustache/app/views/assets/scripts/</span>login.js</code>
+				<br />
+				
+				Of course if you want to use extra functionality such as form validation
+				or elements such as datepicker or a slider,
+				you should include the relevant scripts.
+			</li>
+		 </ul><!-- /.info-list -->
+		</div><!-- /.info-section -->
+
+	</div><!-- /.help-content -->
+	<!-- /section:basics/layout.login -->
+
+</section>

src/main/webapp/static/ace/docs/sections/basics/navbar.html

@@ -0,0 +1,757 @@
+<section>
+	<h1 class="blue" data-id="#basics/navbar"><i class="ace-icon fa fa-desktop grey"></i> Navbar</h1>
+
+	<div class="hr hr-double hr32"></div>
+	<!-- #section:basics/navbar -->
+	<h2 class="blue lighter help-title" data-id="#basics/navbar.layout">
+		Navbar Basics
+	</h2>
+
+
+	<!-- #section:basics/navbar.layout -->
+	<div class="help-content">
+		<h3 class="info-title smaller">1. Layout</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Default HTML layout used for navbar is:
+				<div>
+				 <span class="thumbnail inline">
+					<img src="images/navbar.png" />
+				 </span>
+				</div>
+				<ol>
+					<li>
+						<b>toggle buttons</b>: come before brand text container(<code>.navbar-header</code>) or inside it.
+					</li>
+					<li>
+						<b>.navbar-header</b>: brand text container.
+					</li>
+					<li>
+						<b>.navbar-menu</b>: optional element which contains a menu or form.
+					</li>
+					<li>
+						<b>.navbar-buttons.navbar-header</b>: contains user info buttons and dropdowns.
+					</li>
+				</ol>
+				
+				<div class="space-4"></div>
+<pre data-language="html">
+&lt;div id="navbar" class="navbar navbar-default"&gt;
+ &lt;div id="navbar-container" class="navbar-container"&gt;
+
+    &lt;!-- toggle buttons are here or inside brand container --&gt;
+
+    &lt;div class="navbar-header pull-left"&gt;
+      &lt;!-- brand text here --&gt;
+    &lt;/div&gt;&lt;!-- /.navbar-header --&gt;
+
+
+    &lt;div class="navbar-buttons navbar-header pull-right "&gt;
+      &lt;ul class="nav ace-nav"&gt;
+        &lt;!-- user buttons such as messages, notifications and user menu --&gt;
+      &lt;/ul&gt;
+    &lt;/div&gt;&lt;!-- /.navbar-buttons --&gt;
+
+
+    &lt;nav class="navbar-menu pull-left"&gt;
+      &lt;!-- optional menu & form inside navbar --&gt;
+    &lt;/nav&gt;&lt;!-- /.navbar-menu --&gt;
+
+ &lt;/div&gt;&lt;!-- /.navbar-container --&gt;
+&lt;/div&gt;&lt;!-- /.navbar --&gt;
+</pre>
+			</li>
+
+			<li>
+				Starting with the following file you can find more details:
+				<br />
+				<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/</span>navbar.mustache</code>
+			</li>
+		 </ul><!-- /.info-list -->
+		</div><!-- /.info-section -->
+		
+		
+		<h3 class="info-title smaller" data-id="#basics/navbar.mobile">2. Responsive Navbar</h3>
+		<!-- #section:basics/navbar.mobile -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				There are two styles of responsive (mobile view) navbar:
+				<ol class="spaced">
+					<li>
+						Default style in which buttons move down when screen is small and below <b>480px</b>.
+						<br />
+						<span class="thumbnail inline">
+							<img src="images/navbar-mobile1.png" />
+						</span>
+						<br />
+						You can change this value by modifying <code>@screen-topbar-down</code> variable
+						at <code>assets/css/less/variables.less</code> and re-compile <code>ace.less</code>.
+					</li>
+					<li>
+						Bootstrap collapse style in which user buttons & dropdowns are hidden and 
+						when screen is below <b>992px</b>, toggle buttons are used to hide/show them.
+						<br />
+						
+						<span class="thumbnail inline">
+							<img src="images/navbar-mobile2.png" />
+						</span>
+						
+						<br />
+						<i class="fa fa-hand-o-right"></i> 
+						You can change <b>992px</b> to something else,
+						please see the note at <a href="#files/css.bootstrap" class="help-more">CSS section</a>
+						
+						<div class="space-6"></div>
+						To enable this mobile style:
+						<ul>
+							<li>
+								Add necessary <a href="#basics/navbar.toggle" class="help-more">toggle buttons</a>
+							</li>
+							<li>
+								Add <code>.navbar-collapse</code> class to <code>.navbar</code> element
+							</li>
+							<li>
+								Add <code>.navbar-collapse</code> and <code>.collapse</code>
+								class to <code>.navbar-buttons</code> element
+							</li>
+							
+							<li>
+								If there are is a navbar menu or form, you should add <code>.navbar-collapse</code> and <code>.collapse</code>
+								class to <code>.navbar-menu</code> element
+							</li>
+						</ul>
+
+
+<pre data-language="html">
+&lt;div id="navbar" class="navbar navbar-default navbar-collapse"&gt;
+ &lt;div id="navbar-container" class="navbar-container"&gt;
+
+    &lt;div class="navbar-header pull-left"&gt;
+      &lt;!-- brand text here --&gt;
+    &lt;/div&gt;&lt;!-- /.navbar-header --&gt;
+
+
+    &lt;div class="navbar-buttons navbar-header pull-right
+	                navbar-collapse collapse"&gt;
+      &lt;ul class="nav ace-nav"&gt;
+        &lt;!-- user buttons such as messages, notifications and user menu --&gt;
+      &lt;/ul&gt;
+    &lt;/div&gt;&lt;!-- /.navbar-buttons --&gt;
+
+
+    &lt;nav class="navbar-menu pull-left
+	               navbar-collapse collapse"&gt;
+      &lt;!-- optional menu & form inside navbar --&gt;
+    &lt;/nav&gt;&lt;!-- /.navbar-menu --&gt;
+
+ &lt;/div&gt;&lt;!-- /.navbar-container --&gt;
+&lt;/div&gt;&lt;!-- /.navbar --&gt;
+</pre>
+		
+					</li>
+				</ol>
+			</li>
+		 </ul><!-- /.info-list -->
+		</div><!-- /.info-section -->
+		<!-- /section:basics/navbar.mobile -->
+		
+
+		<h3 class="info-title smaller">3. Navbar options</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				<ol class="spaced">
+					<li>
+						For fixed navbar you should add <code>.navbar-fixed-top</code> class to <code>.navbar</code> element.
+						<br />
+						See <a href="#settings.page" class="help-more">Page Settings</a> for more info.
+					</li>
+					<li>
+						For navbar inside <b>.container</b> you should add <code>.container</code> class to <code>.navbar-container</code> element.
+						<br />
+						See <a href="#settings.page" class="help-more">Page Settings</a> for more info.
+					</li>
+					<li>
+						When sidebar is horizontal you should add <code>.h-navbar</code> class to <code>.navbar</code> element.
+						<br />
+						See <a href="#basics/sidebar.horizontal" class="help-more">Horizontal Menu</a> for more info.
+					</li>
+				</ol>
+			</li>
+		 </ul><!-- /.info-list -->
+		</div><!-- /.info-section -->
+		
+		
+		
+		<h3 class="info-title smaller" data-id="#basics/navbar.layout.brand">4. Brand</h3>
+		<!-- #section:basics/navbar.layout.brand -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+			Brand text is inside <code>.navbar-header</code> container and has the following markup:
+<pre data-language="html">
+ <div class="navbar-header pull-left">
+   <a href="#" class="navbar-brand">
+    <small>
+      <i class="ace-icon fa fa-leaf"></i>
+      Brand Text
+    </small>
+   </a>
+ </div>
+</pre>
+			</li>
+		 </ul><!-- /.info-list -->
+		</div><!-- /.info-section -->
+		<!-- /section:basics/navbar.layout.brand -->
+		
+	</div><!-- /.help-content -->
+	<!-- /section:basics/navbar.layout -->
+
+
+
+
+
+	<div class="hr hr-double hr32"></div>
+	<h2 class="help-title blue lighter" data-id="#basics/navbar.dropdown">
+		User Buttons/Dropdowns
+	</h2>
+	<div class="space-4"></div>
+
+	<!-- #section:basics/navbar.dropdown -->
+	<div class="help-content">
+		<h3 class="info-title smaller">1. Overview</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+			User buttons & dropdowns are inside <code>.navbar-buttons</code> element, inside a <code>ul.ace-nav</code> list:
+			<div class="space-4"></div>
+<pre data-language="html">
+ &lt;div class="navbar-buttons navbar-header pull-right"&gt;
+  &lt;ul class="nav ace-nav"&gt;
+
+    &lt;li class="light-blue"&gt;
+
+     &lt;a data-toggle="dropdown" class="dropdown-toggle" href="#"&gt;
+       &lt;i class="ace-icon fa fa-tasks"&gt;&lt;/i&gt;
+       &lt;span class="badge"&gt;5&lt;/span&gt;
+     &lt;/a&gt;
+
+     &lt;ul class="dropdown-menu dropdown-navbar dropdown-menu-right dropdown-caret dropdown-close"&gt;
+       &lt;li class="dropdown-header"&gt;
+         title text
+       &lt;/li&gt;
+
+       &lt;li&gt;
+         item#1.
+       &lt;/li&gt;
+       &lt;li&gt;
+         item#2.
+       &lt;/li&gt;
+
+      &lt;li class="dropdown-footer"&gt;
+        bottom text or link
+      &lt;/li&gt;
+    &lt;/ul&gt;
+
+   &lt;/li&gt;
+   
+
+   &lt;li&gt;
+	Another button and dropdown
+   &lt;/li&gt;
+   
+  &lt;/ul&gt;
+ &lt;/div&gt;
+</pre>
+
+			
+
+
+			For an example see :
+			<br />
+			<code data-open-file="html" class="open-file"><span class="brief-name">mustache/app/views/layouts/partials/_shared/navbar/</span>tasks.mustache</code>
+			
+			<br />
+			<code data-open-file="html" class="open-file"><span class="brief-name">mustache/app/views/layouts/partials/_shared/navbar/</span>notifications.mustache</code>
+		
+			</li>
+		 </ul><!-- /.info-list -->
+		</div><!-- /.info-section -->
+		
+		
+		<h3 class="info-title smaller">2. Button & Menu colors</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li class="spaced2">
+				There are some colors and options for user dropdown buttons:
+				<br />
+				<ol>
+					<li>Default dark blue color</li>
+					<li><code>grey</code></li>
+					<li><code>purple</code></li>
+					<li><code>green</code></li>
+					<li><code>light-blue</code></li>
+					<li><code>light-blue2</code></li>
+					<li><code>red</code></li>
+					<li><code>light-green</code></li>
+					<li><code>light-purple</code></li>
+					<li><code>light-orange</code></li>
+					<li><code>light-pink</code></li>
+					<li><code>dark</code></li>
+					<li><code>white-opaque</code></li>
+					<li><code>dark-opaque</code></li>
+					<li><code>transparent</code></li>
+					<li><code>light-10</code></li>
+					<li><code>dark-10</code></li>
+					
+					<li class="space-6"></li>
+
+					<li><code>margin-1</code></li>
+					<li><code>margin-2</code></li>
+					<li><code>margin-3</code></li>
+					<li><code>margin-4</code></li>
+					
+					<li class="space-6"></li>
+
+					<li><code>no-border</code></li>
+				</ol>
+				
+<pre data-language="html">
+ <li class="light-pink no-border margin-1">
+  <!-- dropdown content goes here -->
+ </li>
+</pre>
+
+			<div class="alert alert-info">
+			 <i class="fa fa-hand-o-right bigger-125"></i>
+			 When you change a skin using settings box options,
+			 some of the navbar user buttons inside <code>.ace-nav &gt; li</code> may get a different color.
+			 <div class="space-4"></div>
+			 The color is dynamically changed by switching to one of the above mentioned
+			 color classes using Javascript and is not dependent on that specific skin.
+			 <br />
+			 You may want to hard code any button color of choice in your HTML without using Javascript.
+			</div>
+
+			</li>
+			
+			<li>
+				And there are some different colors for dropdowns:
+				<br />
+				<ol>
+					<li>Default blue color</li>
+					<li><code>navbar-pink</code></li>
+					<li><code>navbar-grey</code></li>
+					<li><code>navbar-green</code></li>
+				</ol>
+<pre data-language="html">
+ <li class="purple">
+  <a href="#">
+	...
+  </a>
+  <ul class="dropdown-navbar navbar-pink dropdown-menu dropdown-menu-right dropdown-caret dropdown-close">
+	...
+  </ul>
+ </li>
+</pre>
+			</li>
+		 </ul><!-- /.info-list -->
+		</div><!-- /.info-section -->
+		
+
+		<h3 class="info-title smaller">3. Mobile (responsive) User Menus</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Please refer to <a href="#basics/navbar.mobile" class="help-more">responsive navbar</a> for more info.
+			</li>
+		 </ul><!-- /.info-list -->
+		</div><!-- /.info-section -->
+
+
+		<h3 class="info-title smaller" data-id="#basics/navbar.dropdown-content">4. .dropdown-content & Scrollbars</h3>
+		<!-- #section:basics/navbar.dropdown-content -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				You can put the dropdown's main content inside <code>.dropdown-content</code> element.
+				<br />
+				This way you can have scrollbars on content:
+				<div>
+				 <span class="thumbnail inline">
+					<img src="images/scroll-content.png" />
+				 </span>
+				</div>
+				
+				<pre data-language="html">
+ <li class="purple">
+  <ul class="dropdown-navbar dropdown-menu dropdown-menu-right">
+    <li class="dropdown-header"></li>
+	
+    <li class="dropdown-content">
+      <ul class="dropdown-menu dropdown-navbar">
+         <!-- content and list of items are here -->
+      </ul>
+    </li>
+	
+    <li class="dropdown-footer"></li>
+  </ul>
+</pre>
+			</li>
+			
+			<li>
+				Inside <code>assets/js/ace/ace.js</code> is the code to automatically apply scrollbars on <code>.dropdown-content</code> element.
+				<br />
+				Default content height is <b>200px</b>. You can change this using <code>data-size</code> attribute:
+<pre data-language="html">
+  <li class="dropdown-content" data-size="250">
+
+  </li>
+</pre>
+			</li>
+		 </ul><!-- /.info-list -->
+		</div><!-- /.info-section -->
+		<!-- /section:basics/navbar.dropdown-content -->
+		
+		
+		
+		<h3 class="info-title smaller" data-id="#basics/navbar.tabbed">5. Tabbed dropdown</h3>
+		<!-- #section:basics/navbar.tabbed -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				You can use a <a href="#elements.tab" class="help-more">tab element</a> inside dropdown.
+				<br />
+				As an example you can see <b>top menu</b> page:
+				<div>
+				  <span class="thumbnail inline no-margin-bottom">
+					<img src="images/tabbed-dropdown.png" />
+				  </span>
+				</div>
+				<br />
+				Inside each <code>.tab-pane</code> you should use a <code>.dropdown-menu</code>:
+
+<pre data-language="html">
+<ul class="nav ace-nav">
+ <li class="light-blue">
+  <a data-toggle="dropdown" class="dropdown-toggle" href="#">
+    <i class="ace-icon fa fa-bell icon-animated-bell"></i>
+  </a>
+
+  <!-- it should be a "DIV.dropdown-menu" here not a "UL.dropdown-menu" -->
+  <div class="dropdown-navbar dropdown-menu dropdown-menu-right dropdown-caret dropdown-close">
+   <div class="tabbable">
+
+   <!-- tab buttons here -->
+    <ul class="nav nav-tabs">
+     <li class="active">
+       <a data-toggle="tab" href="#navbar-tasks">
+         Tasks
+         <span class="badge badge-danger">4</span>
+       </a>
+     </li>
+     <li>
+       <a data-toggle="tab" href="#navbar-messages">
+         Messages
+         <span class="badge badge-danger">5</span>
+       </a>
+     </li>
+    </ul><!-- .nav-tabs -->
+
+
+    <!-- tab content here -->
+    <div class="tab-content">
+
+     <div id="navbar-tasks" class="tab-pane in active">
+      <!-- first tab pane and the .dropdown-menu inside it -->
+      <ul class="dropdown-navbar dropdown-menu dropdown-menu-right">
+         <li>
+           item # 1
+         </li>
+         <li>
+           item # 2
+         </li>
+
+         <li class="dropdown-footer">
+            ...
+         </li>
+      </ul>
+     </div><!-- /.tab-pane -->
+  
+
+     <div id="navbar-messages" class="tab-pane">
+      <!-- second tab pane and the .dropdown-menu inside it -->
+      <ul class="dropdown-navbar dropdown-menu dropdown-menu-right">
+        <!-- .dropdown-content -->
+        <li class="dropdown-content">
+         <ul class="dropdown-menu dropdown-navbar">
+          <li>
+             item # 1
+          </li>
+          <li>
+             item # 2
+          </li>
+         </ul>
+        </li><!-- /.dropdown-content -->
+
+        <li class="dropdown-footer">
+          ...
+        </li>
+       </ul>
+      </div><!-- /.tab-pane -->
+
+     </div><!-- /.tab-content -->
+
+   </div><!-- /.tabbable -->
+
+  </div><!-- /DIV.dropdown-menu -->
+ </li>
+</ul><!-- /.ace-nav -->
+</pre>
+			</li>
+		 </ul><!-- /.info-list -->
+		</div><!-- /.info-section -->
+		<!-- /section:basics/navbar.tabbed -->
+		
+
+	</div><!-- /.help-content -->
+	<!-- /section:basics/navbar.dropdown -->
+
+	
+	
+	
+	
+	
+	<div class="hr hr-double hr32"></div>
+	<h2 class="help-title blue lighter" data-id="#basics/navbar.user">
+		User Menu
+	</h2>
+	<div class="space-4"></div>
+
+	<div class="help-content">
+		<h3 class="info-title smaller" data-id="#basics/navbar.user_menu">User menu</h3>
+		<!-- #section:basics/navbar.user_menu -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				<div>
+					<span class="thumbnail inline">
+						<img src="images/user-menu.png" />
+					</span>
+				</div>
+				User menu has the following markup and is inside <code>ul.ace-nav</code>
+				<br />
+				<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/default/navbar/</span>user_menu.mustache</code>
+				<br />
+<pre data-language="html">
+<ul class="ace ace-nav">
+ ...
+ <li class="light-blue">
+  <a data-toggle="dropdown" href="#" class="dropdown-toggle">
+    <img class="nav-user-photo" src="path/to/avatar.jpg" alt="Jason's Photo" />
+    <span class="user-info">
+      <small>Welcome,</small> Jason
+    </span>
+    <i class="ace-icon fa fa-caret-down"></i>
+  </a>
+  <ul class="user-menu dropdown-menu dropdown-menu-right dropdown-yellow dropdown-caret dropdown-close">
+    <li><a href="#"><i class="ace-icon fa fa-cog"></i> Settings</a></li>
+    <li class="divider"></li>
+    <li><a href="#"><i class="ace-icon fa fa-power-off"></i> Logout</a></li>
+  </ul>
+ </li>
+
+</ul>
+</pre>
+
+			You can also add <code>.user-min</code> class to it, so it becomes more compact:
+<pre data-language="html">
+  <li class="light-blue user-min">
+   ...
+  </li>
+</pre>
+			</li>
+		 </ul><!-- /.info-list -->
+		</div><!-- /.info-section -->
+	</div>
+	<!-- /section:basics/navbar.user_menu -->
+
+	
+	
+	
+	<div class="hr hr-double hr32"></div>
+	<h2 class="help-title blue lighter" data-id="#basics/navbar.toggle">
+		Toggle buttons
+	</h2>
+	<div class="space-4"></div>
+
+	<!-- #section:basics/navbar.toggle -->
+	<div class="help-content">
+		<h3 class="info-title smaller">1. Navbar toggle button</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Toggle buttons are used when navbar or sidebar have collapsible mobile style.
+				<br />
+				You should put the code either inside <b>.navbar-header</b> which contains brand text or before it:
+<pre data-language="html">
+ <!-- collapse style toggle buttons can be here -->
+ <div class="navbar-header pull-left">
+   <a class="navbar-brand" href="#">
+      <!-- brand text is here -->
+   </a>
+   <!-- collapse style toggle buttons can be here -->
+ </div>
+</pre>
+			</li>
+			
+			<li>
+			The following is a button which toggles <code>.navbar-buttons,.navbar-menu</code>.
+			<br />
+			Using <code>data-toggle</code> and <code>data-target</code> attributes,
+			you can choose to toggle any element, for example toggle only <code>.navbar-buttons</code> or
+			both <code>.navbar-buttons,.navbar-menu</code>
+<pre data-language="html">
+ &lt;button
+  class="pull-right navbar-toggle navbar-toggle-img collapsed" type="button"
+  data-toggle="collapse" data-target=".navbar-buttons,.navbar-menu"&gt;
+   &lt;span class="sr-only"&gt;Toggle user menu&lt;/span&gt;
+   &lt;img src="path/to/avatar/user.jpg" alt="Jason's Photo" /&gt;
+ &lt;/button&gt;
+</pre>
+			</li>
+			
+			<li>
+				Inside the button you can also use an icon instead of an avatar :
+				<br />
+<pre data-language="html">
+ &lt;button class="pull-right navbar-toggle collapsed" type="button"
+  data-toggle="collapse" data-target=".navbar-buttons"&gt;
+   &lt;span class="sr-only"&gt;Toggle user menu&lt;/span&gt;
+   &lt;i class="ace-icon fa fa-user fa-2x white"&gt;&lt;/i&gt;
+ &lt;/button&gt;
+</pre>
+			</li>	
+
+			<li>
+				See the following for more info:
+				<br />
+				<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/navbar/</span>toggle_buttons.mustache</code>
+			</li>
+		 </ul><!-- /.info-list -->
+		</div><!-- /.info-section -->
+
+		
+		
+		
+		<h3 class="info-title smaller" data-id="#basics/navbar.toggle.sidebar">2. Sidebar toggle button</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Please see <a href="#basics/sidebar.mobile.toggle" class="help-more">Sidebar toggle</a> for more info
+			</li>
+		 </ul><!-- /.info-list -->
+		</div><!-- /.info-section -->
+	</div><!-- /.help-content -->
+	<!-- /section:basics/navbar.toggle -->
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	<div class="hr hr-double hr32"></div>
+	<h2 class="help-title blue lighter" data-id="#basics/navbar.toggle">
+		Navbar Menu & Form
+	</h2>
+	<div class="space-4"></div>
+
+	<div class="help-content">
+		<h3 class="info-title smaller" data-id="#basics/navbar.nav">1. Navbar Menu</h3>
+		<!-- #section:basics/navbar.nav -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				You can have a menu inside navbar like <b>top menu</b> sample page.
+			</li>
+
+			<li>
+				For an overview of the HTML markup needed for that you can see:
+				<br />
+				<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/navbar/</span>topmenu.mustache</code>
+			</li>
+			
+			<li>
+				Inside <code>.navbar-menu</code> container, you should have <code>ul.nav.navbar-nav</code> element:
+			</li>
+
+			<li>
+<pre data-language="html">
+ <nav role="navigation" class="navbar-menu pull-left collapse navbar-collapse">
+  <ul class="nav navbar-nav">
+
+    <li>
+      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+        item # 1
+      </a>
+      <ul class="dropdown-menu dropdown-light-blue dropdown-caret">
+        <!-- optional submenu items -->
+      </ul>
+    </li>
+
+    <li>
+      <a href="#">
+        item # 2
+      </a>
+    </li>
+
+  </ul>
+
+  <!-- you can also have a form here -->
+ </nav>
+</pre>
+			</li>
+			
+		 </ul><!-- /.info-list -->
+		</div><!-- /.info-section -->
+		<!-- /section:basics/navbar.nav -->
+
+
+		<h3 class="info-title smaller" data-id="#basics/navbar.form">2. Navbar Form</h3>
+		<!-- #section:basics/navbar.form -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Navbar form is similar to navbar menu.
+				<br />
+				Inside <code>.navbar-menu</code> container, the form should have <code>.navbar-form</code> class:
+				<br />
+<pre data-language="html">
+ <nav role="navigation" class="navbar-menu pull-left collapse navbar-collapse">
+  <!-- you can also have a menu here -->
+  <form class="navbar-form navbar-left form-search" role="search">
+     <div class="form-group">
+       <input type="text" placeholder="search" />
+	 </div><button type="button" class="btn btn-xs btn-info2">
+       <i class="ace-icon fa fa-search icon-only bigger-110"></i>
+     </button>
+  </form>
+ </nav>
+</pre>
+			</li>
+		 </ul><!-- /.info-list -->
+		</div><!-- /.info-section -->
+		<!-- /section:basics/navbar.form -->
+		
+	</div><!-- /.help-content -->
+	
+	<!-- /section:basics/navbar -->
+	
+</section>

src/main/webapp/static/ace/docs/sections/credits/index.html

@@ -0,0 +1,103 @@
+<section>
+  <h1 class="blue" data-id="#credits"><i class="ace-icon fa fa-paperclip"></i> Credits</h1>
+  <hr />
+  
+  <!-- #section:credits -->
+  <div class="help-content">
+  The following libraries, tools and plugins have been used in making Ace admin template.
+  <br />multiselect
+  You can find documentation and examples for each one on their respective pages or you may want to check out Ace demo files.
+  <br />
+  
+  
+  <ul class="list-unstyled spaced">
+	<li><i class="ace-icon fa fa-angle-right"></i> jQuery v2.1.4 <a href="http://www.jquery.com/" target="_blank"> </a> </li>
+	<li><i class="ace-icon fa fa-angle-right"></i> jQuery UI v1.11.4 <a href="http://www.jqueryui.com/" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> Twitter Bootstrap v3.3.5 <a href="http://getbootstrap.com/" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> FontAwesome v4.4.0 <a href="http://fortawesome.github.io/Font-Awesome/" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> LESS v2.5.3 <a href="http://lesscss.org/" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> Mustache <a href="http://mustache.github.io/" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> Twitter Hogan.js v3.0.2 <a href="http://twitter.github.io/hogan.js/" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> Mustache.php v2.9.0 <a href="https://github.com/bobthecow/mustache.php" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> Grunt.js v0.4.5 <a href="http://gruntjs.com/" target="_blank"> </a></li>
+	
+	<li><i class="ace-icon fa fa-angle-right"></i> Google Fonts "Open Sans" <a href="http://www.google.com/fonts#UsePlace:use/Collection:Open+Sans" target="_blank"> </a></li>
+	
+	<li class="divider"></li>
+	
+	<li><i class="ace-icon fa fa-angle-right"></i> jQuery Flot Charts v0.8.3 <a href="http://www.flotcharts.org/" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> jQuery Sparklines v2.1.2 <a href="http://omnipotent.net/jquery.sparkline/" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> Easy Pie Chart v2.1.6 <a href="http://rendro.github.io/easy-pie-chart/" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> jQuery Knob v1.2.11 <a href="http://anthonyterrien.com/knob/" target="_blank"> </a></li>
+
+	<li class="divider"></li>
+
+	<li><i class="ace-icon fa fa-angle-right"></i> Mindmup Wysiwyg Editor <a href="http://mindmup.github.io/bootstrap-wysiwyg/" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> Toopay Markdown Editor v2.9.0 <a href="http://toopay.github.io/bootstrap-markdown/" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> jQuery Validate v1.14.0 <a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> FuelUX v3.11.4 (Spinner, Wizard & Treeview) <a href="http://exacttarget.github.io/fuelux/" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> Dropzone.js v4.0.1 <a href="http://www.dropzonejs.com/" target="_blank"> </a></li>
+
+	<li class="divider"></li>
+
+	<li><i class="ace-icon fa fa-angle-right"></i> FullCalendar v2.4.0 <a href="http://fullcalendar.io/" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> jQuery ColorBox v1.6.3 <a href="http://www.jacklmoore.com/colorbox/" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> jQuery dataTables v1.10.9 <a href="http://datatables.net/" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> jQuery jqGrid v5.0.0 <a href="http://www.trirand.com/" target="_blank"> </a></li>
+
+	<li class="divider"></li>
+
+	<li><i class="ace-icon fa fa-angle-right"></i> X-editable v1.5.1 <a href="http://vitalets.github.io/x-editable" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> Select2 v3.5.4 <a href="http://ivaynberg.github.io/select2/" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> jQuery Chosen v1.4.2 <a href="http://harvesthq.github.io/chosen/" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> jQuery Masked Input v1.4.1 <a href="http://digitalbush.com/projects/masked-input-plugin/" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> jQuery Input Limiter v1.3.1 <a href="http://rustyjeans.com/jquery-plugins/input-limiter" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> AutoSize v3.0.13 <a href="http://www.jacklmoore.com/autosize/" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> Bootstrap Tags v2.2.5 <a href="https://github.com/fdeschenes/bootstrap-tag" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> Nestable Lists <a href="http://dbushell.github.io/Nestable/" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> Typeahead.js v0.11.1 <a href="https://github.com/twitter/typeahead.js" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> Dual Listbox v3.0.5 <a href="http://www.virtuosoft.eu/code/bootstrap-duallistbox" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> Bootstrap Multiselect v0.9.13 <a href="http://davidstutz.github.io/bootstrap-multiselect/" target="_blank"> </a></li>
+	
+	<li class="divider"></li>
+	
+	<li><i class="ace-icon fa fa-angle-right"></i> Bootstrap Colorpicker <a href="http://www.eyecon.ro/bootstrap-colorpicker" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> Bootstrap Datepicker v1.4.1 <a href="http://eternicode.github.io/bootstrap-datepicker/" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> Bootstrap Timepicker v0.5.1 <a href="http://jdewit.github.io/bootstrap-timepicker/" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> Bootstrap DateRange Picker v2.0.12 <a href="https://github.com/dangrossman/bootstrap-daterangepicker" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> Bootstrap DateTime Picker v4.17.37 <a href="http://eonasdan.github.io/bootstrap-datetimepicker/" target="_blank"> </a></li>
+
+	<li class="divider"></li>
+	
+	<li><i class="ace-icon fa fa-angle-right"></i> jQuery Raty v2.7.0 <a href="http://wbotelhos.com/raty/" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> Bootbox.js v4.4.0 <a href="http://bootboxjs.com" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> jQuery Gritter v1.2 <a href="http://boedesign.com/2009/07/11/growl-for-jquery-gritter/" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> jQuery slimScroll v1.3.6 <a href="http://rocha.la/jQuery-slimScroll" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> Spin.js v2.3.2 <a href="http://fgnass.github.io/spin.js/" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> PACE v0.7.1 <a href="http://github.hubspot.com/pace/" target="_blank"> </a></li>
+	
+	<li class="divider"></li>
+	
+	<li><i class="ace-icon fa fa-angle-right"></i> jQuery Mobile v1.4.5 (Custom Build) <a href="http://jquerymobile.com/" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> jQuery UI Touch Punch v0.2.3 <a href="http://touchpunch.furf.com/" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> Google Code Prettify <a href="http://code.google.com/p/google-code-prettify/" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> Rainbow v1.1.9 <a href="http://craig.is/making/rainbows" target="_blank"> </a></li>
+	
+	<li class="divider"></li>
+	
+	<li><i class="ace-icon fa fa-angle-right"></i> jQuery Mousewheel v3.1.13 <a href="https://github.com/jquery/jquery-mousewheel" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> Respond v1.4.2 <a href="https://github.com/scottjehl/Respond/" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> html5shiv v3.7.3 <a href="https://github.com/aFarkas/html5shiv/" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> ExplorerCanvas <a href="http://code.google.com/p/explorercanvas/" target="_blank"> </a></li>
+	
+	<li class="divider"></li>
+	
+	<li><i class="ace-icon fa fa-angle-right"></i> UglifyJS v2.4.24 <a href="https://github.com/mishoo/UglifyJS2" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> CleanCSS v3.4.5 <a href="https://github.com/jakubpawlowicz/clean-css" target="_blank"> </a></li>
+	<li><i class="ace-icon fa fa-angle-right"></i> CodeMirror v5.7.0 <a href="http://codemirror.net/" target="_blank"> </a></li>
+  </ul>
+  </div>
+
+  <!-- /section:credits -->
+
+</section>

src/main/webapp/static/ace/docs/sections/custom/checkbox.html

@@ -0,0 +1,355 @@
+<section>
+	<h1 class="blue" data-id="#custom/checkbox"><i class="ace-icon fa fa-desktop grey"></i> Checkbox & Switch</h1>
+
+	<div class="hr hr-double hr32"></div>
+
+	<!-- #section:custom/checkbox -->
+	<div class="help-content">
+		<h3 class="info-title smaller">1. Checkbox & Radio</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Ace admin template has support for pure CSS checkbox and on/off switches.
+				<br />
+				This makes it more lightweight and there's no need for an external library.
+			</li>
+			<li>
+				A basic checkbox element has <code>.ace</code>
+				class and a <code>.lbl</code> element follows it:
+<pre data-language="html">
+<label>
+  <input type="checkbox" name="myoption[]" class="ace" />
+  <span class="lbl">Optional Text</span>
+</label>
+</pre>
+			<li>
+			It's always a good idea to wrap checkbox element and the <code>.lbl</code> element
+			inside a <code>label</code> for better click response, except for some cases such as re-styling
+			jqGrid checkboxes (see Notes below)
+			</li>
+			
+			<li>
+				You can use an addtional <code>.ace-checkbox-2</code> class for another checkbox style:
+<br />
+<pre data-language="html">
+<label>
+  <input type="checkbox" name="myoption[]" class="ace ace-checkbox-2" />
+  <span class="lbl">Optional Text</span>
+</label>
+</pre>
+			</li>
+			
+			<li>
+				Radio buttons are also styled like checkboxes:
+<pre data-language="html">
+<label>
+  <input type="radio" name="myoption" class="ace" value="1" />
+  <span class="lbl">Optional Text</span>
+</label>
+</pre>
+			</li>
+			
+ 		 </ul>
+		</div>
+		
+		<h3 class="info-title smaller" data-id="#custom/checkbox.switch">2. Switch elements</h3>
+		<!-- #section:custom/checkbox.switch -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Switch elements are like checkboxes with a few additional classes:
+				<ol>
+					<li><code>.ace-switch</code></li>
+					<li><code>.ace-switch-2</code></li>
+					<li><code>.ace-switch-3</code></li>
+					<li><code>.ace-switch-4</code></li>
+					<li><code>.ace-switch-5</code></li>
+					<li><code>.ace-switch-6</code></li>
+					<li><code>.ace-switch-7</code></li>
+				</ol>
+<pre data-language="html">
+ <label>
+  <input type="checkbox" name="myoption" class="ace ace-switch" />
+  <span class="lbl"></span>
+ </label>
+
+ <label>
+  <input type="checkbox" name="myoption" class="ace ace-switch ace-switch-4" />
+  <span class="lbl"></span>
+ </label>
+</pre>
+			</li>
+			
+			<li>
+				<code>.btn-rotate</code> makes the bars horizontal:
+				<br />
+				<label>
+				  <input type="checkbox" name="myoption" class="ace ace-switch ace-switch-4 btn-rotate" />
+				  <span class="lbl"></span>
+				</label>
+				<br />
+<pre data-language="html">
+ <label>
+  <input type="checkbox" name="myoption" class="ace ace-switch ace-switch-4 btn-rotate" />
+  <span class="lbl"></span>
+ </label>
+</pre>
+			</li>
+			
+			<li>
+				<code>.btn-empty</code> hides the bars:
+				<br />
+				<label>
+				  <input type="checkbox" name="myoption" class="ace ace-switch ace-switch-4 btn-empty" />
+				  <span class="lbl"></span>
+				</label>
+				<br />
+<pre data-language="html">
+ <label>
+  <input type="checkbox" name="myoption" class="ace ace-switch ace-switch-4 btn-empty" />
+  <span class="lbl"></span>
+ </label>
+</pre>
+			</li>
+			
+			<li>
+				<code>.btn-flat</code> makes the checkbox rectangular:
+				<br />
+				<label>
+				  <input type="checkbox" name="myoption" class="ace ace-switch ace-switch-4 btn-flat" />
+				  <span class="lbl"></span>
+				</label>
+				<br />
+<pre data-language="html">
+ <label>
+  <input type="checkbox" name="myoption" class="ace ace-switch ace-switch-4 btn-flat" />
+  <span class="lbl"></span>
+ </label>
+</pre>
+			</li>
+			
+			<li>
+				You can have a custom text for switch elements using <code>data-lbl</code> attribute of the
+				<code>.lbl</code> element.
+				<br />
+				You should add enough spaces (&amp;nbsp;) to adjust your custom text:
+				<label>
+				  <input type="checkbox" name="myoption" class="ace ace-switch ace-switch-4 btn-flat" />
+				  <span class="lbl" data-lbl="Hi&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Bye"></span>
+				</label>
+				<br />
+<pre data-language="html">
+ <label>
+  <input type="checkbox" name="myoption" class="ace ace-switch ace-switch-4 btn-flat" />
+  <span class="lbl" data-lbl="Hi&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Bye"></span>
+ </label>
+</pre>
+			</li>
+			
+			<li>
+				You can also edit <code>assets/css/less/form/checkbox.less</code>
+				and modify <code>@switch-1-text</code> variables and re-compile LESS files into CSS.
+			</li>
+			
+			<li>
+				Sometimes your text is not adjusted well.
+				In that case you can override the following CSS rules and find the best values:
+<pre data-language="css">
+/* for default switch element */
+input[type=checkbox].ace.ace-switch + .lbl::before {
+   text-indent: -21px;
+}
+input[type=checkbox].ace.ace-switch:checked + .lbl::before {
+   text-indent: 8px;
+}
+
+/* or other ones */
+input[type=checkbox].ace.ace-switch.ace-switch-4 + .lbl::before {
+   text-indent: -25px;
+}
+input[type=checkbox].ace.ace-switch.ace-switch-4:checked + .lbl::before {
+   text-indent: 9px;
+}
+</pre>
+			</li>
+			
+ 		 </ul>
+		</div>
+		<!-- /section:custom/checkbox.switch -->
+		
+		
+		<h3 class="info-title smaller" data-id="#custom/checkbox.notes">3. Notes</h3>
+		<!-- #section:custom/checkbox.notes -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				You may face an issue with checkboxes in ASP.NET as there's often a hidden input inserted
+				after the checkbox and therefore our CSS rule which requires <code>.lbl</code> to be inserted
+				immediately after checkbox element, fails:
+<pre data-language="html">
+ <label>
+  <input type="checkbox" name="myoption" class="ace" />
+  <input type="hidden" name="asp-inserted-hidden-input" />
+  <span class="lbl"></span>
+ </label>
+</pre>
+			Checkboxes won't be displayed here.
+			<br />
+			You can remove <code>.ace</code> class to have default browser checkbox or
+			
+			you can use <a href="../build/css.html">CSS builder tool</a> and enable <b>ASP.NET friendly checkboxes </b>
+			option.
+			<div class="space-6"></div>
+			<i class="ace-icon fa fa-hand-o-right"></i>
+			Please note that your checkbox element should only have one <code>.lbl</code> sibling:
+<pre data-language="html">
+ <label>
+   <input type="checkbox" name="myoption" class="ace" />
+   <input type="hidden" name="asp-inserted-hidden-input" />
+   <span class="lbl">Will be styled </span>
+   <span class="lbl">This will also be styled with new ASP.net rules!</span>
+ </label>
+</pre>
+			</li>
+			
+			<li>
+				It also seems that Rails framework automatically puts a hidden input before the checkbox.
+				<br />
+				In some browsers, this may prevent the checkbox from receiving click events if it's inside a label:
+<pre data-language="html">
+ <label>
+   <input type="hidden" name="rails-inserted-hidden-input" />
+   <input type="checkbox" name="myoption" class="ace" />
+   <span class="lbl"></span>
+ </label>
+</pre>
+
+				That's because <code>label</code> element should only have one input element which
+				in this is the "hidden" input.
+				
+				<br />
+				To fix that you can put "hidden" input after checkbox or associate the label to checkbox with
+				"for" attribute and checkbox "id":
+<pre data-language="html">
+ <label for="myoption">
+   <input type="hidden" name="rails-inserted-hidden-input" />
+   <input id="myoption" type="checkbox" name="myoption" class="ace" />
+   <span class="lbl"></span>
+ </label>
+</pre>
+			</li>
+
+			<li>
+				Sometimes you have a list of checkboxes inside a parent with scrollbars.
+				<br />
+				In that case, it's better to put checkboxes inside a parent with <code>position:relative</code>.
+				<br />
+				For example inside a <code>.pos-rel</code> element:
+				
+				<div class="well">
+					<div style="overflow-y: scroll; overflow-x: hidden; height: 60px;">
+					  <div>
+					   <label class="pos-rel">
+						<input type="checkbox" name="myoption1" class="ace ace-switch ace-switch-4 btn-flat" />
+						<span class="lbl"></span>
+					   </label>
+					  </div>
+					  <div>
+					   <label class="pos-rel">
+						<input type="checkbox" name="myoption2" class="ace ace-switch ace-switch-4 btn-flat" />
+						<span class="lbl"></span>
+					   </label>
+					  </div>
+					  <div>
+					   <label class="pos-rel">
+						<input type="checkbox" name="myoption3" class="ace ace-switch ace-switch-4 btn-flat" />
+						<span class="lbl"></span>
+					   </label>
+					  </div>
+					</div>
+				</div>
+<pre data-language="html">
+<div style="overflow-y: scroll; overflow-x: hidden; height: 60px;">
+  <div>
+   <label class="pos-rel">
+    <input type="checkbox" name="myoption1" class="ace ace-switch ace-switch-4 btn-flat" />
+    <span class="lbl"></span>
+   </label>
+  </div>
+  <div>
+   <label class="pos-rel">
+    <input type="checkbox" name="myoption2" class="ace ace-switch ace-switch-4 btn-flat" />
+    <span class="lbl"></span>
+   </label>
+  </div>
+  .
+  .
+  .
+</div>
+</pre>
+			</li>
+			
+			<li>
+				Sometimes you shouldn't wrap the checkbox and <code>.lbl</code> inside a label.
+				<br />
+				For example in jqGrid plugin, when you launch an "edit record" or "new record" dialog,
+				and want to style the checkbox dynamically:
+<pre data-language="javascript">
+  form.find('input[type=checkbox]')
+      .addClass('ace ace-switch ace-switch-5').after('&lt;span class="lbl"&gt;&lt;/span&gt;');
+</pre>
+			Checkbox should not be wrapped inside <code>label</code> because it conflicts with
+			plugin's data upload mechanism.
+			</li>
+			
+			<li>
+				For better vertical alignmnet sometimes you should add <code>.middle</code> class to <code>.lbl</code>
+				element:
+<pre data-language="html">
+ <label>
+  <input type="checkbox" name="myoption" class="ace ace-switch ace-switch-4 btn-flat" />
+  <span class="lbl middle"></span>
+ </label>
+</pre>
+			</li>
+ 		 </ul>
+		</div>
+		<!-- /section:custom/checkbox.notes -->
+		
+		<h3 class="info-title smaller">4. Options</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				For a slightly larger version of checkbox and radio buttons, you can add <code>.input-lg</code>
+				class to the input element:
+<pre data-language="html">
+ <label>
+  <input type="checkbox" name="myoption" class="ace input-lg" />
+  <span class="lbl"></span>
+ </label>
+</pre>
+			</li>
+		 
+			<li>To add space between checkbox and its label you can use <code>.padding-*</code> class for <code>.lbl</code> element:
+			<div class="well well-sm">
+				<label>
+				  <input type="checkbox" name="myoption" class="ace" />
+				  <span class="lbl padding-16">Padding 16</span>
+				</label>
+			</div>
+<pre data-language="html">
+ <label>
+  <input type="checkbox" name="myoption" class="ace" />
+  <span class="lbl padding-8"></span>
+ </label>
+</pre>
+			Possible values are <code>.padding-2</code> <code>.padding-4</code> ... <code>.padding-16</code>
+			</li>
+		 </ul>
+		</div>
+
+		
+	</div>
+	<!-- /section:custom/checkbox -->
+	
+</section>

src/main/webapp/static/ace/docs/sections/custom/colorpicker.html

@@ -0,0 +1,64 @@
+<section>
+	<h1 class="blue"><i class="ace-icon fa fa-desktop grey"></i> Color picker</h1>
+
+	<div class="hr hr-double hr32"></div>
+
+
+	<!-- #section:custom/colorpicker -->
+	<div class="help-content">
+		<h3 class="info-title smaller"  data-id="#custom/colorpicker">Custom Color Picker</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Custom color picker converts a <code>select</code> element into a dropdown:
+<pre data-language="html">
+ <select name="mycolor" id="mycolor">
+  <option value="red">red</option>
+  <option value="blue">blue</option>
+  <option value="black">black</option>
+  <option value="green">green</option>
+  <option value="purple">purple</option>
+ </select>
+</pre>
+
+<pre data-language="javascript">
+ $('#mycolor').ace_colorpicker()
+ .on('change', function() {
+    alert(this.value);
+    alert(this.selectedIndex);
+ });
+</pre>
+			</li>
+			
+			<li>
+				Color picker has two functions:
+				<ol>
+					<li>
+						<code>pick</code>
+						which selects a color. Argument can be a string(color) or an integer(index)
+					</li>
+				
+<pre data-language="javascript">
+ $('#mycolor').ace_colorpicker('pick', '#FFAA77');//select '#FFAA77' color
+ $('#mycolor').ace_colorpicker('pick', 3);//select 3rd index
+ //or
+ var color_picker = $('#mycolor').data('ace_colorpicker');
+ color_picker.pick('#EE6699', true);
+ //"true" means select #EE6699 and insert it if it doesn't exist
+</pre>
+
+					<li>
+					<code>destroy</code> which destroys color picker and shows <code>select</code> element
+<pre data-language="javascript">					
+ $('#mycolor').ace_colorpicker('destroy');
+</pre>
+					</li>
+				</ol>
+			</li>
+ 		 </ul>
+		</div>
+
+		
+	</div>
+	<!-- /section:custom/colorpicker -->
+</section>

src/main/webapp/static/ace/docs/sections/custom/content-slider.html

@@ -0,0 +1,87 @@
+<section>
+	<h1 class="blue" data-id="#custom/content-slider"> Content Slider</h1>
+	
+	<div class="help-content">
+		<!-- #section:custom/content-slider -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Content sliders are based on Bootstrap modal boxes
+			</li>
+			
+			<li>
+				You just need to add <code>.aside</code> class and one of the following values to <code>data-placement</code> attribute of modal element:
+				<br />
+				<code>top</code>
+				<code>bottom</code>
+				<code>right</code>
+				<code>left</code>
+				<br />
+				
+<pre data-language="html">
+ <div class="modal aside" data-placement="top">
+   ...
+ </div>
+</pre>
+and call the following function:
+<pre data-language="javascript">
+ $('.aside').ace_aside();
+</pre>
+			</li>
+			
+			<li>
+				The following options are also available both as function parameters or data attributes:
+				<ul>
+					<li><code>container</code> (new in v1.3.3) default is null (body). You can specify the container.
+					<br />
+					For example if you want to put it inside a modal box, you can set it to <code>#myModal > .modal-dialog</code>
+					</li>
+					<li><code>placement</code></li>
+					<li><code>backdrop</code> if "false" there will be no backdrop,
+					if "invisible" backdrop will become invisible, otherwise visible</li>
+					<li><code>fixed</code> whether slider should be fixed or not</li>
+					<li><code>background</code> whether background should be dark or white</li>
+					<li><code>offset</code> whether slider should be below navbar or cover it</li>
+					<li><code>body_scroll</code> determines if body scroll is allowed when slider is visible</li>
+					<li><code>transition</code> disables or enables CSS3 transition of sliders</li>
+					<li><code>scroll_style</code> specifies scrollbar style if it's expected</li>
+				</ul>
+<pre data-language="html">
+ <div class="modal aside" data-placement="top" data-offset="true" data-background="true" data-body-scroll="false">
+   ...
+  <!-- You can specify options using data-* attributes -->
+ </div>
+</pre>
+or
+<pre data-language="javascript">
+ $('.aside').ace_aside({
+    placement: 'top',
+    offset: true,
+    background: true,
+    body_scroll: false
+ });
+</pre>
+			</li>
+
+			
+			<li>
+				Like modals, you can use any button to toggle sliders but
+				there is also an integrated(attached) button option you can use
+				by inserting after <code>.modal-content</code>:
+<pre data-language="html">
+<div class="modal-content">
+ ...
+</div>
+<button type="button" data-toggle="modal" data-target="#target-modal" class="aside-trigger btn btn-info btn-app btn-xs ace-settings-btn">
+  <i class="ace-icon fa bigger-110 icon-only fa-plus" data-icon2="fa-minus" data-icon1="fa-plus"></i>
+</button>
+</pre>
+			</li>
+
+ 		  </ul>
+		</div>
+		<!-- /section:custom/content-slider -->
+	</div>
+	
+	
+</section>

src/main/webapp/static/ace/docs/sections/custom/extra.html

@@ -0,0 +1,383 @@
+<section>
+	<h1 class="blue"><i class="ace-icon fa fa-desktop grey"></i> Extra</h1>
+
+	<div class="hr hr-double hr32"></div>
+	<h2 class="blue lighter help-title" data-id="#custom/extra">
+		Some Extra Classes
+	</h2>
+	<div class="space-4"></div>
+
+	<!-- #section:custom/extra -->
+	<div class="help-content">
+		<h3 class="info-title smaller">Utility Classes</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				A few additional classes have been defined in 
+				<code data-open-file="css" class="open-file">assets/css/less/utility.less</code> that may be useful. 
+			</li>
+		 </ul>
+		</div>
+		
+		
+		<h3 class="info-title smaller">Font &amp; Color</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Headings:
+				<ul>
+					<li><code>.smaller</code> makes font size smaller</li>
+					<li><code>.bigger</code> makes font weight bigger</li>
+				</ul>
+<pre data-language="html">
+ <h4 class="bigger">Bigger H4</h4>
+</pre>
+			</li>
+		 
+			<li>
+				Font weights:
+				<ul>
+					<li><code>.lighter</code> makes font weight light</li>
+					<li><code>.bolder</code> makes font weight bold</li>
+				</ul>
+<pre data-language="html">
+ <h3 class="lighter">Lighter Text</h3>
+</pre>
+			</li>
+			
+			<li>
+				Text colors:
+				<ul>
+					<li><code>.dark</code></li>
+					<li><code>.white</code></li>
+					<li><code>.red</code></li>
+					<li><code>.red2</code></li>
+					<li><code>.light-red</code></li>
+					<li><code>.blue</code></li>
+					<li><code>.light-blue</code></li>
+					<li><code>.green</code></li>
+					<li><code>.light-green</code></li>
+					<li><code>.orange</code></li>
+					<li><code>.orange2</code></li>
+					<li><code>.light-orange</code></li>
+					<li><code>.purple</code></li>
+					<li><code>.pink</code></li>
+					<li><code>.pink2</code></li>
+					<li><code>.brown</code></li>
+					<li><code>.grey</code></li>
+					<li><code>.light-grey</code></li>
+				</ul>
+				
+<pre data-language="html">
+ <span class="blue">Blue Text</span>
+</pre>
+			</li>
+			
+			<li>
+				<ul>
+					<li><code>.bigger-110</code></li>
+					<li><code>.bigger-120</code></li>
+					<li>...</li>
+					<li><code>.bigger-290</code></li>
+					<li><code>.bigger-300</code></li>
+					<li>...</li>
+					<li><code>.bigger-125</code></li>
+					<li><code>.bigger-175</code></li>
+					<li><code>.bigger-225</code></li>
+					<li><code>.bigger-275</code></li>
+				</ul>
+				
+<pre data-language="html">
+ <i class="fa fa-twitter blue bigger-150"></i>
+</pre>
+			</li>
+			
+			<li>
+				<ul>
+					<li><code>.smaller-90</code></li>
+					<li><code>.smaller-80</code></li>
+					<li><code>...</code></li>
+					<li><code>.smaller-30</code></li>
+					<li><code>.smaller-20</code></li>
+					<li><code>...</code></li>
+					<li><code>.smaller-75</code></li>
+					<li><code>.smaller-25</code></li>
+				</ul>
+<pre data-language="html">
+ <span class="smaller-75">Smaller Text</span>
+</pre>
+			</li>
+ 		 </ul>
+		</div>
+		
+		
+		
+		<h3 class="info-title smaller">Layout &amp; Alignment</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				<ul>
+					<li><code>.inline</code> applies <code>display: inline-block</code></li>
+					<li><code>.block</code> applies <code>display: block</code></li>
+				</ul>
+			</li>
+
+			<li>
+				<ul>
+					<li><code>.pos-rel</code></li>
+					<li><code>.position-relative</code></li>
+					<li><code>.pos-abs</code></li>
+					<li><code>.position-absolute</code></li>
+				</ul>
+				
+				As an example <code>.inline</code> and <code>.position-relative</code>
+				can be used to add a dropdown inside a <code>DIV</code> element without the need to define a new class:
+<pre data-language="html">
+<div class="inline pos-rel">
+   <a href="#" data-toggle="dropdown" class="dropdown-toggle">Show Menu</a>
+   <ul class="dropdown-menu">
+      ...
+   </ul>
+</div>
+</pre>
+			</li>
+			
+			<li>
+				<ul>
+					<li><code>.center</code></li>
+					<li><code>.align-center</code></li>
+					<li><code>.align-left</code></li>
+					<li><code>.align-right</code></li>
+				</ul>
+			</li>
+			
+			<li>
+				<ul>
+					<li><code>.middle</code></li>
+					<li><code>.align-middle</code></li>
+					<li><code>.align-top</code></li>
+					<li><code>.align-bottom</code></li>
+				</ul>
+				which applies vertical alignment
+			</li>
+			
+			<li><code>.no-float</code></li>
+		  </ul>
+		</div>
+
+
+
+		<h3 class="info-title smaller">Box Model</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				<ul>
+					<li><code>.no-padding</code></li>
+					<li><code>.no-padding-right</code></li>
+					<li><code>.no-padding-left</code></li>
+					<li><code>.no-padding-top</code></li>
+					<li><code>.no-padding-bottom</code></li>
+				</ul>
+			</li>
+			
+			<li>
+				<ul>
+					<li><code>.no-margin</code></li>
+					<li><code>.no-margin-right</code></li>
+					<li><code>.no-margin-left</code></li>
+					<li><code>.no-margin-top</code></li>
+					<li><code>.no-margin-bottom</code></li>
+				</ul>
+			</li>
+			
+			<li>
+				<ul>
+					<li><code>.no-border</code></li>
+					<li><code>.no-border-right</code></li>
+					<li><code>.no-border-left</code></li>
+					<li><code>.no-border-top</code></li>
+					<li><code>.no-border-bottom</code></li>
+				</ul>
+			</li>
+			
+			<li>
+				<ul>
+					<li><code>.width-100</code></li>
+					<li><code>.width-90</code></li>
+					<li>...</li>
+					<li><code>.width-20</code></li>
+					<li>...</li>
+					<li><code>.width-75</code></li>
+					<li><code>.width-25</code></li>
+					<li>...</li>
+					<li><code>.width-auto</code></li>
+					<li><code>.height-auto</code></li>
+				</ul>
+				
+<pre data-language="html">
+<div class="clearfix">
+  <div class="pull-left width-50">
+    ...  
+  </div>
+  
+  <div class="pull-right width-50">
+    ...
+  </div>
+</div>
+</pre>
+			</li>
+		  </ul>
+		</div>
+
+
+
+		<h3 class="info-title smaller">Space &amp; Separator</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Add <code>.spaced</code> and <code>.spaced2</code> to
+				<code>ul</code> and <code>ol</code> lists for more spacing:
+<pre data-language="html">
+<ul class="spaced2">
+  <li>...</li>
+  <li>...</li>
+</ul>
+</pre>
+			</li>
+		 
+			<li>
+				Space classes to add vertical spacing:
+				<ul>
+					<li><code>.space</code></li>
+					<li><code>.space-0</code></li>
+					<li><code>.space-2</code></li>
+					<li><code>.space-4</code></li>
+					<li>...</li>
+					<li><code>.space-30</code></li>
+					<li><code>.space-32</code></li>
+				</ul>
+<pre data-language="html">
+<div class="space-12"></div>
+</pre>				
+			</li>
+			
+			<li>
+				Spacing that is only visible on specific widths:
+				<ul>
+					<li><code>.vspace-2-xs</code></li>
+					<li><code>.vspace-4-xs</code></li>
+					<li>...</li>
+					<li><code>.vspace-30-xs</code></li>
+					<li><code>.vspace-32-xs</code></li>
+				</ul>
+				
+				<ul>
+					<li><code>.vspace-2-sm</code></li>
+					<li><code>.vspace-4-sm</code></li>
+					<li>...</li>
+				</ul>
+				
+				<ul>
+					<li><code>.vspace-2-md</code></li>
+					<li><code>.vspace-4-md</code></li>
+					<li>...</li>
+				</ul>
+				
+				<ul>
+					<li><code>.vspace-2-lg</code></li>
+					<li><code>.vspace-4-lg</code></li>
+					<li>...</li>
+				</ul>
+				
+<pre data-language="html">
+<div class="vspace-12-xs"></div><!-- will be visibly only on small devices -->
+</pre>				
+			</li>
+			
+			<li>
+				<!-- #section:custom/extra.hr -->
+				Horizontal line:
+				<ul>
+					<li><code>.hr</code></li>
+					<li><code>.hr.hr-2</code></li>
+					<li><code>.hr.hr-4</code></li>
+					<li>...</li>
+					<li><code>.hr.hr-30</code></li>
+					<li><code>.hr.hr-32</code></li>
+					<li>...</li>
+					<li><code>.hr.hr-dotted</code></li>
+					<li><code>.hr.hr-double</code></li>
+				</ul>
+<pre data-language="html">
+<div class="hr hr-12 hr-dotted"></div>
+</pre>
+			</li>
+			<!-- /section:custom/extra.hr -->
+			
+		  </ul>
+		</div>
+		
+		
+		
+		<h3 class="info-title smaller">Header</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				<code>.header</code> with same text colors as above:
+				<div class="well">
+					<h3 class="header blue">
+					  Header Text
+					</h3>
+				</div>
+<pre data-language="html">
+<h3 class="header blue lighter smaller">
+  Header Text
+</h3>
+</pre>
+			</li>
+		  </ul>
+		</div>
+		
+		
+		
+		<h3 class="info-title smaller">Other</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				<!-- #section:custom/extra.action-buttons -->
+				<code>.action-buttons</code>:
+				<br />
+				<span class="action-buttons bigger-125">
+					<a href="#"><i class="ace-icon fa fa-twitter light-blue"></i></a>
+					<a href="#"><i class="ace-icon fa fa-facebook blue"></i></a>
+				</span>
+				<br />
+<pre data-language="html">
+<span class="action-buttons bigger-125">
+  <a href="#"><i class="ace-icon fa fa-twitter light-blue"></i></a>
+  <a href="#"><i class="ace-icon fa fa-facebook blue"></i></a>
+</span>
+</pre>
+				<!-- /section:custom/extra.action-buttons -->
+			</li>
+			
+			<li>
+				<!-- #section:custom/extra.grid -->
+				<code>.grid2</code> <code>.grid3</code> <code>.grid4</code> elements
+				are less responsive and good for small pieces of content and have a border line separating them:
+<pre data-language="html">
+<div class="clearfix">
+  <div class="grid3"></div>
+  <div class="grid3"></div>
+  <div class="grid3"></div>
+</div>
+</pre>
+				<!-- /section:custom/extra.grid -->
+			</li>
+		  </ul>
+		</div>
+		
+	</div>
+	<!-- /section:custom/extra -->
+	
+</section>

src/main/webapp/static/ace/docs/sections/custom/file-input.html

@@ -0,0 +1,577 @@
+<section>
+	<h1 class="blue" data-id="#custom/file-input"><i class="ace-icon fa fa-desktop grey"></i> File Input</h1>
+
+	<div class="hr hr-double hr32"></div>
+
+	<!-- #section:custom/file-input -->
+	<div class="help-content">
+		<h3 class="info-title smaller">1. Custom File Input</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				A simple file input control which styles browsers default input and adds some extra features
+			</li>
+			<li>
+				If you want advanced functionality, you should consider using <a href="#plugins/misc.dropzone" class="help-more">dropzone.js</a> or other library.
+			</li>
+			
+			<li>
+			Basic usage is:
+<pre data-language="html">
+ <input type="file" name="myfile" id="my-file-input" />
+</pre>
+<pre data-language="javascript">
+ $('#my-file-input').ace_file_input();
+</pre>
+			</li>
+ 		 </ul>
+		</div>
+		
+		<h3 class="info-title smaller">2. Options</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				You can use one of the following options:
+				<ol>
+					<li><code>style</code> default=false. If you set it to <b>well</b>, the large style will be displayed</li>
+					<li><code>no_file</code> the text to show when no file is selected</li>
+					<li><code>no_icon</code> the icon to show when no file is selected</li>
+					<li><code>btn_choose</code> button text when no file is selected</li>
+					<li><code>btn_change</code> button text when a file is selected</li>
+					<li><code>icon_remove</code> icon to use for remove(reset) button</li>
+					<li><code>droppable</code> default=false. set <b>true</b> to enable drag & drop</li>
+					<li><code>thumbnail</code> <b>small</b>, <b>large</b> or <b>fit</b>. Used when <b>style</b> options is <b>well</b></li>
+					<li class="space-6"></li>
+					<li><code>allowExt</code> a list of allowed extensions (whitelist)</li>
+					<li><code>denyExt</code> a list of denied extensions (blacklist)</li>
+					<li><code>allowMime</code> a list of allowed mime types (whitelist)</li>
+					<li><code>denyMime</code> a list of denied mime types (blacklist)</li>
+					<li><code>maxSize</code> maximum file size allowed in bytes</li>
+				</ol>
+				The above allow/deny options, trigger <code>file.error.ace</code> event when an invalid file is selected.
+				<br />
+				Please refer to "File Filtering" section for more info.
+				<Br />
+				
+<pre data-language="javascript">
+$('#my-file-input').ace_file_input({
+    style: 'well',
+    no_file: 'Click to choose or drag & drop',
+    droppable: true, //html5 browsers only
+    thumbnail: 'small', //html5 browsers only
+
+    maxSize: 100000, //~100 KB
+    allowExt:  ['jpg', 'jpeg', 'png', 'gif', 'tif', 'tiff', 'bmp'],
+    allowMime: ['image/jpg', 'image/jpeg', 'image/png', 'image/gif', 'image/tif', 'image/tiff', 'image/bmp'] //html5 browsers only
+});
+
+$('#my-file-input2').ace_file_input({
+    denyExt:  ['exe', 'php']
+});
+</pre>
+			</li>
+ 		 </ul>
+		</div>
+			
+		<h3 class="info-title smaller">3. Callbacks</h3>
+		<div class="info-section">
+		<ul class="info-list list-unstyled">
+			<li>
+				There are 3 callback option
+			</li>
+			
+			<li>
+				<code>before_change</code> callback is called when user selects/drops files
+				and before files are displayed.
+				<br />
+				Inside it you can return:
+				<ol>
+					<li>a modified file list</li>
+					<li><code>true</code> and all files will be kept</li>
+					<li><code>false</code> and no files will be kept</li>
+					<li><code>-1</code> and no files will be kept and input will be reset</li>
+				</ol>
+				<br />
+				Also it accepts following arguments:
+				<ol>
+					<li>
+					  <code>files</code> a list of selected/dropped files which is a FileList in modern browsers
+					  and a string (filename) array for older browsers
+					</li>
+					<li><code>dropped</code> whether files have been dropped or selected</li>
+				</ol>
+				<br />
+<pre data-language="javascript">
+$('#my-file-input').ace_file_input({
+  ...
+  ,
+ before_change: function(files, dropped) {
+    //files is a "File" object array in modern browsers
+    //files is a "string" (file name) array in older browsers
+
+    //dropped=true if files are drag & dropped
+
+    var valid_files = []
+
+    for(var i = 0; i < files.length; i++) {
+      var file = files[i];
+	  
+      if( typeof file === 'string') {
+          /older browsers that don't support FileReader API, such as IE
+          //here, file is just a filename string
+          //if (file is valid) valid_files.push(file);
+      } else if( 'File' in window && file instanceof window.File ) {
+          //file is a "File" object with following properties
+          //file.name
+          //file.type (mime type)
+          //file.size
+          //if (file is valid) valid_files.push(file);
+      }
+    }
+
+
+    return valid_files;
+
+    //or
+    return true;//original input files
+
+    //or
+    return false;//all are invalid, but don't reset input
+
+    //or
+    return -1;//all are invalid, reset input
+ }
+ </pre>
+			</li>
+			
+			<li>
+				<b>before_remove</b> can be used to disable resetting file input, for example during a file upload session:
+<pre data-language="javascript">
+ $('#my-file-input').ace_file_input({
+    ...
+	,
+    before_remove : function() {
+      if( uploadInProgress) return false;//don't allow resetting
+      return true;
+    }
+ });
+ </pre>
+			</li>
+			
+			<li>
+				If <b>preview_error</b> is defined, it will be called in case there's an error when building preview of image files:
+<pre data-language="javascript">
+$('#my-file-input').ace_file_input({
+    ...,
+    preview_error : function(filename, error_code) {
+       //filename = name of the file that had a problem
+       switch(error_code) {
+          case 1:
+          //FILE_LOAD_FAILED
+          break;
+
+          case 2:
+          //IMAGE_LOAD_FAILED
+          break;
+
+          case 3:
+          //THUMBNAIL_FAILED
+          break;
+       }
+   }
+});
+ </pre>
+			</li>
+
+ 		 </ul>
+		</div>
+
+
+
+		<h3 class="info-title smaller" data-id="#custom/file-input.filter">4. File Filtering</h3>
+		<!-- #section:custom/file-input.filter -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				As mentioned in previous sections, you can use the following options and callbacks to filter
+				the list of selected files:
+				<ol>
+					<li><code>allowExt</code></li>
+					<li><code>denyExt</code></li>
+					<li><code>allowMime</code></li>
+					<li><code>denyMime</code></li>
+					<li><code>maxSize</code></li>
+					<li><code>before_change</code></li>
+				</ol>
+			</li>
+			
+			<li>
+				Please note that when you select a file using file dialog,
+				browser's file input element cannot be modified. It can only be reset (emptied).
+				<br />
+				For example if you specify <code>allowExt</code> option
+				to select only image files, but user selects none-image files as well,
+				the browser keeps all selected files but Ace file input shows image files only.
+			</li>
+			
+			<li>
+				When user selects an invalid file <code>file.error.ace</code> event is triggered which
+				has some info about the error.
+			</li>
+			
+			<li>
+				If you call <code>preventDefault</code> on event object, the file control will be reset and becomes empty.
+				<br />
+				Otherwise, file control won't be reset and browser keeps all selected files.
+				<br />
+				However, Ace file input displays valid files and the 
+				<code>$('#my-file-input').data('ace_input_files')</code> returns valid files only.
+			</li>
+			
+			<li>
+<pre data-language="html">
+ $('#my-file-input').ace_file_input({
+    'allowExt': ['jpg', 'jpeg', 'png']
+ })
+ .on('file.error.ace', function(event, info) {
+	//info.file_count > number of files selected
+	//info.invalid_count > number of invalid files
+	
+	//info.error_count['ext'] > number of files with invalid extension (only if allowExt or denyExt is set)
+	//info.error_count['mime'] > number of files with invalid mime type (only if allowMime or denyMime is set)
+	//info.error_count['size'] > number of files with invalid size (only if maxSize option is set)
+
+	//info.error_list['ext'] > list of file names with invalid extension
+	//info.error_list['mime'] > ...
+	//info.error_list['size'] > ...
+	
+	//info.dropped > true if files have been selected by drag & drop
+	
+	
+	//if you do this
+	event.preventDefault();
+	//it will reset (empty) file input, i.e. no files selected
+ }); 
+</pre>
+			</li>
+			
+			<li>
+				There is also <code>before_change</code> callback.
+				Please see previous section for more info.
+			</li>
+			
+ 		 </ul>
+		</div>
+		<!-- /section:custom/file-input.filter -->
+		
+
+		
+		<h3 class="info-title smaller">5. Functions</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				The following functions are available for file input control.
+			</li>
+			<li>
+				<code>show_file_list</code> takes a list of file names and shows them inside the control:
+<pre data-language="javascript">
+$('#my-input').ace_file_input('show_file_list', ['file1.txt']);
+</pre>
+				For example, you may want to edit a file input
+				which has user's previous selection.
+				
+				<div class="alert alert-info">
+					From version 1.3.2 you can also preview images inside file input control.
+				</div>
+<pre data-language="javascript">
+$('#my-input')
+.ace_file_input('show_file_list', [
+    {type: 'image', name: 'name of image', path: 'http://path/to/image/for/preview'},
+    {type: 'file', name: 'hello.txt'}
+]);
+//type can be 'image', 'video', 'audio', 'file'
+</pre>
+				
+			</li>
+			<li>
+				<code>update_settings</code> to update options:
+<pre data-language="javascript">
+$('#my-input').ace_file_input('update_settings', {
+   allowExt: ['pdf', 'doc', 'docx']
+});
+</pre>
+			</li>
+			<li>
+				<code>files</code> returns list of selected files:
+<pre data-language="javascript">
+var files = $('#my-input').ace_file_input('files');
+//is similar to:
+var files = $('#my-input').data('ace_input_files');
+</pre>
+			</li>
+			<li>
+				<code>method</code> returns method used by user which is 'select' or 'drop':
+<pre data-language="javascript">
+var method = $('#my-input').ace_file_input('method');
+//is similar to:
+var method = $('#my-input').data('ace_input_method');
+</pre>
+			</li>
+			<li>
+				<code>disable</code> disables file input:
+<pre data-language="javascript">
+$('#my-input').ace_file_input('disable');
+</pre>
+			</li>
+			<li>
+				<code>enable</code> enables file input:
+<pre data-language="javascript">
+$('#my-input').ace_file_input('enable');
+</pre>
+			</li>
+			
+			<li>
+				<code>enable_reset</code> takes an argument and enables/disables reset button:
+<pre data-language="javascript">
+$('#my-input').ace_file_input('enable_reset', false);
+$('#my-input').ace_file_input('enable_reset', true);
+</pre>
+			</li>
+			
+			<li>
+				<code>reset_input</code> resets file input:
+<pre data-language="javascript">
+$('#my-input').ace_file_input('reset_input');
+</pre>
+			</li>
+			<li>
+				<code>reset_input_ui</code> resets file input's UI only:
+<pre data-language="javascript">
+$('#my-input').ace_file_input('reset_input_ui');
+</pre>
+			Suppose you have a form with a reset button.
+			<br />
+			When you hit "reset", file input field will be reset, but Ace file input's UI won't be reset.
+			<br />
+			You should do this on your own:
+<pre data-language="javascript">
+$('#my-form').on('reset', function(e) {
+    $('#my-input').ace_file_input('reset_input_ui');
+});
+</pre>
+			</li>
+			<li>
+				<code>reset_input_field</code> resets file input field
+			</li>
+			
+			
+			<li>
+				<code>loading</code> adds/updates/removes a loading/waiting overlay for example during a file upload:
+<pre data-language="javascript">
+ $('#my-input').ace_file_input('loading' , true);//adds overlay
+ $('#my-input').ace_file_input('loading' , false);//removes overlay
+ $('#my-input').ace_file_input('loading' , ' custom content inside overlay such as a progressbar ');
+</pre>
+			</li>
+ 		 </ul>
+		</div>
+
+		
+		<h3 class="info-title smaller">6. Events</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				If you use file filter options and user selects or drops an invalid file, a
+				<code>file.error.ace</code> event is triggered with some info about invalid files.
+				<br />
+				You can find more info about it in the <b>File Filtering</b> section.
+			</li>
+			
+			<li>
+				<code>file.preview.ace</code> event is triggered with extra info about image files and you can call <code>e.preventDefault()</code> to prevent 
+				displaying image preview.
+				<br />
+<pre data-language="javascript">
+ $('#my-file-input').on('file.preview.ace', function(e, info) {
+    //info.file is the File object
+    if(info.file.width > 1000) {
+        e.preventDefault();//don't show image preview
+        alert("Invalid image width!");		
+    }
+ }
+</pre>
+			</li>
+			
+			<li>
+				You can also add a <b>change</b> event listener to the file input and it will be triggered
+				when files are selected or dropped:
+<pre data-language="javascript">
+ $('#my-file-input').ace_file_input({
+   droppable: true
+ })
+ .on('change', function() {
+    var files = $(this).data('ace_input_files');
+    var method = $(this).data('ace_input_method');
+ });
+</pre>
+			</li>
+ 		 </ul>
+		</div>
+
+
+		<h3 class="info-title smaller">7. Uploading</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				If you don't use <b>drag & drop</b> functionality, file upload is done as normal,
+				by submitting the form and browser takes care of it.
+			</li>
+			
+			<li>
+				However when you enable <b>drag & drop</b> feature and user drops some files onto the control,
+				file field is not modified and by submitting form, no files are uploaded.
+			</li>
+			
+			<li>
+				In this case, you should use modern HTML5 features and upload your files using Ajax
+				and <b>FormData</b> object.
+				<br />
+				<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects">FormData</a>
+			</li>
+			
+			<li>
+				The list of files which should be uploaded is retrieved like this:
+<pre data-language="javascript">
+var files = $('#my-file-input').data('ace_input_files');
+</pre>
+			</li>
+			
+			<li>
+				For a working example and more info please see <code>examples/file-upload.html</code>.
+			</li>
+			
+			<li>
+				When using FormData object if you use the following to create your FormData object,
+				browser will include all the files that are selected by user:
+<pre data-language="javascript">
+var myform = $('#myform');
+var fd = new FormData(myform.get(0));//populate FormData with myform data
+</pre>
+			This way our filtered files are not taken into account.
+			<br />
+			So you can do the following instead:
+<pre data-language="javascript">
+var myform = $('#myform');
+var fd = new FormData();//empty FormData object
+$.each(myform.serializeArray(), function(i, item) {
+  //add form fields one by one to our FormData 
+  fd.append(item.name, item.value);
+});
+</pre>
+	The above does not add file fields to FormData and we should append our files like this:
+<pre data-language="javascript">
+myform.find('input[type=file]').each(function(){
+  var field_name = $(this).attr('name');
+  //for fields with "multiple" file support
+  //field name should be something like `myfile[]`
+
+  var files = $(this).data('ace_input_files');
+  if(files && files.length > 0) {
+     for(var f = 0; f < files.length; f++) {
+       fd.append(field_name, files[f]);
+    }
+  }
+});
+</pre>
+			Now our FormData object can be submitted using Ajax:
+<pre data-language="javascript">
+var deferred = $.ajax({
+          url: myform.attr('action'),
+         type: myform.attr('method'),
+  processData: false,//important
+  contentType: false,//important
+     dataType: 'json',//depending on your server side response
+         data: fd//our FormData object
+})
+
+deferred.done(function(result) {
+  //on success (successful response from server)
+}).fail(function(result) {
+  //unable to receive a valid response from server
+});
+</pre>
+
+			</li>
+			
+			<li>
+				For older browsers that don't support <code>FormData</code> object, we can use 
+				an invisible frame to upload our form without leaving or refreshing the page:
+<pre data-language="javascript">
+var deferred = new $.Deferred //create a custom deferred object, because there's no ajax here to create it for us
+var temporary_iframe_id = 'temporary-iframe-'+(new Date()).getTime()+'-'+(parseInt(Math.random()*1000));
+var temp_iframe = 
+     $('&lt;iframe id="'+temporary_iframe_id+'" name="'+temporary_iframe_id+'" \
+       frameborder="0" width="0" height="0" src="about:blank"\
+       style="position:absolute; z-index:-1; visibility: hidden;" /&gt;')
+      .insertAfter(myform)
+
+myform.append('&lt;input type="hidden" name="temporary-iframe-id" value="'+temporary_iframe_id+'" /&gt;');
+
+temp_iframe.data('deferrer' , deferred);
+//we save the deferred object to the iframe and in our server side response
+//we use "temporary-iframe-id" to access iframe and its deferred object
+
+myform.attr({
+       'method': 'POST',
+      'enctype': 'multipart/form-data',
+       'target': temporary_iframe_id //important
+});
+
+myform.get(0).submit();
+
+//if we don't receive a response after 30 seconds, let's declare it as failed!
+ie_timeout = setTimeout(function(){
+    ie_timeout = null;
+    temp_iframe.attr('src', 'about:blank').remove();
+    deferred.reject({'status':'fail', 'message':'Timeout!'});
+} , 30000);
+}
+</pre>
+
+			And deferred callbacks are similar to ajax example.
+			</li>
+			
+ 		 </ul>
+		</div>
+		
+		
+		
+		<h3 class="info-title smaller">8. Notes</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Please note that validating files inside browser is not secure.
+				<br />
+				You should always check uploaded files in your server side script.
+				<br />
+				A php example inside <code>examples/file-upload.php</code>
+				validates files and	only allows image files.
+			</li>
+			
+			<li>
+				Most modern browsers allow multiple file selection.
+				<br />
+				If you want that, make sure your file input control has <code>multiple</code> attribute
+				and input name has brackets like <code>myfiles[]</code>:
+<pre data-language="html">
+ &lt;input multiple type="file" name="myfiles[]" id="myfiles" /&gt;
+</pre>
+			</li>
+ 		 </ul>
+		</div>
+
+	</div>
+	
+	<!-- /section:custom/file-input -->
+	
+</section>

src/main/webapp/static/ace/docs/sections/custom/index.html

@@ -0,0 +1,23 @@
+<section>
+	<h1 class="blue" data-id="#custom/widget-box"><i class="ace-icon fa fa-desktop grey"></i> Widget Box</h1>
+
+	<div class="hr hr-double hr32"></div>
+	<h2 class="blue lighter help-title" data-id="#custom/widget-box">
+		Widget Box
+	</h2>
+	<div class="space-4"></div>
+
+	<!-- #section:custom/widget-box -->
+	<div class="help-content">
+		<h3 class="info-title smaller">1. Widget Box</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				
+			</li>
+		</ul>
+	</div>
+	<!-- /section:custom/widget-box -->
+	
+	
+</section>

src/main/webapp/static/ace/docs/sections/custom/inline-editable.html

@@ -0,0 +1,263 @@
+<section>
+	<h1 class="blue" data-id="#custom/inline-editable"><i class="ace-icon fa fa-desktop grey"></i> Inline Editable Addons</h1>
+
+	<div class="hr hr-double hr32"></div>
+
+
+	<!-- #section:custom/inline-editable -->
+	<div class="help-content">
+		<h3 class="info-title smaller">Overview</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Based on <a href="#plugins/misc.inline-editable">Inline editable</a> plugin,
+				five additional editables have been defined which you can use by including
+				the following scripts:
+<pre data-language="html">
+ &lt;script src="dist/js/x-editable/bootstrap-editable.min.js" /&gt;
+ &lt;script src="dist/js/x-editable/ace-editable.min.js" /&gt;
+</pre>
+			</li>
+ 		 </ul>
+		</div>
+		
+		
+		<h3 class="info-title smaller" data-id="#custom/inline-editable.image">Image editable</h3>
+		<!-- #section:custom/inline-editable.image -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Image editable is based on <a href="#custom/file-input" class="help-more">custom file input</a>
+			</li>
+		 
+			<li>
+				You should do some extra work for uploading the image.
+				<br />
+				A working example is available at <code>examples/profile-update.html</code>.
+				<br />
+				The backend (server side) code is written in PHP at <code>examples/file-upload.php</code>.
+			</li>
+			
+			<li>
+				Inside <code>image</code> parapmeter which takes custom file input options,
+				there is also <code>on_error</code> and <code>on_success</code> callbacks that are called
+				when an invalid file is selected or if files are successfully selected.
+			</li>
+			
+			<li>
+				An example of image editable's usage:
+<pre data-language="javascript">
+//first let's add a fake appendChild for Image element for browsers that have a problem with this
+//because it seems that editable plugin calls appendChild, and it causes errors on IE at unpredicted points
+try {
+   document.createElement('IMG').appendChild(document.createElement('B'));
+} catch(e) {
+   Image.prototype.appendChild = function(el){}
+}
+
+$('#avatar').editable({
+  type: 'image',
+  name: 'avatar',
+  value: null,
+  image: {
+    name: 'avatar',//name should be here as well
+	
+    //custom file input options
+    btn_choose: 'Change Avatar',
+    droppable: true,
+    maxSize: 110000,//~100kb
+	
+    //inline editable callback option
+    on_error : function(error_type) {
+	  //invalid file selected, for example display an error message
+      if(error_type == 1) {
+        //file format error
+      } else if(error_type == 2) {
+        //file size rror
+      }
+      else {
+        //other error
+      }
+    },
+    on_success : function() {
+      //valid file selected, for example remove error messages
+    }
+  },
+  url: function(params) {
+    //actual file upload happens here
+    //see "examples/profile-avatar-update.js"
+  }
+});
+</pre>
+			</li>
+			
+			<li>
+				If you want the editable image displayed in edit mode at first, you can use something like this:
+<pre data-language="javascript">
+$('#avatar').editable('show').on('hidden', function(e, reason) {
+  if(reason == 'onblur') {
+     $('#avatar').editable('show');
+     return;
+  }
+  $('#avatar').off('hidden');
+})
+</pre>
+			</li>
+ 		 </ul>
+		</div>
+		<!-- /section:custom/inline-editable.image -->
+
+		
+		<h3 class="info-title smaller" data-id="#custom/inline-editable.slider">Slider</h3>
+		<!-- #section:custom/inline-editable.slider -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				For this addon 
+				<a href="#plugins/jquery.slider" class="help-more">jQuery UI</a>
+				is required and should be included first
+			</li>
+			<li>
+<pre data-language="javascript">
+$('#element').editable({
+   type : 'slider',
+   name : 'element-name',
+
+   //jQuery UI slider options
+   slider : {
+       min: 1,
+       max: 50,
+
+	 //and slider's width (default is 200)
+	 width: 100
+	 
+	 //,nativeUI: true //this will use browser's built-in range control if available
+   },
+   
+   success: function(response, newValue) {
+      alert(parseInt(newValue));
+   }
+});
+</pre>
+			</li>
+			
+			<li>
+				Using <code>nativeUI</code> option will switch to browser's built-in range control if available
+			</li>
+ 		 </ul>
+		</div>
+		<!-- /section:custom/inline-editable.slider -->
+		
+		
+		<h3 class="info-title smaller" data-id="#custom/inline-editable.spinner">Spinner</h3>
+		<!-- #section:custom/inline-editable.spinner -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				For this addon,
+				<a href="#plugins/fuelux.spinner" class="help-more">FuelUX spinner</a>
+				is required and should be included first
+			</li>
+			<li>
+<pre data-language="javascript">
+$('#element').editable({
+   type: 'spinner',
+   name: 'element-name',
+   
+   //spinner options
+   spinner : {
+      min: 16,
+      max: 99,
+     step: 1
+	 
+	 //,nativeUI: true //this will use browser's built-in number input if available
+   }
+});
+</pre>
+			</li>
+			
+			<li>
+				Using <code>nativeUI</code> option will switch to browser's built-in number input if available
+			</li>
+ 		 </ul>
+		</div>
+		<!-- /section:custom/inline-editable.spinner -->
+		
+		
+		
+		<h3 class="info-title smaller" data-id="#custom/inline-editable.wysiwyg">Wysiwyg</h3>
+		<!-- #section:custom/inline-editable.wysiwyg -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				For this addon <a href="#plugins/editor.wysiwyg" class="help-more">Wysiwyg plugin</a>
+				is required and should be included first
+			</li>
+			<li>
+<pre data-language="javascript">
+$('#element').editable({
+   mode: 'inline',
+   type: 'wysiwyg',
+   name: 'element-name',
+
+  //wysiwyg plugin options, such as buttons, etc
+  wysiwyg : {
+  
+    //optional max-width
+    //css : {'max-width':'300px'}
+  },
+  success: function(response, newValue) {
+  }
+});
+</pre>
+			</li>
+ 		 </ul>
+		</div>
+		<!-- /section:custom/inline-editable.wysiwyg -->
+		
+		
+		
+		
+		<h3 class="info-title smaller" data-id="#custom/inline-editable.date">Date</h3>
+		<!-- #section:custom/inline-editable.date -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Latest version of inline editable plugin does not support date picker
+			</li>
+			<li>
+				I added a custom one which requires
+				<a href="#plugins/date-time.datepicker" class="help-more">date picker</a>
+				and it should be included first.
+				<br />
+				The type name is <code>adate</code>
+			</li>
+			<li>
+<pre data-language="javascript">
+$('#element').editable({
+  type: 'adate',
+  
+  //datepicker plugin options
+  date: {
+        format: 'dd/mm/yyyy',
+    viewformat: 'dd/mm/yyyy',
+     weekStart: 1
+	 
+     //,nativeUI: true //this will use browser's built-in date picker if available
+  }
+})
+</pre>
+			</li>
+			
+			<li>
+				Using <code>nativeUI</code> option will switch to browser's built-in date picker if available
+			</li>
+ 		 </ul>
+		</div>
+		<!-- /section:custom/inline-editable.date -->
+		
+
+	</div>
+	<!-- /section:custom/inline-editable -->
+	
+</section>

src/main/webapp/static/ace/docs/sections/custom/onpage-help.html

@@ -0,0 +1,281 @@
+<section>
+	<h1 class="blue" data-id="#custom/onpage-help"><i class="ace-icon fa fa-desktop grey"></i> Onpage Help</h1>
+
+
+   <div class="alert alert-info">
+	<button class="close" data-dismiss="alert"><i class="ace-icon fa fa-times"></i></button>
+	<i class="ace-icon fa fa-exclamation-triangle"></i>
+	Please use the following info and demo's example to use Onpage Help in your own app.
+	<br />
+	It still may be confusing though, so if you need further help with that, just get in touch with me.
+   </div>
+
+	<div class="hr hr-double hr32"></div>
+
+	<!-- #section:custom/onpage-help -->
+	<div class="help-content">
+		<h3 class="info-title smaller">1. Overview</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Onpage Help is a feature of Ace admin template that allows users
+				to select an element or a section of a page and see more info about it without leaving the page.
+				<br />
+				For an example of this you can refer to
+				<a href="../html/index.html#help">Ace demo</a>
+				and click the black button on right of page.
+			</li>
+			
+			<li>
+				You can also use this feature in your app to provide help and instructions for users.
+			</li>
+ 		 </ul>
+		</div>
+		
+		
+		<h3 class="info-title smaller">2. Usage</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Help content can be retrieved from your own help files and it will be displayed inside a modal box in your
+				application.
+			</li>
+		 
+			<li>
+				To use onpage help you should build a custom Javascript file using JS builder tool and include
+				onpage help feature or you can directly include
+				<code>assets/js/ace/elements.onpage-help.js</code> file.
+			</li>
+
+			<li>
+				To initiate help you can call:
+<pre data-language="javascript">
+jQuery(function($) {
+  var help = new Onpage_Help({/* for available options, see below */});
+  $('#some-button').on('click', function() {
+	help.toggle();
+	//or help.enable()
+	//or help.disable()
+  })
+})
+</pre>
+			</li>
+			
+			<li>
+				Your application page should have special comments for special sections that have help material:
+<pre data-language="html">
+ <!-- #section:manage/user -->
+  Some elements are here which will show a help dialog when clicked!
+ <!-- /section:manage/user -->
+</pre>
+			</li>
+			
+			<li>
+				The help content is retrieved dynamically from a remote file that you specify.
+				<br />
+				That file should have similar comments like above:
+<pre data-language="html">
+ <!-- #section:manage/user -->
+  Documentation and help content for "manage/user" are here inside some file.
+ <!-- /section:manage/user -->
+</pre>
+				<br />
+				There should also be an element with <code>data-id="#manage/user"</code> attribute
+				which is used to specify modal box's title.
+				<br />
+				If no such element exists, its possible parent is looked up and if available its title is used for the modal box!
+			</li>
+			
+			<li>
+				If inside one documentation(help) page, there are several sections to be displayed in your application,
+				you should use "."(dot) character to separate them:
+<pre data-language="html">
+ <!-- #section:manage/user.edit -->
+  Manage user documentation is here
+ <!-- /section:manage/user.edit -->
+..
+..
+..
+ <!-- #section:manage/user.delete -->
+  Delete user documentation is here
+ <!-- /section:manage/user.delete -->
+</pre>
+			</li>
+			
+			<li>
+				Same is true for your application page:
+<pre data-language="html">
+ <!-- #section:manage/user.edit -->
+  <a href="#">Edit</a><!-- will display help dialog -->
+ <!-- /section:manage/user.edit -->
+..
+..
+..
+ <!-- #section:manage/user.delete -->
+   <a href="#">Delete</a><!-- will display help dialog -->
+ <!-- /section:manage/user.delete -->
+</pre>
+			</li>
+			
+			<li>
+				When user clicks on a help section to see its content, the name of section is passed
+				to "section_url" function in which you should return the url which contains relevant help material.
+				<br />
+				Please see next section for more info.
+			</li>
+			
+			<li>
+				If you have files with HTML, CSS, etc code that you want to show inside the modal help dialog,
+				you can wrap the path inside a <code>code</code> tag with <code>.open-file</code> class
+				and <code>data-open-file="css"</code> attribute:
+<pre data-language="html">
+ <code class="open-file" data-open-file="js">path/to/some/file.js</code>
+</pre>
+			</li>
+
+ 		 </ul>
+		</div>
+		
+		
+		<h3 class="info-title smaller">3. Options</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+			There are several options when initiating help.
+			</li>
+			<li><code>icon_1</code> Optional icon displayed inside a help section.
+				Default is 'fa fa-question'
+				<br />
+				<span class="thumbnail inline">
+					<img src="images/help-icon1.png" />
+				</span>
+			</li>
+			<li><code>icon_2</code> Optional icon displayed on top left of a help section.
+				Default is 'fa fa-lightbulb-o'
+				<br />
+				<span class="thumbnail inline">
+					<img src="images/help-icon2.png" />
+				</span>
+			</li>
+			<li><code>include_all</code>
+				Include all elements between two comments
+				or just the first and last one(might be slightly faster in some cases).
+				Default is true (include all):
+				<br />
+				<span class="thumbnail inline">
+					<img src="images/help-include-all.png" />
+				</span>
+			</li>
+			
+			<li><code>base</code> Optional path to documentation folder which you can use later in following callbacks to return content url.</li>
+			<li><code>section_url</code> Callback function which return a url to load the help content of a section.
+				<br />
+				For example when a help section which refers to "basics/sidebar.compact" is requested, you can use this
+				function to return the url to load which contains help content:
+<pre data-language="javascript">
+'section_url': function(section_name) {
+	//From Ace Demo's example
+   
+    //according to a section_name such as `basics/navbar.toggle` return the file url which contains help content
+    section_name = section_name || '';
+
+    //for example convert section_name=`basic/navbar.layout.brand` to `basic/navbar`
+    //because in Ace's documentation files 'basic/navbar.layout.brand' section is inside `basic/navbar.html` file
+    var url = section_name.replace(/\..*$/g, '');
+
+    var parts = url.split('/');
+    if(parts.length == 1) {
+        //for example convert `changes` to `changes/index.html`
+        if(url.length == 0) url = 'intro';//or convert `empty string` to `intro/index.html`
+        url = url + '/index.html';
+    }
+    else if(parts.length > 1) {
+        //for example convert `basics/navbar.layout` to `basics/navbar.html`
+        url = url + '.html';
+    }
+    return this.settings.base + '/docs/sections/' + url;
+}
+</pre>
+			</li>
+			<li><code>file_url</code> Similar to above callback. This function is used when a file (which contains code snippets) is to be loaded.</li>
+			<li><code>img_url</code> Similar to above callbacks. When inserting images into DOM, the url may need to be updated.</li>
+		
+			<li><code>code_highlight</code> Used for syntax highlighting code snippets.
+				<br />
+				Currently if Rainbow.js or Prism.js libraries are available, they will be used for highlighting.
+			</li>
+
+			
+			<li><code>before_enable</code> Optional callback to make some changes before help is enabled.
+				<br />
+				For example in Ace's demo, when help is enabled, we unfix navbar, sidebar, etc,
+				because when an element is fixed or is inside a fixed parent,
+				it will need a fixed help box above it and it becomes unnecessarily complex.
+			</li>
+			<li><code>after_enable</code> Optional callback to make some changes after help is enabled</li>
+			<li><code>before_disable</code> Optional callback to make some changes before help is disabled</li>
+			<li><code>after_disable</code> Optional callback to make some changes after help is disabled.
+				<br />
+				For example in Ace's demo, we restore fixed state of previously unfixed navbar, etc.
+			</li>
+			
+			<li><code>add_panels</code> Separate &amp; wrap help content inside panels like image below.
+			Default is true.
+			<br />
+				<span class="thumbnail">
+					<img src="images/help-panels.png" />
+				</span>
+			</li>
+			<li><code>panel_content_selector</code> Use this selector to find and separate contents and wrap them inside panels</li>
+			<li><code>panel_content_title</code> Use this selector to find the title for each panel. Should come before relevant 'panel_content_selector'</li>
+		</ul>
+	  </div>
+	  
+	  
+	  <h3 class="info-title smaller">4. Example</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				For an example of using Onpage Help in your application, you can see 
+				<a href="../html/index.html#help">Ace's demo pages</a>
+			</li>
+			
+			<li>
+				The code that initiates help is inside
+				<code>assets/js/ace/ace.onpage-help.js</code>
+				and has comments and explanations.
+			</li>
+			
+			<li>
+				For Ace's demo there is also an extra style file which is
+				<code>assets/css/ace.onpage-help.css</code>.
+				<br />
+				It is used for styling the black help button and you don't need it.
+			</li>
+			
+			<li>
+				Also, "Rainbow.js" files are include for syntax highlighting.
+				<br />
+				You don't need them if your help content doesn't make use of it.
+			</li>
+			
+			<li>
+				The help content is retrieved from <code>docs/sections</code> folder.
+			</li>
+			
+			<li>
+				Inside Ace's demo, help is initiated when "#help" is appended to url and
+				a black button on right side of page is shown which enables/disables help.
+				<br />
+				You should use your own approach.
+				<br />
+				Perhaps a button inside navbar or sidebar which enables or disables help.
+			</li>
+ 		 </ul>
+		</div>
+		
+		
+	</div>
+	<!-- /section:custom/onpage-help -->
+	
+</section>

src/main/webapp/static/ace/docs/sections/custom/scrollbar.html

@@ -0,0 +1,384 @@
+<section>
+	<h1 class="blue" data-id="#custom/scrollbar"><i class="ace-icon fa fa-desktop grey"></i> Scrollbars</h1>
+
+	<div class="hr hr-double hr32"></div>
+
+	<!-- #section:custom/scrollbar -->
+	<div class="help-content">
+		<h3 class="info-title smaller">1. Scrollbars</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Trying different scrollbar plugins,
+				I wasn't able to find a lightweight and easy to use one,
+				which is also touch friendly.
+				<br />
+				So I thought it's better to make one.
+				<br />
+				It's minimal but should be enough for most cases.
+				<br />
+				You can also use other more advanced plugins if necessary. There should be no conflicts.
+			</li>
+			<li>
+				Here is a simple snippet which add vertical scrollbars to an element and limits its size to 400:
+<pre data-language="javascript">
+ $('#my-content').ace_scroll({size: 400});
+</pre>
+			</li>
+ 		 </ul>
+		</div>
+		
+		<h3 class="info-title smaller">2. Options</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+					<li>
+						<code>size</code> which is 200px by default
+<pre data-language="javascript">
+ $('#my-content').ace_scroll({size: 400});
+</pre>
+
+					You can also specify size using <code>data-size</code> attribute:
+<pre data-language="html">
+<div id="my-content" data-size="300">
+   ...
+</div>
+</pre>
+					</li>
+					<li>
+						<code>horizontal</code> default=false. If true, horizontal scrollbars will be added
+<pre data-language="javascript">
+$('#my-content').ace_scroll({horizontal: true});
+</pre>
+					</li>
+					
+					<li><code>mouseWheel</code> default=true. Scrolls content on mouse wheel event. When end of content is reached, mouse wheel event will be propagated to window</li>
+					<li>
+						<code>mouseWheelLock</code> default=false. If true and we have reached end of scrolling on our element, mouse wheel event won't be propagated to window
+						<br />
+						<code>lockAnyway</code> default=false. If true, even if scrollbars are not needed and are not visible yet, mouse wheel event won't be propagated to window
+						<br />
+<pre data-language="javascript">
+ $('#my-content').ace_scroll({size: 300, mouseWheelLock: true});
+</pre>
+					</li>
+					
+					
+					<li><code>styleClass</code> additional style classes you can add to scrollbars. See next section for more info.</li>
+					
+					<li>
+						<code>hoverReset</code> default=true, because of window size changes and other document layout changes,
+						content sizes may change and we may need to reset scrollbar size.
+						<br />
+						It can be done on mouseenter event, which is set to true by default.
+					</li>
+					
+					<li>
+						<code>reset</code> default=false. If true, content will be scrolled to 0, on initialization.
+						<br />
+						Does not work when the element is hidden at first.
+					</li>
+						
+					<li>
+						<code>dragEvent</code> default=false. If true an event will be triggered when
+						user starts dragging scrollbars using mouse.
+					</li>
+					
+					<li>
+						<code>scrollEvent</code> default=false. If true an event will be triggered when
+						content is scrolled.
+					</li>
+
+					<li>
+						<code>touchDrag</code> default=true, which adds touch drag event for touch devices.
+					</li>
+					
+					<li>
+						<code>hideOnIdle</code> will hide scrollbars when user is not scrolling content
+						<br />
+						You may also want to use <code>hideDelay</code> which specifies time before hiding scrollbars
+						and also <code>observeContent</code> which specifies whether content and scrollbar size
+						should be reset before making it visible:
+<pre data-language="javascript">
+ $('#my-content').ace_scroll({
+    //other options
+    hideOnIdle: true,
+    hideDelay: 1500,
+    observeContent: true
+});
+</pre>
+					</li>
+					<!--
+					<li>
+						<code>touchSwipe</code> default=false, which adds touch swipe event instead of drag event.
+					</li>
+					-->
+ 		 </ul>
+		</div>
+		
+		
+		<h3 class="info-title smaller">3. Styles</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Some additional classes you can add using <code>styleClass</code> option:
+				<ol>
+					<li><code>scroll-margin</code> which add 1px space between content and scrollbars</li>
+					<li><code>scroll-left</code> shows scrollbars on left instead of right</li>
+					<li><code>scroll-top</code> shows horizontal scrollbars on top instead of bottom</li>
+					<li><code>scroll-dark</code> darker scrollbars</li>
+					<li><code>scroll-light</code> lighter scrollbars</li>
+					<li><code>no-track</code> hides scroll track</li>
+					<li><code>scroll-visible</code> scrollbars always visible</li>
+					<li><code>scroll-thin</code> thinner scrollbars</li>
+					<li><code>scroll-chrome</code> similar to latest version of Google Chrome scrollbars </li>
+				</ol>
+			</li>
+			
+			<li>
+<pre data-language="javascript">
+ $('#my-content').ace_scroll({
+    size: 300,
+    styleClass: 'scroll-dark scroll-left scroll-thin'
+ });
+</pre>
+			</li>
+ 		 </ul>
+		</div>
+		
+		
+		
+		<h3 class="info-title smaller">4. Events</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				If you set <code>scrollEvent</code> to true, a scroll event will be triggered when element is scrolled:
+<pre data-language="javascript">
+ $('#my-content')
+ .ace_scroll({
+    scrollEvent: true
+ })
+ .on('scroll', function() {
+    //element scrolled
+ });
+</pre>
+			
+			But it's better to listen to the inner content's native scroll event:
+<pre data-language="javascript">
+ $('#my-content').find('.scroll-content').on('scroll', function() {
+    //element scrolled
+ });
+</pre>
+			</li>
+			
+			<li>
+				If you set <code>dragEvent</code> to true, some drag events will be triggered when scrollbars are dragged:
+<pre data-language="javascript">
+ $('#my-content')
+ .ace_scroll({
+    dragEvents: true
+ })
+ .on('drag.start', function() {
+    //started dragging
+ })
+ .on('drag._end', function() {
+    //ended dragging
+ })
+</pre>
+			</li>
+ 		 </ul>
+		</div>
+		
+		
+		<h3 class="info-title smaller" data-id="#custom/scrollbar.touch-drag">5. Touch Drag Event</h3>
+		<!-- #section:custom/scrollbar.touch-drag -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				There is also a custom touch drag event specifically for use on scrollbars.
+				<br />
+				You can use it with other elements as well, though I recommend a more advanced library such as
+				<b>Hammer.js</b>
+			</li>
+			
+			<li>
+				You can use it like this:
+<pre data-language="javascript">
+$('#some-element').on('ace_drag', function(event) {
+  //var dir = event.direction;// up down left right
+  //var distanceX = event.dx 
+  //var distanceY = event.dy
+})
+</pre>
+			</li>
+ 		 </ul>
+		</div>
+		<!-- /custom/scrollbar.touch-drag -->
+
+	
+
+		<h3 class="info-title smaller">6. Functions</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				The following functions are available for scroller plugin:
+				<ol>
+					<li><code>reset</code> resets scrollbar size</li>
+					<li><code>disable</code> disables scrollbars</li>
+					<li><code>enable</code> enables scrollbars</li>
+					<li><code>end</code> scroll to end</li>
+					<li><code>start</code> scroll to start</li>
+					<!--
+					<li><code>destroy</code> destroys scrollbars</li>
+					-->
+					<li><code>update</code> updates an option (currently only size, style and mousewheel options)</li>
+					<!--
+					<li><code>modify</code> updates options and recreates scrollbars</li>
+					-->
+				</ol>
+			</li>
+			
+			<li>
+<pre data-language="javascript">
+$('#my-content').ace_scroll('reset');
+$('#my-content').ace_scroll('disable');
+
+$('#my-content').ace_scroll('update', {size: 250});
+$('#my-content').ace_scroll('modify', completely_new_options);
+</pre>
+			</li>
+ 		 </ul>
+		</div>
+
+
+		<h3 class="info-title smaller" data-id="#custom/scrollbar.horizontal">7. Horizontal</h3>
+		<!-- #section:custom/scrollbar.horizontal -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Horizontal scrollbars can be created by specifying <code>horizontal</code> option:
+<pre data-language="javascript">
+$('#my-content').ace_scroll({
+    horizontal: true,
+    size: 600,
+    styleClass: 'scroll-top',
+    mouseWheelLock: true
+});
+</pre>
+			</li>
+			
+			<li>
+				Sometimes you may need to add some padding to the element if scrollbars appear above content:
+<pre data-language="javascript">
+$('#my-content').ace_scroll({
+    horizontal: true,
+    //options here
+}).css('padding-top', 15);
+</pre>
+			</li>
+			
+			<li>
+				If you are using RTL (right to left) direction,
+				please note that horizontal scrolling is inconsistent between browsers.
+				<br />
+				So it's better to change scrollbars to LTR and make the content RTL again.
+				<br />
+				You can use <code>.make-ltr</code> and <code>.make-rtl</code> classes:
+				<br />
+				
+<pre data-language="javascript">
+ $('#my-content').addClass('make-ltr')
+ .find('.scroll-content').wrapInner('&lt;div class="make-rtl" /&gt;');
+</pre>
+			</li>
+			
+			Or statically inside your HTML:
+<pre data-language="html">
+ <div id="my-content" class="make-ltr">
+   <div class="make-rtl">
+     ...
+   </div>
+ </div>
+</pre>
+<pre data-language="javascript">
+$('#my-content').ace_scroll({
+    horizontal: true,
+    //other options here
+})
+</pre>
+			</li>
+
+ 		 </ul>
+		</div>
+		<!-- /section:custom/scrollbar.horizontal -->
+
+		
+		
+		<h3 class="info-title smaller" data-id="#custom/scrollbar.sidebar">8. Sidebar Scrollbars</h3>
+		<!-- #section:custom/scrollbar.sidebar -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				You can also use scrollbar for sidebar whether it's fixed or not.
+			</li>
+			
+			<li>
+				I have used two approaches for sidebar
+			</li>
+			
+			<li>
+				The first one which is used by default, does not use <code>overflow:hidden</code> and
+				can be used only on fixed sidebar.
+				<br />
+				The advantage is that .hover submenus or mininized sidebar can also have scrollbars and
+				submenus will be shown outside of sidebar area without problem.
+			</li>
+			
+			</li>
+				Second one uses real scrollbars and has <code>overflow:hidden</code> applied to it.
+				<br />
+				It can be used on both normal and fixed sidebar.
+				<br />
+				To enable it you should <a href="../build/js.html">build a custom JS</a> using 2nd sidebar scrollbar style.
+			</li>
+			
+			<li>
+				Each one has several options which you can edit inside:
+				<ol>
+					<li><code>assets/js/ace/ace.js</code></li>
+					<li><code>assets/js/ace.js</code></li>
+					<li><code>dist/js/ace.min.js</code></li>
+				</ol>
+				<br />
+				Look for <code>sidebar_scrollable</code> and change options as needed.
+			</li>
+			
+			<li>
+				Options for first style (fixed sidebar only):
+				<ol>
+				  <li><code>scroll_to_active</code> If true, sidebar will be scrolled down to show active menu item on page load</li>
+				  <li><code>include_shortcuts</code> If true, shortcuts will also be inside scroll area. Otherwise it will be above scroll area</li>
+				  <li><code>include_toggle</code> If true, sidebar toggle(minimize button) will also be inside scroll area. Otherwise it will be below scroll area</li>
+				  <li><code>smooth_scroll</code> If true, sidebar scrolling will be smooth using CSS3 transition</li>
+				  <li><code>outside</code> If true, scrollbar will be outside of scroll area</li>
+				</ol>
+			</li>
+			
+			<li>
+				Options for secod style (normal/fixed sidebar):
+				<ol>
+				  <li><code>only_fixed</code> If true, scrollbars will be enabled for fixed sidebar only</li>
+				  <li><code>scroll_to_active</code> If true, sidebar will be scrolled down to show active menu item on page load</li>
+				  <li><code>include_shortcuts</code> If true, shortcuts will also be inside scroll area. Otherwise it will be above scroll area</li>
+				  <li><code>include_toggle</code> If true, sidebar toggle(minimize button) will also be inside scroll area. Otherwise it will be below scroll area</li>
+				</ol>
+			</li>
+			
+ 		 </ul>
+		</div>
+		<!-- /section:custom/scrollbar.sidebar -->
+		
+		
+	</div>
+	<!-- /section:custom/scrollbar -->
+	
+</section>

src/main/webapp/static/ace/docs/sections/custom/widget-box.html

@@ -0,0 +1,488 @@
+<section>
+	<h1 class="blue" data-id="#custom/widget-box"><i class="ace-icon fa fa-desktop grey"></i> Widget Box</h1>
+
+	<div class="hr hr-double hr32"></div>
+
+	<!-- #section:custom/widget-box -->
+	<div class="help-content">
+		<h3 class="info-title smaller">1. Widget Box</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				<div class="well">
+					<i class="ace-icon fa fa-hand-o-right"></i>
+					Please note that widget box title should now have <code>.widget-title</code> class.
+					<br />
+					Also widget color options
+					are now applied to the box, not header.
+					<br />
+					For example <code>.widget-header.header-color-blue</code> becomes
+					<code>.widget-box.widget-color-blue</code>
+				</div>
+			</li>
+		 
+			<li>
+				Widget box consists of <b>header</b> and <b>body</b>.
+<pre data-language="html">
+ <div class="widget-box">
+   <div class="widget-header"></div>
+   <div class="widget-body"></div>
+ </div>
+</pre>
+			</li>
+ 		  </ul>
+		</div>
+		
+		
+		
+		<h3 class="info-title smaller" data-id="#custom/widget-box.options">2. Widget Box Options</h3>
+		<!-- #section:custom/widget-box.options -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				You can use following classes for a different widget box color:
+				<ol>
+					<li><code>.widget-color-blue</code></li>
+					<li><code>.widget-color-blue2</code></li>
+					<li><code>.widget-color-blue3</code></li>
+					<li><code>.widget-color-green</code></li>
+					<li><code>.widget-color-green2</code></li>
+					<li><code>.widget-color-green3</code></li>
+					<li><code>.widget-color-red</code></li>
+					<li><code>.widget-color-red2</code></li>
+					<li><code>.widget-color-red3</code></li>
+					<li><code>.widget-color-yellow</code></li>
+					<li><code>.widget-color-purple</code></li>
+					<li><code>.widget-color-pink</code></li>
+					<li><code>.widget-color-dark</code></li>
+					<li><code>.widget-color-grey</code></li>
+				</ol>
+<pre data-language="html">
+ <div class="widget-box widget-color-blue">
+  ...
+ </div>
+</pre>
+
+			</li>
+			<li>
+				<!-- #section:custom/widget-box.options.transparent -->
+				Add <code>.transparent</code> for transparent widget box:
+<pre data-language="html">
+ <div class="widget-box transparent">
+  ...
+ </div>
+</pre>
+				<!-- /section:custom/widget-box.options.transparent -->
+			</li>
+			
+			<li>
+				Add <code>.light-border</code> for light widget body border:
+<pre data-language="html">
+ <div class="widget-box widget-color-dark light-border">
+  ...
+ </div>
+</pre>
+			</li>
+			
+			<li>
+				<!-- #section:custom/widget-box.options.collapsed -->
+				Add <code>.collapsed</code> for widget box to be collapsed by default:
+<pre data-language="html">
+ <div class="widget-box collapsed">
+  ...
+ </div>
+</pre>
+				<!-- /section:custom/widget-box.options.collapsed -->
+			</li>
+ 		  </ul>
+		</div>
+		<!-- /section:custom/widget-box.options -->
+
+	
+		<h3 class="info-title smaller" data-id="custom/widget-box.toolbar">3. Widget Header</h3>
+		<!-- #section:custom/widget-box.toolbar -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Header consists of title and toolbar(optional action buttons):
+<pre data-language="html">
+ <div class="widget-header">
+   <h4 class="widget-title smaller">title!</h4>
+   <div class="widget-toolbar"></div>
+ </div>
+</pre>
+			</li>
+			
+			<li>
+			  <h3 class="hidden" data-id="#custom/widget-box.header.options">Widget Header</h3>
+			  <!-- #section:custom/widget-box.header.options -->
+			  <ol>
+				<li><code>.widget-header-small</code> makes <code>.widget-header</code> smaller</li>
+				<li><code>.widget-header-large</code> makes <code>.widget-header</code> larger</li>
+				<li><code>.widget-header-flat</code> disables gradient background on <code>.widget-header</code></li>
+			  </ol>
+<pre data-language="html">
+<div class="widget-header widget-header-small widget-header-flat">
+</div>
+</pre>
+				<!-- /section:custom/widget-box.header.options -->
+			</li>
+			
+			<li>
+				Widget toolbar consists of buttons with custom icons and elements.
+<pre data-language="html">
+ <div class="widget-toolbar">
+   <a data-action="settings" href="#"><i class="ace-icon fa fa-bars"></i></a>
+   <a data-action="reload" href="#"><i class="ace-icon fa fa-refresh"></i></a>
+   <a data-action="fullscreen" class="orange2" href="#"><i class="ace-icon fa fa-expand"></i></a>
+   <a data-action="collapse" href="#"><i class="ace-icon fa fa-chevron-up"></i></a>
+   <a data-action="close" href="#"><i class="ace-icon fa fa-times"></i></a>
+ </div>
+</pre>
+			</li>
+			
+			<li>
+				Current action buttons that trigger an event and perform an action are:
+				<ol>
+					<li><code>settings</code></li>
+					<li><code>reload</code></li>
+					<li><code>fullscreen</code></li>
+					<li><code>collapse</code></li>
+					<li><code>close</code></li>
+				</ol>
+				Please refer to widget events section for more info.
+			</li>
+			
+			<li>
+				For <code>data-action="collapse"</code> button, you can change collapsed/expanded icons by
+				specifying icon's <code>data-icon-show</code> & <code>data-icon-hide</code> attributes:
+<pre data-language="html">
+  <a data-action="collapse" href="#">
+    <i class="ace-icon fa fa-minus" data-icon-show="fa-plus" data-icon-hide="fa-minus"></i>
+  </a>
+</pre>
+			Also, if you specify any icon with <code>-up</code> or <code>-down</code> in its name, it will be automatically flipped.
+			<div class="space-4"></div>
+			
+			You can also add <code>.collapsed</code> class to <code>.widget-box</code> to become collapsed by default.
+			</li>
+			
+			<li>
+				You can have multiple toolbars in widget header:
+<pre data-language="html">
+<div class="widget-header">
+ <h4 class="widget-title"></h4>
+
+ <div class="widget-toolbar no-border"></div>
+ <div class="widget-toolbar"></div>
+</div>
+</pre>
+
+				<code>.no-border</code> class on a <code>.widget-toolbar</code> hides its border.
+			</li>
+			
+
+			
+			<li>
+				To have a dropdown menu inside widget toolbar,
+				you should wrap the action button and menu inside a <code>.widget-menu</code> element:
+<pre data-language="html">
+ <div class="widget-toolbar">
+
+    <a data-action="reload" href="#"><i class="ace-icon fa fa-refresh"></i></a>
+
+    <div class="widget-menu">
+      <a data-toggle="dropdown" data-action="settings" href="#"><i class="ace-icon fa fa-bars"></i></a>
+      <ul class="dropdown-menu dropdown-menu-right dropdown-light-blue dropdown-caret dropdown-closer">
+         <li><a href="#dropdown1" data-toggle="tab">Option#1</a></li>
+         <li><a href="#dropdown2" data-toggle="tab">Option#2</a></li>
+      </ul>
+    </div>
+
+ </div>
+</pre>
+			</li>			
+			
+			<li>
+				<!-- #section:custom/widget-box.tabbed -->
+				To have tabs in widgets, you should put the <code>ul.nav-tabs</code> element inside <code>.widget-toolbar</code>
+				and <code>.tab-content</code> should be inside widget body's <code>.widget-main</code>:
+<pre data-language="html">
+ <div class="widget-header widget-header-small">
+   <h5 class="widget-title">Tabbed</h5>
+   <div class="widget-toolbar no-border">
+      <ul id="myTab" class="nav nav-tabs">
+         <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
+         <li><a href="#profile" data-toggle="tab">Profile</a></li>
+         <li><a href="#info" data-toggle="tab">Info</a></li>
+      </ul>
+   </div>
+ </div>
+ 
+ <div class="widget-body">
+   <div class="widget-main">
+	<!-- tab content here -->
+   </div>
+ </div>
+ 
+</pre>
+			<!-- /section:custom/widget-box.tabbed -->
+			</li>
+		</ul>
+	  </div>
+	  <!-- /section:custom/widget-box.toolbar -->
+
+	  
+	  <h3 class="info-title smaller">4. Widget Body</h3>
+	  <div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Widget box consists of <b>header</b> and <b>body</b>.
+<pre data-language="html">
+ <div class="widget-box">
+   <div class="widget-header"></div>
+   <div class="widget-body"></div>
+ </div>
+</pre>
+			</li>
+			
+			<li>
+				<code>.widget-body</code> consists of <code>.widget-main</code>
+				and optional toolboxes <code>.widget-toolbox</code>
+<pre data-language="html">
+<div class="widget-body">
+  <div class="widget-toolbox"> ... </div>
+
+  <div class="widget-main"> ... </div>
+
+  <div class="widget-toolbox padding-8"> ... </div>
+</div>
+</pre>
+			</li>
+			
+			<li>
+				<code>.widget-main</code> and <code>.widget-toolbox</code>
+				can have the following padding classes:
+				<ul>
+					<li><code>.no-padding</code></li>
+					<li><code>.padding-2</code></li>
+					<li><code>.padding-4</code></li>
+					<li>...</li>
+					<li><code>.padding-30</code></li>
+					<li><code>.padding-32</code></li>
+				</ul>
+				
+				For example when putting a table inside widget box
+				you may want to use <code>.no-padding</code>
+				
+<pre data-language="html">
+<div class="widget-body">
+  <div class="widget-main no-padding">
+  
+    <table class="table table-striped table-bordered table-hover">
+      <thead class="thin-border-bottom">
+      </thead>
+	  
+      <tbody>
+      </tbody>
+    </table>
+	
+  </div>
+</div>
+</pre>
+			</li>
+			
+			<li>
+				<!-- #section:custom/widget-box.toolbox -->
+				<code>.widget-toolbox</code> can be before or after <code>.widget-main</code>
+<pre data-language="html">
+<div class="widget-toolbox">
+ <div class="btn-toolbar">
+  ...
+ </div>
+</div>
+
+<div class="widget-main">
+ ...
+</div>
+
+<div class="widget-toolbox padding-8 clearfix">
+   <button class="btn btn-xs btn-danger pull-left">
+      <i class="ace-icon fa fa-times"></i>
+      I don't accept
+   </button>
+   <button class="btn btn-xs btn-success pull-right">
+      I accept
+      <i class="ace-icon fa fa-arrow-right icon-on-right"></i>
+   </button>
+</div>
+</pre>
+				<hr />
+				Add <code>.toolbox-vertical</code> to <code>.widget-toolbox</code> for vertical toolbox
+
+				<!-- /section:custom/widget-box.toolbox -->
+			</li>
+			
+ 		  </ul>
+		</div>
+
+
+
+		<h3 class="info-title smaller">5. Functions & Events</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				The following functions are available for widgets:
+				<ol>
+					<li><code>close</code></li>
+					<li><code>toggle</code></li>
+					<li><code>hide</code></li>
+					<li><code>show</code></li>
+					<li><code>reload</code></li>
+					<li><code>fullscreen</code></li>
+				</ol>
+				
+<pre data-language="html">
+ <div class="widget-box" id="my-widget">
+  ....
+ </div>
+</pre>
+
+<pre data-language="javascript">
+ $('#my-widget').widget_box('toggle');
+ $('#my-widget').widget_box('show');
+ $('#my-widget').widget_box('close');
+ $('#my-widget').widget_box('reload');
+</pre>
+			</li>
+			
+			<li>
+				The following events are triggered when using widgets:
+				<br />
+				<b>Before Events:</b>
+				<ol>
+					<li><code>show.ace.widget</code> triggered before a widget box is shown</li>
+					<li><code>hide.ace.widget</code> triggered before a widget box is hidden</li>
+					<li><code>close.ace.widget</code> triggered before a widget box is closed</li>
+					<li><code>reload.ace.widget</code> triggered before a widget box is reloaded</li>
+					<li><code>fullscreen.ace.widget</code> triggered before a widget box is fullscreen</li>
+					<li><code>setting.ace.widget</code> triggered before a widget box is fullscreen</li>
+				</ol>
+				
+				<b>After Events:</b>
+				<ol>
+					<li><code>shown.ace.widget</code> triggered after a widget box is shown</li>
+					<li><code>hidden.ace.widget</code> triggered after a widget box is hidden</li>
+					<li><code>closed.ace.widget</code> triggered after a widget box is closed</li>
+					<li><code>reloaded.ace.widget</code> triggered after a widget box is reloaded</li>
+					<li><code>fullscreened.ace.widget</code> triggered after a widget box is fullscreened</li>
+				</ol>
+			</li>
+			
+			<li>
+				With "before events" you can cancel an action.
+				<br />
+			For example when you are waiting for remote content to arrive, you can cancel "close" events:
+<pre data-language="javascript">
+ $('#my-widget').on('close.ace.widget reload.ace.widget', function(event) {
+    if(waitingForContent) {
+       event.preventDefault();//action will be cancelled, widget box won't close
+    }
+ });
+</pre>
+			</li>
+			
+			<li>
+				With "after events" you can do some action after its finished:
+<pre data-language="javascript">
+ $('#my-widget').on('shown.ace.widget', function(event) {
+    //$(this).doSomething();
+ });
+</pre>
+			</li>
+			
+			<li>
+				<code><span class="blue">reload</span>.ace.widget</code> can be used to load remote content.
+				<br />
+				When data is ready, you can trigger <code><span class="green">reloaded</span>.ace.widget</code>:
+<pre data-language="javascript">
+ $('#my-widget').on('reload.ace.widget', function(ev) {
+   $.ajax({url: 'remote-data.php'}).done(function(content) {
+     //use content
+     //when ready ...
+     $('#my-widget').trigger('reloaded.ace.widget');
+   });
+ });
+</pre>
+			</li>
+			
+			<li>
+				<code>setting.ace.widget</code> event does not have an "after" event.
+				<br />
+				You can use it to be notified when "settings" button is clicked and show a dialog:
+<pre data-language="javascript">
+ $('#my-widget').on('setting.ace.widget', function(ev) {
+   //launch a modal (settings box) or other appropriate action
+ });
+</pre>
+			</li>
+			
+ 		  </ul>
+		</div>
+		
+
+		
+		
+		<h3 class="info-title smaller">7. Widget Drag & Drop</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Using jQuery UI, you can add drag & drop functionality to widget boxes or any other set of elements:
+<pre data-language="html">
+<div class="row">
+
+ <div class="col-sm-6 widget-container-col">
+   <div class="widget-box">
+   ...
+   </div>
+ </div>
+
+ <div class="col-sm-6 widget-container-col">
+   <div class="widget-box">
+   ...
+   </div>
+ </div>
+
+</div>
+</pre>
+
+<pre data-language="javascript">
+ $('.widget-container-col').sortable({
+    connectWith: '.widget-container-col',
+    items: '> .widget-box',
+    opacity: 0.8,
+    revert: true,
+    forceHelperSize: true,
+    placeholder: 'widget-placeholder',
+    forcePlaceholderSize: true,
+    tolerance: 'pointer',
+    start: function(event, ui){
+        //when an element is moved, its parent (.widget-container-col) becomes empty with almost zero height
+        //we set a "min-height" for it to be large enough so that later we can easily drop elements back onto it
+        ui.item.parent().css({'min-height': ui.item.height()})
+    },
+    update: function(event, ui) {
+        //the previously set "min-height" is not needed anymore
+        //now the parent (.widget-container-col) should take the height of its child (.wiget-box)
+        ui.item.parent({'min-height':''})
+    }
+ });
+</pre>
+			</li>
+ 		  </ul>
+		</div>
+	
+	</div>
+	<!-- /section:custom/widget-box -->
+	
+</section>

src/main/webapp/static/ace/docs/sections/files/css.html

@@ -0,0 +1,405 @@
+<section>
+	<h1 class="blue" data-id="#files/css"><i class="ace-icon fa fa-file-o grey"></i> CSS/LESS Files</h1>
+	<hr />
+
+	<!-- #section:files/css -->
+	<div class="help-content">
+		<h3 class="info-title smaller" data-id="#files/css.bootstrap">1. Bootstrap</h3>
+		<!-- #section:files/css.bootstrap -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Bootstrap's LESS files are not included in the package except for the following:
+				<br />
+				<code><span class="brief-show">assets/css/less/bootstrap/</span>variables.less</code> 
+				<code><span class="brief-show">assets/css/less/bootstrap/</span>mixins.less</code>
+			</li>
+			<li>
+				I have modified Bootstrap's CSS file slightly so it's different
+				from original files you download from official site.
+			</li>
+			<li>
+				But you can use original Bootstrap CSS file without problem.
+				<br />
+				Just remember to replace Ace's version of Bootstrap variables file located at
+				<code>assets/css/less/bootstrap/variables.less</code>
+				with original Bootstrap variables that you download,
+				and re-compile Ace's LESS files into CSS again.
+			</li>
+				
+			<li>
+				Specifically, I have changed <code>@gutterWidth</code> from <b>30</b> to <b>24</b>
+				and changed <code>@grid-float-breakpoint-max</code> from <b>@screen-sm-min</b><i>(768px)</i> to <b>@screen-md-min</b><i>(992px)</i>.
+			</li>
+			
+			<li>
+				The result is that with default Bootstrap, mobile menu will be visible when window width is less than <code>768px</code>
+				but now it's been modified to <code>992px</code>.
+				<br />
+				And it's fine as most desktop browsers are wider than <code>1000px</code>.
+			</li>
+
+			<!--
+			<li>
+				<div class="space-8"></div>
+				I have also modified <code>mixins.less</code> to reduce the number of floating point digits.
+				<br />
+				So for example:
+<pre data-language="css">
+.col-xs-10 {
+  width: 83.33333333%;
+}</pre>
+has been changed to:
+<pre data-language="css">
+.col-xs-10 {
+  width: 83.3333%;
+}</pre>
+			</li>
+-->
+			
+
+		 </ul>
+		</div>
+		<!-- /section:files/css.bootstrap -->
+
+
+		<h3 class="info-title smaller" data-id="#files/css.third">2. Third party</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Third party plugin CSS files are inside
+				<code>assets/css/</code> folder.
+			</li>
+			<li>
+				Minified version is find inside <code>dist/css/</code> folder.
+			</li>
+		 </ul>
+		</div>
+
+
+		
+		<h3 class="info-title smaller" data-id="#files/css.less">3. Ace LESS</h3>
+		<!-- #section:files/css.less -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Ace's main CSS file (<code>ace.css</code> or <code>ace.min.css</code>) is generated by compiling LESS files.
+			</li>
+			<li>
+				You can find LESS files here <code>assets/css/less</code>
+				and compile them into CSS using <b>Node.js</b> and  <b>LESS</b> compiler using the following command:
+				<br />
+				<code>lessc <span class="green">ace.less</span> ../ace.css</code>
+				<br />
+				or
+				<br />
+				<code>lessc <span class="green">ace.less</span> <b class="blue">--clean-css</b> ../ace<b class="blue">.min</b>.css</code>
+			</li>
+			
+			<li>
+				Main less file is:
+				<br />
+				<code data-open-file="css" class="open-file"><span class="brief-show">assets/css/less/</span>ace.less</code>
+			</li>
+			<li>
+				Variable files are:
+				<br />
+				<code data-open-file="css" class="open-file"><span class="brief-show">assets/css/less/</span>variables.less</code>
+				<br />
+				<code data-open-file="css" class="open-file"><span class="brief-show">assets/css/less/</span>fonts.less</code>
+				<br />
+				and
+				<br />
+				<code data-open-file="css" class="open-file"><span class="brief-show">assets/css/less/</span>ace-features.less</code>
+				<br />
+				which enables feature selection.				
+			</li>
+			
+			<li>
+				<div class="alert alert-info">
+					If you don't have Node.js installed, you can download it here:
+					<a href="http://nodejs.org/download/">http://nodejs.org/download/</a>
+					<br />
+					Then you should install less compiler using the following command:
+					<br />
+					<code>npm install -g less</code>
+				</div>
+			</li>
+		 </ul>
+		</div>
+		<!-- /section:files/css.less -->
+
+
+		
+		<h3 class="info-title smaller" data-id="#files/css.css">4. Ace CSS</h3>
+		<!-- #section:files/css.css -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Ace's main CSS file is generated by compiling LESS files into CSS:
+				<br />
+				<code>lessc ace.less ../ace.css</code>
+				<br />
+			</li>
+			<li>
+				But there is also:
+				<ul class="list-unstyled info-list">
+					<li>
+						<code>ace-ie.css</code> which has some rules for IE9 and below and should be included for IE only using conditional comments:
+<pre class="light-green">
+&lt;!--[if lte IE <span class="light-red bolder">9</span>&gt;
+&lt;link rel="stylesheet" href="<span class="purple bolder">path/to/assets/<span class="light-blue">ace-ie.css</span></span>" /&gt;
+&lt;![endif]--&gt;
+</pre>
+					</li>
+					
+					<li>
+						<code>ace-part2.css</code> which is used when main CSS file (ace.css) is too large for IE9 and below (the 4096 selector limit).
+<pre class="light-green">
+&lt;!--[if lte IE <span class="light-red bolder">9</span>&gt;
+&lt;link rel="stylesheet" href="<span class="purple bolder">path/to/assets/<span class="light-blue">ace-part2.css</span></span>" /&gt;
+&lt;![endif]--&gt;
+</pre>
+						See the following links for more info about this IE limitation:
+						<br />
+						<a href="http://support.microsoft.com/kb/262161">Link 1</a>
+						&
+						<a href="http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx">Link 2</a>
+						
+					</li>
+					
+					<li>
+						<code>ace-rtl.css</code> file which is used for RTL (right to left) direction suitable for languages such as Arabic, Hebrew and Persian.
+						<br />
+						For more info about using RTL, please see <a href="#settings.rtl">RTL section</a>
+					</li>
+					
+					<li>
+						<code>ace-fonts.css</code> which is the font definition file.
+						<br />
+						Used only when you want to serve local fonts rather using fonts directly from google.
+						<br />
+						You can also put content of <code>ace-fonts.css</code>
+						on top of your main CSS file to reduce number of files.
+					</li>
+				</ol>
+			</li>
+		 </ul>
+		</div>
+		<!-- /section:files/css.css -->
+		
+		
+		
+		<h3 class="info-title smaller" data-id="#files/css.skins">5. Ace Skins</h3>
+		<!-- #section:files/css.skins -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				<code>ace-skins.css</code> file is generated by compiling
+				<br />
+				<code>assets/css/less/skins/skins.less</code>
+				<br />
+				using the following command:
+				<br />
+				<code>lessc <span class="green">skins/skins.less</span> ../ace-skins.css</code>
+				<br />
+				or
+				<br />
+				<code>lessc <span class="green">skins/skins.less</span> <b class="blue">--clean-css</b> ../ace-skins<b class="blue">.min</b>.css</code>
+			</li>
+			
+			<li>
+				If you don't want to use a separate skin file,
+				you can compile <code>ace.less</code> using your skin of choice.
+
+				<br />
+				To do that, edit
+				<br />
+				<code>assets/css/less/sidebar.less</code>
+				<br />
+				and replace
+				<br />
+				<code>@import "skins/no-skin.less"</code>
+				<br />
+				with
+				<br />
+				<code>@import "skins/skin-1.less</code>
+				<br />
+				or any other skin.
+			</li>
+			
+			<li>
+				For more info about skins you may want to see <a href="#settings.skins">skins section</a> as well.
+			</li>
+		 </ul>
+		</div>
+		<!-- /section:files/css.skins -->
+		
+		
+		<h3 class="info-title smaller" data-id="#files/css.order">6. CSS file order</h3>
+		<!-- #section:files/css.order -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				The correct order of including CSS files is as follows:
+				<ol>
+					<li>
+						<b>bootstrap.css</b>
+					</li>
+					<li>
+						<b>font-awesome.css</b> if you want to use Fontawesome icons.
+					</li>
+					<li>
+						<b>ace-fonts.css</b>
+						<br />
+						You may want to serve fonts from your own server or hosted by Google.
+						<br />
+						View this file for an example:
+						<br />
+						<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/_template/</span>fonts.mustache</code>
+					</li>
+					
+					<li>
+						Third party css files such as <b>chosen.css</b> or <b>ui.jqgrid.css</b>
+					</li>
+					
+					<li>
+						<b>ace.css</b>. Ace's main CSS file.
+					</li>
+					<li>
+						<b>ace-part2.css</b>. IE 9 and below have a 4096 selector limit.
+						<br />
+						See the following links for more info about this IE limitation:
+						<br />
+						<a href="http://support.microsoft.com/kb/262161">Link 1</a>
+						&
+						<a href="http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx">Link 2</a>
+						
+						<div class="space-4"></div>
+						I recommend building a custom, smaller CSS file according to your needs, using <a href="../build/css.html">CSS builder</a> and you may not need a second CSS file for IE.
+					</li>
+					
+					<li>
+						<b>ace-skins.css</b>.
+						Ace skin CSS file, if you want to use a skin other that default one.
+						<br />
+						You can also compile default Ace styles (ace.css) using a different skin.
+						Please refer to the above "Ace Skins" section for more info.
+					</li>
+					<li>
+						<b>ace-rtl.css</b>. Ace's RTL direction CSS file, if you want to use Arabic, Hebrew or Persian.
+					</li>
+					
+					<li>
+						<b>ace-ie.css</b> which is used by IE9 and below.
+					</li>
+					
+					<li>
+						Inline styles which is not recommend and you should always try to separate your CSS from your HTML and application code.
+					</li>
+				</ol>
+			</li>
+			
+			<li>
+<pre data-language="html">
+ &lt;link href="path/to/bootstrap.min.css" rel="stylesheet" /&gt;
+ &lt;link href="path/to/fontawesome.min.css" rel="stylesheet" /&gt;&lt;!-- only if needed --&gt;
+
+ &lt;link href="path/to/ace-fonts.css" rel="stylesheet" /&gt;&lt;!-- you can also use google hosted fonts --&gt;
+
+ &lt;link href="path/to/ace.min.css" rel="stylesheet" class="ace-main-stylesheet" /&gt;
+ &lt;!--[if lte IE 9]&gt;
+  &lt;link href="path/to/ace-part2.min.css" rel="stylesheet" class="ace-main-stylesheet" /&gt;
+ &lt;![endif]--&gt;
+
+ &lt;link href="path/to/ace-skins.min.css" rel="stylesheet" /&gt;&lt;!-- only if needed --&gt;
+ &lt;link href="path/to/ace-rtl.min.css" rel="stylesheet" /&gt;&lt;!-- only if needed --&gt;
+
+ &lt;!--[if lte IE 9]&gt;
+ &lt;link href="path/to/ace-ie.min.css" rel="stylesheet" /&gt;
+ &lt;![endif]--&gt;
+
+ &lt;style&gt;
+  /* not recommended to define new CSS rules inside your HTML page */
+  .some-selector {
+    color: red;
+  }
+ &lt;/style&gt;
+</pre>
+			</li>
+		 </ul>
+		</div>
+		<!-- #section:files/css.order -->
+
+		
+		<h3 class="info-title smaller" data-id="#files/css.fonts">7. Fonts</h3>
+		<!-- #section:files/css.fonts -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Ace uses "Open Sans" font from Google as its a popular font with good character support.
+				<br />
+				Only "normal" and "light" font weights are included to make the page load faster:
+				<code>http://fonts.googleapis.com/css?family=Open+Sans:<u>400</u>,<u>300</u></code>
+				<br />
+				See this for more info: <a href="http://www.google.com/fonts#UsePlace:use/Collection:Open+Sans">Google Open Sans</a>
+
+				<div class="space-6"></div>
+				You can use google hosted fonts:
+				<pre data-language="html">
+<!-- serve fonts from google -->
+&lt;link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,300" /&gt;</pre>
+				
+				Or serve from your own server: (especially good during development, so that your pages load faster)
+				<pre data-language="html">
+&lt;link rel="stylesheet" href="path/to/ace-fonts.css" /&gt;</pre>
+				You can also embed the contents of "ace-fonts.css" files in your main CSS file to reduce number of files:
+				<pre data-language="css">
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Open Sans Light'), local('OpenSans-Light'), url(path/to/font/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans'), local('OpenSans'), url(path/to/font/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
+}</pre>
+				Font files are located inside: <code>assets/font</code>
+			</li>
+			<li>
+				For icons you can use Fontawesome, Glyphicons or any other font library.
+				<br />
+				Icon font files are located inside: <code>assets/fonts</code>
+				and  you can also serve CDN hosted fonts, for example:
+				<pre data-language="html">
+&lt;link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" /&gt;</pre>
+
+				<div class="space-4"></div>
+				Please also see <a href="#elements.icon" class="help-more">Icons section</a> for more info.
+			</li>
+		 </ul>
+		</div>
+		<!-- /section:files/css.fonts -->
+
+
+
+		<h3 class="info-title smaller" data-id="#files/css.build">8. CSS Builder</h3>
+		<!-- #section:files/css.build -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				There is also the in-browser CSS builder you can use to build a custom CSS output, using only the parts you need.
+			</li>
+			<li>
+				You can find it here: <a href="../build/css.html">path/to/ace/build/css.html</a>
+			</li>
+		 </ul>
+		</div>
+		<!-- /section:files/css.build -->
+		
+	</div>
+	<!-- /section:files/css -->
+</section>

src/main/webapp/static/ace/docs/sections/files/examples.html

@@ -0,0 +1,69 @@
+<section>
+	<h1 class="blue"><i class="ace-icon fa fa-file-o grey"></i> Example Files</h1>
+	<hr />
+
+	<div class="help-content">
+		 <ul class="info-list list-unstyled">
+			<li>
+			  I've included some examples which you can find inside <b>examples</b> folder.
+			  <br />
+			  Some have a server side handler in PHP language.
+			  <br />
+			  Unfortunately I'm not much familiar with other languages and environments to provide examples for.
+			  <br />
+			  But if you would like to see more examples, just let me know.
+			  
+			  <div class="hr hr-12 hr-double"></div>
+			   Currently example files are:
+
+			   <ol class="spaced2 margin-20">
+				<li>
+					File upload example.
+					<br />
+					<code>examples/file-upload.html</code>
+					<br />
+					<code>examples/file-upload.php</code>
+					<br />
+					Fore more info, you can also see <a class="help-more" href="#custom/file-input">file input element</a>.
+					
+				</li>
+				
+				<li>
+					Profile image update.
+					<br />
+					The server side code is same as above <code>examples/file-upload.php</code>
+					<br />
+					If you want to try this on profile page, you should 
+					edit profile page, remove the section that says:
+					<code><span class="green">// ***UPDATE AVATAR HERE*** //</span></code>
+					and use the contents of <code>examples/js/profile-avatar-update.js</code> instead.
+				</li>
+				
+				<li>
+					Treeview example which uses FuelUX treeview element.
+					<br />
+					In this example data is loaded from a sqlite database
+					<code>examples/data/treeview-city.sqlite</code> and some items are randomly pre-selected.
+					<br />
+					For instance in your app you may want to display a tree and restore user's previous selection.
+					<br />
+					Fore more info, you can also see <a class="help-more" href="#plugins/fuelux.treeview">treeview plugin</a>.
+				</li>
+				
+				<li>
+					Widget Box example which show usage of events and function.
+					<br />
+					You can refer to <a class="help-more" href="#custom/widget-box">widget box section</a> for more info.
+				</li>
+				
+				<li>
+					Wysiwyg example of saving editor's content inside a textarea element and posting it to server.
+					<br />
+					Fore more info please also see <a class="help-more" href="#plugins/editor.wywiwyg">wysiwyg editor</a>.
+				</li>
+			   </ol>
+			</li>
+		 </ul>
+
+	</div>
+</section>

src/main/webapp/static/ace/docs/sections/files/html.html

@@ -0,0 +1,68 @@
+<section>
+	<h1 data-id="#files/html"><i class="ace-icon fa fa-file-o green"></i> HTML Files</h1>
+
+	<div class="help-content">
+	   <!-- #section:files/html -->
+	   <div class="info-section">
+		<ul class="info-list list-unstyled">
+			<li>
+				HTML files are inside <code>html</code> directory.
+			</li>
+			
+			<li>
+				They are automatically generated from Mustache templates.
+				<br />
+				There is more info about it in the <a href="#files/mustache" class="help-more">next section</a>.
+			</li>
+			
+			<li>
+				If you want to review HTML page's general layout, you can start with <code>html/empty.html</code> file which has minimal code.
+			</li>
+		
+			<li>
+				Following is an alphabetical list of HTML files inside the template:
+				<ul>
+					<li><code>blank.html</code></li>
+					<li><code>buttons.html</code></li>
+					<li><code>calendar.html</code></li>
+					<li><code>content-slider.html</code></li>
+					<li><code>dropzone.html</code></li>
+					<li><code>elements.html</code></li>
+					<li><code>email.html</code></li>
+					<li><code>empty.html</code></li>
+					<li><code>error-404.html</code></li>
+					<li><code>error-500.html</code></li>
+					<li><code>faq.html</code></li>
+					<li><code>form-elements.html</code></li>
+					<li><code>form-elements-2.html</code></li>
+					<li><code>form-wizard.html</code></li>
+					<li><code>gallery.html</code></li>
+					<li><code>grid.html</code></li>
+					<li><code>inbox.html</code></li>
+					<li><code>index.html</code></li>
+					<li><code>invoice.html</code></li>
+					<li><code>jqgrid.html</code></li>
+					<li><code>jquery-ui.html</code></li>
+					<li><code>login.html</code></li>
+					<li><code>mobile-menu-1.html</code></li>
+					<li><code>mobile-menu-2.html</code></li>
+					<li><code>mobile-menu-3.html</code></li>
+					<li><code>nestable-list.html</code></li>
+					<li><code>pricing.html</code></li>
+					<li><code>profile.html</code></li>
+					<li><code>tables.html</code></li>
+					<li><code>timeline.html</code></li>
+					<li><code>top-menu.html</code></li>
+					<li><code>two-menu-1.html</code></li>
+					<li><code>two-menu-2.html</code></li>
+					<li><code>treeview.html</code></li>
+					<li><code>typography.html</code></li>
+					<li><code>widgets.html</code></li>
+					<li><code>wysiwyg.html</code></li>
+				</ul>
+			</li>
+		</ul>
+	   </div>
+	   <!-- /section:files/html -->	
+	</div>	
+</section>

src/main/webapp/static/ace/docs/sections/files/javascript.html

@@ -0,0 +1,349 @@
+<section>
+	<h1 class="blue"><i class="ace-icon fa fa-file-o grey"></i> Javascript Files</h1>
+	<hr />
+
+	<div class="help-content">
+		<h3 class="info-title smaller" data-id="#files/javascript.ace">1. Ace Files</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				<ul class="info-list list-unstyled">
+					<li>
+						Compressed files are inside	<code>dist/js</code> folder.
+						<br />
+						Uncompressed(non-minified) files are inside <code>assets/js</code> folder.
+					</li>
+				
+					<li>
+						<b>ace.js</b> contains site's main functionality such as handling sidebar, widget boxes, etc.
+					</li>
+					
+					<li>
+						<p>
+						<b>ace-elements.js</b> contains custom plugins such as
+						<i>file input</i>, <i>scrollbars</i>, <i>colorpicker</i>
+						and	wrappers for <i>spinner</i>, <i>wizard</i>, <i>treeview</i> and <i>wysiwyg</i> plugins.
+						</p>
+						<p>
+						Please note that if you want to use one of these wrappers,  you still need to include the plugin's script.
+						<br />
+						For example:
+<pre data-language="html">
+ &lt;script src="fuleux/spinner.js"&gt;&lt;/script&gt;
+ &lt;script src="ace.elements.js"&gt;&lt;/script&gt;
+</pre>
+						You can find more info about this in each plugin's section.
+					</li>
+					
+					<li>
+						<p>
+						<b>ace-extra.js</b>
+						which has cookie/localStorage functionality to save & retrieve user's settings.
+						</p>
+						<p>
+						Also, sidebar collapse/expand, fixing navbar/sidebar/breadcrumbs are defined inside this file.
+						</p>
+						<p>						
+						For more info about page options and settings, please see <a class="help-more" href="#settings">Settings</a> section.
+						</p>
+						<p>
+						And for info about cookies and storage you can refer to <a class="help-more" href="#settings.storage">Cookies & Storage</a> section.
+						</p>
+					</li>
+					
+					<li>
+						<p>
+						<b>x-editable/ace-editable.js</b> which contains 5 additional inline editable addons:
+						<i>date</i>, <i>slider</i>, <i>spinner</i>, <i>wysiwyg</i> and <i>image</i>.
+						</p>
+						<p>
+						You can find more about about these addons <a class="help-more" href="#custom/inline-editable">here</a>
+						and about <b>x-editable</b> plugin <a class="help-more" href="#plugins/misc.inline-editable">here</a>.
+						</p>
+					</li>
+					
+				</ul>
+				
+				<div class="hr hr-10"></div>
+				<p>
+					<b>ace.js</b> and <b>ace-elements.js</b>
+					are generated using in-browser Javascript builder by merging separate script files that are inside
+					<code>assets/js/ace</code> folder, which contains:
+					<ol>
+						<li><code data-open-file="javascript" class="open-file"><span class="brief-show">assets/js/ace/</span>ace.js</code></li>
+						<li><code data-open-file="javascript" class="open-file"><span class="brief-show">assets/js/ace/</span>ace.sidebar.js</code></li>
+						<li><code data-open-file="javascript" class="open-file"><span class="brief-show">assets/js/ace/</span>ace.widget-box.js</code></li>
+						<li><code data-open-file="javascript" class="open-file"><span class="brief-show">assets/js/ace/</span>elements.scroller.js</code></li>
+						<li><code data-open-file="javascript" class="open-file"><span class="brief-show">assets/js/ace/</span>elements.fileinput.js</code></li>
+						<li>And some other files which you can see inside <code>assets/js/ace</code></li>
+					</ol>
+				</p>
+				<p>				
+					For more information about any of the above files you can refer to <a href="../build/js.html">Javascript builder</a> as it has some description about each file.
+				</p>
+			</li>
+
+		 </ul>
+		</div>
+		
+		
+		
+		<h3 class="info-title smaller" data-id="#files/javascript.third">2. Other Files</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				All scripts are inside <code>assets/js</code> folder.
+				<br />
+				Compressed (minified) files are inside	<code>dist/js</code> folder.				
+			</li>
+			<li>
+				<p>
+				I have put some scripts that are similar in separate folders.
+				<br />
+				But that's optional and you can have your own structure.
+				</p>
+				<p>
+				For example:
+				<br />
+				<code>assets/js/date-time</code>
+				<br />
+				<code>assets/js/fuelux</code>
+				<br />
+				<code>assets/js/markdown</code>
+				<br />
+				<code>assets/js/x-editable</code>
+				<br />
+				<code>assets/js/flot</code>
+				<br />
+				<code>assets/js/jqGrid</code>
+				</p>
+			</li>
+
+			<li>
+				If  you want to see what scripts are used in a demo page, you can view its json data file inside
+				<code>mustache/app/data/pages</code> folder.
+				<br />
+				For example, according to its data file
+				<br />
+				<code data-open-file="json" class="open-file">mustache/app/data/pages/index.json</code>
+				<br />
+				dashboard(index) page is using the following scripts:
+				<div class="space-4"></div>
+				<ol>
+					<li><b>jQuery UI</b> used for sortable tasks list</li>
+					<li><b>Easy Pie Chart</b> used for circular progress meters</li>
+					<li><b>Sparkline</b> used for inline charts inside infoboxes</li>
+					<li><b>Flot charts</b> used for the pie chart and sale stats chart</li>
+				</ol>
+			</li>
+
+			<li>
+				I have included 2 versions of jQuery UI:
+				<ol>
+					<li>
+						<code>assets/js/jquery-ui.custom.js</code>
+						which is a custom build which contains stripped down functionality needed by some plugins and sections.
+						<br />
+						Included features are: dragging, resizing, jQuery UI Slider, etc.
+					</li>
+					<li>
+						<code>assets/js/jquery-ui.full.js</code>
+						is a full version containing all of jQuery UI's functionality used in jQuery UI sample page.
+					</li>					
+				</ol>
+				You can build your own version depending on your needs.
+			</li>
+			
+			<li>
+				A minimal custom download of <b>jQuery Mobile</b> is also used,
+				so that we can have <i>tap</i> event
+				on touch devices which is preferred to <i>click</i>.
+				<br />
+				You can build your own version depending on your needs.
+			</li>
+		 </ul>
+		</div>
+
+
+
+		
+		
+		<h3 class="info-title smaller" data-id="#files/javascript.changes">3. Third party changes</h3>
+		<div class="info-title info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				I haved modified some third party scripts slightly to add some extra options.
+			</li>
+			<li>
+				The changes include :
+				<ol>
+					<li>
+						FuelUX wizard, spinner, treeview
+					</li>
+					<li>
+						Inline editable plugin
+					</li>
+					<li>
+						Markdown editor
+					</li>
+					<li>
+						Datepicker, Daterange picker, Timepicker
+					</li>
+					<li>
+						Added <code>function.bind</code> polyfill to html5shiv
+					</li>
+					<li>
+						Some changes in Easy Pie Chart
+					</li>
+				</ol>
+			</li>
+		 </ul>
+		</div>
+		
+		
+		<h3 class="info-title smaller" data-id="#files/javascript.order">4. Script order</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				The right order of including script files is:
+				<ul>
+					<li>
+					Scripts that are inside <code>HEAD</code> element:
+					<br />
+					(also visible in <br />
+					<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/_template/</span>styles.mustache</code>)
+					
+					<ol>
+						<li>
+							<b>ace-extra.js</b> if  you need cookie support and sidebar collapse/expand, fixing navbar, etc.
+						</li>
+						<li>
+							<b>html5shiv.js</b> & <b>respond.js</b>
+							wrapped inside IE conditional comments which enable some HTML5 features on IE8 and below.
+						</li>
+					</ol>
+					
+<pre data-language="html">
+ &lt;head&gt;
+  .
+  .
+  .
+
+  &lt;script src="ace-extra.min.js"&gt;&lt;/script&gt;
+  &lt;!--[if lte IE 8]&gt;
+   &lt;script src="html5shiv.min.js"&gt;&lt;/script&gt;
+   &lt;script src="respond.min.js"&gt;&lt;/script&gt;
+  &lt;![endif]--&gt;
+ &lt;/head&gt;
+</pre>
+
+				</li>
+				<li>
+					Other scripts that are preferrably at the end of document:
+					<br />
+					(also visible in <br />
+					<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/_template/</span>scripts.mustache</code>)
+					
+					<ol class="spaced2">
+						<li>
+							<b>jquery.js</b> as well as <b>jquery v1.x</b> which is included for IE9 and below.
+							<br />
+							<b>jquery.js</b> should be inside special IE conditional comments and it will be ignored by IE9 and below.
+							<br />
+							<b>jquery v1.x</b> should be inside conditional comments so that it's included by IE9 and below only.
+						</li>
+						
+						<li>
+							<b>bootstrap.js</b>
+						</li>
+						
+						<li>
+							<b>excanvas.js</b> for IE8 if you are going to need HTML5 Canvas support.
+							Currently plugins that need canvas support are:
+							<ol>
+								<li>Flotchart</li>
+								<li>Sparklines</li>
+								<li>jQuery Knob</li>
+								<li>Easy Pie Chart</li>
+							</ol>							
+							<br />
+							You should include excanvas before including above plugins.
+						</li>
+						
+						<li>
+							Any Plugin that you want to use for example:
+							<br />
+							<b>Chosen</b>
+							<br />
+							<b>Fuelux Wizard</b>
+						</li>
+
+						<li>
+							Finally you should include <b>ace-elements.js</b> and <b>ace.js</b>
+						</li>
+						
+						<li>
+							And then inline scripts that you may want to use for the page.
+						</li>
+					</ol>
+					<div class="hr hr-8"></div>
+<pre data-language="html">
+  .
+  .
+  .
+
+  &lt;!--[if !IE]&gt; --&gt;
+  &lt;script src="jquery.min.js"&gt;&lt;/script&gt;
+  &lt;!-- &lt;![endif]--&gt;
+  &lt;!--[if lte IE 9]&gt;
+   &lt;script src="jquery1x.min.js"&gt;&lt;/script&gt;
+  &lt;![endif]--&gt;
+
+  &lt;script src="bootstrap.min.js"&gt;&lt;/script&gt;
+
+  &lt;!-- ie8 canvas if required for plugins such as charts, etc --&gt;
+  &lt;!--[if lte IE 8]&gt;
+   &lt;script src="excanvas.min.js"&gt;&lt;/script&gt;
+  &lt;![endif]--&gt;
+
+  &lt;script src="plugin1.min.js"&gt;&lt;/script&gt;
+  &lt;script src="plugin2.min.js"&gt;&lt;/script&gt;
+  &lt;script src="plugin3.min.js"&gt;&lt;/script&gt;
+  
+  &lt;script src="ace-elements.min.js"&gt;&lt;/script&gt;
+  &lt;script src="ace.min.js"&gt;&lt;/script&gt;
+  
+  &lt;script type="text/javascript"&gt;
+     //If page has any inline scripts, it goes here
+     jQuery(function($) {
+       alert('hello!');
+     });
+  &lt;/script&gt;
+
+ &lt;/body&gt;
+</pre>
+
+				 </li>
+					
+				</ul>
+			</li>
+		 </ul>
+		</div>
+		
+		
+		<h3 class="info-title smaller" data-id="#files/javascript.build">5. Javascript Builder</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				There is also the in-browser Javascript builder that you can use to build a custom Javascript file,
+				using only the parts you need.
+				<br />
+				You can find it here: <a href="../build/js.html">path/to/ace/build/js.html</a>
+				<div class="space-6"></div>
+				You can choose a minified(compressed) output which is powered by the popular tool
+				<a href="#plugins/tools.uglifyjs" class="help-more">UglifyJs</a>.
+			</li>
+		 </ul>
+		</div>
+	</div>
+</section>

src/main/webapp/static/ace/docs/sections/files/mustache.html

@@ -0,0 +1,539 @@
+<section>
+	<h1 class="blue"><i class="ace-icon fa fa-file-o grey"></i> Mustache Files</h1>
+	<hr />
+	
+	<div class="alert alert-info">
+		<button class="close" data-dismiss="alert"><i class="ace-icon fa fa-times"></i></button>
+		<b>Please note that:</b>
+		<div class="space-4"></div>
+		<i class="fa fa-hand-o-right"></i>
+		You don't need to use Mustache templates in your application.
+		
+		<div class="space-8"></div>
+		<i class="fa fa-hand-o-right"></i>
+		If you need any info about any part of the template,
+		you can refer to its documentation or use on-page help.
+		
+		<div class="space-8"></div>
+		<i class="fa fa-hand-o-right"></i>
+		But you can read the following for more info such as the purpose of using a template engine
+		and how it may help you find your way around Ace admin template better.
+		
+		<div class="hr hr-12"></div>
+		If you think there's something I'm missing here or more info is needed, just let me know.
+	</div>
+	
+	<div class="hr hr-double hr32"></div>
+
+	<div class="help-content">
+		<h3 class="info-title smaller">1. What is it?</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Probably you are already using a template system in your application.
+				<p>
+				It may be natively supported by your framework of choice or may be an external library.
+				<p>
+				For example PHP Smarty or Ruby's ERB are such template engines.
+				<p>
+				The main purpose of using a template system is to separate presentation from application logic				
+			</li>
+			
+			<li>
+				<i class="fa fa-lightbulb-o orange bigger-125"></i>
+				But Ace admin's demo pages are static HTML and not an application.
+				<br />
+				Therefore the main reason for using Mustache templates is to create
+				demo pages which have similar layout and looks but different content.
+				<div class="space-6"></div>
+				In other words, we use templates to break down large HTML pages into smaller parts that can be easily modified and maintained.
+			</li>
+			
+			<li>
+				Mustache is a templating system with implementations
+				available in many languages including Javascript, PHP, Ruby, etc.
+				
+				<div class="space-6"></div>
+				For an overview you can see this page: <a href="http://mustache.github.io/">http://mustache.github.io/mustache.5.html</a> 
+				<div class="space-6"></div>
+				
+				I'm using it to create the HTML output.
+				<br />
+				I've also overridden the partial template loader mechanism
+				to automatically load partial templates as needed.
+			</li>
+
+			<li>
+				You can view or edit <b>Mustache</b>(.mustache) files using your favorite text or HTML editor
+				and enable HTML syntax highlighting for it.
+				<p>
+				You can also click on each file name provided in the following sections and view its content inside your browser.
+			</li>
+		 </ul>
+		</div>
+		
+		<h3 class="info-title smaller">2. What does it contain?</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Let's start with the following file which is the default layout file:
+				<br />
+				<i>(you can click on in to view its content)</i>
+				<br />
+				<code data-open-file="html" class="open-file">mustache/app/views/layouts/default.mustache</code>
+				<div class="space-6"></div>
+				As you can see it contains some HTML code and some special tags (Mustache tags).
+				<div class="space-4"></div>
+				There are 6 kinds of Mustache tags used here:
+				<ol class="spaced2">
+					<li>
+						Variables that are used for printing a piece of data
+						such as <code>{{page.title}}</code> or <code>{{site.title}}</code>
+					</li>
+					
+					<li>
+						Partial template tags that start with a <code>&gt;</code> such as <code>{{&gt; layout.sidebar}}</code>.
+						<div class="space-6"></div>
+						The engine tries to load current layout's <code>sidebar</code> template file.
+						<br />
+						It starts by looking inside
+						<br />
+						<code>mustache/app/views/layouts/partials/<b class="bigger-110 blue">default</b></code>
+						<br />
+						folder and if not found, it will look for it inside
+						<code>mustache/app/views/layouts/partials/<b class="bigger-110 blue">_shared</b></code>
+						
+						<div class="space-6"></div>
+						In our case, sidebar's HTML code is shared between <b>default</b> & <b>empty</b> layouts.
+						So it's located at:
+						<br />
+						<code data-open-file="html" class="open-file">mustache/app/views/layouts/partials/<b class="bigger-110 blue">_shared</b>/sidebar.mustache</code>
+					</li>
+
+					<li>
+						Section tags that print a piece of code or data if a variable is defined
+						and is not false/null.
+						<br />
+						For example inside our sidebar <code data-open-file="html" class="open-file">mustache/app/views/layouts/partials/_shared/sidebar.mustache</code>
+						there is:
+<pre>
+&lt;div id="sidebar" class="sidebar
+<span class="light-blue">{{#page.horizontal-menu}}</span><span class="light-green"> h-sidebar</span><span class="light-blue">{{/page.horizontal-menu}}</span>
+</pre>
+					The <code><span class="green">h-sidebar</span></code>
+					class will be printed only if a <code>page.horizontal-menu</code> variable is defined and is not false or null.
+					</li>
+
+					<li>
+					Inverted Section tags that print a piece of code or data if a variable is not defined
+						or is false/null.
+						Again in our <code>sidebar</code> mustache file we have: <br />
+<pre>
+<span class="light-red">{{^page.side_menu_collapsible}}</span>
+ <span class="light-red">{{^page.responsive_style_2}}</span>
+  <span class="light-green">responsive</span>
+ <span class="light-red">{{/page.responsive_style_2}}</span>
+<span class="light-red">{{/page.side_menu_collapsible}}</span>
+</pre>
+
+					The	<code><span class="green">responsive</span></code> class will be printed
+					only if <code>page.side_menu_collapsible</code> and <code>page.responsive_style_2</code> variables are NOT defined or are false/null.
+					</li>
+					
+					<li>
+						Non-Empty List tags are used to print a list of items when the variable is a non-empty array:
+<pre>
+<span class="light-blue">{{#conversation_list}}</span>
+  &lt;h3&gt;<span class="light-green">{{title}}</span>&lt;/h3&gt;
+  &lt;div class="content"&gt;<span class="light-green">{{content}}</span>&lt;/div&gt;
+  &lt;div class="time"&gt;<span class="light-green">{{time}}</span>&lt;/div&gt;
+<span class="light-blue">{{/conversation_list}}</span>
+</pre>
+					</li>
+					
+
+					<li>
+						Comment tags such as <code><span class="green">{{! This is a comment}}</span></code>. These are ignored and won't be converted to HTML comments.
+					</li>
+				</ol>
+					
+			</li>
+				
+			<li>
+				In our case variables and options come under some different names:
+				<ol class="spaced2">
+					<li>
+						<code>site.*</code> for example <code>site.title</code>
+					</li>
+					<li>
+						<code>layout.*</code> for example <code>layout.sidebar_items</code>
+					</li>
+					<li>
+						<code>page.*</code> for example <code>page.title</code> or <code>page.content</code>
+					</li>
+					<li>
+						And other variables such as <code>path.assets</code>, etc.
+					</li>
+				</ol>
+
+				
+				For example <code>site.remote_jquery</code> inside
+				<code data-open-file="html" class="open-file">mustache/app/views/layouts/partials/_shared/_template/jquery.mustache</code>
+				is an option that specifies whether we should
+				use remote (CDN) jquery files or not when generating our HTML output.
+				<div class="space-6"></div>
+				Following <code>Data Files</code> section describes where data is loaded from.
+			</li>
+		 </ul>
+		</div>
+
+		<h3 class="info-title smaller">3. Templates Files</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Our layout files are inside <code>mustache/app/views/layouts</code> folder which includes:
+				<br />
+				<i>(Move mouse over each item to see full path)</i>
+				<ul>
+					<li>
+						<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/</span>default.mustache</code>
+						<br />
+						Default layout file for all pages except for login and empty.html file.
+					</li>
+					<li>
+						<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/</span>login.mustache</code>
+						<br />
+						Login page layout file.
+					</li>
+					<li>
+						<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/</span>empty.mustache</code>
+						<br />
+						Empty page's layout file.
+						It is similar to default layout but the partials are slightly different
+						so a separate file is used.
+					</li>
+				</ul>
+				<br />
+				Layout partials are inside <code>mustache/app/views/layouts/partials</code> folder.
+				<br />
+				Some of partials are:
+				<ul>
+					<li>
+						<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/</span>sidebar.mustache</code>
+					</li>
+					<li>
+						<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/</span>sidebar/item.mustache</code>
+					</li>
+					<li>
+						<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/</span>sidebar/shortcuts.mustache</code>
+					</li>
+				</ul>
+				
+				<ul>
+					<li>
+						<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/</span>navbar.mustache</code>
+					</li>
+					<li>
+						<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/</span>navbar/topmenu.mustache</code>
+					</li>
+					<li>
+						<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/</span>navbar/toggle_buttons.mustache</code>
+					</li>
+					<li>
+						<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/</span>navbar/messages.mustache</code>
+					</li>
+					<li>
+						<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/</span>navbar/notifications.mustache</code>
+					</li>
+					<li>
+						<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/</span>navbar/tasks.mustache</code>
+					</li>
+					<li>
+						<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/</span>navbar/tabbed_user_notifications.mustache</code>
+					</li>
+					<li>
+						<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/</span>default/navbar/user_menu.mustache</code>
+					</li>
+					<li>
+						<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/</span>empty/navbar/user_menu.mustache</code>
+					</li>
+					<li class="space-8"></li>
+					<li>
+						<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/</span>settings.mustache</code>
+					</li>
+					
+					<li>
+						<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/</span>default/breadcrumbs.mustache</code>
+					</li>
+					<li>
+						<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/</span>default/footer.mustache</code>
+					</li>
+
+					<li class="hr hr-8"></li>
+					
+					<li>
+						<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/</span>_template/jquery.mustache</code>
+					</li>
+					<li>
+						<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/</span>_template/bootstrap.mustache</code>
+					</li>
+					<li>
+						<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/</span>_template/fonts.mustache</code>
+					</li>
+					<li>
+						<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/</span>_template/fontawesome.mustache</code>
+					</li>
+					<li>
+						<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/</span>_template/scripts.mustache</code>
+					</li>
+					<li>
+						<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/</span>_template/styles.mustache</code>
+					</li>
+				</ul>
+			</li>
+			
+			<li>
+				Page files are inside <code>mustache/app/views/pages</code>.
+				<br />
+				A few samples pages include:
+				<br />
+				<ul class="spaced2">
+					<li>
+						Home (dashboard) page:
+						<br />
+						<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/</span>index.mustache</code>
+						<br />
+						And its partials are:
+						<ul>
+							<li>
+								<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/partials/index/</span>conversations.mustache</code>
+							</li>
+							<li>
+								<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/partials/index/</span>comments.mustache</code>
+							</li>
+							<li>
+								<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/partials/index/</span>tasks.mustache</code>
+							</li>
+							<li>
+								<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/partials/index/</span>members.mustache</code>
+							</li>
+							<li>
+								<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/partials/index/</span>domains.mustache</code>
+							</li>
+							<li>
+								<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/partials/index/</span>infobox.mustache</code>
+							</li>
+						</ul>
+					</li>
+					<li>
+						Login page:
+						<br />
+						<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/</span>login.mustache</code>
+						<br />
+						which is split into 3 partials:
+						<br />
+						<ul>
+							<li>
+								<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/partials/login/</span>login_box.mustache</code>
+							</li>
+							<li>
+								<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/partials/login/</span>forgot_box.mustache</code>
+							</li>
+							<li>
+								<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/partials/login/</span>signup_box.mustache</code>
+							</li>
+						</ul>
+					</li>
+					<li>
+						And other pages at <code>mustache/app/views/pages</code>.
+					</li>
+				</ul>
+			</li>
+			
+	
+			<li>
+				Page assets (inline scripts and styles) are inside <code>mustache/app/views/assets</code>.
+				<br />
+				Putting them in separate files makes it easier to read and edit.
+				<br />
+				In some (server side programming language) frameworks,
+				this is usually done by registering files and snippets during application run
+				and inserting them in the output at the right spot. 
+
+				<br />
+				<ul class="spaced2">
+					<li>
+						Script of each page is inside <code>mustache/app/views/assets/scripts</code>.
+						<br />
+						A few samples are:
+						<br />						
+						<code data-open-file="javascript" class="open-file"><span class="brief-show">mustache/app/views/assets/</span>scripts/index.js</code>
+						<br />
+						<code data-open-file="javascript" class="open-file"><span class="brief-show">mustache/app/views/assets/</span>scripts/tables.js</code>
+						<br />
+						<code data-open-file="javascript" class="open-file"><span class="brief-show">mustache/app/views/assets/</span>scripts/profile.js</code>
+						<br />
+						These scripts are used in relevant pages and can server as a basic example for most plugins and functionality.
+					</li>
+					<li>
+						Some pages may have additional extra CSS rules that are used for demo pages only.
+						<br />
+						Currently there is:
+						<br />
+						<code data-open-file="css" class="open-file"><span class="brief-show">mustache/app/views/assets/</span>styles/elements.css</code>
+						<br />
+						and
+						<br />
+						<code data-open-file="css" class="open-file"><span class="brief-show">mustache/app/views/assets/</span>styles/grid.css</code>
+					</li>
+				</ul>
+			</li>
+		 </ul>
+		</div>
+		
+		
+		<h3 class="info-title smaller">4. Data Files</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				In your application you are probably using a database engine to save/restore your data.
+				<br />
+				For Ace admin, as there is not any dynamic functionality in demo pages, I have used
+				simple text files with json and csv data format.
+				<br />
+				They are located here:
+				<code>mustache/app/data</code>
+			</li>
+		 
+			<li>
+				In our case there are 3 types of data:
+				<ol class="spaced2">
+					<li>
+						<b>Layout data</b> inside <code>mustache/app/data/layouts</code> folder.
+						<br />
+						For example:
+						<br />
+						<code data-open-file="json" class="open-file"><span class="brief-show">mustache/app/data/layouts/partials/default/</span>navbar_messages.json</code>
+						<br />
+						<code data-open-file="json" class="open-file"><span class="brief-show">mustache/app/data/layouts/partials/default/</span>navbar_notifications.json</code>
+						<br />
+						<code data-open-file="json" class="open-file"><span class="brief-show">mustache/app/data/layouts/partials/default/</span>navbar_tasks.json</code>
+						<br />
+						<code data-open-file="json" class="open-file"><span class="brief-show">mustache/app/data/layouts/partials/</span>default/sidebar_items.json</code>
+						<br />
+						<code data-open-file="json" class="open-file"><span class="brief-show">mustache/app/data/layouts/partials/</span>empty/sidebar_items.json</code>
+					</li>
+					
+					<li>
+						<b>Page data and options</b> inside <code>mustache/app/data/pages</code> folder.
+						<br />
+						For example:
+						<br />
+						<code data-open-file="json" class="open-file"><span class="brief-show">mustache/app/data/pages/</span>index.json</code>
+						<br />
+						<code data-open-file="json" class="open-file"><span class="brief-show">mustache/app/data/pages/</span>top-menu.json</code>
+						<br />
+						You can see that <code>top-menu.json</code> has <code>horizontal-menu</code> and <code>top-menu</code> options enabled.
+
+						<div class="space-8"></div>
+						
+						Also each page's partial data is inside <code>mustache/app/data/pages/partials</code> folder.
+						<br />
+						For example dashboard's conversations or profile activities:
+						<br />
+						<code data-open-file="json" class="open-file"><span class="brief-show">mustache/app/data/pages/partials/</span>index/conversations.json</code>
+						<br />
+						<code data-open-file="json" class="open-file"><span class="brief-show">mustache/app/data/pages/partials/</span>profile/activities.json</code>
+					</li>
+					
+					<li>
+						<b>Site data and options</b> inside <code>mustache/app/data/common</code> folder.
+						<br />
+						For example
+						<br />
+						<code data-open-file="json" class="open-file"><span class="brief-show">mustache/app/data/common/</span>site.json</code>
+						<br />
+						contains some general site variables and options.
+						
+						<div class="space-6"></div>
+						
+						When using <a href="#plugins/tools.node-js" class="help-more">Node.js</a> to produce the output, it's possible to override these values using command line arguments.
+						<i>(There is more info on this in the following section)</i>
+						
+						<div class="hr hr-12"></div>
+						
+						<code data-open-file="json" class="open-file"><span class="brief-show">mustache/app/data/common/</span>script-mapping.json</code>
+						<br /> 
+						<code data-open-file="json" class="open-file"><span class="brief-show">mustache/app/data/common/</span>style-mapping.json</code>
+						<br />
+						files contain a list of 3rd party names and their relevant Javascript or CSS file.
+						<br />
+						This way a file name can be modified and the changes will be reflected
+						on all pages using that script or style in future updates.
+					</li>
+				</ol>
+			</li>
+		 </ul>
+		</div>
+
+		
+		<h3 class="info-title smaller">5. Compiling & Browsing</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Demo page's are generated using a Javascript Mustache compiler(both Hogan.js or Mustache.js are possible).
+				<br />
+				You can go to <code>mustache/js</code> directory and rebuild HTML files using the following command:
+				<code>node index.js</code>				
+				<br />
+				The output will be put inside <code>output</code> folder by default.
+				
+				<div class="space-10"></div>
+				There are also a few options you can use:
+				<ul class="spaced2">
+					<li>
+						<b>--engine</b>=mustache|hogan
+						<br />
+						Default is hogan
+					</li>
+					<li>
+						<b>--output_folder</b>="../some-folder"
+						<br />
+						Default is <i>output</i>
+					</li>
+					<li>
+						And site variables & options of the following file can be overriden via command line arguments:
+						<br />
+						<code data-open-file="json" class="open-file">mustache/app/data/common/site.json</code>
+						<br />
+						For example: <b>--remote_jquery</b>=true
+					</li>
+				</ul>
+			</li>
+			<li>
+				There is also a PHP version using PHP Mustache compiler which I use during development.
+				<br />
+				If you have PHP installed, you can access it here:
+				<a href="../mustache/php/">http://path_to_ace/mustache/php/</a>
+				<br />
+				And
+				<a href="../mustache/php/ajax.php">http://path_to_ace/mustache/php/ajax.php</a>
+				for ajax version.
+			</li>
+			
+			<li>
+				Also please note that
+				I have overridden a function of <b>Hogan.js</b>
+				and </b>Mustache.js</b> compiler to automatically load a partial template
+				as needed without preloading them.
+				<br />
+				They are located at 
+				<code data-open-file="javascript" class="open-file">mustache/js/classes/autoload-hogan.js</code>
+				and
+				<code data-open-file="javascript" class="open-file">mustache/js/classes/autoload-mustache.js</code>
+			</li>
+		 </ul>
+		</div>
+
+	</div>
+</section>

src/main/webapp/static/ace/docs/sections/intro/index.html

@@ -0,0 +1,152 @@
+ <section>
+	  <h1 class="blue" data-id="intro">
+		<i class="ace-icon fa fa-leaf green"></i>
+		Introduction
+	  </h1>
+	  <hr />
+  
+	  <div class="help-content">
+          <p>
+			First of all I would like to thank you for purchasing Ace admin template.
+			I hope you like it and find it easy to work with.
+  
+		  <p>
+			This is the 9th release <i>(v1.3.4)</i> and there may be bugs and missing features
+			which will be resolved in next updates.
+
+		  <p>
+			Also, this documentation is brief and may be lacking in some parts.
+			If you think more explanations and examples are needed, just let me know.
+		  
+		  <p>
+			Please send your questions, comments, suggestions and bug reports to me at
+			<a href="mailto:ace.support@live.com">ace.support@live.com</a>
+			and I will try to reply as soon as possible.
+		  
+		  <div class="hr hr-dotted hr12"></div>
+
+		  <p>
+			Best Wishes
+			<br />
+			Mohsen Hosseini
+			
+		  <div class="alert alert-success alert-block">
+			<button class="close" data-dismiss="alert"><i class="ace-icon fa fa-times"></i></button>
+			
+			<span class="bigger-110">
+				Please follow me on
+				<a href="http://www.twitter.com/responsiweb" class="blue external_link">
+					<i class="ace-icon fa fa-twitter light-blue"></i> Twitter
+				</a>
+				or
+				<a href="http://www.facebook.com/Responsiweb" class="blue external_link">
+					<i class="ace-icon fa fa-facebook"></i> Facebook
+				</a>
+				to be informed of new updates.
+				<br />
+				You can also subscribe to <a href="http://feeds.feedburner.com/responsiweb" class="external_link"><i class="ace-icon fa fa-rss orange"></i> http://feeds.feedburner.com/responsiweb</a>
+			</span>
+		  </div>
+
+		  
+		  <div class="hr hr-double hr32"></div>
+		  
+		  <h2 class="header blue lighter"><i class="ace-icon fa fa-coffee green"></i> Features</h2>
+		  <p>
+			Ace is a lightweight and feature rich admin template which is clean and easy to use.
+			<br />
+			Current release comes with the following features:
+		  </p>
+		  <ul class="list-unstyled spaced2">
+            <li> <i class="ace-icon fa fa-hand-o-right"></i> 4 different skins</li>
+			<li> <i class="ace-icon fa fa-hand-o-right"></i> Responsive design based on Bootstrap 3 (specifically 3.3.5)</li>
+			<li> <i class="ace-icon fa fa-hand-o-right"></i> Javascript &amp; CSS builder to build your own minimal files</li>
+			<li> <i class="ace-icon fa fa-hand-o-right"></i> Email converter to convert Bootstrap and Ace HTML to table layout appropriate for email clients</li>
+			<li> <i class="ace-icon fa fa-hand-o-right"></i> On page help which lets you easily pick any element and see how it works</li>
+			<li> <i class="ace-icon fa fa-hand-o-right"></i> Custom elements and plugins including:
+				<ul class="list-unstyled spaced margin-5">
+					<li> <i class="ace-icon fa fa-check green"></i> Pure CSS3 checkbox, radio and On/Off switch elements (not available in IE8)</li>
+					<li> <i class="ace-icon fa fa-check green"></i> Custom lightweight scrollbars</li>
+					<li> <i class="ace-icon fa fa-check green"></i> File input control</li>
+					<li> <i class="ace-icon fa fa-check green"></i> Simple color picker</li>
+					<li> <i class="ace-icon fa fa-check green"></i> Customizable widgets in different colors and styles</li>
+					<li> <i class="ace-icon fa fa-check green"></i> Client side saving of user settings such as collapsed sidebar,etc</li>
+				</ul>
+			</li>
+			<li> <i class="ace-icon fa fa-hand-o-right"></i> Print friendly styles</li>
+			<li> <i class="ace-icon fa fa-hand-o-right"></i> Bootstrap, jQuery UI and third party plugins and elements including:
+				<ul class="list-unstyled spaced margin-5">
+					<li> <i class="ace-icon fa fa-check green"></i> Charts</li>
+					<li> <i class="ace-icon fa fa-check green"></i> Dynamic tables & grids</li>
+					
+					<li> <i class="ace-icon fa fa-check green"></i> Inline editable feature</li>
+					<li> <i class="ace-icon fa fa-check green"></i> Slider</li>
+					<li> <i class="ace-icon fa fa-check green"></i> Spinner</li>
+					<li> <i class="ace-icon fa fa-check green"></i> Treeview</li>
+					<li> <i class="ace-icon fa fa-check green"></i> Wizard</li>
+					<li> <i class="ace-icon fa fa-check green"></i> Form validation</li>
+					<li> <i class="ace-icon fa fa-check green"></i> Wysiwyg & Markdown editor</li>
+					<li> <i class="ace-icon fa fa-check green"></i> Drag & drop file upload</li>
+					
+					<li> <i class="ace-icon fa fa-check green"></i> Color picker</li>
+					<li> <i class="ace-icon fa fa-check green"></i> Date picker</li>
+					<li> <i class="ace-icon fa fa-check green"></i> DateRange picker</li>
+					<li> <i class="ace-icon fa fa-check green"></i> Time picker</li>
+					
+					<li> <i class="ace-icon fa fa-check green"></i> Colorbox for gallery</li>
+					
+					<li> <i class="ace-icon fa fa-check green"></i> Full calendar</li>
+					
+					<li> <i class="ace-icon fa fa-check green"></i> Tag input</li>
+					<li> <i class="ace-icon fa fa-check green"></i> Chosen selects</li>
+					<li> <i class="ace-icon fa fa-check green"></i> Select2 selects</li>
+					<li> <i class="ace-icon fa fa-check green"></i> Textarea input limiter</li>
+					<li> <i class="ace-icon fa fa-check green"></i> Textarea auto resize</li>
+					<li> <i class="ace-icon fa fa-check green"></i> Masked input</li>
+					<li> <i class="ace-icon fa fa-check green"></i> Typeahead.js</li>
+					
+					<li> <i class="ace-icon fa fa-check green"></i> Nestable hierarchical list</li>
+					
+					<li> <i class="ace-icon fa fa-check green"></i> Growl like notifications</li>
+					<li> <i class="ace-icon fa fa-check green"></i> Imageless spinner</li>
+					
+					<li> <i class="ace-icon fa fa-check green"></i> Star rating plugin</li>
+					<li> <i class="ace-icon fa fa-check green"></i> Dual listbox plugin </li>
+					<li> <i class="ace-icon fa fa-check green"></i> Multiselect plugin </li>
+					
+					<li> <i class="ace-icon fa fa-check green"></i> PACE progress bars </li>
+				</ul>
+			</li>
+          </ul>
+		  
+		  <div class="well">
+			<span class="label label-info arrowed-right">Note</span> Stylings of most third party elements have been modified to replace external images and icons with CSS and FontAwesome.
+		 
+		    <div class="space-6"></div>
+		    <p>
+			This has benefits such as better view on Retina displays as almost no pixel graphics are used  and it also means fewer network file requests resulting in faster page load time.
+		    </p>
+		  </div>
+
+		  
+		  <div class="hr hr-double hr32"></div>
+
+		  <h2 class="header lighter blue"><i class="ace-icon fa fa-compass orange"></i> Planned Features</h2>
+		  <p>
+			The following list will be added to the template on next updates:
+		  </p>
+		  <ul class="list-unstyled spaced2">
+			<li> <i class="ace-icon fa fa-hand-o-right"></i>  New features & elements such as :
+				<ul class="list-unstyled spaced2 margin-5">
+					<li> <i class="ace-icon fa fa-check green"></i> Search results </li>
+					<li> <i class="ace-icon fa fa-check green"></i> Tables with details </li>
+					<li> <i class="ace-icon fa fa-check green"></i> File upload and management </li>
+					<li> <i class="ace-icon fa fa-check green"></i> Frontend page templates </li>
+				</ul>
+			</li>
+			
+			<li> <i class="ace-icon fa fa-hand-o-right"></i> Adding more examples </li>
+		  </ul>
+		  If you also have a recommendation or feature request, please let me know.
+	</div>
+</section>

src/main/webapp/static/ace/docs/sections/issues/index.html

@@ -0,0 +1,183 @@
+ <section>
+	  <h1 class="blue" data-id="intro">
+		<i class="ace-icon fa fa-leaf green"></i>
+		Issues
+	  </h1>
+	  <hr />
+	  
+	  <div class="alert alert-danger">
+		<button class="close" data-dismiss="alert"><i class="ace-icon fa fa-times"></i></button>
+	    Please note that most of the following issues have been resolved.
+		<br />
+		Also some have more info as how to avoid them.
+	  </div>
+	  
+  
+	  <div class="help-content">
+		 <h3 class="info-title smaller">1. Webkit browsers</h3>
+		 <div class="info-section">
+		    <ul class="info-list list-unstyled">
+				<li>
+					Webkit browers have a problem especially when resizing window due to over-optimization.
+					<br />
+					They sometimes don't properly redraw layout or apply CSS property changes
+					and the workaround is to force redrawing or recalculating properties
+					for example by hiding and re-showing an element.
+					<br />
+					This also may not work every time.
+				</li>
+				
+				<li>
+					Webkit browsers have a fixed CSS z-index issue.
+					<br />
+					According to:
+					<br />
+					<span class="text-info">http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-position-fixed-elements</span>
+					<br />
+					Chrome has decided to choose a different approach than what's mentioned in standard specs.
+					<br />
+					So now with Firefox and IE,
+					a tooltip, popover or dropdown menu inside content area goes above fixed sidebar,
+					but below <b>.hover</b> submenus or when sidebar is minimized.
+					<br />
+					But in Chrome, popovers, tooltips etc go below fixed sidebar.
+				
+					<div class="hr hr-6"></div>
+				
+					On the other hand when sidebar is fixed in Firefox,
+					text becomes fuzzy,
+					and if we apply <code>-moz-backface-visiblity:hidden</code> it gets better
+					which again manipulates stacking context (z-index).
+					
+					<div class="hr hr-6"></div>
+					As a result, now fixed sidebar will be above all elements of content area, so 
+					you should take care to show dropdowns, popovers or tooltips in a direction which
+					don't go below fixed sidebar.
+					<br />
+					There is an example of changing tooltip direction in <a href="#elements.tooltip.notes" class="help-more">Tooltip section</a>
+					
+					<div class="hr hr-6"></div>
+					
+					The only cross-browser workaround to this is to detach a submenu from sidebar on mouse hover,
+					append it to body and then put it back in its place on mouseleave.
+				</li>
+				
+				<li>
+					Old Safari versions have a flickering issue when sidebar has scrollbars and there is an animated icon in content area.
+					<br />
+					This may not be an issue with updated versions, but Safari for Windows has not been updated for a long time which again is a rarely used browser in Windows.
+				</li>
+			</ul>
+		 </div>
+		 
+		 
+		 <h3 class="info-title smaller">2. Chrome</h3>
+		 <div class="info-section">
+		    <ul class="info-list list-unstyled">
+				<li>
+					 Chrome has a problem with responding to click events on Ace buttons becauseo of "move down" effect.
+					 <br />
+					 I have tried to fix this and its seems to be working now.
+					 <br />
+					 But if the problem persists you can remove <code>button.btn:active</code> CSS rule
+					 inside <code>assets/css/less/buttons.less</code>
+					 or <code>assets/css/ace.css</code>
+				</li>
+				
+				<li>
+					Most of the above webkit issues apply to Chrome as well.
+				</li>
+			</ul>
+		 </div>
+		 
+		 
+		 <h3 class="info-title smaller">3. Android Default Browser &amp; Chrome</h3>
+		 <div class="info-section">
+		    <ul class="info-list list-unstyled">
+				<li>
+					Android's default browser has an issues with <code>top:auto</code> when
+					sidebar or breadcrumbs is fixed
+				<li>
+				
+				<li>
+					When sidebar is fixed, document is in RTL mode and there are animated icons inside navbar,
+					Android default browser will misplace sidebar.
+					<br />
+					So you can avoid this by removing animated icons in RTL mode.
+				</li>
+				
+				<li>
+					Android's default browser doesn't trigger window resize properly when address bar is hidden.
+					It's not a big deal
+				</li>
+				
+				<li>
+					Chrome Browser on Android, doesn't respond to "mouse hover" events the way
+					Android's Default Browser or Android Firefox do.
+				</li>
+			</ul>
+		 </div>
+		 
+		 
+		 <h3 class="info-title smaller">4. iOS Safari</h3>
+		 <div class="info-section">
+		    <ul class="info-list list-unstyled">
+				<li>
+					iOS default browser has a problem when you click on sidebar items
+					that are hidden at first and are shown when user scrolls down to view them
+				</li>
+				<li>
+					The link receives click event and all handlers are triggered.
+					<br />
+					It just doesn't navigate to the url.
+				</li>
+				
+				<li>
+					So I used <code>document.location = link_element.attr('href')</code>
+					to navigate to new url and it works.
+					<br />
+					But if you are using custom handlers for a link and want to avoid navigation,
+					just add <code>data-link="false"</code> attribute to the link to disable navigation:
+<pre data-language="html">
+<a href="some/path/" data-link="false">
+  don't navigate (iOS)
+</a>
+</pre>
+				</li>
+				
+				
+				<li>
+					Also when navbar is fixed and an input element receives focus, 
+					fixed navbar won't be redrawn.
+					<br />
+					Currently I have added a workaround which forces redraw of navbar.
+				</li>
+			</ul>
+		 </div>
+		 
+
+		 
+		 <h3 class="info-title smaller">5. RTL</h3>
+		 <div class="info-section">
+		    <ul class="info-list list-unstyled">
+				<li>
+					When using settings box to switch RTL &amp; LTR mode several times,
+					some browsers may not redraw elements properly.
+				</li>
+				
+				<li>
+					It's not an issue and when you make RTL-specific changes in your server side response,
+					browser will render pages correctly.
+				</li>
+				
+				<li>
+					Also when sidebar is fixed and there are animated icons inside navbar,
+					Android default browser will misplace sidebar.
+					<br />
+					So you can avoid this by removing animated icons in RTL mode.
+				</li>
+			</ul>
+		 </div>
+		 
+	  </div>
+</section>

src/main/webapp/static/ace/docs/sections/pages/dashboard.html

@@ -0,0 +1,351 @@
+<section>
+	<h1 class="blue" data-id="#pages/dashboard"><i class="ace-icon fa fa-desktop grey"></i> Dashboard</h1>
+
+	
+	<div class="hr hr-double hr32"></div>
+
+
+	<!-- #section:pages/dashboard -->
+	<div class="help-content">
+		<h3 class="info-title smaller" data-id="#pages/dashboard.infobox">Infobox</h3>
+		<!-- #section:pages/dashboard.infobox -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+			Little stat and info boxes which consist of <code>.infobox-icon</code> and <code>.infobox-data</code>
+			and optional <code>.stat</code> arrows or <a href="#elements.badge" class="help-more"><code>.badges</code></a>
+			<br />
+			<div class="well well-sm">
+				<div class="infobox infobox-green">
+				  <div class="infobox-icon">
+					 <i class="ace-icon fa fa-comments"></i>
+				  </div>
+					
+				  <div class="infobox-data">
+					 <span class="infobox-data-number">32</span>
+					 <div class="infobox-content">comments</div>
+				  </div>
+				 
+				  <div class="stat stat-success">8%</div>
+				</div>
+			</div>
+			
+<pre data-language="html">
+<div class="infobox infobox-green">
+  <div class="infobox-icon">
+     <i class="ace-icon fa fa-comments"></i>
+  </div>
+	
+  <div class="infobox-data">
+     <span class="infobox-data-number">32</span>
+     <div class="infobox-content">comments</div>
+  </div>
+ 
+  <div class="stat stat-success">8%</div>
+</div>
+</pre>
+			</li>
+			
+			<li>
+				Infobox colors are:
+				<ol>
+					<li><code>.infobox-purple</code></li>
+					<li><code>.infobox-purple2</code></li>
+					<li><code>.infobox-pink</code></li>
+					<li><code>.infobox-blue</code></li>
+					<li><code>.infobox-blue2</code></li>
+					<li><code>.infobox-blue3</code></li>
+					<li><code>.infobox-red</code></li>
+					<li><code>.infobox-brown</code></li>
+					<li><code>.infobox-wood</code></li>
+					<li><code>.infobox-light-brown</code></li>
+					<li><code>.infobox-orange</code></li>
+					<li><code>.infobox-orange2</code></li>
+					<li><code>.infobox-green</code></li>
+					<li><code>.infobox-green2</code></li>
+					<li><code>.infobox-grey</code></li>
+					<li><code>.infobox-black</code></li>
+				</ol>
+<pre data-language="html">
+<div class="infobox infobox-purple">
+</div>
+</pre>
+			</li>
+
+			<li>
+				<!-- #section:pages/dashboard.infobox.dark -->
+				Use <code>.infobox-dark</code> class for dark style:
+<pre data-language="html">
+<div class="infobox infobox-orange infobox-dark">
+</div>
+</pre>
+				<!-- /section:pages/dashboard.infobox.dark -->
+			</li>
+			
+			<li>
+				Using <code>.infobox-small</code> class makes it smaller:
+<pre data-language="html">
+<div class="infobox infobox-orange infobox-small">
+</div>
+</pre>
+			</li>
+			
+			<li>
+				<!-- #section:pages/dashboard.infobox.stat -->
+				You can use <code>.badge</code> or <code>.stat</code> elements inside infobox:
+<pre data-language="html">
+<div class="infobox infobox-orange2">
+ ...
+ <div class="badge badge-success">+32% <i class="ace-icon fa fa-arrow-up"></i></div>
+</div>
+</pre>
+				See <a href="#elements.badge" class="help-more">badge section</a> for more info about badegs
+				<div class="hr hr-6"></div>
+				<div class="space-4"></div>
+<pre data-language="html">
+<div class="infobox infobox-orange2">
+ ...
+ <div class="stat stat-important">4%</div>
+</div>
+</pre>
+				<code>.stat</code> can have <code>.stat-success</code> & <code>.stat-important</code> classes
+				<!-- /section:pages/dashboard.infobox.stat -->
+			</li>
+			
+			
+			<li>
+			<!-- #section:pages/dashboard.infobox.sparkline -->
+				When using <a href="#plugins/charts.sparkline" class="help-more">Sparkline plugin</a> wrap it inside a <code>.infobox-chart</code>:
+<pre data-language="html">
+<div class="infobox infobox-orange2">
+   <div class="infobox-chart">
+       <span class="sparkline" data-values="196,128,202,177,154,94,100,170,224"></span>
+   </div>
+   <div class="infobox-data">
+      <span class="infobox-data-number">6,251</span>
+      <div class="infobox-content">pageviews</div>
+   </div>
+</div>
+</pre>
+			<!-- /section:pages/dashboard.infobox.sparkline -->
+			</li>
+			
+			<li>
+			<!-- #section:pages/dashboard.infobox.easypiechart -->
+				When using <a href="#plugins/charts.easypiechart" class="help-more">Easy pie chart plugin</a> wrap it inside a <code>.infobox-progress</code>:
+<pre data-language="html">
+<div class="infobox infobox-blue2">
+   <div class="infobox-progress">
+      <div class="easy-pie-chart percentage" data-percent="42" data-size="46">
+         <span class="percent">42</span>%
+      </div>
+   </div>
+   <div class="infobox-data">
+      <span class="infobox-text">traffic used</span>
+      <div class="infobox-content"><span class="bigger-110">~</span> 58GB remaining</div>
+   </div>
+</div>
+</pre>
+			<!-- /section:pages/dashboard.infobox.easypiechart -->
+			</li>
+			
+			
+ 		 </ul>
+		</div>
+		<!-- /section:pages/dashboard.infobox -->
+
+	
+		<h3 class="info-title smaller" data-id="#pages/dashboard.conversations">Conversation List</h3>
+		<!-- #section:pages/dashboard.conversations -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Conversations are inside a <code>.dialogs</code> element and each item is a
+				<code>.itemdiv.dialogdiv</code>:
+<pre data-language="html">
+<div class="dialogs">
+  <div class="itemdiv dialogdiv">
+
+  </div>
+</div>
+</pre>
+			</li>
+			
+			 <li>
+				Each item has several optional parts, such as <code>.body</code>
+				<code>.user</code> <code>.time</code> <code>.tools</code> etc:
+<pre data-language="html">
+  <div class="user">
+    <img alt="User's Avatar" src="path/to/avatar" />
+  </div>
+
+  <div class="body">
+      <div class="time"><i class="ace-icon fa fa-clock-o"></i> <span class="blue">2 min</span></div>
+      <div class="name">
+         <a href="#">name</a>
+      </div>
+      <div class="text">message text</div>
+			
+      <div class="tools">
+        <a href="#" class="btn btn-minier btn-info"><i class="icon-only ace-icon fa fa-share"></i></a>
+      </div>
+  </div>
+</pre>
+			 </li>
+			 
+			 
+			 <li>
+				For more info please see
+				<br />
+				<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/partials/index/</span>conversations.mustache</code>
+			</li>
+		 </ul>
+		</div>
+		<!-- /section:pages/dashboard.conversations -->
+		
+
+		<h3 class="info-title smaller" data-id="#pages/dashboard.tasks">Task List</h3>
+		<!-- #section:pages/dashboard.tasks -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Task list is an <code>.item-list</code> which contains several 
+				items with different border colors:
+<pre data-language="html">
+<ul class="item-list">
+  <li class="item-red"> ... </li>
+  <li class="item-green"> ... </li>
+</ul>
+</pre>
+			</li>
+			
+			<li>
+				Available colors are:
+				<ol>
+					<li><code>.item-orange</code></li>
+					<li><code>.item-orange2</code></li>
+					<li><code>.item-red</code></li>
+					<li><code>.item-red2</code></li>
+					<li><code>.item-green</code></li>
+					<li><code>.item-green2</code></li>
+					<li><code>.item-blue</code></li>
+					<li><code>.item-blue2</code></li>
+					<li><code>.item-blue3</code></li>
+					<li><code>.item-pink</code></li>
+					<li><code>.item-purple</code></li>
+					<li><code>.item-black</code></li>
+					<li><code>.item-grey</code></li>
+					<li><code>.item-brown</code></li>
+					<li><code>.item-default</code></li>
+				</ol>
+			</li>
+			
+			<li>
+				For more info please see
+				<br />
+				<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/partials/index/</span>tasks.mustache</code>
+			</li>
+			
+		 </ul>
+		<!-- /section:pages/dashboard.tasks -->
+		</div>
+		
+		
+		<h3 class="info-title smaller" data-id="#pages/dashboard.members">Member List</h3>
+		<!-- #section:pages/dashboard.members -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Member list is a <code>.clearfix</code> container with several
+				<code>.itemdiv.memberdiv</code> items:
+<pre data-language="html">
+<div class="clearfix">
+  <div class="itemdiv memberdiv">
+    ....
+  </div>
+</div>
+</pre>
+			</li>
+			
+			<li>
+				Each item has several parts such as <code>.user</code> <code>.body</code>, etc :
+<pre data-language="html">
+<div class="itemdiv memberdiv">
+  <div class="user">
+    <img src="path/to/avatar" alt="Avatar">
+  </div>
+
+  <div class="body">
+    <div class="name"><a href="#">Name</a></div>
+    <div class="time"><i class="ace-icon fa fa-clock-o"></i> <span class="green">20 min</span></div>
+    <div>
+       <!-- user info, such as status, a menu, etc -->
+    </div>
+  </div>
+</div>
+</pre>
+			</li>
+			
+			<li>
+				For more info please see
+				<br />
+				<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/partials/index/</span>members.mustache</code>
+			</li>
+			
+		 </ul>
+		</div>
+		<!-- /section:pages/dashboard.members -->
+		
+		
+		<h3 class="info-title smaller" data-id="#pages/dashboard.comments">Comment List</h3>
+		<!-- #section:pages/dashboard.comments -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Comments are inside <code>.comments</code> container with several
+				<code>.itemdiv.commentdiv</code> items:
+<pre data-language="html">
+<div class="comments">
+  <div class="itemdiv commentdiv">
+   ...
+  </div>
+</div>
+</pre>
+			</li>
+			
+			<li>
+				Each item has several parts such as <code>.user</code> <code>.body</code> <code>.text</code>, etc:
+<pre data-language="html">
+ <div class="itemdiv commentdiv">
+   <div class="user">
+    <img src="path/to/avatar" alt="Avatar">
+   </div>
+	
+	<div class="body">
+        <div class="name"><a href="#">Bob Doe</a></div>
+        <div class="time"><i class="ace-icon fa fa-clock-o"></i> <span class="green">6 min</span></div>
+        <div class="text">
+            <i class="ace-icon fa fa-quote-left"></i>
+            comment text
+        </div>
+    </div>
+
+    <div class="tools">
+      <!-- some buttons or dropdown -->
+    </div>
+ </div>
+</pre>
+			</li>
+			
+			<li>
+				For more info please see
+				<br />
+				<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/partials/index/</span>comments.mustache</code>
+			</li>
+		 </ul>
+		</div>
+		<!-- /section:pages/dashboard.comments -->
+	
+	</div>
+	<!-- /section:pages/dashboard -->
+</section>

src/main/webapp/static/ace/docs/sections/pages/email.html

@@ -0,0 +1,130 @@
+<section>
+	<div class="help-content">
+		<h3 class="info-title smaller" data-id="#pages/email">Email Templates</h3>
+		<!-- #section:pages/email -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Ace admin template has an <a href="../build/email.html">email converter</a>
+				which takes your HTML code
+				in Bootstrap style and converts it to table layout
+				appropriate for email clients.
+			</li>
+			
+			<li>
+				For starters, there are a few samples provided that you can use and modify to make your own email templates:
+				<ul>
+					<li><code data-open-file="html" class="open-file"><span class="brief-show">build/demo/demo-</span>confirmation.html</code></li>
+					<li><code data-open-file="html" class="open-file"><span class="brief-show">build/demo/demo-</span>navbar.html</code></li>
+					<li><code data-open-file="html" class="open-file"><span class="brief-show">build/demo/demo-</span>newsletter.html</code></li>
+					<li><code data-open-file="html" class="open-file"><span class="brief-show">build/demo/demo-</span>contrast.html</code></li>
+				</ul>
+				
+				Inside email converter, when you select one of the above demo files, some of the options
+				on left side are also modified.
+			</li>
+			
+			<li>
+				You should consider the following for better results with converter.
+			</li>
+			
+			<li>
+				Currently it only works best in Chrome browser as the conversion is done inside the browser
+				and "getMatchedCSSRules" function is used which is only available in webkit browsers.
+			</li>
+			
+			<li>
+				Use <code>.row</code> and <code>.col-sm-*</code> elements to have multiple columns inside a row which will be stacked on top of each other in small devices.
+				<br />
+				If you add <code>.sm-border</code> class to <code>.row</code>, there will be a border separating stacked columns on small devices.
+				
+				<br />
+				
+				You can also use a single <code>.col</code> class for less padding.
+				
+			</li>
+			<li>
+				<code>.row</code> element can have <code>.padding-*</code> class for different content padding values.
+				<br />
+				If you use this, the paddings will be fixed and won't be changed on smaller screens:
+				<br />
+<pre data-language="html">
+  <div class="row padding-12"></div>
+</pre>
+				Use <code>.margin-*</code> class on <code>.row</code> to specify spacing between its columns:
+<pre data-language="html">
+  <div class="row margin-8"></div>
+</pre>
+			</li>
+		
+			<li>
+				Use <code>.clearfix</code> and <code>.pull-left</code> or <code>.pull-right</code> classes to have a table with multiple rows and columns which won't be stacked on top of each other in small devices.
+			</li>
+			
+			<li>
+				Use <code>.navbar</code> class for a navbar which has 100% width.
+			</li>
+			
+			<li>
+				Use <code>.space-*</code>, <code>.break-*</code> and <code>.hr-*</code> classes for spacing or horizontal lines.
+				<br />
+				For example <code>.break-12</code> adds a <i>12px</i> space with body background color
+				and <code>.space-12</code> adds a <i>12px</i> space with content background color.
+				<br />
+				For <code>.hr-*</code> you can also add the optional
+				<code>.padding-*</code> to add padding from sides.
+				<br />
+				If you have nested rows and columns, don't use above classes inside inner rows and columns.
+			</li>
+			
+			<li>
+				<div class="alert alert-info">
+					For each of the above classes (.row, .clearfix, .navbar, .space-*, .hr-*) you can use inline styles to override background color:
+					<code>&lt;div class="space-12" style="background-color: #FF0000;"&gt;&lt;/div&gt;</code>
+				</div>
+			</li>
+			
+			<li>
+				Add <code>.pull-left</code>, <code>.pull-right</code> class to <code>img</code> elements 
+				to make them automatically float to right or left on small devices.
+			</li>
+		
+			<li>
+				You can use some classes to style your email. The following classes can be used:
+				<ul>
+					<li>
+						Alerts, such as <code>.alert-info</code>, etc ...
+					</li>
+					<li>
+						Background classes such as <code>.bg-primary</code>, etc ...
+					</li>
+					<li>
+						Wells, such as <code>.well</code>, <code>.well-sm</code>
+					</li>
+					<li>
+						Text colors and styles such as <code>.blue</code> <code>.red</code>
+						<code>.text-info</code>
+						<code>.bigger-110</code>, etc ...
+					</li>
+					<li>
+						Button & label classes such as
+						<code>.btn-info</code>, <code>.btn-sm</code>, <code>.btn-white</code>, <code>.no-border</code>, <code>.label-success</code>, etc ...
+					</li>
+					<li>
+						Alignment classes such as <code>.text-right</code>, <code>.align-middle</code>, etc ...
+					</li>
+					<li>
+						List classes such as <code>.list-unstyled</code>, <code>.spaced</code>, etc ...
+					</li>
+					
+					<li>
+						And different classes or inline styles such as <code>font-size</code>,
+						<code>line-height</code>, <code>text-decoration</code> <code>list-style-type</code>, etc ...
+					</li>
+				</ul>
+			</li>
+		 </ul>
+		</div>
+	</div>
+	<!-- /section:pages/email -->
+</section>

src/main/webapp/static/ace/docs/sections/pages/error.html

@@ -0,0 +1,22 @@
+<section>
+	<div class="help-content">
+		<h3 class="info-title smaller" data-id="#pages/error">Error Page</h3>
+		<!-- #section:pages/error -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>			
+				Error page doesn't have any special elements
+			</li>
+			<li>
+				There is only <code>.error-container</code> which adds some margin:
+<pre data-language="html">
+<div class="error-container">
+ <!-- error content, for example a .well -->
+</div>
+</pre>
+			</li>
+		 </ul>
+		</div>
+		<!-- /section:pages/error -->
+	</div>	
+</section>

src/main/webapp/static/ace/docs/sections/pages/faq.html

@@ -0,0 +1,42 @@
+<section>
+
+	<!-- #section:pages/faq -->
+	<div class="help-content">
+		<h3 class="info-title smaller" data-id="#pages/faq">FAQ</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				FAQ page consists of <a href="#elements.tab" class="help-more">tabs</a> and 
+				<a href="#elements.accordion" class="help-more">accordions</a> (bootstrap panels):
+<pre data-language="html">
+ <div class="tabbable">
+    <ul id="myTab" class="nav nav-tabs padding-18 tab-size-bigger">
+      <li class="active">
+        <a href="#faq-tab-1" data-toggle="tab">
+            <i class="blue ace-icon fa fa-question-circle bigger-120"></i>
+            General
+        </a>
+      </li>
+    </ul>
+
+    <div class="tab-content no-border padding-24">
+       <div class="tab-pane fade in active" id="faq-tab-1">
+          <h4 class="blue">
+              <i class="ace-icon fa fa-check bigger-110"></i> General Questions
+          </h4>
+
+          <div class="space-8"></div>
+
+          <div class="panel-group accordion-style1 accordion-style2" id="faq-list-1">
+              list of questions
+          </div>
+        </div>
+    </div>
+ </div>
+</pre>				
+			</li>
+		 </ul>
+		</div>
+	</div>
+	<!-- /section:pages/faq -->
+</section>

src/main/webapp/static/ace/docs/sections/pages/gallery.html

@@ -0,0 +1,108 @@
+<section>
+
+	<div class="help-content">
+		<h3 class="info-title smaller" data-id="#pages/gallery">Gallery</h3>
+		<!-- #section:pages/gallery -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				For slideshow <a href="#plugins/misc.colorbox" class="help-more">Colorbox plugin</a> is used.
+				<br />
+				For more info about gallery page see:
+				<br />
+				<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/</span>gallery.mustache</code>
+			</li>
+
+			<li>
+				Thumbnails are inside <code>ul.ace-thumbnails</code>:
+<pre data-language="html">
+ <ul class="ace-thumbnails clearfix">
+   <li>
+     ....
+   </li>
+ </ul>
+</pre>
+			</li>
+			
+			<li>
+<pre data-language="html">
+<li>
+ <a data-rel="colorbox" title="Photo Title" href="path/to/image-1.jpg">
+   <img src="path/to/thumb-1.jpg" alt="150x150" />
+   <!-- optional tags here -->
+   <!-- optional caption here -->
+ </a>
+ <!-- optional tags here -->
+ <!-- optional caption here -->
+ <!-- optional tools -->
+</li>
+</pre>			
+			</li>
+			
+			<li>
+				<!-- #section:pages/gallery.tags -->
+				Tags are bootstrap <a href="#elements.label" class="help-more">labels</a>
+				inside a <code>.tags</code> container, wrapped inside <code>.label-holder</code>:
+<pre data-language="html">
+<div class="tags">
+  <span class="label-holder">
+    <span class="label label-info">tag1</span>
+  </span>
+  ...
+</div>
+</pre>
+				<!-- /section:pages/gallery.tags -->
+			</li>
+			
+			<li>
+				<!-- #section:pages/gallery.tools -->
+				Tools are inside <code>.tools</code> with 4 positions:
+				<ol>
+					<li><code>.tools</code></li>
+					<li><code>.tools.tools-bottom</code></li>
+					<li><code>.tools.tools-left</code></li>
+					<li><code>.tools.tools-right</code></li>
+				</ol>
+				You can also add <code>.in</code> class to make it visible by default:
+				
+<pre data-language="html">
+<a data-rel="colorbox" title="Photo Title" href="path/to/image-1.jpg">
+   <img src="path/to/thumb-1.jpg" alt="150x150" />
+</a>
+<div class="tools tools-bottom">
+   <a href="#"><i class="ace-icon fa fa-link"></i></a>
+   <a href="#"><i class="ace-icon fa fa-paperclip"></i></a>
+</div>
+</pre>
+				<!-- /section:pages/gallery.tools -->
+			</li>
+
+			<li>
+				<!-- #section:pages/gallery.caption -->
+				Optional caption:
+<pre data-language="html">
+ <div class="text">
+    <div class="inner">Sample Caption on Hover</div>
+ </div>
+</pre>
+			with optional links:
+<pre data-language="html">
+<img src="path/to/thumb-1.jpg" alt="150x150" />
+<div class="text">  
+  <div class="inner">
+     <span>Some Title!</span>
+     <br />
+     <a data-rel="colorbox" href="path/to/image-1.jpg"><i class="ace-icon fa fa-search-plus"></i></a>
+     <a href="#" title="Share"><i class="ace-icon fa fa-share"></i></a>
+  </div>
+</div>
+</pre>
+				<!-- /section:pages/gallery.caption -->
+			</li>
+		
+		 </ul>
+		</div>
+		<!-- /section:pages/gallery -->
+	
+	</div>
+</section>

src/main/webapp/static/ace/docs/sections/pages/inbox.html

@@ -0,0 +1,486 @@
+<section>
+	<h1 class="blue" data-id="#pages/inbox">Inbox</h1>
+
+	<!-- #section:pages/inbox -->
+	<div class="help-content">
+		<h3 class="info-title smaller">Inbox</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Inbox page consists of several parts and elements wrapped inside a tab:
+<pre data-language="html">
+<div class="tabbable">
+  <ul class="nav nav-tabs inbox-tabs padding-16 tab-size-bigger tab-space-1" id="inbox-tabs">
+     <!-- tab buttons -->
+  </ul>
+
+  <div class="tab-content">
+     <!-- tab/inbox content -->
+  </div>
+</div>
+</pre>
+			</li>
+			
+			<li>
+				You can see the following files for more info:
+				<br />
+				<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/</span>inbox.mustache</code>
+				<br />
+				And the files inside:
+				<br />
+				<code>mustache/app/views/pages/partials/inbox</code>
+			</li>
+			
+			<li>
+				<!-- #section:pages/inbox.compose-btn -->
+				<b>New Mail</b> button with <code>.btn-new-mail</code> class is (optionally) inside tab list:
+<pre data-language="html">
+<ul class=" ... ">
+  <li class="li-new-mail pull-right">
+    <a class="btn-new-mail" data-target="write" href="#write" data-toggle="tab">
+      <span class="btn btn-purple no-border">
+         <i class="ace-icon fa fa-envelope"></i>
+         Write Mail
+      </span>
+    </a>
+  </li>
+
+</ul>
+</pre>
+				<!-- /section:pages/inbox.compose-btn -->
+			</li>
+			
+			<li>
+				Tab pane consists of navbar, message list and message footer:
+<pre data-language="html">
+<div class="message-container">
+
+  <div id="id-message-list-navbar" class="message-navbar align-center clearfix">
+   ...
+  </div>
+
+  <div class="message-list-container">
+   ...
+  </div>
+
+  <div class="message-footer clearfix">
+   ...
+  </div>
+
+</div>
+</pre>
+			</li>
+			
+			<li>
+				<h3 class="hidden" data-id="#pages/inbox.navbar">Message Navbar</h3>
+				<!-- #section:pages/inbox.navbar -->
+				For more info about navbar you can see the following file:
+				<br />
+				<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/partials/</span>inbox/navbar.mustache</code>
+				
+				<div class="hr hr-8 hr-dotted"></div>
+				
+				Message navbar <code>.message-navbar</code> consists of <code>.message-bar</code> which contains
+				title of the pane and toolbar buttons.
+				<br />
+<pre data-language="html">
+<div class="message-bar">
+  <div class="message-infobar" id="id-message-infobar">
+    <!-- title of the pane -->
+    <!-- for example "Inbox (32 unread)" -->
+  </div>
+  <div class="message-toolbar hide">
+    <!-- some action buttons, displayed when a message is selected from list --><
+  </div>
+</div>
+</pre>
+				<div class="hr hr-16 hr-double hr-dotted"></div>
+			
+				There are also other areas such as "Search box", "Sort Messages", etc, which
+				are inside <code>.messagebar-item-left</code> or <code>.messagebar-item-right</code> classes:
+<pre data-language="html">
+<div class="message-bar">...</div>
+
+<div>
+   <div class="messagebar-item-left">
+     <!-- contains Select Message dropdown -->
+   </div>
+   <div class="messagebar-item-right">
+      <!-- contains Sort Message dropdown -->
+   </div>
+   <div class="nav-search minimized">
+      <!-- contains search box -->
+   </div>
+</div>
+</pre>
+
+			<!-- /section:pages/inbox.navbar -->
+			</li>
+			
+			<li>
+				<!-- #section:pages/inbox.navbar-search -->
+				Search box is similar to breadcrumbs <a href="#basics/content.searchbox" class="help-more">searchbox</a>:
+				
+<pre data-language="html">
+<div class="nav-search minimized">
+  <form class="form-search">
+    <span class="input-icon">
+       <input type="text" placeholder="Search inbox ..." class="input-small nav-search-input" autocomplete="off" />
+       <i class="ace-icon fa fa-search nav-search-icon"></i>
+    </span>
+  </form>
+</div>
+</pre>
+			   <!-- /section:pages/inbox.navbar-search -->
+			</li>
+			
+		   </ul>
+		</div>
+
+
+
+		<h3 class="info-title smaller" data-id="#pages/inbox.message-list">Message List</h3>
+		<!-- #section:pages/inbox.message-list -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				<code>.message-list-container</code> contains a list of messages wrapped inside <code>.message-list</code>:
+<pre data-language="html">
+<div class="message-container">
+  <!-- message navbar here -->
+
+
+  <div class="message-list-container">
+    <div class="message-list">
+       <div class="message-item message-unread">
+         ....
+       </div>
+	   
+	   .
+	   .
+	   .
+	   
+    </div><!-- /.message-list -->
+ </div><!-- /.message-list-container -->
+</div>
+</pre>
+			</li>
+			
+			<li>
+				<h3 class="hidden" data-id="#pages/inbox.message-list.item">Message Item</h3>
+				<!-- #section:pages/inbox.message-list.item -->
+				A message item in the list consists of different elements:
+				<ol>
+				    <li>A checkbox to select the message</li>
+					<li><code>.message-star</code> A star icon to mark messages as starred/unstarred</li>
+					<li><code>.sender</code> Which is the sender's name</li>
+					<li><code>.time</code> Which is the time the message was sent/received</li>
+					<li><code>.attachment</code> Which indicates there's an attachment</li>
+					<li>
+						<code>.summary</code>
+						Which contains message summary wrapped inside a <code>.text</code>
+						and an optional <code>.mail-tag</code> or <code>.message-flags</code>
+					</li>
+				</ol>
+<pre data-language="html">
+<div class="message-item message-unread">
+   <label class="inline">
+      <input type="checkbox" class="ace" />
+      <span class="lbl"></span>
+   </label>
+		  
+   <i class="message-star ace-icon fa fa-star orange2"></i>
+   <span title="Alex John Red Smith" class="sender">Alex Smith </span>
+   <span class="time">1:33 pm</span>
+   <span class="attachment"><i class="ace-icon fa fa-paperclip"></i></span>
+		  
+   <span class="summary">
+      <!-- <span class="badge badge-pink mail-tag"></span> -->
+      <!-- <span class="message-flags"> <i class="ace-icon fa fa-reply light-grey"></i> </span> -->
+      <span class="text">Click to open this message</span>
+   </span>
+</div>
+</pre>
+			<!-- /section:pages/inbox.message-list.item -->
+			</li>
+
+
+			<li>
+				<h3 class="hidden" data-id="#pages/inbox.message-footer">Message Footer</h3>
+				<!-- #section:pages/inbox.message-footer -->
+				<code>.message-footer</code> consists of
+				optional parts such as a pagination:
+<pre data-language="html">
+<div class="message-footer clearfix">
+  <div class="pull-left">151 messages total</div>
+  <div class="pull-right">
+    <ul class="pagination middle">
+     ....
+    </ul>
+  </div>
+</div>
+</pre>
+				
+
+				<div class="hr hr-8"></div>
+				2nd footer style has <code>.message-footer-style2</code> class:
+<pre data-language="html">
+<div class="message-footer message-footer-style2 clearfix">
+  <div class="pull-left">
+    simpler footer
+  </div>
+
+  <div class="pull-right">
+    ...
+  </div>
+</div>
+</pre>
+				<div class="hr hr-8"></div>
+				See the following file for more info:
+				<br />
+				<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/partials/inbox</span>message_footer.mustache</code>
+
+				<!-- /section:pages/inbox.message-footer -->
+			</li>
+		   </ul>
+		 </div>
+		 <!-- /section:pages/inbox.message-list -->
+		 
+		 
+		 
+		<h3 class="info-title smaller" data-id="#pages/inbox.message-content">Message Content</h3>
+		<!-- #section:pages/inbox.message-content -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Message details is inside <code>.message-content</code> and
+				consists of <code>.message-header</code>, <code>.message-body</code>
+				and <code>.message-attachment</code>:
+<pre data-language="html">
+<div class="message-list-container">
+ <div class="message-content" id="id-message-content">
+   <div class="message-header clearfix">
+    ...
+   </div>
+  
+   <div class="message-body">
+    ...
+   </div>
+  
+   <div class="message-attachment clearfix">
+    ...
+   </div>
+ </div>
+</div>
+</pre>
+			</li>
+			
+			<li>
+				<!-- #section:pages/inbox.message-header -->
+				<code>.message-header</code> consists of optional elements, for example <code>.sender</code>, <code>.time</code>
+				and action buttons:
+<pre data-language="html">
+<div class="message-header clearfix">
+  <div class="pull-left">
+    <span class="blue bigger-125">
+       Message title
+    </span>
+    <div class="space-4"></div>
+
+    <i class="ace-icon fa fa-star orange2"></i><!-- star -->
+    &nbsp;
+    <img class="middle" alt="John's Avatar" src="{{path.assets}}/avatars/avatar.png" width="32" /><!-- sender photo -->
+    &nbsp;
+    <a href="#" class="sender">John Doe</a><!-- sender name -->
+    &nbsp;
+    <i class="ace-icon fa fa-clock-o bigger-110 orange middle"></i>
+    <span class="time">Today, 7:15 pm</span><!-- time sent -->
+  </div>
+
+  <div class="pull-right action-buttons">
+    <a href="#">
+       <i class="ace-icon fa fa-reply green icon-only bigger-130"></i>
+    </a>
+  </div>
+</div>
+</pre>
+			<!-- /section:pages/inbox.message-header -->
+			</li>
+			
+			<li>
+				<!-- #section:pages/inbox.message-body -->
+				Message body is inside <code>.message-body</code> element
+				<!-- /section:pages/inbox.message-body -->
+			</li>
+			
+			<li>
+				<!-- #section:pages/inbox.message-attachment -->
+				Message attachment consists of optional <code>.attachment-title</code>,
+				<code>.attachment-list</code> and <code>.attachment-images</code>
+<pre data-language="html">
+ <div class="attachment-title">
+ </div>
+ 
+ <ul class="attachment-list pull-left list-unstyled">
+ </ul>
+ 
+ <div class="attachment-images">
+    <div>
+        <img width="36" alt="image 4" src="path/to/thumb-1.jpg" />
+		...
+    </div>
+ </div>
+</pre>
+			
+				<div class="hr hr-8"></div>
+				
+				Attachment list consists of <code>.action-buttons</code> and
+				<code>.attached-file</code> which has <code>attached-name</code>:
+<pre data-language="html">
+<li>
+  <a href="#" class="attached-file">
+    <i class="ace-icon fa fa-file-o"></i>
+    <span class="attached-name">Document1.pdf</span>
+  </a>
+  <span class="action-buttons">
+    <a href="#"><i class="ace-icon fa fa-download blue"></i></a>
+    <a href="#"><i class="ace-icon fa fa-trash-o red"></i></a>
+  </span>
+</li>
+</pre>
+
+				<!-- /section:pages/inbox.message-attachment -->
+			</li>
+		   </ul>
+		 </div>
+		 <!-- /section:pages/inbox.message-content -->
+			
+	
+
+	
+	    <h3 class="info-title smaller" data-id="#pages/inbox.compose">Message Compose</h3>
+		<!-- #section:pages/inbox.compose -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			
+			<li>
+				Message compose area consists of a form with optional elements and a navbar with optional buttons.
+<pre data-language="html">
+<div id="id-message-new-navbar" class="hide message-navbar clearfix">
+  <div class="message-bar">
+    <div class="message-toolbar">
+        <!-- optional buttons -->
+    </div>
+  </div>
+
+  <div>
+    <div class="messagebar-item-left">
+        <a href="#" class="btn-back-message-list">
+           <i class="ace-icon fa fa-arrow-left middle blue"></i>
+           <b class="middle">Back</b>
+        </a>
+    </div>
+    <div class="messagebar-item-right">
+        <span class="btn-send-message blue">
+            <button type="button" class="btn btn-sm btn-primary btn-white btn-round">
+               Send
+               <i class="ace-icon fa fa-arrow-right icon-on-right"></i>
+            </button>
+        </span>
+    </div>
+  </div>
+</div>
+</pre>
+			</li>
+			
+			<li>
+				See the following files for more info:
+				<br />
+				<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/partials/inbox</span>message_form.mustache</code>
+				<br />
+				<code data-open-file="javascript" class="open-file"><span class="brief-show">mustache/app/views/assets/scripts/</span>inbox.js</code>
+			</li>
+			
+		 </ul>
+		 <!-- /section:pages/inbox.compose -->
+		</div>
+		
+		
+
+		<h3 class="info-title smaller">Options</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				You can also make inbox message list more compact by adding
+				<code>.message-condensed</code> class to <code>.message-container</code>
+			</li>
+			
+			<li>
+				Remove <code>.tab-size-bigger</code> from <code>ul.inbox-tabs</code> for smaller tabs
+			</li>
+
+			<li>
+				If you don't want a tabbed inbox, like the image below, you should make the following changes:
+				<div>
+				  <span class="thumbnail inline">
+					<img src="images/tabless-inbox.png" />
+				  </span>
+				</div>
+				
+				<ol>
+					<li>Add <code>.inbox-menu</code> according to following file:
+						<br />
+						<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/partials/</span>inbox/folders.mustache</code>
+					</li>
+					<li>
+						Remove <code>.tabbable</code> and <code>.tab-pane</code> etc:
+						<br />
+						<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/</span>inbox.mustache</code>
+					</li>
+				</ol>
+
+<pre data-language="html">
+<div class="col-xs-2 inbox-menu">
+  <div class="center">
+    <a href="#" class="btn btn-purple btn-new-mail">
+        <i class="ace-icon fa fa-envelope"></i>
+        Write Mail
+    </a>
+  </div>
+  <div class="space-6"></div>
+  <!-- buttons here (see folders.mustache below) -->
+</div>
+
+<div class="col-xs-10">
+ <div id="inbox">
+   <div class="message-container">
+      <div class="message-list-container">
+         ...
+      </div>
+   </div>
+ </div>
+</div>
+</pre>
+
+			</li>
+		 </ul>
+		</div>
+		
+		
+		<h3 class="info-title smaller">Notes</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Please note that inbox layout and scripts
+				are for demo only and may not be suitable for your application.
+				<br />
+				For example when clicking to open a message, 
+				the message content is already inside the page
+				but	there's some fake waiting to simulate remote content loading.
+			</li>
+		 </ul>
+		</div>
+
+	</div>
+	<!-- /section:pages/inbox -->
+</section>

src/main/webapp/static/ace/docs/sections/pages/invoice.html

@@ -0,0 +1,48 @@
+<section>
+	
+	<div class="help-content">
+		<h3 class="info-title smaller" data-id="#pages/invoice">Invoice</h3>
+		<!-- #section:pages/invoice -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Invoice page has no additional elements or classes and is basically a widget box with a table.
+				<br />
+				<!-- #section:pages/invoice.info -->
+				<code>.invoice-info</code> and <code>.invoice-info-label</code> elements
+				are inside invoice widget header:
+<pre data-language="html">
+<div class="widget-box transparent">
+
+ <div class="widget-header widget-header-large">
+    <h3 class="widget-title grey lighter">
+       <i class="ace-icon fa fa-leaf green"></i>
+       Customer Invoice
+    </h3>
+
+    <div class="invoice-info widget-toolbar no-border">
+       <span class="invoice-info-label">Invoice:</span>
+       <span class="red">#121212</span>
+       <br />
+       <span class="invoice-info-label">Date:</span>
+       <span class="blue">04/04/2014</span>
+    </div>
+
+    <div class="widget-toolbar hidden-480">
+       <a href="#"><i class="ace-icon fa fa-print"></i></a>
+    </div>
+ </div>
+
+ ...
+
+</div>
+</pre>
+				<!-- /section:pages/invoice.info -->
+			</li>
+
+		 </ul>
+		</div>
+		<!-- /section:pages/invoice -->
+
+	</div>
+</section>

src/main/webapp/static/ace/docs/sections/pages/login.html

@@ -0,0 +1,130 @@
+<section>
+
+	<div class="help-content">
+		<h3 class="info-title smaller" data-id="#pages/login">Login</h3>
+		<!-- #section:pages/login -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>			
+			Login page has a more compact structure and generally needs fewer scripts and stylesheets unless
+			you want to include some extra plugins for some form fields.
+			<br />
+			For more info about this please see <a href="#basics/layout.login" class="help-more">Login Layout</a>
+			</li>
+			<li>
+			Basically it consists of three optional widget boxes for login, signup and password sections.
+			</li>
+			<li>
+				You should add <code>.login-layout</code> class to <body>body</code> element:
+<pre data-language="html">
+&lt;body class="login-layout"&gt;
+or
+&lt;body class="login-layout blur-login"&gt;
+or
+&lt;body class="login-layout light-login"&gt;
+</pre>
+			</li>
+			
+			<li>
+				There are three optional background styles:
+				<ol>
+				  <li><code>.login-layout</code> default login background</li>
+				  <li><code>.login-layout.blur-login</code> blurred image background</li>
+				  <li><code>.login-layout.light-login</code> light login background</li>
+				</ol>
+			</li>
+			
+			<li>
+				The (optionally) three boxes are inside <code>.login-container</code>:
+<pre data-language="html">
+<div class="login-container">
+  <div class="center">
+    <!-- page header and text -->
+  </div>
+  <div class="space-6"></div><!-- optional space -->
+  <div class="pos-rel"><!-- a position relative container -->
+     <div class="login-box visible widget-box no-border" id="login-box">
+        <!-- login area -->
+     </div>
+
+     <div class="forgot-box widget-box no-border" id="forgot-box">
+        <!-- forgot area -->
+     </div>
+
+     <div class="signup-box widget-box no-border" id="signup-box">
+        <!-- signup area -->
+     </div>
+  </div>
+</div>
+</pre>
+			</li>
+			
+			<li>
+				Inside login box, there are the optional social login buttons inside
+				<code>.social-or-login</code> and <code>.social-login</code>  container:
+<pre data-language="html">
+<div class="social-or-login center">
+   <span class="bigger-110">Or Login Using</span>
+</div>
+<div class="space-6"></div>
+<div class="social-login center">
+   <a class="btn btn-primary"><i class="ace-icon fa fa-facebook"></i></a>
+   <a class="btn btn-info"><i class="ace-icon fa fa-twitter"></i></a>
+   <a class="btn btn-danger"><i class="ace-icon fa fa-google-plus"></i></a>
+</div>
+</pre>
+			</li>
+			
+			<li>
+				The bottom links that are used to move between boxes
+				and are inside <code>.toolbar</code> which have a class only used to color them:
+<pre data-language="html">
+<div class="toolbar center">
+   <a class="back-to-login-link" data-target='#login-box' href="#">
+     <i class="ace-icon fa fa-arrow-left"></i>
+     Back to login
+   </a>
+</div>
+or
+<div class="toolbar clearfix">
+  <div>
+    <a class="forgot-password-link" data-target="#forgot-box" href="#">
+        <i class="ace-icon fa fa-arrow-left"></i>
+        I forgot my password
+    </a>
+  </div>
+  <div>
+    <a class="user-signup-link" data-target="#signup-box" href="#">
+        I want to register
+        <i class="ace-icon fa fa-arrow-right"></i>
+    </a>
+  </div>
+</div>
+</pre>
+			Each link has a <code>data-target</code> attribute.
+			<br />
+			
+
+			</li>
+			
+			<li>
+				<code>data-target</code> is the selector of target.
+				The following code should also be included in your page for switching between pages:
+<pre data-language="javascript">
+jQuery(function($) {
+ $(document).on('click', '.toolbar a[data-target]', function(e) {
+    e.preventDefault();
+    var target = $(this).data('target');
+    $('.widget-box.visible').removeClass('visible');//hide others
+    $(target).addClass('visible');//show target
+ })
+})
+</pre>
+			</li>
+			
+		 </ul>
+		</div>
+		<!-- /section:pages/login -->
+	</div>
+	
+</section>

src/main/webapp/static/ace/docs/sections/pages/pricing.html

@@ -0,0 +1,109 @@
+<section>
+
+	
+	<div class="help-content">
+		<h3 class="info-title smaller" data-id="#pages/pricing">Pricing Tables</h3>
+		<!-- #section:pages/pricing -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Pricing tables are widget boxes with a few additonal class names.
+				<br />
+				For more info about pricing page see:
+				<br />
+				<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/</span>pricing.mustache</code>
+				<br />
+				<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/partials/</span>pricing/package-large.mustache</code>
+				<br />
+				<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/partials/</span>pricing/package-small.mustache</code>
+			</li>
+			
+			<li>
+				Small pricing style consist of header and body:
+<pre data-language="html">
+ <div class="pricing-span-header col-xs-4 col-sm-3">
+  ...
+ </div>
+ <div class="pricing-span-body col-xs-8 col-sm-9">
+   <div class="pricing-span">
+	 <!-- widget boxes here -->
+   </div>
+ </div>
+</pre>
+
+		</li>
+		<li>
+		    <!-- #section:pages/pricing.small-header -->
+			Header which contains feature list is a widget box and has a <code>.pricing-table-header.list-striped</code> inside it:
+<pre data-language="html">
+ <div class="widget-box transparent">
+   <div class="widget-header"><h5 class="widget-title">Package Name</h5></div>
+   <div class="widget-body">
+     <div class="widget-main no-padding">
+       <ul class="pricing-table-header list-striped list-unstyled">
+          <li>...</li>
+          <li>...</li>
+          <li>...</li>
+       </ul>
+     </div><!-- /.widget-main -->
+   </div><!-- /.widget-body -->
+ </div><!-- /.widget-box -->
+</pre>
+
+			<!-- /section:pages/pricing.small-header -->
+			</li>
+			
+			<li>
+				<!-- #section:pages/pricing.small-body -->
+				Also body consists of several widget boxes with <code>.pricing-box-small</code> class
+				and a <code>.list-striped.pricing-table</code> list and a <code>.price</code> inside it:
+<pre data-language="html">
+ <div class="pricing-box-small widget-box widget-color-blue">
+   <div class="widget-header"><h5 class="widget-title bigger lighter">Name</h5></div>
+   <div class="widget-body">
+      
+      <div class="widget-main no-padding">
+         <ul class="pricing-table list-striped list-unstyled">
+            <li>...</li>
+            <li>...</li>
+            <li>...</li>
+         </ul>
+
+         <div class="price">
+            <span class="label label-lg label-inverse arrowed-in arrowed-in-right">
+               $5<small>/month</small>
+            </span>
+         </div>
+      </div><!-- /.widget-main -->
+
+      <div>
+          <a href="#" class="btn btn-block btn-sm btn-primary"><span>Buy</span></a>
+      </div>
+
+   </div><!-- /.widget-body -->
+ </div><!-- /.widget-box -->
+</pre>
+
+				<!-- /section:pages/pricing.small-body -->
+			</li>
+			
+			<li>
+				<!-- #section:pages/pricing.large -->
+				Large pricing tables are widget boxes with <code>.pricing-box</code> class:
+<pre data-language="html">
+<div class="row">
+   <div class="pricing-box col-xs-6 col-sm-3">
+   </div>
+   ...
+</div>
+</pre>
+				<!-- /section:pages/pricing.large -->
+			</li>
+
+		 </ul>
+		</div>
+		<!-- /section:pages/pricing -->
+
+	</div>
+	
+</section>

src/main/webapp/static/ace/docs/sections/pages/profile.html

@@ -0,0 +1,188 @@
+<section>
+	<div class="help-content">
+		<h3 class="info-title smaller" data-id="#pages/profile">Profile</h3>
+		<!-- #section:pages/profile -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Profile page consists of several sections and plugins.
+				<br />
+				For more information about each plugin please refer to its relevant section.
+			</li>
+			
+			<li>
+			 <!-- #section:pages/profile.picture -->
+			 Profile picture is <code>.img-responsive</code> inside a <code>.profile-picture</code> :
+<pre data-language="html">
+<span class="profile-picture">
+    &lt;img src="path/to/profile-pic.jpg" alt="Alex's Avatar" class="img-responsive" id="avatar" /&gt;
+</span>
+</pre>
+			<!-- /section:pages/profile.picture -->
+			</li>
+			
+			<li>
+			<!-- #section:pages/profile.contact -->
+			Profile contact info is inside <code>.profile-contact-links</code>
+			which contains optional <code>.profile-contact-links</code> and
+			<code>.profile-social-links</code>:
+<pre data-language="html">
+<div class="profile-contact-info">
+  <div class="profile-contact-links align-left">
+     <a href="#" class="btn btn-link">
+        <i class="ace-icon fa fa-plus-circle bigger-120 green"></i>
+        Add as a friend
+     </a>
+  </div>
+
+  <div class="space-6"></div>
+
+  <div class="profile-social-links align-center">
+     <a href="#" class="tooltip-info" title="" data-original-title="Visit my Facebook">
+        <i class="middle ace-icon fa fa-facebook-square fa-2x blue"></i>
+     </a>
+  </div>
+</div>
+</pre>
+			<!-- /section:pages/profile.contact -->
+			</li>
+			
+			<li>
+				<!-- #section:pages/profile.info -->
+				Profile info fields are inside <code>.profile-user-info</code>
+				with optional <code>.profile-user-info-striped</code> class:
+<pre data-language="html">
+<div class="profile-user-info profile-user-info-striped">
+  <div class="profile-info-row">
+    <div class="profile-info-name">
+      field name
+    </div>
+
+    <div class="profile-info-value">
+      field value
+    </div>
+  </div>
+</div>
+</pre>
+				<!-- /section:pages/profile.info -->
+			</li>
+			
+			<li>
+				<!-- #section:pages/profile.feed -->
+				Profile activity is inside <code>.profile-feed</code> with <code>.profile-activity</code> items:
+<pre data-language="html">
+<div class="profile-feed">
+  <div class="profile-activity clearfix">
+    <div>
+        <img class="pull-left" alt="user avatar" src="path/to/avatar" />
+        <!-- or icon ->
+        <!-- <i class="pull-left thumbicon btn-success no-hover"></i> -->
+        <a class="user" href="#">Name</a>
+        <div class="time"><i class="ace-icon fa fa-clock-o bigger-110"></i> Time</div>
+    </div>
+    <div class="tools action-buttons">
+        <a href="#" class="blue"><i class="ace-icon fa fa-pencil"></i></a>
+        <a href="#" class="red"><i class="ace-icon fa fa-times"></i></a>
+    </div>
+  </div>
+</div>
+</pre>
+
+			<!-- /section:pages/profile.feed -->
+			</li>
+			
+			<li>
+				<!-- #section:pages/profile.friends -->
+				Profile friends list which is inside <code>.profile-users</code> 
+				and consists of <code>.itemdiv.memberdiv</code> items
+				with <code>.user</code>, <code>.body</code> and <code>.popover</code> parts:
+<pre data-language="html">
+<div class="profile-users clearfix">
+  <div class="itemdiv memberdiv">
+   <div class="inline pos-rel">
+
+       <div class="user">
+          <a href="#">
+             <img src="path/to/avatar" alt="user avatar" />
+          </a>
+       </div><!-- /.user -->
+
+       <div class="body">
+          <div class="name">
+            <a href="#">
+              <span class="user-status status-idle"></span>
+              user name
+            </a>
+          </div>
+       </div><!-- /.body -->
+
+       <div class="popover">
+         <div class="arrow"></div>
+         <div class="popover-content">
+            <div><b>occupation</b></div>
+            <div class="time">
+              <i class="ace-icon fa fa-clock-o middle bigger-120 orange"></i>
+              <span class="green"></span>
+            </div>
+
+            <div class="hr dotted hr-8"></div>
+            <div class="tools action-buttons">
+               <!-- -->
+            </div>
+         </div>
+       </div><!-- /.popover -->
+
+   </div>
+  </div>
+</div>
+</pre>
+		
+		With some javascript code, you can dynamically change the popover's direction to right or left:
+<pre data-language="javascript">
+$('.memberdiv').on('mouseenter touchstart', function(){
+   var $this = $(this);
+   var $parent = $this.closest('.tab-pane');//or other relevent parent
+
+   var off1 = $parent.offset();
+   var w1 = $parent.width();
+
+   var off2 = $this.offset();
+   var w2 = $this.width();
+
+   var place = 'left';
+   if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) 
+         place = 'right';
+		
+   $this.find('.popover').removeClass('right left').addClass(place);
+ })
+ .on('click', function(e) {
+    e.preventDefault();
+ });
+</pre>
+
+		<!-- /section:pages/profile.friends -->
+		</li>
+		
+		
+		<li>
+			<!-- #section:pages/profile.skill-progress -->
+				Skill progress bars are inside <code>.profile-skills</code> with following markup:
+<pre data-language="html">
+<div class="profile-skills">
+   <div class="progress">
+     <div class="progress-bar progress-bar-purple" style="width:70%">
+	   <span class="pull-left">PHP & MySQL</span>
+	   <span class="pull-right">70%</span>
+	 </div>
+   </div>
+</div>
+</pre>
+
+			<!-- /section:pages/profile.skill-progress -->
+			</li>
+			
+		 </ul>
+		</div>
+	</div>
+	<!-- /section:pages/profile -->
+</section>

src/main/webapp/static/ace/docs/sections/pages/timeline.html

@@ -0,0 +1,85 @@
+<section>
+	
+	<div class="help-content">
+		<h3 class="info-title smaller" data-id="#pages/timeline">Timeline</h3>
+		<!-- #section:pages/timeline -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Timeline page consists of widget boxes and a few extra elements wrapped inside <code>.timeline-container</code>
+			</li>
+			<li>
+				For more info please see:
+				<br />
+				<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/partials/</span>timeline/style_1.mustache</code>
+				</br >
+				<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/pages/partials/</span>timeline/style_2.mustache</code>
+			</li>
+			
+			<li>
+				<!-- #section:pages/timeline.label -->
+				 Each section starts with
+				<code>.timeline-label</code>
+<pre data-language="html">
+<div class="timeline-label">
+   <span class="label label-primary arrowed-in-right label-lg">
+     <b>Today</b>
+   </span>
+</div>
+</pre>
+				<!-- /section:pages/timeline.label -->
+			</li>
+			
+			<li>
+				<!-- #section:pages/timeline.item -->
+				After <code>.timeline-label</code> is the <code>.timeline-items</code> container
+				which consists of several <code>.timeline-item</code> items:
+<pre data-language="html">
+<div class="timeline-items">
+
+  <div class="timeline-item clearfix">
+     <div class="timeline-info">
+       <!-- icon or image -->
+     </div>
+
+     <div class="widget-box transparent">
+       <!-- widget box content -->
+     </div>
+  </div>
+
+</div>
+</pre>
+
+				<!-- #section:pages/timeline.info -->
+			A <code>.timeline-info</code> contains an image or an icon (<code>.timeline-indicator</code>)
+<pre data-language="html">
+<div class="timeline-info">
+   <i class="timeline-indicator ace-icon fa fa-star btn btn-warning no-hover green"></i>
+</div>
+OR
+<div class="timeline-info">
+   <img src="path/to/avatar" alt="User's Avatar" />
+   <span class="label label-info label-sm">16:22</span>
+</div>
+</pre>
+			   <!-- /section:pages/timeline.info -->
+	
+			<!-- /section:pages/timeline.item -->
+			</li>
+			
+			<li>
+				<h3 class="hide" data-id="#pages/timeline.style2">Timeline Style 2</h3>
+				<!-- #section:pages/timeline.style2 -->
+				Second timeline style consists of same elements.
+				<br />
+				You should add 
+				<code>.timeline-style2</code> class to
+				<code>.timeline-container</code> element.
+				<!-- /section:pages/timeline.style2 -->
+			</li>
+		 </ul>
+		</div>
+		<!-- /section:pages/timeline -->
+	</div>
+	
+</section>

src/main/webapp/static/ace/docs/sections/plugins/bootstrap.html

@@ -0,0 +1,75 @@
+<section>
+    <h1 class="hidden"  data-id="#plugins/bootstrap">Bootstrap</h1>
+	<!-- #section:plugins/bootstrap -->
+	<div class="help-content">
+		<h3 class="info-title smaller">Bootstrap</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Ace admin template is based on the latest version of Bootstrap
+			</li>
+			
+			<li>
+				You may want to have on overview of it
+				and keep its documentation at hand.
+			</li>
+			
+			<li>
+				Please use the following link for more info:
+				<br />
+				<a href="http://getbootstrap.com/">getbootstrap.com</a>
+			</li>
+		 </ul>
+		</div>
+		
+		
+        <h3 class="info-title smaller" data-id="#plugins/bootstrap.typeahead">Bootstrap Typeahead</h3>
+		<!-- #section:plugins/bootstrap.typeahead -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				There is also a dropped plugin of Bootstrap 2 which is still available in Ace admin template.
+				<br />
+				It's <code>typeahead</code> plugin and is used by <a href="#plugins/input.tag-input" class="help-more">Tag input plugin</a> and 
+				search box demo.
+				<br />
+				For more info about it, please see:
+				<br />
+				<a href="http://getbootstrap.com/2.3.2/javascript.html#typeahead">http://getbootstrap.com/2.3.2/javascript.html#typeahead</a>
+			</li>
+			
+			<li>
+				To avoid conflicts with the new Typeahead.js plugin, its been renamed to <code>bs_typeahead</code>.
+				<br />
+				Of course the plugins have methods to resolve conflicts by 
+				calling <code>$.fn.typeahead.noConflict();</code>
+				but I found it easier to rename it to something else especially when using
+				both plugins inside an ajax page and coming back and forth to that page multiple times!
+			</li>
+		 </ul>
+		</div>
+		<!-- /section:plugins/bootstrap.typeahead -->
+		
+		<h3 class="info-title smaller" data-id="#plugins/bootstrap.typeahead-js">Typeahead.js</h3>
+		<!-- #section:plugins/bootstrap.typeahead-js -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">	
+			<li>
+				It's the updated version of Bootstrap Typeahead with more features.
+				<br />
+				For more info and documentation about it, please see its page at:
+				<br />
+				<a href="https://twitter.github.io/typeahead.js/">https://twitter.github.io/typeahead.js/</a>
+			</li>
+			<li>
+				To use it, you should include:
+				<br />
+				<code>assets/js/typeahead.jquery.js</code> 
+			</li>
+		 </ul>
+		</div>
+		<!-- /section:plugins/bootstrap.typeahead-js -->
+		
+	</div>
+	<!-- /section:plugins/bootstrap -->
+</section>

src/main/webapp/static/ace/docs/sections/plugins/charts.html

@@ -0,0 +1,336 @@
+<section>
+	<h1 class="blue" data-id="#plugins/charts"><i class="ace-icon fa fa-bar-chart-o grey"></i> Charts</h1>
+
+	<div class="hr hr-double hr32"></div>
+
+	<!-- #section:plugins/charts -->
+	<div class="help-content">
+		<h3 class="info-title smaller" data-id="#plugins/charts.flotchart">Flot Charts</h3>
+		<!-- #section:plugins/charts.flotchart -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Flotcharts is a library used for drawing different kinds of charts.
+			</li>
+			
+			<li>
+				For more info about it, please see <a href="http://www.flotcharts.org/">www.flotcharts.org</a>
+			</li>
+			
+			<li>
+				To use it, you should include:
+				<br />
+				<code>assets/js/flot/jquery.flot.js</code>
+				<br />
+				<code>assets/js/flot/jquery.flot.resize.js</code> (to make it responsive)
+			</li>
+			
+			<li>
+				I have only included the basic files but
+				it has many extra modules for different types of charts which you can download from its page.
+			</li>
+			
+			<li>
+				IE8 support is provided via <b>excanvas</b>.
+				<br />
+				You can use the following code to include excanvas for IE8 and below:
+<pre data-language="html">
+<!--[if lte IE 8]>
+ <script src="path/to/assets/js/excanvas.js"></script>
+<![endif]-->
+ &lt;script src="path/to/assets/js/flotcharts.js"&gt;&lt;/script&gt;
+</pre>
+			</li>
+			
+	
+			<li>
+			A basic pie chart example would be like this:
+<pre data-language="javascript">
+var data = [
+    { label: "social networks",  data: 38.7, color: "#68BC31"},
+    { label: "search engines",  data: 24.5, color: "#2091CF"},
+    { label: "ad campaigns",  data: 8.2, color: "#AF4E96"},
+    { label: "direct traffic",  data: 18.6, color: "#DA5430"},
+    { label: "other",  data: 10, color: "#FEE074"}
+]
+
+$('#piechart-placeholder').css({'width':'90%' , 'min-height':'150px'});
+var my_chart = $.plot('#piechart-placeholder', data, {
+ series: {
+  pie: {
+    show: true,
+    tilt: 0.8,
+    highlight: {
+        opacity: 0.25
+    },
+    stroke: {
+        color: '#fff',
+        width: 2
+    },
+    startAngle: 2
+  }
+ },
+ legend: {
+   show: true,
+   position: position || "ne", 
+   labelBoxBorderColor: null,
+   margin:[-30,15] //some offsetting
+ },
+ grid: {
+   hoverable: true,
+   clickable: true
+ }
+})
+</pre>
+
+Chart tooltip example:
+<pre data-language="javascript">
+//pie chart tooltip example
+//create the tooltip once
+var $tooltip = $("&lt;div class='tooltip top in'>&lt;div class='tooltip-inner'>&lt;/div>&lt;/div>").hide().appendTo('body');
+
+var lastIndex = null;
+$('#piechart-placeholder').on('plothover', function (event, pos, item) {
+   if(item) {
+      if (lastIndex != item.seriesIndex) {
+           lastIndex = item.seriesIndex;
+           var tooltip_text = item.series['label'] + " : " + item.series['percent']+'%';
+           $tooltip.show().children(0).text(tooltip_text);
+           //or
+		   //$tooltip.find('.tooltip-inner').text(tooltip_text);
+       }
+       $tooltip.css({top:pos.pageY + 10, left:pos.pageX + 10});
+   } else {
+      $tooltip.hide();
+      lastIndex = null;
+   }
+ });
+
+</pre>
+			</li>
+			
+			
+			<li>
+			Another basic example:
+<pre data-language="javascript">
+ var d1 = [];//dataset 1 (random data)
+ for (var i = 0; i < Math.PI * 2; i += 0.5) {
+   d1.push([i, Math.sin(i)]);
+ }
+ var d2 = [];//dataset 2 (random data)
+ for (var i = 0; i < Math.PI * 2; i += 0.5) {
+    d2.push([i, Math.cos(i)]);
+ }
+
+ //we put the chart inside #sales-charts element
+ $('#sales-charts').css({'width':'100%' , 'height':'220px'});
+ var my_chart = $.plot("#sales-charts", [
+    { label: "Domains", data: d1 },
+    { label: "Hosting", data: d2 }
+ ], {
+    hoverable: true,
+    shadowSize: 0,
+    series: {
+        lines: { show: true },
+        points: { show: true }
+    },
+    xaxis: {
+        tickLength: 0
+    },
+    yaxis: {
+        ticks: 10,
+        min: -2,
+        max: 2,
+        tickDecimals: 3
+    },
+    grid: {
+        backgroundColor: { colors: [ "#fff", "#fff" ] },
+        borderWidth: 1,
+        borderColor:'#555'
+    }
+ });
+</pre>
+			</li>
+			
+			
+			<li>
+				Please note that when drawing charts inside a container which is initially hidden,
+				such as a hidden tab pane or a modal dialog, 
+				dimensions are unknown and charts may not be drawn properly.
+				<br />
+				You should try drawing/redrawing your chart when the container is displayed:
+<pre data-language="javascript">
+$('#my-modal).on('shown.bs.modal', function() {
+  my_chart.draw();
+});
+
+$('#myTab a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
+   //if( $(e.target).is('#my-desired-tab') ) my_chart.draw();
+})
+</pre>
+			</li>
+			
+		 </ul>
+		</div>
+		<!-- /section:plugins/charts.flotchart -->
+
+
+		<h3 class="info-title smaller" data-id="#plugins/charts.sparkline">Sparklines</h3>
+		<!-- #section:plugins/charts.sparkline -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Sparkline plugin generates small inline charts.
+				<br />
+				For more info please see <a href="http://omnipotent.net/jquery.sparkline/">omnipotent.net/jquery.sparkline/</a>
+			</li>
+			
+			<li>
+				To use it, you should include:
+				<br />
+				<code>assets/js/jquery.sparkline.js</code>
+				<br />
+				and <code>excanvas</code> for IE 8 and below:
+<pre data-language="html">
+<!--[if lte IE 8]>
+ <script src="path/to/assets/js/excanvas.min.js"></script>
+<![endif]-->
+ &lt;script src="path/to/assets/js/query.sparkline.js"&gt;&lt;/script&gt;
+</pre>
+			</li>
+			
+			<li>
+				A basic example could be like this:
+<pre data-language="html">
+ <span class="spark" data-values="196,128,202,177,154,94,100,170,224"></span>
+</pre>
+<pre data-language="javascript">
+$('.spark').sparkline('html', 
+  {
+    tagValuesAttribute: 'data-values',//the attribute which has data
+    type: 'bar',
+    barColor: '#FF0000',
+    chartRangeMin: 0
+  }
+ );
+</pre>
+			</li>
+		 </ul>
+		</div>
+		<!-- /section:plugins/charts.sparkline -->
+		
+		
+		<h3 class="info-title smaller" data-id="#plugins/charts.easypiechart">Easy Pie Chart</h3>
+		<!-- #section:plugins/charts.easypiechart -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Easy pie chart plugin generates animated pie charts.
+				<br />
+				For more info please see <a href="https://github.com/rendro/easy-pie-chart/">github.com/rendro/easy-pie-chart/</a>
+			</li>
+			
+			<li>
+				To use it, you should include:
+				<br />
+				<code>assets/js/jquery.easypiechart.min.js</code>
+				<br />
+				and <code>excanvas</code> for IE 8 and below:
+<pre data-language="html">
+<!--[if lte IE 8]>
+ <script src="path/to/assets/js/excanvas.js"></script>
+<![endif]-->
+ &lt;script src="path/to/assets/js/jquery.easypiechart.js"&gt;&lt;/script&gt;
+</pre>
+			</li>
+			
+			<li>
+				A basic example could be like this:
+<pre data-language="javascript">
+$('.easypiechart').each(function(){
+   $(this).easyPieChart({
+       barColor: $(this).css('color'),//maybe take bar color from text color
+       trackColor: '#EEEEEE',
+       scaleColor: false,
+       lineCap: 'butt',
+       lineWidth: 8,
+       animate: /msie\s*(8|7|6)/.test(navigator.userAgent.toLowerCase()) ? false : 1000,//don't animate for IE8 (too slow)
+       size:75
+   });
+});
+</pre>
+			</li>
+			
+			<!--
+			<li>
+				Android's default browser has a problem with latest version of easy pie chart, not rendering properly.
+				<br />
+				<span class="text-info">https://github.com/rendro/easy-pie-chart/issues/81</span>
+				<br />
+				You can use an older version of the plugin <code>jquery.easy-pie-chart-older.js</code>
+				and the problem does not exist.
+			</li>
+			-->
+		 </ul>
+		</div>
+		<!-- /section:plugins/charts.easypiechart -->
+		
+		
+		
+		<h3 class="info-title smaller" data-id="#plugins/charts.knob">jQuery Knob</h3>
+		<!-- #section:plugins/charts.knob -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				jQuery Knob is a touch friendly dial.
+				<br />
+				For more info please see: <a href="http://anthonyterrien.com/knob/">anthonyterrien.com/knob/</a>
+			</li>
+			
+			<li>
+				To use it, you should include:
+				<br />
+				<code>assets/js/jquery.knob.min.js</code>
+				<br />
+				and <code>excanvas</code> for IE 8 and below:
+<pre data-language="html">
+<!--[if lte IE 8]>
+ <script src="path/to/assets/js/excanvas.min.js"></script>
+<![endif]-->
+ &lt;script src="path/to/assets/js/jquery.knob.min.js"&gt;&lt;/script&gt;
+</pre>
+			</li>
+			
+			<li>
+				A basic example could be like this:
+<pre data-language="html">
+ <div class="knob-container inline">
+    <input type="text" class="knob" value="15" data-min="0" data-max="100" data-step="10" data-width="80" data-height="80" data-thickness=".2" />
+ </div>
+</pre>				
+
+<pre data-language="javascript">
+ $(".knob").knob();
+</pre>
+			</li>
+			
+			<li>
+				Please note that latest version of jQuery knob doesn't look good on IE8.
+				<br />
+				So I included the older version and you can include it for IE only using the following conditional comments:
+<pre data-language="html">
+<!--[if !IE]> -->
+<script src="path/to/jquery.knob.js"></script>
+<!-- <![endif]-->
+<!--[if IE]>
+<script src="path/to/jquery.knob-older.js"></script>
+<![endif]-->
+</pre>
+			</li>
+		 </ul>
+		</div>
+		<!-- /section:plugins/charts.knob -->
+		
+	</div>
+	<!-- /section:plugins/charts -->
+</section>

src/main/webapp/static/ace/docs/sections/plugins/date-time.html

@@ -0,0 +1,231 @@
+<section>
+	<h1 class="blue" data-id="#plugins/date-time"><i class="ace-icon fa fa-clock-o grey"></i> Date & Time</h1>
+
+	<div class="hr hr-double hr32"></div>
+
+	<!-- #section:plugins/date-time -->
+	<div class="help-content">
+		<h3 class="info-title smaller" data-id="#plugins/date-time.datepicker">Date picker</h3>
+		<!-- #section:plugins/date-time.datepicker -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Bootstrap date picker plugin.
+				<br />
+				You can find more info at its page:
+				<a href="http://eternicode.github.io/bootstrap-datepicker/">eternicode.github.io/bootstrap-datepicker/</a>
+			</li>
+			
+			<li>
+				To use it, you should include:
+				<br />
+				<code>assets/css/bootstrap-datepicker.css</code>
+				<br />
+				<code>assets/js/date-time/bootstrap-datepicker.js</code>
+			</li>
+			
+			<li>
+				It is also recommended to use browser's built-in datepicker if available, 
+				which should be better especially on small touch devices:
+<pre data-language="html">
+ <input type="date" name="mydate" id="mydate" />
+</pre>
+<pre data-language="javascript">
+ var mydate = $('#mydate')[0];
+ if(mydate.type !== 'date') {//if browser doesn't support "date" input
+    $(mydate).datepicker({
+      //options
+    })
+ }
+</pre>
+			</li>
+			
+			<li>
+				A basic example would be like this:
+<pre data-language="javascript">
+$('#my-date-picker-input').datepicker({
+   autoclose: true,
+   todayHighlight: true
+})
+</pre>
+			</li>
+			
+			<li>
+				You can also use the plugin as a daterange picker:
+<pre data-language="html">
+<div class="input-daterange input-group">
+  <input type="text" name="start" />
+  -
+  <input type="text" name="end" />
+</div>
+</pre>
+<pre data-language="javascript">
+ $('.input-daterange').datepicker({autoclose:true});
+</pre>
+			</li>
+			
+		 </ul>
+		</div>
+		<!-- /section:plugins/date-time.datepicker -->
+
+
+		<h3 class="info-title smaller" data-id="#plugins/date-time.daterangepicker">Daterange picker</h3>
+		<!-- #section:plugins/date-time.daterangepicker -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Bootstrap daterange picker plugin which uses <a href="http://momentjs.com/">moment.js</a>.
+				<br />
+				You can find more info at its page:
+				<a href="https://github.com/dangrossman/bootstrap-daterangepicker">https://github.com/dangrossman/bootstrap-daterangepicker</a>
+			</li>
+			
+			<li>
+				To use it you should include:
+				<br />
+				<code>assets/css/daterangepicker.css</code>
+				<br />				
+				<code>assets/js/date-time/moment.js</code>
+				<br />
+				<code>assets/js/date-time/daterangepicker.js</code>
+			</li>
+			
+			<li>
+				For an example of daterangepicker i118n, see the example at
+				<code>examples/daterange.html</code>
+			</li>
+		 </ul>
+		</div>
+		<!-- /section:plugins/date-time.daterangepicker -->
+		
+		
+		
+		
+		
+		<h3 class="info-title smaller" data-id="#plugins/date-time.timepicker">Time picker</h3>
+		<!-- #section:plugins/date-time.timepicker -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Bootstrap time picker plugin.
+				<br />
+				You can find more info at its page:
+				<a href="http://jdewit.github.io/bootstrap-timepicker/">jdewit.github.io/bootstrap-timepicker/</a>
+			</li>
+			
+			<li>
+				To use it, you should include:
+				<br />
+				<code>assets/css/bootstrap-timepicker.css</code>
+				<br />
+				<code>assets/js/date-time/bootstrap-timepicker.js</code>
+			</li>
+			
+			<li>
+				It is also recommended to use browser's built-in time picker if available, 
+				which should be better especially on small touch devices:
+<pre data-language="html">
+ <input type="date" name="mytime" id="mytime" />
+</pre>
+<pre data-language="javascript">
+ var mytime = $('#mytime')[0];
+ if(mytime.type !== 'time') {//if browser doesn't support "time" input
+    $(mytime).timepicker({
+      //options
+    })
+ }
+</pre>
+			</li>
+			
+			<li>
+				A basic example would be like this:
+<pre data-language="javascript">
+$('#timepicker1').timepicker({
+    minuteStep: 1,
+    showSeconds: true,
+    showMeridian: false
+})
+$('#timepicker1').timepicker('showWidget');//explicit call to display it whenever needed
+</pre>
+			</li>
+		 </ul>
+		</div>
+		<!-- /section:plugins/date-time.timepicker -->
+		
+		
+		
+		
+		<h3 class="info-title smaller" data-id="#plugins/date-time.datetimepicker">Datetime picker</h3>
+		<!-- #section:plugins/date-time.datetimepicker -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Bootstrap datetime picker plugin which uses <a href="http://momentjs.com/">moment.js</a>.
+				<br />
+				You can find more info at its page:
+				<a href="https://github.com/Eonasdan/bootstrap-datetimepicker">https://github.com/Eonasdan/bootstrap-datetimepicker</a>
+			</li>
+			
+			<li>
+				To use it you should include:
+				<br />
+				<code>assets/css/bootstrap-datetimepicker.css</code>
+				<br />				
+				<code>assets/js/date-time/moment.js</code>
+				<br />
+				<code>assets/js/date-time/bootstrap-datetimepicker.js</code>
+			</li>
+		 </ul>
+		</div>
+		<!-- /section:plugins/date-time.datetimepicker -->
+		
+		
+		
+		
+		<h3 class="info-title smaller" data-id="#plugins/date-time.fullcalendar">Fullcalendar</h3>
+		<!-- #section:plugins/date-time.fullcalendar -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Full calendar plugin with drag & drop functionality.
+				<br />
+				You can find more info here:
+				<a href="http://fullcalendar.io/">http://fullcalendar.io/</a>
+			</li>
+			
+			<li>
+				To use it, you should include:
+				<br />
+				<code>assets/css/fullcalendar.css</code>
+				<br />
+				<code>assets/js/jquery-ui.custom.js</code> If you want external event drag &amp; drop functionality.
+				<br />
+				<code>assets/js/date-time/moment.js</code>
+				<br />
+				<code>assets/js/fullcalendar.js</code>
+			</li>
+			
+			<li>
+				For an example, please see calendar's example page inside the template.
+				<br />
+				The Javascript code is located at:
+				<br />
+				<code data-open-file="javascript" class="open-file"><span class="brief-show">mustache/app/views/assets/scripts/</span>calendar.js</code>
+			</li>
+			
+			<li>
+				It seems in its latest update, Fullcalendar has event resizing for events
+				with "yyyy-mm-dd" format only (not sure though)
+				<br />
+				For formatting you can use "moment.js" libary.
+<pre data-language="javascript">
+ moment().format('YYYY-MM-DD'),
+</pre>
+			</li>
+		 </ul>
+		</div>
+		<!-- /section:plugins/date-time.fullcalendar -->
+		
+	</div>
+	<!-- /section:plugins/date-time -->
+</section>

src/main/webapp/static/ace/docs/sections/plugins/editor.html

@@ -0,0 +1,307 @@
+<section>
+	<h1 class="blue" data-id="#plugins/editor"><i class="ace-icon fa fa-text-height grey"></i> Editor</h1>
+
+	<div class="hr hr-double hr32"></div>
+	<!-- #section:plugins/editor -->
+	
+	
+	<!-- #section:plugins/editor.wysiwyg -->
+	<div class="help-content">
+		<h3 class="info-title smaller" data-id="#plugins/editor.wysiwyg">Wysiwyg Editor</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				For more info about wysiwyg plugin, please see its page at:
+				<a href="http://mindmup.github.io/bootstrap-wysiwyg/">http://mindmup.github.io/bootstrap-wysiwyg/</a>
+			</li>
+
+			<li>
+				To use it, you should include:
+				<br />
+				<code>assets/js/jquery.hotkeys.js</code> 
+				<br />
+				<code>assets/js/bootstrap-wysiwyg.js</code>
+			</li>
+
+			<li>
+				For ease of use I have made a wrapper for it and some extra options
+			</li>
+			
+			<li>
+				A basic example is as follows:
+<pre data-language="html">
+<div id="my-editor"><!-- custom html data --></div>
+</pre>
+<pre data-language="javascript">
+$('#my-editor').ace_wysiwyg();
+</pre>
+
+			</li>
+		  </ul>
+		</div>
+		 
+		<h3 class="info-title smaller">Options</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Current ace_wysiwyg wrapper options are:
+				<ol>
+					<li><code>wysiwyg</code> options to send to the plugin</li>
+					<li><code>speech_button</code> whether to add speech input button in Chrome</li>
+					<li><code>toolbar</code> an array of toolbar buttons and options</li>
+					<li><code>toolbar_place</code> optional toolbar placement function</li>
+				</ol>
+				
+				For example the following creates a wyswiwyg with 3 toolbar buttons:
+<pre data-language="javascript">
+$('#my-editor').ace_wysiwyg({
+  toolbar: {
+    'bold',
+    'italic',
+    null,
+
+    {
+        name: 'font',
+        title: 'Custom tooltip',
+        values: ['Some Font!', 'Arial', 'Verdana', 'Comic Sans MS', 'Custom Font!']
+    }
+  }
+});
+</pre>
+			</li>
+			
+			<li>
+				As you can see each toolbar button, is a string or an array of options.
+				<br />
+				All buttons have the following properties:
+				<ol>
+					<li><code>title</code> which is button's tooltip text</li>
+					<li><code>icon</code> which is button's icon</li>
+					<li><code>className</code> which is button's class name</li>
+				</ol>
+			</li>
+			
+			<li>
+				A <code>null</code> value puts a separator(space) between buttons.
+			</li>
+
+			<li>
+				Toolbar buttons and options are as follows:
+				<ol>
+					<li><code>font</code> which takes an array as font names:
+<pre data-language="javascript">
+{
+   name: 'font',
+   title: 'optional custom tooltip',
+   icon: 'fa-leaf', //some custom icon
+   values: ['Some Font!', 'Arial', 'Verdana', 'Comic Sans MS', 'Custom Font!']
+}
+</pre>
+					</li>
+					<li><code>fontSize</code> which takes an array as font sizes:
+<pre data-language="javascript">
+{
+   name: 'fontSize',
+   title: 'optional custom tooltip',
+   values:{1 : 'Size#1' , 2 : 'Size#2' , 3 : 'Size#3' , 4 : 'Size#4' , 5 : 'Size#5'}
+}
+</pre>
+					</li>
+					
+					<li><code>bold</code>:
+<pre data-language="javascript">
+'bold',
+
+//or
+{
+   name: 'bold',
+   title: 'optional custom tooltip',
+   icon: 'fa-leaf' //some custom icon
+}
+</pre>
+					</li>
+					<li><code>italic</code></li>
+					<li><code>strikethrough</code></li>
+					<li><code>underline</code></li>
+					
+					<li><code>insertunorderedlist</code></li>
+					<li><code>insertorderedlist</code></li>
+					<li><code>outdent</code></li>
+					<li><code>indent</code></li>
+					
+					<li><code>justifyleft</code></li>
+					<li><code>justifycenter</code></li>
+					<li><code>justifyright</code></li>
+					<li><code>justifyfull</code></li>
+					
+					<li><code>createLink</code> which inserts a link:
+<pre data-language="javascript">
+{
+   name: 'createLink',
+   title: 'optional custom tooltip',
+   placeholder: 'link input placeholder',
+   button_class: 'btn-purple',//insert button's class
+   button_text: 'Add Link'//insert button's text
+}
+</pre>
+					</li>
+					
+					<li><code>unlink</code></li>
+					
+					<li><code>insertImage</code> which inserts an image:
+<pre data-language="javascript">
+{
+   name: 'createLink',
+   title: 'optional custom tooltip',
+   placeholder: 'image url input placeholder',
+   button_insert_class: 'btn-purple',//insert button's class
+   button_insert: 'Add Link',//insert button's text
+   
+   choose_file: true,//'Whether there should be a "Choose File" button
+   button_class: 'btn-success',//choose button's class
+   button_text: 'Choose an Image'//choose button's text
+}
+</pre>
+					</li>
+					
+					<li>
+						<code>foreColor</code> and <code>backColor</code>
+						which have a list of color values:
+<pre data-language="javascript">
+{
+   name: 'foreColor',
+   title: 'optional custom tooltip',
+   values: ['red', 'blue', '#FF7721']
+}
+</pre>
+					</li>
+					
+					<li><code>undo</code></li>
+					<li><code>redo</code></li>
+					<li><code>viewSource</code></li>
+				</ol>
+			</li>
+			
+			<li>
+				For an example please see <code>examples/wysiwyg.html</code>
+			</li>
+			
+			<li>
+				By default toolbar is placed before content area.
+				Using <code>toolbar_place</code> you can put the toolbar somewhere else:
+<pre data-language="javascript">
+$('#editor2').css({'height':'200px'}).ace_wysiwyg({
+ toolbar_place: function(toolbar) {
+    //for example put the toolbar inside '.widget-header'
+    return $(this).closest('.widget-box')
+           .find('.widget-header').prepend(toolbar)
+           .find('.wysiwyg-toolbar').addClass('inline');
+ }
+});
+</pre>
+				It should return the new toolbar
+			</li>
+			
+			<li>
+				Add <code>.wysiwyg-style1</code> and <code>.wysiwyg-style2</code>
+				to toolbar for alternative styles:
+<pre data-language="javascript">
+$('#editor2').ace_wysiwyg().prev().addClass('wysiwyg-style2');
+</pre>
+			</li>
+		   </ul>
+		 </div>
+
+
+		<h3 class="info-title smaller">Notes</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Normally you want to send the contents of wysiwyg editor to server.
+				<div class="space-4"></div>
+				Most plugins convert a textarea element into a wysiwyg editor,
+				by hiding the textarea and creating an editable DIV or iframe,
+				and updating textarea's content as needed.
+				
+				<div class="space-4"></div>
+				
+				You can use the following method to send html content to server along with form data:
+<pre data-language="javascript">
+$('#myform').on('submit', function() {
+  var hidden_input =
+  $('&lt;input type="hidden" name="my-html-content" /&gt;')
+  .appendTo('#myform');
+
+  var html_content = $('#myeditor').html();
+  hidden_input.val( html_content );
+  //put the editor's HTML into hidden_input and it will be sent to server
+});
+</pre>
+
+			</li>
+			
+			<li>
+				Firefox by default supports image resize inside wyswiwyg editor.
+				<br />
+				For other browsers you can use jQuery UI's resizable feature.
+				<br />
+				An example is included in wysiwyg demo page:
+				<br />
+				<code data-open-file="javascript" class="open-file"><span class="brief-show">mustache/app/views/assets/scripts/</span>wysiwyg.js</code>
+				<br />
+				Search for <code>enableImageResize</code> function inside it
+			</li>
+		 </ul>
+		</div>
+	</div>
+	<!-- /section:plugins/editor.wysiwyg -->
+	
+	
+	<div class="space-12"></div>
+	
+	<!-- #section:plugins/editor.markdown -->
+	<div class="help-content">
+		<h3 class="info-title smaller" data-id="#plugins/editor.markdown">Markdown Editor</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				For more info about markdown editor plugin, please see its page at:
+				<a href="http://toopay.github.io/bootstrap-markdown/">http://toopay.github.io/bootstrap-markdown/</a>
+			</li>
+		 
+			<li>
+				To use markdown editor you should include 
+				<code>assets/js/markdown/markdown.js</code>
+				and
+				<code>assets/js/markdown/bootstrap-markdown.js</code>
+				and optionally
+				<code>assets/js/bootbox.js</code>
+				if you prefer bootstrap modals to default browser dialogs
+			</li>
+			
+			<li>
+				For better styling you should put it inside a widget box
+<pre data-language="html">
+<div class="widget-box widget-color-blue">
+   <div class="widget-header widget-header-small"></div>
+   <div class="widget-body">
+      <div class="widget-main no-padding">
+         <textarea name="content" data-provide="markdown" rows="10"></textarea>
+      </div>
+   </div>
+</div>
+</pre>
+			</li>
+			
+			<li>
+				By specifying <code>data-provide="markdown"</code> attribute for the textarea element,
+				markdown editor will automatically be initiated.
+			</li>
+
+		 </ul>
+		</div>
+	</div>
+	<!-- /section:plugins/editor.markdown -->
+
+	<!-- /section:plugins/editor -->
+</section>

src/main/webapp/static/ace/docs/sections/plugins/fuelux.html

@@ -0,0 +1,461 @@
+<section>
+	<h1 class="blue" data-id="#plugins/fuelux">FuelUX</h1>
+
+	<div class="hr hr-double hr32"></div>
+
+	<div class="help-content">
+		<h3 class="info-title smaller" data-id="#plugins/fuelux.spinner">Spinbox</h3>
+		<!-- #section:plugins/fuelux.spinner -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				To use FuelUX spinner you should include <code>assets/js/fuelux/fuelux.spinner.js</code>
+			</li>
+			
+			<li>
+				For more info and options about it please see its page:
+				<br />
+				<a href="http://getfuelux.com/javascript.html#spinbox">http://getfuelux.com/javascript.html#spinbox</a>
+			</li>
+			
+			<li>
+				For ease of use, I have made a wrapper for the plugin with some extra options:
+<pre data-language="html">
+ <input type="text" name="my-spinner" id="my-spinner" />
+</pre>
+<pre data-language="javascript">
+$('#my-spinner').ace_spinner({
+            min: 0,
+            max: 100,
+           step: 1,
+
+        icon_up: 'fa-plus',
+      icon_down: 'fa-minus',
+   btn_up_class: 'btn-success',
+ btn_down_class: 'btn-danger',
+
+       on_sides: true
+});
+</pre>
+
+			</li>
+			
+			<li>
+				Extra options are :
+				<ol>
+					<li><code>icon_up</code> the icon to be used for "up" button</li>
+					<li><code>icon_down</code> the icon to be used for "down" button</li>
+					<li><code>btn_up_class</code> the button class for "up" button</li>
+					<li><code>btn_down_class</code> the button class for "down" button</li>
+					
+					<li><code>on_sides</code> up and down buttons will be on different sides of input</li>
+					<li><code>touch_spinner</code> bigger buttons will be used</li>
+				</ol>
+			</li>
+			
+			<li>
+				You can also use the following functions to modify spinner element:
+<pre data-language="javascript">
+$('#my-spinner').ace_spinner('disable');
+$('#my-spinner').ace_spinner('enable');
+$('#my-spinner').ace_spinner('value', 3);
+</pre>
+			</li>
+			
+			<li>
+				If you want to use spinbox's functions directly you need to target the <code>.ace-spinner</code>
+				wrapper element:
+<pre data-language="javascript">
+$('#my-spinner').closest('.ace-spinner').spinbox('disable');
+</pre>
+
+				Same is true for events.
+			</li>
+			
+			<li>
+				Latest version of FuelUX renames spinner to spinbox and events are namespaced:
+<pre data-language="javascriot">
+$('#my-spinner').closest('.ace-spinner').on('changed.fu.spinbox', function () {
+  //do something
+})
+</pre>
+			</li>
+			
+			<li>
+				You can add <code>.input-sm</code> to text input element for a smaller and <code>.input-lg</code> for a larger spinner:
+<pre data-language="html">
+ <input type="text" name="my-spinner" id="my-spinner" class="input-lg" />
+</pre>
+			</li>
+			
+			<li>
+				Please note that if you want more advanced functionality, you can use jQuery UI's spinner
+			</li>
+			
+		 </ul>
+		</div>
+
+		<!-- /section:plugins/fuelux.spinner -->
+	</div>
+
+	
+	<div class="hr hr-double hr32"></div>
+
+	
+	<div class="help-content">		
+		<h3 class="info-title smaller" data-id="#plugins/fuelux.wizard">Wizard</h3>
+		<!-- #section:plugins/fuelux.wizard -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				To use FuelUX wizard you should include <code>assets/js/fuelux/fuelux.wizard.js</code>
+			</li>
+			
+			<li>
+				For more info and options about the plugin see its page:
+				<br />
+				<a href="http://getfuelux.com/javascript.html#wizard">http://getfuelux.com/javascript.html#wizard</a>
+			</li>
+			
+			<li>
+				For ease of use, I have made a wrapper for the plugin
+			</li>
+			
+			<li>
+				<div class="alert alert-info">
+					Latest version of FuelUX adds several changes to its wizard plugin:
+					<ul class="spaced">
+						<li>Rename <code>ul.wizard-steps</code> to <code>ul.steps</code></li>
+						<li>
+							<code>ul.steps</code> and <code>div.step-content</code> are wrapped inside a parent for example <code>div#my-wizard</code>
+							and <b>ace_wizard</b> or FuelUX's <b>wizard function</b> is applied to <b>div#my-wizard</b>
+							<br />
+							<span class="red">Note that #my-wizard id is arbitrary and can be anything</span>
+						</li>
+						
+						<li>
+							Each <code>ul.steps > li</code> and <code>.step-pane</code>
+							should have a <code>data-step</code> attribute which specifies step number
+						</li>
+						
+						<li><b>change</b> event is now <b>actionclicked.fu.wizard</b> and <span class="text-success">return false</span>
+							doesn't prevent step change.
+							<br />
+							You should use <code>e.preventDefault()</code> now
+						</li>
+						<li>Instead of $('#my-wizard').data('wizard') you should now use $('#my-wizard').data('fu.wizard')</li>
+					</ul>
+				</div>
+			</li>
+			
+			<li>
+				 <!-- #section:plugins/fuelux.wizard.steps -->
+				The format of your wizard HTML should be something like this:
+<pre data-language="html">
+ <div id="my-wizard"><!-- wrap step list and step panes -->
+    
+    <!-- step list -->
+    <ul class="steps">
+       <li data-step="1" class="active">
+          <span class="step">1</span>
+          <span class="title">Step1</span>
+       </li>
+
+       <li data-step="2">
+          <span class="step">2</span>
+          <span class="title">Step2</span>
+       </li>
+    </ul>
+	
+    <!-- step panes -->
+    <div class="step-content">
+      <div class="step-pane active" data-step="1">
+        <!-- step 1 -->
+      </div>
+   
+      <div class="step-pane" data-step="2">
+        <!-- step 2 -->
+      </div>
+   </div>
+ 
+ </div>
+</pre>
+			It's a <code>ul.steps</code> wrapped inside an element which also contains
+			our step panes.
+			<!-- /section:plugins/fuelux.wizard.steps -->
+			<div class="space-6"></div>
+			<!-- #section:plugins/fuelux.wizard.container -->
+			Steps panes container is a <code>.step-content</code> which contains
+			several <code>.step-pane</code> elements each with a <code>data-step</code> attribute.
+			 <!-- /section:plugins/fuelux.wizard.container -->
+			</li>
+			
+			<li>
+				<!-- #section:plugins/fuelux.wizard.buttons -->
+				A <code>.wizard-actions</code> element containing 
+				<code>.btn-prev</code> and <code>.btn-next</code>
+				buttons should be a sibling are wizard:
+<pre data-language="html">
+<div id="my-wizard">
+ 
+</div>
+
+<div class="wizard-actions">
+  <button class="btn-prev btn">
+    <i class="ace-icon fa fa-arrow-left"></i> Prev
+  </button>
+  <button class="btn-next btn btn-success" data-last="Finish ">
+    Next <i class="ace-icon fa fa-arrow-right icon-on-right"></i>
+  </button>
+</div>
+</pre>
+
+				<code>.btn-next</code> should have a  <code>data-last</code> attribute
+				which is "finish" button's text at final step.
+				
+				<br />
+				
+				<div class="well well-sm">
+					There is also a <code>buttons</code> attribute when using <b>ace_wizard</b>
+					function which allows specifying a custom set of action buttons elsewhere.
+				</div>
+				
+				 <!-- /section:plugins/fuelux.wizard.buttons -->
+			</li>
+			
+			<li>
+				Use the following code to initiate the wizard:
+<pre data-language="javascript">
+$('#my-wizard')
+.ace_wizard({
+  //step: 2 //optional argument. wizard will jump to step "2" at first
+  //buttons: '.my-action-buttons' //which is possibly located somewhere else and is not a sibling of wizard
+})
+.on('actionclicked.fu.wizard' , function(e, info) {
+   //info.step
+   //info.direction
+   
+   //use e.preventDefault to cancel
+})
+.on('changed.fu.wizard', function() {
+   //after step has changed
+})
+.on('finished.fu.wizard', function(e) {
+   //do something when finish button is clicked
+}).on('stepclick.fu.wizard', function(e) {
+   //e.preventDefault();//this will prevent clicking and selecting steps
+});
+</pre>
+			</li>
+			
+			<li>
+				There are several functions available for wizard element which you can use like the
+				following example:
+<pre data-language="javascript">
+ var wizard = $('#my-wizard').data('fu.wizard');
+
+ //move to step 3
+ wizard.currentStep = 3;
+ wizard.setState();
+ 
+ //determine selected step
+ wizard.selectedItem().step
+</pre>
+			</li>
+		 </ul>
+		</div>
+	</div>
+	<!-- /section:plugins/fuelux.wizard -->
+	
+	
+
+	
+	
+	<div class="hr hr-double hr32"></div>
+
+	<h3 class="hidden" data-id="#plugins/fuelux.treeview">Treeview</h3>
+	<!-- #section:plugins/fuelux.treeview -->
+	<div class="help-content">
+		<h3 class="info-title smaller">Treeview</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				To use FuelUX tree you should include <code>assets/js/fuelux/fuelux.treeview.js</code>
+			</li>
+			
+			<li>
+				For more info and options about the plugin please see plugin's page:
+				<br />
+				<a href="http://getfuelux.com/javascript.html#tree">http://getfuelux.com/javascript.html#tree</a>
+			</li>
+			
+			<li>
+				For ease of use, I have made a wrapper for the plugin and added a few extra options
+			</li>
+
+			<li>
+				Extra options are:
+				<ol>
+					<li><code>open-icon</code> The icon for an open tree node</li>
+					<li><code>close-icon</code> The icon for a closed tree node</li>
+					<li><code>selectable</code> Whether items are selectable or not</li>
+					<li><code>selected-icon</code> Icon for a selected tree node</li>
+					<li><code>unselected-icon</code> Icon for a non-selected tree node</li>
+				</ol>
+			</li>
+			
+			<li>
+				A basic tree is initiated like this:
+<pre data-language="html">
+ <ul id="tree1"></ul>
+</pre>
+<pre data-language="javascript">
+$('#tree1').ace_tree({
+       dataSource : treeDataSource ,
+      multiSelect : true,
+      loadingHTML : '&lt;div class="tree-loading"&gt;&lt;i class="ace-icon fa fa-refresh fa-spin blue"&gt;&lt;/i&gt;&lt;/div&gt;',
+  
+      'open-icon' : 'ace-icon tree-minus',
+     'close-icon' : 'ace-icon tree-plus',
+     'selectable' : true,
+  'selected-icon' : 'ace-icon fa fa-check',
+'unselected-icon' : 'ace-icon fa fa-times'
+});
+</pre>
+			</li>
+			
+			<li>
+				Two additional icon classes are defined for tree:
+				<code>.tree-minus</code> and <code>.tree-plus</code>
+			</li>
+			
+			
+			<li>
+				<div class="alert alert-info">
+					Latest version of FuelUX adds several changes to its tree plugin:
+					<ul class="spaced">
+						<li>Tree should be a <code>ul</code> element</li>
+						<!--
+						<li>
+							There is a new <code>folderSelect</code> option which you should usually set its value as <code>false</code>
+						</li>
+						-->
+						
+						<li>
+							<code>name</code> is now deprecated and <code>text</code> should be used.
+						</li>
+						
+						<li>
+							Events are namespaced:
+<pre data-language="javascript">
+$('#tree1').on('opened.fu.tree', function () {
+  //do something
+})
+</pre>
+						</li>
+						
+						<li>
+							dataSource is now a bit different:
+<pre data-language="javascript">
+$('#tree1').ace_tree({
+  dataSource : treeDataSource
+  // ... other options
+});
+</pre>
+
+<pre data-language="javascript">
+var treeDataSource = function(options , callback) {
+ //options has extra info such as "type" "text" "additionalParameteres", etc
+ //which you can use to specify requested set of data
+ var myData = [ ... ];//set of data
+ callback({ data: myData });
+}
+</pre>
+
+							Please see treeview example page for more info
+						</li>
+					</ul>
+				</div>
+			</li>
+		 </ul>
+		</div>
+			
+			
+		<h3 class="info-title smaller">Data Source</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				In the demo example, dataSource is static inside page's inline script:
+				<br />
+				<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/assets/scripts/</span>treeview.js</code>
+			</li>
+			
+			<li>
+				An example of a data source dynamically loading data from server is included
+				in <code>examples/treeview.html</code>
+			</li>	
+			
+			<li>
+				You can use <code>additionalParameters</code> parameter to include optional data,
+				for example setting <code>item-selected:true</code> will mark the item as selected upon
+				insertion into tree.
+				<br />
+				Other extra info you can save inside <code>additionalParameters</code>
+				is <code>id</code>, <code>title</code>, etc ...
+			</li>
+			
+			<li>
+				Basically you should define a create dataSource function
+				which is called by the plugin when a subtree is requested:
+<pre data-language="javascript">
+var mySource = function(options , callback) {
+  //retrieve data according to "options" parameters
+  //and when data is loaded, call "callback"
+}
+$('#treeview').ace_tree({
+ dataSource: mySource
+ //other options
+});
+</pre>
+			</li>
+			
+			<li>
+				To get the list of user selected items and posting it to server, you can do the following:
+<pre data-language="javascript">
+var items = $('#treeview').tree('selectedItems');
+//for example convert "items" to a custom string
+for(var i in items) if (items.hasOwnProperty(i)) {
+   var item = items[i];
+   output += item.additionalParameters['id'] + ":"+ item.text+"\n";
+}
+//send output to server
+</pre>
+			</li>
+			
+		 </ul>
+		</div>
+		
+		
+		<h3 class="info-title smaller">Note</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				I have disabled/removed <code>folderSelect</code> option of FuelUX tree because it has
+				a problem with Ace's styling of treeview element.
+				<br />
+				It allows selecting a folder however does not result in its children being selected automatically.
+				<br />
+				So it seems unnecessary and you can change it into an "item" to make it selectable if there are no
+				children.
+				<br />
+				If it has children you can select the children instead and in your code you will be able
+				to determine the parent of those selected children.
+			</li>
+
+		 </ul>
+		</div>
+
+	</div>
+	<!-- /section:plugins/fuelux.treeview -->
+
+</section>

src/main/webapp/static/ace/docs/sections/plugins/input.html

@@ -0,0 +1,345 @@
+<section>
+	<h1 class="blue" data-id="#plugins/input"><i class="ace-icon fa fa-pencil-square-o grey"></i> Form Inputs &amp; Controls</h1>
+
+	<div class="hr hr-double hr32"></div>
+
+
+	<!-- #section:plugins/input -->
+	<div class="help-content">
+
+		<h3 class="info-title smaller" data-id="#plugins/input.chosen">Chosen</h3>
+		<!-- #section:plugins/input.chosen -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Chosen is a replacement for browser dropdown lists.
+				<br />
+				You can find more info about its options here:
+				<a href="http://harvesthq.github.io/chosen/">http://harvesthq.github.io/chosen/</a>
+			</li>
+			
+			<li>
+				To use it, you should include:
+				<br />
+				<code>assets/css/chosen.css</code>
+				<br />
+				<code>assets/js/chosen.jquery.js</code>
+			</li>
+			
+			<li>
+				A basic example could be like this:
+
+<pre data-language="html">
+ <select name="myselect" class="chosen-select">
+   <option value="1">Option#1</option>
+   <option value="2">Option#2</option>
+   <option value="2">Option#3</option>
+ </select>
+</pre>
+<pre data-language="javascript">
+ $('.chosen-select').chosen(); 
+</pre>
+			</li>
+			
+			<li>
+				Add <code>.tag-input-style</code> class to <code>select</code> element
+				for an alternative multiple chosen style:
+<pre data-language="html">
+ <select multiple name="myselect" class="chosen-select tag-input-style">
+   ...
+ </select>
+</pre>
+			</li>
+			
+			<li>
+				Please note that if chosen element is inside a container which is hidden at first,
+				it may not render properly.
+				<br />
+				To resolve it you should create the chosen or reset its width when the container is shown:
+<pre data-language="javascript">
+ //an example of a chosen inside a modal
+ $('#modal-form').on('shown.bs.modal', function () {
+   $('.chosen-select').chosen(); 
+ })
+ 
+ //or
+ $('#modal-form').on('shown.bs.modal', function () {
+    $(this).find('.chosen-container').each(function(){
+       $(this).find('a:first-child').css('width' , '210px');
+       $(this).find('.chosen-drop').css('width' , '210px');
+       $(this).find('.chosen-search input').css('width' , '200px');
+    });
+ })
+</pre>
+			</li>
+			
+			<li>
+				Chosen plugin is not responsive by default and to make it so, you should change its 
+				dimensions on window resize event:
+<pre data-language="javascript">
+$(window).on('resize.chosen', function() {
+    //get its parent width
+    var w = $('.chosen-select').parent().width();
+    $('.chosen-select').siblings('.chosen-container').css({'width':w});
+}).triggerHandler('resize.chosen');
+</pre>
+			</li>
+			
+			<li>
+				Chosen does not support touch devices.
+				<br />
+				So you can ignore touch devices when initiating chosen on an element:
+<pre data-language="javascript">
+if(!ace.vars['touch']) {
+  //only enable chosen if not a touch device!
+  $('.chosen-select').chosen();
+}
+</pre>
+
+			</li>
+			
+		 </ul>
+		</div>
+		<!-- /section:plugins/input.chosen -->
+		
+		
+		<h3 class="info-title smaller" data-id="#plugins/input.select2">Select2</h3>
+		<!-- #section:plugins/input.select2 -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Select2 is similar to chosen with more advanced features such as remote data loading.
+				<br />
+				For more info please see <a href="https://github.com/ivaynberg/select2/">https://github.com/ivaynberg/select2/</a>
+			</li>
+			
+			<li>
+				To use it you should include:
+				<br />
+				<code>assets/css/select2.css</code>
+				<br />
+				<code>assets/js/select2.js</code>
+			</li>
+			
+			<li>
+				You can add <code>.tag-input-style</code> class to <code>select</code> element
+				for an alternative multiple chosen style:
+<pre data-language="html">
+ <select multiple name="myselect" class="select2 tag-input-style">
+   ...
+ </select>
+</pre>
+			</li>
+			<!--
+			<li>
+				Please also note that Select2's dropdown sometimes jumps off.
+				<br />
+				I have tried to remove all Ace specific styles and scripts and
+				it still happens sometimes.
+			</li>
+			-->
+		 </ul>
+		</div>
+		<!-- /section:plugins/input.select2 -->
+		
+		
+		<h3 class="info-title smaller" data-id="#plugins/input.tag-input">Tag Input</h3>
+		<!-- #section:plugins/input.tag-input -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				For more info about tag input plugin, please see its page at:
+				<a href="https://github.com/fdeschenes/bootstrap-tag">https://github.com/fdeschenes/bootstrap-tag</a>
+			</li>
+			
+			<li>
+				To use it, you should include:
+				<br />
+				<code>assets/js/bootstrap-tag.js</code>
+			</li>
+			
+			<li>
+				Its autocomplete feature is powered by <a href="#plugins/bootstrap.typeahead" class="help-more">Bootstrap's typeahead plugin</a>.
+			</li>
+			
+			<li>
+				A basic example which retrieve's autocomplete data dynamically from server is like this:
+<pre data-language="html">
+<input type="text" name="tags" id="form-field-tags" value="mytag1,mytag2" />
+</pre>
+
+<pre data-language="javascript">
+var tag_input = $('#form-field-tags');
+try{
+   tag_input.tag({
+      placeholder: tag_input.attr('placeholder'),
+      //source: ['tag 1', 'tag 2'],//static autocomplet array
+
+      //or fetch data from database, fetch those that match "query"
+      source: function(query, process) {
+         $.ajax({url: 'remote_source.php?q='+encodeURIComponent(query)})
+          .done(function(result_items){
+             process(result_items);
+         });
+      }
+   });
+}
+catch(e) {
+   //display a textarea for old IE, because it doesn't support this plugin or another one I tried!
+   tag_input.after('&lt;textarea id="'+tag_input.attr('id')+'" name="'+tag_input.attr('name')+'" rows="3">'+tag_input.val()+'&lt;/textarea>').remove();
+}
+</pre>
+			</li>
+			
+			<li>
+				You can also add new tags using the following code:
+<pre data-language="javascript">
+//programmatically add a new tag
+var $tag_obj = $('#form-field-tags').data('tag');
+$tag_obj.add('new tag');
+</pre>
+			</li>
+			
+		 </ul>
+		</div>
+		<!-- /section:plugins/input.tag-input -->
+		
+		
+		
+		<h3 class="info-title smaller" data-id="#plugins/input.duallist">Dual Listbox</h3>
+		<!-- #section:plugins/input.duallist -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				For more info and examples about dual listbox plugin, please see:
+				<a href="http://www.virtuosoft.eu/code/bootstrap-duallistbox">http://www.virtuosoft.eu/code/bootstrap-duallistbox/</a>
+			</li>
+			
+			<li>
+				To use it, you should include:
+				<br />
+				<code>assets/css/bootstrap-duallistbox.css</code>
+				<br />
+				and
+				<br />
+				<code>assets/js/jquery.bootstrap-duallistbox.js</code>
+			</li>
+		 </ul>
+		</div>
+		<!-- /section:plugins/input.duallist -->
+		
+		
+		
+		<h3 class="info-title smaller" data-id="#plugins/input.multiselect">Bootstrap Multiselect</h3>
+		<!-- #section:plugins/input.multiselect -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				For more info and examples about multiselect plugin, please see:
+				<a href="http://davidstutz.github.io/bootstrap-multiselect/">http://davidstutz.github.io/bootstrap-multiselect/</a>
+			</li>
+			
+			<li>
+				To use it, you should include:
+				<br />
+				<code>assets/css/bootstrap-multiselect.css</code>
+				<br />
+				and
+				<br />
+				<code>assets/js/bootstrap-multiselect.js</code>
+			</li>
+		 </ul>
+		</div>
+		<!-- /section:plugins/input.multiselect -->
+		
+		
+		
+		<h3 class="info-title smaller" data-id="#plugins/input.masked-input">Masked Input</h3>
+		<!-- #section:plugins/input.masked-input -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				For more info and examples about masked input plugin, please see:
+				<a href="http://digitalbush.com/projects/masked-input-plugin/">http://digitalbush.com/projects/masked-input-plugin/</a>
+			</li>
+			
+			<li>
+				To use it, you should include:
+				<br />
+				<code>assets/js/jquery.maskedinput.js</code>
+			</li>
+		 </ul>
+		</div>
+		<!-- /section:plugins/input.masked-input -->
+		
+		
+		
+		<h3 class="info-title smaller" data-id="#plugins/input.limiter">Input Limiter</h3>
+		<!-- #section:plugins/input.limiter -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Input Limiter plugin, limit's textarea input size by displaying a message to user which shows remaining characters.
+			</li>
+			
+			<li>
+				For more info please see:
+				<a href="http://rustyjeans.com/jquery-plugins/input-limiter">http://rustyjeans.com/jquery-plugins/input-limiter</a>
+			</li>
+			
+			<li>
+				To use it, you should include:
+				<br />
+				<code>assets/js/jquery.inputlimiter.1.3.1.js</code>
+			</li>
+
+			<li>
+				A basic example would be like this:
+<pre data-language="javascript">
+$('textarea.limited').inputlimiter({
+   remText: '%n character%s remaining...',
+   limitText: 'max allowed : %n.'
+});
+</pre>
+			</li>
+		 </ul>
+		</div>
+		<!-- /section:plugins/input.limiter -->
+		
+		
+		
+		
+		<h3 class="info-title smaller" data-id="#plugins/input.autosize">Auto Size</h3>
+		<!-- #section:plugins/input.autosize -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Textarea autosize, is used for automatically increasing textarea height as user input grows.
+			</li>
+			
+			<li>
+				For more info please see its page at:
+				<a href="http://www.jacklmoore.com/autosize/">http://www.jacklmoore.com/autosize/</a>
+			</li>
+			
+			<li>
+				To use it, you should include:
+				<br />
+				<code>assets/js/autosize.js</code>
+			</li>
+			
+			<li>
+				A basic example would be something like this:
+<pre data-language="javascript">
+autosize($('textarea[class.autosize]'));
+</pre>
+			</li>
+		 </ul>
+		</div>
+		<!-- /section:plugins/input.autosize -->
+		
+
+
+	</div>
+	<!-- /section:plugins/input -->
+</section>

src/main/webapp/static/ace/docs/sections/plugins/jquery.html

@@ -0,0 +1,184 @@
+<section>
+	<h1 class="blue" data-id="#plugins/jquery">jQuery </h1>
+	
+	<div class="hr hr-double hr32"></div>
+
+	<!-- #section:plugins/jquery -->
+	<div class="help-content">
+		<h3 class="info-title smaller">jQuery</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				jQuery is required by Bootstrap and most third party plugins
+			</li>
+			
+			<li>
+				Currently latest 2.x version is used. For older IE browsers you should use latest 1.x version,
+				as described in <a href="#files/javascript.order" class="help-more">Javascript files</a> section:
+<pre data-language="html">
+ &lt;!--[if !IE]&gt; --&gt;
+   &lt;script src="path/to/jquery.js"&gt;&lt;/script&gt;
+ &lt;!-- &lt;![endif]--&gt;
+ &lt;!--[if lte IE 9]&gt;
+   &lt;script src="path/to/jquery1x.js"&gt;&lt;/script&gt;
+ &lt;![endif]--&gt;
+</pre>
+			</li>
+		 </ul>
+		</div>
+		
+		
+		<h3 class="info-title smaller">jQuery UI</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				jQuery UI is also used for slider and drag drop functionality
+			</li>
+			
+			<li>
+				It is also required by some plugins such as FullCalendar and slimScroll
+			</li>
+			
+			<li>
+				A custom built version is included which has only above mentioned basic features.
+				<br />
+				You can use it by including the following files:
+				<br />
+				<code>assets/css/jquery-ui.custom.css</code>
+				<br />
+				<code>assets/js/jquery-ui.custom.js</code>
+			</li>
+			
+			<li>
+				A full version is also included in case you want to use more features of the library.
+				<br />
+				You can use it by including the following files:
+				<br />
+				<code>assets/css/jquery-ui.css</code>
+				<br />
+				<code>assets/js/jquery-ui.js</code>
+			</li>
+			
+			<li>
+				You can also build a custom version depending on your needs.
+				<br />
+				Please see
+				<a href="http://jqueryui.com/download/">jQuery UI custom download</a>
+			</li>
+			
+			<li>
+				Please note that jQuery UI tooltip module overrides Bootstrap tooltip.
+				<br />
+				You can avoid this by building a custom jQuery UI without tooltip
+				or including Bootstrap Javascript files after jQuery UI.
+				
+				<div class="space-6"></div>
+				Same thing can happen with jQuery UI spinner and FuelUX spinner.
+			</li>
+			
+			<li>
+				<a href="http://touchpunch.furf.com">jQuery UI Touch Punch</a> is used for enabling touch events.
+				<br />
+				You should include <code>assets/js/jquery.ui.touch-punch.js</code>
+			</li>
+		 </ul>
+		</div>
+		
+		
+		<h3 class="info-title smaller" data-id="#plugins/jquery.slider">jQuery UI Slider</h3>
+		<!-- #section:plugins/jquery.slider -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				For more info about jQuery UI slider, see:
+				<a href="https://api.jqueryui.com/slider/">api.jqueryui.com/slider/</a>
+			</li>
+			
+			<li>
+				To use it, you should include:
+				<br />
+				<code>assets/css/jquery-ui.custom.css</code>
+				<br />
+				<code>assets/js/jquery-ui.custom.js</code>
+				<br />
+				You can also include full jQuery UI versions or your own custom download.
+			</li>
+			
+			<li>
+				There are some additional colors and options:
+				<ol>
+					<li><code>.ui-slider-green</code></li>
+					<li><code>.ui-slider-red</code></li>
+					<li><code>.ui-slider-purple</code></li>
+					<li><code>.ui-slider-orange</code></li>
+					<li><code>.ui-slider-dark</code></li>
+					<li><code>.ui-slider-pink</code></li>
+					<li class="space-6"></li>
+					<li><code>.ui-slider-simple</code> for simple slider handle without bars</li>
+					<li><code>.ui-slider-small</code> for smaller handle</li>
+				</ol>
+			</li>
+			
+			<li>
+				A basic example would be like this:
+<pre data-language="html">
+ <span id="myslider" class="ui-slider-simple ui-slider-orange"></span>
+</pre>
+<pre data-language="javascipr">
+$('#myslider').slider({
+   value: 11,
+   range: "min",
+   animate: true
+});
+</pre>
+			</li>
+			
+			<li>
+				For more examples you can also see <b>Form Elements</b> script at:
+				<br />
+				<code data-open-file="javascript" class="open-file"><span class="brief-show">mustache/app/views/assets/scripts/</span>form-elements.js</code>
+				<br />
+				Search for "jQuery UI Slider" inside it
+			</li>
+			
+		 </ul>
+		</div>
+		<!-- /section:plugins/jquery.slider -->
+		
+		
+		<h3 class="info-title smaller">jQuery Mobile</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				To add support for <code>tap</code> event on touch devices,
+				a custom built jQuery mobile version is included which has minimal features.
+				<br />
+				To use it you should include 
+				<code>assets/js/jquery.mobile.custom.js</code>
+<pre data-language="html">
+<!-- after jquery -->
+&lt;script type="text/javascript"&gt;
+   if('ontouchstart' in document.documentElement) 
+      document.write("&lt;script src='path/to/assets/js/jquery.mobile.custom.js'&gt;"+"&lt;"+"/script&gt;");
+&lt;/script&gt;
+</pre>
+
+				This will include it only if touch events are available.
+			</li>
+			
+			<li>
+				You may want to build a custom one depending on your requirements.
+				<br />
+				Please see
+				<a href="http://jquerymobile.com/download-builder/">jQuery Mobile builder</a>
+			</li>
+			
+			<li>
+				If you are using KendoUI or perhaps other libraries,
+				there may be conflicts with touch events which you can avoid by removing jQuery Mobile
+			</li>
+		 </ul>
+		</div>
+	</div>
+	<!-- /section:plugins/jquery -->
+</section>

src/main/webapp/static/ace/docs/sections/plugins/misc.html

@@ -0,0 +1,576 @@
+<section>
+	<h1 class="blue" data-id="#plugins/misc"><i class="ace-icon fa fa-magic grey"></i> Miscellaneous</h1>
+
+	<div class="hr hr-double hr32"></div>
+	<div class="space-4"></div>
+
+	<div class="help-content">
+
+		<h3 class="info-title smaller" data-id="#plugins/misc.inline-editable">Inline Editable</h3>
+		<!-- #section:plugins/misc.inline-editable -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				For more information inline editable plugin and its option, please see its page at:
+				<a href="http://vitalets.github.io/x-editable/">vitalets.github.io/x-editable/</a>
+			</li>
+			
+			<li>
+				To use it, you should include:
+				<br />
+				<code>assets/css/bootstrap-editable.css</code>
+				<code>assets/js/x-editable/bootstrap-editable.js</code>
+			</li>
+
+			<li>
+				There are also five additional addons for the plugin that you can use
+				by including:
+				<br />
+				<code>assets/js/x-editable/ace-editable.js</code>
+				<br />
+				For more info see <a href="#custom/inline-editable" class="help-more">Inline Editable Addons</a>
+			</li>
+			
+			<li>
+				When using some editables you should include their relevant CSS and JS files first.
+				<Br />
+				For example when using Select2 or Datepicker editables
+			</li>
+			
+			<li>
+				For an example of some of the editables, you can see profile page:
+				<br />
+				<code data-open-file="javascript" class="open-file"><span class="brief-show">mustache/app/views/assets/scripts/</span>profile.js</code>
+			</li>
+		 </ul>
+		</div>
+		<!-- /section:plugins/misc.inline-editable -->
+	</div>
+	
+	
+	
+	<div class="space-12"></div>
+	
+
+	<div class="help-content">
+		<h3 class="info-title smaller" data-id="#plugins/misc.jquery-validate">jQuery Validate</h3>
+		<!-- #section:plugins/misc.jquery-validate -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				For more information and examples please see:
+				<br />
+				<a href="http://jqueryvalidation.org/">jqueryvalidation.org</a>
+			</li>
+			
+			<li>
+				To use jQuery Validate you should include:
+				<br />
+				<code>assets/js/jquery.validate.js</code>
+				<br />
+				There are also additional validation methods for which you should include:
+				<br />
+				<code>assets/js/additional-methods.js</code>
+			</li>
+			
+			<li>
+				A basic example could be like this:
+<pre data-language="javascript">
+$('#my-form').validate({
+    errorElement: 'div',
+    errorClass: 'help-block',
+    focusInvalid: false,
+    rules: {
+       email: {
+          required: true,
+          email: true
+       },
+       name: {
+          required: true
+       },
+       url: {
+          required: true,
+          url: true
+       }
+    },
+
+    messages: {
+        email: {
+           required: "Please provide a valid email.",
+           email: "Please provide a valid email."
+        }
+    },
+
+    highlight: function (e) {
+        $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
+    },
+
+    success: function (e) {
+        $(e).closest('.form-group').removeClass('has-error').addClass('has-info');
+        $(e).remove();
+    },
+
+    errorPlacement: function (error, element) {
+        error.insertAfter(element.parent());
+    }
+});
+</pre>
+			Error placement and highlighting is arbitrary and depends on your HTML structure.
+
+			</li>
+			
+			<li>
+				Note that by default when an element is hidden, it will not be validated.
+				<br />
+				You should use <code>ignore</code> option for more control:
+<pre data-language="javascript">
+$('#my-form').validate({
+   //...
+   ignore: ":hidden:not(select.chosen-select)"
+   //...
+});
+</pre>
+				In this example, because Chosen plugin hides original <code>select</code> element,
+				we can use this to make sure validation is performed.
+			</li>
+			
+			<li>
+				Please see form wizard page for a more detailed example
+			</li>
+			
+		 </ul>
+		</div>
+		<!-- /section:plugins/misc.jquery-validate -->
+
+	</div>
+	
+	
+
+	
+	<div class="space-12"></div>
+	
+	
+	
+	<div class="help-content">
+		<h3 class="info-title smaller" data-id="#plugins/misc.colorbox">jQuery Colorbox</h3>
+		<!-- #section:plugins/misc.colorbox -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				For more information about the plugin please see its page at:
+				<br />
+				<a href="http://www.jacklmoore.com/colorbox/">www.jacklmoore.com/colorbox/</a>
+			</li>
+			
+			<li>
+				Colorbox plugin is used for slideshow as shown in gallery page.
+				<br />				
+				To use it, you should include:
+				<br />
+				<code>assets/css/colorbox.css</code>
+				<br />
+				<code>assets/js/jquery.colorbox-min.js</code>
+			</li>
+		
+			<li>
+				A basic example would be like this:
+<pre data-language="html">
+<a href="path/to/image1" data-rel="colorbox">
+  <img alt="image1" src="path/to/thumb1" /> 
+</a>
+<a href="path/to/image2" data-rel="colorbox">
+  <img alt="image2" src="path/to/thumb2" /> 
+</a>
+</pre>
+<pre data-language="javascript">
+var colorbox_params = {
+          rel: 'colorbox',
+   reposition: true,
+  scalePhotos: true,
+    scrolling: false,
+     previous: '&lt;i class="ace-icon fa fa-arrow-left"&gt;&lt;/i&gt;',
+         next: '&lt;i class="ace-icon fa fa-arrow-right"&gt;&lt;/i&gt;',
+        close: '&amp;times;',
+      current: '{current} of {total}',
+     maxWidth: '100%',
+    maxHeight: '100%',
+   onComplete: function(){
+     $.colorbox.resize();
+   }
+}
+ 
+$('[data-rel="colorbox"]').colorbox(colorbox_params);
+$('#cboxLoadingGraphic').append("&lt;i class='ace-icon fa fa-spinner orange'&gt;&lt;/i&gt;");
+</pre>
+			</li>
+		 </ul>
+		</div>
+		<!-- /section:plugins/misc.colorbox -->
+	</div>
+
+
+	<div class="space-12"></div>
+
+
+	<div class="help-content">
+		<h3 class="info-title smaller" data-id="#plugins/misc.dropzone">Dropzone.js</h3>
+		<!-- #section:plugins/misc.dropzone -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				If you want advanced file upload, you should consider using Dropzone.js plugin.
+				<br />
+				Fore more info and examples about it please see:
+				<a href="http://www.dropzonejs.com/">www.dropzonejs.com</a>
+			</li>
+			
+			<li>
+				To use it, you should include:
+				<br />
+				<code>assets/css/dropzone.css</code>
+				<br />
+				<code>assets/js/dropzone.js</code>
+			</li>
+			
+			<li>
+				Any elment with <code>.dropzone</code> class will be automaically converted to a file upload area,
+				unless you set <code>Dropzone.autoDiscover = false</code>
+			</li>
+			
+			<li>
+				For a basic example please see:
+				<br />
+				<code data-open-file="javascript" class="open-file"><span class="brief-show">mustache/app/views/assets/scripts/</span>dropzone.js</code>
+			</li>
+
+		 </ul>
+		</div>
+		<!-- /section:plugins/misc.dropzone -->
+	</div>
+	
+	
+
+	<div class="space-12"></div>
+
+
+	<div class="help-content">
+
+		<h3 class="info-title smaller" data-id="#plugins/misc.bootbox">Bootbox</h3>
+		<!-- #section:plugins/misc.bootbox -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Bootbox is a wrapper plugin for Bootstrap modals which allows easy
+				creation of dialogs.
+				<br />
+				For more info and examples about it please see:
+				<a href="http://bootboxjs.com/">bootboxjs.com</a>
+			</li>
+		
+			<li>
+				To use it, you should include:
+				<br />
+				<code>assets/js/bootbox.js</code>
+			</li>
+			
+			<li>
+				A basic example would be like this:
+<pre data-language="javascript">
+$('#some-button').on('click', function() {
+  bootbox.confirm('Are you sure?', function(result) {
+    if(result) {
+       //do something
+    }
+  })
+})
+</pre>
+
+<pre data-language="javascript">
+$("#some-button").on('click', function() {
+  bootbox.confirm({
+    message: "Are you sure?",
+    buttons: {
+       confirm: {
+          label: "OK",
+          className: "btn-primary btn-sm",
+       },
+       cancel: {
+          label: "Cancel",
+          className: "btn-sm",
+       }
+    },
+    callback: function(result) {
+       //if(result) do something;
+    }
+ });
+});
+</pre>
+
+<pre data-language="javascript">
+$("#some-button").on('click', function() {
+   bootbox.dialog({
+      message: "I am a custom dialog with custom buttons,
+      buttons:
+      {
+         "success" :
+         {
+            "label" : "&lt;i class='ace-icon fa fa-check'&gt;&lt;/i&gt; Success!",
+            "className" : "btn-sm btn-success",
+            "callback": function() {
+                 //clicked, do something
+            }
+         },
+         "danger" :
+         {
+             "label" : "Danger!",
+             "className" : "btn-sm btn-danger",
+             "callback": function() {
+                 //clicked, do something
+             }
+         }
+      }
+   })
+})
+</pre>
+
+			</li>
+			
+		 </ul>
+		</div>
+		<!-- /section:plugins/misc.bootbox -->
+	</div>
+	
+
+	
+	<div class="space-12"></div>
+		
+	<div class="help-content">
+		<h3 class="info-title smaller" data-id="#plugins/misc.colorpicker">Colorpicker</h3>
+		<!-- #section:plugins/misc.colorpicker -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				For more info about colorpicker plugin, please see:
+				<a href="http://www.eyecon.ro/bootstrap-colorpicker">http://www.eyecon.ro/bootstrap-colorpicker</a>
+			</li>
+			
+			<li>
+				To use it, you should include:
+				<br />
+				<code>assets/css/colorpicker.css</code>
+				<br />
+				<code>assets/js/bootstrap-colorpicker.js</code>
+			</li>
+			
+			<li>
+				A basic example would be like this:
+<pre data-language="html">
+ <input type="text" name="color" id="colorpicker1" />
+</pre>
+<pre data-language="javascript">
+$('#colorpicker1').colorpicker();
+</pre>
+			</li>
+			
+			<li>
+				You can also use browser's built-in color picker which could be a better option on small touch devices:
+<pre data-language="html">
+ <input type="color" name="color" id="colorpicker1" />
+</pre>
+<pre data-language="javascript">
+var picker = $('#colorpicker1')[0];
+if(picker.type !== 'color') {//if browser doesn't have built-in colorpicker
+  $(picker).colorpicker();
+}
+</pre>
+			</li>
+			
+			<li>
+				You can also use <a href="#custom/colorpicker" class="help-more">custom color picker</a>
+			</li>
+		 </ul>
+		</div>
+		<!-- /section:plugins/misc.colorpicker -->
+	</div>
+	
+	
+	
+	<div class="space-12"></div>
+
+
+	<div class="help-content">
+		<h3 class="info-title smaller" data-id="#plugins/misc.gritter">Gritter</h3>
+		<!-- #section:plugins/misc.gritter -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Gritter is a growl-like notifications plugin for jQuery.
+				<br />
+				Fore more info and examples please see:
+				<a href="https://github.com/jboesch/Gritter">https://github.com/jboesch/Gritter</a>
+			</li>
+			
+			<li>
+				To use it, you should include:
+				<br />
+				<code>assets/css/jquery.gritter.css</code>
+				<br />
+				<code>assets/css/jquery.gritter.js</code>
+			</li>
+
+			
+			<li>
+				A few additional styles are also available which as follows:
+				<ol>
+					<li><code>.gritter-info</code></li>
+					<li><code>.gritter-error</code></li>
+					<li><code>.gritter-success</code></li>
+					<li><code>.gritter-warning</code></li>
+					<li class="space-6"></li>
+					<li><code>.gritter-light</code> light color style</li>
+					<li class="space-6"></li>
+					<li><code>.gritter-center</code> centers the notification box</li>
+				</ol>
+<pre data-language="html">
+jQuery.gritter.add({
+    title: 'This is a sticky notice!',
+    text: 'Sticky content',
+    image: 'path/to/image',
+    sticky: true,
+    time: '',
+    class_name: 'gritter-info gritter-light gritter-center'
+});
+
+</pre>
+			</li>
+			
+		 </ul>
+		</div>
+		<!-- /section:plugins/misc.gritter -->
+	</div>
+
+	
+	<div class="space-12"></div>
+
+	
+	<div class="help-content">
+		<h3 class="info-title smaller" data-id="#plugins/misc.nestable-list">Nestable Lists</h3>
+		<!-- #section:plugins/misc.nestable-list -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				For more information and examples please see 
+			</li>
+			
+			<li>
+				To use nestable lists you should include:
+				<br />
+				<code>assets/js/jquery.nestable.js</code>
+			</li>
+
+			<li>
+				You can use different color classes for list items.
+				<br />
+				See <a href="#pages/dashboard.tasks" class="help-more">Dashboard Tasks</a> for more info
+			</li>
+			
+			<li>
+				A basic example is like this:
+<pre data-language="html">
+<div class="dd">
+<ol class="dd-list">
+  <li class="dd-item item-red" data-id="7"><div class="dd-handle">Item 7</div></li>
+</ol>
+</div>
+</pre>
+
+<pre data-language="html">
+<div class="dd dd-draghandle">
+<ol class="dd-list">
+  <li class="dd-item dd2-item dd-colored" data-id="17">
+     <div class="dd-handle dd2-handle btn-info">
+        <i class="normal-icon ace-icon fa fa-pencil-square-o"></i>
+        <i class="drag-icon ace-icon fa fa-arrows"></i>
+     </div>
+     <div class="dd2-content btn-info no-hover">Published Articles</div>
+  </li>
+</ol>
+</div>
+</pre>
+
+In the above example, when dragging starts <code>.normal-icon</code> will be hidden and
+<code>.drag-icon</code> is shown
+
+<pre data-language="javascript">
+$('.dd').nestable();
+$('.dd-handle a').on('mousedown', function(e){
+   e.stopPropagation();
+});
+</pre>
+			</li>
+			
+		 </ul>
+		</div>
+		<!-- /section:plugins/misc.nestable-list -->
+	</div>
+
+	
+	
+	<div class="space-12"></div>
+
+
+	<div class="help-content">
+		<h3 class="info-title smaller" data-id="#plugins/misc.slimscroll">slimScroll</h3>
+		<!-- #section:plugins/misc.slimscroll -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				slimScroll is a lightweight scroll plugin using jQuery UI.
+				<br />
+				I've included in case you are already using it,
+				but you can use the <a href="#custom/scrollbar" class="help-more">custom scroll plugin</a>
+			</li>
+			
+			<li>
+				For more info about it, please see:
+				<a href="https://github.com/rochal/jQuery-slimScroll">https://github.com/rochal/jQuery-slimScroll</a>
+			</li>
+			
+			<li>
+				To use it, you should include:
+				<br />
+				<code>assets/js/jquery-ui.custom.js</code>
+				<br />
+				<code>assets/js/jquery.slimscroll.js</code>
+			</li>
+		 </ul>
+		</div>
+		<!-- /section:plugins/misc.slimscroll -->
+	</div>
+	
+	
+	<div class="space-12"></div>
+
+
+	<div class="help-content">
+		<h3 class="info-title smaller" data-id="#plugins/misc.raty">Star Rating</h3>
+		<!-- #section:plugins/misc.raty -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				For more info and examples about Raty star rating plugin, please see:
+				<a href="http://wbotelhos.com/raty/">http://wbotelhos.com/raty/</a>
+			</li>
+			
+			<li>
+				To use it, you should include:
+				<br />
+				<code>assets/js/jquery.raty.js</code>
+			</li>
+		 </ul>
+		</div>
+		<!-- /section:plugins/misc.raty -->
+	</div>
+	
+
+</section>

src/main/webapp/static/ace/docs/sections/plugins/tables.html

@@ -0,0 +1,190 @@
+<section>
+	<h1 class="blue" data-id="#plugins/tables"><i class="ace-icon fa fa-table grey"></i> Tables & Grids</h1>
+
+	<div class="hr hr-double hr32"></div>
+
+	<!-- #section:plugins/tables -->
+	<div class="help-content">
+		<h3 class="info-title smaller" data-id="#plugins/tables.datatables">dataTables</h3>
+		<!-- #section:plugins/tables.datatables -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				dataTables is a table plugin with many options and free or premium addons.
+				<br />
+				For more details see plugin's page: <a href="http://datatables.net/">datatables.net</a>
+			</li>
+			
+			<li>
+				To use it, you should include:
+				<br />
+				<code>assets/js/dataTables/jquery.dataTables.js</code>
+				<br />
+				<code>assets/js/dataTables/jquery.dataTables.bootstrap.js</code>
+			</li>
+			
+			<li>
+				To enable or disable pagination buttons such as 'next', 'prev', 'last' and 'first',
+				you should edit <code>assets/js/dataTables/jquery.dataTables.bootstrap.js</code>
+				and modify the part that says <span class="green">//Pagination Buttons</span>
+			</li>
+			
+			<li>
+				A basic example is as follows:
+<pre data-language="javascript">
+var myTable = 
+ $('#my-table')
+ .dataTable({
+    /**
+    sScrollY: "200px",//enable vertical scrolling
+    sScrollX: "100%",
+    sScrollXInner: "120%",//enable horizintal scrolling with its content 120% of its container
+    bScrollCollapse: true,
+    */
+
+    bAutoWidth: false,//for better responsiveness
+    aoColumns": [
+      { "bSortable": false },
+      null, null,null, null, null,
+      { "bSortable": false }
+    ]
+ })
+</pre>
+				<code>aoColumns</code> is an array containing info and options for each table column
+				and its element count should match the number of columns.
+				<br />
+				For more information about <code>aoColumns</code> and other options, please see the plugin's page.
+			</li>
+
+			
+			<li>
+				If you want to apply horizontal scrolling (sScrollX) on a bordered table (<code>.table-bordered</code>)
+				you can wrap the table inside a <code>.dataTables_borderWrap</code> element first:
+<pre data-language="javascript">
+var myTable = 
+ $('#my-table')
+ .wrap("&lt;div class='dataTables_borderWrap' /&gt;")
+ .dataTable({
+    //options
+ });
+</pre>
+			</li>
+			
+			<li>
+				"buttons" and "select" extensions are also included.
+				<br />
+				To use "buttons" you should include the following files:
+				<br />
+				<code>assets/js/dataTables/extensions/buttons/dataTables.buttons.js</code>
+				<br />
+				<code>assets/js/dataTables/extensions/buttons/buttons.print.js</code> (for print button)
+				<br />
+				<code>assets/js/dataTables/extensions/buttons/buttons.html5.js</code> (for html5 buttons)
+				<br />
+				<code>assets/js/dataTables/extensions/buttons/buttons.flash.js</code> (for flash buttons)
+				<br />
+				<code>assets/js/dataTables/extensions/buttons/buttons.colVis.js</code>(for column visibility button)
+				<br />
+				<br />
+				To use "select" you should include the following file:
+				<br />
+				<code>assets/js/dataTables/extensions/select/dataTables.select.js</code>
+			</li>
+			
+			<li>
+				If you want "html5" buttons to export table data to "PDF" or "Excel", you need extra plugins.
+				<br />
+				Please see <a href="https://datatables.net/extensions/buttons/examples/html5/simple.html" target="_blank">https://datatables.net/extensions/buttons/examples/html5/simple.html</a> for more info.
+			</li>
+			
+			<li>
+				For an example please see:
+				<code data-open-file="javascript" class="open-file"><span class="brief-show">mustache/app/views/assets/scripts/</span>tables.js</code>
+				<br />
+				Note the changes dynamically done to make the extensions styling look like Ace.
+			</li>
+
+		 </ul>
+		</div>
+		<!-- /section:plugins/tables.datatables -->
+
+
+		<h3 class="info-title smaller" data-id="#plugins/tables.jqgrid">jqGrid</h3>
+		<!-- #section:plugins/tables.jqgrid -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				jqGrid is a table and grid plugin with advanced functionality and many different options
+				<br />
+				Please make sure you see its page, examples and documentation at:
+				<a href="http://www.trirand.com">www.trirand.com</a>
+			</li>
+			
+			<li>
+				You can also a build a custom version depending on your needs:
+				<a href="http://www.trirand.com/blog/?page_id=6">http://www.trirand.com/blog/?page_id=6</a>
+			</li>
+			
+			<li>
+				To use it, you should include:
+				<br />
+				<code>assets/css/ui.jqgrid.css</code>
+				<br />
+				<code>assets/js/jqGrid/jquery.jqGrid.src.js</code>
+			</li>
+			
+			<li>			
+				Please note that in our demo example,
+				data source is a local static table but you can retrieve data dynamically from server:
+				<br />
+				<code data-open-file="javascript" class="open-file"><span class="brief-show">mustache/app/views/assets/scripts/</span>jqgrid.js</code>
+			</li>
+			
+			<li>
+				jqGrid has many options and you can choose a different icon for different buttons, etc.
+				<br />
+				But sometimes you need to dynamically style buttons, icons, checkboxes using Javascript
+				for example when search dialog is displayed.
+			</li>
+			
+			<li>
+				If you want to style checkboxes dynamically using Javascript, please note that you shouldn't 
+				wrap them inside <code>label</code> or jqGrid plugin will not send your data to server properly:
+<pre data-language="javascript">
+ //inside colModel we have a checkbox
+ /**{name: 'stock', index: 'stock', width:70, editable: true, edittype: 'checkbox',
+   editoptions: {value:"Yes:No"}, unformat: aceSwitch},*/
+ //aceSwitch is the function which styles the checkbox  
+ 
+ function aceSwitch( cellvalue, options, cell ) {
+    setTimeout(function(){
+        $(cell) .find('input[type=checkbox]')
+          .addClass('ace ace-switch ace-switch-5')
+          .after('&lt;span class="lbl">&lt;/span>');
+    }, 0);
+ }
+</pre>
+			</li>
+			
+			<li>
+				To make the grid responsive, you can use the following code:
+<pre data-language="javascript">
+ var parent_column = $(grid_selector).closest('[class*="col-"]');
+ $(window).on('resize.jqGrid', function () {
+     $(grid_selector).jqGrid( 'setGridWidth', $(".page-content").width() );
+ })
+ //optional: resize on sidebar collapse/expand and container fixed/unfixed
+ $(document).on('settings.ace.jqGrid' , function(ev, event_name, collapsed) {
+    if( event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed' ) {
+       $(grid_selector).jqGrid( 'setGridWidth', parent_column.width() );
+    }
+ })
+</pre>
+			</li>
+		 </ul>
+		</div>
+		<!-- /section:plugins/tables.jqgrid -->
+
+	</div>
+	<!-- /section:plugins/tables -->
+</section>

src/main/webapp/static/ace/docs/sections/plugins/tools.html

@@ -0,0 +1,130 @@
+<section>
+	<h1 class="blue" data-id="#plugins/tools"><i class="ace-icon fa fa-desktop grey"></i> Tools</h1>
+
+	<div class="hr hr-double hr32"></div>
+	
+	<!-- #section:plugins/tools -->
+	<div class="help-content">
+		<h3 class="info-title smaller" data-id="#plugins/tools.node-js">Node.js</h3>
+		<!-- #section:plugins/tools.node-js -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				For more information and installing Node.js please see its page at
+				<a href="http://nodejs.org">nodejs.org</a>
+			</li>
+			
+			<li>
+				It's optional and you don't need to use it.
+				<br />
+				I've used it for compiling LESS files into CSS and
+				Mustache templates into static HTML
+			</li>
+		 </ul>
+		</div>
+		<!-- /section:plugins/tools.node-js -->
+		
+		
+		
+		<h3 class="info-title smaller" data-id="#plugins/tools.less-js">Less.js</h3>
+		<!-- #section:plugins/tools.less-js -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Less is a CSS pre-processor which is useful for creating and maintating large amounts of CSS code
+			</li>
+			
+			<li>
+				You can find more info about it here <a href="http://lesscss.org/">lesscss.org</a>
+			</li>			
+			
+			<li>
+				Almost all Ace CSS files are generated from compiling LESS files
+			</li>
+			
+			<li>
+				First you need to install less compiler via npm:
+				<code>npm install -g less</code>
+				
+		    </li>
+			
+			<li>
+				To compile LESS files, you can run the following commands:
+				<br />
+				<code>lessc ace.less path/to/ace.css</code>
+				<br />
+				<code>lessc skins/skins.less path/to/ace-skins.css</code>
+				
+				<br />
+				For options such as compressing output, etc, you can use its help by using the following command:
+				<br />
+				<code>lessc --help</code>
+			</li>
+			
+			<li>
+				You can also use the <a href="../build/css.html">in-browser CSS builder tool</a> to build a custom CSS.
+			</li>
+		 </ul>
+		</div>
+		<!-- /section:plugins/tools.less-js -->
+		
+		
+		
+		
+		<h3 class="info-title smaller" data-id="#plugins/tools.mustache">Mustache Compilers</h3>
+		<!-- #section:plugins/tools.mustache -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Ace's demo pages are mustache templates compiled into HTML
+			</li>
+			
+			<li>
+				For more info about Mustache files please see <a href="#files/mustache" class="help-more">Mustache files</a>
+			</li>
+			
+			<li>
+				PHP Mustache is used during development.
+				<br />
+				And Javascript Mustache compiler is used for final demo output				
+			</li>
+			
+			<li>
+				For more info please see the following links:
+				<br />
+				<a href="http://mustache.github.io/">Mustache</a>
+				<br />
+				<a href="https://github.com/janl/mustache.js/">Mustache.js</a>
+				<br />
+				<a href="http://twitter.github.io/hogan.js/">Hogan.js</a>
+				<br />
+				<a href="https://github.com/bobthecow/mustache.php">PHP Mustache</a>
+			</li>
+		 </ul>
+		</div>
+		<!-- /section:plugins/tools.mustache -->
+		
+		
+				
+		<h3 class="info-title smaller" data-id="#plugins/tools.uglifyjs">UglifyJS</h3>
+		<!-- #section:plugins/tools.uglifyjs -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				UglifyJS is a popular tool for minifying Javascript files
+			</li>
+			
+			<li>
+				It can also be used inside browser like in the <a href="../build/js.html">Javascript builder tool</a>
+			</li>
+			
+			<li>
+				For more info please see <a href="http://lisperator.net/uglifyjs/">lisperator.net/uglifyjs/</a>
+			</li>
+		 </ul>
+		</div>
+		<!-- /section:plugins/tools.uglifyjs -->
+
+	
+	<!-- /section:plugins/tools -->
+</section>

src/main/webapp/static/ace/docs/sections/settings/index.html

@@ -0,0 +1,581 @@
+<section>
+	<h1 class="blue" data-id="#settings"><i class="ace-icon fa fa-cog grey"></i> Settings</h1>
+	
+	<div class="hr hr-double hr32"></div>
+	<!-- #section:settings -->
+	<div class="help-content">
+		<h3 class="info-title smaller">Settings</h3>
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Ace settings functions and cookie/localStorage feature is saved inside <code>assets/js/ace-extra.js</code>
+			</li>
+			<li>
+				If you want these features, it's best to include this file
+				inside document head
+			</li>
+			
+			<li>
+				The script to restore user saved settings is placed immediately after the relevant element's HTML code:
+<pre data-language="html">
+<div id="navbar" class="navbar navbar-default">
+ <script type="text/javascript">
+  try{ace.settings.check('navbar' , 'fixed')}catch(e){}
+ </script>
+</div>
+</pre>
+			This will cause the element's status be restored as soon as it is inserted into DOM.
+			<div class="space-4"></div>
+			If you call the functions after page load, for example in jQuery's document ready event,
+			there may be a delay between the initial state and the saved state.
+			<br />
+			It may not be noticeable for fixed navbar, etc, but for collapsed sidebar or other settings, it can get noticeable.
+
+			<div class="space-6"></div>
+			The <code>try/catch</code> block is used so that if you don't want to use  <code>ace-extra.js</code>,
+			the browser doesn't raise any errors.
+			<br />
+			In that case you can remove the code if it's not necessary.
+			</li>
+			
+		 </ul>
+		</div>
+
+	</div>
+	
+	
+	
+	<div class="hr hr-double hr32"></div>
+	<h2 class="blue lighter help-title" data-id="#settings.page">
+		Page Options
+	</h2>
+	<div class="space-4"></div>
+
+	<!-- #section:settings.page -->
+	<div class="help-content">
+		<h3 class="info-title smaller" data-id="#settings.navbar">Fixed Navbar</h3>
+		<!-- #section:settings.navbar -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				For fixed navbar, you should add <code>.navbar-fixed-top</code> class
+				to <code>.navbar</code> element:
+<pre data-language="html">
+ <div class="navbar navbar-default navbar-fixed-top">
+  ...
+ </div>
+</pre>
+			</li>
+			<li>
+				You can also use the following javascript code to do this:
+<pre data-language="javascript">
+ ace.settings.navbar_fixed(null, true, true);//first parameter is null or reference to navbar element
+ ace.settings.navbar_fixed(document.getElementById('navbar'), true, true);
+</pre>
+				First parameter is a reference to navbar element. If null <code>#navbar</code> will be used.
+				<br />
+				Second parameter determines whether navbar should become fixed or not.
+				<br />
+				Third paramtere determines whether you want to save the changes to cookies/localStorage
+				for later retrieval
+			</li>
+		
+			<li>
+				In smaller devices, fixed navbar content may become too large
+				and ends up in more that two rows.
+				<br />
+				In that case you may need to add extra padding to content area
+				using CSS and media rules or enable <b>auto padding</b> option when building your custom Javascript
+			</li>
+			
+		 </ul>
+		</div>
+		<!-- /section:settings.navbar -->
+		
+		
+		
+		<h3 class="info-title smaller" data-id="#settings.breadcrumbs">Fixed Breadcrumbs</h3>
+		<!-- #section:settings.breadcrumbs -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				For fixed breadcrumbs, you should add <code>.breadcrumbs-fixed</code> class
+				to <code>.breadcrumbs</code> element:
+<pre data-language="html">
+ <div class="breadcrumbs breadcrumbs-fixed">
+  ...
+ </div>
+</pre>
+			</li>
+			<li>
+				If you want to do this using Javascript, you can use this code:
+<pre data-language="javascript">
+ ace.settings.breadcrumbs_fixed(null, true, true);//first parameter is null or reference to breadcrumbs element
+ ace.settings.breadcrumbs_fixed(document.getElementById('breadcrumbs'), true, true);
+</pre>
+				First parameter is a reference to breadcrumbs element. If null <code>#breadcrumbs</code> will be used.
+				<br />
+				Second parameter determines whether breadcrumbs should become fixed or not.
+				<br />
+				Third paramtere determines whether you want to save the changes to cookies/localStorage
+				for later retrieval
+			</li>
+			
+			<li>
+				Currently, fixed breadcrumbs are only available when device with is above
+				<code>991px</code>
+				which you can change that by modifying <code>@screen-fixed-breadcrumbs</code> variable
+				inside <code>assets/css/less/variables.less</code> files and recompiling <code>ace.less</code>.
+				<br />
+				The reason for this is that in smaller devices, fixed breadcrumbs and fixed navbar
+				may take up a lot of space!
+			</li>
+			
+			<li>
+				Anyway, if in smaller devices, your fixed breadcrumbs content is too large
+				and ends up in more that two rows, you may need to add extra padding to content area
+				using CSS and media rules or enable <b>auto padding</b> option when building your custom Javascript
+			</li>
+			
+		 </ul>
+		</div>
+		<!-- /section:settings.breadcrumbs -->
+		
+		
+		
+		<h3 class="info-title smaller" data-id="#settings.container">Inside container</h3>
+		<!-- #section:settings.container -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				For fixed container width, you should add <code>.container</code> class
+				to <code>.navbar-container</code> and <code>.main-container</code> elements:
+<pre data-language="html">
+ <div class="navbar navbar-default">
+   <div class="navbar-container container">
+     ...
+   </div>
+ </div>
+ 
+ <div class="main-container container">
+     ...
+ </div>
+</pre>
+			</li>
+			<li>
+				If you want to do this using Javascript, you can use this code:
+<pre data-language="javascript">
+ ace.settings.main_container_fixed(null, true, true);//first parameter is null or reference to container element
+ ace.settings.main_container_fixed(document.getElementById('main-container'), true, true);
+</pre>
+				First parameter is a reference to container element. If null <code>#main-container</code> will be used.
+				<br />
+				Second parameter determines whether navbar should become fixed or not.
+				<br />
+				Third paramtere determines whether you want to save the changes to cookies/localStorage
+				for later retrieval.
+			</li>
+		
+			<li>
+				Currently Bootstrap doesn't allow fixed width container on specific widths only.
+				<br />
+				You can enable <b>auto container</b> option when <a href="../build/js.html">building a custom Javascript</a> to
+				activate fixed container only when device width is more than 1140px.
+				<br />
+<pre data-language="javascript">
+$(window).on('resize.auto_container', function() {
+    var enable = $(this).width() > 1140;
+    try {
+       ace.settings.main_container_fixed(enable, false, false);
+    } catch(e) {}
+}).triggerHandler('resize.auto_container');
+</pre>
+			</li>
+		 </ul>
+		</div>
+		<!-- /section:settings.container -->
+
+	</div>
+
+	
+	<div class="space-8"></div>
+	<div class="help-content">
+		<h3 class="info-title smaller" data-id="#settings.sidebar">Sidebar Settings</h3>
+		<!-- #section:settings.sidebar -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				For fixed sidebar, you should add <code>.sidebar-fixed</code> class
+				to <code>.sidebar</code> element:
+<pre data-language="html">
+ <div class="sidebar sidebar-fixed responsive">
+  ...
+ </div>
+</pre>
+			</li>
+			<li>
+				If you want to do this using Javascript, you can use this code:
+<pre data-language="javascript">
+ ace.settings.sidebar_fixed(null, true, true);//first element is null or reference to sidebar element
+ ace.settings.sidebar_fixed(document.getElementById('sidebar'), true, true);
+</pre>
+				First parameter is a reference to sidebar element. If null <code>#sidebar</code> will be used.
+				<br />
+				Second parameter determines whether sidebar should become fixed or not.
+				<br />
+				Third paramtere determines whether you want to save the changes to cookies/localStorage
+				for later retrieval.
+			</li>
+			
+			
+			<li>
+				For minimized sidebar, you should add <code>.menu-min</code> class
+				to <code>.sidebar</code> element:
+<pre data-language="html">
+ <div class="sidebar menu-min responsive">
+  ...
+ </div>
+</pre>
+			</li>
+			<li>
+				If you want to do this using Javascript, you can use this code:
+<pre data-language="javascript">
+ ace.settings.sidebar_collapsed(null, true, true);//first param is null or reference to sidebar element
+ ace.settings.sidebar_collapsed(document.getElementById('sidebar'), true, true);
+</pre>
+				First parameter is a reference to sidebar element. If null, <code>#sidebar</code> will be used.
+				<br />
+				Second parameter determines whether sidebar should become minimized or not.
+				<br />
+				Third paramtere determines whether you want to save the changes to cookies/localStorage
+				for later retrieval.
+			</li>
+			
+			<li>
+				For other sidebar options and settings please see <a href="#basics/sidebar.options" class="help-more">Sidebar options</a>
+			</li>
+			
+			
+		 </ul>
+		</div>
+		<!-- /section:settings.sidebar -->
+
+	</div>
+
+	
+	<div class="space-8"></div>
+	<div class="help-content">
+		<h3 class="info-title smaller" data-id="#settings.events">Setting Events</h3>
+		<!-- #section:settings.events -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				When a settings box option or sidebar collapse/expand button is clicked an event is triggered which may be useful
+				in case you use settings box and want to respond to user changes				
+			</li>
+			
+			<li>
+				The event name is <code>settings.ace</code> and 
+				has two extra arguments.
+				<br />
+				The first is event name and the second is the new status:
+<pre data-language="javascript">
+$(document).on('settings.ace', function(event, name, status) {
+    //name is one of the following
+    //navbar_fixed
+    //sidebar_fixed
+    //breadcrumbs_fixed
+    //main_container_fixed
+    //sidebar_collapsed
+	
+    //status is either true or false
+	
+    if(name == 'sidebar_fixed' && status == false) {
+        //sidebar was unfixed by user, do something
+    }
+}
+</pre>
+			</li>
+		 </ul>
+		</div>
+		<!-- /section:settings.events -->
+
+	</div>
+	
+	<!-- /section:settings.page -->
+	
+	
+	<div class="hr hr-double hr32"></div>
+	<div class="help-content">
+		<h3 class="info-title smaller" data-id="#settings.skins">Skins</h3>
+		
+		<!-- #section:settings.skins -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				There are currently 4 skins available which changes sidebar and navbar colors,
+				which are:
+				<ol>
+					<li><code>.no-skin</code></li>
+					<li><code>.skin-1</code></li>
+					<li><code>.skin-2</code></li>
+					<li><code>.skin-3</code> To use .skin-3 you should add <code>.no-skin</code> class as well</li>
+				</ol>
+			</li>
+			
+			<li>
+				To use a skin simply update <code>body</code> element's class name:
+<pre data-language="html">
+&lt;body class="skin-2"&gt;
+...
+</pre>
+			</li>
+			
+			<li>
+				Inside settings box when you select a skin some other parts change as well.
+				<br />
+				For example shortcut buttons or navbar user dropdown buttons.
+				<br />
+				For that you should update some class names in your HTML code:
+				
+<pre data-language="html">
+ <!-- for example in skin-3, shortcut buttons have .btn-white class -->
+ <button class="btn btn-primary btn-white"><i class="ace-icon fa fa-signal red"></i></button>
+ 
+ <!-- or in skin-2, navbar dropdown buttons have 'no-border margin-1 light-pink' class -->
+ <li class='no-border margin-1 light-pink'>
+  ...
+ </li>
+</pre>
+			</li>
+			
+			<li>
+				Default skin in included and compiled with <code>ace.css</code>
+				but for other skins you should include <code>ace-skins.css</code>
+			</li>
+			<li>
+				You can also compile main css <code>ace.css</code> using another skin.
+				<br />
+				Please refer to <a class="help-more" href="#files/css.skins">Ace Skins</a> section for more info.
+			</li>
+
+			<li>
+				If you want to save a selected skin and retrieve it when user navigates to a different page or refreshes page,
+				there are several approaches for that depending on your application.
+				<br />
+				One way is to save selected skin inside a cookie and apply changes 
+				in your server side code when user requests a page:
+<pre data-language="javascript">
+ $('#ace-settings-skin').on('change', function() {
+   ace.settings.set('skin', this.value); 
+ })
+</pre>
+And in your server side code:
+<pre data-language="php">
+$skin = $_COOKIE['ace_skin'];
+echo '&lt;body class="'.$skin.'"&gt;';
+//...
+//...
+echo '&lt;li class="'.some_modification_based_on_selected_skin($skin).'"&gt;';
+</pre>
+
+			Of course it's the simplest way and things would be different depending on your application
+			</li>
+
+		 </ul>
+		</div>
+		<!-- /section:settings.skins -->
+
+	</div>
+
+
+
+
+	<div class="hr hr-double hr32"></div>
+	<div class="help-content">
+		<h3 class="info-title smaller" data-id="#settings.rtl">RTL</h3>
+		<!-- #section:settings.rtl -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				RTL (right to left) direction is used for Arabic, Hebrew and Persian languages
+			</li>
+			
+			<li>
+				It's best to make RTL changes directly inside your HTML rather than using Javascript dynamically at runtime.
+			</li>
+			
+			<li>
+				You should make the following changes for RTL:
+				<ol>
+					<li>Include <code>assets/css/ace-rtl.css</code></li>
+					
+					<li>Add <code>.rtl</code> class to <code>body</code> element</li>
+	
+					<li> Switch classes that have <code>-right</code> or <code>-left</code>
+						<br />
+						For example:
+						<br />
+						<code>.pull-right</code> &amp; <code>.pull-left</code>
+						<br />
+						or
+						<br />
+						<code>.no-padding-left</code> &amp; <code>.no-padding-right</code>
+						<br />
+						or
+						<br />
+						<code>.arrowed</code> &amp; <code>.arrowed-right</code>						
+					</li>
+				</ol>
+				
+				<div class="space-4"></div>
+		
+				Also please note that RTL horizontal scrolling is inconsistent between browsers.
+				<br />
+				So it's better to change scrollbars to LTR and make the content RTL again.
+				<br />
+				You can use <code>.make-ltr</code> and <code>.make-rtl</code> classes:
+				<br />
+				
+<pre data-language="javascript">
+ $('#my-content').addClass('make-ltr')
+ .find('.scroll-content').wrapInner('&lt;div class="make-rtl" /&gt;');
+</pre>
+
+				<div class="space-4"></div>
+				
+				Some plugins support RTL and you should specify the options when initiating plugins:
+				<ol>
+					<li>For Chosen plugin add <code>.chosen-rtl</code> to the element</li>
+					<li>For jqGrid plugin specify <code>direction:'rtl'</code> option</li>
+					<li>For jQuery UI datepicker specify <code>isRTL:true</code> option</li>
+					<li>For FullCalendar plugin set <code>isRTL:true</code> option</li>
+				</ol>
+			</li>
+			
+			<li>
+				Sometimes when using RTL option of settings box for multiple times, 
+				you elements are misplaced in some browsers.
+				<br />
+				This is probably because browsers don't redraw elements.
+				<br />
+				It won't be a problem in your application, because you should enable RTL
+				inside your server side response and not dynamically inside browser.
+			</li>
+			
+		 </ul>
+		</div>
+		<!-- /section:settings.rtl -->
+
+	</div>
+
+
+
+
+	<div class="hr hr-double hr32"></div>
+	<div class="help-content">
+		<h3 class="info-title smaller" data-id="#settings.storage">Cookies & Storage</h3>
+		<!-- #section:settings.storage -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Cookie and localStorage functionality has been added to save/load variables and settings
+				which is defined inside <code>ace-extra.js</code>
+			</li>
+			
+			<li>
+<pre data-language="javascript">
+//cookie functions
+ace.cookie.set(name, value, expires, path, domain, secure);
+ace.cookie.get(name);
+ace.cookie.remove(name, path);
+</pre>
+
+<pre data-language="javascript">
+//localStorage functions
+ace.storage.set(key, value);
+ace.storage.get(key);
+ace.storage.remove(key);
+</pre>
+			</li>
+			
+			<li>
+				<code>ace.data_storage</code> is a wrapper which by default chooses localStorage if available.
+				<br />
+				Otherwise it will use cookies for saving data which you can change that by specifying an optional argument:
+<pre data-language="javascript">
+ace.data = new ace.data_storage();//use localStorage if available otherwise use cookies
+ace.data = new ace.data_storage(1);//use localStorage
+ace.data = new ace.data_storage(2);//use cookies
+
+//save/load values with namespace (for example 'settings')
+//ace.data.set(namespace, key, value);
+ace.data.set('settings', 'sidebar-collapsed', 1);
+var collapsed = ace.data.get('settings', 'sidebar-collapsed');
+ace.data.remove('settings', 'sidebar-collapsed');
+
+//save/load values without namespace
+ace.data.set('username', 'alex');
+var username = ace.data.get('username');
+ace.data.remove('username');
+</pre>
+			</li>
+			
+		 </ul>
+		</div>
+		<!-- /section:settings.storage -->
+	</div>
+	
+	
+	
+	
+	<div class="hr hr-double hr32"></div>
+	<div class="help-content">
+		<h3 class="info-title smaller" data-id="#settings.box">Settings Box</h3>
+		<!-- #section:settings.box -->
+		<div class="info-section">
+		 <ul class="info-list list-unstyled">
+			<li>
+				Settings container (<code>.ace-settings-container</code>) should be the first child of
+				<code>.page-content</code>
+				<br />
+				It contains
+				<code>.ace-settings-btn</code> and <code>.ace-settings-box</code>
+				which consists of several <code>.ace-settings-item</code> elements:
+				
+<pre data-language="html">
+<div class="page-content">
+  <div id="ace-settings-container" class="ace-settings-container">
+    <div id="ace-settings-btn" class="ace-settings-btn btn btn-app btn-xs btn-warning">
+       <i class="ace-icon fa fa-cog bigger-150"></i>
+    </div>
+
+    <div id="ace-settings-box" class="ace-settings-box clearfix open">
+      <div class="pull-left width-50">
+        <div class="ace-settings-item">
+            <input type="checkbox" id="ace-settings-navbar" class="ace" />
+            <label for="ace-settings-navbar" class="lbl"> Fixed Navbar</label>
+        </div>
+      </div><!-- /.pull-left -->
+
+      <div class="pull-left width-50">
+		...
+      </div><!-- /.pull-left -->
+    </div><!-- /.ace-settings-box -->
+  </div>
+  .
+  .
+  .
+</div><!-- /.page-content -->
+</pre>
+			</li>
+		 </ul>
+		</div>
+
+	</div>
+	<!-- /section:settings.box -->
+	
+	
+	<!-- /section:settings -->
+
+</section>

src/main/webapp/static/ace/tab.css

@@ -0,0 +1,301 @@
+
+.content-tabs {
+    position: relative;
+    height: 42px;
+    background: #fafafa;
+    line-height: 40px;
+}
+
+.content-tabs .roll-nav,
+.page-tabs-list {
+    position: absolute;
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    color: #999;
+    z-index: 2;
+    top: 0;
+}
+
+.content-tabs .roll-left {
+    left: 0;
+    border-right: solid 1px #eee;
+}
+
+.content-tabs .roll-right {
+    right: 0;
+    border-left: solid 1px #eee;
+}
+
+.content-tabs button {
+    background: #fff;
+    border: 0;
+    height: 40px;
+    width: 40px;
+    outline: none;
+}
+
+.content-tabs button:hover {
+    background: #fafafa;
+}
+
+nav.page-tabs {
+    margin-left: 40px;
+    height: 40px;
+    overflow: hidden;
+}
+
+nav.page-tabs .page-tabs-content {
+    float: left;
+}
+
+.page-tabs a {
+    display: block;
+    float: left;
+    border-right: solid 1px #eee;
+    padding: 0 15px;
+}
+
+.page-tabs a i:hover {
+    color: #c00;
+}
+
+.page-tabs a:hover,
+.content-tabs .roll-nav:hover {
+    color: #777;
+    background: #f2f2f2;
+    cursor: pointer;
+}
+.page-tabs a {
+    color: #999;
+}
+
+.page-tabs a i {
+    color: #ccc;
+}
+
+.page-tabs a.active {
+       background: rgb(111, 179, 224);
+    color: #eee;
+}
+.roll-right.J_tabRight {
+    right: 140px;
+}
+
+.roll-right.btn-group {
+    right: 60px;
+    width: 80px;
+    padding: 0;
+}
+
+.roll-right.btn-group button {
+    width: 80px;
+}
+
+.roll-right.J_tabExit {
+    background: #fff;
+    height: 40px;
+    width: 60px;
+    outline: none;
+}
+
+.dropdown-menu-right {
+    left: auto;
+}
+
+html,
+body {
+    height: 100%;
+}
+
+body.full-height-layout #wrapper,
+body.full-height-layout #page-wrapper {
+    height: 100%;
+}
+
+#page-wrapper {
+    min-height: auto;
+}
+
+.main-container{
+	height:80%;
+	height: calc(100% - 120px);
+	height:-moz-calc(100% - 120px);
+	height:-webkit-calc(100% - 105px);
+}
+
+.main-content-inner,
+.main-content{
+	
+	height:100%;
+	
+}
+	
+#content-main {
+   height: calc(100% - 40px);
+}
+
+.fixed-nav #content-main {
+    height: calc(100% - 40px);
+    overflow: hidden;
+}
+
+/* Tabs */
+
+.tabs-container .panel-body {
+    background: #fff;
+    border: 1px solid #e7eaec;
+    border-radius: 2px;
+    padding: 20px;
+    position: relative;
+}
+
+.tabs-container .nav-tabs > li.active > a,
+.tabs-container .nav-tabs > li.active > a:hover,
+.tabs-container .nav-tabs > li.active > a:focus {
+    border: 1px solid #e7eaec;
+    border-bottom-color: transparent;
+    background-color: #fff;
+}
+
+.tabs-container .nav-tabs > li {
+    float: left;
+    margin-bottom: -1px;
+}
+
+.tabs-container .tab-pane .panel-body {
+    border-top: none;
+}
+
+.tabs-container .nav-tabs > li.active > a,
+.tabs-container .nav-tabs > li.active > a:hover,
+.tabs-container .nav-tabs > li.active > a:focus {
+    border: 1px solid #e7eaec;
+    border-bottom-color: transparent;
+}
+
+.tabs-container .nav-tabs {
+    border-bottom: 1px solid #e7eaec;
+}
+
+.tabs-container .tab-pane .panel-body {
+    border-top: none;
+}
+
+.tabs-container .tabs-left .tab-pane .panel-body,
+.tabs-container .tabs-right .tab-pane .panel-body {
+    border-top: 1px solid #e7eaec;
+}
+
+.tabs-container .nav-tabs > li a:hover {
+    background: transparent;
+    border-color: transparent;
+}
+
+.tabs-container .tabs-below > .nav-tabs,
+.tabs-container .tabs-right > .nav-tabs,
+.tabs-container .tabs-left > .nav-tabs {
+    border-bottom: 0;
+}
+
+.tabs-container .tabs-left .panel-body {
+    position: static;
+}
+
+.tabs-container .tabs-left > .nav-tabs,
+.tabs-container .tabs-right > .nav-tabs {
+    width: 20%;
+}
+
+.tabs-container .tabs-left .panel-body {
+    width: 80%;
+    margin-left: 20%;
+}
+
+.tabs-container .tabs-right .panel-body {
+    width: 80%;
+    margin-right: 20%;
+}
+
+.tabs-container .tab-content > .tab-pane,
+.tabs-container .pill-content > .pill-pane {
+    display: none;
+}
+
+.tabs-container .tab-content > .active,
+.tabs-container .pill-content > .active {
+    display: block;
+}
+
+.tabs-container .tabs-below > .nav-tabs {
+    border-top: 1px solid #e7eaec;
+}
+
+.tabs-container .tabs-below > .nav-tabs > li {
+    margin-top: -1px;
+    margin-bottom: 0;
+}
+
+.tabs-container .tabs-below > .nav-tabs > li > a {
+    -webkit-border-radius: 0 0 4px 4px;
+    -moz-border-radius: 0 0 4px 4px;
+    border-radius: 0 0 4px 4px;
+}
+
+.tabs-container .tabs-below > .nav-tabs > li > a:hover,
+.tabs-container .tabs-below > .nav-tabs > li > a:focus {
+    border-top-color: #e7eaec;
+    border-bottom-color: transparent;
+}
+
+.tabs-container .tabs-left > .nav-tabs > li,
+.tabs-container .tabs-right > .nav-tabs > li {
+    float: none;
+}
+
+.tabs-container .tabs-left > .nav-tabs > li > a,
+.tabs-container .tabs-right > .nav-tabs > li > a {
+    min-width: 74px;
+    margin-right: 0;
+    margin-bottom: 3px;
+}
+
+.tabs-container .tabs-left > .nav-tabs {
+    float: left;
+    margin-right: 19px;
+}
+
+.tabs-container .tabs-left > .nav-tabs > li > a {
+    margin-right: -1px;
+    -webkit-border-radius: 4px 0 0 4px;
+    -moz-border-radius: 4px 0 0 4px;
+    border-radius: 4px 0 0 4px;
+}
+
+.tabs-container .tabs-left > .nav-tabs .active > a,
+.tabs-container .tabs-left > .nav-tabs .active > a:hover,
+.tabs-container .tabs-left > .nav-tabs .active > a:focus {
+    border-color: #e7eaec transparent #e7eaec #e7eaec;
+    *border-right-color: #ffffff;
+}
+
+.tabs-container .tabs-right > .nav-tabs {
+    float: right;
+    margin-left: 19px;
+}
+
+.tabs-container .tabs-right > .nav-tabs > li > a {
+    margin-left: -1px;
+    -webkit-border-radius: 0 4px 4px 0;
+    -moz-border-radius: 0 4px 4px 0;
+    border-radius: 0 4px 4px 0;
+}
+
+.tabs-container .tabs-right > .nav-tabs .active > a,
+.tabs-container .tabs-right > .nav-tabs .active > a:hover,
+.tabs-container .tabs-right > .nav-tabs .active > a:focus {
+    border-color: #e7eaec #e7eaec #e7eaec transparent;
+    *border-left-color: #ffffff;
+    z-index: 1;
+}
+