Londinium - responsive admin template. Full documentation

- Styled Growl like notification for success, warning, error and info messages
- Animated CSS# loaders
- Tooltip in 4 positions
- Popover
- Full set of Bootstrap components
- Bootstrap components:
  - Progress bars with options
  - Left, right, top, bottom, navbar (left and right aligned), toolbar tabs with optional fade effect
  - 4 sizes pagination: left, center, right aligned
  - Pager: boxed and unboxed
  - Wells
  - Breadcrumbs
  - Accordions and toggles
  - Labels and badges
  - Contextual backgrounds
  - List groups
  - Alerts in 4 colors: line notifications, block notifications, general top notifications
  - Popovers in 4 directions
  - Modals:
    - Default
    - Iconified
    - Tabs
    - Form
    - Tables
    - Editor
  - Buttons and icons:
    - 8 default button colors
    - 5 button sizes: block with 100% width, large, default medium, small, mini
    - Button groups
    - Button dropdowns: top and bottom directions, splitted and standard
    - With icons
    - Custom Icomoon icon font
  - Basic and advanced thumbnails
  - Navs and navbars
- 12 columns responsive mobile first content grid with offset
- Charts:
  - Default line chart
  - Vertical and horizontal bars
  - Pie chart
  - Auto updating chart
  - Custom widgets with charts
- Calendar with schedule
- Tables:
  - Default without side borders
  - Striped table
  - Bordered table
  - Bordered table inside content
  - Hover class
  - Condensed table
  - Datatable
  - Table with footer
  - Table with checkboxes
  - Table with toolbar
  - Tabbed table
- Error pages:
  - 403 error
  - 404 error
  - 405 error
  - 500 error
  - 503 error
  - Website is offline
  - Error page with sidebar
- Typography:
  - Headings and default css stylings
  - Syntax highlighter
  - Left and right blockquotes
  - Emphasys styles
  - 8 default list styles
  - Horizontal and vertical descriptions
- Multiple file uploader with drag and drop functions
- Page with media elements
- Blank pages
- Layouts: left wide widebar, right wide sidebar, left and right narrow sidebars, horizontal navigation, collapsed sidebar
- Page with media elements

# Londinium layout is based on toggling classes in HTML code.

Here go most common layout options:

#### Hiding/showing sidebar

Hidden sidebar is based on CSS3 animation and toggling `.sidebar-hidden` which is added to `.page-container` div. To hide sidebar and make it default just add this class manually to page container div and your sidebar will be hidden by default, you'll get a full width page. To show sidebar, click `.sidebar-toggle` button on top navbar. This button is hidden on <992px screens.

#### Left and right sidebars

Default sidebar position is left. To show it on the right side, add `.sidebar-right` class to `body`.
By default `body` should have `.sidebar-wide` for showing wide sidebar or `.sidebar-narrow` for showing narrow sidebar. Both sidebars support left and right positions

#### Wide and narrow sidebars

Wide left sidebar is a default template sidebar. If you want to show on certain pages narrow sidebar, change `.sidebar-wide` in document body tag to `.sidebar-narrow`, no need to change any html sidebar markup.
Note: Londinium doesn't support dynamic sidebar replacement at the moment, for wide sidebar it uses Collapsible plugin for toggling children navigation levels, narrow sidebar children nav levels use pure css.

#### Fixed navbar

Default template navbar has absolute positioning. If you want to make it fixed, add `.navbar-fixed-top` to parent navbar div and add `.navbar-fixed` class to bodument body tag.

#### Left aligned navigation icons

Default template navigation icons position is right. To change their position to left, simply add `.navigation-icons-left` to `ul.navigation`.

#### Bootstrap dropdown icons alignment

There are 2 options for icon alignment - left and right. Default is left position, to change it to right, add `.icons-right` to `ul.dropdown-menu`, this class floats them to the right side.

### Files structure

There are 4 main folders with files and HTML files.

CSS folder contains all css files, including folder "icons" with icon font files and "wysihtml5" with editor colors

Images folder contains all images, sorted by type and place of usage

JS folder contains all js files: charts settings, functions files and all js plugins

Media folder contains .swf files which are necessary for TableTools plugin.

### HTML Structure

In general there are 59 main theme .html files:

- 403.html - 403 error page
- 404.html - 404 error page
- 405.html - 405 error page
- 500.html - 500 error page
- 503.html - 503 error page
- offline.html - website is offline page
- blank_collapsed_sidebar.html - Blank page with collapsed by default sidebar
- blank_full_width.html - Full width blank page
- blank_left_sidebar.html - Blank page with wide left sidebar
- blank_narrow_sidebar.html - Blank page with narrow sidebar
- blank_right_sidebar.html - Blank page with wide right sidebar
- buttons.html - Page with buttons
- calendar.html - page with calendar
- charts.html - page with charts
- chat_contacts.html - Chat with contact list
- chat_tabs.html - Chat with tabs
- content_grid.html - Default content grid examples
- error_sidebar.html - Error page with sidebar
- faq.html - Frequently asked questions page
- file_uploader.html - Page with multiple file uploader
- form_components.html - Page with main form components
- form_grid.html - Page with inputs grid
- form_layouts.html - Page with form layouts
- form_snippets.html - Page with form custom snippets
- gallery.html - Image and video gallery
- header_elements.html - Page with page header elements
- horizontal_navigation.html - Horizontal navigation page layout
- horizontal_sidebar.html - Horizontal navigation with sidebar
- icons.html - Page with icon set
- index.html - Dashboard page
- info_blocks.html - Custom info widgets and grid buttons
- invoice_list.html - List of invoices
- invoice.html - Invoice template
- layout_fixed_navbar.html - Page with fixed navbar
- login_advanced.html - Login page with user image
- login_simple.html - Simple basic login page
- navbars.html - Page with navbar options
- navigation_disabled_items.html - Page with disabled main navigation items
- navs.html - Bootstrap navs
- panel_options.html - Page with panel heading and panel color options
- profile.html - User profile page
- search.html - Search page
- sidebar_collapsed.html - Page with collapsed sidebar
- sidebar_icons_left.html - Left aligned navigation icons
- sidebar_narrow_left.html - Left narrow sidebar
- sidebar_narrow_right.html - Right narrow sidebar
- sidebar_wide_left.html - Wide left sidebar
- sidebar_wide_right.html - Wide right sidebar
- tables_dynamic.html - Datatables
- tables_static.html - Default static tables
- task_detailed.html - Task detailed page
- task_grid.html - Task grid
- task_list.html - List of tasks
- team.html - Team page
- typography.html - Page with typography elements
- validation.html - Form validation
- visuals.html - Page with visual components
- wysiwyg.html - WYSIWYG editor

All these html files have certain html blocks in their source code. All the html blocks are clearly commented and should be easy to spot. The main structure of a typical 2 columns page would be:

                    <div class="navbar navbar-inversed">...</div>

                    <div class="page-container">

                        <div class="sidebar collapse">...</div>

                        <div class="content-container">

                        ...

                        </div>

                    </div>

                    <div class="footer">...</div>

Londinium template has fully responsive layout - it means that it was adapted for different screen resolutions and mobile devices.

Londinium is available in 2 columns layout version only. On small screens sidebar is hidden by default. To Show or Hide sidebar you need to click on the button on the top menu. After resizing to 992px and more, all layout elements become visible.

##### Icons

Londinium contains custom Icomoon icon font. Default usage is:

                    	<i class="icon-heart"></i>                // Default icomoon font

In upcoming updates FontAwesome icons will be inclued as well.

### CSS files and structure

#### CSS files structure

In total there are 4 css files:

- bootstrap.min.css - Bootstrap css file (minified)
- icons.css - Icomoon icon font
- londinium-theme.css - custom Bootstrap theme for Londinium
- styles.css - Layout and plugin styles

bootstrap.min.css Contains default Bootstrap styles. It hasn't been modified and includes native bootstrap styling.

icons.css Contains Icomoon icon font with necessary styles for glyphs.

londinium-theme.css Contains custom styles for Londinium template, chich overwrite default Bootstrap styles.

styles.css Content and layout styles, including plugins and custom widgets.

#### Responsive layout

Londinium includes media queries, it means that general layout changes general look depending on the screen resolution.

All CSS files are well commented, so you can easily find and edit any style in any CSS file. If you don't want to use responsive layout, delete all media queries and don't forget to remove

                	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

from HTML files, this line prevents scaling in mobile device browsers.

#### Note

All tables in the template are responsive, it works this way - all static tables should be wrapped by

    <div class="table-responsive">...</div>

and on small screens all tables will have horizontal scrolling inside block. All datatables are responsive by default.

### JS files and structure

#### JS files structure

In total there are 59 JS files:

- animated_1.js, animated_2.js, animated_3.js - files with animated charts parameters
- auto_empty.js, auto_filled.js - auto updating charts parameters
- donut.js, pie_full.js, pie.js - pie charts parameters
- horizontal_bars.js, vertical_bars.js - bar charts parameters
- simple_graph.js - simple chart parameters
- multiple_axes.js - multiple axes chart parameters
- filled_blue.js, filled_green.js, filled_red.js - Filled chart settings
- updating_1.js, updating_2.js, updating_3.js - Updating charts for widgets
- globalize.culture.ja-JP.js - globalize culture - Japan
- globalize.culture.de-DE.js - globalize culture - Germany
- globalize.js - globalize culture - English (default)
- excanvas.min.js - excanvas plugin for flot charts
- flot.js - jquery flot library
- flot.animator.js - chart animation flot plugin
- flot.time.js - time flot plugin
- flot.orderbars.js - order bars flot plugin
- flot.pie.js - flot plugin for rendering pie charts
- flot.resize.js - flot plugin for auto redrawing plot on window resize
- sparkline.min.js - small charts plugin
- bootstrap.min.js - minified bootstrap plugins
- autosize.js - elastic textarea
- inputlimit.min.js - input limiter plugin for textareas
- inputmask.js - masked inputs plugin
- listbox.js - dual multiple selects with filtering
- multiselect.js - bootstrap multiselect plugin
- select2.min.js - select2 plugin for dropdowns
- switch.min.js - ios-like switchers plugin
- tags.min.js - tagsinput plugin
- uniform.min.js - uniform plugin for selects/checkboxes/radios styling
- validate.min.js - jquery form validation plugin
- jquery.uniform.min.js - uniform plugin for selects/checkboxes/radios styling
- plupload.full.min.js - pluploader plugin pack minified
- plupload.queue.min.js - pluploader queue
- toolbar.js - toolbar for WYSIWYG editor
- wysihtml5.min.js - WYSIWYG editor
- collapsible.min.js - collapsible plugin for main nav
- colorpicker.js - colorpicker plugin
- datatables.min.js - datatables plugin
- tabletools.min.js - extended tabletools plugin for datatables
- daterangepicker.js - daterangepicker jquery plugin
- fancybox.js - lightbox plugin
- fullcalendar.min.js - jquery fullcalendar plugin
- hover_dropdown.min.js - bootstrap dropdown-on-hover plugin
- jgrowl.min.js - jquery jGrowl plugin
- moment.js - moment jquery plugin. Required for daterangepicker
- mousewheel.js - mousewheel support
- prettify.js - syntax highlighter
- timepicker.min.js - timepicker plugin
- application_blank.js - application file for blank pages
- application.js - plugins and layout settings
- bootstrap.min.js - minified Bootstrap plugins

And 2 .js files (jQuery library, Jquery UI) load from external resource:

    			<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

#### JS files inside HTML pages

In general each HTML page loads 30+ .js files. In your project you can minify all these files into 1 or do whatever you want, but in download package i included all files so you can easily edit/remove/add new files. And depending on the page you can include prettify.js file and mousewheel.js file, they don't have any functions in functions.js file, so i didn't include them to all pages
Each JS file is in proper folder: all files, which are used for forms are placed in /forms/ folder, the same path is in HTML page:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js">

    <script type="text/javascript" src="js/plugins/charts/sparkline.min.js"></script>

    <script type="text/javascript" src="js/plugins/forms/uniform.min.js"></script>
    <script type="text/javascript" src="js/plugins/forms/select2.min.js"></script>
    <script type="text/javascript" src="js/plugins/forms/inputmask.js"></script>
    <script type="text/javascript" src="js/plugins/forms/autosize.js"></script>
    <script type="text/javascript" src="js/plugins/forms/inputlimit.min.js"></script>
    <script type="text/javascript" src="js/plugins/forms/listbox.js"></script>
    <script type="text/javascript" src="js/plugins/forms/multiselect.js"></script>
    <script type="text/javascript" src="js/plugins/forms/validate.min.js"></script>
    <script type="text/javascript" src="js/plugins/forms/tags.min.js"></script>
    <script type="text/javascript" src="js/plugins/forms/switch.min.js"></script>

    <script type="text/javascript" src="js/plugins/forms/uploader/plupload.full.min.js"></script>
    <script type="text/javascript" src="js/plugins/forms/uploader/plupload.queue.min.js"></script>

    <script type="text/javascript" src="js/plugins/forms/wysihtml5/wysihtml5.min.js"></script>
    <script type="text/javascript" src="js/plugins/forms/wysihtml5/toolbar.js"></script>

    <script type="text/javascript" src="js/plugins/interface/daterangepicker.js"></script>
    <script type="text/javascript" src="js/plugins/interface/fancybox.min.js"></script>
    <script type="text/javascript" src="js/plugins/interface/moment.js"></script>
    <script type="text/javascript" src="js/plugins/interface/jgrowl.min.js"></script>
    <script type="text/javascript" src="js/plugins/interface/datatables.min.js"></script>
    <script type="text/javascript" src="js/plugins/interface/colorpicker.js"></script>
    <script type="text/javascript" src="js/plugins/interface/fullcalendar.min.js"></script>
    <script type="text/javascript" src="js/plugins/interface/timepicker.min.js"></script>
    <script type="text/javascript" src="js/plugins/interface/collapsible.min.js"></script>

    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/application.js"></script>

These files need to be included only in charts.html page:

    <script type="text/javascript" src="js/plugins/charts/flot.js"></script>
    <script type="text/javascript" src="js/plugins/charts/flot.orderbars.js"></script>
    <script type="text/javascript" src="js/plugins/charts/flot.pie.js"></script>
    <script type="text/javascript" src="js/plugins/charts/flot.time.js"></script>
    <script type="text/javascript" src="js/plugins/charts/flot.animator.min.js"></script>
    <script type="text/javascript" src="js/plugins/charts/excanvas.min.js"></script>
    <script type="text/javascript" src="js/plugins/charts/flot.resize.min.js"></script>

Javascript files which contain jQuery Flot parameters load only on those pages, which have a graph. There is a well known flot issue with plot drawing, when parameters are loaded, but the chart isn't included to the page:

    <script type="text/javascript" src="js/charts/full/vertical_bars.js"></script>
    <script type="text/javascript" src="js/charts/full/horizontal_bars.js"></script>
    <script type="text/javascript" src="js/charts/full/simple_graph.js"></script>
    <script type="text/javascript" src="js/charts/full/auto_filled.js"></script>
    <script type="text/javascript" src="js/charts/full/auto_empty.js"></script>
    <script type="text/javascript" src="js/charts/full/multiple_axes.js"></script>

    <script type="text/javascript" src="js/charts/full/animated_1.js"></script>
    <script type="text/javascript" src="js/charts/full/animated_2.js"></script>
    <script type="text/javascript" src="js/charts/full/animated_3.js"></script>

    <script type="text/javascript" src="js/charts/full/donut.js"></script>
    <script type="text/javascript" src="js/charts/full/pie.js"></script>
    <script type="text/javascript" src="js/charts/full/pie_full.js"></script>

    <script type="text/javascript" src="js/charts/widgets/filled_green.js"></script>
    <script type="text/javascript" src="js/charts/widgets/filled_red.js"></script>
    <script type="text/javascript" src="js/charts/widgets/filled_blue.js"></script>

    <script type="text/javascript" src="js/charts/widgets/updating_1.js"></script>
    <script type="text/javascript" src="js/charts/widgets/updating_2.js"></script>
    <script type="text/javascript" src="js/charts/widgets/updating_3.js"></script>

Globalization files are needed for spinner input mostly:

    <script type="text/javascript" src="js/globalize/globalize.js"></script>
    <script type="text/javascript" src="js/globalize/globalize.culture.de-DE.js"></script>
    <script type="text/javascript" src="js/globalize/globalize.culture.ja-JP.js"></script>

### Jquery Plugins

List of Jquery plugins which were used in Londinium template, with details:

#### Dual select boxes (listbox)

##### Overview

This plug-in allows you to "transfer" the <option> elements between the <select>s in two distinct ways:

- Move - In this mode, <option> elements will be removed from the <select> in which they currently reside and moved to the other <select>. This is the default.
- Copy - In this mode, items in the first <select> will ALWAYS remain in the first <select>(unless they are hidden by filtering). When they are selected for transfer they will be copied to the second <select> and will be given the class 'copiedOption' in the first <select> (my default styling for this class is yellow background but you may choose whatever styling suits you). If they are then transferred from the second <select>, they disappear from the second<select>, and the 'copiedOption' class is removed from the corresponding <option> in the first <select>.

##### Options

The following table has a listing of all the possible option settings, their default values, their valid values, and a brief description of each.

Parameter | Default Value | Values | Description
--- | --- | --- | ---
box1View | 'box1View' | Any valid HTML id string. | The id attribute of the first visible <select> element.
box1Storage | 'box1Storage' | Any valid HTML id string. | The id attribute of the first hidden <select> element. (See section Document Structure for an explanation of visible/hidden <select> elements.)
box1Filter | 'box1Filter' | Any valid HTML id string. | The id attribute of the textbox used to filter the first<select> element.
box1Clear | 'box1Clear' | Any valid HTML id string. | The id attribute of the element used to clear the filter for the first <select> element. This is typically a button, but can technically be any element.
box1Counter | 'box1Counter' | Any valid HTML id string. | The id attribute of the element used to display counts of visible/total <option>s in the first <select>element. (used when filtering).
box2View | 'box2View' | Any valid HTML id string. | The id attribute of the second visible <select>element.
box2Storage | 'box2Storage' | Any valid HTML id string. | The id attribute of the second hidden <select>element.
box2Filter | 'box2Filter' | Any valid HTML id string. | The id attribute of the textbox used to filter the second<select> element.
box2Clear | 'box2Clear' | Any valid HTML id string. | The id attribute of the element used to clear the filter for the second <select> element. This is typically a button, but can technically be any element.
box2Counter | 'box2Counter' | Any valid HTML id string. | The id attribute of the element used to display counts of visible/total <option>s in the second <select>element. (used when filtering).
to1 | 'to1' | Any valid HTML id string. | The id attribute of the element used to transfer only selected <option>s from the second <select> to the first.
to2 | 'to2' | Any valid HTML id string. | The id attribute of the element used to transfer only selected <option>s from the first <select> to the second.
allTo1 | 'allTo1' | Any valid HTML id string. | The id attribute of the element used to transfer ALL<option>s from the second <select> to the first.
allTo2 | 'allTo2' | Any valid HTML id string. | The id attribute of the element used to transfer ALL<option>s from the first <select> to the second.
transferMode | 'move' | 'move','copy' | The type of transfer to perform on moved items. See section Transfer Modes for a full description of each.
sortBy | 'text' | 'text','value' | The value to sort <option> elements by. 'text' causes them to sort alphanumerically (ascending) by the visible text of the option. 'value' causes them to sort alphanumerically (ascending) by their 'value' attribute.
useFilters | true | true,false | True to enable filtering, false to disable it. If this setting is false, it is recommended that useCounters also be set to false, as the counters will not serve a purpose.
useCounters | true | true,false | True to enable counters, false to disable them.
useSorting | true | true,false | Sorting enforces a consistent sort order on the<option> elements, regardless of what order they are transferred in. Set this to false if you do not want them to (or do not care if they) maintain a consistent order.
selectOnSubmit | true | true,false | In order for options in box 2 to be recieved by POST, they must be selected before the form is submitted. Since this is most often the desired behavior, it is enabled by default. Set this option to false to disable.

Note: Original documentation for this plugin you can find on official plugin's website: http://www.meadmiracle.com/dlb/DLBDocumentation.aspx

#### Time picker

##### Overview

jquery.timepicker is a lightweight timepicker plugin for jQuery inspired by Google Calendar. It supports both mouse and keyboard navigation, and weighs in at 2.5kb minified and gzipped. Default markup:

                    <span class="ui-timepicker-container">
                        <input value="5:00pm" class="ui-timepicker-input" type="text">
                        <ul class="ui-timepicker-list optional-custom-classname" tabindex="-1">
                            <li>12:00am</li>
                            <li>12:30am</li>
                            ...
                            <li>4:30pm</li>
                            <li class="ui-timepicker-selected">5:00pm</li>
                            <li>5:30pm</li>
                            ...
                            <li>11:30pm</li>
                        </ul>
                    </span>

##### Options

- className A class name to apply to the HTML element that contains the timepicker dropdown. default: null

- minTime The time that should appear first in the dropdown list. default: 12:00am

- maxTime The time that should appear last in the dropdown list. Can be used to limit the range of time options. default: 24 hours after minTime

- showDuration Shows the relative time for each item in the dropdown. minTime or durationTime must be set. default: false

- durationTime The time against which showDuration will compute relative times. default: minTime

- step The amount of time, in minutes, between each item in the dropdown. default: 30

- timeFormat How times should be displayed in the list and input element. Uses PHP's date() formatting syntax. default: 'g:ia'

- scrollDefaultNow If no time value is selected, set the dropdown scroll position to show the current time. default: false

- selectOnBlur Update the input with the currently highlighted time value when the timepicker loses focus. default: false

- appendTo Override where the dropdown is appended. Takes either a string to use as a selector, a function that gets passed the clicked input element as argument or a jquery object to use directly default: "body"

- lang Language constants used in the timepicker. Can override the defaults by passing an object with one or more of the following properties: decimal, mins, hr, hrs. default: { decimal: '.', mins: 'mins', hr: 'hr', hrs: 'hrs' }

Note: Original documentation for this plugin you can find on official plugin's website: http://jonthornton.github.com/jquery-timepicker/

#### Bootstrap multiselect

##### Overview

Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user interface for using select inputs with the multiple attribute present. Instead of a select a bootstrap button will be shown as dropdown menu containing the single options as checkboxes.

##### Default markup

                    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
                    <script type="text/javascript" src="js/jquery.min.js"></script>
                    <script type="text/javascript" src="js/bootstrap.min.js"></script>

                    <script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
                    <link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>

                    <elect class="multiselect" multiple="multiple">
                      <option value="cheese">Cheese</option>
                      <option value="tomatoes">Tomatoes</option>
                      <option value="mozarella">Mozzarella</option>
                      <option value="mushrooms">Mushrooms</option>
                      <option value="pepperoni">Pepperoni</option>
                      <option value="onions">Onions</option>
                    </select>

                  $(document).ready(function() {
                    $('.multiselect').multiselect();
                  });

For options and parameters please visit official plugin website.

Note: Original documentation for this plugin you can find on official plugin's website: http://davidstutz.github.io/bootstrap-multiselect/

#### Bootstrap Switch

##### Overview

Turn checkboxes and radio buttons in toggle switches.

##### Default markup

Include the dependencies: jQuery, Bootstrap and Bootstrap Switch CSS + Javascript.

                    <link href="bootstrap.css" rel="stylesheet">
                    <link href="bootstrap-switch.css" rel="stylesheet">
                    <script src="jquery.js"></script>
                    <script src="bootstrap-switch.js"></script>

Add your checkbox

                    <input type="checkbox" name="my-checkbox" checked>

Initialize Bootstrap Switch.

                    $("[name='my-checkbox']").bootstrapSwitch();

Note: Original documentation for this plugin you can find on official plugin's website: http://www.bootstrap-switch.org/#getting-started

#### Color Picker for Bootstrap

##### About

Add color picker to field or to any other element.

- can be used as a component
- alpha picker
- multiple formats: hex, rgb, rgba, hsl, hsla

##### Default markup

                    <div class="input-append color" data-color="rgb(255, 146, 180)" data-color-format="rgb">
                    <input type="text" class="span2" value="" >
                    <span class="add-on"><i style="background-color: rgb(255, 146, 180)"></i></span>
                    </div>

##### Events

Event | Description
--- | ---
show | This event fires immediately when the color picker is displayed.
hide | This event is fired immediately when the color picker is hidden.
changeColor | This event is fired when the color is changed.

Note: Original documentation for this plugin you can find on official plugin's website: http://www.eyecon.ro/bootstrap-colorpicker/

#### Datatables

##### Introduction

DataTables operates on the principle of progressive enhancement, whereby an enhanced and interactive table will be presented to the end user if their browser has the required capabilities. When you initialise the jQuery.dataTable object, information about the table is read directly from the HTML page. In combination with the default values for the features in DataTables, this makes it very easy to integrate directly into your web-site or web-application. Optionally, you can use the initialisation parameters to load data from locations other than the DOM, such as a server-side processing script or an Ajax obtained JSON file.

##### Features

By default the majority of features that DataTables provides are enabled, such that a richly interactive table is presented to end users. However, you may wish to disable various features to customise DataTables to your specific application. This is possible using the following initialisation parameters.

bAutoWidth | Enable or disable automatic column width calculation. This can be disabled as an optimisation (it takes some time to calculate the widths) if the tables widths are passed in using aoColumns.
bDeferRender | Deferred rendering can provide DataTables with a huge speed boost when you are using an Ajax or JS data source for the table. This option, when set to true, will cause DataTables to defer the creation of the table elements for each row until they are needed for a draw - saving a significant amount of time.
bFilter | Enable or disable filtering of data. Filtering in DataTables is "smart" in that it allows the end user to input multiple words (space separated) and will match a row containing those words, even if not in the order that was specified (this allow matching across multiple columns). Note that if you wish to use filtering in DataTables this must remain 'true' - to remove the default filtering input box and retain filtering abilities, please use sDom.
bInfo | Enable or disable the table information display. This shows information about the data that is currently visible on the page, including information about filtered data if that action is being performed.
bJQueryUI | Enable jQuery UI ThemeRoller support (required as ThemeRoller requires some slightly different and additional mark-up from what DataTables has traditionally used).
bLengthChange | Allows the end user to select the size of a formatted page from a select menu (sizes are 10, 25, 50 and 100). Requires pagination (bPaginate).
bPaginate | Enable or disable pagination.
bProcessing | Enable or disable the display of a 'processing' indicator when the table is being processed (e.g. a sort). This is particularly useful for tables with large amounts of data where it can take a noticeable amount of time to sort the entries.
bScrollInfinite | Enable infinite scrolling for DataTables (to be used in combination with sScrollY). Infinite scrolling means that DataTables will continually load data as a user scrolls through a table, which is very useful for large dataset. This cannot be used with pagination, which is automatically disabled.
bSort | Enable or disable sorting of columns. Sorting of individual columns can be disabled by the "bSortable" option for each column.
bSortClasses | Enable or disable the addition of the classes 'sorting_1', 'sorting_2' and 'sorting_3' to the columns which are currently being sorted on. This is presented as a feature switch as it can increase processing time (while classes are removed and added) so for large data sets you might want to turn this off.
bStateSave | Enable or disable state saving. When enabled a cookie will be used to save table display information such as pagination information, display length, filtering and sorting. As such when the end user reloads the page the display display will match what thy had previously set up.
sScrollX | Enable horizontal scrolling. When a table is too wide to fit into a certain layout, or you have a large number of columns in the table, you can enable x-scrolling to show the table in a viewport, which can be scrolled. This property can by any CSS unit, or a number (in which case it will be treated as a pixel measurement).
sScrollY | Enable vertical scrolling. Vertical scrolling will constrain the DataTable to the given height, an enable scrolling for any data which overflows the current viewport. This can be used as an alternative to paging to display a lot of data in a small area (although paging and scrolling can both be enabled at the same time). This property can by any CSS unit, or a number (in which case it will be treated as a pixel measurement).

##### Options

Where the DataTables features can be considered rough grain tuning of your DataTables integration, there are many other parameters which will let you obtain the fine grain tuning you might need to make the integration truly seamless. Almost every function that DataTables provides can be fine tuned in some manner using the initialisation options shown below.

aaData | An array of data to use for the table, passed in at initialisation which will be used in preference to any data which is already in the DOM. This is particularly useful for constructing tables purely in Javascript, for example with a custom Ajax call.
aaSorting | If sorting is enabled, then DataTables will perform a first pass sort on initialisation. You can define which column(s) the sort is performed upon, and the sorting direction, with this variable. The aaSorting array should contain an array for each column to be sorted initially containing the column's index and a direction string ('asc' or 'desc').
aaSortingFixed | This parameter is basically identical to the aaSorting parameter, but cannot be overridden by user interaction with the table. What this means is that you could have a column (visible or hidden) which the sorting will always be forced on first - any sorting after that (from the user) will then be performed as required. This can be useful for grouping rows together.
aLengthMenu | This parameter allows you to readily specify the entries in the length drop down menu that DataTables shows when pagination is enabled. It can be either a 1D array of options which will be used for both the displayed option and the value, or a 2D array which will use the array in the first position as the value, and the array in the second position as the displayed options (useful for language strings such as 'All').
aoSearchCols | Basically the same as oSearch, this parameter defines the individual column filtering state at initialisation time. The array must be of the same size as the number of columns, and each element be an object with the parameters "sSearch" and "bEscapeRegex" (the latter is optional). 'null' is also accepted and the default will be used.
asStripClasses | An array of CSS classes that should be applied to displayed rows. This array may be of any length, and DataTables will apply each class sequentially, looping when required.
bDestroy | Replace a DataTable which matches the given selector and replace it with one which has the properties of the new initialisation object passed. If no table matches the selector, then the new DataTable will be constructed as per normal.
bRetrieve | Retrieve the DataTables object for the given selector. Note that if the table has already been initialised, this parameter will cause DataTables to simply return the object that has already been set up - it will not take account of any changes you might have made to the initialisation object passed to DataTables (setting this parameter to true is an acknowledgement that you understand this). bDestroy can be used to reinitialise a table if you need.
bScrollCollapse | When vertical (y) scrolling is enabled, DataTables will force the height of the table's viewport to the given height at all times (useful for layout). However, this can look odd when filtering data down to a small data set, and the footer is left "floating" further down. This parameter (when enabled) will cause DataTables to collapse the table's viewport down when the result set will fit within the given Y height.
bSortCellsTop | Allows control over whether DataTables should use the top (true) unique cell that is found for a single column, or the bottom (false - default). This is useful when using complex headers.
iCookieDuration | Duration of the cookie which is used for storing session information. This value is given in seconds.
iDeferLoading | When enabled DataTables will not make a request to the server for the first page draw - rather it will use the data already on the page (no sorting etc will be applied to it), thus saving on an XHR at load time. iDeferLoading is used to indicate that deferred loading is required, but it is also used to tell DataTables how many records there are in the full table (allowing the information element and pagination to be displayed correctly).
iDisplayLength | Number of rows to display on a single page when using pagination. If feature enabled (bLengthChange) then the end user will be able to over-ride this to a custom setting using a pop-up menu.
iDisplayStart | Define the starting point for data display when using DataTables with pagination. Note that this parameter is the number of records, rather than the page number, so if you have 10 records per page and want to start on the third page, it should be "20".
iScrollLoadGap | The scroll gap is the amount of scrolling that is left to go before DataTables will load the next 'page' of data automatically. You typically want a gap which is big enough that the scrolling will be smooth for the user, while not so large that it will load more data than need.
oSearch | This parameter allows you to have define the global filtering state at initialisation time. As an object the "sSearch" parameter must be defined, but the "bRegex" and "bSmart" parameters are optional. When "bRegex" is true, the search string will be treated as a regular expression, when false (default) it will be treated as a straight string. When "bSmart" DataTables will use it's smart filtering methods (to word match at any point in the data), when false this will not be done.
sAjaxDataProp | By default DataTables will look for the property 'aaData' when obtaining data from an Ajax source or for server-side processing - this parameter allows that property to be changed. You can use Javascript dotted object notation to get a data source for multiple levels of nesting.
sAjaxSource | You can instruct DataTables to load data from an external source using this parameter (use aData if you want to pass data in you already have). Simply provide a url a JSON object can be obtained from. This object must include the parameter 'aaData' which is a 2D array with the source data.
sCookiePrefix | This parameter can be used to override the default prefix that DataTables assigns to a cookie when state saving is enabled.

sDom

This initialisation variable allows you to specify exactly where in the DOM you want DataTables to inject the various controls it adds to the page (for example you might want the pagination controls at the top of the table). DIV elements (with or without a custom class) can also be added to aid styling. The follow syntax is used:

- The following options are allowed:
  - 'l' - Length changing
  - 'f' - Filtering input
  - 't' - The table!
  - 'i' - Information
  - 'p' - Pagination
  - 'r' - pRocessing
- The following constants are allowed:
  - 'H' - jQueryUI theme "header" classes ('fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix')
  - 'F' - jQueryUI theme "footer" classes ('fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix')
- The following syntax is expected:
  - '<' and '>' - div elements
  - '<"class" and '>' - div with a class
  - '<"#id" and '>' - div with an ID
- Examples:
  - '<"wrapper"flipt>', '<lf<t>ip>'

sPaginationType | DataTables features two different built-in pagination interaction methods ('two_button' or 'full_numbers') which present different page controls to the end user. Further methods can be added using the API (see below).
sScrollXInner | This property can be used to force a DataTable to use more width than it might otherwise do when x-scrolling is enabled. For example if you have a table which requires to be well spaced, this parameter is useful for "over-sizing" the table, and thus forcing scrolling. This property can by any CSS unit, or a number (in which case it will be treated as a pixel measurement).

Note: Original documentation for this plugin you can find on official plugin's website: http://datatables.net/

#### Flot, flot pie, excanvas, order bars ( jquery.flot.js, jquery.flot.pie.js, excanvas.min.js etc. )

##### Introduction

Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side. The focus is on simple usage (all settings are optional), attractive looks and interactive features like zooming and mouse tracking.
The plugin works with Internet Explorer 6+, Firefox 2.x+, Safari 3.0+, Opera 9.5+ and Konqueror 4.x+ with the HTML canvas tag (the excanvasJavascript emulation helper is used for IE < 9).

##### Installation

Just include the Javascript file after you've included jQuery. Generally, all browsers that support the HTML5 canvas tag are supported.
For support for Internet Explorer < 9, you can use Excanvas - a canvas emulator; this is used in the examples bundled with Flot. You just include the excanvas script like this:

    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="excanvas.min.js"></script><![endif]-->

If it's not working on your development IE 6.0, check that it has support for VML which Excanvas is relying on. It appears that some stripped down versions used for test environments on virtual machines lack the VML support.You can also try using Flashcanvas (see http://code.google.com/p/flashcanvas/), which uses Flash to do the emulation. Although Flash can be a bit slower to load than VML, if you've got a lot of points, the Flash version can be much faster overall. Flot contains some wrapper code for activating Excanvas which Flashcanvas is compatible with.
You need at least jQuery 1.2.6, but try at least 1.3.2 for interactive charts because of performance improvements in event handling.

##### Basic usage

Create a placeholder div to put the graph in:

    <div id="placeholder"></div>

You need to set the width and height of this div, otherwise the plot library doesn't know how to scale the graph. You can do it inline like this:

    <div id="placeholder" style="width:600px;height:300px"></div>

You can also do it with an external stylesheet. Make sure that the placeholder isn't within something with a display:none CSS property - in that case, Flot has trouble measuring label dimensions which results in garbled looks and might have trouble measuring the placeholder dimensions which is fatal (it'll throw an exception).
Then when the div is ready in the DOM, which is usually on document ready, run the plot function:

    $.plot($("#placeholder"), data, options);

Here, data is an array of data series and options is an object with settings if you want to customize the plot. Take a look at the examples for some ideas of what to put in or look at the reference in the file "API.txt". Here's a quick example that'll draw a line from (0, 0) to (1, 1):

    $.plot($("#placeholder"), [ [[0, 0], [1, 1]] ], { yaxis: { max: 1 } });

The plot function immediately draws the chart and then returns a plot object with a couple of methods.

Please visit official website of Flot plugin for more detailed documentation

Note: Original documentation for this plugin you can find on official plugin's website: http://code.google.com/p/flot/

#### jQuery Autosize

##### About

A plugin to enable automatic height for textarea elements.

##### Settings

Property | Default | Description
--- | --- | ---
className | 'autosizejs' | The className property is used to specify a class for the mirrored element, in case it's necessary to explicitly set a style on the mirrored element (see the note about line-height below).
append | '' | For appending whitespace to the end of the height calculation (an extra newline improves the apperance when animating). Example $('.textarea').autosize({append: "\n"});
callback | false | A function to call when the textarea is resized.

##### Example usage

                    // Example:
                    $(document).ready(function(){
                    $('textarea').autosize();
                    });

Note: Original documentation for this plugin you can find on official plugin's website: http://www.jacklmoore.com/autosize

#### Inputmask plugin

##### Introduction

Input masks can be used to force the user to enter data conform a specific format. Unlike validation, the user can't enter any other key than the ones specified by the mask.

##### Usage

Via data attributes

Add data attributes to register an element with inputmask functionality as shown in the example above.

Via Javascript

Call the input mask via javascript:

                        $('.inputmask').inputmask()

Note: Original documentation for this plugin you can find on official plugin's website: http://jasny.github.com/bootstrap/javascript.html#inputmask

#### Fancybox lightbox

##### Overview

FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page.

##### Features

- Can display images, HTML elements, SWF movies, Iframes and also Ajax requests
- Customizable through settings and CSS
- Groups related items and adds navigation.
- If the mouse wheel plugin is included in the page then FancyBox will respond to mouse wheel events as well
- Support fancy transitions by using easing plugin
- Adds a nice drop shadow under the zoomed item

##### Default usage

                  $(document).ready(function() {

                        /* This is basic - uses default settings */

                        $("a#single_image").fancybox();

                        /* Using custom settings */

                        $("a#inline").fancybox({
                            'hideOnContentClick': true
                        });

                        /* Apply fancybox to multiple items */

                        $("a.group").fancybox({
                            'transitionIn'	:	'elastic',
                            'transitionOut'	:	'elastic',
                            'speedIn'		:	600,
                            'speedOut'		:	200,
                            'overlayShow'	:	false
                        });

                    });

##### Options

Key | Default value | Description
--- | --- | ---
padding | 10 | Space between FancyBox wrapper and content
margin | 20 | Space between viewport and FancyBox wrapper
opacity | false | When true, transparency of content is changed for elastic transitions
modal | false | When true, 'overlayShow' is set to 'true' and 'hideOnOverlayClick', 'hideOnContentClick', 'enableEscapeButton', 'showCloseButton' are set to 'false'
cyclic | false | When true, galleries will be cyclic, allowing you to keep pressing next/back.
scrolling | 'auto' | Set the overflow CSS property to create or hide scrollbars. Can be set to 'auto', 'yes', or 'no'
width | 560 | Width for content types 'iframe' and 'swf'. Also set for inline content if 'autoDimensions' is set to 'false'
height | 340 | Height for content types 'iframe' and 'swf'. Also set for inline content if 'autoDimensions' is set to 'false'
autoScale | true | If true, FancyBox is scaled to fit in viewport
autoDimensions | true | For inline and ajax views, resizes the view to the element recieves. Make sure it has dimensions otherwise this will give unexpected results
centerOnScroll | false | When true, FancyBox is centered while scrolling page
ajax | { } | Ajax options Note: 'error' and 'success' will be overwritten by FancyBox
swf | {wmode: 'transparent'} | Params to put on the swf object
hideOnOverlayClick | true | Toggle if clicking the overlay should close FancyBox
hideOnContentClick | false | Toggle if clicking the content should close FancyBox
overlayShow | true | Toggle overlay
overlayOpacity | 0.3 | Opacity of the overlay (from 0 to 1; default - 0.3)
overlayColor | '#666' | Color of the overlay
titleShow | true | Toggle title
titlePosition | 'outside' | The position of title. Can be set to 'outside', 'inside' or 'over'
titleFormat | null | Callback to customize title area. You can set any html - custom image counter or even custom navigation
transitionIn, transitionOut | 'fade' | The transition type. Can be set to 'elastic', 'fade' or 'none'
speedIn, speedOut | 300 | Speed of the fade and elastic transitions, in milliseconds
changeSpeed | 300 | Speed of resizing when changing gallery items, in milliseconds
changeFade | 'fast' | Speed of the content fading while changing gallery items
easingIn, easingOut | 'swing' | Easing used for elastic animations
showCloseButton | true | Toggle close button
showNavArrows | true | Toggle navigation arrows
enableEscapeButton | true | Toggle if pressing Esc button closes FancyBox
onStart | null | Will be called right before attempting to load the content
onCancel | null | Will be called after loading is canceled
onComplete | null | Will be called once the content is displayed
onCleanup | null | Will be called just before closing
onClosed | null | Will be called once FancyBox is closed

Note: Original documentation for this plugin you can find on official plugin's website: http://fancybox.net/home

#### WYSIHTML5 editor

##### Usage

wysihtml5 is an open source rich text editor based on HTML5 technology and the progressive-enhancement approach. It uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.

##### Features

- It's fast and lightweight (smaller than TinyMCE, Aloha, ...)
- Auto-linking of urls as-you-type
- Generates valid and semantic HTML5 markup (even when the content is pasted from MS Word)
- Uses class names instead of inline styles
- Unifies line break handling across browsers
- Uses sandboxed iframes in order to prevent identity theft through XSS
- Speech-input for Chrome
- No jQuery required

##### Basic usage

###### 1. Include scripts

- The first script contains the html5 parser rules that are needed for wysihtml5 in order to create valid and desired markup.
- Either use one of the existing parser rules sets or create your own.
- Check the advanced.js parser rules for details.
- The second script is the minified wysihtml5 library. It’s located in the dist folder of this repository.

                    <script src="/path-to-wysihtml5/parser_rules/advanced.js"></script>

                    <script src="/path-to-wysihtml5/dist/wysihtml5-0.3.0.min.js"></script>

###### 2. Create a textarea

wysihtml5 takes a textarea and transforms it into a rich text editor. The textarea acts as a fallback for unsupported browsers (eg. IE < 8). Make sure the textarea element has an id, so we can later access it easily from javascript. The resulting rich text editor will much behave and look like the textarea since behavior (placeholder, autofocus, …) and css styles will be copied over. Please note: The textarea will always hold the editor’s generated markup. Therefore wysihtml5 integrates smoothly with forms.

                    <form><textarea id="wysihtml5-textarea" placeholder="Enter your text ..." autofocus></textarea></form>

###### 3. Create a toolbar

The toolbar contains the formatting options. Make sure the toolbar element has an id and has display: none. Please note: wysihtml5 supports many more formatting commands

                    <div id="wysihtml5-toolbar" style="display: none;">
                      <a data-wysihtml5-command="bold">bold</a>
                      <a data-wysihtml5-command="italic">italic</a>

                      <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="red">red</a>
                      <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="green">green</a>
                      <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="blue">blue</a>

                      <a data-wysihtml5-command="createLink">insert link</a>
                      <div data-wysihtml5-dialog="createLink" style="display: none;">
                        <label>
                          Link:
                          <input data-wysihtml5-dialog-field="href" value="http://" class="text">
                        </label>
                        <a data-wysihtml5-dialog-action="save">OK</a> <a data-wysihtml5-dialog-action="cancel">Cancel</a>
                      </div>
                    </div>

###### 4. Initialize wysihtml5

Make sure you place the `<script>` at the end of the document, before the `</body>` tag because the document must be loaded before running the script. Or, test if document is loaded (i.e. jQuery’s $(document).ready()) and initialize the editor aferwards. wysihtml5 supports many more configuration options.

                    var editor = new wysihtml5.Editor("wysihtml5-textarea", { // id of textarea element
                      toolbar:      "wysihtml5-toolbar", // id of toolbar element
                      parserRules:  wysihtml5ParserRules // defined in parser rules set
                    });

Note: Original advanced documentation for this plugin you can find on official plugin's website: https://github.com/xing/wysihtml5/wiki/Getting-Started

#### Custom form elements ( uniform.js )

##### Usage

Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.

##### Installation

Installation of Uniform is quite simple. First, make sure you have jQuery 1.3+ installed. Then you'll want to link to the jquery.uniform.js file and uniform.default.css in the head area of your page:

                <script src="jquery.uniform.js" type="text/javascript"></script>
                <link rel="stylesheet" href="uniform.default.css" type="text/css" media="screen" charset="utf-8" />

##### Basic usage

Using Uniform can be quite easy as well. Simply call:

                $(function(){ $("select").uniform(); });

To "uniform" all possible form elements, just do something like this:

                $("select, input:checkbox, input:radio, input:file").uniform();

##### Extra parameters

You can pass in extra parameters to control certain aspects of Uniform. To pass in parameters, use syntax like this:

                $("select").uniform({
                  param1: value,
                  param2: value,
                  param3: value
                });

##### Tips and tricks

Uniform is supposed to be pretty simple, but there are a few things that can be tricky. Here are some tips that may make your experience simpler:
Remember to change the CSS classes in the theme if you change the parameters for elements' classes. This can be tedious work, but if you don't do it, it's not going to look correct. Find and Replace is your friend.
Uniform cannot automatically sniff out dynamic value changes. If you make changes to elements in Javascript or using a Reset button of some kind remember to call $.uniform.update(); to sync the changes with Uniform.
Uniform is disabled in IE6. It's not possible to fix due to the way IE6 handles form elements. If you care about IE6 users, give it a quick look to make sure your "naked" form elements look alright in there.
You're on your own for styling text inputs and more. Fortunately, things that are not handled by Uniform are pretty easy to skin. :)

Note: Original advanced documentation for this plugin you can find on official plugin's website: http://uniformjs.com/#docs

#### Multiple file uploader (Plupload)

##### Configuration

Each plupload instance has a set of config options. Here is a short description about each available option.

##### General options

Here is a list of options that are available in the core API. Some of them are runtime specific. Checkout the custom exampleto see these option used live.

###### runtimes

This is a comma separated list of runtimes that you want to initialize the uploader instance with. It will try to initialize each runtime in order if one fails it will move on to the next one.

###### url

Page URL to where the files will be uploaded to.

###### max_file_size

Maximum file size that the user can pick. This string can be in the following formats 100b, 10kb, 10mb.

###### chunk_size

Enables you to chunk the file into smaller pieces for example if your PHP backend has a max post size of 1MB you can chunk a 10MB file into 10 requests. To disable chunking, remove this config option from your setup.

###### unique_names

Generate unique filenames when uploading. This will generate unqiue filenames for the files so that they don't for example collide with existing ones on the server.

###### resize

Enables plupload to resize the images to clientside to the specified width, height and quality. Set this to an object with those parameters.

###### filters

List of filters to apply when the user selects files. This is currently file extension filters there are two items for each filter. title and extensions.

###### flash_swf_url

URL to where the SWF file is for the Flash runtime.

###### silverlight_xap_url

URL to where the XAP file is for the Silverlight runtime.

###### browse_button

String with the ID of the browse button. Flash, HTML 5 and Silverlight requires a shim so you need to specify the id of the button that the shim will be placed above for those runtimes. This option is not required for by the queue widget.

###### drop_element

String with the ID of the element that you want to be able to drop files into this is only used by some runtimes that support it.

###### container

Element ID to add object elements to, this defaults to the document body element.

###### multipart

Boolean state if the files should be uploaded using mutlipart instead of direct binary streams. Doesn't work on WebKit using the HTML 5 runtime.

###### multipart_params

Object name/value collection with arguments to get posted together with the multipart file.

###### required_features

Comma separated list of features that each runtime must have for it to initialize.

###### headers

Name/value object with custom headers to add to HTTP requests.

##### Queue widget specific options

Here is a list of options that is specific to the jQuery queue widget.

###### preinit

Function callback that enables you to bind events before the uploader is initialized.

###### dragdrop

Boolean state if the drag/drop support for all runtimes should be enabled or disabled. Default is true.

###### rename

Boolean state if it should be possible to rename files before uploading them. Default is false.

###### multiple_queues

Boolean state if you should be able to upload multiple times or not.

###### urlstream_upload

Boolean state if Flash should be forced to use URLStream instead of FileReference.upload.

##### Example of the various config options

                var uploader = new plupload.Uploader({
                    runtimes : 'gears,html5,flash,silverlight,browserplus',
                    browse_button : 'pickfiles',
                    max_file_size : '10mb',
                    resize : {width : 320, height : 240, quality : 90},
                    url : 'upload.php',
                    flash_swf_url : '/plupload/js/plupload.flash.swf',
                    silverlight_xap_url : '/plupload/js/plupload.silverlight.xap',
                    filters : [
                        {title : "Image files", extensions : "jpg,gif,png"},
                        {title : "Zip files", extensions : "zip"}
                    ]
                });

In this implemented version i used only HTML5 and HTML4 runtimes. HTML4 works in IE and Opera only and doesn't support lots of features. More information here

Note: Original documentation for this plugin you can find on official plugin's website: http://www.plupload.com/index.php

#### Fullcalendar plugin

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided forGoogle Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event). It is open source and dual licensed under the MIT or GPL Version 2 licenses.

##### Basic Usage

The first step in embedding a calendar on a web page is to have the right JavaScript and CSS files. Make sure you are including the FullCalendar stylesheet, as well as the FullCalendar and jQuery JS files, in the <head> of your page:

                    <link rel='stylesheet' type='text/css' href='fullcalendar.css' />
                    <script type='text/javascript' src='jquery.js'></script>
                    <script type='text/javascript' src='fullcalendar.js'></script>

If you plan on doing dragging or resizing, you need some additional jQuery UI files (more information here).

Once you have your dependencies, you need to write the JavaScript code that initializes the calendar. This code must be executed after the page has initialized. The best way to do this is with jQuery's $(document).ready like so:

                $(document).ready(function() {

                    // page is now ready, initialize the calendar...
                    $('#calendar').fullCalendar({

                        // put your options and callbacks here

                    })
                });

##### Options

Most of FullCalendar's documentation describes options that affect the look or behavior of the calendar. Options are usually set when the calendar is initialized, like so:

                    $('#calendar').fullCalendar({
                        weekends: false // will hide Saturdays and Sundays
                    });

##### Callbacks

Callbacks are sort of like options, but they are functions that get called whenever something special happens. In the following example, an alert box will appear whenever the user clicks on a day:

                    $('#calendar').fullCalendar({
                        dayClick: function() {
                            alert('a day has been clicked!');
                        }
                    });

##### Methods

Methods provide ways to manipulate the calendar from JavaScript code. A method operates on the jQuery object of a calendar that has already been initialized, using the familiar fullCalendar command, but in a completely different way:

                    $('#calendar').fullCalendar('next');

This will call the next method and will force to the calendar to move to the next month/week/day.

Note: Original documentation for this plugin you can find on official plugin's website: http://arshaw.com/fullcalendar/docs/usage/

#### Collapsible ( jquery.collapsible.min.js )

##### Introduction

This plugin enables site owners to control multiple collapsible panels by auto opening any defaults specified, and keeping those opened/closed by users as they left them while browsing your site.

##### Default settings

                {
                    cssClose: 'collapse-close',
                    cssOpen: 'collapse-open',
                    cookieName: 'collapsible',
                    cookieOptions: {
                        path: '/',
                        expires: 7,
                        domain: '',
                        secure: ''
                    },
                    defaultOpen: '',
                    speed: 300,
                    bind: 'click',
                    animateOpen: function (elem, opts) {
                        elem.next().slideUp(opts.speed);
                    },
                    animateClose: function (elem, opts) {
                        elem.next().slideDown(opts.speed);
                    }
                }

##### Default options

- cssClose :
  This is the class you want assigned when it is closed.
- cssOpen :
  This is the class you want assigned when it is opened.
- cookieName :
  This is the name of the cookie that will store which collapsibles should be open.
- cookieOptions :
  See the jquery.cookie plugin for more information.
- defaultOpen :
  This is comma separated list of collapsible header ids.
- speed :
  This is the animation speed for the slide up/down.
- bind :
  This is the event that you want the collapsibles to function on. only 4 are supported: click, dblclick, mouseenter, and mouseover.
- animateOpen :
  This is a custom callback to alter the way that an element is opened.
- animateClose :
  This is a custom callback to alter the way that an element is closed.

##### Methods

You can call following methods on collapsible elements:

- collapsed :
  returns 'true' if element is collapsed
- toggle :
  toggle collapsible state
- open :
  open a collapsible
- close :
  close a collapsible

Call them using jquery-ui style:

                $(selector).collapsible('method', [arg]);

Examples:

                if ( $('#nav-block').collapsible('collapsed') ) { ... }

                or

                appendToLog('Error: service is down!');
                $('#nav-logs').collapsible('open');

Note: Original documentation for this plugin you can find on official plugin's website: http://www.snyderplace.com/2010/03/jquery-collapsible-plugin/

#### Input limiter plugin

##### Introduction

This jQuery plugin will allow you to limit input into form fields. It can display a message as the user types to let them know how many characters they have remaining.

##### Options

- limit
  Type: Integer
  Default: 255

  Controls how many characters the Input Limiter will allow the user to type into the field it is attached to. Once the limit is reached the user's input will be truncated.

- boxAttach
  Type: Boolean
  Default: true

  Determines whether the box containing the Input Limiter remText and limitText will attach itself to the bottom the field that is in focus.

- boxId
  Type: String
  Default: 'limiterBox'

  Determines the id that will be assigned to the box that will display the remText and limitText.

- boxClass
  Type: String
  Default: 'limiterBox'

  Determines the class that will be attached to the box (boxId) that will display the remText and limitText.

- remText
  Type: String
  Default: '%n character%s remaining.'

  This string displayed the remaining characters. It will be updated as the user types into the input. Using the default remTextFilter; %n will be replaced with the number of characters remaining, %s a plural 's'. The %s will be replaced by the letter 's' except when %n is equals to 1, then %s will return nothing. If zeroPlural is set to false this will also return nothing when %n is equal to 0.

- remTextFilter
  Type: Function
  Default:

                  function (opts, charsRemaining) {
                      var remText = opts.remText;
                      remText = remText.replace(/\%n/g, charsRemaining);
                      remText = remText.replace(/\%s/g, ( charsRemaining == 1?'':'s' ));
                      return remText;
                  };

  This function gets two arguments passed to it: the options, and the remaining characters. By Default this function replaces '%n' with the characters remaining and '%s' with the letter 's' when charsRemaining is anything but '1'.

- remTextHideOnBlur
  Type: Boolean
  Default: true

  Controls whether the remText is displayed after the input loses focus. The limitText will still be displayed. This option only applies if attachBox is false, otherwise the boxId will be hidden when the field loses focus.

- remFullText
  Type: String
  Default: null

  This string is displayed when the remaining characters is equals to zero. If this string is null remText will be displayed.

- limitTextShow
  Type: Boolean
  Default: true

  Determines whether the limitText will be displayed after the remText.

- limitText
  Type: String
  Default: 'Field limited to %n character%s.'

  Text that informs the user about the limit. Using the default limitTextFilter; %n will be replaced with the number of characters thje field is limited to, %s adds a plural 's'. The %s will be replaced by the letter 's' except when %n is equals to 1, then %s will return nothing.

Note: Original documentation for this plugin you can find on official plugin's website: http://rustyjeans.com/jquery-plugins/input-limiter

#### Tags input

##### Introduction

Do you use tags to organize content on your site? This plugin will turn your boring tag list into a magical input that turns each tag into a style-able object with its own delete link. The plugin handles all the data - your form just sees a comma-delimited list of tags!

##### Options

                $(selector).tagsInput({
                   'autocomplete_url': url_to_autocomplete_api,
                   'autocomplete': { option: value, option: value},
                   'height':'100px',
                   'width':'300px',
                   'interactive':true,
                   'defaultText':'add a tag',
                   'onAddTag':callback_function,
                   'onRemoveTag':callback_function,
                   'onChange' : callback_function,
                   'removeWithBackspace' : true,
                   'minChars' : 0,
                   'maxChars' : 0 //if not provided there is no limit,
                   'placeholderColor' : '#666666'
                });

Note: Original documentation for this plugin you can find on official plugin's website: http://xoxco.com/projects/code/tagsinput/

#### Mousewheel plugin

##### Introduction

A jQuery plugin that adds cross-browser mouse wheel support. In order to use the plugin, simply bind the "mousewheel" event to an element. It also provides two helper methods called mousewheel and unmousewheel that act just like other event helper methods in jQuery. The event callback receives an extra argument which is the normalized "delta" of the mouse wheel.

##### Example usage

                    // using bind
                    $('#my_elem').bind('mousewheel', function(event, delta) {
                        console.log(delta);
                    });

                    // using the event helper
                    $('#my_elem').mousewheel(function(event, delta) {
                        console.log(delta);
                    });

Note: Original documentation for this plugin you can find on official plugin's website: http://brandonaaron.net/code/mousewheel/docs

#### Select2 plugin

##### Introduction

Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results

##### Example usage

                    <head>
                        <link href="select2.css" rel="stylesheet"/>
                        <script src="select2.js"></script>
                        <script>
                            $(document).ready(function() { $("#e1").select2(); });
                        </script>
                    </head>
                    <body>
                        <select id="e1">
                            <option value="AL">Alabama</option>
                            ...
                            <option value="WY">Wyoming</option>
                        </select>
                    </body>

##### Browser compatibility

- IE 8+ (7 mostly works except for issue with z-index)
- Chrome 8+
- Firefox 3.5+
- Safari 3+
- Opera 10.6+

Note: Original documentation for this plugin you can find on official plugin's website: http://ivaynberg.github.com/select2/

#### Bootstrap Hover Dropdown Plugin

##### Introduction

A simple plugin to enable Bootstrap dropdowns to activate on hover and provide a nice user experience. The dropdowns are dismissed after a configurable delay. This fixes an issue that can instantly close your nav because of a 1px gap between the button/nav item that activated the dropdown and the actual dropdown. It is also generally a better user experience, as users are not punished by going 1 pixel outside of the dropdown, which would instantly close the nav without a delay. Note: The HTML markup is the same as with any other Bootstrap dropdown. This will not interfere with Bootstrap's default activate-on-click method (i.e. this plugin combined with Bootstrap's default behavior work well to support both the ideal experience on desktop and mobile).

##### Installation

Once you have the files downloaded, link to the files in your code after you include the main Bootstrap JS file(s):

                    <script src="/path/to/jquery.min.js"></script>
                    <script src="/path/to/bootstrap.min.js"></script>
                    <script src="/path/to/bootstrap-hover-dropdown.min.js"></script>

##### Usage

Just like in Bootstrap you can activate it without any JavaScript, just by adding a data-attribute, you can make it automatically work. Add `data-hover="dropdown"` in addition (or in place of) Bootstrap's `data-toggle="dropdown"`. You can set options via data-attributes, too, via `data-delay` and `data-close-others`. Here's an example of markup:

                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false">
                            Account <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a tabindex="-1" href="#">My Account</a></li>
                            <li class="divider"></li>
                            <li><a tabindex="-1" href="#">Change Email</a></li>
                            <li><a tabindex="-1" href="#">Change Password</a></li>
                            <li class="divider"></li>
                            <li><a tabindex="-1" href="#">Logout</a></li>
                        </ul>
                    </li>

Alternatively, you can initialize via JavaScript:

                    $('.dropdown-toggle').dropdownHover(options);

This also works with submenus without any other configuring since Bootstrap already supports this feature. Just use the markup like you were using before. Only the top level anchor tag needs any special markup for my plugin to work (see demo for proper markup).

##### Options

- delay: (optional) The delay in miliseconds. This is the time to wait before closing a dropdown when the mouse is no longer over the dropdown or the button/nav item that activated it. Defaults to 500.
- instantlyCloseOthers: (optional) A boolean value that when true, will instantly close all other dropdowns matched by the selector used when you activate a new navigation. This is nice for when you have dropdowns close together that may overlap. Default is true.

Note: Original documentation for this plugin you can find on official plugin's website: https://github.com/CWSpear/bootstrap-hover-dropdown

#### Tabletools

##### Introduction

TableTools is a plug-in for the DataTables HTML table enhancer, which adds a highly customisable button toolbar to a DataTable. Key features include:

- Copy to clipboard
- Save table data as CSV, XLS or PDF files
- Print view for clean printing
- Row selection options
- Easy use predefined buttons
- Simple customisation of buttons
- Well defined API for advanced control

##### Initialisation

Initialisation of TableTools is typically done at the same time as the initialisation of DataTables through the sDom and oTableTools properties. Customisation of TableTools is done through the properties of the oTableTools object - a full list of the options available is provided before. It is also possible to initialise TableTools directly, which can be useful when you want an easy reference to the instance, or to place the toolbar outside the DataTables DOM structure.

                    /*
                     * Example initialisation
                     */
                    $(document).ready( function () {
                        $('#example').dataTable( {
                            "sDom": 'T<"clear">lfrtip',
                            "oTableTools": {
                                "sSwfPath": "/swf/copy_csv_xls_pdf.swf"
                            }
                        } );
                    } );

##### DataTables properties

- aButtons - This parameter defined the buttons that TableTools will use and provides the primary focus for customisation of TableTools. In it's basic form the elements of this array are strings which match the predefined buttons, but the elements can also be objects which define your own buttons, or override the default actions.
- fnPreRowSelect - This is a callback function which is fired just prior to a row being selected (i.e. the mouse down has occurred, but TableTools has not yet selected the row). It can be used to cancel the selection if needed
- fnRowDeselected - Callback function which is called when a row is deselected (i.e. the opposite of fnRowSelected).
- fnRowSelected - Callback function which occurs when a row is selected. This allows a particular action to occur when any row is selected (a selected row counter for example).
- sRowSelect - TableTools provides everything that is needed to allow the end user to select rows in a table (by clicking on them). This is disabled by default, but can be readily enabled by setting this property to either "single" (to allow only one row in the table to be selected at a time), "multi" (to allow any number of rows to be selected) or "os" (to provide operating system like row selection including cmd/ctrl and shift select).
- sSelectedClass - Set the class used to indicate that a row has been selected by the end user.
- sSwfPath - Define the path of the SWF to be used by TableTools for copy to clipboard and saving a file locally operations. If you are having problems with these operations, but not printing, this is very likely to be the issue.

##### Initialisation parameters

- oTableTools - To customise the TableTools options through the DataTables initialisation object, you can make use of this parameter. Any of the options given in the "Initialisation parameters" section below can be used here.
- sDom - The sDom parameter in DataTables is used to position the various controls that DataTables adds to the table (filtering, paging etc) in the DOM. This will directly effect the position of the elements in the display, when combined with your CSS. TableTools can be included by inserting the character 'T' into sDom. This is all that is needed to initialise TableTools - everything is options and customisation.

Note: Original documentation for this plugin you can find on official plugin's website: https://datatables.net/extras/tabletools/initialisation

#### jQuery validation plugin

##### Introduction

This jQuery plugin makes simple clientside form validation easy, whilst still offering plenty of customization options. It makes a good choice if you’re building something new from scratch, but also when you’re trying to integrate something into an existing application with lots of existing markup. The plugin comes bundled with a useful set of validation methods, including URL and email validation, while providing an API to write your own methods. All bundled methods come with default error messages in english and translations into 37 other languages.

##### Default usage

Field validations

You may need different ways to specify validation rules according to the server-side enviroment you are using on different projects:

                    <form class="cmxform" id="commentForm" method="get" action="">
                      <fieldset>
                        <legend>Please provide your name, email address (won't be published) and a comment</legend>
                        <p>
                          <label for="cname">Name (required, at least 2 characters)</label>
                          <input id="cname" name="name" minlength="2" type="text" required/>
                        </p>
                        <p>
                          <label for="cemail">E-Mail (required)</label>
                          <input id="cemail" type="email" name="email" required/>
                        </p>
                        <p>
                          <label for="curl">URL (optional)</label>
                          <input id="curl" type="url" name="url"/>
                        </p>
                        <p>
                          <label for="ccomment">Your comment (required)</label>
                          <textarea id="ccomment" name="comment" required></textarea>
                        </p>
                        <p>
                          <input class="submit" type="submit" value="Submit"/>
                        </p>
                      </fieldset>
                    </form>
                    <script>
                    $("#commentForm").validate();
                    </script>

A single line of jQuery to select the form and apply the validation plugin, plus a few annotations on each element to specify the validation rules. Of course that isn't the only way to specify rules. You also don't have to rely on those default messages, but they come in handy when starting to setup validation for a form.

###### Validator

The validate method returns a Validator object that has a few public methods that you can use to trigger validation programmatically or change the contents of the form. The validator object has more methods, but only those documented here are intended for usage.

- Validator.form() – Validates the form.
- Validator.element() – Validates a single element.
- Validator.resetForm() – Resets the controlled form.
- Validator.showErrors() – Show the specified messages.
- Validator.numberOfInvalids() – Returns the number of invalid fields.

There are a few static methods on the validator object:

- jQuery.validator.addMethod() – Add a custom validation method.
- jQuery.validator.format() – Replaces {n} placeholders with arguments.
- jQuery.validator.setDefaults() – Modify default settings for validation.
- jQuery.validator.addClassRules() – Add a compound class method.

##### Validation methods

- required – Makes the element required.
- remote – Requests a resource to check the element for validity.
- minlength – Makes the element require a given minimum length.
- maxlength – Makes the element require a given maxmimum length.
- rangelength – Makes the element require a given value range.
- min – Makes the element require a given minimum.
- max – Makes the element require a given maximum.
- range – Makes the element require a given value range.
- email – Makes the element require a valid email
- url – Makes the element require a valid url
- date – Makes the element require a date.
- dateISO – Makes the element require an ISO date.
- number – Makes the element require a decimal number.
- digits – Makes the element require digits only.
- creditcard – Makes the element require a credit card number.
- equalTo – Requires the element to be the same as another one

Note: Original documentation for this plugin you can find on official plugin's website: http://jqueryvalidation.org/documentation/

#### Date Range Picker for Bootstrap

##### Introduction

This date range picker component for Bootstrap creates a dropdown menu from which a user can select a range of dates. I created it while building the UI for Improvely, which needed a way to select date ranges for reports. If invoked with no options, it will present two calendars to choose a start and end date from. Optionally, you can provide a list of date ranges the user can select from instead of choosing dates from the calendars. If attached to a text input, the selected dates will be inserted into the text box. Otherwise, you can provide a custom callback function to receive the selection.

##### Default usage

This component relies on Bootstrap, Moment.js and jQuery. Separate stylesheets are included for use with Bootstrap 2 or Bootstrap 3. Basic usage:

                    <script type="text/javascript" src="jquery.js"></script>
                    <script type="text/javascript" src="moment.js"></script>
                    <script type="text/javascript" src="daterangepicker.js"></script>
                    <link rel="stylesheet" type="text/css" href="bootstrap.css" />
                    <link rel="stylesheet" type="text/css" href="daterangepicker-bs3.css" />

                    <script type="text/javascript">
                    $(document).ready(function() {
                      $('input[name="daterange"]').daterangepicker();
                    });
                    </script>

The constructor also takes an optional options object and callback function. The function will be called whenever the selected date range has been changed by the user, and is passed the start and end dates (moment date objects) as parameters. It will not fire if the picker is closed without any change to the selected dates.

                    $('input[name="daterange"]').daterangepicker(
                      {
                        format: 'YYYY-MM-DD',
                        startDate: '2013-01-01',
                        endDate: '2013-12-31'
                      },
                      function(start, end) {
                        alert('A date range was chosen: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
                      }
                    );

###### Options

- `startDate:` (Date object, moment object or string) The start of the initially selected date range
- `endDate:` (Date object, moment object or string) The end of the initially selected date range
- `minDate:` (Date object, moment object or string) The earliest date a user may select
- `maxDate:` (Date object, moment object or string) The latest date a user may select
- `dateLimit:` (object) The maximum span between the selected start and end dates. Can have any property you can add to a moment object (i.e. days, months)
- `showDropdowns:` (boolean) Show year and month select boxes above calendars to jump to a specific month and year
- `showWeekNumbers:` (boolean) Show week numbers at the start of each week on the calendars
- `timePicker:` (boolean) Allow selection of dates with times, not just dates
- `timePickerIncrement:` (number) Increment of the minutes selection list for times (i.e. 30 to allow only selection of times ending in 0 or 30)
- `timePicker12Hour:` (boolean) Use 12-hour instead of 24-hour times, adding an AM/PM select box
- `ranges:` (object) Set predefined date ranges the user can select from. Each key is the label for the range, and its value an array with two dates representing the bounds of the range
- `opens:` (string: 'left'/'right') Whether the picker appears aligned to the left or to the right of the HTML element it's attached to
- `buttonClasses:` (array) CSS class names that will be added to all buttons in the picker
- `applyClass:` (string) CSS class string that will be added to the apply button
- `cancelClass:` (string) CSS class string that will be added to the cancel button
- `format:` (string) Date/time format string used by moment when parsing or displaying the selected dates
- `separator:` (string) Separator string to display between the start and end date when populating a text input the picker is attached to
- `locale:` (object) Allows you to provide localized strings for buttons and labels, and the first day of week for the calendars
- `singleDatePicker:` (boolean) Show only a single calendar to choose one date, instead of a range picker with two calendars; the start and end dates provided to your callback will be the same single date chosen

###### Functions

Several functions are provided for updating the picker's option and state after initialization:

- `setOptions(object, function):` This function has the same signature and purpose as the date range picker's constructor: it sets the picker's options to their defaults, overrides them with any values in an options object you provide, and sets the callback for selection changes to whatever function you provide
- `setStartDate(Date/moment/string):` Sets the date range picker's currently selected start date to the provided date
- `setEndDate(Date/moment/string):` Sets the date range picker's currently selected end date to the provided date

###### Events

Several events are triggered on the element you attach the picker to, which you can listen for:

- `show:` Triggered when the picker is shown
- `hide:` Triggered when the picker is hidden
- `apply:` Triggered when the apply button is clicked
- `cancel:` Triggered when the cancel button is clicked

Some applications need a "clear" instead of a "cancel" functionality, which can be achieved by changing the button label and watching for the cancel event:

                    $('#daterange').daterangepicker({
                      locale: { cancelLabel: 'Clear' }
                    });

                    $('#daterange').on('cancel', function(ev, picker) {
                      //do something, like clearing an input
                      $('#daterange').val('');
                    });

While passing in a callback to the constructor is the easiest way to listen for changes in the selected date range, you can also do something every time the apply button is clicked even if the selection hasn't changed:

                    $('#daterange').daterangepicker();
                    $('#daterange').on('apply', function(ev, picker) {
                      console.log(picker.startDate.format('YYYY-MM-DD'));
                      console.log(picker.endDate.format('YYYY-MM-DD'));
                    });

Note: Original documentation for this plugin you can find on official plugin's website: https://github.com/dangrossman/bootstrap-daterangepicker

### Bootstrap documentation

I didn't add to this documentation file any docs or explanations for Bootstrap plugins, because i won't describe it more detailed than official Bootstrap website will.

I kept original Bootstrap markup for all elements in html and css files, however some elements require additional classes like buttons with caret dropdown for proper alignment and others, but not too many. In general everything is equal to original markup.

Original Bootstrap documentation could be found here - http://getbootstrap.com/

Please note - i tried to style almost all bootstrap elements, but anyway i didn't use these components:

- Carousel plugin
- Affix plugin

### Jquery plugin functions and other code

Explanations for plugin loaders, which are placed into application.js file and other jquery stuff.

#### Datatables:

                /* # Data tables
                ================================================== */

                    //===== Default datatable =====//

                    oTable = $('.datatable table').dataTable({
                        "bJQueryUI": false,
                        "bAutoWidth": false,
                        "sPaginationType": "full_numbers",
                        "sDom": '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
                        "oLanguage": {
                            "sSearch": "<span>Filter:</span> _INPUT_",
                            "sLengthMenu": "<span>Show entries:</span> _MENU_",
                            "oPaginate": { "sFirst": "First", "sLast": "Last", "sNext": ">", "sPrevious": "<" }
                        }
                    });

                    //===== Table with selectable rows (including TableTools plugin) =====//

                    oTable = $('.datatable-selectable table').dataTable({
                        "bJQueryUI": false,
                        "bAutoWidth": false,
                        "sPaginationType": "full_numbers",
                        "sDom": '<"datatable-header"Tfl><"datatable-scroll"t><"datatable-footer"ip>',
                        "oLanguage": {
                            "sSearch": "<span>Filter:</span> _INPUT_",
                            "sLengthMenu": "<span>Show:</span> _MENU_",
                            "oPaginate": { "sFirst": "First", "sLast": "Last", "sNext": ">", "sPrevious": "<" }
                        },
                        "oTableTools": {
                            "sRowSelect": "multi",
                            "aButtons":
                            [
                                {
                                    "sExtends": "collection",
                                    "sButtonText": "Tools <span class='caret'></span>",
                                    "sButtonClass": "btn btn-primary",
                                    "aButtons":    [ "select_all", "select_none" ]
                                }
                            ]
                        }
                    });

                    //===== Table with media elements =====//

                    oTable = $('.datatable-media table').dataTable({
                        "bJQueryUI": false,
                        "bAutoWidth": false,
                        "sPaginationType": "full_numbers",
                        "sDom": '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
                        "oLanguage": {
                            "sSearch": "<span>Filter:</span> _INPUT_",
                            "sLengthMenu": "<span>Show:</span> _MENU_",
                            "oPaginate": { "sFirst": "First", "sLast": "Last", "sNext": ">", "sPrevious": "<" }
                        },
                        "aoColumnDefs": [
                          { "bSortable": false, "aTargets": [ 0, 4 ] }
                        ]
                    });

                    //===== Table with pager =====//

                    oTable = $('.datatable-pager table').dataTable({
                        "bJQueryUI": false,
                        "bAutoWidth": false,
                        "sPaginationType": "two_button",
                        "sDom": '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
                        "oLanguage": {
                            "sSearch": "<span>Filter:</span> _INPUT_",
                            "sLengthMenu": "<span>Show entries:</span> _MENU_",
                            "oPaginate": { "sNext": "Next →", "sPrevious": "← Previous" }
                        }
                    });

                    //===== Table with tools (including TableTools plugin) =====//

                    oTable = $('.datatable-tools table').dataTable({
                        "bJQueryUI": false,
                        "bAutoWidth": false,
                        "sPaginationType": "full_numbers",
                        "sDom": '<"datatable-header"Tfl><"datatable-scroll"t><"datatable-footer"ip>',
                        "oLanguage": {
                            "sSearch": "<span>Filter:</span> _INPUT_",
                            "sLengthMenu": "<span>Show:</span> _MENU_",
                            "oPaginate": { "sFirst": "First", "sLast": "Last", "sNext": ">", "sPrevious": "<" }
                        },
                        "oTableTools": {
                            "sRowSelect": "single",
                            "sSwfPath": "media/swf/copy_csv_xls_pdf.swf",
                            "aButtons": [
                                {
                                    "sExtends":    "copy",
                                    "sButtonText": "Copy",
                                    "sButtonClass": "btn"
                                },
                                {
                                    "sExtends":    "print",
                                    "sButtonText": "Print",
                                    "sButtonClass": "btn"
                                },
                                {
                                    "sExtends":    "collection",
                                    "sButtonText": "Save <span class='caret'></span>",
                                    "sButtonClass": "btn btn-primary",
                                    "aButtons":    [ "csv", "xls", "pdf" ]
                                }
                            ]
                        }
                    });

                    //===== Table with custom sorting columns =====//

                    oTable = $('.datatable-custom-sort table').dataTable({
                        "bJQueryUI": false,
                        "bAutoWidth": false,
                        "sPaginationType": "full_numbers",
                        "sDom": '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
                        "oLanguage": {
                            "sSearch": "<span>Filter:</span> _INPUT_",
                            "sLengthMenu": "<span>Show:</span> _MENU_",
                            "oPaginate": { "sFirst": "First", "sLast": "Last", "sNext": ">", "sPrevious": "<" }
                        },
                        "aoColumnDefs": [
                          { "bSortable": false, "aTargets": [ 0, 1 ] }
                        ]
                    });

                    //===== Table with invoices =====//

                    oTable = $('.datatable-invoices table').dataTable({
                        "bJQueryUI": false,
                        "bAutoWidth": false,
                        "sPaginationType": "full_numbers",
                        "sDom": '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
                        "oLanguage": {
                            "sSearch": "<span>Filter:</span> _INPUT_",
                            "sLengthMenu": "<span>Show:</span> _MENU_",
                            "oPaginate": { "sFirst": "First", "sLast": "Last", "sNext": ">", "sPrevious": "<" }
                        },
                        "aoColumnDefs": [
                          { "bSortable": false, "aTargets": [ 1, 6 ] }
                        ],
                        "aaSorting": [[0,'desc']]
                    });

                    //===== Table with tasks =====//

                    oTable = $('.datatable-tasks table').dataTable({
                        "aaSorting": [],
                        "bJQueryUI": false,
                        "bAutoWidth": false,
                        "sPaginationType": "full_numbers",
                        "sDom": '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
                        "oLanguage": {
                            "sSearch": "<span>Filter tasks:</span> _INPUT_",
                            "sLengthMenu": "<span>Show tasks:</span> _MENU_",
                            "oPaginate": { "sFirst": "First", "sLast": "Last", "sNext": ">", "sPrevious": "<" }
                        },
                        "aoColumnDefs": [
                          { "bSortable": false, "aTargets": [ 5 ] }
                        ]
                    });

                    //===== Datatable with tfoot column filters =====//

                    var asInitVals = new Array();
                    var oTable = $('.datatable-add-row table').dataTable({
                        "bJQueryUI": false,
                        "bAutoWidth": false,
                        "sPaginationType": "full_numbers",
                        "sDom": '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
                        "oLanguage": {
                            "sSearch": "<span>Filter all:</span> _INPUT_",
                            "sLengthMenu": "<span>Show entries:</span> _MENU_",
                            "oPaginate": { "sFirst": "First", "sLast": "Last", "sNext": ">", "sPrevious": "<" }
                        }
                    });

                    $(".dataTables_wrapper tfoot input").keyup( function () {
                        oTable.fnFilter( this.value, $(".dataTables_wrapper tfoot input").index(this) );
                    });

                    //===== Adding placeholder to Datatable filter input field =====//

                    $('.dataTables_filter input[type=text]').attr('placeholder','Type to filter...');

#### Select2 dropdowns

                    /* # Select2 dropdowns
                    ================================================== */

                        //===== Datatable select =====//

                        $(".dataTables_length select").select2({
                            minimumResultsForSearch: "-1"
                        });

                        //===== Default select =====//

                        $(".select").select2({
                            minimumResultsForSearch: "-1",
                            width: 200
                        });

                        //===== Liquid select =====//

                        $(".select-liquid").select2({
                            minimumResultsForSearch: "-1",
                            width: "off"
                        });

                        //===== Full width select =====//

                        $(".select-full").select2({
                            minimumResultsForSearch: "-1",
                            width: "100%"
                        });

                        //===== Select with filter input =====//

                        $(".select-search").select2({
                            width: 200
                        });

                        //===== Multiple select =====//

                        $(".select-multiple").select2({
                            width: "100%"
                        });

                        //===== Loading data select =====//

                        $("#loading-data").select2({
                            placeholder: "Enter at least 1 character",
                            allowClear: true,
                            minimumInputLength: 1,
                            query: function (query) {
                                var data = {results: []}, i, j, s;
                                for (i = 1; i < 5; i++) {
                                    s = "";
                                    for (j = 0; j < i; j++) {s = s + query.term;}
                                    data.results.push({id: query.term + i, text: s});
                                }
                                query.callback(data);
                            }
                        });

                        //===== Select with maximum =====//

                        $(".maximum-select").select2({
                            maximumSelectionSize: 3,
                            width: "100%"
                        });

                        //===== Allow clear results select =====//

                        $(".clear-results").select2({
                            placeholder: "Select a State",
                            allowClear: true,
                            width: 200
                        });

                        //===== Select with minimum =====//

                        $(".minimum-select").select2({
                            minimumInputLength: 2,
                            width: 200
                        });

                        //===== Multiple select with minimum =====//

                        $(".minimum-multiple-select").select2({
                            minimumInputLength: 2,
                            width: "100%"
                        });

                        //===== Disabled select =====//

                        $(".select-disabled").select2(
                            "enable", false
                        );

#### Jquery Validation settings

                    $(".validate").validate({
                        errorPlacement: function(error, element) {
                            if (element.parent().parent().attr("class") == "checker" || element.parent().parent().attr("class") == "choice" ) {
                              error.appendTo( element.parent().parent().parent().parent().parent() );
                            }
                            else if (element.parent().parent().attr("class") == "checkbox" || element.parent().parent().attr("class") == "radio" ) {
                              error.appendTo( element.parent().parent().parent() );
                            }
                            else {
                              error.insertAfter(element);
                            }
                        },
                        rules: {
                            minimum_characters: {
                                required: true,
                                minlength: 3
                            },
                            maximum_characters: {
                                required: true,
                                maxlength: 6
                            },
                            minimum_number: {
                                required: true,
                                min: 3
                            },
                            maximum_number: {
                                required: true,
                                max: 6
                            },
                            range: {
                                required: true,
                                range: [6, 16]
                            },
                            email_field: {
                                required: true,
                                email: true
                            },
                            url_field: {
                                required: true,
                                url: true
                            },
                            date_field: {
                                required: true,
                                date: true
                            },
                            digits_only: {
                                required: true,
                                digits: true
                            },
                            enter_password: {
                                required: true,
                                minlength: 5
                            },
                            repeat_password: {
                                required: true,
                                minlength: 5,
                                equalTo: "#enter_password"
                            },
                            custom_message: "required",
                            group_styled: {
                                required: true,
                                minlength: 2
                            },
                            group_unstyled: {
                                required: true,
                                minlength: 2
                            },
                            agree: "required"
                        },
                        messages: {
                            custom_message: {
                                required: "Bazinga! This message is editable",
                            },
                            agree: "Please accept our policy"
                        },
                        success: function(label) {
                            label.text('Success!').addClass('valid');
                        }
                    });

#### Bootstrap Multiselect

                    /* # Bootstrap Multiselects
                    ================================================== */

                        //===== Default multiselect =====//

                        $('.multi-select').multiselect({
                            buttonClass: 'btn btn-default',
                            onChange:function(element, checked){
                                $.uniform.update();
                            }
                        });

                        //===== Multiselect with colored button =====//

                        $('.multi-select-color').multiselect({
                            buttonClass: 'btn btn-info',
                            onChange:function(element, checked){
                                $.uniform.update();
                            }
                        });

                        //===== Multiselect with "Select All" option =====//

                        $('.multi-select-all').multiselect({
                            buttonClass: 'btn btn-default',
                            includeSelectAllOption: true,
                            onChange:function(element, checked){
                                $.uniform.update();
                            }
                        });

                        //===== onChange function =====//

                        $('.multi-select-onchange').multiselect({
                            buttonClass: 'btn btn-default',
                            onChange:function(element, checked){
                                $.uniform.update();
                                $.jGrowl('Change event invoked!', { header: 'Update', position: 'center', life: 1500 });
                            }
                        });

                        //===== Right aligned multiselect dropdown =====//

                        $('.multi-select-right').multiselect({
                            buttonClass: 'btn btn-default',
                            dropRight: true,
                            onChange:function(element, checked){
                                $.uniform.update();
                            }
                        });

                        //===== Search field select =====//

                        $('.multi-select-search').multiselect({
                            buttonClass: 'btn btn-link btn-lg btn-icon',
                            dropRight: true,
                            buttonText: function(options) {
                                if (options.length == 0) {
                                  return '<b class="caret"></b>';
                                }
                                else {
                                  return ' <b class="caret"></b>';
                                }
                            },
                            onChange:function(element, checked){
                                $.uniform.update();
                            }
                        });

#### jQuery UI Autocomplete

                    //===== jQuery UI Autocomplete =====//

                    var availableTags = [
                      "ActionScript",
                      "AppleScript",
                      "Asp",
                      "BASIC",
                      "C",
                      "C++",
                      "Clojure",
                      "COBOL",
                      "ColdFusion",
                      "Erlang",
                      "Fortran",
                      "Groovy",
                      "Haskell",
                      "Java",
                      "JavaScript",
                      "Lisp",
                      "Perl",
                      "PHP",
                      "Python",
                      "Ruby",
                      "Scala",
                      "Scheme"
                    ];
                    $( ".autocomplete" ).autocomplete({
                      source: availableTags
                    });

#### jQuery UI Sliders

                    //===== Jquery UI sliders =====//

                    $( "#default-slider" ).slider();

                    $( "#increments-slider" ).slider({
                        value:100,
                        min: 0,
                        max: 500,
                        step: 50,
                        slide: function( event, ui ) {
                        $( "#donation-amount" ).val( "$" + ui.value );
                    }
                    });
                    $( "#donation-amount" ).val( "$" + $( "#increments-slider" ).slider( "value" ) );

                    $( "#range-slider, #range-slider1" ).slider({
                        range: true,
                        min: 0,
                        max: 500,
                        values: [ 75, 300 ],
                        slide: function( event, ui ) {
                            $( "#price-amount, #price-amount1" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
                        }
                    });
                    $( "#price-amount, #price-amount1" ).val( "$" + $( "#range-slider, #range-slider1" ).slider( "values", 0 ) +
                      " - $" + $( "#range-slider, #range-slider1" ).slider( "values", 1 ) );

                    $( "#slider-range-min, #slider-range-min1" ).slider({
                        range: "min",
                        value: 37,
                        min: 1,
                        max: 700,
                        slide: function( event, ui ) {
                            $( "#min-amount, #min-amount1" ).val( "$" + ui.value );
                        }
                    });
                    $( "#min-amount, #min-amount1" ).val( "$" + $( "#slider-range-min, #slider-range-min1" ).slider( "value" ) );

                    $( "#slider-range-max, #slider-range-max1" ).slider({
                        range: "max",
                        min: 1,
                        max: 10,
                        value: 2,
                        slide: function( event, ui ) {
                            $( "#max-amount, #max-amount1" ).val( ui.value );
                        }
                    });
                    $( "#max-amount, #max-amount1" ).val( $( "#slider-range-max, #slider-range-max1" ).slider( "value" ) );

#### jQuery UI Spinner

                    //===== Spinner options =====//

                    $( "#spinner-default" ).spinner();

                    $( "#spinner-decimal" ).spinner({
                        step: 0.01,
                        numberFormat: "n"
                    });

                    $( "#culture" ).change(function() {
                        var current = $( "#spinner-decimal" ).spinner( "value" );
                        Globalize.culture( $(this).val() );
                        $( "#spinner-decimal" ).spinner( "value", current );
                    });

                    $( "#currency" ).change(function() {
                        $( "#spinner-currency" ).spinner( "option", "culture", $( this ).val() );
                    });

                    $( "#spinner-currency" ).spinner({
                        min: 5,
                        max: 2500,
                        step: 25,
                        start: 1000,
                        numberFormat: "C"
                    });

                    $( "#spinner-overflow" ).spinner({
                        spin: function( event, ui ) {
                            if ( ui.value > 10 ) {
                                $( this ).spinner( "value", -10 );
                                return false;
                            } else if ( ui.value < -10 ) {
                                $( this ).spinner( "value", 10 );
                                return false;
                            }
                        }
                    });

                    $.widget( "ui.timespinner", $.ui.spinner, {
                        options: {
                            // seconds
                            step: 60 * 1000,
                            // hours
                            page: 60
                        },

                        _parse: function( value ) {
                            if ( typeof value === "string" ) {
                                // already a timestamp
                                if ( Number( value ) == value ) {
                                    return Number( value );
                                }
                                return +Globalize.parseDate( value );
                            }
                            return value;
                        },

                        _format: function( value ) {
                            return Globalize.format( new Date(value), "t" );
                        }
                    });

                    $( "#spinner-time" ).timespinner();
                    $( "#culture-time" ).change(function() {
                        var current = $( "#spinner-time" ).timespinner( "value" );
                        Globalize.culture( $(this).val() );
                        $( "#spinner-time" ).timespinner( "value", current );
                    });

#### jQuery UI Datepicker

                    //===== jQuery UI Datepicker =====//

                    $( ".datepicker" ).datepicker({
                        showOtherMonths: true
                    });

                    $( ".datepicker-inline" ).datepicker({ showOtherMonths: true });

                    $( ".datepicker-multiple" ).datepicker({
                        showOtherMonths: true,
                      numberOfMonths: 3
                    });

                    $( ".datepicker-trigger" ).datepicker({
                      showOn: "button",
                      buttonImage: "images/interface/datepicker_trigger.png",
                      buttonImageOnly: true,
                      showOtherMonths: true
                    });

                    $( ".from-date" ).datepicker({
                      defaultDate: "+1w",
                      numberOfMonths: 3,
                      showOtherMonths: true,
                      onClose: function( selectedDate ) {
                        $( ".to-date" ).datepicker( "option", "minDate", selectedDate );
                      }
                    });
                    $( ".to-date" ).datepicker({
                      defaultDate: "+1w",
                      numberOfMonths: 3,
                      showOtherMonths: true,
                      onClose: function( selectedDate ) {
                        $( ".from-date" ).datepicker( "option", "maxDate", selectedDate );
                      }
                    });

                    $( ".datepicker-restricted" ).datepicker({ minDate: -20, maxDate: "+1M +10D", showOtherMonths: true });

#### Bootstrap Tooltip

                    //===== Tooltip =====//

                    $('.tip').tooltip();

#### Bootstrap Popover

                    //===== Popover =====//

                    $("[data-toggle=popover]").popover().click(function(e) {
                        e.preventDefault()
                    });

#### Bootstrap Loading Button

                    //===== Loading button =====//

                    $('.btn-loading').click(function () {
                        var btn = $(this)
                        btn.button('loading')
                        setTimeout(function () {
                            btn.button('reset')
                        }, 3000)
                    });

#### Bootstrap Dropdown fadeIn/fadeOut animation

                    //===== Add fadeIn animation to dropdown =====//

                    $('.dropdown, .btn-group').on('show.bs.dropdown', function(e){
                        $(this).find('.dropdown-menu').first().stop(true, true).fadeIn(100);
                    });

                    //===== Add fadeOut animation to dropdown =====//

                    $('.dropdown, .btn-group').on('hide.bs.dropdown', function(e){
                        $(this).find('.dropdown-menu').first().stop(true, true).fadeOut(100);
                    });

#### Prevent dropdown from closing on click

                    //===== Prevent dropdown from closing on click =====//

                    $('.popup').click(function (e) {
                        e.stopPropagation();
                    });

#### Pluploader

                //===== Pluploader (multiple file uploader) =====//

                $(".multiple-uploader").pluploadQueue({
                    runtimes : 'html5, html4',
                    url : '../upload.php',
                    chunk_size : '1mb',
                    unique_names : true,
                    filters : {
                        max_file_size : '10mb',
                        mime_types: [
                            {title : "Image files", extensions : "jpg,gif,png"},
                            {title : "Zip files", extensions : "zip"}
                        ]
                    },
                    resize : {width : 320, height : 240, quality : 90}
                });

#### WYSIHTML5 Editor

                    //===== WYSIWYG editor =====//

                    $('.editor').wysihtml5({
                        stylesheets: "css/wysihtml5/wysiwyg-color.css"
                    });

#### Elastic textarea

                    //===== Elastic textarea =====//

                    $('.elastic').autosize();

#### Listbox

                    //===== Dual select boxes =====//

                    $.configureBoxes();

#### Input limiter

                    //===== Input limiter =====//

                    $('.limited').inputlimiter({
                        limit: 100,
                        boxId: 'limit-text',
                        boxAttach: false
                    });

#### Tags Input plugin

                    //===== Tags Input =====//

                    $('.tags').tagsInput({width:'100%'});
                    $('.tags-autocomplete').tagsInput({
                        width:'100%',
                        autocomplete_url:'tags_autocomplete.html'
                    });

#### Uniform plugin - styled checkboxes, radios and file inputs

                    //===== Form elements styling =====//

                    $(".styled, .multiselect-container input").uniform({ radioClass: 'choice', selectAutoWidth: false });

#### Sparkline Charts

                    //===== Sparkline charts =====//

                    $('.bar-danger').sparkline(
                        'html', {type: 'bar', barColor: '#D65C4F', height: '35px', barWidth: "5px", barSpacing: "2px", zeroAxis: "false"}
                    );
                    $('.bar-success').sparkline(
                        'html', {type: 'bar', barColor: '#65B688', height: '35px', barWidth: "5px", barSpacing: "2px", zeroAxis: "false"}
                    );

                    $('.bar-primary').sparkline(
                        'html', {type: 'bar', barColor: '#32434D', height: '35px', barWidth: "5px", barSpacing: "2px", zeroAxis: "false"}
                    );
                    $('.bar-warning').sparkline(
                        'html', {type: 'bar', barColor: '#EE8366', height: '35px', barWidth: "5px", barSpacing: "2px", zeroAxis: "false"}
                    );
                    $('.bar-info').sparkline(
                        'html', {type: 'bar', barColor: '#3CA2BB', height: '35px', barWidth: "5px", barSpacing: "2px", zeroAxis: "false"}
                    );
                    $('.bar-default').sparkline(
                        'html', {type: 'bar', barColor: '#ffffff', height: '35px', barWidth: "5px", barSpacing: "2px", zeroAxis: "false"}
                    );

                    /* Activate hidden Sparkline on tab show */
                    $('a[data-toggle="tab"]').on('shown.bs.tab', function () {
                        $.sparkline_display_visible();
                    });

                    /* Activate hidden Sparkline */
                    $('.collapse').on('shown.bs.collapse', function () {
                      $.sparkline_display_visible();
                    });

#### Fancybox - lightbox plugin

                    //===== Fancy box (lightbox plugin) =====//

                    $(".lightbox").fancybox({
                        padding: 1
                    });

#### Date Range Picker for Bootstrap

                    //===== DateRangePicker plugin =====//

                    $('#reportrange').daterangepicker(
                    {
                        startDate: moment().subtract('days', 29),
                        endDate: moment(),
                        minDate: '01/01/2012',
                        maxDate: '12/31/2014',
                        dateLimit: { days: 60 },
                        ranges: {
                        'Today': [moment(), moment()],
                        'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
                        'Last 7 Days': [moment().subtract('days', 6), moment()],
                        'This Month': [moment().startOf('month'), moment().endOf('month')],
                        'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
                    },
                    opens: 'left',
                    buttonClasses: ['btn'],
                    applyClass: 'btn-small btn-info btn-block',
                    cancelClass: 'btn-small btn-default btn-block',
                    format: 'MM/DD/YYYY',
                    separator: ' to ',
                    locale: {
                        applyLabel: 'Submit',
                        fromLabel: 'From',
                        toLabel: 'To',
                        customRangeLabel: 'Custom Range',
                        daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
                        monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                        firstDay: 1
                        }
                    },
                    function(start, end) {
                        $.jGrowl('A date range was changed', { header: 'Update', position: 'center', life: 1500 });
                        $('#reportrange .date-range').html(start.format('<i>D</i> <b><i>MMM</i> <i>YYYY</i></b>') + '<em> - </em>' + end.format('<i>D</i> <b><i>MMM</i> <i>YYYY</i></b>'));
                    }
                    );

                    /* Custom date display layout */
                    $('#reportrange .date-range').html(moment().subtract('days', 29).format('<i>D</i> <b><i>MMM</i> <i>YYYY</i></b>') + '<em> - </em>' + moment().format('<i>D</i> <b><i>MMM</i> <i>YYYY</i></b>'));
                    $('#reportrange').on('show', function(ev, picker) {
                      $('.range').addClass('range-shown');
                    });

                    $('#reportrange').on('hide', function(ev, picker) {
                      $('.range').removeClass('range-shown');
                    });

#### Bootstrap Switch

                    //===== Bootstrap switches =====//

                    $('.switch').bootstrapSwitch();

#### Fullcalendar plugin

                    //===== Fullcalendar =====//

                    var date = new Date();
                    var d = date.getDate();
                    var m = date.getMonth();
                    var y = date.getFullYear();
                    var calendar = $('.fullcalendar').fullCalendar({
                        header: {
                            left: 'prev,next,today',
                            center: 'title',
                            right: 'month,agendaWeek,agendaDay'
                        },
                        selectable: true,
                        selectHelper: true,
                        select: function(start, end, allDay) {
                            var title = prompt('Event Title:');
                            if (title) {
                                calendar.fullCalendar('renderEvent',
                                    {
                                        title: title,
                                        start: start,
                                        end: end,
                                        allDay: allDay
                                    },
                                    true // make the event "stick"
                                );
                            }
                            calendar.fullCalendar('unselect');
                        },
                        editable: true,
                        events: [
                            {
                                title: 'All Day Event',
                                start: new Date(y, m, 1)
                            },
                            {
                                title: 'Long Event',
                                start: new Date(y, m, d-5),
                                end: new Date(y, m, d-2)
                            },
                            {
                                id: 999,
                                title: 'Repeating Event',
                                start: new Date(y, m, d-3, 16, 0),
                                allDay: false
                            },
                            {
                                id: 999,
                                title: 'Repeating Event',
                                start: new Date(y, m, d+4, 16, 0),
                                allDay: false
                            },
                            {
                                title: 'Meeting',
                                start: new Date(y, m, d, 10, 30),
                                allDay: false
                            },
                            {
                                title: 'Lunch',
                                start: new Date(y, m, d, 12, 0),
                                end: new Date(y, m, d, 14, 0),
                                allDay: false
                            },
                            {
                                title: 'Birthday Party',
                                start: new Date(y, m, d+1, 19, 0),
                                end: new Date(y, m, d+1, 22, 30),
                                allDay: false
                            }
                        ]
                    });

                    /* Render hidden calendar on tab show */
                    $('a[data-toggle="tab"]').on('shown.bs.tab', function () {
                        $('.fullcalendar').fullCalendar('render');
                    });

#### Code Prettifier

                    //===== Code prettifier =====//

                    window.prettyPrint && prettyPrint();

#### Time Picker

                    //===== Time pickers =====//

                    $('#defaultValueExample, #time').timepicker({ 'scrollDefaultNow': true });

                    $('#durationExample').timepicker({
                        'minTime': '2:00pm',
                        'maxTime': '11:30pm',
                        'showDuration': true
                    });

                    $('#onselectExample').timepicker();
                    $('#onselectExample').on('changeTime', function() {
                        $('#onselectTarget').text($(this).val());
                    });

                    $('#timeformatExample1, #timeformatExample3').timepicker({ 'timeFormat': 'H:i:s' });
                    $('#timeformatExample2, #timeformatExample4').timepicker({ 'timeFormat': 'h:i A' });

#### Color Picker

                    //===== Color picker =====//

                    $('.color-picker').colorpicker();

                    $('.color-picker-hex').colorpicker({
                        format: 'hex'
                    });

                    /* Change navbar background color */
                    var topStyle = $('.navbar-inverse')[0].style;
                    $('.change-navbar-color').colorpicker().on('changeColor', function(ev){
                        topStyle.background = ev.color.toHex();
                    });

#### jGrowl Defaults

                    //===== jGrowl notifications defaults =====//

                    $.jGrowl.defaults.closer = false;
                    $.jGrowl.defaults.easing = 'easeInOutCirc';

#### Collapsible plugin

                    //===== Collapsible navigation =====//

                    $('.sidebar-wide li:not(.disabled) .expand, .sidebar-narrow .navigation > li ul .expand').collapsible({
                        defaultOpen: 'second-level,third-level',
                        cssOpen: 'level-opened',
                        cssClose: 'level-closed',
                        speed: 150
                    });

#### Options for panel - hiding and closing

                    //===== Panel Options (collapsing, closing) =====//

                    /* Collapsing */
                    $('[data-panel=collapse]').click(function(e){
                    e.preventDefault();
                    var $target = $(this).parent().parent().next('div');
                    if($target.is(':visible'))
                    {
                    $(this).children('i').removeClass('icon-arrow-up9');
                    $(this).children('i').addClass('icon-arrow-down9');
                    }
                    else
                    {
                    $(this).children('i').removeClass('icon-arrow-down9');
                    $(this).children('i').addClass('icon-arrow-up9');
                    }
                    $target.slideToggle(200);
                    });

                    /* Closing */
                    $('[data-panel=close]').click(function(e){
                        e.preventDefault();
                        var $panelContent = $(this).parent().parent().parent();
                        $panelContent.slideUp(200).remove(200);
                    });

#### Demo spinner animation

                    //===== Showing spinner animation demo =====//

                    $('.run-first').click(function(){
                        $('body').append('');
                        $('.overlay').fadeIn(150);
                        window.setTimeout(function(){
                            $('.overlay').fadeOut(150, function() {
                                $(this).remove();
                            });
                        },5000);
                    });

                    $('.run-second').click(function(){
                        $('body').append('');
                        $('.overlay').fadeIn(150);
                        window.setTimeout(function(){
                            $('.overlay').fadeOut(150, function() {
                                $(this).remove();
                            });
                        },5000);
                    });

                    $('.run-third').click(function(){
                        $('body').append('');
                        $('.overlay').fadeIn(150);
                        window.setTimeout(function(){
                            $('.overlay').fadeOut(150, function() {
                                $(this).remove();
                            });
                        },5000);
                    });

#### Toggle class for hide/show sidebar

                    //===== Hiding sidebar =====//

                    $('.sidebar-toggle').click(function () {
                        $('.page-container').toggleClass('sidebar-hidden');
                    });

#### Disabling navigation items

                    //===== Disabling main navigation links =====//

                    $('.navigation li.disabled a, .navbar-nav > .disabled > a').click(function(e){
                        e.preventDefault();
                    });

#### Toggle active class in panel groups

                    //===== Toggling active class in accordion groups =====//

                    $('.panel-trigger').click(function(e){
                        e.preventDefault();
                        $(this).toggleClass('active');
                    });

### Blank pages and application.js files

In blank html files and application_blank.js file you will find clean and empty pages without any content and js file with necessary js code without plugins needed for layout. Usage is very simple - just take this file as a base and add necessary content to html and js files, only that content you'll be using.

### Credits and sources

#### Plugins

- Twitter bootstrap
- Collapsible, jQuery Plugin
- FullCalendar
- Color picker for bootstrap
- jQuery DataTables
- Javascript plotting library for jQuery, v. 0.7
- jGrowl
- Dual select boxes
- jQuery Uniform
- Time picker
- WYSIHTML5 editor
- Input Limiter
- jQuery Autosize
- Fancybox
- Plupload

### Changelog

#### Version 1.0 released

#### Version 1.1 released

- Added: - Boxed layout width fixed width
- Fixed: - Right sidebar toggle issue
- Fixed: - Sidebar overlap on small screens. Now it pushes content down
- Fixed: - Narrow sidebar user menu image. Correct border radius
- Fixed: - Fixed navbar sidebar issue. Sidebar appends to the navbar

##### Migrating to the new version:

- Change responsive styles (media queries) for sidebar and sidebar content (styles.css) and navbars (londinium-theme.css)
- Replace functions.css with a new one which comes in the package
- Change styles for .sidebar-narrow .user-menu img
- Add new classes for boxed layout (styles.css) and add rules for .page-container

#### Version 1.2 released

- Added: - Switch from wide sidebar to narrow sidebar
- Added: - Offcanvas layout
- Added: - Few more examples of new datatables plugin
- Updated: - Main navigation accordion instead of toggles
- Updated: - Datatables plugin to the latest version
- Updated: - Minor visual changes
- Updated: - Viewport to prevent scale on mobile devices
- Fixed: - CSS issues (non-existing images, incorrect code)

##### Migrating to the new version:

- Replace all styles related to sidebar and navigation, including media queries
- Replace Datatable styles, required for new API in version 1.10
- Replace Viewport in HTML head
- Replace datatables.min.js and tabletools.min.js files
- Update application.js file
- "Sidebar collapsed" and "Narrow sidebar blank page" have been removed.