First commit

.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    ["env", { "modules": false }],
+    "stage-2"
+  ],
+  "plugins": ["transform-runtime"],
+  "comments": false,
+  "env": {
+    "test": {
+      "presets": ["env", "stage-2"],
+      "plugins": [ "istanbul" ]
+    }
+  }
+}

.dockerignore

@@ -0,0 +1 @@
+undefined

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.eslintrc.js

@@ -0,0 +1,27 @@
+// http://eslint.org/docs/user-guide/configuring
+
+module.exports = {
+  root: true,
+  parser: 'babel-eslint',
+  parserOptions: {
+    sourceType: 'module'
+  },
+  env: {
+    browser: true
+  },
+  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
+  extends: 'standard',
+  // required to lint *.vue files
+  plugins: ['html'],
+  // add your custom rules here
+  rules: {
+    // allow paren-less arrow functions
+    'arrow-parens': 0,
+    // allow async-await
+    'generator-star-spacing': 0,
+    // disable space before func paren
+    'space-before-function-paren': 0,
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
+  }
+}

.gitignore

@@ -0,0 +1,11 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log
+yarn-error.log
+test/unit/coverage
+test/e2e/reports
+selenium-debug.log
+.netlify
+.*.dockerfile
+.vs

.travis.yml

@@ -0,0 +1,7 @@
+language: node_js
+node_js:
+  - 'node'
+install:
+  - 'npm install'
+script:
+  - 'npm run build'

_redirects

@@ -0,0 +1 @@
+/*    /   200

appveyor.yml

@@ -0,0 +1,14 @@
+environment:
+  nodejs_version: "7"
+install:
+  - ps: Install-Product node $env:nodejs_version
+  - npm install --loglevel=error # no warnings
+test_script:
+  # Output useful info for debugging.
+  - node --version
+  - npm --version
+  # run tests
+  - npm run build
+
+# Don't actually build.
+build: off

build/build.js

@@ -0,0 +1,35 @@
+require('./check-versions')()
+
+process.env.NODE_ENV = 'production'
+
+var ora = require('ora')
+var rm = require('rimraf')
+var path = require('path')
+var chalk = require('chalk')
+var webpack = require('webpack')
+var config = require('../config')
+var webpackConfig = require('./webpack.prod.conf')
+
+var spinner = ora('building for production...')
+spinner.start()
+
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
+  if (err) throw err
+  webpack(webpackConfig, function (err, stats) {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false,
+      chunks: false,
+      chunkModules: false
+    }) + '\n\n')
+
+    console.log(chalk.cyan('  Build complete.\n'))
+    console.log(chalk.yellow(
+      '  Tip: built files are meant to be served over an HTTP server.\n' +
+      '  Opening index.html over file:// won\'t work.\n'
+    ))
+  })
+})

build/check-versions.js

@@ -0,0 +1,45 @@
+var chalk = require('chalk')
+var semver = require('semver')
+var packageConfig = require('../package.json')
+
+function exec (cmd) {
+  return require('child_process').execSync(cmd).toString().trim()
+}
+
+var versionRequirements = [
+  {
+    name: 'node',
+    currentVersion: semver.clean(process.version),
+    versionRequirement: packageConfig.engines.node
+  },
+  {
+    name: 'npm',
+    currentVersion: exec('npm --version'),
+    versionRequirement: packageConfig.engines.npm
+  }
+]
+
+module.exports = function () {
+  var warnings = []
+  for (var i = 0; i < versionRequirements.length; i++) {
+    var mod = versionRequirements[i]
+    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
+      warnings.push(mod.name + ': ' +
+        chalk.red(mod.currentVersion) + ' should be ' +
+        chalk.green(mod.versionRequirement)
+      )
+    }
+  }
+
+  if (warnings.length) {
+    console.log('')
+    console.log(chalk.yellow('To use this template, you must update following to modules:'))
+    console.log()
+    for (var i = 0; i < warnings.length; i++) {
+      var warning = warnings[i]
+      console.log('  ' + warning)
+    }
+    console.log()
+    process.exit(1)
+  }
+}

build/dev-client.js

@@ -0,0 +1,9 @@
+/* eslint-disable */
+require('eventsource-polyfill')
+var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
+
+hotClient.subscribe(function (event) {
+  if (event.action === 'reload') {
+    window.location.reload()
+  }
+})

build/dev-server.js

@@ -0,0 +1,91 @@
+require('./check-versions')()
+
+var config = require('../config')
+if (!process.env.NODE_ENV) {
+  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
+}
+
+var opn = require('opn')
+var path = require('path')
+var express = require('express')
+var webpack = require('webpack')
+var proxyMiddleware = require('http-proxy-middleware')
+var webpackConfig = process.env.NODE_ENV === 'testing'
+  ? require('./webpack.prod.conf')
+  : require('./webpack.dev.conf')
+
+// default port where dev server listens for incoming traffic
+var port = process.env.PORT || config.dev.port
+// automatically open browser, if not set will be false
+var autoOpenBrowser = !!config.dev.autoOpenBrowser
+// Define HTTP proxies to your custom API backend
+// https://github.com/chimurai/http-proxy-middleware
+var proxyTable = config.dev.proxyTable
+
+var app = express()
+var compiler = webpack(webpackConfig)
+
+var devMiddleware = require('webpack-dev-middleware')(compiler, {
+  publicPath: webpackConfig.output.publicPath,
+  quiet: true
+})
+
+var hotMiddleware = require('webpack-hot-middleware')(compiler, {
+  log: () => {}
+})
+// force page reload when html-webpack-plugin template changes
+compiler.plugin('compilation', function (compilation) {
+  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
+    hotMiddleware.publish({ action: 'reload' })
+    cb()
+  })
+})
+
+// proxy api requests
+Object.keys(proxyTable).forEach(function (context) {
+  var options = proxyTable[context]
+  if (typeof options === 'string') {
+    options = { target: options }
+  }
+  app.use(proxyMiddleware(options.filter || context, options))
+})
+
+// handle fallback for HTML5 history API
+app.use(require('connect-history-api-fallback')())
+
+// serve webpack bundle output
+app.use(devMiddleware)
+
+// enable hot-reload and state-preserving
+// compilation error display
+app.use(hotMiddleware)
+
+// serve pure static assets
+var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
+app.use(staticPath, express.static('./static'))
+
+var uri = 'http://localhost:' + port
+
+var _resolve
+var readyPromise = new Promise(resolve => {
+  _resolve = resolve
+})
+
+console.log('> Starting dev server...')
+devMiddleware.waitUntilValid(() => {
+  console.log('> Listening at ' + uri + '\n')
+  // when env is testing, don't need open it
+  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
+    opn(uri)
+  }
+  _resolve()
+})
+
+var server = app.listen(port)
+
+module.exports = {
+  ready: readyPromise,
+  close: () => {
+    server.close()
+  }
+}

build/utils.js

@@ -0,0 +1,71 @@
+var path = require('path')
+var config = require('../config')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+
+exports.assetsPath = function (_path) {
+  var assetsSubDirectory = process.env.NODE_ENV === 'production'
+    ? config.build.assetsSubDirectory
+    : config.dev.assetsSubDirectory
+  return path.posix.join(assetsSubDirectory, _path)
+}
+
+exports.cssLoaders = function (options) {
+  options = options || {}
+
+  var cssLoader = {
+    loader: 'css-loader',
+    options: {
+      minimize: process.env.NODE_ENV === 'production',
+      sourceMap: options.sourceMap
+    }
+  }
+
+  // generate loader string to be used with extract text plugin
+  function generateLoaders (loader, loaderOptions) {
+    var loaders = [cssLoader]
+    if (loader) {
+      loaders.push({
+        loader: loader + '-loader',
+        options: Object.assign({}, loaderOptions, {
+          sourceMap: options.sourceMap
+        })
+      })
+    }
+
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
+    if (options.extract) {
+      return ExtractTextPlugin.extract({
+        use: loaders,
+        fallback: 'vue-style-loader'
+      })
+    } else {
+      return ['vue-style-loader'].concat(loaders)
+    }
+  }
+
+  // http://vuejs.github.io/vue-loader/en/configurations/extract-css.html
+  return {
+    css: generateLoaders(),
+    postcss: generateLoaders(),
+    less: generateLoaders('less'),
+    sass: generateLoaders('sass', { indentedSyntax: true }),
+    scss: generateLoaders('sass'),
+    stylus: generateLoaders('stylus'),
+    styl: generateLoaders('stylus')
+  }
+}
+
+// Generate loaders for standalone style files (outside of .vue)
+exports.styleLoaders = function (options) {
+  var output = []
+  var loaders = exports.cssLoaders(options)
+  for (var extension in loaders) {
+    var loader = loaders[extension]
+    output.push({
+      test: new RegExp('\\.' + extension + '$'),
+      use: loader
+    })
+  }
+  return output
+}

build/vue-loader.conf.js

@@ -0,0 +1,12 @@
+var utils = require('./utils')
+var config = require('../config')
+var isProduction = process.env.NODE_ENV === 'production'
+
+module.exports = {
+  loaders: utils.cssLoaders({
+    sourceMap: isProduction
+      ? config.build.productionSourceMap
+      : config.dev.cssSourceMap,
+    extract: isProduction
+  })
+}

build/webpack.base.conf.js

@@ -0,0 +1,68 @@
+var path = require('path')
+var utils = require('./utils')
+var config = require('../config')
+var vueLoaderConfig = require('./vue-loader.conf')
+
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+module.exports = {
+  entry: {
+    app: './src/main.js'
+  },
+  output: {
+    path: config.build.assetsRoot,
+    filename: '[name].js',
+    publicPath: process.env.NODE_ENV === 'production'
+      ? config.build.assetsPublicPath
+      : config.dev.assetsPublicPath
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js',
+      '@': resolve('src'),
+      'utils': resolve('src/utils')
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|vue)$/,
+        loader: 'eslint-loader',
+        enforce: "pre",
+        include: [resolve('src'), resolve('test')],
+        options: {
+          formatter: require('eslint-friendly-formatter')
+        }
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: vueLoaderConfig
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        include: [resolve('src'), resolve('test')]
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  }
+}

build/webpack.dev.conf.js

@@ -0,0 +1,37 @@
+var utils = require('./utils')
+var webpack = require('webpack')
+var config = require('../config')
+var merge = require('webpack-merge')
+var baseWebpackConfig = require('./webpack.base.conf')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+
+// add hot-reload related code to entry chunks
+Object.keys(baseWebpackConfig.entry).forEach(function (name) {
+  baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
+})
+
+module.exports = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
+  },
+  // cheap-module-eval-source-map is faster for development, but chrome doesn't stop at breakpoints
+  // devtool: '#cheap-module-eval-source-map',
+  devtool: '#source-map',
+
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': config.dev.env
+    }),
+    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoEmitOnErrorsPlugin(),
+    // https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'index.html',
+      inject: true
+    }),
+    new FriendlyErrorsPlugin()
+  ]
+})

build/webpack.prod.conf.js

@@ -0,0 +1,130 @@
+var path = require('path')
+var utils = require('./utils')
+var webpack = require('webpack')
+var config = require('../config')
+var merge = require('webpack-merge')
+var baseWebpackConfig = require('./webpack.base.conf')
+var CopyWebpackPlugin = require('copy-webpack-plugin')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+
+var env = process.env.NODE_ENV === 'testing'
+  ? require('../config/test.env')
+  : config.build.env
+
+var webpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({
+      sourceMap: config.build.productionSourceMap,
+      extract: true
+    })
+  },
+  devtool: config.build.productionSourceMap ? '#source-map' : false,
+  output: {
+    path: config.build.assetsRoot,
+    filename: utils.assetsPath('js/[name].[chunkhash].js'),
+    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+  },
+  plugins: [
+    // http://vuejs.github.io/vue-loader/en/workflow/production.html
+    new webpack.DefinePlugin({
+      'process.env': env
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      },
+      sourceMap: true
+    }),
+    // extract css into its own file
+    new ExtractTextPlugin({
+      filename: utils.assetsPath('css/[name].[contenthash].css')
+    }),
+    // Compress extracted CSS. We are using this plugin so that possible
+    // duplicated CSS from different components can be deduped.
+    new OptimizeCSSPlugin({
+      cssProcessorOptions: {
+        safe: true
+      }
+    }),
+    // generate dist index.html with correct asset hash for caching.
+    // you can customize output by editing /index.html
+    // see https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: process.env.NODE_ENV === 'testing'
+        ? 'index.html'
+        : config.build.index,
+      template: 'index.html',
+      inject: true,
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+        removeAttributeQuotes: true
+        // more options:
+        // https://github.com/kangax/html-minifier#options-quick-reference
+      },
+      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+      chunksSortMode: 'dependency'
+    }),
+    // split vendor js into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks: function (module, count) {
+        // any required modules inside node_modules are extracted to vendor
+        return (
+          module.resource &&
+          /\.js$/.test(module.resource) &&
+          module.resource.indexOf(
+            path.join(__dirname, '../node_modules')
+          ) === 0
+        )
+      }
+    }),
+    // extract webpack runtime and module manifest to its own file in order to
+    // prevent vendor hash from being updated whenever app bundle is updated
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'manifest',
+      chunks: ['vendor']
+    }),
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.build.assetsSubDirectory,
+        ignore: ['.*']
+      },
+      // Copy redirects file
+      {
+        from: path.resolve(__dirname, '../_redirects'),
+        to: config.build.assetsRoot,
+        ignore: ['.*']
+      }
+    ])
+  ]
+})
+
+if (config.build.productionGzip) {
+  var CompressionWebpackPlugin = require('compression-webpack-plugin')
+
+  webpackConfig.plugins.push(
+    new CompressionWebpackPlugin({
+      asset: '[path].gz[query]',
+      algorithm: 'gzip',
+      test: new RegExp(
+        '\\.(' +
+        config.build.productionGzipExtensions.join('|') +
+        ')$'
+      ),
+      threshold: 10240,
+      minRatio: 0.8
+    })
+  )
+}
+
+if (config.build.bundleAnalyzerReport) {
+  var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+}
+
+module.exports = webpackConfig

build/webpack.test.conf.js

@@ -0,0 +1,28 @@
+// This is the webpack config used for unit tests.
+
+var utils = require('./utils')
+var webpack = require('webpack')
+var merge = require('webpack-merge')
+var baseConfig = require('./webpack.base.conf')
+
+var webpackConfig = merge(baseConfig, {
+  // use inline sourcemap for karma-sourcemap-loader
+  module: {
+    rules: utils.styleLoaders()
+  },
+  devtool: '#inline-source-map',
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': require('../config/test.env')
+    }),
+    new webpack.ProvidePlugin({
+      $: 'jquery',
+      jQuery: 'jquery',
+    })
+  ]
+})
+
+// no need for app entry during tests
+delete webpackConfig.entry
+
+module.exports = webpackConfig

config/dev.env.js

@@ -0,0 +1,6 @@
+var merge = require('webpack-merge')
+var prodEnv = require('./prod.env')
+
+module.exports = merge(prodEnv, {
+  NODE_ENV: '"development"'
+})

config/index.js

@@ -0,0 +1,32 @@
+// see http://vuejs-templates.github.io/webpack for documentation.
+var path = require('path')
+
+module.exports = {
+  build: {
+    env: require('./prod.env'),
+    index: path.resolve(__dirname, '../dist/index.html'),
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    productionSourceMap: true,
+    // Gzip off by default as many popular static hosts such as
+    // Surge or Netlify already gzip all static assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css']
+  },
+  dev: {
+    env: require('./dev.env'),
+    port: 8080,
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {},
+    // CSS Sourcemaps off by default because relative paths are "buggy"
+    // with this option, according to the CSS-Loader README
+    // (https://github.com/webpack/css-loader#sourcemaps)
+    // In our experience, they generally work as expected,
+    // just be aware of this issue when enabling this option.
+    cssSourceMap: false
+  }
+}

config/prod.env.js

@@ -0,0 +1,3 @@
+module.exports = {
+  NODE_ENV: '"production"'
+}

config/test.env.js

@@ -0,0 +1,6 @@
+var merge = require('webpack-merge')
+var devEnv = require('./dev.env')
+
+module.exports = merge(devEnv, {
+  NODE_ENV: '"testing"'
+})

index.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>CryptoDashboard</title>
+    <link rel="shortcut icon" type="image/x-icon" href="static/img/favicon.ico"/>
+    <!-- css -->
+    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
+
+    <link rel="stylesheet" href="/static/css/AdminLTE.min.css">
+    <link rel="stylesheet" href="/static/css/skin-blue.min.css">
+    <link rel="stylesheet" href="/static/js/plugins/pace/pace.min.css">
+
+    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+    <!--[if lt IE 9]>
+    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
+    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+    <![endif]-->
+  </head>
+  <body class="hold-transition skin-blue sidebar-mini" style="overflow-y:scroll">
+    <div id="root"></div>
+
+    <!-- built files will be auto injected. Static files below -->
+    <script src="/static/js/plugins/jQuery/jQuery-2.2.0.min.js"></script>
+    <script src="/static/js/plugins/bootstrap/bootstrap.min.js"></script>
+    <script src="/static/js/plugins/AdminLTE/app.min.js"></script>
+    <script src="/static/js/plugins/pace/pace.min.js"></script>
+    <script src="//d2wy8f7a9ursnm.cloudfront.net/v4/bugsnag.min.js"></script>
+    <script src="//d2wy8f7a9ursnm.cloudfront.net/bugsnag-plugins/v1/bugsnag-vue.min.js"></script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+      // analytics section
+      ga('create', 'YOUR_SHIT_HERE', 'auto')
+      ga('send', 'pageview')
+    </script>
+  </body>
+</html>

package.json

@@ -0,0 +1,112 @@
+{
+  "name": "copilot",
+  "version": "0.5.0",
+  "description": "A fully responsive admin template based on AdminLTE with vue.js integration",
+  "author": "Gil Ferreira <gfgilly@gmail.com>",
+  "repository": "https://github.com/misterGF/CoPilot",
+  "license": "MIT",
+  "scripts": {
+    "dev": "node build/dev-server.js",
+    "build": "node build/build.js",
+    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
+    "e2e": "node test/e2e/runner.js",
+    "test": "npm run unit && npm run e2e",
+    "deploy": "netlify deploy dist",
+    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
+  },
+  "dependencies": {
+    "axios": "^0.15.3",
+    "babel-runtime": "^5.8.0",
+    "chart.js": "2.3.0",
+    "datatables.net": "^1.10.19",
+    "datatables.net-bs": "^1.10.19",
+    "faker": "^3.1.0",
+    "hideseek": "^0.7.0",
+    "http-server": "^0.9.0",
+    "jquery": "^2.2.2",
+    "moment": "^2.12.0",
+    "vue": "^2.2.2",
+    "vue-date-picker": "^1.0.2",
+    "vue-resource": "^1.0.3",
+    "vue-router": "^2.2.0",
+    "vuex": "^2.0.0",
+    "vuex-router-sync": "^4.1.2"
+  },
+  "devDependencies": {
+    "autoprefixer": "^6.7.2",
+    "babel-core": "^6.22.1",
+    "babel-eslint": "^7.1.1",
+    "babel-loader": "^6.2.10",
+    "babel-plugin-istanbul": "^3.1.2",
+    "babel-plugin-transform-runtime": "^6.22.0",
+    "babel-preset-env": "^1.2.1",
+    "babel-preset-stage-2": "^6.22.0",
+    "babel-register": "^6.22.0",
+    "chai": "^3.5.0",
+    "chalk": "^1.1.3",
+    "chromedriver": "^2.27.2",
+    "connect-history-api-fallback": "^1.3.0",
+    "copy-webpack-plugin": "^4.0.1",
+    "cross-env": "^3.1.4",
+    "cross-spawn": "^5.0.1",
+    "css-loader": "^0.26.1",
+    "es6-promise": "^4.1.0",
+    "eslint": "^3.14.1",
+    "eslint-config-standard": "^6.2.1",
+    "eslint-friendly-formatter": "^2.0.7",
+    "eslint-loader": "^1.6.1",
+    "eslint-plugin-html": "^2.0.0",
+    "eslint-plugin-promise": "^3.4.0",
+    "eslint-plugin-standard": "^2.0.1",
+    "eventsource-polyfill": "^0.9.6",
+    "express": "^4.14.1",
+    "extract-text-webpack-plugin": "^2.0.0",
+    "file-loader": "^0.10.0",
+    "friendly-errors-webpack-plugin": "^1.1.3",
+    "function-bind": "^1.1.0",
+    "geckodriver": "^1.8.0",
+    "html-webpack-plugin": "^2.28.0",
+    "http-proxy-middleware": "^0.17.3",
+    "inject-loader": "^2.0.1",
+    "json-loader": "^0.5.4",
+    "karma": "^1.4.1",
+    "karma-coverage": "^1.1.1",
+    "karma-mocha": "^1.3.0",
+    "karma-phantomjs-launcher": "^1.0.2",
+    "karma-sinon-chai": "1.2.4",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-spec-reporter": "0.0.26",
+    "karma-webpack": "^2.0.2",
+    "lolex": "^1.5.2",
+    "mocha": "^3.2.0",
+    "nightwatch": "^0.9.12",
+    "opn": "^4.0.2",
+    "optimize-css-assets-webpack-plugin": "^1.3.0",
+    "ora": "^1.1.0",
+    "phantomjs-prebuilt": "^2.1.14",
+    "rimraf": "^2.6.0",
+    "selenium-server": "^3.0.1",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.4",
+    "sinon": "^1.17.7",
+    "sinon-chai": "^2.8.0",
+    "url-loader": "^0.5.7",
+    "vue-loader": "^11.1.4",
+    "vue-style-loader": "^2.0.4",
+    "vue-template-compiler": "^2.2.4",
+    "webpack": "^2.2.1",
+    "webpack-bundle-analyzer": "^2.2.1",
+    "webpack-dev-middleware": "^1.10.0",
+    "webpack-hot-middleware": "^2.16.1",
+    "webpack-merge": "^2.6.1"
+  },
+  "engines": {
+    "node": ">= 4.0.0",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}

src/api/index.js

@@ -0,0 +1,19 @@
+import axios from 'axios'
+import config from '../config'
+
+export default {
+  request (method, uri, data = null) {
+    if (!method) {
+      console.error('API function call requires method argument')
+      return
+    }
+
+    if (!uri) {
+      console.error('API function call requires uri argument')
+      return
+    }
+
+    var url = config.serverURI + uri
+    return axios({ method, url, data })
+  }
+}

src/components/404.vue

@@ -0,0 +1,23 @@
+<template>
+  <div id="notFound">
+    <img src="/static/img/logo.png" class="center-block logo">
+
+    <div class="text-center col-sm-12">
+      <h1>You are lost.</h1>
+      <h4>This page doesn't exist.</h4>
+      <router-link to="/" class="vertical-5p lead">Take me home.</router-link>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'NotFound'
+}
+</script>
+
+<style>
+#notFound {
+  padding: 10em;
+  color: white;
+}
+</style>

src/components/App.vue

@@ -0,0 +1,29 @@
+<template>
+  <div id="app">
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'App',
+    data () {
+      return {
+        section: 'Head'
+      }
+    },
+    methods: {
+      logout () {
+        this.$store.commit('SET_USER', null)
+        this.$store.commit('SET_TOKEN', null)
+
+        if (window.localStorage) {
+          window.localStorage.setItem('user', null)
+          window.localStorage.setItem('token', null)
+        }
+
+        this.$router.push('/login')
+      }
+    }
+  }
+</script>

src/components/Dash.vue

@@ -0,0 +1,115 @@
+<template>
+  <div :class="['wrapper', classes]">
+
+    <!-- Horizontal bar at top. Contains messages, notifications, tasks and user menu -->
+    <dash-header :user="user"></dash-header>
+
+    <!-- Left side column. contains the logo and sidebar -->
+    <sidebar :user="user" />
+
+    <!-- Content Wrapper. Contains page content -->
+    <div class="content-wrapper">
+      <!-- Content Header (Page header) -->
+      <section class="content-header">
+        <h1>
+          {{$route.name.toUpperCase() }}
+          <small>{{ $route.meta.description }}</small>
+        </h1>
+        <ol class="breadcrumb">
+          <li>
+            <a href="javascript:;">
+              <i class="fa fa-home"></i>Home</a>
+          </li>
+          <li class="active">{{$route.name.toUpperCase()}}</li>
+        </ol>
+      </section>
+
+      <router-view></router-view>
+    </div>
+    <!-- /.content-wrapper -->
+
+    <!-- Horizontal bar at bottom. Contains copy right -->
+    <dash-footer></dash-footer>
+  </div>
+</template>
+
+<script>
+import faker from 'faker'
+import config from '../config'
+import DashFooter from './layout/DashFooter'
+import DashHeader from './layout/DashHeader'
+import Sidebar from './layout/Sidebar'
+import 'hideseek'
+
+export default {
+  name: 'Dash',
+  components: {
+    DashFooter,
+    DashHeader,
+    Sidebar
+  },
+  data: function () {
+    return {
+      // section: 'Dash',
+      classes: {
+        fixed_layout: config.fixedLayout,
+        hide_logo: config.hideLogoOnMobile
+      }
+    }
+  },
+  computed: {
+    user () {
+      return {
+        displayName: faker.name.findName(),
+        avatar: faker.image.avatar(),
+        roles: [faker.name.jobTitle(), faker.name.jobTitle()]
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.wrapper.fixed_layout .main-header {
+  position: fixed;
+  width: 100%;
+}
+.wrapper.fixed_layout .content-wrapper {
+  padding-top: 50px;
+}
+.wrapper.fixed_layout .main-sidebar {
+  position: fixed;
+  height: 100vh;
+}
+
+@media (max-width: 767px) {
+  .wrapper.hide_logo .main-header .logo {
+    display: none;
+  }
+}
+
+.logo-mini,
+.logo-lg {
+  text-align: left;
+}
+.logo-mini img,
+.logo-lg img {
+  padding: 0.4em !important;
+}
+
+.logo-lg img {
+  display: -webkit-inline-box;
+  width: 25%;
+}
+
+.user-panel {
+  height: 4em;
+}
+
+hr.visible-xs-block {
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.17);
+  height: 1px;
+  border-color: transparent;
+}
+</style>

src/components/Login.vue

@@ -0,0 +1,167 @@
+<template>
+  <div id="login">
+    <img src="/static/img/logo.png" class="center-block logo">
+
+    <div class="text-center col-sm-12">
+      <!-- login form -->
+      <form @submit.prevent="checkCreds">
+        <div class="input-group">
+          <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
+          <input class="form-control" name="username" placeholder="Username" type="text" v-model="username">
+        </div>
+
+        <div class="input-group">
+          <span class="input-group-addon"><i class="fa fa-lock"></i></span>
+          <input class="form-control" name="password" placeholder="Password" type="password" v-model="password">
+        </div>
+        <button type="submit" v-bind:class="'btn btn-primary btn-lg ' + loading">Submit</button>
+      </form>
+
+      <!-- errors -->
+      <div v-if=response class="text-red"><p class="vertical-5p lead">{{response}}</p></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import api from '../api'
+
+export default {
+  name: 'Login',
+  data(router) {
+    return {
+      section: 'Login',
+      loading: '',
+      username: '',
+      password: '',
+      response: ''
+    }
+  },
+  methods: {
+    checkCreds() {
+      const { username, password } = this
+
+      this.toggleLoading()
+      this.resetResponse()
+      this.$store.commit('TOGGLE_LOADING')
+
+      /* Making API call to authenticate a user */
+      api
+        .request('post', '/login', { username, password })
+        .then(response => {
+          this.toggleLoading()
+
+          var data = response.data
+          /* Checking if error object was returned from the server */
+          if (data.error) {
+            var errorName = data.error.name
+            if (errorName) {
+              this.response =
+                errorName === 'InvalidCredentialsError'
+                  ? 'Username/Password incorrect. Please try again.'
+                  : errorName
+            } else {
+              this.response = data.error
+            }
+
+            return
+          }
+
+          /* Setting user in the state and caching record to the localStorage */
+          if (data.user) {
+            var token = 'Bearer ' + data.token
+
+            this.$store.commit('SET_USER', data.user)
+            this.$store.commit('SET_TOKEN', token)
+
+            if (window.localStorage) {
+              window.localStorage.setItem('user', JSON.stringify(data.user))
+              window.localStorage.setItem('token', token)
+            }
+
+            this.$router.push(data.redirect ? data.redirect : '/')
+          }
+        })
+        .catch(error => {
+          this.$store.commit('TOGGLE_LOADING')
+          console.log(error)
+
+          this.response = 'Server appears to be offline'
+          this.toggleLoading()
+        })
+    },
+    toggleLoading() {
+      this.loading = this.loading === '' ? 'loading' : ''
+    },
+    resetResponse() {
+      this.response = ''
+    }
+  }
+}
+</script>
+
+<style>
+#login {
+  padding: 10em;
+}
+
+html,
+body,
+.container-table {
+  height: 100%;
+  background-color: #282b30 !important;
+}
+.container-table {
+  display: table;
+  color: white;
+}
+.vertical-center-row {
+  display: table-cell;
+  vertical-align: middle;
+}
+.vertical-20p {
+  padding-top: 20%;
+}
+.vertical-10p {
+  padding-top: 10%;
+}
+.vertical-5p {
+  padding-top: 5%;
+}
+.logo {
+  width: 15em;
+  padding: 3em;
+}
+
+.input-group {
+  padding-bottom: 2em;
+  height: 4em;
+  width: 100%;
+}
+
+.input-group span.input-group-addon {
+  width: 2em;
+  height: 4em;
+}
+
+@media (max-width: 1241px) {
+  .input-group input {
+    height: 4em;
+  }
+}
+@media (min-width: 1242px) {
+  form {
+    padding-left: 20em;
+    padding-right: 20em;
+  }
+
+  .input-group input {
+    height: 6em;
+  }
+}
+
+.input-group-addon i {
+  height: 15px;
+  width: 15px;
+}
+</style>

src/components/layout/DashFooter.vue

@@ -0,0 +1,17 @@
+<template>
+  <footer class="main-footer">
+    <strong>Copyright &copy; {{ year }}
+    <a href="https://discord.gg/Mh9mTEA">CPHA.pt</a>.</strong> All rights reserved.
+  </footer>
+</template>
+
+<script>
+export default {
+  name: 'DashFooter',
+  data: function () {
+    return {
+      year: new Date().getFullYear()
+    }
+  }
+}
+</script>

src/components/layout/DashHeader.vue

@@ -0,0 +1,38 @@
+<template>
+  <header class="main-header">
+    <span class="logo-mini">
+      <a href="/"><img src="/static/img/copilot-logo-white.svg" alt="Logo" class="img-responsive center-block logo"></a>
+    </span>
+    <!-- Header Navbar -->
+    <nav class="navbar navbar-static-top" role="navigation">
+      <!-- Sidebar toggle button-->
+      <a href="javascript:;" class="sidebar-toggle" data-toggle="offcanvas" role="button">
+        <span class="sr-only">Toggle navigation</span>
+      </a>
+    </nav>
+  </header>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import MessagesMenu from './MessagesMenu'
+import NotificationsMenu from './NotificationsMenu'
+import TasksMenu from './TasksMenu'
+import UserMenu from './UserMenu'
+
+export default {
+  name: 'DashHeader',
+  components: {
+    MessagesMenu,
+    NotificationsMenu,
+    TasksMenu,
+    UserMenu
+  },
+  props: ['user'],
+  computed: {
+    ...mapState([
+      'userInfo'
+    ])
+  }
+}
+</script>

src/components/layout/MessageItem.vue

@@ -0,0 +1,28 @@
+<template>
+  <li>
+    <a href="javascript:;">
+      <h4>
+        <span>{{message.title}}</span>
+        <small>
+          <i class="fa fa-clock-o"></i>
+          <span>{{message.createdAt}}</span>
+        </small>
+      </h4>
+      <p>{{message.body}}</p>
+    </a>
+  </li>
+</template>
+
+<script>
+export default {
+  name: 'MessageItem',
+  props: ['message']
+}
+</script>
+
+<style scoped>
+.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > h4,
+.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > p {
+  margin-left: 0;
+}
+</style>

src/components/layout/MessagesMenu.vue

@@ -0,0 +1,40 @@
+<template>
+  <li class="dropdown messages-menu">
+    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
+      <i class="fa fa-envelope-o"></i>
+      <span class="label label-success">{{ userInfo.messages | count }}</span>
+    </a>
+    <ul class="dropdown-menu">
+      <li class="header">You have {{ userInfo.messages | count }} message(s)</li>
+      <li v-if="userInfo.messages.length > 0">
+        <!-- inner menu: contains the messages -->
+        <ul class="menu">
+          <message-item v-for="message in userInfo.messages"
+              :key="message.id"
+              :message="message"></message-item>
+        </ul>
+        <!-- /.menu -->
+      </li>
+      <li class="footer" v-if="userInfo.messages.length > 0">
+        <a href="javascript:;">See All Messages</a>
+      </li>
+    </ul>
+  </li>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import MessageItem from './MessageItem'
+
+export default {
+  name: 'MessagesMenu',
+  components: {
+    MessageItem
+  },
+  computed: {
+    ...mapState([
+      'userInfo'
+    ])
+  }
+}
+</script>

src/components/layout/NotificationItem.vue

@@ -0,0 +1,48 @@
+<template>
+  <li class="notification-item">
+    <a href="javascript:;">
+      <h4>
+        <span>{{ notification.title }}</span>
+        <small class="time pull-right">
+          <i class="fa fa-clock-o"></i>
+          <span>{{ notification.createdAt }}</span>
+        </small>
+      </h4>
+      <p>{{ notification.body }}</p>
+    </a>
+  </li>
+</template>
+
+<script>
+export default {
+  props: {
+    notification: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu > li > ul.menu li > a > h4, .navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu > li > ul.menu li > a > p {
+  margin: 0;
+  white-space: normal;
+  word-break: break-word;
+}
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu > li > ul.menu li > a > h4 {
+  font-size: 15px;
+}
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu > li > ul.menu li > a > h4 small {
+  font-size: 10px;
+}
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu > li > ul.menu li > a > p {
+  font-size: 12px;
+}
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu > li > ul.menu li > a > h4 > span {
+  display: inline-block;
+}
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu > li > ul.menu li > a > h4 > small.time {
+  margin-top: 3px;
+}
+</style>

src/components/layout/NotificationsMenu.vue

@@ -0,0 +1,115 @@
+<template>
+  <li class="dropdown notifications-menu">
+    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
+      <i class="fa fa-bell-o"></i>
+      <span class="label label-warning">{{ newNotifications | count }}</span>
+    </a>
+    <ul class="dropdown-menu">
+      <li class="header">
+        <div class="row no-margin">
+          <span class="col-xs-12 col-md-6 tab-link" :class="{active: tab === 'new'}" @click="switchTab($event, 'new')">
+              <a href="javascript:;">New</a>
+            </span>
+          <span class="col-xs-12 col-md-6 tab-link" :class="{active: tab === 'old'}" @click="switchTab($event, 'old')">
+              <a href="javascript:;">Old</a>
+            </span>
+        </div>
+      </li>
+      <li>
+        <ul v-if="tab === 'new'" class="menu">
+          <notification-item v-for="notification in newNotifications" :key="notification.id" :notification="notification"></notification-item>
+          <li v-if="!newNotifications.length">
+            <span class="center-block text-center">There are no new notifications</span>
+          </li>
+        </ul>
+        <ul v-if="tab === 'old'" class="menu">
+          <notification-item v-for="notification in oldNotifications" :key="notification.id" :notification="notification"></notification-item>
+          <li v-if="!oldNotifications.length">
+            <span class="center-block text-center">There are no old notifications</span>
+          </li>
+        </ul>
+      </li>
+      <li v-if="newNotifications.length && tab === 'new'" class="footer">
+        <a href="javascript:;" @click="markAllAsRead">
+          <i class="fa fa-check"></i>
+          <span>Mark all as read</span>
+        </a>
+      </li>
+    </ul>
+  </li>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import NotificationItem from './NotificationItem'
+
+export default {
+  name: 'NotificationsMenu',
+  components: {
+    NotificationItem
+  },
+  data() {
+    return {
+      tab: 'new'
+    }
+  },
+  computed: {
+    ...mapState([
+      'userInfo'
+    ]),
+    newNotifications() {
+      return this.userInfo.notifications.filter(n => !n.readAt)
+    },
+    oldNotifications() {
+      return this.userInfo.notifications.filter(n => n.readAt)
+    }
+  },
+  methods: {
+    markAllAsRead() {
+      event.stopPropagation()
+
+      this.userInfo.notifications.filter(n => !n.readAt).forEach(function(notification) {
+        notification.readAt = new Date().toUTCString
+      })
+    },
+    switchTab(event, tab) {
+      event.stopPropagation()
+
+      this.tab = tab
+    }
+  }
+}
+</script>
+
+<style scoped>
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu {
+  width: 400px;
+}
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu li.header {
+  padding: 0;
+}
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu li.header span.tab-link {
+  padding: 4px;
+  text-align: center;
+  cursor: pointer;
+}
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu li.header span.tab-link a {
+  color: #444;
+}
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu li.header span.tab-link.active {
+  font-weight: bold;
+  border-bottom: 2px solid #3c8dbc;
+}
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu li.header span:hover.tab-link > a {
+  color: #3c8dbc !important;
+}
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu li > ul.menu {
+  max-height: 300px;
+}
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu li > ul.menu li > span {
+  padding: 10px;
+}
+.navbar-custom-menu > .navbar-nav > li.notifications-menu > .dropdown-menu li:hover.footer > a {
+  color: #3c8dbc !important;
+}
+</style>

src/components/layout/Sidebar.vue

@@ -0,0 +1,83 @@
+<template>
+  <aside class="main-sidebar">
+
+    <!-- sidebar: style can be found in sidebar.less -->
+    <section class="sidebar">
+
+      <!-- Sidebar user panel (optional) -->
+      <div class="user-panel">
+        <div class="pull-left image">
+          <img :src="user.avatar" />
+        </div>
+        <div class="pull-left info">
+          <div>
+            <p class="white">{{user.displayName}}</p>
+          </div>
+          <a href="javascript:;">
+            <i class="fa fa-circle text-success"></i> Online
+          </a>
+        </div>
+      </div>
+
+      <!-- search form (Optional) -->
+      <form v-on:submit.prevent class="sidebar-form" id="searchForm">
+        <div class="input-group" id="searchContainer">
+          <span class="input-group-btn">
+            <input type="text"
+            name="search"
+            id="search"
+            class="search form-control"
+            data-toggle="hideseek" p
+            laceholder="Search Menus"
+            data-list=".sidebar-menu">
+            <button type="submit" name="search" id="search-btn" class="btn btn-flat">
+              <i class="fa fa-search"></i>
+            </button>
+          </span>
+        </div>
+      </form>
+      <!-- /.search form -->
+
+      <!-- Sidebar Menu -->
+      <sidebar-menu />
+      <!-- /.sidebar-menu -->
+    </section>
+    <!-- /.sidebar -->
+  </aside>
+</template>
+<script>
+import SidebarMenu from './SidebarMenu'
+
+export default {
+  name: 'Sidebar',
+  props: ['user'],
+  components: { SidebarMenu },
+  mounted: function() {
+    window
+      .jQuery('[data-toggle="hideseek"]')
+      .off()
+      .hideseek()
+  }
+}
+</script>
+<style scope="local">
+.user-panel .image img {
+  border-radius: 50%;
+}
+#searchForm {
+  padding-left: 0em;
+  padding-right: 0em;
+}
+#searchContainer {
+  height: 100%;
+  padding-bottom: 0em;
+}
+#search {
+  width: 80%;
+  float: right;
+}
+
+#search-btn {
+  width: 20%;
+}
+</style>

src/components/layout/SidebarMenu.vue

@@ -0,0 +1,171 @@
+<template>
+  <ul class="sidebar-menu">
+    <li class="header">TOOLS</li>
+    <router-link tag="li" class="pageLink" to="/">
+      <a>
+        <i class="fa fa-desktop"></i>
+        <span class="page">Dashboard</span>
+      </a>
+    </router-link>
+    <router-link tag="li" class="pageLink" to="/tables">
+      <a>
+        <i class="fa fa-table"></i>
+        <span class="page">Tables</span>
+      </a>
+    </router-link>
+
+
+    <li class="header">CPHA</li>
+    <router-link tag="li" class="pageLink" to="/personalfinances">
+      <a>
+        <i class="fa fa-money"></i>
+        <span class="page">Finances</span>
+      </a>
+    </router-link>
+    <router-link tag="li" class="pageLink" to="/cryptos">
+      <a>
+        <i class="fa fa-btc"></i>
+        <span class="page">Cryptos</span>
+      </a>
+    </router-link>
+    <router-link tag="li" class="pageLink" to="/setting">
+      <a>
+        <i class="fa fa-cog"></i>
+        <span class="page">Settings</span>
+      </a>
+    </router-link>
+    <li class="treeview">
+      <a href="#">
+        <i class="fa fa-folder-o"></i>
+        <span class="treeview-title">Files</span>
+        <span class="pull-right-container pull-right">
+          <i class="fa fa-angle-left fa-fw"></i>
+        </span>
+      </a>
+      <ul class="treeview-menu">
+        <li>
+          <a href="#">
+            <i class="fa fa-file-word-o"></i> Item 1
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <i class="fa fa-file-picture-o"></i> Item 2
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <i class="fa fa-file-pdf-o"></i> Item 3
+          </a>
+        </li>
+      </ul>
+    </li>
+
+    <li class="header">ME</li>
+    <router-link tag="li" class="pageLink" to="/tasks">
+      <a>
+        <i class="fa fa-tasks"></i>
+        <span class="page">Tasks</span>
+      </a>
+    </router-link>
+    <router-link tag="li" class="pageLink" to="/setting">
+      <a>
+        <i class="fa fa-cog"></i>
+        <span class="page">Settings</span>
+      </a>
+    </router-link>
+    <li class="treeview">
+      <a href="#">
+        <i class="fa fa-folder-o"></i>
+        <span class="treeview-title">Files</span>
+        <span class="pull-right-container pull-right">
+          <i class="fa fa-angle-left fa-fw"></i>
+        </span>
+      </a>
+      <ul class="treeview-menu">
+        <li>
+          <a href="#">
+            <i class="fa fa-file-word-o"></i> Item 1
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <i class="fa fa-file-picture-o"></i> Item 2
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <i class="fa fa-file-pdf-o"></i> Item 3
+          </a>
+        </li>
+      </ul>
+    </li>
+
+    <li class="header">LOGS</li>
+    <router-link tag="li" class="pageLink" to="/access">
+      <a>
+        <i class="fa fa-book"></i>
+        <span class="page">Access</span>
+      </a>
+    </router-link>
+    <router-link tag="li" class="pageLink" to="/server">
+      <a>
+        <i class="fa fa-hdd-o"></i>
+        <span class="page">Server</span>
+      </a>
+    </router-link>
+    <!-- <router-link tag="li" class="pageLink" to="/repos">
+      <a>
+        <i class="fa fa-heart"></i>
+        <span class="page">Repos</span>
+        <small class="label pull-right bg-green">AJAX</small>
+      </a>
+    </router-link> -->
+
+    <li class="header">PAGES</li>
+    <router-link tag="li" class="pageLink" to="/login">
+      <a>
+        <i class="fa fa-circle-o text-yellow"></i>
+        <span class="page"> Login</span>
+      </a>
+    </router-link>
+    <router-link tag="li" class="pageLink" to="/404">
+      <a>
+        <i class="fa fa-circle-o text-red"></i>
+        <span class="page"> 404</span>
+      </a>
+    </router-link>
+  </ul>
+</template>
+<script>
+export default {
+  name: 'SidebarMenu'
+}
+</script>
+<style>
+/* override default */
+.sidebar-menu > li > a {
+  padding: 12px 15px 12px 15px;
+}
+
+.sidebar-menu li.active > a > .fa-angle-left,
+.sidebar-menu li.active > a > .pull-right-container > .fa-angle-left {
+  animation-name: rotate;
+  animation-duration: 0.2s;
+  animation-fill-mode: forwards;
+}
+
+.treeview-title {
+  z-index: 1;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(-90deg);
+  }
+}
+</style>

src/components/layout/TasksMenu.vue

@@ -0,0 +1,50 @@
+<template>
+  <li class="dropdown tasks-menu">
+    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
+      <i class="fa fa-flag-o"></i>
+      <span class="label label-danger">{{ userInfo.tasks | count }} </span>
+    </a>
+    <ul class="dropdown-menu">
+      <li class="header">You have {{ userInfo.tasks | count }} task(s)</li>
+      <li v-if="userInfo.tasks.length > 0">
+        <!-- Inner menu: contains the tasks -->
+        <ul class="menu">
+          <li>
+            <!-- Task item -->
+            <a href="javascript:;">
+              <!-- Task title and progress text -->
+              <h3>
+                Design some buttons
+                <small class="pull-right">20%</small>
+              </h3>
+              <!-- The progress bar -->
+              <div class="progress xs">
+                <!-- Change the css width attribute to simulate progress -->
+                <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
+                  <span class="sr-only">20% Complete</span>
+                </div>
+              </div>
+            </a>
+          </li>
+          <!-- end task item -->
+        </ul>
+      </li>
+      <li class="footer" v-if="userInfo.tasks.length > 0">
+        <a href="javascript:;">View all tasks</a>
+      </li>
+    </ul>
+  </li>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'TasksMenu',
+  computed: {
+    ...mapState([
+      'userInfo'
+    ])
+  }
+}
+</script>

src/components/layout/UserMenu.vue

@@ -0,0 +1,32 @@
+<template>
+  <li class="dropdown user user-menu">
+    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
+      <!-- The user image in the navbar-->
+      <img :src="user.avatar" class="user-image" alt="User Image">
+      <!-- hidden-xs hides the username on small devices so only the image appears. -->
+      <span class="hidden-xs">{{user.displayName}}</span>
+    </a>
+    <!-- Account Info and Menu -->
+    <ul class="dropdown-menu">
+      <li class="user-header" style="height:auto;min-height:85px;padding-bottom:15px;">
+        <p>
+          <span>{{user.displayName}}</span>
+          <small v-for="role in user.roles" :key="role">{{role}}</small>
+        </p>
+      </li>
+      <li class="user-footer">
+        <a href="javascript:;" class="btn btn-default btn-flat btn-block">
+          <i class="fa fa-sign-out"></i>
+          <span>Logout</span>
+        </a>
+      </li>
+    </ul>
+  </li>
+</template>
+
+<script>
+export default {
+  name: 'UserMenu',
+  props: ['user']
+}
+</script>

src/components/views/Access.vue

@@ -0,0 +1,93 @@
+<template>
+  <section class="content">
+    <h1 class="text-center">Access</h1>
+    <h4 class="text-center">Where our users are coming from.</h4>
+
+    <div class="row">
+      <div class="col-md-12">
+        <!-- MAP & BOX PANE -->
+        <div class="box box-success">
+          <div class="box-header with-border">
+            <h3 class="box-title">Visitors Report</h3>
+
+            <div class="box-tools pull-right">
+              <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
+              </button>
+              <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+            </div>
+          </div>
+          <!-- /.box-header -->
+          <div class="box-body no-padding">
+            <div class="row no-gutters">
+              <div class="col-md-8">
+                  <!-- Map will be created here -->
+                  <div id="world-map-markers"></div>
+              </div>
+              <!-- /.col -->
+              <div class="col-md-4">
+                <div class="pad box-pane-right bg-green" style="min-height: 400px">
+                  <div v-for="stat in stats" class="description-block margin-bottom">
+                    <div class="row" data-color="#fff"><i class="fa fa-bar-chart-o fa-3x"></i></div>
+                    <h5 class="description-header">{{stat.header}}</h5>
+                    <span class="description-text">{{stat.text}}</span>
+                  </div>
+                </div>
+              </div>
+              <!-- /.col -->
+            </div>
+            <!-- /.row -->
+          </div>
+          <!-- /.box-body -->
+        </div>
+        <link rel="stylesheet" href="/static/js/plugins/jvectormap/jquery-jvectormap-2.0.3.css" >
+      </div>
+    </div>
+  </section>
+</template>
+<script>
+import {stats} from '../../demo'
+
+const pluginURL = '/static/js/plugins/jvectormap/jquery-jvectormap-2.0.3.min.js'
+const mapURL = '/static/js/plugins/jvectormap/jquery-jvectormap-world-mill.js'
+
+export default {
+  name: 'Access',
+  data () {
+    return {
+      stats
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      window.jQuery.getScript(pluginURL, () => {
+        window.jQuery.getScript(mapURL, () => {
+          window.jQuery('#world-map-markers').vectorMap({
+            map: 'world_mill'
+          })
+        })
+      })
+    })
+  }
+}
+</script>
+
+<style>
+.fake {
+  color: 'red';
+}
+
+#world-map-markers svg {
+  height: 355px;
+}
+
+.row.no-gutters {
+  margin-right: 0;
+  margin-left: 0;
+}
+
+.row.no-gutters > [class^="col-"],
+.row.no-gutters > [class*=" col-"] {
+  padding-right: 0;
+  padding-left: 0;
+}
+</style>

src/components/views/Cryptos.vue

@@ -0,0 +1,362 @@
+<template>
+  <section class="content">
+
+<!-- CHPA Crypto Charts START -->
+    <div class="col-xs-12">
+      <div class="box">
+        <div class="box-header with-border">
+          <h3 class="box-title"></h3>
+          <div class="box-body">
+            <div class="col-sm-6 col-xs-12">
+              <p class="text-center">
+                <strong>Web Traffic Overview</strong>
+              </p>
+              <canvas id="trafficBar" ></canvas>
+            </div>
+            <hr class="visible-xs-block">
+            <div class="col-sm-6 col-xs-12">
+              <p class="text-center">
+                <strong>Wallet Pie</strong>
+              </p>
+              <canvas id="cryptowalletPie"></canvas>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+<!-- CHPA Crypto Charts END -->
+
+    <div class="row center-block">
+      <h2>Wallet</h2>
+      <div class="col-md-12">
+          <div class="box-body no-padding table-responsive">
+            <table class="table table-striped">
+              <tbody>
+                <tr>
+                  <th style="width: 10px">#</th>
+                  <th>Crypto</th>
+                  <th>Amount</th>
+                  <th>Spend</th>
+                  <th>Average</th>
+                  <th>Price</th>
+                  <th>PnL %</th>
+                  <th>PnL €</th>
+                  <th style="width: 40px">Pie</th>
+                </tr>
+                <!-- Google Sheets Gsheets Data -->
+                <tr>
+                  <!-- # -->
+                  <td>1.</td>
+                  <!-- Crypto -->
+                  <td>Update software</td>
+                  <!-- Amount -->
+                  <td><div class="progress progress-xs"><div class="progress-bar progress-bar-danger" style="width: 55%"></div></div></td>
+                  <!-- Spend -->
+                  <td></td>
+                  <!-- Average -->
+                  <td></td>
+                  <!-- Price -->
+                  <td></td>
+                  <!-- PnL % -->
+                  <td></td>
+                  <!-- PnL € -->
+                  <td></td>
+                  <!-- Pie -->
+                  <td><span class="badge bg-red">55%</span></td>
+                </tr>
+                <tr>
+                  <td>2.</td>
+                  <td>Clean database</td>
+                  <td>
+                    <div class="progress progress-xs">
+                      <div class="progress-bar progress-bar-yellow" style="width: 70%"></div>
+                    </div>
+                  </td>
+                  <td><span class="badge bg-yellow">70%</span></td>
+                </tr>
+                <tr>
+                  <td>3.</td>
+                  <td>Cron job running</td>
+                  <td>
+                    <div class="progress progress-xs progress-striped active">
+                      <div class="progress-bar progress-bar-primary" style="width: 30%"></div>
+                    </div>
+                  </td>
+                  <td><span class="badge bg-light-blue">30%</span></td>
+                </tr>
+                <tr>
+                  <td>4.</td>
+                  <td>Fix and squish bugs</td>
+                  <td>
+                    <div class="progress progress-xs progress-striped active">
+                      <div class="progress-bar progress-bar-success" style="width: 90%"></div>
+                    </div>
+                  </td>
+                  <td><span class="badge bg-green">90%</span></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <!-- /.box-body -->
+        </div>
+      </div>
+
+
+  <div class="row center-block">
+      <h2>Crypto Trades</h2>
+      <div class="col-md-12">
+        <div class="box">
+          <div class="box-header">
+            <h3 class="box-title">Last crypto trades</h3>
+          </div>
+          <!-- /.box-header -->
+          <div class="box-body">
+            <div class="dataTables_wrapper form-inline dt-bootstrap" id="example1_wrapper">
+              <div class="row">
+                <div class="col-sm-6">
+                  <div id="example1_length" class="dataTables_length">
+
+                  </div>
+                </div>
+              </div>
+
+              <div class="row">
+                <div class="col-sm-12 table-responsive">
+                  <table aria-describedby="example1_info" role="grid" id="example1" class="table table-bordered table-striped dataTable">
+                    <thead>
+                      <tr role="row">
+                        <th aria-label="Rendering engine: activate to sort column descending" aria-sort="ascending" style="width: 167px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting_asc">Rendering engine</th>
+                        <th aria-label="Browser: activate to sort column ascending" style="width: 207px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">Browser</th>
+                        <th aria-label="Platform(s): activate to sort column ascending" style="width: 182px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">Platform(s)</th>
+                        <th aria-label="Engine version: activate to sort column ascending" style="width: 142px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">Engine version</th>
+                        <th aria-label="CSS grade: activate to sort column ascending" style="width: 101px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">CSS grade</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr class="even" role="row">
+                        <td class="sorting_1">Blink</td>
+                        <td>Iridium  54.0</td>
+                        <td>GNU/Linux</td>
+                        <td>54</td>
+                        <td>A</td>
+                      </tr>
+                      <tr class="odd" role="row">
+                        <td class="sorting_1">Gecko</td>
+                        <td>Firefox 1.0</td>
+                        <td>Win 98+ / OSX.2+</td>
+                        <td>1.7</td>
+                        <td>A</td>
+                      </tr>
+                      <tr class="even" role="row">
+                        <td class="sorting_1">Gecko</td>
+                        <td>Firefox 1.5</td>
+                        <td>Win 98+ / OSX.2+</td>
+                        <td>1.8</td>
+                        <td>A</td>
+                      </tr>
+                      <tr class="odd" role="row">
+                        <td class="sorting_1">Gecko</td>
+                        <td>Firefox 2.0</td>
+                        <td>Win 98+ / OSX.2+</td>
+                        <td>1.8</td>
+                        <td>A</td>
+                      </tr>
+                      <tr class="even" role="row">
+                        <td class="sorting_1">Gecko</td>
+                        <td>Firefox 3.0</td>
+                        <td>Win 2k+ / OSX.3+</td>
+                        <td>1.9</td>
+                        <td>A</td>
+                      </tr>
+                      <tr class="odd" role="row">
+                        <td class="sorting_1">Gecko</td>
+                        <td>Camino 1.0</td>
+                        <td>OSX.2+</td>
+                        <td>1.8</td>
+                        <td>A</td>
+                      </tr>
+                      <tr class="even" role="row">
+                        <td class="sorting_1">Gecko</td>
+                        <td>Camino 1.5</td>
+                        <td>OSX.3+</td>
+                        <td>1.8</td>
+                        <td>A</td>
+                      </tr>
+                      <tr class="odd" role="row">
+                        <td class="sorting_1">Gecko</td>
+                        <td>Netscape 7.2</td>
+                        <td>Win 95+ / Mac OS 8.6-9.2</td>
+                        <td>1.7</td>
+                        <td>A</td>
+                      </tr>
+                      <tr class="even" role="row">
+                        <td class="sorting_1">Gecko</td>
+                        <td>Netscape Browser 8</td>
+                        <td>Win 98SE+</td>
+                        <td>1.7</td>
+                        <td>A</td>
+                      </tr>
+                      <tr class="odd" role="row">
+                        <td class="sorting_1">Gecko</td>
+                        <td>Netscape Navigator 9</td>
+                        <td>Win 98+ / OSX.2+</td>
+                        <td>1.8</td>
+                        <td>A</td>
+                      </tr>
+                      <tr class="even" role="row">
+                        <td class="sorting_1">Gecko</td>
+                        <td>Mozilla 1.0</td>
+                        <td>Win 95+ / OSX.1+</td>
+                        <td>1</td>
+                        <td>A</td>
+                      </tr>
+                    </tbody>
+                    <tfoot>
+                      <tr>
+                        <th colspan="1" rowspan="1">Rendering engine</th>
+                        <th colspan="1" rowspan="1">Browser</th>
+                        <th colspan="1" rowspan="1">Platform(s)</th>
+                        <th colspan="1" rowspan="1">Engine version</th>
+                        <th colspan="1" rowspan="1">CSS grade</th>
+                      </tr>
+                    </tfoot>
+                  </table>
+                </div>
+              </div>
+            </div>
+            <!-- /.box-body -->
+          </div>
+        </div>
+      </div>
+    </div>
+
+
+    </div>
+  </section>
+</template>
+
+<script>
+import Chart from 'chart.js'
+import $ from 'jquery'
+// Require needed datatables modules
+require('datatables.net')
+require('datatables.net-bs')
+
+export default {
+  name: 'Tables',
+  data () {
+    return {
+      generateRandomNumbers (numbers, max, min) {
+        var a = []
+        for (var i = 0; i < numbers; i++) {
+          a.push(Math.floor(Math.random() * (max - min + 1)) + max)
+        }
+        return a
+      }
+    }
+  },
+  computed: {
+    coPilotNumbers () {
+      return this.generateRandomNumbers(12, 1000000, 10000)
+    },
+    personalNumbers () {
+      return this.generateRandomNumbers(12, 1000000, 10000)
+    },
+    isMobile () {
+      return (window.innerWidth <= 800 && window.innerHeight <= 600)
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      $('#example1').DataTable()
+    })
+    this.$nextTick(() => {
+      var ctx = document.getElementById('trafficBar').getContext('2d')
+      var config = {
+        type: 'line',
+        data: {
+          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+          datasets: [{
+            label: 'Investment',
+            fill: false,
+            borderColor: '#284184',
+            pointBackgroundColor: '#284184',
+            backgroundColor: '#284184',
+            data: this.coPilotNumbers
+          }, {
+            label: 'If sell Now',
+            fill: false,
+            borderColor: '#4BC0C0',
+            pointBackgroundColor: '#4BC0C0',
+            backgroundColor: '#4BC0C0',
+            data: this.personalNumbers
+          }]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: !this.isMobile,
+          legend: {
+            position: 'bottom',
+            display: true
+          },
+          tooltips: {
+            mode: 'label',
+            xPadding: 10,
+            yPadding: 10,
+            bodySpacing: 10
+          }
+        }
+      }
+
+      new Chart(ctx, config) // eslint-disable-line no-new
+
+      var pieChartCanvas = document.getElementById('cryptowalletPie').getContext('2d')
+      var pieConfig = {
+        type: 'pie',
+        data: {
+          labels: ['BTC', 'ETH', 'LUNA', 'XRP'],
+          datasets: [{
+            data: [56.6, 37.7, 4.1, 51],
+            backgroundColor: ['#00a65a', '#f39c12', '#00c0ef', '#ff6fff'],
+            hoverBackgroundColor: ['#00a65a', '#f39c12', '#00c0ef', '#ff6fff']
+          }]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: !this.isMobile,
+          legend: {
+            position: 'bottom',
+            display: true
+          }
+        }
+      }
+
+      new Chart(pieChartCanvas, pieConfig) // eslint-disable-line no-new
+    })
+  }
+}
+
+</script>
+
+<style>
+@import url('/static/js/plugins/datatables/dataTables.bootstrap.css');
+
+table.dataTable thead .sorting:after,
+table.dataTable thead .sorting_asc:after,
+table.dataTable thead .sorting_desc:after {
+  font-family: 'FontAwesome';
+}
+
+table.dataTable thead .sorting:after {
+  content: '\f0dc';
+}
+
+table.dataTable thead .sorting_asc:after {
+  content: '\f0dd';
+}
+
+table.dataTable thead .sorting_desc:after {
+  content: '\f0de';
+}
+
+</style>

src/components/views/Dashboard.vue

@@ -0,0 +1,354 @@
+<template>
+  <!-- Main content -->
+  <section class="content">
+
+      <!-- Info boxes -->
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <info-box color-class="bg-aqua"
+                  :icon-classes="['ion', 'ion-ios-gear-outline']"
+                  text="CPU Traffic"
+                  number="90%"></info-box>
+      </div>
+      <!-- /.col -->
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <info-box color-class="bg-red"
+                  :icon-classes="['fa', 'fa-google-plus']"
+                  text="Likes"
+                  number="41,410"></info-box>
+      </div>
+      <!-- /.col -->
+
+      <!-- fix for small devices only -->
+      <div class="clearfix visible-sm-block"></div>
+
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <info-box color-class="bg-green"
+                  :icon-classes="['ion', 'ion-ios-cart-outline']"
+                  text="Sales"
+                  number="760"></info-box>
+      </div>
+      <!-- /.col -->
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <info-box color-class="bg-yellow"
+                  :icon-classes="['ion', 'ion-ios-people-outline']"
+                  text="New Members"
+                  number="2,000"></info-box>
+      </div>
+      <!-- /.col -->
+  <div class="row center-block">
+      <h2>Data tables</h2>
+      <div class="col-md-12">
+        <div class="box">
+          <div class="box-header">
+            <h3 class="box-title">Data Table With Full Features</h3>
+          </div>
+          <!-- /.box-header -->
+          <div class="box-body">
+            <div class="dataTables_wrapper form-inline dt-bootstrap" id="example1_wrapper">
+              <div class="row">
+                <div class="col-sm-6">
+                  <div id="example1_length" class="dataTables_length">
+
+                  </div>
+                </div>
+              </div>
+
+              <div class="row">
+                <div class="col-sm-12 table-responsive">
+                  <table aria-describedby="example1_info" role="grid" id="example1" class="table table-bordered table-striped dataTable">
+                    <thead>
+                      <tr role="row">
+                        <th aria-label="Rendering engine: activate to sort column descending" aria-sort="ascending" style="width: 167px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting_asc">Rendering engine</th>
+                        <th aria-label="Browser: activate to sort column ascending" style="width: 207px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">Browser</th>
+                        <th aria-label="Platform(s): activate to sort column ascending" style="width: 182px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">Platform(s)</th>
+                        <th aria-label="Engine version: activate to sort column ascending" style="width: 142px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">Engine version</th>
+                        <th aria-label="CSS grade: activate to sort column ascending" style="width: 101px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">CSS grade</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr class="even" role="row">
+                        <td class="sorting_1">Blink</td>
+                        <td>Iridium  54.0</td>
+                        <td>GNU/Linux</td>
+                        <td>54</td>
+                        <td>A</td>
+                      </tr>
+                      <tr class="odd" role="row">
+                        <td class="sorting_1">Gecko</td>
+                        <td>Firefox 1.0</td>
+                        <td>Win 98+ / OSX.2+</td>
+                        <td>1.7</td>
+                        <td>A</td>
+                      </tr>
+                      <tr class="even" role="row">
+                        <td class="sorting_1">Gecko</td>
+                        <td>Firefox 1.5</td>
+                        <td>Win 98+ / OSX.2+</td>
+                        <td>1.8</td>
+                        <td>A</td>
+                      </tr>
+                      <tr class="odd" role="row">
+                        <td class="sorting_1">Gecko</td>
+                        <td>Firefox 2.0</td>
+                        <td>Win 98+ / OSX.2+</td>
+                        <td>1.8</td>
+                        <td>A</td>
+                      </tr>
+                      <tr class="even" role="row">
+                        <td class="sorting_1">Gecko</td>
+                        <td>Firefox 3.0</td>
+                        <td>Win 2k+ / OSX.3+</td>
+                        <td>1.9</td>
+                        <td>A</td>
+                      </tr>
+                      <tr class="odd" role="row">
+                        <td class="sorting_1">Gecko</td>
+                        <td>Camino 1.0</td>
+                        <td>OSX.2+</td>
+                        <td>1.8</td>
+                        <td>A</td>
+                      </tr>
+                      <tr class="even" role="row">
+                        <td class="sorting_1">Gecko</td>
+                        <td>Camino 1.5</td>
+                        <td>OSX.3+</td>
+                        <td>1.8</td>
+                        <td>A</td>
+                      </tr>
+                      <tr class="odd" role="row">
+                        <td class="sorting_1">Gecko</td>
+                        <td>Netscape 7.2</td>
+                        <td>Win 95+ / Mac OS 8.6-9.2</td>
+                        <td>1.7</td>
+                        <td>A</td>
+                      </tr>
+                      <tr class="even" role="row">
+                        <td class="sorting_1">Gecko</td>
+                        <td>Netscape Browser 8</td>
+                        <td>Win 98SE+</td>
+                        <td>1.7</td>
+                        <td>A</td>
+                      </tr>
+                      <tr class="odd" role="row">
+                        <td class="sorting_1">Gecko</td>
+                        <td>Netscape Navigator 9</td>
+                        <td>Win 98+ / OSX.2+</td>
+                        <td>1.8</td>
+                        <td>A</td>
+                      </tr>
+                      <tr class="even" role="row">
+                        <td class="sorting_1">Gecko</td>
+                        <td>Mozilla 1.0</td>
+                        <td>Win 95+ / OSX.1+</td>
+                        <td>1</td>
+                        <td>A</td>
+                      </tr>
+                    </tbody>
+                    <tfoot>
+                      <tr>
+                        <th colspan="1" rowspan="1">Rendering engine</th>
+                        <th colspan="1" rowspan="1">Browser</th>
+                        <th colspan="1" rowspan="1">Platform(s)</th>
+                        <th colspan="1" rowspan="1">Engine version</th>
+                        <th colspan="1" rowspan="1">CSS grade</th>
+                      </tr>
+                    </tfoot>
+                  </table>
+                </div>
+              </div>
+            </div>
+            <!-- /.box-body -->
+          </div>
+        </div>
+      </div>
+    </div>
+
+
+    </div>
+    <!-- /.row -->
+
+    <div class="col-xs-12">
+      <div class="box">
+        <div class="box-header with-border">
+          <h3 class="box-title"></h3>
+          <div class="box-body">
+            <div class="col-sm-6 col-xs-12">
+              <p class="text-center">
+                <strong>Web Traffic Overview</strong>
+              </p>
+              <canvas id="trafficBar" ></canvas>
+            </div>
+            <hr class="visible-xs-block">
+            <div class="col-sm-6 col-xs-12">
+              <p class="text-center">
+                <strong>Language Overview</strong>
+              </p>
+              <canvas id="languagePie"></canvas>
+            </div>
+          </div>
+        </div>
+        <!-- <div class="text-center">
+          <small><b>Pro Tip</b> Don't forget to star us on github!</small>
+        </div> -->
+      </div>
+    </div>
+    <!-- /.row -->
+
+    <!-- Main row -->
+    <div class="row">
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <process-info-box color-class="bg-yellow"
+                          :icon-classes="['ion', 'ion-ios-pricetag-outline']"
+                          text="Inventory"
+                          number="5,200"
+                          :progress="50"
+                          description="50% increase since May"></process-info-box>
+      </div>
+      <!-- /.col -->
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <process-info-box color-class="bg-green"
+                          :icon-classes="['ion', 'ion-ios-heart-outline']"
+                          text="Mentions"
+                          number="92,050"
+                          :progress="20"
+                          description="20% increase in 30 days"></process-info-box>
+      </div>
+      <!-- /.col -->
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <process-info-box color-class="bg-red"
+                          :icon-classes="['ion', 'ion-ios-cloud-download-outline']"
+                          text="Downloads"
+                          number="114,381"
+                          :progress="70"
+                          description="70% increase since yesterday"></process-info-box>
+      </div>
+      <!-- /.col -->
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <process-info-box color-class="bg-aqua"
+                          :icon-classes="['ion', 'ion-ios-chatbubble-outline']"
+                          text="Direct Messages"
+                          number="163,921"
+                          :progress="40"
+                          description="40% increase compared to last year"></process-info-box>
+      </div>
+      <!-- /.col -->
+    </div>
+    <!-- /.row -->
+  </section>
+  <!-- /.content -->
+</template>
+
+<script>
+import Chart from 'chart.js'
+import Alert from '../widgets/Alert'
+import InfoBox from '../widgets/InfoBox'
+import ProcessInfoBox from '../widgets/ProcessInfoBox'
+
+export default {
+  name: 'Dashboard',
+  components: {
+    Alert,
+    InfoBox,
+    ProcessInfoBox
+  },
+  data () {
+    return {
+      generateRandomNumbers (numbers, max, min) {
+        var a = []
+        for (var i = 0; i < numbers; i++) {
+          a.push(Math.floor(Math.random() * (max - min + 1)) + max)
+        }
+        return a
+      }
+    }
+  },
+  computed: {
+    coPilotNumbers () {
+      return this.generateRandomNumbers(12, 1000000, 10000)
+    },
+    personalNumbers () {
+      return this.generateRandomNumbers(12, 1000000, 10000)
+    },
+    isMobile () {
+      return (window.innerWidth <= 800 && window.innerHeight <= 600)
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      var ctx = document.getElementById('trafficBar').getContext('2d')
+      var config = {
+        type: 'line',
+        data: {
+          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+          datasets: [{
+            label: 'CoPilot',
+            fill: false,
+            borderColor: '#284184',
+            pointBackgroundColor: '#284184',
+            backgroundColor: 'rgba(0, 0, 0, 0)',
+            data: this.coPilotNumbers
+          }, {
+            label: 'Personal Site',
+            borderColor: '#4BC0C0',
+            pointBackgroundColor: '#4BC0C0',
+            backgroundColor: 'rgba(0, 0, 0, 0)',
+            data: this.personalNumbers
+          }]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: !this.isMobile,
+          legend: {
+            position: 'bottom',
+            display: true
+          },
+          tooltips: {
+            mode: 'label',
+            xPadding: 10,
+            yPadding: 10,
+            bodySpacing: 10
+          }
+        }
+      }
+
+      new Chart(ctx, config) // eslint-disable-line no-new
+
+      var pieChartCanvas = document.getElementById('languagePie').getContext('2d')
+      var pieConfig = {
+        type: 'pie',
+        data: {
+          labels: ['HTML', 'JavaScript', 'CSS'],
+          datasets: [{
+            data: [56.6, 37.7, 4.1],
+            backgroundColor: ['#00a65a', '#f39c12', '#00c0ef'],
+            hoverBackgroundColor: ['#00a65a', '#f39c12', '#00c0ef']
+          }]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: !this.isMobile,
+          legend: {
+            position: 'bottom',
+            display: true
+          }
+        }
+      }
+
+      new Chart(pieChartCanvas, pieConfig) // eslint-disable-line no-new
+    })
+  }
+}
+</script>
+<style>
+.info-box {
+  cursor: pointer;
+}
+.info-box-content {
+  text-align: center;
+  vertical-align: middle;
+  display: inherit;
+}
+.fullCanvas {
+  width: 100%;
+}
+</style>

src/components/views/PersonalFinances.vue

@@ -0,0 +1,227 @@
+<template>
+  <!-- Main content -->
+  <section class="content">
+
+      <!-- Info boxes -->
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <info-box color-class="bg-aqua"
+                  :icon-classes="['ion', 'ion-ios-gear-outline']"
+                  text="CPU Traffic"
+                  number="90%"></info-box>
+      </div>
+      <!-- /.col -->
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <info-box color-class="bg-red"
+                  :icon-classes="['fa', 'fa-google-plus']"
+                  text="Likes"
+                  number="41,410"></info-box>
+      </div>
+      <!-- /.col -->
+
+      <!-- fix for small devices only -->
+      <div class="clearfix visible-sm-block"></div>
+
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <info-box color-class="bg-green"
+                  :icon-classes="['ion', 'ion-ios-cart-outline']"
+                  text="Sales"
+                  number="760"></info-box>
+      </div>
+      <!-- /.col -->
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <info-box color-class="bg-yellow"
+                  :icon-classes="['ion', 'ion-ios-people-outline']"
+                  text="New Members"
+                  number="2,000"></info-box>
+      </div>
+      <!-- /.col -->
+
+    </div>
+    <!-- /.row -->
+
+    <div class="col-xs-12">
+      <div class="box">
+        <div class="box-header with-border">
+          <h3 class="box-title"></h3>
+          <div class="box-body">
+            <div class="col-sm-6 col-xs-12">
+              <p class="text-center">
+                <strong>Web Traffic Overview</strong>
+              </p>
+              <canvas id="trafficBar" ></canvas>
+            </div>
+            <hr class="visible-xs-block">
+            <div class="col-sm-6 col-xs-12">
+              <p class="text-center">
+                <strong>Language Overview</strong>
+              </p>
+              <canvas id="languagePie"></canvas>
+            </div>
+          </div>
+        </div>
+        <!-- <div class="text-center">
+          <small><b>Pro Tip</b> Don't forget to star us on github!</small>
+        </div> -->
+      </div>
+    </div>
+    <!-- /.row -->
+
+    <!-- Main row -->
+    <div class="row">
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <process-info-box color-class="bg-yellow"
+                          :icon-classes="['ion', 'ion-ios-pricetag-outline']"
+                          text="Inventory"
+                          number="5,200"
+                          :progress="50"
+                          description="50% increase since May"></process-info-box>
+      </div>
+      <!-- /.col -->
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <process-info-box color-class="bg-green"
+                          :icon-classes="['ion', 'ion-ios-heart-outline']"
+                          text="Mentions"
+                          number="92,050"
+                          :progress="20"
+                          description="20% increase in 30 days"></process-info-box>
+      </div>
+      <!-- /.col -->
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <process-info-box color-class="bg-red"
+                          :icon-classes="['ion', 'ion-ios-cloud-download-outline']"
+                          text="Downloads"
+                          number="114,381"
+                          :progress="70"
+                          description="70% increase since yesterday"></process-info-box>
+      </div>
+      <!-- /.col -->
+      <div class="col-md-3 col-sm-6 col-xs-12">
+        <process-info-box color-class="bg-aqua"
+                          :icon-classes="['ion', 'ion-ios-chatbubble-outline']"
+                          text="Direct Messages"
+                          number="163,921"
+                          :progress="40"
+                          description="40% increase compared to last year"></process-info-box>
+      </div>
+      <!-- /.col -->
+
+    </div>
+    <!-- /.row -->
+  </section>
+  <!-- /.content -->
+</template>
+
+<script>
+import Chart from 'chart.js'
+import Alert from '../widgets/Alert'
+import InfoBox from '../widgets/InfoBox'
+import ProcessInfoBox from '../widgets/ProcessInfoBox'
+
+export default {
+  name: 'Dashboard',
+  components: {
+    Alert,
+    InfoBox,
+    ProcessInfoBox
+  },
+  data () {
+    return {
+      generateRandomNumbers (numbers, max, min) {
+        var a = []
+        for (var i = 0; i < numbers; i++) {
+          a.push(Math.floor(Math.random() * (max - min + 1)) + max)
+        }
+        return a
+      }
+    }
+  },
+  computed: {
+    coPilotNumbers () {
+      return this.generateRandomNumbers(12, 1000000, 10000)
+    },
+    personalNumbers () {
+      return this.generateRandomNumbers(12, 1000000, 10000)
+    },
+    isMobile () {
+      return (window.innerWidth <= 800 && window.innerHeight <= 600)
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      var ctx = document.getElementById('trafficBar').getContext('2d')
+      var config = {
+        type: 'line',
+        data: {
+          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+          datasets: [{
+            label: 'CoPilot',
+            fill: false,
+            borderColor: '#284184',
+            pointBackgroundColor: '#284184',
+            backgroundColor: 'rgba(0, 0, 0, 0)',
+            data: this.coPilotNumbers
+          }, {
+            label: 'Personal Site',
+            borderColor: '#4BC0C0',
+            pointBackgroundColor: '#4BC0C0',
+            backgroundColor: 'rgba(0, 0, 0, 0)',
+            data: this.personalNumbers
+          }]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: !this.isMobile,
+          legend: {
+            position: 'bottom',
+            display: true
+          },
+          tooltips: {
+            mode: 'label',
+            xPadding: 10,
+            yPadding: 10,
+            bodySpacing: 10
+          }
+        }
+      }
+
+      new Chart(ctx, config) // eslint-disable-line no-new
+
+      var pieChartCanvas = document.getElementById('languagePie').getContext('2d')
+      var pieConfig = {
+        type: 'pie',
+        data: {
+          labels: ['HTML', 'JavaScript', 'CSS'],
+          datasets: [{
+            data: [56.6, 37.7, 4.1],
+            backgroundColor: ['#00a65a', '#f39c12', '#00c0ef'],
+            hoverBackgroundColor: ['#00a65a', '#f39c12', '#00c0ef']
+          }]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: !this.isMobile,
+          legend: {
+            position: 'bottom',
+            display: true
+          }
+        }
+      }
+
+      new Chart(pieChartCanvas, pieConfig) // eslint-disable-line no-new
+    })
+  }
+}
+</script>
+<style>
+.info-box {
+  cursor: pointer;
+}
+.info-box-content {
+  text-align: center;
+  vertical-align: middle;
+  display: inherit;
+}
+.fullCanvas {
+  width: 100%;
+}
+</style>

src/components/views/Repos.vue

@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <h1 class="text-center">Repos</h1>
+    <h4 class="text-center">Github Repos</h4>
+
+    <section class="content">
+      <div class="row">
+        <div v-if="error">
+          Found an error
+        </div>
+        <div v-else>
+          <div class="col-md-4" v-if="response" v-for="repo in response" >
+            <div class="box box-widget widget-user">
+              <div class="widget-user-header bg-aqua-active text-center">
+                <h3 class="widget-user-username center-text">{{repo.name }}</h3>
+              </div>
+              <div class="widget-user-image">
+                <img class="img-circle" v-bind:src="repo.owner.avatar_url" alt="repo.owner.login + ' Avatar'">
+              </div>
+              <div class="box-footer">
+                <div class="row">
+                  <div class="col-sm-4 border-right">
+                    <div class="description-block">
+                      <h5 class="description-header">{{repo.stargazers_count}}</h5>
+                      <span class="description-text">Star</span>
+                    </div>
+                  </div>
+                  <div class="col-sm-4 border-right">
+                    <div class="description-block">
+                      <a v-bind:href="repo.owner.html_url" target="_blank">
+                        <button type="button" class="btn btn-default btn-lg">Visit</button>
+                      </a>
+                    </div>
+                  </div>
+                  <div class="col-sm-4">
+                    <div class="description-block">
+                      <h5 class="description-header">{{repo.forks_count}}</h5>
+                      <span class="description-text">Forks</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+<script>
+import axios from 'axios'
+
+export default {
+  name: 'Repository',
+  data () {
+    return {
+      githubUrl: 'https://api.github.com/search/repositories?q=language%3Ajavascript&sort=stars',
+      response: null,
+      error: null
+    }
+  },
+  methods: {
+    callGitHub () {
+      axios.get(this.githubUrl)
+        .then(response => {
+          console.log('GitHub Response:', response)
+
+          if (response.status !== 200) {
+            this.error = response.statusText
+            return
+          }
+
+          this.response = response.data.items
+        })
+        .catch(error => {
+          // Request failed.
+          console.log('error', error.response)
+          this.error = error.response.statusText
+        })
+    }
+  },
+  mounted () {
+    this.callGitHub()
+  }
+}
+</script>
+
+<style>
+</style>

src/components/views/Server.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <h1 class="text-center">Our Environment</h1>
+    <section class="content">
+      <div class="row" v-if="servers">
+        <div class="col-md-4" v-for="server in servers">
+          <div v-bind:class="'box box-' + server.status">
+            <div class="box-header with-border">
+              <i v-bind:class="'fa fa-' + server.icon + ' fa-2x'"></i>
+              <h3 class="box-title">{{server.name}}</h3>
+            </div>
+            <div class="box-body">
+
+              <span>{{server.description}}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+<script>
+  import {servers} from '../../demo'
+
+  export default {
+    name: 'Servers',
+    data () {
+      return {
+        servers
+      }
+    }
+  }
+</script>
+
+<style>
+</style>

src/components/views/Setting.vue

@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <h1 class="text-center">Settings</h1>
+    <section class="content">
+      <div class="row">
+        <div class="col-md-12">
+          <div class="box box-info">
+            <!-- Input Addons -->
+            <div class="box-header with-border">
+              <h3 class="box-title">Inputs</h3>
+            </div>
+
+            <div class="box-body">
+              <!-- calendar group -->
+              <div class="input-group">
+                <span class="input-group-addon">
+                  <i class="fa fa-fw fa-calendar"></i>
+                </span>
+                <datepicker :readonly="true" format="MMM/D/YYYY" id="dateInput" width="100%"></datepicker>
+              </div>
+              <br />
+              <br />
+
+              <!-- with characthers -->
+              <div class="input-group">
+                <span class="input-group-addon">
+                  <i class="fa fa-fw fa-at" aria-hidden="true"></i>
+                </span>
+                <input class="form-control" placeholder="Username" type="text">
+              </div>
+              <br />
+              <div class="input-group">
+                <span class="input-group-addon">
+                  <i class="fa fa-fw fa-usd" aria-hidden="true"></i>
+                </span>
+                <input class="form-control" type="text">
+                <span class="input-group-addon">.00</span>
+              </div>
+              <br />
+
+              <!-- with icons from font awesome -->
+              <h4>With icons</h4>
+              <div class="input-group">
+                <span class="input-group-addon"><i class="fa fa-fw fa-envelope"></i></span>
+                <input class="form-control" placeholder="Email" type="email">
+              </div>
+              <br />
+              <div class="input-group">
+                <input class="form-control" type="text">
+                <span class="input-group-addon"><i class="fa fa-fw fa-check"></i></span>
+              </div>
+              <br>
+
+              <!-- Success/Error heads up input -->
+              <h4>With border indicator</h4>
+              <div class="form-group has-success">
+                <label class="control-label" for="inputSuccess"><i class="fa fa-fw fa-check"></i> Input with success</label>
+                <input class="form-control" id="inputSuccess" placeholder="Enter ..." type="text">
+                <span class="help-block">Help block with success</span>
+              </div>
+              <br />
+              <div class="form-group has-error">
+                <label class="control-label" for="inputError"><i class="fa fa-fw fa-times-circle-o"></i> Input with error</label>
+                <input class="form-control" id="inputError" placeholder="Enter ..." type="text">
+                <span class="help-block">Help block with error</span>
+              </div>
+
+              <!-- select examples -->
+              <h4>Select Options</h4>
+              <div class="form-group">
+                <label>Select</label>
+                <select class="form-control">
+                  <option>option 1</option>
+                  <option>option 2</option>
+                  <option>option 3</option>
+                  <option>option 4</option>
+                  <option>option 5</option>
+                </select>
+              </div>
+              <br />
+              <div class="form-group">
+                <label>Select Multiple</label>
+                <select multiple="" class="form-control">
+                  <option>option 1</option>
+                  <option>option 2</option>
+                  <option>option 3</option>
+                  <option>option 4</option>
+                  <option>option 5</option>
+                </select>
+              </div>
+
+              <!-- /input-group -->
+            </div>
+            <!-- /.box-body -->
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+<script>
+require('moment')
+import datepicker from 'vue-date-picker'
+
+export default {
+  name: 'Settings',
+  components: { datepicker },
+  computed: {
+    datetime () {
+      return new Date()
+    }
+  },
+  methods: {
+    clearInput (vueModel) {
+      vueModel = ''
+    }
+  }
+}
+</script>
+
+<style>
+.datetime-picker input {
+  height: 4em !important;
+}
+</style>

src/components/views/Tables.vue

@@ -0,0 +1,239 @@
+<template>
+  <section class="content">
+    <div class="row center-block">
+      <h2>Simple</h2>
+      <div class="col-md-12">
+        <div class="box">
+          <div class="box-header">
+            <h3 class="box-title">Striped Full Width Table</h3>
+          </div>
+          <!-- /.box-header -->
+          <div class="box-body no-padding table-responsive">
+            <table class="table table-striped">
+              <tbody>
+                <tr>
+                  <th style="width: 10px">#</th>
+                  <th>Task</th>
+                  <th>Progress</th>
+                  <th style="width: 40px">Label</th>
+                </tr>
+                <tr>
+                  <td>1.</td>
+                  <td>Update software</td>
+                  <td><div class="progress progress-xs"><div class="progress-bar progress-bar-danger" style="width: 55%"></div></div></td>
+                  <td><span class="badge bg-red">55%</span></td>
+                </tr>
+                <tr>
+                  <td>2.</td>
+                  <td>Clean database</td>
+                  <td>
+                    <div class="progress progress-xs">
+                      <div class="progress-bar progress-bar-yellow" style="width: 70%"></div>
+                    </div>
+                  </td>
+                  <td><span class="badge bg-yellow">70%</span></td>
+                </tr>
+                <tr>
+                  <td>3.</td>
+                  <td>Cron job running</td>
+                  <td>
+                    <div class="progress progress-xs progress-striped active">
+                      <div class="progress-bar progress-bar-primary" style="width: 30%"></div>
+                    </div>
+                  </td>
+                  <td><span class="badge bg-light-blue">30%</span></td>
+                </tr>
+                <tr>
+                  <td>4.</td>
+                  <td>Fix and squish bugs</td>
+                  <td>
+                    <div class="progress progress-xs progress-striped active">
+                      <div class="progress-bar progress-bar-success" style="width: 90%"></div>
+                    </div>
+                  </td>
+                  <td><span class="badge bg-green">90%</span></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <!-- /.box-body -->
+        </div>
+      </div>
+    </div>
+
+    <div class="row center-block">
+      <h2>Data tables</h2>
+      <div class="col-md-12">
+        <div class="box">
+          <div class="box-header">
+            <h3 class="box-title">Data Table With Full Features</h3>
+          </div>
+          <!-- /.box-header -->
+          <div class="box-body">
+            <div class="dataTables_wrapper form-inline dt-bootstrap" id="example1_wrapper">
+              <div class="row">
+                <div class="col-sm-6">
+                  <div id="example1_length" class="dataTables_length">
+
+                  </div>
+                </div>
+              </div>
+
+              <div class="row">
+                <div class="col-sm-12 table-responsive">
+                  <table aria-describedby="example1_info" role="grid" id="example1" class="table table-bordered table-striped dataTable">
+                    <thead>
+                      <tr role="row">
+                        <th aria-label="Rendering engine: activate to sort column descending" aria-sort="ascending" style="width: 167px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting_asc">Rendering engine</th>
+                        <th aria-label="Browser: activate to sort column ascending" style="width: 207px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">Browser</th>
+                        <th aria-label="Platform(s): activate to sort column ascending" style="width: 182px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">Platform(s)</th>
+                        <th aria-label="Engine version: activate to sort column ascending" style="width: 142px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">Engine version</th>
+                        <th aria-label="CSS grade: activate to sort column ascending" style="width: 101px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">CSS grade</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr class="even" role="row">
+                        <td class="sorting_1">Blink</td>
+                        <td>Iridium  54.0</td>
+                        <td>GNU/Linux</td>
+                        <td>54</td>
+                        <td>A</td>
+                      </tr>
+                      <tr class="odd" role="row">
+                        <td class="sorting_1">Gecko</td>
+                        <td>Firefox 1.0</td>
+                        <td>Win 98+ / OSX.2+</td>
+                        <td>1.7</td>
+                        <td>A</td>
+                      </tr>
+                      <tr class="even" role="row">
+                        <td class="sorting_1">Gecko</td>
+                        <td>Firefox 1.5</td>
+                        <td>Win 98+ / OSX.2+</td>
+                        <td>1.8</td>
+                        <td>A</td>
+                      </tr>
+                      <tr class="odd" role="row">
+                        <td class="sorting_1">Gecko</td>
+                        <td>Firefox 2.0</td>
+                        <td>Win 98+ / OSX.2+</td>
+                        <td>1.8</td>
+                        <td>A</td>
+                      </tr>
+                      <tr class="even" role="row">
+                        <td class="sorting_1">Gecko</td>
+                        <td>Firefox 3.0</td>
+                        <td>Win 2k+ / OSX.3+</td>
+                        <td>1.9</td>
+                        <td>A</td>
+                      </tr>
+                      <tr class="odd" role="row">
+                        <td class="sorting_1">Gecko</td>
+                        <td>Camino 1.0</td>
+                        <td>OSX.2+</td>
+                        <td>1.8</td>
+                        <td>A</td>
+                      </tr>
+                      <tr class="even" role="row">
+                        <td class="sorting_1">Gecko</td>
+                        <td>Camino 1.5</td>
+                        <td>OSX.3+</td>
+                        <td>1.8</td>
+                        <td>A</td>
+                      </tr>
+                      <tr class="odd" role="row">
+                        <td class="sorting_1">Gecko</td>
+                        <td>Netscape 7.2</td>
+                        <td>Win 95+ / Mac OS 8.6-9.2</td>
+                        <td>1.7</td>
+                        <td>A</td>
+                      </tr>
+                      <tr class="even" role="row">
+                        <td class="sorting_1">Gecko</td>
+                        <td>Netscape Browser 8</td>
+                        <td>Win 98SE+</td>
+                        <td>1.7</td>
+                        <td>A</td>
+                      </tr>
+                      <tr class="odd" role="row">
+                        <td class="sorting_1">Gecko</td>
+                        <td>Netscape Navigator 9</td>
+                        <td>Win 98+ / OSX.2+</td>
+                        <td>1.8</td>
+                        <td>A</td>
+                      </tr>
+                      <tr class="even" role="row">
+                        <td class="sorting_1">Gecko</td>
+                        <td>Mozilla 1.0</td>
+                        <td>Win 95+ / OSX.1+</td>
+                        <td>1</td>
+                        <td>A</td>
+                      </tr>
+                    </tbody>
+                    <tfoot>
+                      <tr>
+                        <th colspan="1" rowspan="1">Rendering engine</th>
+                        <th colspan="1" rowspan="1">Browser</th>
+                        <th colspan="1" rowspan="1">Platform(s)</th>
+                        <th colspan="1" rowspan="1">Engine version</th>
+                        <th colspan="1" rowspan="1">CSS grade</th>
+                      </tr>
+                    </tfoot>
+                  </table>
+                </div>
+              </div>
+            </div>
+            <!-- /.box-body -->
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import $ from 'jquery'
+// Require needed datatables modules
+require('datatables.net')
+require('datatables.net-bs')
+
+export default {
+  name: 'Tables',
+  mounted() {
+    this.$nextTick(() => {
+      $('#example1').DataTable()
+    })
+  }
+}
+</script>
+
+<style>
+/* Using the bootstrap style, but overriding the font to not draw in
+   the Glyphicons Halflings font as an additional requirement for sorting icons.
+
+   An alternative to the solution active below is to use the jquery style
+   which uses images, but the color on the images does not match adminlte.
+
+@import url('/static/js/plugins/datatables/jquery.dataTables.min.css');
+*/
+
+@import url('/static/js/plugins/datatables/dataTables.bootstrap.css');
+
+table.dataTable thead .sorting:after,
+table.dataTable thead .sorting_asc:after,
+table.dataTable thead .sorting_desc:after {
+  font-family: 'FontAwesome';
+}
+
+table.dataTable thead .sorting:after {
+  content: '\f0dc';
+}
+
+table.dataTable thead .sorting_asc:after {
+  content: '\f0dd';
+}
+
+table.dataTable thead .sorting_desc:after {
+  content: '\f0de';
+}
+</style>

src/components/views/Tasks.vue

@@ -0,0 +1,50 @@
+<template>
+  <section class="content">
+    <div class="row center-block">
+      <h1 class="text-center">Tasks</h1>
+      <ul class="timeline">
+        <!-- timeline time label -->
+        <li class="time-label">
+          <span class="bg-green">{{today}}</span>
+        </li>
+        <!-- timeline item -->
+        <li v-for="line in timeline">
+          <!-- timeline icon -->
+          <i v-bind:class="'fa ' + line.icon + ' bg-' + line.color"></i>
+          <div class="timeline-item">
+            <span class="time"><i class="fa fa-clock-o"></i>&nbsp;{{line.time}}</span>
+            <h3 class="timeline-header">{{line.title}}</h3>
+            <div class="timeline-body" v-if="line.body" v-html="line.body">
+            </div>
+            <div class="timeline-footer" v-if="line.buttons">
+              <a v-for="btn in line.buttons" v-bind:class="'btn btn-' + btn.type + ' btn-xs'" v-bind:href="btn.href" v-bind:target="btn.target">{{btn.message}}</a>
+            </div>
+          </div>
+        </li>
+      <!-- END timeline item -->
+      </ul>
+    </div>
+  </section>
+</template>
+<script>
+  import moment from 'moment'
+  import {timeline} from '../../demo'
+
+  export default {
+    name: 'Tasks',
+    computed: {
+      today () {
+        return moment().format('MMM Do YY')
+      },
+      timeline () {
+        return timeline
+      }
+    }
+  }
+</script>
+
+<style>
+  .timeline-footer a.btn {
+    margin-right: 10px;
+  }
+</style>

src/components/widgets/Alert.vue

@@ -0,0 +1,36 @@
+<template>
+  <div :class="['alert', 'alert-' + type, {'alert-dismissible': dismissible}]">
+    <button v-if="dismissible" type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+    <h4>
+      <i :class="['icon', iconClasses]"></i>
+      <span>{{title}}</span>
+    </h4>
+    <span>
+      <slot></slot>
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Alert',
+  props: {
+    dismissible: {
+      type: Boolean,
+      default: true
+    },
+    type: {
+      type: String,
+      default: 'info'
+    },
+    iconClasses: {
+      type: Array,
+      default: []
+    },
+    title: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>

src/components/widgets/InfoBox.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="info-box">
+    <span :class="['info-box-icon', colorClass]">
+      <i :class="iconClasses"></i>
+    </span>
+    <div class="info-box-content">
+      <span class="info-box-text">{{text}}</span>
+      <span class="info-box-number">{{number}}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'InfoBox',
+  props: {
+    text: {
+      type: String,
+      required: true
+    },
+    number: {
+      type: String,
+      default: ''
+    },
+    iconClasses: {
+      type: Array,
+      default: []
+    },
+    colorClass: {
+      type: String,
+      default: 'bg-default'
+    }
+  }
+}
+</script>

src/components/widgets/ProcessInfoBox.vue

@@ -0,0 +1,50 @@
+<template>
+  <div :class="['info-box', colorClass]">
+    <span class="info-box-icon">
+      <i :class="iconClasses"></i>
+    </span>
+    <div class="info-box-content">
+      <span class="info-box-text">{{text}}</span>
+      <span class="info-box-number">{{number}}</span>
+      <div class="progress">
+        <div class="progress-bar" :style="{width: progress + '%'}"></div>
+      </div>
+      <span class="progress-description">{{description}}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'InfoBox',
+  props: {
+    text: {
+      type: String,
+      required: true
+    },
+    number: {
+      type: String,
+      default: ''
+    },
+    progress: {
+      type: Number,
+      default: 0,
+      validator(value) {
+        return value >= 0 && value <= 100
+      }
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    iconClasses: {
+      type: Array,
+      default: []
+    },
+    colorClass: {
+      type: String,
+      default: 'bg-default'
+    }
+  }
+}
+</script>

src/config/index.js

@@ -0,0 +1,5 @@
+export default {
+  serverURI: '',
+  fixedLayout: false,
+  hideLogoOnMobile: false
+}

src/demo.js

@@ -0,0 +1,71 @@
+import moment from 'moment'
+
+export const servers = [{
+  name: 'www01',
+  status: 'success',
+  icon: 'globe',
+  description: 'Web server that runs our sites'
+}, {
+  name: 'sql01',
+  status: 'danger',
+  icon: 'database',
+  description: 'mySQL server used for reporting'
+}, {
+  name: 'mongoDB01',
+  status: 'info',
+  icon: 'file-code-o',
+  description: 'Main DB server'
+}, {
+  name: 'ldap01',
+  status: 'success',
+  icon: 'key',
+  description: 'Authentication server'
+}, {
+  name: 'mgmt01',
+  status: 'success',
+  icon: 'home',
+  description: 'Management server with all tools'
+}, {
+  name: 'bkup01',
+  status: 'warning',
+  icon: 'backward',
+  description: 'Backup server'
+}]
+
+export const stats = [{
+  header: '8390',
+  text: 'Visitors'
+}, {
+  header: '30%',
+  text: 'Referrals'
+}, {
+  header: '70%',
+  text: 'Organic'
+}]
+
+export const timeline = [{
+  icon: 'fa-envelope',
+  color: 'blue',
+  title: 'Write short novel',
+  time: moment().endOf('day').fromNow(),
+  body: 'Etsy doostang zoodles disqus groupon greplin oooj voxy zoodles, weebly ning heekya handango imeem plugg dopplr jibjab, movity jajah plickers sifteo edmodo ifttt zimbra. Babblely odeo kaboodle quora plaxo ideeli hulu weebly balihoo...',
+  buttons: [{
+    type: 'primary',
+    message: 'Read more',
+    href: 'https://github.com/misterGF/CoPilot',
+    target: '_blank'
+  }]
+},
+{
+  icon: 'fa-user',
+  color: 'yellow',
+  title: 'Sarah Young accepted your friend request',
+  time: moment('20150620', 'MMM Do YY').fromNow()
+},
+{
+  icon: 'fa-camera',
+  color: 'purple',
+  title: 'Watch a youTube video',
+  time: moment('20130620', 'YYYYMMDD').fromNow(),
+  body: '<div class="embed-responsive embed-responsive-16by9"><iframe width="560" height="315" src="https://www.youtube.com/embed/8aGhZQkoFbQ" frameborder="0" allowfullscreen></iframe></div>'
+}]

src/filters/index.js

@@ -0,0 +1,23 @@
+const urlParser = document.createElement('a')
+
+export function domain (url) {
+  urlParser.href = url
+  return urlParser.hostname
+}
+
+export function count (arr) {
+  return arr.length
+}
+
+export function prettyDate (date) {
+  var a = new Date(date)
+  return a.toDateString()
+}
+
+export function pluralize (time, label) {
+  if (time === 1) {
+    return time + label
+  }
+
+  return time + label + 's'
+}

src/main.js

@@ -0,0 +1,78 @@
+// Import ES6 Promise
+import 'es6-promise/auto'
+
+// Import System requirements
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+import { sync } from 'vuex-router-sync'
+import routes from './routes'
+import store from './store'
+
+// Import Helpers for filters
+import { domain, count, prettyDate, pluralize } from './filters'
+
+// Import Views - Top level
+import AppView from './components/App.vue'
+
+// Import Install and register helper items
+Vue.filter('count', count)
+Vue.filter('domain', domain)
+Vue.filter('prettyDate', prettyDate)
+Vue.filter('pluralize', pluralize)
+
+Vue.use(VueRouter)
+
+// Routing logic
+var router = new VueRouter({
+  routes: routes,
+  mode: 'history',
+  linkExactActiveClass: 'active',
+  scrollBehavior: function(to, from, savedPosition) {
+    return savedPosition || { x: 0, y: 0 }
+  }
+})
+
+// Some middleware to help us ensure the user is authenticated.
+router.beforeEach((to, from, next) => {
+  if (
+    to.matched.some(record => record.meta.requiresAuth) &&
+    (!router.app.$store.state.token || router.app.$store.state.token === 'null')
+  ) {
+    // this route requires auth, check if logged in
+    // if not, redirect to login page.
+    window.console.log('Not authenticated')
+    next({
+      path: '/login',
+      query: { redirect: to.fullPath }
+    })
+  } else {
+    next()
+  }
+})
+
+sync(store, router)
+
+// Check local storage to handle refreshes
+if (window.localStorage) {
+  var localUserString = window.localStorage.getItem('user') || 'null'
+  var localUser = JSON.parse(localUserString)
+
+  if (localUser && store.state.user !== localUser) {
+    store.commit('SET_USER', localUser)
+    store.commit('SET_TOKEN', window.localStorage.getItem('token'))
+  }
+}
+
+// Start out app!
+// eslint-disable-next-line no-new
+new Vue({
+  el: '#root',
+  router: router,
+  store: store,
+  render: h => h(AppView)
+})
+
+// change this. demo
+window.bugsnagClient = window.bugsnag('02fe1c2caaf5874c50b6ee19534f5932')
+window.bugsnagClient.use(window.bugsnag__vue(Vue))

src/routes.js

@@ -0,0 +1,77 @@
+import DashView from './components/Dash.vue'
+import LoginView from './components/Login.vue'
+import NotFoundView from './components/404.vue'
+
+// Import Views - Dash
+import DashboardView from './components/views/Dashboard.vue'
+import TablesView from './components/views/Tables.vue'
+import TasksView from './components/views/Tasks.vue'
+import SettingView from './components/views/Setting.vue'
+import AccessView from './components/views/Access.vue'
+import ServerView from './components/views/Server.vue'
+import CryptosView from './components/views/Cryptos.vue'
+import PersonalFinancesView from './components/views/PersonalFinances.vue'
+
+// Routes
+const routes = [
+  {
+    path: '/login',
+    component: LoginView
+  },
+  {
+    path: '/',
+    component: DashView,
+    children: [
+      {
+        path: 'personalfinances',
+        alias: '',
+        component: PersonalFinancesView,
+        name: 'Personal Finances',
+        meta: {description: 'Overview of environment'}
+      },
+      {
+        path: 'dashboard',
+        alias: '',
+        component: DashboardView,
+        name: 'Dashboard',
+        meta: {description: 'Overview of environment'}
+      }, {
+        path: 'tables',
+        component: TablesView,
+        name: 'Tables',
+        meta: {description: 'Simple and advance table in CoPilot'}
+      }, {
+        path: 'tasks',
+        component: TasksView,
+        name: 'Tasks',
+        meta: {description: 'Tasks page in the form of a timeline'}
+      }, {
+        path: 'setting',
+        component: SettingView,
+        name: 'Settings',
+        meta: {description: 'User settings page'}
+      }, {
+        path: 'access',
+        component: AccessView,
+        name: 'Access',
+        meta: {description: 'Example of using maps'}
+      }, {
+        path: 'server',
+        component: ServerView,
+        name: 'Servers',
+        meta: {description: 'List of our servers', requiresAuth: true}
+      }, {
+        path: 'cryptos',
+        component: CryptosView,
+        name: 'Cryptos',
+        meta: {description: 'List of popular javascript repos'}
+      }
+    ]
+  }, {
+    // not found handler
+    path: '*',
+    component: NotFoundView
+  }
+]
+
+export default routes

src/store/actions.js

@@ -0,0 +1 @@
+export default {}

src/store/index.js

@@ -0,0 +1,13 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import state from './state'
+import actions from './actions'
+import mutations from './mutations'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state,
+  actions,
+  mutations
+})

src/store/mutations.js

@@ -0,0 +1,14 @@
+export default {
+  TOGGLE_LOADING (state) {
+    state.callingAPI = !state.callingAPI
+  },
+  TOGGLE_SEARCHING (state) {
+    state.searching = (state.searching === '') ? 'loading' : ''
+  },
+  SET_USER (state, user) {
+    state.user = user
+  },
+  SET_TOKEN (state, token) {
+    state.token = token
+  }
+}

src/store/state.js

@@ -0,0 +1,55 @@
+export default {
+  callingAPI: false,
+  searching: '',
+  serverURI: 'http://10.110.1.136:8080',
+  user: null,
+  token: null,
+  userInfo: {
+    messages: [
+      {
+        id: 1,
+        title: 'Support Team',
+        body: 'Why not consider this a test message?',
+        createdAt: '17 min ago'
+      }
+    ],
+    notifications: [
+      {
+        id: 1,
+        title: 'Birthday Reminder',
+        body: 'Today is Brians birthday.',
+        createdAt: 'just now',
+        readAt: null
+      },
+      {
+        id: 2,
+        title: 'Bank Holiday in London',
+        body: 'Our office in London has a bank holiday today. Do not expect them to answer the phone.',
+        createdAt: '4 hours ago',
+        readAt: null
+      },
+      {
+        id: 3,
+        title: 'Birthday Reminder',
+        body: 'Today is Christians birthday.',
+        createdAt: '27 days ago',
+        readAt: '2018-08-12 00:00:00'
+      },
+      {
+        id: 4,
+        title: 'Birthday Reminder',
+        body: 'Today is Tanjas birthday.',
+        createdAt: '29 days ago',
+        readAt: '2018-08-12 00:00:00'
+      },
+      {
+        id: 5,
+        title: 'Sales Bonus received',
+        body: 'You received your monthly sales bonus of 3%. This month you made $2,700 extra!',
+        createdAt: '7 hours ago',
+        readAt: null
+      }
+    ],
+    tasks: []
+  }
+}

static/css/bootstrap.min.css.map.css

@@ -0,0 +1 @@
+

static/css/skin-blue.min.css

@@ -0,0 +1 @@
+.skin-blue .main-header .navbar{background-color:#3c8dbc}.skin-blue .main-header .navbar .nav>li>a{color:#fff}.skin-blue .main-header .navbar .nav>li>a:hover,.skin-blue .main-header .navbar .nav>li>a:active,.skin-blue .main-header .navbar .nav>li>a:focus,.skin-blue .main-header .navbar .nav .open>a,.skin-blue .main-header .navbar .nav .open>a:hover,.skin-blue .main-header .navbar .nav .open>a:focus,.skin-blue .main-header .navbar .nav>.active>a{background:rgba(0,0,0,0.1);color:#f6f6f6}.skin-blue .main-header .navbar .sidebar-toggle{color:#fff}.skin-blue .main-header .navbar .sidebar-toggle:hover{color:#f6f6f6;background:rgba(0,0,0,0.1)}.skin-blue .main-header .navbar .sidebar-toggle{color:#fff}.skin-blue .main-header .navbar .sidebar-toggle:hover{background-color:#367fa9}@media (max-width:767px){.skin-blue .main-header .navbar .dropdown-menu li.divider{background-color:rgba(255,255,255,0.1)}.skin-blue .main-header .navbar .dropdown-menu li a{color:#fff}.skin-blue .main-header .navbar .dropdown-menu li a:hover{background:#367fa9}}.skin-blue .main-header .logo{background-color:#367fa9;color:#fff;border-bottom:0 solid transparent}.skin-blue .main-header .logo:hover{background-color:#357ca5}.skin-blue .main-header li.user-header{background-color:#3c8dbc}.skin-blue .content-header{background:transparent}.skin-blue .wrapper,.skin-blue .main-sidebar,.skin-blue .left-side{background-color:#222d32}.skin-blue .user-panel>.info,.skin-blue .user-panel>.info>a{color:#fff}.skin-blue .sidebar-menu>li.header{color:#4b646f;background:#1a2226}.skin-blue .sidebar-menu>li>a{border-left:3px solid transparent}.skin-blue .sidebar-menu>li:hover>a,.skin-blue .sidebar-menu>li.active>a{color:#fff;background:#1e282c;border-left-color:#3c8dbc}.skin-blue .sidebar-menu>li>.treeview-menu{margin:0 1px;background:#2c3b41}.skin-blue .sidebar a{color:#b8c7ce}.skin-blue .sidebar a:hover{text-decoration:none}.skin-blue .treeview-menu>li>a{color:#8aa4af}.skin-blue .treeview-menu>li.active>a,.skin-blue .treeview-menu>li>a:hover{color:#fff}.skin-blue .sidebar-form{border-radius:3px;border:1px solid #374850;margin:10px 10px}.skin-blue .sidebar-form input[type="text"],.skin-blue .sidebar-form .btn{box-shadow:none;background-color:#374850;border:1px solid transparent;height:35px;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.skin-blue .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:2px}.skin-blue .sidebar-form input[type="text"]:focus,.skin-blue .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-blue .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-blue .sidebar-form .btn{color:#999;border-top-left-radius:0;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:0}.skin-blue.layout-top-nav .main-header>.logo{background-color:#3c8dbc;color:#fff;border-bottom:0 solid transparent}.skin-blue.layout-top-nav .main-header>.logo:hover{background-color:#3b8ab8}

static/img/copilot-logo-white.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 170 170" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g id="Layer.-1"><path d="M82.574,102.829l-44.006,25.533l17.688,-40.831l26.318,15.298Zm6.347,-70.93l41.688,96.463l-73.569,-42.757l23.216,-53.706c1.45,-1.426 2.888,-2.021 4.315,-1.783c1.45,-0.261 2.9,0.333 4.35,1.783" style="fill:#fff;stroke:#fff;stroke-width:0.75px;"/><path d="M138.669,30.794c14.906,14.906 22.36,32.879 22.36,53.919c0,21.064 -7.454,39.049 -22.36,53.956c-14.906,14.905 -32.891,22.359 -53.955,22.359c-21.04,0 -39.014,-7.454 -53.92,-22.359c-14.906,-14.907 -22.359,-32.892 -22.359,-53.956c0,-21.04 7.453,-39.013 22.359,-53.919c14.906,-14.906 32.88,-22.359 53.92,-22.359c21.064,0 39.049,7.453 53.955,22.359l0,0Z" style="fill:none;stroke:#fff;stroke-width:8.56px;stroke-linecap:round;stroke-miterlimit:3;"/></g></svg>

static/js/plugins/datatables/dataTables.bootstrap.css

@@ -0,0 +1,372 @@
+div.dataTables_length label {
+	font-weight: normal;
+	text-align: left;
+	white-space: nowrap;
+}
+
+div.dataTables_length select {
+	width: 75px;
+	display: inline-block;
+}
+
+div.dataTables_filter {
+	text-align: right;
+}
+
+div.dataTables_filter label {
+	font-weight: normal;
+	white-space: nowrap;
+	text-align: left;
+}
+
+div.dataTables_filter input {
+	margin-left: 0.5em;
+	display: inline-block;
+	width: auto;
+}
+
+div.dataTables_info {
+	padding-top: 8px;
+	white-space: nowrap;
+}
+
+div.dataTables_paginate {
+	margin: 0;
+	white-space: nowrap;
+	text-align: right;
+}
+
+div.dataTables_paginate ul.pagination {
+	margin: 2px 0;
+	white-space: nowrap;
+}
+
+@media screen and (max-width: 767px) {
+	div.dataTables_wrapper > div.row > div,
+	div.dataTables_length,
+	div.dataTables_filter,
+	div.dataTables_info,
+	div.dataTables_paginate {
+		text-align: center;
+	}
+
+	div.DTTT {
+		margin-bottom: 0.5em;
+	}
+}
+
+
+table.dataTable td,
+table.dataTable th {
+	-webkit-box-sizing: content-box;
+	-moz-box-sizing: content-box;
+	box-sizing: content-box;
+}
+
+
+table.dataTable {
+	clear: both;
+	margin-top: 6px !important;
+	margin-bottom: 6px !important;
+	max-width: none !important;
+}
+
+table.dataTable thead .sorting,
+table.dataTable thead .sorting_asc,
+table.dataTable thead .sorting_desc,
+table.dataTable thead .sorting_asc_disabled,
+table.dataTable thead .sorting_desc_disabled {
+	cursor: pointer;
+	position: relative;
+}
+
+table.dataTable thead .sorting:after,
+table.dataTable thead .sorting_asc:after,
+table.dataTable thead .sorting_desc:after {
+	position: absolute;
+	top: 8px;
+	right: 8px;
+	display: block;
+	font-family: 'Glyphicons Halflings';
+	opacity: 0.5;
+}
+table.dataTable thead .sorting:after {
+	opacity: 0.2;
+	content: "\e150"; /* sort */
+}
+table.dataTable thead .sorting_asc:after {
+	content: "\e155"; /* sort-by-attributes */
+}
+table.dataTable thead .sorting_desc:after {
+	content: "\e156"; /* sort-by-attributes-alt */
+}
+div.dataTables_scrollBody table.dataTable thead .sorting:after,
+div.dataTables_scrollBody table.dataTable thead .sorting_asc:after,
+div.dataTables_scrollBody table.dataTable thead .sorting_desc:after {
+	display: none;
+}
+
+table.dataTable thead .sorting_asc_disabled:after,
+table.dataTable thead .sorting_desc_disabled:after {
+	color: #eee;
+}
+
+table.dataTable thead > tr > th {
+	padding-right: 30px;
+}
+
+table.dataTable th:active {
+	outline: none;
+}
+
+
+/* Condensed */
+table.dataTable.table-condensed thead > tr > th {
+	padding-right: 20px;
+}
+
+table.dataTable.table-condensed thead .sorting:after,
+table.dataTable.table-condensed thead .sorting_asc:after,
+table.dataTable.table-condensed thead .sorting_desc:after {
+	top: 6px;
+	right: 6px;
+}
+
+/* Scrolling */
+div.dataTables_scrollHead table {
+	margin-bottom: 0 !important;
+	border-bottom-left-radius: 0;
+	border-bottom-right-radius: 0;
+}
+
+div.dataTables_scrollHead table thead tr:last-child th:first-child,
+div.dataTables_scrollHead table thead tr:last-child td:first-child {
+	border-bottom-left-radius: 0 !important;
+	border-bottom-right-radius: 0 !important;
+}
+
+div.dataTables_scrollBody table {
+	border-top: none;
+	margin-top: 0 !important;
+	margin-bottom: 0 !important;
+}
+
+div.dataTables_scrollBody tbody tr:first-child th,
+div.dataTables_scrollBody tbody tr:first-child td {
+	border-top: none;
+}
+
+div.dataTables_scrollFoot table {
+	margin-top: 0 !important;
+	border-top: none;
+}
+
+/* Frustratingly the border-collapse:collapse used by Bootstrap makes the column
+   width calculations when using scrolling impossible to align columns. We have
+   to use separate
+ */
+table.table-bordered.dataTable {
+	border-collapse: separate !important;
+}
+table.table-bordered thead th,
+table.table-bordered thead td {
+	border-left-width: 0;
+	border-top-width: 0;
+}
+table.table-bordered tbody th,
+table.table-bordered tbody td {
+	border-left-width: 0;
+	border-bottom-width: 0;
+}
+table.table-bordered tfoot th,
+table.table-bordered tfoot td {
+    border-left-width: 0;
+    border-bottom-width: 0;
+}
+table.table-bordered th:last-child,
+table.table-bordered td:last-child {
+	border-right-width: 0;
+}
+div.dataTables_scrollHead table.table-bordered {
+	border-bottom-width: 0;
+}
+
+
+
+
+/*
+ * TableTools styles
+ */
+.table.dataTable tbody tr.active td,
+.table.dataTable tbody tr.active th {
+	background-color: #08C;
+	color: white;
+}
+
+.table.dataTable tbody tr.active:hover td,
+.table.dataTable tbody tr.active:hover th {
+	background-color: #0075b0 !important;
+}
+
+.table.dataTable tbody tr.active th > a,
+.table.dataTable tbody tr.active td > a {
+	color: white;
+}
+
+.table-striped.dataTable tbody tr.active:nth-child(odd) td,
+.table-striped.dataTable tbody tr.active:nth-child(odd) th {
+	background-color: #017ebc;
+}
+
+table.DTTT_selectable tbody tr {
+	cursor: pointer;
+}
+
+div.DTTT .btn:hover {
+	text-decoration: none !important;
+}
+
+ul.DTTT_dropdown.dropdown-menu {
+  z-index: 2003;
+}
+
+ul.DTTT_dropdown.dropdown-menu a {
+	color: #333 !important; /* needed only when demo_page.css is included */
+}
+
+ul.DTTT_dropdown.dropdown-menu li {
+	position: relative;
+}
+
+ul.DTTT_dropdown.dropdown-menu li:hover a {
+	background-color: #0088cc;
+	color: white !important;
+}
+
+div.DTTT_collection_background {
+	z-index: 2002;	
+}
+
+/* TableTools information display */
+div.DTTT_print_info {
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	width: 400px;
+	height: 150px;
+	margin-left: -200px;
+	margin-top: -75px;
+	text-align: center;
+	color: #333;
+	padding: 10px 30px;
+	opacity: 0.95;
+
+	background-color: white;
+	border: 1px solid rgba(0, 0, 0, 0.2);
+	border-radius: 6px;
+	
+	-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
+	        box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
+}
+
+div.DTTT_print_info h6 {
+	font-weight: normal;
+	font-size: 28px;
+	line-height: 28px;
+	margin: 1em;
+}
+
+div.DTTT_print_info p {
+	font-size: 14px;
+	line-height: 20px;
+}
+
+div.dataTables_processing {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 60px;
+    margin-left: -50%;
+    margin-top: -25px;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    text-align: center;
+    font-size: 1.2em;
+    background-color: white;
+    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(25%, rgba(255,255,255,0.9)), color-stop(75%, rgba(255,255,255,0.9)), color-stop(100%, rgba(255,255,255,0)));
+    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
+    background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
+    background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
+    background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
+    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
+}
+
+
+
+/*
+ * FixedColumns styles
+ */
+div.DTFC_LeftHeadWrapper table,
+div.DTFC_LeftFootWrapper table,
+div.DTFC_RightHeadWrapper table,
+div.DTFC_RightFootWrapper table,
+table.DTFC_Cloned tr.even {
+    background-color: white;
+    margin-bottom: 0;
+}
+ 
+div.DTFC_RightHeadWrapper table ,
+div.DTFC_LeftHeadWrapper table {
+	border-bottom: none !important;
+    margin-bottom: 0 !important;
+    border-top-right-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+}
+ 
+div.DTFC_RightHeadWrapper table thead tr:last-child th:first-child,
+div.DTFC_RightHeadWrapper table thead tr:last-child td:first-child,
+div.DTFC_LeftHeadWrapper table thead tr:last-child th:first-child,
+div.DTFC_LeftHeadWrapper table thead tr:last-child td:first-child {
+    border-bottom-left-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+}
+ 
+div.DTFC_RightBodyWrapper table,
+div.DTFC_LeftBodyWrapper table {
+    border-top: none;
+    margin: 0 !important;
+}
+ 
+div.DTFC_RightBodyWrapper tbody tr:first-child th,
+div.DTFC_RightBodyWrapper tbody tr:first-child td,
+div.DTFC_LeftBodyWrapper tbody tr:first-child th,
+div.DTFC_LeftBodyWrapper tbody tr:first-child td {
+    border-top: none;
+}
+ 
+div.DTFC_RightFootWrapper table,
+div.DTFC_LeftFootWrapper table {
+    border-top: none;
+    margin-top: 0 !important;
+}
+
+
+div.DTFC_LeftBodyWrapper table.dataTable thead .sorting:after,
+div.DTFC_LeftBodyWrapper table.dataTable thead .sorting_asc:after,
+div.DTFC_LeftBodyWrapper table.dataTable thead .sorting_desc:after,
+div.DTFC_RightBodyWrapper table.dataTable thead .sorting:after,
+div.DTFC_RightBodyWrapper table.dataTable thead .sorting_asc:after,
+div.DTFC_RightBodyWrapper table.dataTable thead .sorting_desc:after {
+	display: none;
+}
+
+
+/*
+ * FixedHeader styles
+ */
+div.FixedHeader_Cloned table {
+	margin: 0 !important
+}
+

static/js/plugins/datatables/dataTables.bootstrap.js

@@ -0,0 +1,206 @@
+/*! DataTables Bootstrap 3 integration
+ * ©2011-2014 SpryMedia Ltd - datatables.net/license
+ */
+
+/**
+ * DataTables integration for Bootstrap 3. This requires Bootstrap 3 and
+ * DataTables 1.10 or newer.
+ *
+ * This file sets the defaults and adds options to DataTables to style its
+ * controls using Bootstrap. See http://datatables.net/manual/styling/bootstrap
+ * for further information.
+ */
+(function(window, document, undefined){
+
+var factory = function( $, DataTable ) {
+"use strict";
+
+
+/* Set the defaults for DataTables initialisation */
+$.extend( true, DataTable.defaults, {
+	dom:
+		"<'row'<'col-sm-6'l><'col-sm-6'f>>" +
+		"<'row'<'col-sm-12'tr>>" +
+		"<'row'<'col-sm-5'i><'col-sm-7'p>>",
+	renderer: 'bootstrap'
+} );
+
+
+/* Default class modification */
+$.extend( DataTable.ext.classes, {
+	sWrapper:      "dataTables_wrapper form-inline dt-bootstrap",
+	sFilterInput:  "form-control input-sm",
+	sLengthSelect: "form-control input-sm"
+} );
+
+
+/* Bootstrap paging button renderer */
+DataTable.ext.renderer.pageButton.bootstrap = function ( settings, host, idx, buttons, page, pages ) {
+	var api     = new DataTable.Api( settings );
+	var classes = settings.oClasses;
+	var lang    = settings.oLanguage.oPaginate;
+	var btnDisplay, btnClass, counter=0;
+
+	var attach = function( container, buttons ) {
+		var i, ien, node, button;
+		var clickHandler = function ( e ) {
+			e.preventDefault();
+			if ( !$(e.currentTarget).hasClass('disabled') ) {
+				api.page( e.data.action ).draw( false );
+			}
+		};
+
+		for ( i=0, ien=buttons.length ; i<ien ; i++ ) {
+			button = buttons[i];
+
+			if ( $.isArray( button ) ) {
+				attach( container, button );
+			}
+			else {
+				btnDisplay = '';
+				btnClass = '';
+
+				switch ( button ) {
+					case 'ellipsis':
+						btnDisplay = '&hellip;';
+						btnClass = 'disabled';
+						break;
+
+					case 'first':
+						btnDisplay = lang.sFirst;
+						btnClass = button + (page > 0 ?
+							'' : ' disabled');
+						break;
+
+					case 'previous':
+						btnDisplay = lang.sPrevious;
+						btnClass = button + (page > 0 ?
+							'' : ' disabled');
+						break;
+
+					case 'next':
+						btnDisplay = lang.sNext;
+						btnClass = button + (page < pages-1 ?
+							'' : ' disabled');
+						break;
+
+					case 'last':
+						btnDisplay = lang.sLast;
+						btnClass = button + (page < pages-1 ?
+							'' : ' disabled');
+						break;
+
+					default:
+						btnDisplay = button + 1;
+						btnClass = page === button ?
+							'active' : '';
+						break;
+				}
+
+				if ( btnDisplay ) {
+					node = $('<li>', {
+							'class': classes.sPageButton+' '+btnClass,
+							'id': idx === 0 && typeof button === 'string' ?
+								settings.sTableId +'_'+ button :
+								null
+						} )
+						.append( $('<a>', {
+								'href': '#',
+								'aria-controls': settings.sTableId,
+								'data-dt-idx': counter,
+								'tabindex': settings.iTabIndex
+							} )
+							.html( btnDisplay )
+						)
+						.appendTo( container );
+
+					settings.oApi._fnBindAction(
+						node, {action: button}, clickHandler
+					);
+
+					counter++;
+				}
+			}
+		}
+	};
+
+	// IE9 throws an 'unknown error' if document.activeElement is used
+	// inside an iframe or frame. 
+	var activeEl;
+
+	try {
+		// Because this approach is destroying and recreating the paging
+		// elements, focus is lost on the select button which is bad for
+		// accessibility. So we want to restore focus once the draw has
+		// completed
+		activeEl = $(document.activeElement).data('dt-idx');
+	}
+	catch (e) {}
+
+	attach(
+		$(host).empty().html('<ul class="pagination"/>').children('ul'),
+		buttons
+	);
+
+	if ( activeEl ) {
+		$(host).find( '[data-dt-idx='+activeEl+']' ).focus();
+	}
+};
+
+
+/*
+ * TableTools Bootstrap compatibility
+ * Required TableTools 2.1+
+ */
+if ( DataTable.TableTools ) {
+	// Set the classes that TableTools uses to something suitable for Bootstrap
+	$.extend( true, DataTable.TableTools.classes, {
+		"container": "DTTT btn-group",
+		"buttons": {
+			"normal": "btn btn-default",
+			"disabled": "disabled"
+		},
+		"collection": {
+			"container": "DTTT_dropdown dropdown-menu",
+			"buttons": {
+				"normal": "",
+				"disabled": "disabled"
+			}
+		},
+		"print": {
+			"info": "DTTT_print_info"
+		},
+		"select": {
+			"row": "active"
+		}
+	} );
+
+	// Have the collection use a bootstrap compatible drop down
+	$.extend( true, DataTable.TableTools.DEFAULTS.oTags, {
+		"collection": {
+			"container": "ul",
+			"button": "li",
+			"liner": "a"
+		}
+	} );
+}
+
+}; // /factory
+
+
+// Define as an AMD module if possible
+if ( typeof define === 'function' && define.amd ) {
+	define( ['jquery', 'datatables'], factory );
+}
+else if ( typeof exports === 'object' ) {
+    // Node/CommonJS
+    factory( require('jquery'), require('datatables') );
+}
+else if ( jQuery ) {
+	// Otherwise simply initialise as normal, stopping multiple evaluation
+	factory( jQuery, jQuery.fn.dataTable );
+}
+
+
+})(window, document);
+

static/js/plugins/datatables/dataTables.bootstrap.min.js

@@ -0,0 +1,8 @@
+/*!
+ DataTables Bootstrap 3 integration
+ ©2011-2014 SpryMedia Ltd - datatables.net/license
+*/
+(function(l,q){var e=function(b,c){b.extend(!0,c.defaults,{dom:"<'row'<'col-sm-6'l><'col-sm-6'f>><'row'<'col-sm-12'tr>><'row'<'col-sm-5'i><'col-sm-7'p>>",renderer:"bootstrap"});b.extend(c.ext.classes,{sWrapper:"dataTables_wrapper form-inline dt-bootstrap",sFilterInput:"form-control input-sm",sLengthSelect:"form-control input-sm"});c.ext.renderer.pageButton.bootstrap=function(g,e,r,s,i,m){var t=new c.Api(g),u=g.oClasses,j=g.oLanguage.oPaginate,d,f,n=0,p=function(c,e){var k,h,o,a,l=function(a){a.preventDefault();
+b(a.currentTarget).hasClass("disabled")||t.page(a.data.action).draw(!1)};k=0;for(h=e.length;k<h;k++)if(a=e[k],b.isArray(a))p(c,a);else{f=d="";switch(a){case "ellipsis":d="&hellip;";f="disabled";break;case "first":d=j.sFirst;f=a+(0<i?"":" disabled");break;case "previous":d=j.sPrevious;f=a+(0<i?"":" disabled");break;case "next":d=j.sNext;f=a+(i<m-1?"":" disabled");break;case "last":d=j.sLast;f=a+(i<m-1?"":" disabled");break;default:d=a+1,f=i===a?"active":""}d&&(o=b("<li>",{"class":u.sPageButton+" "+
+f,id:0===r&&"string"===typeof a?g.sTableId+"_"+a:null}).append(b("<a>",{href:"#","aria-controls":g.sTableId,"data-dt-idx":n,tabindex:g.iTabIndex}).html(d)).appendTo(c),g.oApi._fnBindAction(o,{action:a},l),n++)}},h;try{h=b(q.activeElement).data("dt-idx")}catch(l){}p(b(e).empty().html('<ul class="pagination"/>').children("ul"),s);h&&b(e).find("[data-dt-idx="+h+"]").focus()};c.TableTools&&(b.extend(!0,c.TableTools.classes,{container:"DTTT btn-group",buttons:{normal:"btn btn-default",disabled:"disabled"},
+collection:{container:"DTTT_dropdown dropdown-menu",buttons:{normal:"",disabled:"disabled"}},print:{info:"DTTT_print_info"},select:{row:"active"}}),b.extend(!0,c.TableTools.DEFAULTS.oTags,{collection:{container:"ul",button:"li",liner:"a"}}))};"function"===typeof define&&define.amd?define(["jquery","datatables"],e):"object"===typeof exports?e(require("jquery"),require("datatables")):jQuery&&e(jQuery,jQuery.fn.dataTable)})(window,document);

static/js/plugins/datatables/extensions/AutoFill/Readme.txt

@@ -0,0 +1,38 @@
+# AutoFill
+
+AutoFill gives an Excel like option to a DataTable to click and drag over multiple cells, filling in information over the selected cells and incrementing numbers as needed. Key features include:
+
+* Click and drag cell content insertion
+* Automatic incrementing of numeric information
+* Enable and disable on any column
+* Detailed callback functions for customisation
+* Support for both DataTables and browser window scrolling
+
+
+# Installation
+
+To use AutoFill, first download DataTables ( http://datatables.net/download ) and place the unzipped AutoFill package into a `extensions` directory in the DataTables package. This will allow the pages in the examples to operate correctly. To see the examples running, open the `examples` directory in your web-browser.
+
+
+# Basic usage
+
+AutoFill is initialised using the `$.fn.dataTable.AutoFill` constructor. For example:
+
+```js
+$(document).ready( function () {
+    var table = $('#example').dataTable();
+    new $.fn.dataTable.AutoFill( table );
+} );
+```
+
+
+# Documentation / support
+
+* Documentation: http://datatables.net/extensions/autofill/
+* DataTables support forums: http://datatables.net/forums
+
+
+# GitHub
+
+If you fancy getting involved with the development of AutoFill and help make it better, please refer to its GitHub repo: https://github.com/DataTables/AutoFill
+

static/js/plugins/datatables/extensions/AutoFill/css/dataTables.autoFill.css

@@ -0,0 +1,24 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ * AutoFill styles
+ */
+
+div.AutoFill_filler {
+	display: none;
+	position: absolute;
+	height: 14px;
+	width: 14px;
+	background: url(../images/filler.png) no-repeat center center;
+	z-index: 1002;
+}
+
+div.AutoFill_border {
+	display: none;
+	position: absolute;
+	background-color: #0063dc;
+	z-index: 1001;
+	
+	box-shadow: 0px 0px 5px #76b4ff;
+	-moz-box-shadow: 0px 0px 5px #76b4ff;
+	-webkit-box-shadow: 0px 0px 5px #76b4ff;
+}
+

static/js/plugins/datatables/extensions/AutoFill/css/dataTables.autoFill.min.css

@@ -0,0 +1 @@
+div.AutoFill_filler{display:none;position:absolute;height:14px;width:14px;background:url(../images/filler.png) no-repeat center center;z-index:1002}div.AutoFill_border{display:none;position:absolute;background-color:#0063dc;z-index:1001;box-shadow:0px 0px 5px #76b4ff;-moz-box-shadow:0px 0px 5px #76b4ff;-webkit-box-shadow:0px 0px 5px #76b4ff}

static/js/plugins/datatables/extensions/AutoFill/examples/columns.html

@@ -0,0 +1,644 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
+
+	<title>AutoFill example - Column options</title>
+	<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
+	<link rel="stylesheet" type="text/css" href="../css/dataTables.autoFill.css">
+	<link rel="stylesheet" type="text/css" href="../../../examples/resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../../../examples/resources/demo.css">
+	<style type="text/css" class="init">
+
+	</style>
+	<script type="text/javascript" language="javascript" src="../../../media/js/jquery.js"></script>
+	<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
+	<script type="text/javascript" language="javascript" src="../js/dataTables.autoFill.js"></script>
+	<script type="text/javascript" language="javascript" src="../../../examples/resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../../../examples/resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+
+
+$(document).ready(function() {
+	var table = $('#example').dataTable();
+
+	new $.fn.dataTable.AutoFill( table, {
+		"columnDefs": [
+			{ enable:    false, targets: [-1, -2] },
+			{ increment: false, targets: 3 }
+		]
+	} );
+} );
+
+
+	</script>
+</head>
+
+<body class="dt-example">
+	<div class="container">
+		<section>
+			<h1>AutoFill example <span>Column options</span></h1>
+
+			<div class="info">
+				<p>Columns can be enabled (which they are by default) and disabled from providing the end user with
+				AutoFill abilities by using either <code>columns</code> or <code>columnDefs</code> and the
+				<code>enable</code> option. These two arrays work in exactly the same way <a href=
+				"http://datatables.net/ref/columns">as in DataTables</a>.</p>
+
+				<p>This example shows how disabling columns counting from the right hand side of the table can be
+				achieved. In this case, the last three columns.</p>
+			</div>
+
+			<table id="example" class="display" cellspacing="0" width="100%">
+				<thead>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</thead>
+
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
+
+				<tbody>
+					<tr>
+						<td>Tiger Nixon</td>
+						<td>System Architect</td>
+						<td>Edinburgh</td>
+						<td>61</td>
+						<td>2011/04/25</td>
+						<td>$320,800</td>
+					</tr>
+					<tr>
+						<td>Garrett Winters</td>
+						<td>Accountant</td>
+						<td>Tokyo</td>
+						<td>63</td>
+						<td>2011/07/25</td>
+						<td>$170,750</td>
+					</tr>
+					<tr>
+						<td>Ashton Cox</td>
+						<td>Junior Technical Author</td>
+						<td>San Francisco</td>
+						<td>66</td>
+						<td>2009/01/12</td>
+						<td>$86,000</td>
+					</tr>
+					<tr>
+						<td>Cedric Kelly</td>
+						<td>Senior Javascript Developer</td>
+						<td>Edinburgh</td>
+						<td>22</td>
+						<td>2012/03/29</td>
+						<td>$433,060</td>
+					</tr>
+					<tr>
+						<td>Airi Satou</td>
+						<td>Accountant</td>
+						<td>Tokyo</td>
+						<td>33</td>
+						<td>2008/11/28</td>
+						<td>$162,700</td>
+					</tr>
+					<tr>
+						<td>Brielle Williamson</td>
+						<td>Integration Specialist</td>
+						<td>New York</td>
+						<td>61</td>
+						<td>2012/12/02</td>
+						<td>$372,000</td>
+					</tr>
+					<tr>
+						<td>Herrod Chandler</td>
+						<td>Sales Assistant</td>
+						<td>San Francisco</td>
+						<td>59</td>
+						<td>2012/08/06</td>
+						<td>$137,500</td>
+					</tr>
+					<tr>
+						<td>Rhona Davidson</td>
+						<td>Integration Specialist</td>
+						<td>Tokyo</td>
+						<td>55</td>
+						<td>2010/10/14</td>
+						<td>$327,900</td>
+					</tr>
+					<tr>
+						<td>Colleen Hurst</td>
+						<td>Javascript Developer</td>
+						<td>San Francisco</td>
+						<td>39</td>
+						<td>2009/09/15</td>
+						<td>$205,500</td>
+					</tr>
+					<tr>
+						<td>Sonya Frost</td>
+						<td>Software Engineer</td>
+						<td>Edinburgh</td>
+						<td>23</td>
+						<td>2008/12/13</td>
+						<td>$103,600</td>
+					</tr>
+					<tr>
+						<td>Jena Gaines</td>
+						<td>Office Manager</td>
+						<td>London</td>
+						<td>30</td>
+						<td>2008/12/19</td>
+						<td>$90,560</td>
+					</tr>
+					<tr>
+						<td>Quinn Flynn</td>
+						<td>Support Lead</td>
+						<td>Edinburgh</td>
+						<td>22</td>
+						<td>2013/03/03</td>
+						<td>$342,000</td>
+					</tr>
+					<tr>
+						<td>Charde Marshall</td>
+						<td>Regional Director</td>
+						<td>San Francisco</td>
+						<td>36</td>
+						<td>2008/10/16</td>
+						<td>$470,600</td>
+					</tr>
+					<tr>
+						<td>Haley Kennedy</td>
+						<td>Senior Marketing Designer</td>
+						<td>London</td>
+						<td>43</td>
+						<td>2012/12/18</td>
+						<td>$313,500</td>
+					</tr>
+					<tr>
+						<td>Tatyana Fitzpatrick</td>
+						<td>Regional Director</td>
+						<td>London</td>
+						<td>19</td>
+						<td>2010/03/17</td>
+						<td>$385,750</td>
+					</tr>
+					<tr>
+						<td>Michael Silva</td>
+						<td>Marketing Designer</td>
+						<td>London</td>
+						<td>66</td>
+						<td>2012/11/27</td>
+						<td>$198,500</td>
+					</tr>
+					<tr>
+						<td>Paul Byrd</td>
+						<td>Chief Financial Officer (CFO)</td>
+						<td>New York</td>
+						<td>64</td>
+						<td>2010/06/09</td>
+						<td>$725,000</td>
+					</tr>
+					<tr>
+						<td>Gloria Little</td>
+						<td>Systems Administrator</td>
+						<td>New York</td>
+						<td>59</td>
+						<td>2009/04/10</td>
+						<td>$237,500</td>
+					</tr>
+					<tr>
+						<td>Bradley Greer</td>
+						<td>Software Engineer</td>
+						<td>London</td>
+						<td>41</td>
+						<td>2012/10/13</td>
+						<td>$132,000</td>
+					</tr>
+					<tr>
+						<td>Dai Rios</td>
+						<td>Personnel Lead</td>
+						<td>Edinburgh</td>
+						<td>35</td>
+						<td>2012/09/26</td>
+						<td>$217,500</td>
+					</tr>
+					<tr>
+						<td>Jenette Caldwell</td>
+						<td>Development Lead</td>
+						<td>New York</td>
+						<td>30</td>
+						<td>2011/09/03</td>
+						<td>$345,000</td>
+					</tr>
+					<tr>
+						<td>Yuri Berry</td>
+						<td>Chief Marketing Officer (CMO)</td>
+						<td>New York</td>
+						<td>40</td>
+						<td>2009/06/25</td>
+						<td>$675,000</td>
+					</tr>
+					<tr>
+						<td>Caesar Vance</td>
+						<td>Pre-Sales Support</td>
+						<td>New York</td>
+						<td>21</td>
+						<td>2011/12/12</td>
+						<td>$106,450</td>
+					</tr>
+					<tr>
+						<td>Doris Wilder</td>
+						<td>Sales Assistant</td>
+						<td>Sidney</td>
+						<td>23</td>
+						<td>2010/09/20</td>
+						<td>$85,600</td>
+					</tr>
+					<tr>
+						<td>Angelica Ramos</td>
+						<td>Chief Executive Officer (CEO)</td>
+						<td>London</td>
+						<td>47</td>
+						<td>2009/10/09</td>
+						<td>$1,200,000</td>
+					</tr>
+					<tr>
+						<td>Gavin Joyce</td>
+						<td>Developer</td>
+						<td>Edinburgh</td>
+						<td>42</td>
+						<td>2010/12/22</td>
+						<td>$92,575</td>
+					</tr>
+					<tr>
+						<td>Jennifer Chang</td>
+						<td>Regional Director</td>
+						<td>Singapore</td>
+						<td>28</td>
+						<td>2010/11/14</td>
+						<td>$357,650</td>
+					</tr>
+					<tr>
+						<td>Brenden Wagner</td>
+						<td>Software Engineer</td>
+						<td>San Francisco</td>
+						<td>28</td>
+						<td>2011/06/07</td>
+						<td>$206,850</td>
+					</tr>
+					<tr>
+						<td>Fiona Green</td>
+						<td>Chief Operating Officer (COO)</td>
+						<td>San Francisco</td>
+						<td>48</td>
+						<td>2010/03/11</td>
+						<td>$850,000</td>
+					</tr>
+					<tr>
+						<td>Shou Itou</td>
+						<td>Regional Marketing</td>
+						<td>Tokyo</td>
+						<td>20</td>
+						<td>2011/08/14</td>
+						<td>$163,000</td>
+					</tr>
+					<tr>
+						<td>Michelle House</td>
+						<td>Integration Specialist</td>
+						<td>Sidney</td>
+						<td>37</td>
+						<td>2011/06/02</td>
+						<td>$95,400</td>
+					</tr>
+					<tr>
+						<td>Suki Burks</td>
+						<td>Developer</td>
+						<td>London</td>
+						<td>53</td>
+						<td>2009/10/22</td>
+						<td>$114,500</td>
+					</tr>
+					<tr>
+						<td>Prescott Bartlett</td>
+						<td>Technical Author</td>
+						<td>London</td>
+						<td>27</td>
+						<td>2011/05/07</td>
+						<td>$145,000</td>
+					</tr>
+					<tr>
+						<td>Gavin Cortez</td>
+						<td>Team Leader</td>
+						<td>San Francisco</td>
+						<td>22</td>
+						<td>2008/10/26</td>
+						<td>$235,500</td>
+					</tr>
+					<tr>
+						<td>Martena Mccray</td>
+						<td>Post-Sales support</td>
+						<td>Edinburgh</td>
+						<td>46</td>
+						<td>2011/03/09</td>
+						<td>$324,050</td>
+					</tr>
+					<tr>
+						<td>Unity Butler</td>
+						<td>Marketing Designer</td>
+						<td>San Francisco</td>
+						<td>47</td>
+						<td>2009/12/09</td>
+						<td>$85,675</td>
+					</tr>
+					<tr>
+						<td>Howard Hatfield</td>
+						<td>Office Manager</td>
+						<td>San Francisco</td>
+						<td>51</td>
+						<td>2008/12/16</td>
+						<td>$164,500</td>
+					</tr>
+					<tr>
+						<td>Hope Fuentes</td>
+						<td>Secretary</td>
+						<td>San Francisco</td>
+						<td>41</td>
+						<td>2010/02/12</td>
+						<td>$109,850</td>
+					</tr>
+					<tr>
+						<td>Vivian Harrell</td>
+						<td>Financial Controller</td>
+						<td>San Francisco</td>
+						<td>62</td>
+						<td>2009/02/14</td>
+						<td>$452,500</td>
+					</tr>
+					<tr>
+						<td>Timothy Mooney</td>
+						<td>Office Manager</td>
+						<td>London</td>
+						<td>37</td>
+						<td>2008/12/11</td>
+						<td>$136,200</td>
+					</tr>
+					<tr>
+						<td>Jackson Bradshaw</td>
+						<td>Director</td>
+						<td>New York</td>
+						<td>65</td>
+						<td>2008/09/26</td>
+						<td>$645,750</td>
+					</tr>
+					<tr>
+						<td>Olivia Liang</td>
+						<td>Support Engineer</td>
+						<td>Singapore</td>
+						<td>64</td>
+						<td>2011/02/03</td>
+						<td>$234,500</td>
+					</tr>
+					<tr>
+						<td>Bruno Nash</td>
+						<td>Software Engineer</td>
+						<td>London</td>
+						<td>38</td>
+						<td>2011/05/03</td>
+						<td>$163,500</td>
+					</tr>
+					<tr>
+						<td>Sakura Yamamoto</td>
+						<td>Support Engineer</td>
+						<td>Tokyo</td>
+						<td>37</td>
+						<td>2009/08/19</td>
+						<td>$139,575</td>
+					</tr>
+					<tr>
+						<td>Thor Walton</td>
+						<td>Developer</td>
+						<td>New York</td>
+						<td>61</td>
+						<td>2013/08/11</td>
+						<td>$98,540</td>
+					</tr>
+					<tr>
+						<td>Finn Camacho</td>
+						<td>Support Engineer</td>
+						<td>San Francisco</td>
+						<td>47</td>
+						<td>2009/07/07</td>
+						<td>$87,500</td>
+					</tr>
+					<tr>
+						<td>Serge Baldwin</td>
+						<td>Data Coordinator</td>
+						<td>Singapore</td>
+						<td>64</td>
+						<td>2012/04/09</td>
+						<td>$138,575</td>
+					</tr>
+					<tr>
+						<td>Zenaida Frank</td>
+						<td>Software Engineer</td>
+						<td>New York</td>
+						<td>63</td>
+						<td>2010/01/04</td>
+						<td>$125,250</td>
+					</tr>
+					<tr>
+						<td>Zorita Serrano</td>
+						<td>Software Engineer</td>
+						<td>San Francisco</td>
+						<td>56</td>
+						<td>2012/06/01</td>
+						<td>$115,000</td>
+					</tr>
+					<tr>
+						<td>Jennifer Acosta</td>
+						<td>Junior Javascript Developer</td>
+						<td>Edinburgh</td>
+						<td>43</td>
+						<td>2013/02/01</td>
+						<td>$75,650</td>
+					</tr>
+					<tr>
+						<td>Cara Stevens</td>
+						<td>Sales Assistant</td>
+						<td>New York</td>
+						<td>46</td>
+						<td>2011/12/06</td>
+						<td>$145,600</td>
+					</tr>
+					<tr>
+						<td>Hermione Butler</td>
+						<td>Regional Director</td>
+						<td>London</td>
+						<td>47</td>
+						<td>2011/03/21</td>
+						<td>$356,250</td>
+					</tr>
+					<tr>
+						<td>Lael Greer</td>
+						<td>Systems Administrator</td>
+						<td>London</td>
+						<td>21</td>
+						<td>2009/02/27</td>
+						<td>$103,500</td>
+					</tr>
+					<tr>
+						<td>Jonas Alexander</td>
+						<td>Developer</td>
+						<td>San Francisco</td>
+						<td>30</td>
+						<td>2010/07/14</td>
+						<td>$86,500</td>
+					</tr>
+					<tr>
+						<td>Shad Decker</td>
+						<td>Regional Director</td>
+						<td>Edinburgh</td>
+						<td>51</td>
+						<td>2008/11/13</td>
+						<td>$183,000</td>
+					</tr>
+					<tr>
+						<td>Michael Bruce</td>
+						<td>Javascript Developer</td>
+						<td>Singapore</td>
+						<td>29</td>
+						<td>2011/06/27</td>
+						<td>$183,000</td>
+					</tr>
+					<tr>
+						<td>Donna Snider</td>
+						<td>Customer Support</td>
+						<td>New York</td>
+						<td>27</td>
+						<td>2011/01/25</td>
+						<td>$112,000</td>
+					</tr>
+				</tbody>
+			</table>
+
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this
+					example:</p><code class="multiline brush: js;">$(document).ready(function() {
+	var table = $('#example').dataTable();
+
+	new $.fn.dataTable.AutoFill( table, {
+		&quot;columnDefs&quot;: [
+			{ enable:    false, targets: [-1, -2] },
+			{ increment: false, targets: 3 }
+		]
+	} );
+} );</code>
+
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this
+					example:</p>
+
+					<ul>
+						<li><a href="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
+						<li><a href=
+						"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
+						<li><a href="../js/dataTables.autoFill.js">../js/dataTables.autoFill.js</a></li>
+					</ul>
+				</div>
+
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
+					DataTables:</p>
+				</div>
+
+				<div class="css">
+					<div>
+						<p>This example uses a little bit of additional CSS beyond what is loaded from the library
+						files (below), in order to correctly display the table. The additional CSS used is shown
+						below:</p><code class="multiline brush: js;"></code>
+					</div>
+
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the
+					table:</p>
+
+					<ul>
+						<li><a href=
+						"../../../media/css/jquery.dataTables.css">../../../media/css/jquery.dataTables.css</a></li>
+						<li><a href="../css/dataTables.autoFill.css">../css/dataTables.autoFill.css</a></li>
+					</ul>
+				</div>
+
+				<div class="ajax">
+					<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
+					will update automatically as any additional data is loaded.</p>
+				</div>
+
+				<div class="php">
+					<p>The script used to perform the server-side processing for this table is shown below. Please note
+					that this is just an example script using PHP. Server-side processing scripts can be written in any
+					language, using <a href="//datatables.net/manual/server-side">the protocol described in the
+					DataTables documentation</a>.</p>
+				</div>
+			</div>
+		</section>
+	</div>
+
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+
+			<div class="liner">
+				<h2>Other examples</h2>
+
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="./index.html">Examples</a></h3>
+						<ul class="toc active">
+							<li><a href="./simple.html">Basic initialisation</a></li>
+							<li class="active"><a href="./columns.html">Column options</a></li>
+							<li><a href="./scrolling.html">Scrolling DataTable</a></li>
+							<li><a href="./fill-both.html">Horizontal and vertical fill</a></li>
+							<li><a href="./fill-horizontal.html">Horizontal fill</a></li>
+							<li><a href="./complete-callback.html">Complete callback</a></li>
+							<li><a href="./step-callback.html">Step callback</a></li>
+						</ul>
+					</div>
+				</div>
+
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
+					information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
+					<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
+					DataTables.</p>
+
+					<p class="copyright">DataTables designed and created by <a href=
+					"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

static/js/plugins/datatables/extensions/AutoFill/examples/complete-callback.html

@@ -0,0 +1,652 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
+
+	<title>AutoFill example - Complete callback</title>
+	<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
+	<link rel="stylesheet" type="text/css" href="../css/dataTables.autoFill.css">
+	<link rel="stylesheet" type="text/css" href="../../../examples/resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../../../examples/resources/demo.css">
+	<style type="text/css" class="init">
+
+	</style>
+	<script type="text/javascript" language="javascript" src="../../../media/js/jquery.js"></script>
+	<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
+	<script type="text/javascript" language="javascript" src="../js/dataTables.autoFill.js"></script>
+	<script type="text/javascript" language="javascript" src="../../../examples/resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../../../examples/resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+
+
+$(document).ready(function() {
+	var table = $('#example').dataTable();
+
+	new $.fn.dataTable.AutoFill( table, {
+		complete: function ( altered ) {
+			var last = altered[ altered.length-1 ];
+			alert( 
+				altered.length+' cells were altered in this auto-fill. The '+
+				'value of the last cell altered was: '+last.oldValue+' and is '+
+				'now '+last.newValue
+			);
+		}
+	} );
+} );
+
+
+	</script>
+</head>
+
+<body class="dt-example">
+	<div class="container">
+		<section>
+			<h1>AutoFill example <span>Complete callback</span></h1>
+
+			<div class="info">
+				<p>AutoFill provides a number of customisable callback functions so you can tailor it's actions to
+				exactly what you need. This example shows the use of the <code>complete</code> callback function which
+				is executed at the end of an auto-fill drag, providing information about the cells that were
+				altered.</p>
+
+				<p>For a complete description of the <code>complete</code> callback, please refer to the <a href=
+				"//datatables.net/extras/autofill/options">AutoFill documentation</a>.</p>
+			</div>
+
+			<table id="example" class="display" cellspacing="0" width="100%">
+				<thead>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</thead>
+
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
+
+				<tbody>
+					<tr>
+						<td>Tiger Nixon</td>
+						<td>System Architect</td>
+						<td>Edinburgh</td>
+						<td>61</td>
+						<td>2011/04/25</td>
+						<td>$320,800</td>
+					</tr>
+					<tr>
+						<td>Garrett Winters</td>
+						<td>Accountant</td>
+						<td>Tokyo</td>
+						<td>63</td>
+						<td>2011/07/25</td>
+						<td>$170,750</td>
+					</tr>
+					<tr>
+						<td>Ashton Cox</td>
+						<td>Junior Technical Author</td>
+						<td>San Francisco</td>
+						<td>66</td>
+						<td>2009/01/12</td>
+						<td>$86,000</td>
+					</tr>
+					<tr>
+						<td>Cedric Kelly</td>
+						<td>Senior Javascript Developer</td>
+						<td>Edinburgh</td>
+						<td>22</td>
+						<td>2012/03/29</td>
+						<td>$433,060</td>
+					</tr>
+					<tr>
+						<td>Airi Satou</td>
+						<td>Accountant</td>
+						<td>Tokyo</td>
+						<td>33</td>
+						<td>2008/11/28</td>
+						<td>$162,700</td>
+					</tr>
+					<tr>
+						<td>Brielle Williamson</td>
+						<td>Integration Specialist</td>
+						<td>New York</td>
+						<td>61</td>
+						<td>2012/12/02</td>
+						<td>$372,000</td>
+					</tr>
+					<tr>
+						<td>Herrod Chandler</td>
+						<td>Sales Assistant</td>
+						<td>San Francisco</td>
+						<td>59</td>
+						<td>2012/08/06</td>
+						<td>$137,500</td>
+					</tr>
+					<tr>
+						<td>Rhona Davidson</td>
+						<td>Integration Specialist</td>
+						<td>Tokyo</td>
+						<td>55</td>
+						<td>2010/10/14</td>
+						<td>$327,900</td>
+					</tr>
+					<tr>
+						<td>Colleen Hurst</td>
+						<td>Javascript Developer</td>
+						<td>San Francisco</td>
+						<td>39</td>
+						<td>2009/09/15</td>
+						<td>$205,500</td>
+					</tr>
+					<tr>
+						<td>Sonya Frost</td>
+						<td>Software Engineer</td>
+						<td>Edinburgh</td>
+						<td>23</td>
+						<td>2008/12/13</td>
+						<td>$103,600</td>
+					</tr>
+					<tr>
+						<td>Jena Gaines</td>
+						<td>Office Manager</td>
+						<td>London</td>
+						<td>30</td>
+						<td>2008/12/19</td>
+						<td>$90,560</td>
+					</tr>
+					<tr>
+						<td>Quinn Flynn</td>
+						<td>Support Lead</td>
+						<td>Edinburgh</td>
+						<td>22</td>
+						<td>2013/03/03</td>
+						<td>$342,000</td>
+					</tr>
+					<tr>
+						<td>Charde Marshall</td>
+						<td>Regional Director</td>
+						<td>San Francisco</td>
+						<td>36</td>
+						<td>2008/10/16</td>
+						<td>$470,600</td>
+					</tr>
+					<tr>
+						<td>Haley Kennedy</td>
+						<td>Senior Marketing Designer</td>
+						<td>London</td>
+						<td>43</td>
+						<td>2012/12/18</td>
+						<td>$313,500</td>
+					</tr>
+					<tr>
+						<td>Tatyana Fitzpatrick</td>
+						<td>Regional Director</td>
+						<td>London</td>
+						<td>19</td>
+						<td>2010/03/17</td>
+						<td>$385,750</td>
+					</tr>
+					<tr>
+						<td>Michael Silva</td>
+						<td>Marketing Designer</td>
+						<td>London</td>
+						<td>66</td>
+						<td>2012/11/27</td>
+						<td>$198,500</td>
+					</tr>
+					<tr>
+						<td>Paul Byrd</td>
+						<td>Chief Financial Officer (CFO)</td>
+						<td>New York</td>
+						<td>64</td>
+						<td>2010/06/09</td>
+						<td>$725,000</td>
+					</tr>
+					<tr>
+						<td>Gloria Little</td>
+						<td>Systems Administrator</td>
+						<td>New York</td>
+						<td>59</td>
+						<td>2009/04/10</td>
+						<td>$237,500</td>
+					</tr>
+					<tr>
+						<td>Bradley Greer</td>
+						<td>Software Engineer</td>
+						<td>London</td>
+						<td>41</td>
+						<td>2012/10/13</td>
+						<td>$132,000</td>
+					</tr>
+					<tr>
+						<td>Dai Rios</td>
+						<td>Personnel Lead</td>
+						<td>Edinburgh</td>
+						<td>35</td>
+						<td>2012/09/26</td>
+						<td>$217,500</td>
+					</tr>
+					<tr>
+						<td>Jenette Caldwell</td>
+						<td>Development Lead</td>
+						<td>New York</td>
+						<td>30</td>
+						<td>2011/09/03</td>
+						<td>$345,000</td>
+					</tr>
+					<tr>
+						<td>Yuri Berry</td>
+						<td>Chief Marketing Officer (CMO)</td>
+						<td>New York</td>
+						<td>40</td>
+						<td>2009/06/25</td>
+						<td>$675,000</td>
+					</tr>
+					<tr>
+						<td>Caesar Vance</td>
+						<td>Pre-Sales Support</td>
+						<td>New York</td>
+						<td>21</td>
+						<td>2011/12/12</td>
+						<td>$106,450</td>
+					</tr>
+					<tr>
+						<td>Doris Wilder</td>
+						<td>Sales Assistant</td>
+						<td>Sidney</td>
+						<td>23</td>
+						<td>2010/09/20</td>
+						<td>$85,600</td>
+					</tr>
+					<tr>
+						<td>Angelica Ramos</td>
+						<td>Chief Executive Officer (CEO)</td>
+						<td>London</td>
+						<td>47</td>
+						<td>2009/10/09</td>
+						<td>$1,200,000</td>
+					</tr>
+					<tr>
+						<td>Gavin Joyce</td>
+						<td>Developer</td>
+						<td>Edinburgh</td>
+						<td>42</td>
+						<td>2010/12/22</td>
+						<td>$92,575</td>
+					</tr>
+					<tr>
+						<td>Jennifer Chang</td>
+						<td>Regional Director</td>
+						<td>Singapore</td>
+						<td>28</td>
+						<td>2010/11/14</td>
+						<td>$357,650</td>
+					</tr>
+					<tr>
+						<td>Brenden Wagner</td>
+						<td>Software Engineer</td>
+						<td>San Francisco</td>
+						<td>28</td>
+						<td>2011/06/07</td>
+						<td>$206,850</td>
+					</tr>
+					<tr>
+						<td>Fiona Green</td>
+						<td>Chief Operating Officer (COO)</td>
+						<td>San Francisco</td>
+						<td>48</td>
+						<td>2010/03/11</td>
+						<td>$850,000</td>
+					</tr>
+					<tr>
+						<td>Shou Itou</td>
+						<td>Regional Marketing</td>
+						<td>Tokyo</td>
+						<td>20</td>
+						<td>2011/08/14</td>
+						<td>$163,000</td>
+					</tr>
+					<tr>
+						<td>Michelle House</td>
+						<td>Integration Specialist</td>
+						<td>Sidney</td>
+						<td>37</td>
+						<td>2011/06/02</td>
+						<td>$95,400</td>
+					</tr>
+					<tr>
+						<td>Suki Burks</td>
+						<td>Developer</td>
+						<td>London</td>
+						<td>53</td>
+						<td>2009/10/22</td>
+						<td>$114,500</td>
+					</tr>
+					<tr>
+						<td>Prescott Bartlett</td>
+						<td>Technical Author</td>
+						<td>London</td>
+						<td>27</td>
+						<td>2011/05/07</td>
+						<td>$145,000</td>
+					</tr>
+					<tr>
+						<td>Gavin Cortez</td>
+						<td>Team Leader</td>
+						<td>San Francisco</td>
+						<td>22</td>
+						<td>2008/10/26</td>
+						<td>$235,500</td>
+					</tr>
+					<tr>
+						<td>Martena Mccray</td>
+						<td>Post-Sales support</td>
+						<td>Edinburgh</td>
+						<td>46</td>
+						<td>2011/03/09</td>
+						<td>$324,050</td>
+					</tr>
+					<tr>
+						<td>Unity Butler</td>
+						<td>Marketing Designer</td>
+						<td>San Francisco</td>
+						<td>47</td>
+						<td>2009/12/09</td>
+						<td>$85,675</td>
+					</tr>
+					<tr>
+						<td>Howard Hatfield</td>
+						<td>Office Manager</td>
+						<td>San Francisco</td>
+						<td>51</td>
+						<td>2008/12/16</td>
+						<td>$164,500</td>
+					</tr>
+					<tr>
+						<td>Hope Fuentes</td>
+						<td>Secretary</td>
+						<td>San Francisco</td>
+						<td>41</td>
+						<td>2010/02/12</td>
+						<td>$109,850</td>
+					</tr>
+					<tr>
+						<td>Vivian Harrell</td>
+						<td>Financial Controller</td>
+						<td>San Francisco</td>
+						<td>62</td>
+						<td>2009/02/14</td>
+						<td>$452,500</td>
+					</tr>
+					<tr>
+						<td>Timothy Mooney</td>
+						<td>Office Manager</td>
+						<td>London</td>
+						<td>37</td>
+						<td>2008/12/11</td>
+						<td>$136,200</td>
+					</tr>
+					<tr>
+						<td>Jackson Bradshaw</td>
+						<td>Director</td>
+						<td>New York</td>
+						<td>65</td>
+						<td>2008/09/26</td>
+						<td>$645,750</td>
+					</tr>
+					<tr>
+						<td>Olivia Liang</td>
+						<td>Support Engineer</td>
+						<td>Singapore</td>
+						<td>64</td>
+						<td>2011/02/03</td>
+						<td>$234,500</td>
+					</tr>
+					<tr>
+						<td>Bruno Nash</td>
+						<td>Software Engineer</td>
+						<td>London</td>
+						<td>38</td>
+						<td>2011/05/03</td>
+						<td>$163,500</td>
+					</tr>
+					<tr>
+						<td>Sakura Yamamoto</td>
+						<td>Support Engineer</td>
+						<td>Tokyo</td>
+						<td>37</td>
+						<td>2009/08/19</td>
+						<td>$139,575</td>
+					</tr>
+					<tr>
+						<td>Thor Walton</td>
+						<td>Developer</td>
+						<td>New York</td>
+						<td>61</td>
+						<td>2013/08/11</td>
+						<td>$98,540</td>
+					</tr>
+					<tr>
+						<td>Finn Camacho</td>
+						<td>Support Engineer</td>
+						<td>San Francisco</td>
+						<td>47</td>
+						<td>2009/07/07</td>
+						<td>$87,500</td>
+					</tr>
+					<tr>
+						<td>Serge Baldwin</td>
+						<td>Data Coordinator</td>
+						<td>Singapore</td>
+						<td>64</td>
+						<td>2012/04/09</td>
+						<td>$138,575</td>
+					</tr>
+					<tr>
+						<td>Zenaida Frank</td>
+						<td>Software Engineer</td>
+						<td>New York</td>
+						<td>63</td>
+						<td>2010/01/04</td>
+						<td>$125,250</td>
+					</tr>
+					<tr>
+						<td>Zorita Serrano</td>
+						<td>Software Engineer</td>
+						<td>San Francisco</td>
+						<td>56</td>
+						<td>2012/06/01</td>
+						<td>$115,000</td>
+					</tr>
+					<tr>
+						<td>Jennifer Acosta</td>
+						<td>Junior Javascript Developer</td>
+						<td>Edinburgh</td>
+						<td>43</td>
+						<td>2013/02/01</td>
+						<td>$75,650</td>
+					</tr>
+					<tr>
+						<td>Cara Stevens</td>
+						<td>Sales Assistant</td>
+						<td>New York</td>
+						<td>46</td>
+						<td>2011/12/06</td>
+						<td>$145,600</td>
+					</tr>
+					<tr>
+						<td>Hermione Butler</td>
+						<td>Regional Director</td>
+						<td>London</td>
+						<td>47</td>
+						<td>2011/03/21</td>
+						<td>$356,250</td>
+					</tr>
+					<tr>
+						<td>Lael Greer</td>
+						<td>Systems Administrator</td>
+						<td>London</td>
+						<td>21</td>
+						<td>2009/02/27</td>
+						<td>$103,500</td>
+					</tr>
+					<tr>
+						<td>Jonas Alexander</td>
+						<td>Developer</td>
+						<td>San Francisco</td>
+						<td>30</td>
+						<td>2010/07/14</td>
+						<td>$86,500</td>
+					</tr>
+					<tr>
+						<td>Shad Decker</td>
+						<td>Regional Director</td>
+						<td>Edinburgh</td>
+						<td>51</td>
+						<td>2008/11/13</td>
+						<td>$183,000</td>
+					</tr>
+					<tr>
+						<td>Michael Bruce</td>
+						<td>Javascript Developer</td>
+						<td>Singapore</td>
+						<td>29</td>
+						<td>2011/06/27</td>
+						<td>$183,000</td>
+					</tr>
+					<tr>
+						<td>Donna Snider</td>
+						<td>Customer Support</td>
+						<td>New York</td>
+						<td>27</td>
+						<td>2011/01/25</td>
+						<td>$112,000</td>
+					</tr>
+				</tbody>
+			</table>
+
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this
+					example:</p><code class="multiline brush: js;">$(document).ready(function() {
+	var table = $('#example').dataTable();
+
+	new $.fn.dataTable.AutoFill( table, {
+		complete: function ( altered ) {
+			var last = altered[ altered.length-1 ];
+			alert( 
+				altered.length+' cells were altered in this auto-fill. The '+
+				'value of the last cell altered was: '+last.oldValue+' and is '+
+				'now '+last.newValue
+			);
+		}
+	} );
+} );</code>
+
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this
+					example:</p>
+
+					<ul>
+						<li><a href="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
+						<li><a href=
+						"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
+						<li><a href="../js/dataTables.autoFill.js">../js/dataTables.autoFill.js</a></li>
+					</ul>
+				</div>
+
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
+					DataTables:</p>
+				</div>
+
+				<div class="css">
+					<div>
+						<p>This example uses a little bit of additional CSS beyond what is loaded from the library
+						files (below), in order to correctly display the table. The additional CSS used is shown
+						below:</p><code class="multiline brush: js;"></code>
+					</div>
+
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the
+					table:</p>
+
+					<ul>
+						<li><a href=
+						"../../../media/css/jquery.dataTables.css">../../../media/css/jquery.dataTables.css</a></li>
+						<li><a href="../css/dataTables.autoFill.css">../css/dataTables.autoFill.css</a></li>
+					</ul>
+				</div>
+
+				<div class="ajax">
+					<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
+					will update automatically as any additional data is loaded.</p>
+				</div>
+
+				<div class="php">
+					<p>The script used to perform the server-side processing for this table is shown below. Please note
+					that this is just an example script using PHP. Server-side processing scripts can be written in any
+					language, using <a href="//datatables.net/manual/server-side">the protocol described in the
+					DataTables documentation</a>.</p>
+				</div>
+			</div>
+		</section>
+	</div>
+
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+
+			<div class="liner">
+				<h2>Other examples</h2>
+
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="./index.html">Examples</a></h3>
+						<ul class="toc active">
+							<li><a href="./simple.html">Basic initialisation</a></li>
+							<li><a href="./columns.html">Column options</a></li>
+							<li><a href="./scrolling.html">Scrolling DataTable</a></li>
+							<li><a href="./fill-both.html">Horizontal and vertical fill</a></li>
+							<li><a href="./fill-horizontal.html">Horizontal fill</a></li>
+							<li class="active"><a href="./complete-callback.html">Complete callback</a></li>
+							<li><a href="./step-callback.html">Step callback</a></li>
+						</ul>
+					</div>
+				</div>
+
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
+					information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
+					<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
+					DataTables.</p>
+
+					<p class="copyright">DataTables designed and created by <a href=
+					"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

static/js/plugins/datatables/extensions/AutoFill/examples/fill-both.html

@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
+
+	<title>AutoFill example - Horizontal and vertical fill</title>
+	<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
+	<link rel="stylesheet" type="text/css" href="../css/dataTables.autoFill.css">
+	<link rel="stylesheet" type="text/css" href="../../../examples/resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../../../examples/resources/demo.css">
+	<style type="text/css" class="init">
+
+	</style>
+	<script type="text/javascript" language="javascript" src="../../../media/js/jquery.js"></script>
+	<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
+	<script type="text/javascript" language="javascript" src="../js/dataTables.autoFill.js"></script>
+	<script type="text/javascript" language="javascript" src="../../../examples/resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../../../examples/resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+
+
+$(document).ready(function() {
+	var table = $('#example').DataTable();
+
+	new $.fn.dataTable.AutoFill( table, {
+		mode: 'both'
+	} );
+} );
+
+
+	</script>
+</head>
+
+<body class="dt-example">
+	<div class="container">
+		<section>
+			<h1>AutoFill example <span>Horizontal and vertical fill</span></h1>
+
+			<div class="info">
+				<p>By default AutoFill will allow the fill to operate only on a single column at a time (i.e.
+				vertically). However, it has the ability to provide the fill either horizontally, over both axis or
+				limited to just one axis depending on the direction of the drag. This option is provided by the
+				<code>mode</code> sanitisation option.</p>
+
+				<p>In this case it is set to <code>both</code> (i.e. both horizontal and vertical axis) to provide the
+				filler along a row, rather than a column.</p>
+
+				<p>For the full range of options and syntax for <code>mode</code> please refer to the <a href=
+				"//datatables.net/extras/autofill/options">AutoFill documentation</a>.</p>
+			</div>
+
+			<table id="example" class="display" cellspacing="0" width="100%">
+				<thead>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</thead>
+
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
+
+				<tbody>
+					<tr>
+						<td>Tiger Nixon</td>
+						<td>System Architect</td>
+						<td>Edinburgh</td>
+						<td>61</td>
+						<td>2011/04/25</td>
+						<td>$320,800</td>
+					</tr>
+					<tr>
+						<td>Garrett Winters</td>
+						<td>Accountant</td>
+						<td>Tokyo</td>
+						<td>63</td>
+						<td>2011/07/25</td>
+						<td>$170,750</td>
+					</tr>
+					<tr>
+						<td>Ashton Cox</td>
+						<td>Junior Technical Author</td>
+						<td>San Francisco</td>
+						<td>66</td>
+						<td>2009/01/12</td>
+						<td>$86,000</td>
+					</tr>
+					<tr>
+						<td>Cedric Kelly</td>
+						<td>Senior Javascript Developer</td>
+						<td>Edinburgh</td>
+						<td>22</td>
+						<td>2012/03/29</td>
+						<td>$433,060</td>
+					</tr>
+					<tr>
+						<td>Airi Satou</td>
+						<td>Accountant</td>
+						<td>Tokyo</td>
+						<td>33</td>
+						<td>2008/11/28</td>
+						<td>$162,700</td>
+					</tr>
+					<tr>
+						<td>Brielle Williamson</td>
+						<td>Integration Specialist</td>
+						<td>New York</td>
+						<td>61</td>
+						<td>2012/12/02</td>
+						<td>$372,000</td>
+					</tr>
+					<tr>
+						<td>Herrod Chandler</td>
+						<td>Sales Assistant</td>
+						<td>San Francisco</td>
+						<td>59</td>
+						<td>2012/08/06</td>
+						<td>$137,500</td>
+					</tr>
+					<tr>
+						<td>Rhona Davidson</td>
+						<td>Integration Specialist</td>
+						<td>Tokyo</td>
+						<td>55</td>
+						<td>2010/10/14</td>
+						<td>$327,900</td>
+					</tr>
+					<tr>
+						<td>Colleen Hurst</td>
+						<td>Javascript Developer</td>
+						<td>San Francisco</td>
+						<td>39</td>
+						<td>2009/09/15</td>
+						<td>$205,500</td>
+					</tr>
+					<tr>
+						<td>Sonya Frost</td>
+						<td>Software Engineer</td>
+						<td>Edinburgh</td>
+						<td>23</td>
+						<td>2008/12/13</td>
+						<td>$103,600</td>
+					</tr>
+					<tr>
+						<td>Jena Gaines</td>
+						<td>Office Manager</td>
+						<td>London</td>
+						<td>30</td>
+						<td>2008/12/19</td>
+						<td>$90,560</td>
+					</tr>
+					<tr>
+						<td>Quinn Flynn</td>
+						<td>Support Lead</td>
+						<td>Edinburgh</td>
+						<td>22</td>
+						<td>2013/03/03</td>
+						<td>$342,000</td>
+					</tr>
+					<tr>
+						<td>Charde Marshall</td>
+						<td>Regional Director</td>
+						<td>San Francisco</td>
+						<td>36</td>
+						<td>2008/10/16</td>
+						<td>$470,600</td>
+					</tr>
+					<tr>
+						<td>Haley Kennedy</td>
+						<td>Senior Marketing Designer</td>
+						<td>London</td>
+						<td>43</td>
+						<td>2012/12/18</td>
+						<td>$313,500</td>
+					</tr>
+					<tr>
+						<td>Tatyana Fitzpatrick</td>
+						<td>Regional Director</td>
+						<td>London</td>
+						<td>19</td>
+						<td>2010/03/17</td>
+						<td>$385,750</td>
+					</tr>
+					<tr>
+						<td>Michael Silva</td>
+						<td>Marketing Designer</td>
+						<td>London</td>
+						<td>66</td>
+						<td>2012/11/27</td>
+						<td>$198,500</td>
+					</tr>
+					<tr>
+						<td>Paul Byrd</td>
+						<td>Chief Financial Officer (CFO)</td>
+						<td>New York</td>
+						<td>64</td>
+						<td>2010/06/09</td>
+						<td>$725,000</td>
+					</tr>
+					<tr>
+						<td>Gloria Little</td>
+						<td>Systems Administrator</td>
+						<td>New York</td>
+						<td>59</td>
+						<td>2009/04/10</td>
+						<td>$237,500</td>
+					</tr>
+					<tr>
+						<td>Bradley Greer</td>
+						<td>Software Engineer</td>
+						<td>London</td>
+						<td>41</td>
+						<td>2012/10/13</td>
+						<td>$132,000</td>
+					</tr>
+					<tr>
+						<td>Dai Rios</td>
+						<td>Personnel Lead</td>
+						<td>Edinburgh</td>
+						<td>35</td>
+						<td>2012/09/26</td>
+						<td>$217,500</td>
+					</tr>
+					<tr>
+						<td>Jenette Caldwell</td>
+						<td>Development Lead</td>
+						<td>New York</td>
+						<td>30</td>
+						<td>2011/09/03</td>
+						<td>$345,000</td>
+					</tr>
+					<tr>
+						<td>Yuri Berry</td>
+						<td>Chief Marketing Officer (CMO)</td>
+						<td>New York</td>
+						<td>40</td>
+						<td>2009/06/25</td>
+						<td>$675,000</td>
+					</tr>
+					<tr>
+						<td>Caesar Vance</td>
+						<td>Pre-Sales Support</td>
+						<td>New York</td>
+						<td>21</td>
+						<td>2011/12/12</td>
+						<td>$106,450</td>
+					</tr>
+					<tr>
+						<td>Doris Wilder</td>
+						<td>Sales Assistant</td>
+						<td>Sidney</td>
+						<td>23</td>
+						<td>2010/09/20</td>
+						<td>$85,600</td>
+					</tr>
+					<tr>
+						<td>Angelica Ramos</td>
+						<td>Chief Executive Officer (CEO)</td>
+						<td>London</td>
+						<td>47</td>
+						<td>2009/10/09</td>
+						<td>$1,200,000</td>
+					</tr>
+					<tr>
+						<td>Gavin Joyce</td>
+						<td>Developer</td>
+						<td>Edinburgh</td>
+						<td>42</td>
+						<td>2010/12/22</td>
+						<td>$92,575</td>
+					</tr>
+					<tr>
+						<td>Jennifer Chang</td>
+						<td>Regional Director</td>
+						<td>Singapore</td>
+						<td>28</td>
+						<td>2010/11/14</td>
+						<td>$357,650</td>
+					</tr>
+					<tr>
+						<td>Brenden Wagner</td>
+						<td>Software Engineer</td>
+						<td>San Francisco</td>
+						<td>28</td>
+						<td>2011/06/07</td>
+						<td>$206,850</td>
+					</tr>
+					<tr>
+						<td>Fiona Green</td>
+						<td>Chief Operating Officer (COO)</td>
+						<td>San Francisco</td>
+						<td>48</td>
+						<td>2010/03/11</td>
+						<td>$850,000</td>
+					</tr>
+					<tr>
+						<td>Shou Itou</td>
+						<td>Regional Marketing</td>
+						<td>Tokyo</td>
+						<td>20</td>
+						<td>2011/08/14</td>
+						<td>$163,000</td>
+					</tr>
+					<tr>
+						<td>Michelle House</td>
+						<td>Integration Specialist</td>
+						<td>Sidney</td>
+						<td>37</td>
+						<td>2011/06/02</td>
+						<td>$95,400</td>
+					</tr>
+					<tr>
+						<td>Suki Burks</td>
+						<td>Developer</td>
+						<td>London</td>
+						<td>53</td>
+						<td>2009/10/22</td>
+						<td>$114,500</td>
+					</tr>
+					<tr>
+						<td>Prescott Bartlett</td>
+						<td>Technical Author</td>
+						<td>London</td>
+						<td>27</td>
+						<td>2011/05/07</td>
+						<td>$145,000</td>
+					</tr>
+					<tr>
+						<td>Gavin Cortez</td>
+						<td>Team Leader</td>
+						<td>San Francisco</td>
+						<td>22</td>
+						<td>2008/10/26</td>
+						<td>$235,500</td>
+					</tr>
+					<tr>
+						<td>Martena Mccray</td>
+						<td>Post-Sales support</td>
+						<td>Edinburgh</td>
+						<td>46</td>
+						<td>2011/03/09</td>
+						<td>$324,050</td>
+					</tr>
+					<tr>
+						<td>Unity Butler</td>
+						<td>Marketing Designer</td>
+						<td>San Francisco</td>
+						<td>47</td>
+						<td>2009/12/09</td>
+						<td>$85,675</td>
+					</tr>
+					<tr>
+						<td>Howard Hatfield</td>
+						<td>Office Manager</td>
+						<td>San Francisco</td>
+						<td>51</td>
+						<td>2008/12/16</td>
+						<td>$164,500</td>
+					</tr>
+					<tr>
+						<td>Hope Fuentes</td>
+						<td>Secretary</td>
+						<td>San Francisco</td>
+						<td>41</td>
+						<td>2010/02/12</td>
+						<td>$109,850</td>
+					</tr>
+					<tr>
+						<td>Vivian Harrell</td>
+						<td>Financial Controller</td>
+						<td>San Francisco</td>
+						<td>62</td>
+						<td>2009/02/14</td>
+						<td>$452,500</td>
+					</tr>
+					<tr>
+						<td>Timothy Mooney</td>
+						<td>Office Manager</td>
+						<td>London</td>
+						<td>37</td>
+						<td>2008/12/11</td>
+						<td>$136,200</td>
+					</tr>
+					<tr>
+						<td>Jackson Bradshaw</td>
+						<td>Director</td>
+						<td>New York</td>
+						<td>65</td>
+						<td>2008/09/26</td>
+						<td>$645,750</td>
+					</tr>
+					<tr>
+						<td>Olivia Liang</td>
+						<td>Support Engineer</td>
+						<td>Singapore</td>
+						<td>64</td>
+						<td>2011/02/03</td>
+						<td>$234,500</td>
+					</tr>
+					<tr>
+						<td>Bruno Nash</td>
+						<td>Software Engineer</td>
+						<td>London</td>
+						<td>38</td>
+						<td>2011/05/03</td>
+						<td>$163,500</td>
+					</tr>
+					<tr>
+						<td>Sakura Yamamoto</td>
+						<td>Support Engineer</td>
+						<td>Tokyo</td>
+						<td>37</td>
+						<td>2009/08/19</td>
+						<td>$139,575</td>
+					</tr>
+					<tr>
+						<td>Thor Walton</td>
+						<td>Developer</td>
+						<td>New York</td>
+						<td>61</td>
+						<td>2013/08/11</td>
+						<td>$98,540</td>
+					</tr>
+					<tr>
+						<td>Finn Camacho</td>
+						<td>Support Engineer</td>
+						<td>San Francisco</td>
+						<td>47</td>
+						<td>2009/07/07</td>
+						<td>$87,500</td>
+					</tr>
+					<tr>
+						<td>Serge Baldwin</td>
+						<td>Data Coordinator</td>
+						<td>Singapore</td>
+						<td>64</td>
+						<td>2012/04/09</td>
+						<td>$138,575</td>
+					</tr>
+					<tr>
+						<td>Zenaida Frank</td>
+						<td>Software Engineer</td>
+						<td>New York</td>
+						<td>63</td>
+						<td>2010/01/04</td>
+						<td>$125,250</td>
+					</tr>
+					<tr>
+						<td>Zorita Serrano</td>
+						<td>Software Engineer</td>
+						<td>San Francisco</td>
+						<td>56</td>
+						<td>2012/06/01</td>
+						<td>$115,000</td>
+					</tr>
+					<tr>
+						<td>Jennifer Acosta</td>
+						<td>Junior Javascript Developer</td>
+						<td>Edinburgh</td>
+						<td>43</td>
+						<td>2013/02/01</td>
+						<td>$75,650</td>
+					</tr>
+					<tr>
+						<td>Cara Stevens</td>
+						<td>Sales Assistant</td>
+						<td>New York</td>
+						<td>46</td>
+						<td>2011/12/06</td>
+						<td>$145,600</td>
+					</tr>
+					<tr>
+						<td>Hermione Butler</td>
+						<td>Regional Director</td>
+						<td>London</td>
+						<td>47</td>
+						<td>2011/03/21</td>
+						<td>$356,250</td>
+					</tr>
+					<tr>
+						<td>Lael Greer</td>
+						<td>Systems Administrator</td>
+						<td>London</td>
+						<td>21</td>
+						<td>2009/02/27</td>
+						<td>$103,500</td>
+					</tr>
+					<tr>
+						<td>Jonas Alexander</td>
+						<td>Developer</td>
+						<td>San Francisco</td>
+						<td>30</td>
+						<td>2010/07/14</td>
+						<td>$86,500</td>
+					</tr>
+					<tr>
+						<td>Shad Decker</td>
+						<td>Regional Director</td>
+						<td>Edinburgh</td>
+						<td>51</td>
+						<td>2008/11/13</td>
+						<td>$183,000</td>
+					</tr>
+					<tr>
+						<td>Michael Bruce</td>
+						<td>Javascript Developer</td>
+						<td>Singapore</td>
+						<td>29</td>
+						<td>2011/06/27</td>
+						<td>$183,000</td>
+					</tr>
+					<tr>
+						<td>Donna Snider</td>
+						<td>Customer Support</td>
+						<td>New York</td>
+						<td>27</td>
+						<td>2011/01/25</td>
+						<td>$112,000</td>
+					</tr>
+				</tbody>
+			</table>
+
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this
+					example:</p><code class="multiline brush: js;">$(document).ready(function() {
+	var table = $('#example').DataTable();
+
+	new $.fn.dataTable.AutoFill( table, {
+		mode: 'both'
+	} );
+} );</code>
+
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this
+					example:</p>
+
+					<ul>
+						<li><a href="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
+						<li><a href=
+						"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
+						<li><a href="../js/dataTables.autoFill.js">../js/dataTables.autoFill.js</a></li>
+					</ul>
+				</div>
+
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
+					DataTables:</p>
+				</div>
+
+				<div class="css">
+					<div>
+						<p>This example uses a little bit of additional CSS beyond what is loaded from the library
+						files (below), in order to correctly display the table. The additional CSS used is shown
+						below:</p><code class="multiline brush: js;"></code>
+					</div>
+
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the
+					table:</p>
+
+					<ul>
+						<li><a href=
+						"../../../media/css/jquery.dataTables.css">../../../media/css/jquery.dataTables.css</a></li>
+						<li><a href="../css/dataTables.autoFill.css">../css/dataTables.autoFill.css</a></li>
+					</ul>
+				</div>
+
+				<div class="ajax">
+					<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
+					will update automatically as any additional data is loaded.</p>
+				</div>
+
+				<div class="php">
+					<p>The script used to perform the server-side processing for this table is shown below. Please note
+					that this is just an example script using PHP. Server-side processing scripts can be written in any
+					language, using <a href="//datatables.net/manual/server-side">the protocol described in the
+					DataTables documentation</a>.</p>
+				</div>
+			</div>
+		</section>
+	</div>
+
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+
+			<div class="liner">
+				<h2>Other examples</h2>
+
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="./index.html">Examples</a></h3>
+						<ul class="toc active">
+							<li><a href="./simple.html">Basic initialisation</a></li>
+							<li><a href="./columns.html">Column options</a></li>
+							<li><a href="./scrolling.html">Scrolling DataTable</a></li>
+							<li class="active"><a href="./fill-both.html">Horizontal and vertical fill</a></li>
+							<li><a href="./fill-horizontal.html">Horizontal fill</a></li>
+							<li><a href="./complete-callback.html">Complete callback</a></li>
+							<li><a href="./step-callback.html">Step callback</a></li>
+						</ul>
+					</div>
+				</div>
+
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
+					information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
+					<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
+					DataTables.</p>
+
+					<p class="copyright">DataTables designed and created by <a href=
+					"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

static/js/plugins/datatables/extensions/AutoFill/examples/fill-horizontal.html

@@ -0,0 +1,641 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
+
+	<title>AutoFill example - Horizontal fill</title>
+	<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
+	<link rel="stylesheet" type="text/css" href="../css/dataTables.autoFill.css">
+	<link rel="stylesheet" type="text/css" href="../../../examples/resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../../../examples/resources/demo.css">
+	<style type="text/css" class="init">
+
+	</style>
+	<script type="text/javascript" language="javascript" src="../../../media/js/jquery.js"></script>
+	<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
+	<script type="text/javascript" language="javascript" src="../js/dataTables.autoFill.js"></script>
+	<script type="text/javascript" language="javascript" src="../../../examples/resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../../../examples/resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+
+
+$(document).ready(function() {
+	var table = $('#example').DataTable();
+
+	new $.fn.dataTable.AutoFill( table, {
+		mode: 'x'
+	} );
+} );
+
+
+	</script>
+</head>
+
+<body class="dt-example">
+	<div class="container">
+		<section>
+			<h1>AutoFill example <span>Horizontal fill</span></h1>
+
+			<div class="info">
+				<p>By default AutoFill will allow the fill to operate only on a single column at a time (i.e.
+				vertically). However, it has the ability to provide the fill either horizontally, over both axis or
+				limited to just one axis depending on the direction of the drag. This option is provided by the
+				<code>mode</code> sanitisation option.</p>
+
+				<p>In this case it is set to <code>x</code> (i.e. horizontal axis) to provide the filler along a row,
+				rather than a column.</p>
+
+				<p>For the full range of options and syntax for <code>mode</code> please refer to the <a href=
+				"//datatables.net/extras/autofill/options">AutoFill documentation</a>.</p>
+			</div>
+
+			<table id="example" class="display" cellspacing="0" width="100%">
+				<thead>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</thead>
+
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
+
+				<tbody>
+					<tr>
+						<td>Tiger Nixon</td>
+						<td>System Architect</td>
+						<td>Edinburgh</td>
+						<td>61</td>
+						<td>2011/04/25</td>
+						<td>$320,800</td>
+					</tr>
+					<tr>
+						<td>Garrett Winters</td>
+						<td>Accountant</td>
+						<td>Tokyo</td>
+						<td>63</td>
+						<td>2011/07/25</td>
+						<td>$170,750</td>
+					</tr>
+					<tr>
+						<td>Ashton Cox</td>
+						<td>Junior Technical Author</td>
+						<td>San Francisco</td>
+						<td>66</td>
+						<td>2009/01/12</td>
+						<td>$86,000</td>
+					</tr>
+					<tr>
+						<td>Cedric Kelly</td>
+						<td>Senior Javascript Developer</td>
+						<td>Edinburgh</td>
+						<td>22</td>
+						<td>2012/03/29</td>
+						<td>$433,060</td>
+					</tr>
+					<tr>
+						<td>Airi Satou</td>
+						<td>Accountant</td>
+						<td>Tokyo</td>
+						<td>33</td>
+						<td>2008/11/28</td>
+						<td>$162,700</td>
+					</tr>
+					<tr>
+						<td>Brielle Williamson</td>
+						<td>Integration Specialist</td>
+						<td>New York</td>
+						<td>61</td>
+						<td>2012/12/02</td>
+						<td>$372,000</td>
+					</tr>
+					<tr>
+						<td>Herrod Chandler</td>
+						<td>Sales Assistant</td>
+						<td>San Francisco</td>
+						<td>59</td>
+						<td>2012/08/06</td>
+						<td>$137,500</td>
+					</tr>
+					<tr>
+						<td>Rhona Davidson</td>
+						<td>Integration Specialist</td>
+						<td>Tokyo</td>
+						<td>55</td>
+						<td>2010/10/14</td>
+						<td>$327,900</td>
+					</tr>
+					<tr>
+						<td>Colleen Hurst</td>
+						<td>Javascript Developer</td>
+						<td>San Francisco</td>
+						<td>39</td>
+						<td>2009/09/15</td>
+						<td>$205,500</td>
+					</tr>
+					<tr>
+						<td>Sonya Frost</td>
+						<td>Software Engineer</td>
+						<td>Edinburgh</td>
+						<td>23</td>
+						<td>2008/12/13</td>
+						<td>$103,600</td>
+					</tr>
+					<tr>
+						<td>Jena Gaines</td>
+						<td>Office Manager</td>
+						<td>London</td>
+						<td>30</td>
+						<td>2008/12/19</td>
+						<td>$90,560</td>
+					</tr>
+					<tr>
+						<td>Quinn Flynn</td>
+						<td>Support Lead</td>
+						<td>Edinburgh</td>
+						<td>22</td>
+						<td>2013/03/03</td>
+						<td>$342,000</td>
+					</tr>
+					<tr>
+						<td>Charde Marshall</td>
+						<td>Regional Director</td>
+						<td>San Francisco</td>
+						<td>36</td>
+						<td>2008/10/16</td>
+						<td>$470,600</td>
+					</tr>
+					<tr>
+						<td>Haley Kennedy</td>
+						<td>Senior Marketing Designer</td>
+						<td>London</td>
+						<td>43</td>
+						<td>2012/12/18</td>
+						<td>$313,500</td>
+					</tr>
+					<tr>
+						<td>Tatyana Fitzpatrick</td>
+						<td>Regional Director</td>
+						<td>London</td>
+						<td>19</td>
+						<td>2010/03/17</td>
+						<td>$385,750</td>
+					</tr>
+					<tr>
+						<td>Michael Silva</td>
+						<td>Marketing Designer</td>
+						<td>London</td>
+						<td>66</td>
+						<td>2012/11/27</td>
+						<td>$198,500</td>
+					</tr>
+					<tr>
+						<td>Paul Byrd</td>
+						<td>Chief Financial Officer (CFO)</td>
+						<td>New York</td>
+						<td>64</td>
+						<td>2010/06/09</td>
+						<td>$725,000</td>
+					</tr>
+					<tr>
+						<td>Gloria Little</td>
+						<td>Systems Administrator</td>
+						<td>New York</td>
+						<td>59</td>
+						<td>2009/04/10</td>
+						<td>$237,500</td>
+					</tr>
+					<tr>
+						<td>Bradley Greer</td>
+						<td>Software Engineer</td>
+						<td>London</td>
+						<td>41</td>
+						<td>2012/10/13</td>
+						<td>$132,000</td>
+					</tr>
+					<tr>
+						<td>Dai Rios</td>
+						<td>Personnel Lead</td>
+						<td>Edinburgh</td>
+						<td>35</td>
+						<td>2012/09/26</td>
+						<td>$217,500</td>
+					</tr>
+					<tr>
+						<td>Jenette Caldwell</td>
+						<td>Development Lead</td>
+						<td>New York</td>
+						<td>30</td>
+						<td>2011/09/03</td>
+						<td>$345,000</td>
+					</tr>
+					<tr>
+						<td>Yuri Berry</td>
+						<td>Chief Marketing Officer (CMO)</td>
+						<td>New York</td>
+						<td>40</td>
+						<td>2009/06/25</td>
+						<td>$675,000</td>
+					</tr>
+					<tr>
+						<td>Caesar Vance</td>
+						<td>Pre-Sales Support</td>
+						<td>New York</td>
+						<td>21</td>
+						<td>2011/12/12</td>
+						<td>$106,450</td>
+					</tr>
+					<tr>
+						<td>Doris Wilder</td>
+						<td>Sales Assistant</td>
+						<td>Sidney</td>
+						<td>23</td>
+						<td>2010/09/20</td>
+						<td>$85,600</td>
+					</tr>
+					<tr>
+						<td>Angelica Ramos</td>
+						<td>Chief Executive Officer (CEO)</td>
+						<td>London</td>
+						<td>47</td>
+						<td>2009/10/09</td>
+						<td>$1,200,000</td>
+					</tr>
+					<tr>
+						<td>Gavin Joyce</td>
+						<td>Developer</td>
+						<td>Edinburgh</td>
+						<td>42</td>
+						<td>2010/12/22</td>
+						<td>$92,575</td>
+					</tr>
+					<tr>
+						<td>Jennifer Chang</td>
+						<td>Regional Director</td>
+						<td>Singapore</td>
+						<td>28</td>
+						<td>2010/11/14</td>
+						<td>$357,650</td>
+					</tr>
+					<tr>
+						<td>Brenden Wagner</td>
+						<td>Software Engineer</td>
+						<td>San Francisco</td>
+						<td>28</td>
+						<td>2011/06/07</td>
+						<td>$206,850</td>
+					</tr>
+					<tr>
+						<td>Fiona Green</td>
+						<td>Chief Operating Officer (COO)</td>
+						<td>San Francisco</td>
+						<td>48</td>
+						<td>2010/03/11</td>
+						<td>$850,000</td>
+					</tr>
+					<tr>
+						<td>Shou Itou</td>
+						<td>Regional Marketing</td>
+						<td>Tokyo</td>
+						<td>20</td>
+						<td>2011/08/14</td>
+						<td>$163,000</td>
+					</tr>
+					<tr>
+						<td>Michelle House</td>
+						<td>Integration Specialist</td>
+						<td>Sidney</td>
+						<td>37</td>
+						<td>2011/06/02</td>
+						<td>$95,400</td>
+					</tr>
+					<tr>
+						<td>Suki Burks</td>
+						<td>Developer</td>
+						<td>London</td>
+						<td>53</td>
+						<td>2009/10/22</td>
+						<td>$114,500</td>
+					</tr>
+					<tr>
+						<td>Prescott Bartlett</td>
+						<td>Technical Author</td>
+						<td>London</td>
+						<td>27</td>
+						<td>2011/05/07</td>
+						<td>$145,000</td>
+					</tr>
+					<tr>
+						<td>Gavin Cortez</td>
+						<td>Team Leader</td>
+						<td>San Francisco</td>
+						<td>22</td>
+						<td>2008/10/26</td>
+						<td>$235,500</td>
+					</tr>
+					<tr>
+						<td>Martena Mccray</td>
+						<td>Post-Sales support</td>
+						<td>Edinburgh</td>
+						<td>46</td>
+						<td>2011/03/09</td>
+						<td>$324,050</td>
+					</tr>
+					<tr>
+						<td>Unity Butler</td>
+						<td>Marketing Designer</td>
+						<td>San Francisco</td>
+						<td>47</td>
+						<td>2009/12/09</td>
+						<td>$85,675</td>
+					</tr>
+					<tr>
+						<td>Howard Hatfield</td>
+						<td>Office Manager</td>
+						<td>San Francisco</td>
+						<td>51</td>
+						<td>2008/12/16</td>
+						<td>$164,500</td>
+					</tr>
+					<tr>
+						<td>Hope Fuentes</td>
+						<td>Secretary</td>
+						<td>San Francisco</td>
+						<td>41</td>
+						<td>2010/02/12</td>
+						<td>$109,850</td>
+					</tr>
+					<tr>
+						<td>Vivian Harrell</td>
+						<td>Financial Controller</td>
+						<td>San Francisco</td>
+						<td>62</td>
+						<td>2009/02/14</td>
+						<td>$452,500</td>
+					</tr>
+					<tr>
+						<td>Timothy Mooney</td>
+						<td>Office Manager</td>
+						<td>London</td>
+						<td>37</td>
+						<td>2008/12/11</td>
+						<td>$136,200</td>
+					</tr>
+					<tr>
+						<td>Jackson Bradshaw</td>
+						<td>Director</td>
+						<td>New York</td>
+						<td>65</td>
+						<td>2008/09/26</td>
+						<td>$645,750</td>
+					</tr>
+					<tr>
+						<td>Olivia Liang</td>
+						<td>Support Engineer</td>
+						<td>Singapore</td>
+						<td>64</td>
+						<td>2011/02/03</td>
+						<td>$234,500</td>
+					</tr>
+					<tr>
+						<td>Bruno Nash</td>
+						<td>Software Engineer</td>
+						<td>London</td>
+						<td>38</td>
+						<td>2011/05/03</td>
+						<td>$163,500</td>
+					</tr>
+					<tr>
+						<td>Sakura Yamamoto</td>
+						<td>Support Engineer</td>
+						<td>Tokyo</td>
+						<td>37</td>
+						<td>2009/08/19</td>
+						<td>$139,575</td>
+					</tr>
+					<tr>
+						<td>Thor Walton</td>
+						<td>Developer</td>
+						<td>New York</td>
+						<td>61</td>
+						<td>2013/08/11</td>
+						<td>$98,540</td>
+					</tr>
+					<tr>
+						<td>Finn Camacho</td>
+						<td>Support Engineer</td>
+						<td>San Francisco</td>
+						<td>47</td>
+						<td>2009/07/07</td>
+						<td>$87,500</td>
+					</tr>
+					<tr>
+						<td>Serge Baldwin</td>
+						<td>Data Coordinator</td>
+						<td>Singapore</td>
+						<td>64</td>
+						<td>2012/04/09</td>
+						<td>$138,575</td>
+					</tr>
+					<tr>
+						<td>Zenaida Frank</td>
+						<td>Software Engineer</td>
+						<td>New York</td>
+						<td>63</td>
+						<td>2010/01/04</td>
+						<td>$125,250</td>
+					</tr>
+					<tr>
+						<td>Zorita Serrano</td>
+						<td>Software Engineer</td>
+						<td>San Francisco</td>
+						<td>56</td>
+						<td>2012/06/01</td>
+						<td>$115,000</td>
+					</tr>
+					<tr>
+						<td>Jennifer Acosta</td>
+						<td>Junior Javascript Developer</td>
+						<td>Edinburgh</td>
+						<td>43</td>
+						<td>2013/02/01</td>
+						<td>$75,650</td>
+					</tr>
+					<tr>
+						<td>Cara Stevens</td>
+						<td>Sales Assistant</td>
+						<td>New York</td>
+						<td>46</td>
+						<td>2011/12/06</td>
+						<td>$145,600</td>
+					</tr>
+					<tr>
+						<td>Hermione Butler</td>
+						<td>Regional Director</td>
+						<td>London</td>
+						<td>47</td>
+						<td>2011/03/21</td>
+						<td>$356,250</td>
+					</tr>
+					<tr>
+						<td>Lael Greer</td>
+						<td>Systems Administrator</td>
+						<td>London</td>
+						<td>21</td>
+						<td>2009/02/27</td>
+						<td>$103,500</td>
+					</tr>
+					<tr>
+						<td>Jonas Alexander</td>
+						<td>Developer</td>
+						<td>San Francisco</td>
+						<td>30</td>
+						<td>2010/07/14</td>
+						<td>$86,500</td>
+					</tr>
+					<tr>
+						<td>Shad Decker</td>
+						<td>Regional Director</td>
+						<td>Edinburgh</td>
+						<td>51</td>
+						<td>2008/11/13</td>
+						<td>$183,000</td>
+					</tr>
+					<tr>
+						<td>Michael Bruce</td>
+						<td>Javascript Developer</td>
+						<td>Singapore</td>
+						<td>29</td>
+						<td>2011/06/27</td>
+						<td>$183,000</td>
+					</tr>
+					<tr>
+						<td>Donna Snider</td>
+						<td>Customer Support</td>
+						<td>New York</td>
+						<td>27</td>
+						<td>2011/01/25</td>
+						<td>$112,000</td>
+					</tr>
+				</tbody>
+			</table>
+
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this
+					example:</p><code class="multiline brush: js;">$(document).ready(function() {
+	var table = $('#example').DataTable();
+
+	new $.fn.dataTable.AutoFill( table, {
+		mode: 'x'
+	} );
+} );</code>
+
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this
+					example:</p>
+
+					<ul>
+						<li><a href="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
+						<li><a href=
+						"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
+						<li><a href="../js/dataTables.autoFill.js">../js/dataTables.autoFill.js</a></li>
+					</ul>
+				</div>
+
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
+					DataTables:</p>
+				</div>
+
+				<div class="css">
+					<div>
+						<p>This example uses a little bit of additional CSS beyond what is loaded from the library
+						files (below), in order to correctly display the table. The additional CSS used is shown
+						below:</p><code class="multiline brush: js;"></code>
+					</div>
+
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the
+					table:</p>
+
+					<ul>
+						<li><a href=
+						"../../../media/css/jquery.dataTables.css">../../../media/css/jquery.dataTables.css</a></li>
+						<li><a href="../css/dataTables.autoFill.css">../css/dataTables.autoFill.css</a></li>
+					</ul>
+				</div>
+
+				<div class="ajax">
+					<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
+					will update automatically as any additional data is loaded.</p>
+				</div>
+
+				<div class="php">
+					<p>The script used to perform the server-side processing for this table is shown below. Please note
+					that this is just an example script using PHP. Server-side processing scripts can be written in any
+					language, using <a href="//datatables.net/manual/server-side">the protocol described in the
+					DataTables documentation</a>.</p>
+				</div>
+			</div>
+		</section>
+	</div>
+
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+
+			<div class="liner">
+				<h2>Other examples</h2>
+
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="./index.html">Examples</a></h3>
+						<ul class="toc active">
+							<li><a href="./simple.html">Basic initialisation</a></li>
+							<li><a href="./columns.html">Column options</a></li>
+							<li><a href="./scrolling.html">Scrolling DataTable</a></li>
+							<li><a href="./fill-both.html">Horizontal and vertical fill</a></li>
+							<li class="active"><a href="./fill-horizontal.html">Horizontal fill</a></li>
+							<li><a href="./complete-callback.html">Complete callback</a></li>
+							<li><a href="./step-callback.html">Step callback</a></li>
+						</ul>
+					</div>
+				</div>
+
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
+					information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
+					<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
+					DataTables.</p>
+
+					<p class="copyright">DataTables designed and created by <a href=
+					"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

static/js/plugins/datatables/extensions/AutoFill/examples/index.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
+	<link rel="stylesheet" type="text/css" href="../../../examples/resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../../../examples/resources/demo.css">
+	<script type="text/javascript" language="javascript" src="../../../media/js/jquery.js"></script>
+	<script type="text/javascript" language="javascript" src="../../../examples/resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../../../examples/resources/demo.js"></script>
+
+	<title>AutoFill examples - AutoFill examples</title>
+</head>
+
+<body class="dt-example">
+	<div class="container">
+		<section>
+			<h1>AutoFill example <span>AutoFill examples</span></h1>
+
+			<div class="info">
+				<p>AutoFill gives an Excel like option to a DataTable to click and drag over multiple cells, filling in
+				information over the selected cells and incrementing numbers as needed.</p>
+
+				<p>Thanks to <a href="http://www.phoniax.no/">Phoniax AS</a> for their sponsorship of this plug-in for
+				DataTables.</p>
+			</div>
+		</section>
+	</div>
+
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+
+			<div class="liner">
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="./index.html">Examples</a></h3>
+						<ul class="toc">
+							<li><a href="./simple.html">Basic initialisation</a></li>
+							<li><a href="./columns.html">Column options</a></li>
+							<li><a href="./scrolling.html">Scrolling DataTable</a></li>
+							<li><a href="./fill-both.html">Horizontal and vertical fill</a></li>
+							<li><a href="./fill-horizontal.html">Horizontal fill</a></li>
+							<li><a href="./complete-callback.html">Complete callback</a></li>
+							<li><a href="./step-callback.html">Step callback</a></li>
+						</ul>
+					</div>
+				</div>
+
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
+					information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
+					<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
+					DataTables.</p>
+
+					<p class="copyright">DataTables designed and created by <a href=
+					"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

static/js/plugins/datatables/extensions/AutoFill/examples/scrolling.html

@@ -0,0 +1,638 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
+
+	<title>AutoFill example - Scrolling DataTable</title>
+	<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
+	<link rel="stylesheet" type="text/css" href="../css/dataTables.autoFill.css">
+	<link rel="stylesheet" type="text/css" href="../../../examples/resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../../../examples/resources/demo.css">
+	<style type="text/css" class="init">
+
+	</style>
+	<script type="text/javascript" language="javascript" src="../../../media/js/jquery.js"></script>
+	<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
+	<script type="text/javascript" language="javascript" src="../js/dataTables.autoFill.js"></script>
+	<script type="text/javascript" language="javascript" src="../../../examples/resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../../../examples/resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+
+
+$(document).ready(function() {
+	var table = $('#example').dataTable( {
+		scrollY: 200,
+		scrollCollapse: false,
+		paginate: false
+	} );
+
+	new $.fn.dataTable.AutoFill( table );
+} );
+
+
+	</script>
+</head>
+
+<body class="dt-example">
+	<div class="container">
+		<section>
+			<h1>AutoFill example <span>Scrolling DataTable</span></h1>
+
+			<div class="info">
+				<p>When dragging an AutoFill handle, the table (if DataTables scrolling is enabled) or the window will
+				be automatically scrolled, as you approach the edge of the scrolling component. The example below shows
+				the effect with DataTables scrolling (and also window if needed).</p>
+			</div>
+
+			<table id="example" class="display" cellspacing="0" width="100%">
+				<thead>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</thead>
+
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
+
+				<tbody>
+					<tr>
+						<td>Tiger Nixon</td>
+						<td>System Architect</td>
+						<td>Edinburgh</td>
+						<td>61</td>
+						<td>2011/04/25</td>
+						<td>$320,800</td>
+					</tr>
+					<tr>
+						<td>Garrett Winters</td>
+						<td>Accountant</td>
+						<td>Tokyo</td>
+						<td>63</td>
+						<td>2011/07/25</td>
+						<td>$170,750</td>
+					</tr>
+					<tr>
+						<td>Ashton Cox</td>
+						<td>Junior Technical Author</td>
+						<td>San Francisco</td>
+						<td>66</td>
+						<td>2009/01/12</td>
+						<td>$86,000</td>
+					</tr>
+					<tr>
+						<td>Cedric Kelly</td>
+						<td>Senior Javascript Developer</td>
+						<td>Edinburgh</td>
+						<td>22</td>
+						<td>2012/03/29</td>
+						<td>$433,060</td>
+					</tr>
+					<tr>
+						<td>Airi Satou</td>
+						<td>Accountant</td>
+						<td>Tokyo</td>
+						<td>33</td>
+						<td>2008/11/28</td>
+						<td>$162,700</td>
+					</tr>
+					<tr>
+						<td>Brielle Williamson</td>
+						<td>Integration Specialist</td>
+						<td>New York</td>
+						<td>61</td>
+						<td>2012/12/02</td>
+						<td>$372,000</td>
+					</tr>
+					<tr>
+						<td>Herrod Chandler</td>
+						<td>Sales Assistant</td>
+						<td>San Francisco</td>
+						<td>59</td>
+						<td>2012/08/06</td>
+						<td>$137,500</td>
+					</tr>
+					<tr>
+						<td>Rhona Davidson</td>
+						<td>Integration Specialist</td>
+						<td>Tokyo</td>
+						<td>55</td>
+						<td>2010/10/14</td>
+						<td>$327,900</td>
+					</tr>
+					<tr>
+						<td>Colleen Hurst</td>
+						<td>Javascript Developer</td>
+						<td>San Francisco</td>
+						<td>39</td>
+						<td>2009/09/15</td>
+						<td>$205,500</td>
+					</tr>
+					<tr>
+						<td>Sonya Frost</td>
+						<td>Software Engineer</td>
+						<td>Edinburgh</td>
+						<td>23</td>
+						<td>2008/12/13</td>
+						<td>$103,600</td>
+					</tr>
+					<tr>
+						<td>Jena Gaines</td>
+						<td>Office Manager</td>
+						<td>London</td>
+						<td>30</td>
+						<td>2008/12/19</td>
+						<td>$90,560</td>
+					</tr>
+					<tr>
+						<td>Quinn Flynn</td>
+						<td>Support Lead</td>
+						<td>Edinburgh</td>
+						<td>22</td>
+						<td>2013/03/03</td>
+						<td>$342,000</td>
+					</tr>
+					<tr>
+						<td>Charde Marshall</td>
+						<td>Regional Director</td>
+						<td>San Francisco</td>
+						<td>36</td>
+						<td>2008/10/16</td>
+						<td>$470,600</td>
+					</tr>
+					<tr>
+						<td>Haley Kennedy</td>
+						<td>Senior Marketing Designer</td>
+						<td>London</td>
+						<td>43</td>
+						<td>2012/12/18</td>
+						<td>$313,500</td>
+					</tr>
+					<tr>
+						<td>Tatyana Fitzpatrick</td>
+						<td>Regional Director</td>
+						<td>London</td>
+						<td>19</td>
+						<td>2010/03/17</td>
+						<td>$385,750</td>
+					</tr>
+					<tr>
+						<td>Michael Silva</td>
+						<td>Marketing Designer</td>
+						<td>London</td>
+						<td>66</td>
+						<td>2012/11/27</td>
+						<td>$198,500</td>
+					</tr>
+					<tr>
+						<td>Paul Byrd</td>
+						<td>Chief Financial Officer (CFO)</td>
+						<td>New York</td>
+						<td>64</td>
+						<td>2010/06/09</td>
+						<td>$725,000</td>
+					</tr>
+					<tr>
+						<td>Gloria Little</td>
+						<td>Systems Administrator</td>
+						<td>New York</td>
+						<td>59</td>
+						<td>2009/04/10</td>
+						<td>$237,500</td>
+					</tr>
+					<tr>
+						<td>Bradley Greer</td>
+						<td>Software Engineer</td>
+						<td>London</td>
+						<td>41</td>
+						<td>2012/10/13</td>
+						<td>$132,000</td>
+					</tr>
+					<tr>
+						<td>Dai Rios</td>
+						<td>Personnel Lead</td>
+						<td>Edinburgh</td>
+						<td>35</td>
+						<td>2012/09/26</td>
+						<td>$217,500</td>
+					</tr>
+					<tr>
+						<td>Jenette Caldwell</td>
+						<td>Development Lead</td>
+						<td>New York</td>
+						<td>30</td>
+						<td>2011/09/03</td>
+						<td>$345,000</td>
+					</tr>
+					<tr>
+						<td>Yuri Berry</td>
+						<td>Chief Marketing Officer (CMO)</td>
+						<td>New York</td>
+						<td>40</td>
+						<td>2009/06/25</td>
+						<td>$675,000</td>
+					</tr>
+					<tr>
+						<td>Caesar Vance</td>
+						<td>Pre-Sales Support</td>
+						<td>New York</td>
+						<td>21</td>
+						<td>2011/12/12</td>
+						<td>$106,450</td>
+					</tr>
+					<tr>
+						<td>Doris Wilder</td>
+						<td>Sales Assistant</td>
+						<td>Sidney</td>
+						<td>23</td>
+						<td>2010/09/20</td>
+						<td>$85,600</td>
+					</tr>
+					<tr>
+						<td>Angelica Ramos</td>
+						<td>Chief Executive Officer (CEO)</td>
+						<td>London</td>
+						<td>47</td>
+						<td>2009/10/09</td>
+						<td>$1,200,000</td>
+					</tr>
+					<tr>
+						<td>Gavin Joyce</td>
+						<td>Developer</td>
+						<td>Edinburgh</td>
+						<td>42</td>
+						<td>2010/12/22</td>
+						<td>$92,575</td>
+					</tr>
+					<tr>
+						<td>Jennifer Chang</td>
+						<td>Regional Director</td>
+						<td>Singapore</td>
+						<td>28</td>
+						<td>2010/11/14</td>
+						<td>$357,650</td>
+					</tr>
+					<tr>
+						<td>Brenden Wagner</td>
+						<td>Software Engineer</td>
+						<td>San Francisco</td>
+						<td>28</td>
+						<td>2011/06/07</td>
+						<td>$206,850</td>
+					</tr>
+					<tr>
+						<td>Fiona Green</td>
+						<td>Chief Operating Officer (COO)</td>
+						<td>San Francisco</td>
+						<td>48</td>
+						<td>2010/03/11</td>
+						<td>$850,000</td>
+					</tr>
+					<tr>
+						<td>Shou Itou</td>
+						<td>Regional Marketing</td>
+						<td>Tokyo</td>
+						<td>20</td>
+						<td>2011/08/14</td>
+						<td>$163,000</td>
+					</tr>
+					<tr>
+						<td>Michelle House</td>
+						<td>Integration Specialist</td>
+						<td>Sidney</td>
+						<td>37</td>
+						<td>2011/06/02</td>
+						<td>$95,400</td>
+					</tr>
+					<tr>
+						<td>Suki Burks</td>
+						<td>Developer</td>
+						<td>London</td>
+						<td>53</td>
+						<td>2009/10/22</td>
+						<td>$114,500</td>
+					</tr>
+					<tr>
+						<td>Prescott Bartlett</td>
+						<td>Technical Author</td>
+						<td>London</td>
+						<td>27</td>
+						<td>2011/05/07</td>
+						<td>$145,000</td>
+					</tr>
+					<tr>
+						<td>Gavin Cortez</td>
+						<td>Team Leader</td>
+						<td>San Francisco</td>
+						<td>22</td>
+						<td>2008/10/26</td>
+						<td>$235,500</td>
+					</tr>
+					<tr>
+						<td>Martena Mccray</td>
+						<td>Post-Sales support</td>
+						<td>Edinburgh</td>
+						<td>46</td>
+						<td>2011/03/09</td>
+						<td>$324,050</td>
+					</tr>
+					<tr>
+						<td>Unity Butler</td>
+						<td>Marketing Designer</td>
+						<td>San Francisco</td>
+						<td>47</td>
+						<td>2009/12/09</td>
+						<td>$85,675</td>
+					</tr>
+					<tr>
+						<td>Howard Hatfield</td>
+						<td>Office Manager</td>
+						<td>San Francisco</td>
+						<td>51</td>
+						<td>2008/12/16</td>
+						<td>$164,500</td>
+					</tr>
+					<tr>
+						<td>Hope Fuentes</td>
+						<td>Secretary</td>
+						<td>San Francisco</td>
+						<td>41</td>
+						<td>2010/02/12</td>
+						<td>$109,850</td>
+					</tr>
+					<tr>
+						<td>Vivian Harrell</td>
+						<td>Financial Controller</td>
+						<td>San Francisco</td>
+						<td>62</td>
+						<td>2009/02/14</td>
+						<td>$452,500</td>
+					</tr>
+					<tr>
+						<td>Timothy Mooney</td>
+						<td>Office Manager</td>
+						<td>London</td>
+						<td>37</td>
+						<td>2008/12/11</td>
+						<td>$136,200</td>
+					</tr>
+					<tr>
+						<td>Jackson Bradshaw</td>
+						<td>Director</td>
+						<td>New York</td>
+						<td>65</td>
+						<td>2008/09/26</td>
+						<td>$645,750</td>
+					</tr>
+					<tr>
+						<td>Olivia Liang</td>
+						<td>Support Engineer</td>
+						<td>Singapore</td>
+						<td>64</td>
+						<td>2011/02/03</td>
+						<td>$234,500</td>
+					</tr>
+					<tr>
+						<td>Bruno Nash</td>
+						<td>Software Engineer</td>
+						<td>London</td>
+						<td>38</td>
+						<td>2011/05/03</td>
+						<td>$163,500</td>
+					</tr>
+					<tr>
+						<td>Sakura Yamamoto</td>
+						<td>Support Engineer</td>
+						<td>Tokyo</td>
+						<td>37</td>
+						<td>2009/08/19</td>
+						<td>$139,575</td>
+					</tr>
+					<tr>
+						<td>Thor Walton</td>
+						<td>Developer</td>
+						<td>New York</td>
+						<td>61</td>
+						<td>2013/08/11</td>
+						<td>$98,540</td>
+					</tr>
+					<tr>
+						<td>Finn Camacho</td>
+						<td>Support Engineer</td>
+						<td>San Francisco</td>
+						<td>47</td>
+						<td>2009/07/07</td>
+						<td>$87,500</td>
+					</tr>
+					<tr>
+						<td>Serge Baldwin</td>
+						<td>Data Coordinator</td>
+						<td>Singapore</td>
+						<td>64</td>
+						<td>2012/04/09</td>
+						<td>$138,575</td>
+					</tr>
+					<tr>
+						<td>Zenaida Frank</td>
+						<td>Software Engineer</td>
+						<td>New York</td>
+						<td>63</td>
+						<td>2010/01/04</td>
+						<td>$125,250</td>
+					</tr>
+					<tr>
+						<td>Zorita Serrano</td>
+						<td>Software Engineer</td>
+						<td>San Francisco</td>
+						<td>56</td>
+						<td>2012/06/01</td>
+						<td>$115,000</td>
+					</tr>
+					<tr>
+						<td>Jennifer Acosta</td>
+						<td>Junior Javascript Developer</td>
+						<td>Edinburgh</td>
+						<td>43</td>
+						<td>2013/02/01</td>
+						<td>$75,650</td>
+					</tr>
+					<tr>
+						<td>Cara Stevens</td>
+						<td>Sales Assistant</td>
+						<td>New York</td>
+						<td>46</td>
+						<td>2011/12/06</td>
+						<td>$145,600</td>
+					</tr>
+					<tr>
+						<td>Hermione Butler</td>
+						<td>Regional Director</td>
+						<td>London</td>
+						<td>47</td>
+						<td>2011/03/21</td>
+						<td>$356,250</td>
+					</tr>
+					<tr>
+						<td>Lael Greer</td>
+						<td>Systems Administrator</td>
+						<td>London</td>
+						<td>21</td>
+						<td>2009/02/27</td>
+						<td>$103,500</td>
+					</tr>
+					<tr>
+						<td>Jonas Alexander</td>
+						<td>Developer</td>
+						<td>San Francisco</td>
+						<td>30</td>
+						<td>2010/07/14</td>
+						<td>$86,500</td>
+					</tr>
+					<tr>
+						<td>Shad Decker</td>
+						<td>Regional Director</td>
+						<td>Edinburgh</td>
+						<td>51</td>
+						<td>2008/11/13</td>
+						<td>$183,000</td>
+					</tr>
+					<tr>
+						<td>Michael Bruce</td>
+						<td>Javascript Developer</td>
+						<td>Singapore</td>
+						<td>29</td>
+						<td>2011/06/27</td>
+						<td>$183,000</td>
+					</tr>
+					<tr>
+						<td>Donna Snider</td>
+						<td>Customer Support</td>
+						<td>New York</td>
+						<td>27</td>
+						<td>2011/01/25</td>
+						<td>$112,000</td>
+					</tr>
+				</tbody>
+			</table>
+
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this
+					example:</p><code class="multiline brush: js;">$(document).ready(function() {
+	var table = $('#example').dataTable( {
+		scrollY: 200,
+		scrollCollapse: false,
+		paginate: false
+	} );
+
+	new $.fn.dataTable.AutoFill( table );
+} );</code>
+
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this
+					example:</p>
+
+					<ul>
+						<li><a href="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
+						<li><a href=
+						"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
+						<li><a href="../js/dataTables.autoFill.js">../js/dataTables.autoFill.js</a></li>
+					</ul>
+				</div>
+
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
+					DataTables:</p>
+				</div>
+
+				<div class="css">
+					<div>
+						<p>This example uses a little bit of additional CSS beyond what is loaded from the library
+						files (below), in order to correctly display the table. The additional CSS used is shown
+						below:</p><code class="multiline brush: js;"></code>
+					</div>
+
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the
+					table:</p>
+
+					<ul>
+						<li><a href=
+						"../../../media/css/jquery.dataTables.css">../../../media/css/jquery.dataTables.css</a></li>
+						<li><a href="../css/dataTables.autoFill.css">../css/dataTables.autoFill.css</a></li>
+					</ul>
+				</div>
+
+				<div class="ajax">
+					<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
+					will update automatically as any additional data is loaded.</p>
+				</div>
+
+				<div class="php">
+					<p>The script used to perform the server-side processing for this table is shown below. Please note
+					that this is just an example script using PHP. Server-side processing scripts can be written in any
+					language, using <a href="//datatables.net/manual/server-side">the protocol described in the
+					DataTables documentation</a>.</p>
+				</div>
+			</div>
+		</section>
+	</div>
+
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+
+			<div class="liner">
+				<h2>Other examples</h2>
+
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="./index.html">Examples</a></h3>
+						<ul class="toc active">
+							<li><a href="./simple.html">Basic initialisation</a></li>
+							<li><a href="./columns.html">Column options</a></li>
+							<li class="active"><a href="./scrolling.html">Scrolling DataTable</a></li>
+							<li><a href="./fill-both.html">Horizontal and vertical fill</a></li>
+							<li><a href="./fill-horizontal.html">Horizontal fill</a></li>
+							<li><a href="./complete-callback.html">Complete callback</a></li>
+							<li><a href="./step-callback.html">Step callback</a></li>
+						</ul>
+					</div>
+				</div>
+
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
+					information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
+					<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
+					DataTables.</p>
+
+					<p class="copyright">DataTables designed and created by <a href=
+					"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

static/js/plugins/datatables/extensions/AutoFill/examples/simple.html

@@ -0,0 +1,631 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
+
+	<title>AutoFill example - Basic initialisation</title>
+	<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
+	<link rel="stylesheet" type="text/css" href="../css/dataTables.autoFill.css">
+	<link rel="stylesheet" type="text/css" href="../../../examples/resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../../../examples/resources/demo.css">
+	<style type="text/css" class="init">
+
+	</style>
+	<script type="text/javascript" language="javascript" src="../../../media/js/jquery.js"></script>
+	<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
+	<script type="text/javascript" language="javascript" src="../js/dataTables.autoFill.js"></script>
+	<script type="text/javascript" language="javascript" src="../../../examples/resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../../../examples/resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+
+
+$(document).ready(function() {
+	var table = $('#example').DataTable();
+	new $.fn.dataTable.AutoFill( table );
+} );
+
+
+	</script>
+</head>
+
+<body class="dt-example">
+	<div class="container">
+		<section>
+			<h1>AutoFill example <span>Basic initialisation</span></h1>
+
+			<div class="info">
+				<p>AutoFill gives an Excel like option to a DataTable to click and drag over multiple cells, filling in
+				information over the selected cells and incrementing numbers as needed.</p>
+
+				<p>AutoFill is initialised using the <code>$.fn.dataTable.AutoFill</code> function as shown in the
+				example below. It requires one parameter, the DataTable instance that AutoFill is to operate on, and
+				optionally a second configuration parameter, which is shown in the other AutoFill examples.</p>
+			</div>
+
+			<table id="example" class="display" cellspacing="0" width="100%">
+				<thead>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</thead>
+
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
+
+				<tbody>
+					<tr>
+						<td>Tiger Nixon</td>
+						<td>System Architect</td>
+						<td>Edinburgh</td>
+						<td>61</td>
+						<td>2011/04/25</td>
+						<td>$320,800</td>
+					</tr>
+					<tr>
+						<td>Garrett Winters</td>
+						<td>Accountant</td>
+						<td>Tokyo</td>
+						<td>63</td>
+						<td>2011/07/25</td>
+						<td>$170,750</td>
+					</tr>
+					<tr>
+						<td>Ashton Cox</td>
+						<td>Junior Technical Author</td>
+						<td>San Francisco</td>
+						<td>66</td>
+						<td>2009/01/12</td>
+						<td>$86,000</td>
+					</tr>
+					<tr>
+						<td>Cedric Kelly</td>
+						<td>Senior Javascript Developer</td>
+						<td>Edinburgh</td>
+						<td>22</td>
+						<td>2012/03/29</td>
+						<td>$433,060</td>
+					</tr>
+					<tr>
+						<td>Airi Satou</td>
+						<td>Accountant</td>
+						<td>Tokyo</td>
+						<td>33</td>
+						<td>2008/11/28</td>
+						<td>$162,700</td>
+					</tr>
+					<tr>
+						<td>Brielle Williamson</td>
+						<td>Integration Specialist</td>
+						<td>New York</td>
+						<td>61</td>
+						<td>2012/12/02</td>
+						<td>$372,000</td>
+					</tr>
+					<tr>
+						<td>Herrod Chandler</td>
+						<td>Sales Assistant</td>
+						<td>San Francisco</td>
+						<td>59</td>
+						<td>2012/08/06</td>
+						<td>$137,500</td>
+					</tr>
+					<tr>
+						<td>Rhona Davidson</td>
+						<td>Integration Specialist</td>
+						<td>Tokyo</td>
+						<td>55</td>
+						<td>2010/10/14</td>
+						<td>$327,900</td>
+					</tr>
+					<tr>
+						<td>Colleen Hurst</td>
+						<td>Javascript Developer</td>
+						<td>San Francisco</td>
+						<td>39</td>
+						<td>2009/09/15</td>
+						<td>$205,500</td>
+					</tr>
+					<tr>
+						<td>Sonya Frost</td>
+						<td>Software Engineer</td>
+						<td>Edinburgh</td>
+						<td>23</td>
+						<td>2008/12/13</td>
+						<td>$103,600</td>
+					</tr>
+					<tr>
+						<td>Jena Gaines</td>
+						<td>Office Manager</td>
+						<td>London</td>
+						<td>30</td>
+						<td>2008/12/19</td>
+						<td>$90,560</td>
+					</tr>
+					<tr>
+						<td>Quinn Flynn</td>
+						<td>Support Lead</td>
+						<td>Edinburgh</td>
+						<td>22</td>
+						<td>2013/03/03</td>
+						<td>$342,000</td>
+					</tr>
+					<tr>
+						<td>Charde Marshall</td>
+						<td>Regional Director</td>
+						<td>San Francisco</td>
+						<td>36</td>
+						<td>2008/10/16</td>
+						<td>$470,600</td>
+					</tr>
+					<tr>
+						<td>Haley Kennedy</td>
+						<td>Senior Marketing Designer</td>
+						<td>London</td>
+						<td>43</td>
+						<td>2012/12/18</td>
+						<td>$313,500</td>
+					</tr>
+					<tr>
+						<td>Tatyana Fitzpatrick</td>
+						<td>Regional Director</td>
+						<td>London</td>
+						<td>19</td>
+						<td>2010/03/17</td>
+						<td>$385,750</td>
+					</tr>
+					<tr>
+						<td>Michael Silva</td>
+						<td>Marketing Designer</td>
+						<td>London</td>
+						<td>66</td>
+						<td>2012/11/27</td>
+						<td>$198,500</td>
+					</tr>
+					<tr>
+						<td>Paul Byrd</td>
+						<td>Chief Financial Officer (CFO)</td>
+						<td>New York</td>
+						<td>64</td>
+						<td>2010/06/09</td>
+						<td>$725,000</td>
+					</tr>
+					<tr>
+						<td>Gloria Little</td>
+						<td>Systems Administrator</td>
+						<td>New York</td>
+						<td>59</td>
+						<td>2009/04/10</td>
+						<td>$237,500</td>
+					</tr>
+					<tr>
+						<td>Bradley Greer</td>
+						<td>Software Engineer</td>
+						<td>London</td>
+						<td>41</td>
+						<td>2012/10/13</td>
+						<td>$132,000</td>
+					</tr>
+					<tr>
+						<td>Dai Rios</td>
+						<td>Personnel Lead</td>
+						<td>Edinburgh</td>
+						<td>35</td>
+						<td>2012/09/26</td>
+						<td>$217,500</td>
+					</tr>
+					<tr>
+						<td>Jenette Caldwell</td>
+						<td>Development Lead</td>
+						<td>New York</td>
+						<td>30</td>
+						<td>2011/09/03</td>
+						<td>$345,000</td>
+					</tr>
+					<tr>
+						<td>Yuri Berry</td>
+						<td>Chief Marketing Officer (CMO)</td>
+						<td>New York</td>
+						<td>40</td>
+						<td>2009/06/25</td>
+						<td>$675,000</td>
+					</tr>
+					<tr>
+						<td>Caesar Vance</td>
+						<td>Pre-Sales Support</td>
+						<td>New York</td>
+						<td>21</td>
+						<td>2011/12/12</td>
+						<td>$106,450</td>
+					</tr>
+					<tr>
+						<td>Doris Wilder</td>
+						<td>Sales Assistant</td>
+						<td>Sidney</td>
+						<td>23</td>
+						<td>2010/09/20</td>
+						<td>$85,600</td>
+					</tr>
+					<tr>
+						<td>Angelica Ramos</td>
+						<td>Chief Executive Officer (CEO)</td>
+						<td>London</td>
+						<td>47</td>
+						<td>2009/10/09</td>
+						<td>$1,200,000</td>
+					</tr>
+					<tr>
+						<td>Gavin Joyce</td>
+						<td>Developer</td>
+						<td>Edinburgh</td>
+						<td>42</td>
+						<td>2010/12/22</td>
+						<td>$92,575</td>
+					</tr>
+					<tr>
+						<td>Jennifer Chang</td>
+						<td>Regional Director</td>
+						<td>Singapore</td>
+						<td>28</td>
+						<td>2010/11/14</td>
+						<td>$357,650</td>
+					</tr>
+					<tr>
+						<td>Brenden Wagner</td>
+						<td>Software Engineer</td>
+						<td>San Francisco</td>
+						<td>28</td>
+						<td>2011/06/07</td>
+						<td>$206,850</td>
+					</tr>
+					<tr>
+						<td>Fiona Green</td>
+						<td>Chief Operating Officer (COO)</td>
+						<td>San Francisco</td>
+						<td>48</td>
+						<td>2010/03/11</td>
+						<td>$850,000</td>
+					</tr>
+					<tr>
+						<td>Shou Itou</td>
+						<td>Regional Marketing</td>
+						<td>Tokyo</td>
+						<td>20</td>
+						<td>2011/08/14</td>
+						<td>$163,000</td>
+					</tr>
+					<tr>
+						<td>Michelle House</td>
+						<td>Integration Specialist</td>
+						<td>Sidney</td>
+						<td>37</td>
+						<td>2011/06/02</td>
+						<td>$95,400</td>
+					</tr>
+					<tr>
+						<td>Suki Burks</td>
+						<td>Developer</td>
+						<td>London</td>
+						<td>53</td>
+						<td>2009/10/22</td>
+						<td>$114,500</td>
+					</tr>
+					<tr>
+						<td>Prescott Bartlett</td>
+						<td>Technical Author</td>
+						<td>London</td>
+						<td>27</td>
+						<td>2011/05/07</td>
+						<td>$145,000</td>
+					</tr>
+					<tr>
+						<td>Gavin Cortez</td>
+						<td>Team Leader</td>
+						<td>San Francisco</td>
+						<td>22</td>
+						<td>2008/10/26</td>
+						<td>$235,500</td>
+					</tr>
+					<tr>
+						<td>Martena Mccray</td>
+						<td>Post-Sales support</td>
+						<td>Edinburgh</td>
+						<td>46</td>
+						<td>2011/03/09</td>
+						<td>$324,050</td>
+					</tr>
+					<tr>
+						<td>Unity Butler</td>
+						<td>Marketing Designer</td>
+						<td>San Francisco</td>
+						<td>47</td>
+						<td>2009/12/09</td>
+						<td>$85,675</td>
+					</tr>
+					<tr>
+						<td>Howard Hatfield</td>
+						<td>Office Manager</td>
+						<td>San Francisco</td>
+						<td>51</td>
+						<td>2008/12/16</td>
+						<td>$164,500</td>
+					</tr>
+					<tr>
+						<td>Hope Fuentes</td>
+						<td>Secretary</td>
+						<td>San Francisco</td>
+						<td>41</td>
+						<td>2010/02/12</td>
+						<td>$109,850</td>
+					</tr>
+					<tr>
+						<td>Vivian Harrell</td>
+						<td>Financial Controller</td>
+						<td>San Francisco</td>
+						<td>62</td>
+						<td>2009/02/14</td>
+						<td>$452,500</td>
+					</tr>
+					<tr>
+						<td>Timothy Mooney</td>
+						<td>Office Manager</td>
+						<td>London</td>
+						<td>37</td>
+						<td>2008/12/11</td>
+						<td>$136,200</td>
+					</tr>
+					<tr>
+						<td>Jackson Bradshaw</td>
+						<td>Director</td>
+						<td>New York</td>
+						<td>65</td>
+						<td>2008/09/26</td>
+						<td>$645,750</td>
+					</tr>
+					<tr>
+						<td>Olivia Liang</td>
+						<td>Support Engineer</td>
+						<td>Singapore</td>
+						<td>64</td>
+						<td>2011/02/03</td>
+						<td>$234,500</td>
+					</tr>
+					<tr>
+						<td>Bruno Nash</td>
+						<td>Software Engineer</td>
+						<td>London</td>
+						<td>38</td>
+						<td>2011/05/03</td>
+						<td>$163,500</td>
+					</tr>
+					<tr>
+						<td>Sakura Yamamoto</td>
+						<td>Support Engineer</td>
+						<td>Tokyo</td>
+						<td>37</td>
+						<td>2009/08/19</td>
+						<td>$139,575</td>
+					</tr>
+					<tr>
+						<td>Thor Walton</td>
+						<td>Developer</td>
+						<td>New York</td>
+						<td>61</td>
+						<td>2013/08/11</td>
+						<td>$98,540</td>
+					</tr>
+					<tr>
+						<td>Finn Camacho</td>
+						<td>Support Engineer</td>
+						<td>San Francisco</td>
+						<td>47</td>
+						<td>2009/07/07</td>
+						<td>$87,500</td>
+					</tr>
+					<tr>
+						<td>Serge Baldwin</td>
+						<td>Data Coordinator</td>
+						<td>Singapore</td>
+						<td>64</td>
+						<td>2012/04/09</td>
+						<td>$138,575</td>
+					</tr>
+					<tr>
+						<td>Zenaida Frank</td>
+						<td>Software Engineer</td>
+						<td>New York</td>
+						<td>63</td>
+						<td>2010/01/04</td>
+						<td>$125,250</td>
+					</tr>
+					<tr>
+						<td>Zorita Serrano</td>
+						<td>Software Engineer</td>
+						<td>San Francisco</td>
+						<td>56</td>
+						<td>2012/06/01</td>
+						<td>$115,000</td>
+					</tr>
+					<tr>
+						<td>Jennifer Acosta</td>
+						<td>Junior Javascript Developer</td>
+						<td>Edinburgh</td>
+						<td>43</td>
+						<td>2013/02/01</td>
+						<td>$75,650</td>
+					</tr>
+					<tr>
+						<td>Cara Stevens</td>
+						<td>Sales Assistant</td>
+						<td>New York</td>
+						<td>46</td>
+						<td>2011/12/06</td>
+						<td>$145,600</td>
+					</tr>
+					<tr>
+						<td>Hermione Butler</td>
+						<td>Regional Director</td>
+						<td>London</td>
+						<td>47</td>
+						<td>2011/03/21</td>
+						<td>$356,250</td>
+					</tr>
+					<tr>
+						<td>Lael Greer</td>
+						<td>Systems Administrator</td>
+						<td>London</td>
+						<td>21</td>
+						<td>2009/02/27</td>
+						<td>$103,500</td>
+					</tr>
+					<tr>
+						<td>Jonas Alexander</td>
+						<td>Developer</td>
+						<td>San Francisco</td>
+						<td>30</td>
+						<td>2010/07/14</td>
+						<td>$86,500</td>
+					</tr>
+					<tr>
+						<td>Shad Decker</td>
+						<td>Regional Director</td>
+						<td>Edinburgh</td>
+						<td>51</td>
+						<td>2008/11/13</td>
+						<td>$183,000</td>
+					</tr>
+					<tr>
+						<td>Michael Bruce</td>
+						<td>Javascript Developer</td>
+						<td>Singapore</td>
+						<td>29</td>
+						<td>2011/06/27</td>
+						<td>$183,000</td>
+					</tr>
+					<tr>
+						<td>Donna Snider</td>
+						<td>Customer Support</td>
+						<td>New York</td>
+						<td>27</td>
+						<td>2011/01/25</td>
+						<td>$112,000</td>
+					</tr>
+				</tbody>
+			</table>
+
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this
+					example:</p><code class="multiline brush: js;">$(document).ready(function() {
+	var table = $('#example').DataTable();
+	new $.fn.dataTable.AutoFill( table );
+} );</code>
+
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this
+					example:</p>
+
+					<ul>
+						<li><a href="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
+						<li><a href=
+						"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
+						<li><a href="../js/dataTables.autoFill.js">../js/dataTables.autoFill.js</a></li>
+					</ul>
+				</div>
+
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
+					DataTables:</p>
+				</div>
+
+				<div class="css">
+					<div>
+						<p>This example uses a little bit of additional CSS beyond what is loaded from the library
+						files (below), in order to correctly display the table. The additional CSS used is shown
+						below:</p><code class="multiline brush: js;"></code>
+					</div>
+
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the
+					table:</p>
+
+					<ul>
+						<li><a href=
+						"../../../media/css/jquery.dataTables.css">../../../media/css/jquery.dataTables.css</a></li>
+						<li><a href="../css/dataTables.autoFill.css">../css/dataTables.autoFill.css</a></li>
+					</ul>
+				</div>
+
+				<div class="ajax">
+					<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
+					will update automatically as any additional data is loaded.</p>
+				</div>
+
+				<div class="php">
+					<p>The script used to perform the server-side processing for this table is shown below. Please note
+					that this is just an example script using PHP. Server-side processing scripts can be written in any
+					language, using <a href="//datatables.net/manual/server-side">the protocol described in the
+					DataTables documentation</a>.</p>
+				</div>
+			</div>
+		</section>
+	</div>
+
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+
+			<div class="liner">
+				<h2>Other examples</h2>
+
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="./index.html">Examples</a></h3>
+						<ul class="toc active">
+							<li class="active"><a href="./simple.html">Basic initialisation</a></li>
+							<li><a href="./columns.html">Column options</a></li>
+							<li><a href="./scrolling.html">Scrolling DataTable</a></li>
+							<li><a href="./fill-both.html">Horizontal and vertical fill</a></li>
+							<li><a href="./fill-horizontal.html">Horizontal fill</a></li>
+							<li><a href="./complete-callback.html">Complete callback</a></li>
+							<li><a href="./step-callback.html">Step callback</a></li>
+						</ul>
+					</div>
+				</div>
+
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
+					information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
+					<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
+					DataTables.</p>
+
+					<p class="copyright">DataTables designed and created by <a href=
+					"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

static/js/plugins/datatables/extensions/AutoFill/examples/step-callback.html

@@ -0,0 +1,660 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
+
+	<title>AutoFill example - Step callback</title>
+	<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
+	<link rel="stylesheet" type="text/css" href="../css/dataTables.autoFill.css">
+	<link rel="stylesheet" type="text/css" href="../../../examples/resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../../../examples/resources/demo.css">
+	<style type="text/css" class="init">
+
+	</style>
+	<script type="text/javascript" language="javascript" src="../../../media/js/jquery.js"></script>
+	<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
+	<script type="text/javascript" language="javascript" src="../js/dataTables.autoFill.js"></script>
+	<script type="text/javascript" language="javascript" src="../../../examples/resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../../../examples/resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+
+
+$(document).ready(function() {
+	var table = $('#example').dataTable();
+
+	new $.fn.dataTable.AutoFill( table, {
+		columnDefs: [ {
+			targets: -1,
+			step: function ( cell, read, last, i, x, y ) {
+				var val = parseInt( (last || read).replace(/[$,]/g, ''), 10 );
+				val += (x<0 || y<0 ? -100 : 100); // - if going back up, + if going down
+
+				// Format for the currency column
+				return '$'+val.toString().replace( /\B(?=(\d{3})+(?!\d))/g, ',' );
+			}
+		} ]
+	} );
+} );
+
+
+	</script>
+</head>
+
+<body class="dt-example">
+	<div class="container">
+		<section>
+			<h1>AutoFill example <span>Step callback</span></h1>
+
+			<div class="info">
+				<p>By default, AutoFill will increment cells that contain numbers by a single digit for each cell that
+				is iterated over (try the <em>Age</em> column below for example). This behaviour can be disabled
+				completely using the <code>increment</code> column option, but it can also be modified to suit your
+				requirements through use of the <code>step</code> column callback function.</p>
+
+				<p>The <code>step</code> callback is executed for each cell in the auto-fill set and gives complete
+				control over how data is incremented. The example below shows the step function being used on the
+				<em>Salary</em> column to increment by 100, rather than 1 for each cell.</p>
+
+				<p>For a complete description of the <code>step</code> callback, please refer to the <a href=
+				"//datatables.net/extras/autofill/options">AutoFill documentation</a>.</p>
+			</div>
+
+			<table id="example" class="display" cellspacing="0" width="100%">
+				<thead>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</thead>
+
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
+
+				<tbody>
+					<tr>
+						<td>Tiger Nixon</td>
+						<td>System Architect</td>
+						<td>Edinburgh</td>
+						<td>61</td>
+						<td>2011/04/25</td>
+						<td>$320,800</td>
+					</tr>
+					<tr>
+						<td>Garrett Winters</td>
+						<td>Accountant</td>
+						<td>Tokyo</td>
+						<td>63</td>
+						<td>2011/07/25</td>
+						<td>$170,750</td>
+					</tr>
+					<tr>
+						<td>Ashton Cox</td>
+						<td>Junior Technical Author</td>
+						<td>San Francisco</td>
+						<td>66</td>
+						<td>2009/01/12</td>
+						<td>$86,000</td>
+					</tr>
+					<tr>
+						<td>Cedric Kelly</td>
+						<td>Senior Javascript Developer</td>
+						<td>Edinburgh</td>
+						<td>22</td>
+						<td>2012/03/29</td>
+						<td>$433,060</td>
+					</tr>
+					<tr>
+						<td>Airi Satou</td>
+						<td>Accountant</td>
+						<td>Tokyo</td>
+						<td>33</td>
+						<td>2008/11/28</td>
+						<td>$162,700</td>
+					</tr>
+					<tr>
+						<td>Brielle Williamson</td>
+						<td>Integration Specialist</td>
+						<td>New York</td>
+						<td>61</td>
+						<td>2012/12/02</td>
+						<td>$372,000</td>
+					</tr>
+					<tr>
+						<td>Herrod Chandler</td>
+						<td>Sales Assistant</td>
+						<td>San Francisco</td>
+						<td>59</td>
+						<td>2012/08/06</td>
+						<td>$137,500</td>
+					</tr>
+					<tr>
+						<td>Rhona Davidson</td>
+						<td>Integration Specialist</td>
+						<td>Tokyo</td>
+						<td>55</td>
+						<td>2010/10/14</td>
+						<td>$327,900</td>
+					</tr>
+					<tr>
+						<td>Colleen Hurst</td>
+						<td>Javascript Developer</td>
+						<td>San Francisco</td>
+						<td>39</td>
+						<td>2009/09/15</td>
+						<td>$205,500</td>
+					</tr>
+					<tr>
+						<td>Sonya Frost</td>
+						<td>Software Engineer</td>
+						<td>Edinburgh</td>
+						<td>23</td>
+						<td>2008/12/13</td>
+						<td>$103,600</td>
+					</tr>
+					<tr>
+						<td>Jena Gaines</td>
+						<td>Office Manager</td>
+						<td>London</td>
+						<td>30</td>
+						<td>2008/12/19</td>
+						<td>$90,560</td>
+					</tr>
+					<tr>
+						<td>Quinn Flynn</td>
+						<td>Support Lead</td>
+						<td>Edinburgh</td>
+						<td>22</td>
+						<td>2013/03/03</td>
+						<td>$342,000</td>
+					</tr>
+					<tr>
+						<td>Charde Marshall</td>
+						<td>Regional Director</td>
+						<td>San Francisco</td>
+						<td>36</td>
+						<td>2008/10/16</td>
+						<td>$470,600</td>
+					</tr>
+					<tr>
+						<td>Haley Kennedy</td>
+						<td>Senior Marketing Designer</td>
+						<td>London</td>
+						<td>43</td>
+						<td>2012/12/18</td>
+						<td>$313,500</td>
+					</tr>
+					<tr>
+						<td>Tatyana Fitzpatrick</td>
+						<td>Regional Director</td>
+						<td>London</td>
+						<td>19</td>
+						<td>2010/03/17</td>
+						<td>$385,750</td>
+					</tr>
+					<tr>
+						<td>Michael Silva</td>
+						<td>Marketing Designer</td>
+						<td>London</td>
+						<td>66</td>
+						<td>2012/11/27</td>
+						<td>$198,500</td>
+					</tr>
+					<tr>
+						<td>Paul Byrd</td>
+						<td>Chief Financial Officer (CFO)</td>
+						<td>New York</td>
+						<td>64</td>
+						<td>2010/06/09</td>
+						<td>$725,000</td>
+					</tr>
+					<tr>
+						<td>Gloria Little</td>
+						<td>Systems Administrator</td>
+						<td>New York</td>
+						<td>59</td>
+						<td>2009/04/10</td>
+						<td>$237,500</td>
+					</tr>
+					<tr>
+						<td>Bradley Greer</td>
+						<td>Software Engineer</td>
+						<td>London</td>
+						<td>41</td>
+						<td>2012/10/13</td>
+						<td>$132,000</td>
+					</tr>
+					<tr>
+						<td>Dai Rios</td>
+						<td>Personnel Lead</td>
+						<td>Edinburgh</td>
+						<td>35</td>
+						<td>2012/09/26</td>
+						<td>$217,500</td>
+					</tr>
+					<tr>
+						<td>Jenette Caldwell</td>
+						<td>Development Lead</td>
+						<td>New York</td>
+						<td>30</td>
+						<td>2011/09/03</td>
+						<td>$345,000</td>
+					</tr>
+					<tr>
+						<td>Yuri Berry</td>
+						<td>Chief Marketing Officer (CMO)</td>
+						<td>New York</td>
+						<td>40</td>
+						<td>2009/06/25</td>
+						<td>$675,000</td>
+					</tr>
+					<tr>
+						<td>Caesar Vance</td>
+						<td>Pre-Sales Support</td>
+						<td>New York</td>
+						<td>21</td>
+						<td>2011/12/12</td>
+						<td>$106,450</td>
+					</tr>
+					<tr>
+						<td>Doris Wilder</td>
+						<td>Sales Assistant</td>
+						<td>Sidney</td>
+						<td>23</td>
+						<td>2010/09/20</td>
+						<td>$85,600</td>
+					</tr>
+					<tr>
+						<td>Angelica Ramos</td>
+						<td>Chief Executive Officer (CEO)</td>
+						<td>London</td>
+						<td>47</td>
+						<td>2009/10/09</td>
+						<td>$1,200,000</td>
+					</tr>
+					<tr>
+						<td>Gavin Joyce</td>
+						<td>Developer</td>
+						<td>Edinburgh</td>
+						<td>42</td>
+						<td>2010/12/22</td>
+						<td>$92,575</td>
+					</tr>
+					<tr>
+						<td>Jennifer Chang</td>
+						<td>Regional Director</td>
+						<td>Singapore</td>
+						<td>28</td>
+						<td>2010/11/14</td>
+						<td>$357,650</td>
+					</tr>
+					<tr>
+						<td>Brenden Wagner</td>
+						<td>Software Engineer</td>
+						<td>San Francisco</td>
+						<td>28</td>
+						<td>2011/06/07</td>
+						<td>$206,850</td>
+					</tr>
+					<tr>
+						<td>Fiona Green</td>
+						<td>Chief Operating Officer (COO)</td>
+						<td>San Francisco</td>
+						<td>48</td>
+						<td>2010/03/11</td>
+						<td>$850,000</td>
+					</tr>
+					<tr>
+						<td>Shou Itou</td>
+						<td>Regional Marketing</td>
+						<td>Tokyo</td>
+						<td>20</td>
+						<td>2011/08/14</td>
+						<td>$163,000</td>
+					</tr>
+					<tr>
+						<td>Michelle House</td>
+						<td>Integration Specialist</td>
+						<td>Sidney</td>
+						<td>37</td>
+						<td>2011/06/02</td>
+						<td>$95,400</td>
+					</tr>
+					<tr>
+						<td>Suki Burks</td>
+						<td>Developer</td>
+						<td>London</td>
+						<td>53</td>
+						<td>2009/10/22</td>
+						<td>$114,500</td>
+					</tr>
+					<tr>
+						<td>Prescott Bartlett</td>
+						<td>Technical Author</td>
+						<td>London</td>
+						<td>27</td>
+						<td>2011/05/07</td>
+						<td>$145,000</td>
+					</tr>
+					<tr>
+						<td>Gavin Cortez</td>
+						<td>Team Leader</td>
+						<td>San Francisco</td>
+						<td>22</td>
+						<td>2008/10/26</td>
+						<td>$235,500</td>
+					</tr>
+					<tr>
+						<td>Martena Mccray</td>
+						<td>Post-Sales support</td>
+						<td>Edinburgh</td>
+						<td>46</td>
+						<td>2011/03/09</td>
+						<td>$324,050</td>
+					</tr>
+					<tr>
+						<td>Unity Butler</td>
+						<td>Marketing Designer</td>
+						<td>San Francisco</td>
+						<td>47</td>
+						<td>2009/12/09</td>
+						<td>$85,675</td>
+					</tr>
+					<tr>
+						<td>Howard Hatfield</td>
+						<td>Office Manager</td>
+						<td>San Francisco</td>
+						<td>51</td>
+						<td>2008/12/16</td>
+						<td>$164,500</td>
+					</tr>
+					<tr>
+						<td>Hope Fuentes</td>
+						<td>Secretary</td>
+						<td>San Francisco</td>
+						<td>41</td>
+						<td>2010/02/12</td>
+						<td>$109,850</td>
+					</tr>
+					<tr>
+						<td>Vivian Harrell</td>
+						<td>Financial Controller</td>
+						<td>San Francisco</td>
+						<td>62</td>
+						<td>2009/02/14</td>
+						<td>$452,500</td>
+					</tr>
+					<tr>
+						<td>Timothy Mooney</td>
+						<td>Office Manager</td>
+						<td>London</td>
+						<td>37</td>
+						<td>2008/12/11</td>
+						<td>$136,200</td>
+					</tr>
+					<tr>
+						<td>Jackson Bradshaw</td>
+						<td>Director</td>
+						<td>New York</td>
+						<td>65</td>
+						<td>2008/09/26</td>
+						<td>$645,750</td>
+					</tr>
+					<tr>
+						<td>Olivia Liang</td>
+						<td>Support Engineer</td>
+						<td>Singapore</td>
+						<td>64</td>
+						<td>2011/02/03</td>
+						<td>$234,500</td>
+					</tr>
+					<tr>
+						<td>Bruno Nash</td>
+						<td>Software Engineer</td>
+						<td>London</td>
+						<td>38</td>
+						<td>2011/05/03</td>
+						<td>$163,500</td>
+					</tr>
+					<tr>
+						<td>Sakura Yamamoto</td>
+						<td>Support Engineer</td>
+						<td>Tokyo</td>
+						<td>37</td>
+						<td>2009/08/19</td>
+						<td>$139,575</td>
+					</tr>
+					<tr>
+						<td>Thor Walton</td>
+						<td>Developer</td>
+						<td>New York</td>
+						<td>61</td>
+						<td>2013/08/11</td>
+						<td>$98,540</td>
+					</tr>
+					<tr>
+						<td>Finn Camacho</td>
+						<td>Support Engineer</td>
+						<td>San Francisco</td>
+						<td>47</td>
+						<td>2009/07/07</td>
+						<td>$87,500</td>
+					</tr>
+					<tr>
+						<td>Serge Baldwin</td>
+						<td>Data Coordinator</td>
+						<td>Singapore</td>
+						<td>64</td>
+						<td>2012/04/09</td>
+						<td>$138,575</td>
+					</tr>
+					<tr>
+						<td>Zenaida Frank</td>
+						<td>Software Engineer</td>
+						<td>New York</td>
+						<td>63</td>
+						<td>2010/01/04</td>
+						<td>$125,250</td>
+					</tr>
+					<tr>
+						<td>Zorita Serrano</td>
+						<td>Software Engineer</td>
+						<td>San Francisco</td>
+						<td>56</td>
+						<td>2012/06/01</td>
+						<td>$115,000</td>
+					</tr>
+					<tr>
+						<td>Jennifer Acosta</td>
+						<td>Junior Javascript Developer</td>
+						<td>Edinburgh</td>
+						<td>43</td>
+						<td>2013/02/01</td>
+						<td>$75,650</td>
+					</tr>
+					<tr>
+						<td>Cara Stevens</td>
+						<td>Sales Assistant</td>
+						<td>New York</td>
+						<td>46</td>
+						<td>2011/12/06</td>
+						<td>$145,600</td>
+					</tr>
+					<tr>
+						<td>Hermione Butler</td>
+						<td>Regional Director</td>
+						<td>London</td>
+						<td>47</td>
+						<td>2011/03/21</td>
+						<td>$356,250</td>
+					</tr>
+					<tr>
+						<td>Lael Greer</td>
+						<td>Systems Administrator</td>
+						<td>London</td>
+						<td>21</td>
+						<td>2009/02/27</td>
+						<td>$103,500</td>
+					</tr>
+					<tr>
+						<td>Jonas Alexander</td>
+						<td>Developer</td>
+						<td>San Francisco</td>
+						<td>30</td>
+						<td>2010/07/14</td>
+						<td>$86,500</td>
+					</tr>
+					<tr>
+						<td>Shad Decker</td>
+						<td>Regional Director</td>
+						<td>Edinburgh</td>
+						<td>51</td>
+						<td>2008/11/13</td>
+						<td>$183,000</td>
+					</tr>
+					<tr>
+						<td>Michael Bruce</td>
+						<td>Javascript Developer</td>
+						<td>Singapore</td>
+						<td>29</td>
+						<td>2011/06/27</td>
+						<td>$183,000</td>
+					</tr>
+					<tr>
+						<td>Donna Snider</td>
+						<td>Customer Support</td>
+						<td>New York</td>
+						<td>27</td>
+						<td>2011/01/25</td>
+						<td>$112,000</td>
+					</tr>
+				</tbody>
+			</table>
+
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this
+					example:</p><code class="multiline brush: js;">$(document).ready(function() {
+	var table = $('#example').dataTable();
+
+	new $.fn.dataTable.AutoFill( table, {
+		columnDefs: [ {
+			targets: -1,
+			step: function ( cell, read, last, i, x, y ) {
+				var val = parseInt( (last || read).replace(/[$,]/g, ''), 10 );
+				val += (x&lt;0 || y&lt;0 ? -100 : 100); // - if going back up, + if going down
+
+				// Format for the currency column
+				return '$'+val.toString().replace( /\B(?=(\d{3})+(?!\d))/g, ',' );
+			}
+		} ]
+	} );
+} );</code>
+
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this
+					example:</p>
+
+					<ul>
+						<li><a href="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
+						<li><a href=
+						"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
+						<li><a href="../js/dataTables.autoFill.js">../js/dataTables.autoFill.js</a></li>
+					</ul>
+				</div>
+
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
+					DataTables:</p>
+				</div>
+
+				<div class="css">
+					<div>
+						<p>This example uses a little bit of additional CSS beyond what is loaded from the library
+						files (below), in order to correctly display the table. The additional CSS used is shown
+						below:</p><code class="multiline brush: js;"></code>
+					</div>
+
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the
+					table:</p>
+
+					<ul>
+						<li><a href=
+						"../../../media/css/jquery.dataTables.css">../../../media/css/jquery.dataTables.css</a></li>
+						<li><a href="../css/dataTables.autoFill.css">../css/dataTables.autoFill.css</a></li>
+					</ul>
+				</div>
+
+				<div class="ajax">
+					<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
+					will update automatically as any additional data is loaded.</p>
+				</div>
+
+				<div class="php">
+					<p>The script used to perform the server-side processing for this table is shown below. Please note
+					that this is just an example script using PHP. Server-side processing scripts can be written in any
+					language, using <a href="//datatables.net/manual/server-side">the protocol described in the
+					DataTables documentation</a>.</p>
+				</div>
+			</div>
+		</section>
+	</div>
+
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+
+			<div class="liner">
+				<h2>Other examples</h2>
+
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="./index.html">Examples</a></h3>
+						<ul class="toc active">
+							<li><a href="./simple.html">Basic initialisation</a></li>
+							<li><a href="./columns.html">Column options</a></li>
+							<li><a href="./scrolling.html">Scrolling DataTable</a></li>
+							<li><a href="./fill-both.html">Horizontal and vertical fill</a></li>
+							<li><a href="./fill-horizontal.html">Horizontal fill</a></li>
+							<li><a href="./complete-callback.html">Complete callback</a></li>
+							<li class="active"><a href="./step-callback.html">Step callback</a></li>
+						</ul>
+					</div>
+				</div>
+
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
+					information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
+					<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
+					DataTables.</p>
+
+					<p class="copyright">DataTables designed and created by <a href=
+					"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

static/js/plugins/datatables/extensions/AutoFill/js/dataTables.autoFill.js

@@ -0,0 +1,855 @@
+/*! AutoFill 1.2.1
+ * ©2008-2014 SpryMedia Ltd - datatables.net/license
+ */
+
+/**
+ * @summary     AutoFill
+ * @description Add Excel like click and drag auto-fill options to DataTables
+ * @version     1.2.1
+ * @file        dataTables.autoFill.js
+ * @author      SpryMedia Ltd (www.sprymedia.co.uk)
+ * @contact     www.sprymedia.co.uk/contact
+ * @copyright   Copyright 2010-2014 SpryMedia Ltd.
+ *
+ * This source file is free software, available under the following license:
+ *   MIT license - http://datatables.net/license/mit
+ *
+ * This source file is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
+ * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.
+ *
+ * For details please refer to: http://www.datatables.net
+ */
+
+(function( window, document, undefined ) {
+
+var factory = function( $, DataTable ) {
+"use strict";
+
+/** 
+ * AutoFill provides Excel like auto-fill features for a DataTable
+ *
+ * @class AutoFill
+ * @constructor
+ * @param {object} oTD DataTables settings object
+ * @param {object} oConfig Configuration object for AutoFill
+ */
+var AutoFill = function( oDT, oConfig )
+{
+	/* Sanity check that we are a new instance */
+	if ( ! (this instanceof AutoFill) ) {
+		throw( "Warning: AutoFill must be initialised with the keyword 'new'" );
+	}
+
+	if ( ! $.fn.dataTableExt.fnVersionCheck('1.7.0') ) {
+		throw( "Warning: AutoFill requires DataTables 1.7 or greater");
+	}
+
+
+	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+	 * Public class variables
+	 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+	this.c = {};
+
+	/**
+	 * @namespace Settings object which contains customisable information for AutoFill instance
+	 */
+	this.s = {
+		/**
+		 * @namespace Cached information about the little dragging icon (the filler)
+		 */
+		"filler": {
+			"height": 0,
+			"width": 0
+		},
+
+		/**
+		 * @namespace Cached information about the border display
+		 */
+		"border": {
+			"width": 2
+		},
+
+		/**
+		 * @namespace Store for live information for the current drag
+		 */
+		"drag": {
+			"startX": -1,
+			"startY": -1,
+			"startTd": null,
+			"endTd": null,
+			"dragging": false
+		},
+
+		/**
+		 * @namespace Data cache for information that we need for scrolling the screen when we near
+		 *   the edges
+		 */
+		"screen": {
+			"interval": null,
+			"y": 0,
+			"height": 0,
+			"scrollTop": 0
+		},
+
+		/**
+		 * @namespace Data cache for the position of the DataTables scrolling element (when scrolling
+		 *   is enabled)
+		 */
+		"scroller": {
+			"top": 0,
+			"bottom": 0
+		},
+
+		/**
+		 * @namespace Information stored for each column. An array of objects
+		 */
+		"columns": []
+	};
+
+
+	/**
+	 * @namespace Common and useful DOM elements for the class instance
+	 */
+	this.dom = {
+		"table": null,
+		"filler": null,
+		"borderTop": null,
+		"borderRight": null,
+		"borderBottom": null,
+		"borderLeft": null,
+		"currentTarget": null
+	};
+
+
+
+	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+	 * Public class methods
+	 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+	/**
+	 * Retreieve the settings object from an instance
+	 *  @method fnSettings
+	 *  @returns {object} AutoFill settings object
+	 */
+	this.fnSettings = function () {
+		return this.s;
+	};
+
+
+	/* Constructor logic */
+	this._fnInit( oDT, oConfig );
+	return this;
+};
+
+
+
+AutoFill.prototype = {
+	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+	 * Private methods (they are of course public in JS, but recommended as private)
+	 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+	/**
+	 * Initialisation
+	 *  @method _fnInit
+	 *  @param {object} dt DataTables settings object
+	 *  @param {object} config Configuration object for AutoFill
+	 *  @returns void
+	 */
+	"_fnInit": function ( dt, config )
+	{
+		var
+			that = this,
+			i, iLen;
+
+		// Use DataTables API to get the settings allowing selectors, instances
+		// etc to be used, or for backwards compatibility get from the old
+		// fnSettings method
+		this.s.dt = DataTable.Api ?
+			new DataTable.Api( dt ).settings()[0] :
+			dt.fnSettings();
+		this.s.init = config || {};
+		this.dom.table = this.s.dt.nTable;
+
+		$.extend( true, this.c, AutoFill.defaults, config );
+
+		/* Add and configure the columns */
+		this._initColumns();
+
+		/* Auto Fill click and drag icon */
+		var filler = $('<div/>', {
+				'class': 'AutoFill_filler'
+			} )
+			.appendTo( 'body' );
+		this.dom.filler = filler[0];
+
+		// Get the height / width of the click element
+		this.s.filler.height = filler.height();
+		this.s.filler.width = filler.width();
+		filler[0].style.display = "none";
+
+		/* Border display - one div for each side. We can't just use a single
+		 * one with a border, as we want the events to effectively pass through
+		 * the transparent bit of the box
+		 */
+		var border;
+		var appender = document.body;
+		if ( that.s.dt.oScroll.sY !== "" ) {
+			that.s.dt.nTable.parentNode.style.position = "relative";
+			appender = that.s.dt.nTable.parentNode;
+		}
+
+		border = $('<div/>', {
+			"class": "AutoFill_border"
+		} );
+		this.dom.borderTop    = border.clone().appendTo( appender )[0];
+		this.dom.borderRight  = border.clone().appendTo( appender )[0];
+		this.dom.borderBottom = border.clone().appendTo( appender )[0];
+		this.dom.borderLeft   = border.clone().appendTo( appender )[0];
+
+		/* Events */
+		filler.on( 'mousedown.DTAF', function (e) {
+			this.onselectstart = function() { return false; };
+			that._fnFillerDragStart.call( that, e );
+			return false;
+		} );
+
+		$('tbody', this.dom.table).on(
+			'mouseover.DTAF mouseout.DTAF',
+			'>tr>td, >tr>th',
+			function (e) {
+				that._fnFillerDisplay.call( that, e );
+			}
+		);
+
+		$(this.dom.table).on( 'destroy.dt.DTAF', function () {
+			filler.off( 'mousedown.DTAF' ).remove();
+			$('tbody', this.dom.table).off( 'mouseover.DTAF mouseout.DTAF' );
+		} );
+	},
+
+
+	_initColumns: function ( )
+	{
+		var that = this;
+		var i, ien;
+		var dt = this.s.dt;
+		var config = this.s.init;
+
+		for ( i=0, ien=dt.aoColumns.length ; i<ien ; i++ ) {
+			this.s.columns[i] = $.extend( true, {}, AutoFill.defaults.column );
+		}
+
+		dt.oApi._fnApplyColumnDefs(
+			dt,
+			config.aoColumnDefs || config.columnDefs,
+			config.aoColumns || config.columns,
+			function (colIdx, def) {
+				that._fnColumnOptions( colIdx, def );
+			}
+		);
+
+		// For columns which don't have read, write, step functions defined,
+		// use the default ones
+		for ( i=0, ien=dt.aoColumns.length ; i<ien ; i++ ) {
+			var column = this.s.columns[i];
+
+			if ( ! column.read ) {
+				column.read = this._fnReadCell;
+			}
+			if ( ! column.write ) {
+				column.read = this._fnWriteCell;
+			}
+			if ( ! column.step ) {
+				column.read = this._fnStep;
+			}
+		}
+	},
+
+
+	"_fnColumnOptions": function ( i, opts )
+	{
+		var column = this.s.columns[ i ];
+		var set = function ( outProp, inProp ) {
+			if ( opts[ inProp[0] ] !== undefined ) {
+				column[ outProp ] = opts[ inProp[0] ];
+			}
+			if ( opts[ inProp[1] ] !== undefined ) {
+				column[ outProp ] = opts[ inProp[1] ];
+			}
+		};
+
+		// Compatibility with the old Hungarian style of notation
+		set( 'enable',    ['bEnable',     'enable'] );
+		set( 'read',      ['fnRead',      'read'] );
+		set( 'write',     ['fnWrite',     'write'] );
+		set( 'step',      ['fnStep',      'step'] );
+		set( 'increment', ['bIncrement',  'increment'] );
+	},
+
+
+	/**
+	 * Find out the coordinates of a given TD cell in a table
+	 *  @method  _fnTargetCoords
+	 *  @param   {Node} nTd
+	 *  @returns {Object} x and y properties, for the position of the cell in the tables DOM
+	 */
+	"_fnTargetCoords": function ( nTd )
+	{
+		var nTr = $(nTd).parents('tr')[0];
+		var position = this.s.dt.oInstance.fnGetPosition( nTd );
+
+		return {
+			"x":      $('td', nTr).index(nTd),
+			"y":      $('tr', nTr.parentNode).index(nTr),
+			"row":    position[0],
+			"column": position[2]
+		};
+	},
+
+
+	/**
+	 * Display the border around one or more cells (from start to end)
+	 *  @method  _fnUpdateBorder
+	 *  @param   {Node} nStart Starting cell
+	 *  @param   {Node} nEnd Ending cell
+	 *  @returns void
+	 */
+	"_fnUpdateBorder": function ( nStart, nEnd )
+	{
+		var
+			border = this.s.border.width,
+			offsetStart = $(nStart).offset(),
+			offsetEnd = $(nEnd).offset(),
+			x1 = offsetStart.left - border,
+			x2 = offsetEnd.left + $(nEnd).outerWidth(),
+			y1 = offsetStart.top - border,
+			y2 = offsetEnd.top + $(nEnd).outerHeight(),
+			width = offsetEnd.left + $(nEnd).outerWidth() - offsetStart.left + (2*border),
+			height = offsetEnd.top + $(nEnd).outerHeight() - offsetStart.top + (2*border),
+			oStyle;
+
+		// Recalculate start and end (when dragging "backwards")  
+		if( offsetStart.left > offsetEnd.left) {
+			x1 = offsetEnd.left - border;
+			x2 = offsetStart.left + $(nStart).outerWidth();
+			width = offsetStart.left + $(nStart).outerWidth() - offsetEnd.left + (2*border);
+		}
+
+		if ( this.s.dt.oScroll.sY !== "" )
+		{
+			/* The border elements are inside the DT scroller - so position relative to that */
+			var
+				offsetScroll = $(this.s.dt.nTable.parentNode).offset(),
+				scrollTop = $(this.s.dt.nTable.parentNode).scrollTop(),
+				scrollLeft = $(this.s.dt.nTable.parentNode).scrollLeft();
+
+			x1 -= offsetScroll.left - scrollLeft;
+			x2 -= offsetScroll.left - scrollLeft;
+			y1 -= offsetScroll.top - scrollTop;
+			y2 -= offsetScroll.top - scrollTop;
+		}
+
+		/* Top */
+		oStyle = this.dom.borderTop.style;
+		oStyle.top = y1+"px";
+		oStyle.left = x1+"px";
+		oStyle.height = this.s.border.width+"px";
+		oStyle.width = width+"px";
+
+		/* Bottom */
+		oStyle = this.dom.borderBottom.style;
+		oStyle.top = y2+"px";
+		oStyle.left = x1+"px";
+		oStyle.height = this.s.border.width+"px";
+		oStyle.width = width+"px";
+
+		/* Left */
+		oStyle = this.dom.borderLeft.style;
+		oStyle.top = y1+"px";
+		oStyle.left = x1+"px";
+		oStyle.height = height+"px";
+		oStyle.width = this.s.border.width+"px";
+
+		/* Right */
+		oStyle = this.dom.borderRight.style;
+		oStyle.top = y1+"px";
+		oStyle.left = x2+"px";
+		oStyle.height = height+"px";
+		oStyle.width = this.s.border.width+"px";
+	},
+
+
+	/**
+	 * Mouse down event handler for starting a drag
+	 *  @method  _fnFillerDragStart
+	 *  @param   {Object} e Event object
+	 *  @returns void
+	 */
+	"_fnFillerDragStart": function (e)
+	{
+		var that = this;
+		var startingTd = this.dom.currentTarget;
+
+		this.s.drag.dragging = true;
+
+		that.dom.borderTop.style.display = "block";
+		that.dom.borderRight.style.display = "block";
+		that.dom.borderBottom.style.display = "block";
+		that.dom.borderLeft.style.display = "block";
+
+		var coords = this._fnTargetCoords( startingTd );
+		this.s.drag.startX = coords.x;
+		this.s.drag.startY = coords.y;
+
+		this.s.drag.startTd = startingTd;
+		this.s.drag.endTd = startingTd;
+
+		this._fnUpdateBorder( startingTd, startingTd );
+
+		$(document).bind('mousemove.AutoFill', function (e) {
+			that._fnFillerDragMove.call( that, e );
+		} );
+
+		$(document).bind('mouseup.AutoFill', function (e) {
+			that._fnFillerFinish.call( that, e );
+		} );
+
+		/* Scrolling information cache */
+		this.s.screen.y = e.pageY;
+		this.s.screen.height = $(window).height();
+		this.s.screen.scrollTop = $(document).scrollTop();
+
+		if ( this.s.dt.oScroll.sY !== "" )
+		{
+			this.s.scroller.top = $(this.s.dt.nTable.parentNode).offset().top;
+			this.s.scroller.bottom = this.s.scroller.top + $(this.s.dt.nTable.parentNode).height();
+		}
+
+		/* Scrolling handler - we set an interval (which is cancelled on mouse up) which will fire
+		 * regularly and see if we need to do any scrolling
+		 */
+		this.s.screen.interval = setInterval( function () {
+			var iScrollTop = $(document).scrollTop();
+			var iScrollDelta = iScrollTop - that.s.screen.scrollTop;
+			that.s.screen.y += iScrollDelta;
+
+			if ( that.s.screen.height - that.s.screen.y + iScrollTop < 50 )
+			{
+				$('html, body').animate( {
+					"scrollTop": iScrollTop + 50
+				}, 240, 'linear' );
+			}
+			else if ( that.s.screen.y - iScrollTop < 50 )
+			{
+				$('html, body').animate( {
+					"scrollTop": iScrollTop - 50
+				}, 240, 'linear' );
+			}
+
+			if ( that.s.dt.oScroll.sY !== "" )
+			{
+				if ( that.s.screen.y > that.s.scroller.bottom - 50 )
+				{
+					$(that.s.dt.nTable.parentNode).animate( {
+						"scrollTop": $(that.s.dt.nTable.parentNode).scrollTop() + 50
+					}, 240, 'linear' );
+				}
+				else if ( that.s.screen.y < that.s.scroller.top + 50 )
+				{
+					$(that.s.dt.nTable.parentNode).animate( {
+						"scrollTop": $(that.s.dt.nTable.parentNode).scrollTop() - 50
+					}, 240, 'linear' );
+				}
+			}
+		}, 250 );
+	},
+
+
+	/**
+	 * Mouse move event handler for during a move. See if we want to update the display based on the
+	 * new cursor position
+	 *  @method  _fnFillerDragMove
+	 *  @param   {Object} e Event object
+	 *  @returns void
+	 */
+	"_fnFillerDragMove": function (e)
+	{
+		if ( e.target && e.target.nodeName.toUpperCase() == "TD" &&
+			 e.target != this.s.drag.endTd )
+		{
+			var coords = this._fnTargetCoords( e.target );
+
+			if ( this.c.mode == "y" && coords.x != this.s.drag.startX )
+			{
+				e.target = $('tbody>tr:eq('+coords.y+')>td:eq('+this.s.drag.startX+')', this.dom.table)[0];
+			}
+			if ( this.c.mode == "x" && coords.y != this.s.drag.startY )
+			{
+				e.target = $('tbody>tr:eq('+this.s.drag.startY+')>td:eq('+coords.x+')', this.dom.table)[0];
+			}
+
+			if ( this.c.mode == "either")
+			{
+				if(coords.x != this.s.drag.startX )
+				{
+					e.target = $('tbody>tr:eq('+this.s.drag.startY+')>td:eq('+coords.x+')', this.dom.table)[0];
+				}
+				else if ( coords.y != this.s.drag.startY ) {
+					e.target = $('tbody>tr:eq('+coords.y+')>td:eq('+this.s.drag.startX+')', this.dom.table)[0];
+				}
+			}
+
+			// update coords
+			if ( this.c.mode !== "both" ) {
+				coords = this._fnTargetCoords( e.target );
+			}
+
+			var drag = this.s.drag;
+			drag.endTd = e.target;
+
+			if ( coords.y >= this.s.drag.startY ) {
+				this._fnUpdateBorder( drag.startTd, drag.endTd );
+			}
+			else {
+				this._fnUpdateBorder( drag.endTd, drag.startTd );
+			}
+			this._fnFillerPosition( e.target );
+		}
+
+		/* Update the screen information so we can perform scrolling */
+		this.s.screen.y = e.pageY;
+		this.s.screen.scrollTop = $(document).scrollTop();
+
+		if ( this.s.dt.oScroll.sY !== "" )
+		{
+			this.s.scroller.scrollTop = $(this.s.dt.nTable.parentNode).scrollTop();
+			this.s.scroller.top = $(this.s.dt.nTable.parentNode).offset().top;
+			this.s.scroller.bottom = this.s.scroller.top + $(this.s.dt.nTable.parentNode).height();
+		}
+	},
+
+
+	/**
+	 * Mouse release handler - end the drag and take action to update the cells with the needed values
+	 *  @method  _fnFillerFinish
+	 *  @param   {Object} e Event object
+	 *  @returns void
+	 */
+	"_fnFillerFinish": function (e)
+	{
+		var that = this, i, iLen, j;
+
+		$(document).unbind('mousemove.AutoFill mouseup.AutoFill');
+
+		this.dom.borderTop.style.display = "none";
+		this.dom.borderRight.style.display = "none";
+		this.dom.borderBottom.style.display = "none";
+		this.dom.borderLeft.style.display = "none";
+
+		this.s.drag.dragging = false;
+
+		clearInterval( this.s.screen.interval );
+
+		var cells = [];
+		var table = this.dom.table;
+		var coordsStart = this._fnTargetCoords( this.s.drag.startTd );
+		var coordsEnd = this._fnTargetCoords( this.s.drag.endTd );
+		var columnIndex = function ( visIdx ) {
+			return that.s.dt.oApi._fnVisibleToColumnIndex( that.s.dt, visIdx );
+		};
+
+		// xxx - urgh - there must be a way of reducing this...
+		if ( coordsStart.y <= coordsEnd.y ) {
+			for ( i=coordsStart.y ; i<=coordsEnd.y ; i++ ) {
+				if ( coordsStart.x <= coordsEnd.x ) {
+					for ( j=coordsStart.x ; j<=coordsEnd.x ; j++ ) {
+						cells.push( {
+							node:   $('tbody>tr:eq('+i+')>td:eq('+j+')', table)[0],
+							x:      j - coordsStart.x,
+							y:      i - coordsStart.y,
+							colIdx: columnIndex( j )
+						} );
+					}
+				}
+				else {
+					for ( j=coordsStart.x ; j>=coordsEnd.x ; j-- ) {
+						cells.push( {
+							node:   $('tbody>tr:eq('+i+')>td:eq('+j+')', table)[0],
+							x:      j - coordsStart.x,
+							y:      i - coordsStart.y,
+							colIdx: columnIndex( j )
+						} );
+					}
+				}
+			}
+		}
+		else {
+			for ( i=coordsStart.y ; i>=coordsEnd.y ; i-- ) {
+				if ( coordsStart.x <= coordsEnd.x ) {
+					for ( j=coordsStart.x ; j<=coordsEnd.x ; j++ ) {
+						cells.push( {
+							node:   $('tbody>tr:eq('+i+')>td:eq('+j+')', table)[0],
+							x:      j - coordsStart.x,
+							y:      i - coordsStart.y,
+							colIdx: columnIndex( j )
+						} );
+					}
+				}
+				else {
+					for ( j=coordsStart.x ; j>=coordsEnd.x ; j-- ) {
+						cells.push( {
+							node:   $('tbody>tr:eq('+i+')>td:eq('+j+')', table)[0],
+							x:      coordsStart.x - j,
+							y:      coordsStart.y - i,
+							colIdx: columnIndex( j )
+						} );
+					}
+				}
+			}
+		}
+
+		// An auto-fill requires 2 or more cells
+		if ( cells.length <= 1 ) {
+			return;
+		}
+
+		var edited = [];
+		var previous;
+
+		for ( i=0, iLen=cells.length ; i<iLen ; i++ ) {
+			var cell      = cells[i];
+			var column    = this.s.columns[ cell.colIdx ];
+			var read      = column.read.call( column, cell.node );
+			var stepValue = column.step.call( column, cell.node, read, previous, i, cell.x, cell.y );
+
+			column.write.call( column, cell.node, stepValue );
+
+			previous = stepValue;
+			edited.push( {
+				cell:     cell,
+				colIdx:   cell.colIdx,
+				newValue: stepValue,
+				oldValue: read
+			} );
+		}
+
+		if ( this.c.complete !== null ) {
+			this.c.complete.call( this, edited );
+		}
+
+		// In 1.10 we can do a static draw
+		if ( DataTable.Api ) {
+			new DataTable.Api( this.s.dt ).draw( false );
+		}
+		else {
+			this.s.dt.oInstance.fnDraw();
+		}
+	},
+
+
+	/**
+	 * Display the drag handle on mouse over cell
+	 *  @method  _fnFillerDisplay
+	 *  @param   {Object} e Event object
+	 *  @returns void
+	 */
+	"_fnFillerDisplay": function (e)
+	{
+		var filler = this.dom.filler;
+
+		/* Don't display automatically when dragging */
+		if ( this.s.drag.dragging)
+		{
+			return;
+		}
+
+		/* Check that we are allowed to AutoFill this column or not */
+		var nTd = (e.target.nodeName.toLowerCase() == 'td') ? e.target : $(e.target).parents('td')[0];
+		var iX = this._fnTargetCoords(nTd).column;
+		if ( !this.s.columns[iX].enable )
+		{
+			filler.style.display = "none";
+			return;
+		}
+
+		if (e.type == 'mouseover')
+		{
+			this.dom.currentTarget = nTd;
+			this._fnFillerPosition( nTd );
+
+			filler.style.display = "block";
+		}
+		else if ( !e.relatedTarget || !e.relatedTarget.className.match(/AutoFill/) )
+		{
+			filler.style.display = "none";
+		}
+	},
+
+
+	/**
+	 * Position the filler icon over a cell
+	 *  @method  _fnFillerPosition
+	 *  @param   {Node} nTd Cell to position filler icon over
+	 *  @returns void
+	 */
+	"_fnFillerPosition": function ( nTd )
+	{
+		var offset = $(nTd).offset();
+		var filler = this.dom.filler;
+		filler.style.top = (offset.top - (this.s.filler.height / 2)-1 + $(nTd).outerHeight())+"px";
+		filler.style.left = (offset.left - (this.s.filler.width / 2)-1 + $(nTd).outerWidth())+"px";
+	}
+};
+
+
+// Alias for access
+DataTable.AutoFill = AutoFill;
+DataTable.AutoFill = AutoFill;
+
+
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ * Constants
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+/**
+ * AutoFill version
+ *  @constant  version
+ *  @type      String
+ *  @default   See code
+ */
+AutoFill.version = "1.2.1";
+
+
+/**
+ * AutoFill defaults
+ *  @namespace
+ */
+AutoFill.defaults = {
+	/**
+	 * Mode for dragging (restrict to y-axis only, x-axis only, either one or none):
+	 *
+	 *  * `y`      - y-axis only (default)
+	 *  * `x`      - x-axis only
+	 *  * `either` - either one, but not both axis at the same time
+	 *  * `both`   - multiple cells allowed
+	 *
+	 * @type {string}
+	 * @default `y`
+	 */
+	mode: 'y',
+
+	complete: null,
+
+	/**
+	 * Column definition defaults
+	 *  @namespace
+	 */
+	column: {
+		/**
+		 * If AutoFill should be enabled on this column
+		 *
+		 * @type {boolean}
+		 * @default true
+		 */
+		enable: true,
+
+		/**
+		 * Allow automatic increment / decrement on this column if a number
+		 * is found.
+		 *
+		 * @type {boolean}
+		 * @default true
+		 */
+		increment: true,
+
+		/**
+		 * Cell read function
+		 *
+		 * Default function will simply read the value from the HTML of the
+		 * cell.
+		 *
+		 * @type   {function}
+		 * @param  {node} cell `th` / `td` element to read the value from
+		 * @return {string}    Data that has been read
+		 */
+		read: function ( cell ) {
+			return $(cell).html();
+		},
+
+		/**
+		 * Cell write function
+		 *
+		 * Default function will simply write to the HTML and tell the DataTable
+		 * to update.
+		 *
+		 * @type   {function}
+		 * @param  {node} cell `th` / `td` element to write the value to
+		 * @return {string}    Data two write
+		 */
+		write: function ( cell, val ) {
+			var table = $(cell).parents('table');
+			if ( DataTable.Api ) {
+				// 1.10
+				table.DataTable().cell( cell ).data( val );
+			}
+			else {
+				// 1.9
+				var dt = table.dataTable();
+				var pos = dt.fnGetPosition( cell );
+				dt.fnUpdate( val, pos[0], pos[2], false );
+			}
+		},
+
+		/**
+		 * Step function. This provides the ability to customise how the values
+		 * are incremented.
+		 *
+		 * @param  {node} cell `th` / `td` element that is being operated upon
+		 * @param  {string} read Cell value from `read` function
+		 * @param  {string} last Value of the previous cell
+		 * @param  {integer} i Loop counter
+		 * @param  {integer} x Cell x-position in the current auto-fill. The
+		 *   starting cell is coordinate 0 regardless of its physical position
+		 *   in the DataTable.
+		 * @param  {integer} y Cell y-position in the current auto-fill. The
+		 *   starting cell is coordinate 0 regardless of its physical position
+		 *   in the DataTable.
+		 * @return {string} Value to write
+		 */
+		step: function ( cell, read, last, i, x, y ) {
+			// Increment a number if it is found
+			var re = /(\-?\d+)/;
+			var match = this.increment && last ? last.match(re) : null;
+			if ( match ) {
+				return last.replace( re, parseInt(match[1],10) + (x<0 || y<0 ? -1 : 1) );
+			}
+			return last === undefined ?
+				read :
+				last;
+		}
+	}
+};
+
+return AutoFill;
+};
+
+
+// Define as an AMD module if possible
+if ( typeof define === 'function' && define.amd ) {
+	define( ['jquery', 'datatables'], factory );
+}
+else if ( typeof exports === 'object' ) {
+    // Node/CommonJS
+    factory( require('jquery'), require('datatables') );
+}
+else if ( jQuery && !jQuery.fn.dataTable.AutoFill ) {
+	// Otherwise simply initialise as normal, stopping multiple evaluation
+	factory( jQuery, jQuery.fn.dataTable );
+}
+
+
+}(window, document));
+

static/js/plugins/datatables/extensions/AutoFill/js/dataTables.autoFill.min.js

@@ -0,0 +1,22 @@
+/*!
+ AutoFill 1.2.1
+ ©2008-2014 SpryMedia Ltd - datatables.net/license
+*/
+(function(o,j,m){var l=function(c,k){var h=function(d,b){if(!(this instanceof h))throw"Warning: AutoFill must be initialised with the keyword 'new'";if(!c.fn.dataTableExt.fnVersionCheck("1.7.0"))throw"Warning: AutoFill requires DataTables 1.7 or greater";this.c={};this.s={filler:{height:0,width:0},border:{width:2},drag:{startX:-1,startY:-1,startTd:null,endTd:null,dragging:!1},screen:{interval:null,y:0,height:0,scrollTop:0},scroller:{top:0,bottom:0},columns:[]};this.dom={table:null,filler:null,borderTop:null,
+borderRight:null,borderBottom:null,borderLeft:null,currentTarget:null};this.fnSettings=function(){return this.s};this._fnInit(d,b);return this};h.prototype={_fnInit:function(d,b){var a=this;this.s.dt=k.Api?(new k.Api(d)).settings()[0]:d.fnSettings();this.s.init=b||{};this.dom.table=this.s.dt.nTable;c.extend(!0,this.c,h.defaults,b);this._initColumns();var e=c("<div/>",{"class":"AutoFill_filler"}).appendTo("body");this.dom.filler=e[0];this.s.filler.height=e.height();this.s.filler.width=e.width();e[0].style.display=
+"none";var g,f=j.body;""!==a.s.dt.oScroll.sY&&(a.s.dt.nTable.parentNode.style.position="relative",f=a.s.dt.nTable.parentNode);g=c("<div/>",{"class":"AutoFill_border"});this.dom.borderTop=g.clone().appendTo(f)[0];this.dom.borderRight=g.clone().appendTo(f)[0];this.dom.borderBottom=g.clone().appendTo(f)[0];this.dom.borderLeft=g.clone().appendTo(f)[0];e.on("mousedown.DTAF",function(b){this.onselectstart=function(){return false};a._fnFillerDragStart.call(a,b);return false});c("tbody",this.dom.table).on("mouseover.DTAF mouseout.DTAF",
+">tr>td, >tr>th",function(b){a._fnFillerDisplay.call(a,b)});c(this.dom.table).on("destroy.dt.DTAF",function(){e.off("mousedown.DTAF").remove();c("tbody",this.dom.table).off("mouseover.DTAF mouseout.DTAF")})},_initColumns:function(){var d=this,b,a,e=this.s.dt,g=this.s.init;b=0;for(a=e.aoColumns.length;b<a;b++)this.s.columns[b]=c.extend(!0,{},h.defaults.column);e.oApi._fnApplyColumnDefs(e,g.aoColumnDefs||g.columnDefs,g.aoColumns||g.columns,function(a,b){d._fnColumnOptions(a,b)});b=0;for(a=e.aoColumns.length;b<
+a;b++)if(e=this.s.columns[b],e.read||(e.read=this._fnReadCell),e.write||(e.read=this._fnWriteCell),!e.step)e.read=this._fnStep},_fnColumnOptions:function(d,b){var a=this.s.columns[d],c=function(c,d){b[d[0]]!==m&&(a[c]=b[d[0]]);b[d[1]]!==m&&(a[c]=b[d[1]])};c("enable",["bEnable","enable"]);c("read",["fnRead","read"]);c("write",["fnWrite","write"]);c("step",["fnStep","step"]);c("increment",["bIncrement","increment"])},_fnTargetCoords:function(d){var b=c(d).parents("tr")[0],a=this.s.dt.oInstance.fnGetPosition(d);
+return{x:c("td",b).index(d),y:c("tr",b.parentNode).index(b),row:a[0],column:a[2]}},_fnUpdateBorder:function(d,b){var a=this.s.border.width,e=c(d).offset(),g=c(b).offset(),f=e.left-a,i=g.left+c(b).outerWidth(),n=e.top-a,h=g.top+c(b).outerHeight(),j=g.left+c(b).outerWidth()-e.left+2*a,k=g.top+c(b).outerHeight()-e.top+2*a;e.left>g.left&&(f=g.left-a,i=e.left+c(d).outerWidth(),j=e.left+c(d).outerWidth()-g.left+2*a);""!==this.s.dt.oScroll.sY&&(a=c(this.s.dt.nTable.parentNode).offset(),e=c(this.s.dt.nTable.parentNode).scrollTop(),
+g=c(this.s.dt.nTable.parentNode).scrollLeft(),f-=a.left-g,i-=a.left-g,n-=a.top-e,h-=a.top-e);a=this.dom.borderTop.style;a.top=n+"px";a.left=f+"px";a.height=this.s.border.width+"px";a.width=j+"px";a=this.dom.borderBottom.style;a.top=h+"px";a.left=f+"px";a.height=this.s.border.width+"px";a.width=j+"px";a=this.dom.borderLeft.style;a.top=n+"px";a.left=f+"px";a.height=k+"px";a.width=this.s.border.width+"px";a=this.dom.borderRight.style;a.top=n+"px";a.left=i+"px";a.height=k+"px";a.width=this.s.border.width+
+"px"},_fnFillerDragStart:function(d){var b=this,a=this.dom.currentTarget;this.s.drag.dragging=!0;b.dom.borderTop.style.display="block";b.dom.borderRight.style.display="block";b.dom.borderBottom.style.display="block";b.dom.borderLeft.style.display="block";var e=this._fnTargetCoords(a);this.s.drag.startX=e.x;this.s.drag.startY=e.y;this.s.drag.startTd=a;this.s.drag.endTd=a;this._fnUpdateBorder(a,a);c(j).bind("mousemove.AutoFill",function(a){b._fnFillerDragMove.call(b,a)});c(j).bind("mouseup.AutoFill",
+function(a){b._fnFillerFinish.call(b,a)});this.s.screen.y=d.pageY;this.s.screen.height=c(o).height();this.s.screen.scrollTop=c(j).scrollTop();""!==this.s.dt.oScroll.sY&&(this.s.scroller.top=c(this.s.dt.nTable.parentNode).offset().top,this.s.scroller.bottom=this.s.scroller.top+c(this.s.dt.nTable.parentNode).height());this.s.screen.interval=setInterval(function(){var a=c(j).scrollTop();b.s.screen.y=b.s.screen.y+(a-b.s.screen.scrollTop);b.s.screen.height-b.s.screen.y+a<50?c("html, body").animate({scrollTop:a+
+50},240,"linear"):b.s.screen.y-a<50&&c("html, body").animate({scrollTop:a-50},240,"linear");b.s.dt.oScroll.sY!==""&&(b.s.screen.y>b.s.scroller.bottom-50?c(b.s.dt.nTable.parentNode).animate({scrollTop:c(b.s.dt.nTable.parentNode).scrollTop()+50},240,"linear"):b.s.screen.y<b.s.scroller.top+50&&c(b.s.dt.nTable.parentNode).animate({scrollTop:c(b.s.dt.nTable.parentNode).scrollTop()-50},240,"linear"))},250)},_fnFillerDragMove:function(d){if(d.target&&"TD"==d.target.nodeName.toUpperCase()&&d.target!=this.s.drag.endTd){var b=
+this._fnTargetCoords(d.target);"y"==this.c.mode&&b.x!=this.s.drag.startX&&(d.target=c("tbody>tr:eq("+b.y+")>td:eq("+this.s.drag.startX+")",this.dom.table)[0]);"x"==this.c.mode&&b.y!=this.s.drag.startY&&(d.target=c("tbody>tr:eq("+this.s.drag.startY+")>td:eq("+b.x+")",this.dom.table)[0]);"either"==this.c.mode&&(b.x!=this.s.drag.startX?d.target=c("tbody>tr:eq("+this.s.drag.startY+")>td:eq("+b.x+")",this.dom.table)[0]:b.y!=this.s.drag.startY&&(d.target=c("tbody>tr:eq("+b.y+")>td:eq("+this.s.drag.startX+
+")",this.dom.table)[0]));"both"!==this.c.mode&&(b=this._fnTargetCoords(d.target));var a=this.s.drag;a.endTd=d.target;b.y>=this.s.drag.startY?this._fnUpdateBorder(a.startTd,a.endTd):this._fnUpdateBorder(a.endTd,a.startTd);this._fnFillerPosition(d.target)}this.s.screen.y=d.pageY;this.s.screen.scrollTop=c(j).scrollTop();""!==this.s.dt.oScroll.sY&&(this.s.scroller.scrollTop=c(this.s.dt.nTable.parentNode).scrollTop(),this.s.scroller.top=c(this.s.dt.nTable.parentNode).offset().top,this.s.scroller.bottom=
+this.s.scroller.top+c(this.s.dt.nTable.parentNode).height())},_fnFillerFinish:function(){var d=this,b,a;c(j).unbind("mousemove.AutoFill mouseup.AutoFill");this.dom.borderTop.style.display="none";this.dom.borderRight.style.display="none";this.dom.borderBottom.style.display="none";this.dom.borderLeft.style.display="none";this.s.drag.dragging=!1;clearInterval(this.s.screen.interval);var e=[],g=this.dom.table,f=this._fnTargetCoords(this.s.drag.startTd),i=this._fnTargetCoords(this.s.drag.endTd),h=function(a){return d.s.dt.oApi._fnVisibleToColumnIndex(d.s.dt,
+a)};if(f.y<=i.y)for(b=f.y;b<=i.y;b++)if(f.x<=i.x)for(a=f.x;a<=i.x;a++)e.push({node:c("tbody>tr:eq("+b+")>td:eq("+a+")",g)[0],x:a-f.x,y:b-f.y,colIdx:h(a)});else for(a=f.x;a>=i.x;a--)e.push({node:c("tbody>tr:eq("+b+")>td:eq("+a+")",g)[0],x:a-f.x,y:b-f.y,colIdx:h(a)});else for(b=f.y;b>=i.y;b--)if(f.x<=i.x)for(a=f.x;a<=i.x;a++)e.push({node:c("tbody>tr:eq("+b+")>td:eq("+a+")",g)[0],x:a-f.x,y:b-f.y,colIdx:h(a)});else for(a=f.x;a>=i.x;a--)e.push({node:c("tbody>tr:eq("+b+")>td:eq("+a+")",g)[0],x:f.x-a,y:f.y-
+b,colIdx:h(a)});if(!(1>=e.length)){var g=[],m;b=0;for(a=e.length;b<a;b++){var f=e[b],i=this.s.columns[f.colIdx],h=i.read.call(i,f.node),l=i.step.call(i,f.node,h,m,b,f.x,f.y);i.write.call(i,f.node,l);m=l;g.push({cell:f,colIdx:f.colIdx,newValue:l,oldValue:h})}null!==this.c.complete&&this.c.complete.call(this,g);k.Api?(new k.Api(this.s.dt)).draw(!1):this.s.dt.oInstance.fnDraw()}},_fnFillerDisplay:function(d){var b=this.dom.filler;if(!this.s.drag.dragging){var a="td"==d.target.nodeName.toLowerCase()?
+d.target:c(d.target).parents("td")[0],e=this._fnTargetCoords(a).column;if(this.s.columns[e].enable)if("mouseover"==d.type)this.dom.currentTarget=a,this._fnFillerPosition(a),b.style.display="block";else{if(!d.relatedTarget||!d.relatedTarget.className.match(/AutoFill/))b.style.display="none"}else b.style.display="none"}},_fnFillerPosition:function(d){var b=c(d).offset(),a=this.dom.filler;a.style.top=b.top-this.s.filler.height/2-1+c(d).outerHeight()+"px";a.style.left=b.left-this.s.filler.width/2-1+c(d).outerWidth()+
+"px"}};k.AutoFill=h;k.AutoFill=h;h.version="1.2.1";h.defaults={mode:"y",complete:null,column:{enable:!0,increment:!0,read:function(d){return c(d).html()},write:function(d,b){var a=c(d).parents("table");if(k.Api)a.DataTable().cell(d).data(b);else{var a=a.dataTable(),e=a.fnGetPosition(d);a.fnUpdate(b,e[0],e[2],!1)}},step:function(c,b,a,e,g,f){c=/(\-?\d+)/;return(e=this.increment&&a?a.match(c):null)?a.replace(c,parseInt(e[1],10)+(0>g||0>f?-1:1)):a===m?b:a}}};return h};"function"===typeof define&&define.amd?
+define(["jquery","datatables"],l):"object"===typeof exports?l(require("jquery"),require("datatables")):jQuery&&!jQuery.fn.dataTable.AutoFill&&l(jQuery,jQuery.fn.dataTable)})(window,document);

static/js/plugins/datatables/extensions/ColReorder/License.txt

@@ -0,0 +1,20 @@
+Copyright (c) 2010-2015 SpryMedia Limited
+http://datatables.net
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

static/js/plugins/datatables/extensions/ColReorder/Readme.md

@@ -0,0 +1,39 @@
+# ColReorder
+
+ColReorder adds the ability for the end user to click and drag column headers to reorder a table as they see fit, to DataTables. Key features include:
+
+* Very easy integration with DataTables
+* Tight integration with all other DataTables plug-ins
+* The ability to exclude the first (or more) column from being movable
+* Predefine a column order
+* Save staving integration with DataTables
+
+
+# Installation
+
+To use ColReorder, first download DataTables ( http://datatables.net/download ) and place the unzipped ColReorder package into a `extensions` directory in the DataTables package. This will allow the pages in the examples to operate correctly. To see the examples running, open the `examples` directory in your web-browser.
+
+
+# Basic usage
+
+ColReorder is initialised using the `$.fn.dataTable.ColReorder` constructor. For example:
+
+```js
+$(document).ready( function () {
+    $('#example').DataTable();
+
+    new $.fn.dataTable.ColReorder( table );
+} );
+```
+
+
+# Documentation / support
+
+* Documentation: http://datatables.net/extensions/colreorder/
+* DataTables support forums: http://datatables.net/forums
+
+
+# GitHub
+
+If you fancy getting involved with the development of ColReorder and help make it better, please refer to its GitHub repo: https://github.com/DataTables/ColReorder
+

static/js/plugins/datatables/extensions/ColReorder/css/dataTables.colReorder.css

@@ -0,0 +1,14 @@
+/*
+ * Namespace DTCR - "DataTables ColReorder" plug-in
+ */
+
+table.DTCR_clonedTable {
+	background-color: rgba(255, 255, 255, 0.7);
+	z-index: 202;
+}
+
+div.DTCR_pointer {
+	width: 1px;
+	background-color: #0259C4;
+	z-index: 201;
+}