devoops-rails 0.1.1 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: a63ca3f5a0fb7a0eeab340a5d31af1a89697dceb
-  data.tar.gz: 7f4edf4739e1d9c6f54bb73a32710eea86fa30ac
+  metadata.gz: e7c4ccb88d82f3414f4c465c568143bfaf6e2b3c
+  data.tar.gz: ec266a440127c6de40fccf54dfcd3a0ce4904b0a
 SHA512:
-  metadata.gz: 05ae9c4193756b4e608253239d392e74db449a24de2ae85a6a4ec4eb15f3941f6913d10c21ab2a8a329f4f398346a304b369cee6102c6251119d54a445f1b83f
-  data.tar.gz: 19d0680dfa7d569d5b67c12ee1f11d3891c4aed9a58b338931d66f0eb827179975ab4311e796e28546f0e1393b54782d9b6b59fc305cdca8a185078b9297de0d
+  metadata.gz: c30119650448669172e439745920ec0393017db2ead4c3e95309d9c5ff48901ad9f95a6d244ddc57ecd683ee9ff31f699b9ea515b19f09e403b60ab02aaadb45
+  data.tar.gz: 7f846c4e17f3c57438cc63c79d8a6236433d45389b9d70d6d74504ba0b51e039fc50bd4e70954e85ea505364afcc0982fce02a5833c00f8252e09a807e87b308

data/Gemfile

@@ -0,0 +1,9 @@
+source 'https://rubygems.org'
+source 'https://rails-assets.org'
+
+# Specify your gem's dependencies in devoops-rails.gemspec
+gem 'rails-assets-bootstrap', '3.1.0'
+gem 'font-awesome-rails', '4.0.3.2'
+gem 'rails-assets-jquery', '2.1.0'
+gem 'rails-assets-jquery-ui', '1.10.4'
+gemspec

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2014 Dener W P do Carmo
+
+MIT License
+
+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.

data/README.md

@@ -0,0 +1,69 @@
+# Devoops::Rails
+
+Made for use [devoops template (bootstrap v3)](https://github.com/devoopsme/devoops)
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+    gem 'devoops-rails'
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install devoops-rails
+
+## Usage
+
+Include this source in the Gemfile to use rails-assets gems:
+
+```ruby
+source 'https://rails-assets.org'
+```
+
+And include the dependencies in Gemfile:
+
+```ruby
+gem 'rails-assets-bootstrap', '3.1.0'
+gem 'rails-bootstrap-helpers'
+gem 'bootstrap-datepicker-rails', '~> 1.3.0.1'
+gem "font-awesome-rails"
+gem 'rails-assets-jquery', '2.1.0'
+gem 'rails-assets-jquery-ui', '1.10.4'
+```
+
+Add the following to your application.js:
+
+```ruby
+//= require jquery
+//= require jquery-ui
+//= require turbolinks
+//= require bootstrap
+//= require devoops-rails/devoops
+//= require_tree .
+```
+
+Also add the following to your application.css:
+
+```ruby
+*= require_self
+*= require_tree .
+*= require bootstrap
+*= require jquery-ui
+*= require font-awesome
+*= require devoops-rails/devoops
+*/
+```
+Just using basic components. Fullcalendar, tinymce, xcharts, fineuploader, fancybox and others plugins are not implemented yet.
+To test devoops layout, use the same code in the index.html from root path of devoops source.
+
+## Contributing
+
+1. Fork it ( https://github.com/denerblack/devoops-rails/fork )
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create a new Pull Request

data/Rakefile

@@ -0,0 +1,2 @@
+require "bundler/gem_tasks"
+

data/app/assets/javascripts/devoops-rails/devoops.js

@@ -0,0 +1,2198 @@
+//
+//    Main script of DevOOPS v1.0 Bootstrap Theme
+//
+"use strict";
+/*-------------------------------------------
+  Main scripts used by theme
+---------------------------------------------*/
+//
+//  Function for load content from url and put in $('.ajax-content') block
+//
+function LoadAjaxContent(url){
+  $('.preloader').show();
+  $.ajax({
+    mimeType: 'text/html; charset=utf-8', // ! Need set mimeType only when run from local file
+    url: url,
+    type: 'GET',
+    success: function(data) {
+      $('#ajax-content').html(data);
+      $('.preloader').hide();
+    },
+    error: function (jqXHR, textStatus, errorThrown) {
+      alert(errorThrown);
+    },
+    dataType: "html",
+    async: false
+  });
+}
+//
+//  Function maked all .box selector is draggable, to disable for concrete element add class .no-drop
+//
+function WinMove(){
+  $( "div.box").not('.no-drop')
+    .draggable({
+      revert: true,
+      zIndex: 2000,
+      cursor: "crosshair",
+      handle: '.box-name',
+      opacity: 0.8
+    })
+    .droppable({
+      tolerance: 'pointer',
+      drop: function( event, ui ) {
+        var draggable = ui.draggable;
+        var droppable = $(this);
+        var dragPos = draggable.position();
+        var dropPos = droppable.position();
+        draggable.swap(droppable);
+        setTimeout(function() {
+          var dropmap = droppable.find('[id^=map-]');
+          var dragmap = draggable.find('[id^=map-]');
+          if (dragmap.length > 0 || dropmap.length > 0){
+            dragmap.resize();
+            dropmap.resize();
+          }
+          else {
+            draggable.resize();
+            droppable.resize();
+          }
+        }, 50);
+        setTimeout(function() {
+          draggable.find('[id^=map-]').resize();
+          droppable.find('[id^=map-]').resize();
+        }, 250);
+      }
+    });
+}
+//
+// Swap 2 elements on page. Used by WinMove function
+//
+jQuery.fn.swap = function(b){
+  b = jQuery(b)[0];
+  var a = this[0];
+  var t = a.parentNode.insertBefore(document.createTextNode(''), a);
+  b.parentNode.insertBefore(a, b);
+  t.parentNode.insertBefore(b, t);
+  t.parentNode.removeChild(t);
+  return this;
+};
+//
+//  Screensaver function
+//  used on locked screen, and write content to element with id - canvas
+//
+function ScreenSaver(){
+  var canvas = document.getElementById("canvas");
+  var ctx = canvas.getContext("2d");
+  // Size of canvas set to fullscreen of browser
+  var W = window.innerWidth;
+  var H = window.innerHeight;
+  canvas.width = W;
+  canvas.height = H;
+  // Create array of particles for screensaver
+  var particles = [];
+  for (var i = 0; i < 25; i++) {
+    particles.push(new Particle());
+  }
+  function Particle(){
+    // location on the canvas
+    this.location = {x: Math.random()*W, y: Math.random()*H};
+    // radius - lets make this 0
+    this.radius = 0;
+    // speed
+    this.speed = 3;
+    // random angle in degrees range = 0 to 360
+    this.angle = Math.random()*360;
+    // colors
+    var r = Math.round(Math.random()*255);
+    var g = Math.round(Math.random()*255);
+    var b = Math.round(Math.random()*255);
+    var a = Math.random();
+    this.rgba = "rgba("+r+", "+g+", "+b+", "+a+")";
+  }
+  // Draw the particles
+  function draw() {
+    // re-paint the BG
+    // Lets fill the canvas black
+    // reduce opacity of bg fill.
+    // blending time
+    ctx.globalCompositeOperation = "source-over";
+    ctx.fillStyle = "rgba(0, 0, 0, 0.02)";
+    ctx.fillRect(0, 0, W, H);
+    ctx.globalCompositeOperation = "lighter";
+    for(var i = 0; i < particles.length; i++){
+      var p = particles[i];
+      ctx.fillStyle = "white";
+      ctx.fillRect(p.location.x, p.location.y, p.radius, p.radius);
+      // Lets move the particles
+      // So we basically created a set of particles moving in random direction
+      // at the same speed
+      // Time to add ribbon effect
+      for(var n = 0; n < particles.length; n++){
+        var p2 = particles[n];
+        // calculating distance of particle with all other particles
+        var yd = p2.location.y - p.location.y;
+        var xd = p2.location.x - p.location.x;
+        var distance = Math.sqrt(xd*xd + yd*yd);
+        // draw a line between both particles if they are in 200px range
+        if(distance < 200){
+          ctx.beginPath();
+          ctx.lineWidth = 1;
+          ctx.moveTo(p.location.x, p.location.y);
+          ctx.lineTo(p2.location.x, p2.location.y);
+          ctx.strokeStyle = p.rgba;
+          ctx.stroke();
+          //The ribbons appear now.
+        }
+      }
+      // We are using simple vectors here
+      // New x = old x + speed * cos(angle)
+      p.location.x = p.location.x + p.speed*Math.cos(p.angle*Math.PI/180);
+      // New y = old y + speed * sin(angle)
+      p.location.y = p.location.y + p.speed*Math.sin(p.angle*Math.PI/180);
+      // You can read about vectors here:
+      // http://physics.about.com/od/mathematics/a/VectorMath.htm
+      if(p.location.x < 0) p.location.x = W;
+      if(p.location.x > W) p.location.x = 0;
+      if(p.location.y < 0) p.location.y = H;
+      if(p.location.y > H) p.location.y = 0;
+    }
+  }
+  setInterval(draw, 30);
+}
+//
+// Helper for draw Google Chart
+//
+function drawGoogleChart(chart_data, chart_options, element, chart_type) {
+  // Function for visualize Google Chart
+  var data = google.visualization.arrayToDataTable(chart_data);
+  var chart = new chart_type(document.getElementById(element));
+  chart.draw(data, chart_options);
+}
+//
+//  Function for Draw Knob Charts
+//
+function DrawKnob(elem){
+  elem.knob({
+    change : function (value) {
+      //console.log("change : " + value);
+    },
+    release : function (value) {
+      //console.log(this.$.attr('value'));
+      console.log("release : " + value);
+    },
+    cancel : function () {
+      console.log("cancel : ", this);
+    },
+    draw : function () {
+      // "tron" case
+      if(this.$.data('skin') == 'tron') {
+        var a = this.angle(this.cv);  // Angle
+        var sa = this.startAngle;          // Previous start angle
+        var sat = this.startAngle;         // Start angle
+        var ea;                            // Previous end angle
+        var eat = sat + a;                 // End angle
+        var r = 1;
+        this.g.lineWidth = this.lineWidth;
+        this.o.cursor
+          && (sat = eat - 0.3)
+          && (eat = eat + 0.3);
+        if (this.o.displayPrevious) {
+          ea = this.startAngle + this.angle(this.v);
+          this.o.cursor
+            && (sa = ea - 0.3)
+            && (ea = ea + 0.3);
+          this.g.beginPath();
+          this.g.strokeStyle = this.pColor;
+          this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false);
+          this.g.stroke();
+        }
+        this.g.beginPath();
+        this.g.strokeStyle = r ? this.o.fgColor : this.fgColor ;
+        this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false);
+        this.g.stroke();
+        this.g.lineWidth = 2;
+        this.g.beginPath();
+        this.g.strokeStyle = this.o.fgColor;
+        this.g.arc( this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
+        this.g.stroke();
+        return false;
+      }
+    }
+  });
+  // Example of infinite knob, iPod click wheel
+  var v;
+  var up = 0;
+  var down=0;
+  var i=0;
+  var $idir = $("div.idir");
+  var $ival = $("div.ival");
+  var incr = function() { i++; $idir.show().html("+").fadeOut(); $ival.html(i); }
+  var decr = function() { i--; $idir.show().html("-").fadeOut(); $ival.html(i); };
+  $("input.infinite").knob(
+    {
+      min : 0,
+      max : 20,
+      stopper : false,
+      change : function () {
+        if(v > this.cv){
+          if(up){
+            decr();
+            up=0;
+          } else {
+            up=1;down=0;
+          }
+        } else {
+          if(v < this.cv){
+            if(down){
+              incr();
+              down=0;
+            } else {
+              down=1;up=0;
+            }
+          }
+        }
+        v = this.cv;
+      }
+    });
+}
+//
+// Create OpenLayers map with required options and return map as object
+//
+function drawMap(lon, lat, elem, layers) {
+  var LayersArray = [];
+  // Map initialization
+  var map = new OpenLayers.Map(elem);
+  // Add layers on map
+  map.addLayers(layers);
+  // WGS 1984 projection
+  var epsg4326 =  new OpenLayers.Projection("EPSG:4326");
+  //The map projection (Spherical Mercator)
+  var projectTo = map.getProjectionObject();
+  // Max zoom = 17
+  var zoom=10;
+  map.zoomToMaxExtent();
+  // Set longitude/latitude
+  var lonlat = new OpenLayers.LonLat(lon, lat);
+  map.setCenter(lonlat.transform(epsg4326, projectTo), zoom);
+  var layerGuest = new OpenLayers.Layer.Vector("You are here");
+  // Define markers as "features" of the vector layer:
+  var guestMarker = new OpenLayers.Feature.Vector(
+    new OpenLayers.Geometry.Point(lon, lat).transform(epsg4326, projectTo)
+  );
+  layerGuest.addFeatures(guestMarker);
+  LayersArray.push(layerGuest);
+  map.addLayers(LayersArray);
+  // If map layers > 1 then show checker
+  if (layers.length > 1){
+    map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':true}));
+  }
+  // Link to current position
+  map.addControl(new OpenLayers.Control.Permalink());
+  // Show current mouse coords
+  map.addControl(new OpenLayers.Control.MousePosition({ displayProjection: epsg4326 }));
+  return map
+}
+//
+//  Function for create 2 dates in human-readable format (with leading zero)
+//
+function PrettyDates(){
+  var currDate = new Date();
+  var year = currDate.getFullYear();
+  var month = currDate.getMonth() + 1;
+  var startmonth = 1;
+  if (month > 3){
+    startmonth = month -2;
+  }
+  if (startmonth <=9){
+    startmonth = '0'+startmonth;
+  }
+  if (month <= 9) {
+    month = '0'+month;
+  }
+  var day= currDate.getDate();
+  if (day <= 9) {
+    day = '0'+day;
+  }
+  var startdate = year +'-'+ startmonth +'-01';
+  var enddate = year +'-'+ month +'-'+ day;
+  return [startdate, enddate];
+}
+//
+//  Function set min-height of window (required for this theme)
+//
+function SetMinBlockHeight(elem){
+  elem.css('min-height', window.innerHeight - 49)
+}
+//
+//  Helper for correct size of Messages page
+//
+function MessagesMenuWidth(){
+  var W = window.innerWidth;
+  var W_menu = $('#sidebar-left').outerWidth();
+  var w_messages = (W-W_menu)*16.666666666666664/100;
+  $('#messages-menu').width(w_messages);
+}
+//
+// Function for change panels of Dashboard
+//
+function DashboardTabChecker(){
+  $('#content').on('click', 'a.tab-link', function(e){
+    e.preventDefault();
+    $('div#dashboard_tabs').find('div[id^=dashboard]').each(function(){
+      $(this).css('visibility', 'hidden').css('position', 'absolute');
+    });
+    var attr = $(this).attr('id');
+    $('#'+'dashboard-'+attr).css('visibility', 'visible').css('position', 'relative');
+    $(this).closest('.nav').find('li').removeClass('active');
+    $(this).closest('li').addClass('active');
+  });
+}
+//
+// Helper for run TinyMCE editor with textarea's
+//
+function TinyMCEStart(elem, mode){
+  var plugins = [];
+  if (mode == 'extreme'){
+    plugins = [ "advlist anchor autolink autoresize autosave bbcode charmap code contextmenu directionality ",
+      "emoticons fullpage fullscreen hr image insertdatetime layer legacyoutput",
+      "link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace",
+      "tabfocus table template textcolor visualblocks visualchars wordcount"]
+  }
+  tinymce.init({selector: elem,
+    theme: "modern",
+    plugins: plugins,
+    //content_css: "css/style.css",
+    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons",
+    style_formats: [
+      {title: 'Header 2', block: 'h2', classes: 'page-header'},
+      {title: 'Header 3', block: 'h3', classes: 'page-header'},
+      {title: 'Header 4', block: 'h4', classes: 'page-header'},
+      {title: 'Header 5', block: 'h5', classes: 'page-header'},
+      {title: 'Header 6', block: 'h6', classes: 'page-header'},
+      {title: 'Bold text', inline: 'b'},
+      {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
+      {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
+      {title: 'Example 1', inline: 'span', classes: 'example1'},
+      {title: 'Example 2', inline: 'span', classes: 'example2'},
+      {title: 'Table styles'},
+      {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
+    ]
+  });
+}
+//
+// Helper for draw Sparkline plots on Dashboard page
+//
+function SparkLineDrawBarGraph(elem, arr, color){
+  if (color) {
+    var stacked_color = color;
+  }
+  else {
+    stacked_color = '#6AA6D6'
+  }
+  elem.sparkline(arr, { type: 'bar', barWidth: 7, highlightColor: '#000', barSpacing: 2, height: 40, stackedBarColor: stacked_color});
+}
+//
+//  Helper for open ModalBox with requested header, content and bottom
+//
+//
+function OpenModalBox(header, inner, bottom){
+  var modalbox = $('#modalbox');
+  modalbox.find('.modal-header-name span').html(header);
+  modalbox.find('.devoops-modal-inner').html(inner);
+  modalbox.find('.devoops-modal-bottom').html(bottom);
+  modalbox.fadeIn('fast');
+  $('body').addClass("body-expanded");
+}
+//
+//  Close modalbox
+//
+//
+function CloseModalBox(){
+  var modalbox = $('#modalbox');
+  modalbox.fadeOut('fast', function(){
+    modalbox.find('.modal-header-name span').children().remove();
+    modalbox.find('.devoops-modal-inner').children().remove();
+    modalbox.find('.devoops-modal-bottom').children().remove();
+    $('body').removeClass("body-expanded");
+  });
+}
+//
+//  Beauty tables plugin (navigation in tables with inputs in cell)
+//  Created by DevOOPS.
+//
+(function( $ ){
+  $.fn.beautyTables = function() {
+    var table = this;
+    var string_fill = false;
+    this.on('keydown', function(event) {
+    var target = event.target;
+    var tr = $(target).closest("tr");
+    var col = $(target).closest("td");
+    if (target.tagName.toUpperCase() == 'INPUT'){
+      if (event.shiftKey === true){
+        switch(event.keyCode) {
+          case 37: // left arrow
+            col.prev().children("input[type=text]").focus();
+            break;
+          case 39: // right arrow
+            col.next().children("input[type=text]").focus();
+            break;
+          case 40: // down arrow
+            if (string_fill==false){
+              tr.next().find('td:eq('+col.index()+') input[type=text]').focus();
+            }
+            break;
+          case 38: // up arrow
+            if (string_fill==false){
+              tr.prev().find('td:eq('+col.index()+') input[type=text]').focus();
+            }
+            break;
+        }
+      }
+      if (event.ctrlKey === true){
+        switch(event.keyCode) {
+          case 37: // left arrow
+            tr.find('td:eq(1)').find("input[type=text]").focus();
+            break;
+          case 39: // right arrow
+            tr.find('td:last-child').find("input[type=text]").focus();
+            break;
+        case 40: // down arrow
+          if (string_fill==false){
+            table.find('tr:last-child td:eq('+col.index()+') input[type=text]').focus();
+          }
+          break;
+        case 38: // up arrow
+          if (string_fill==false){
+            table.find('tr:eq(1) td:eq('+col.index()+') input[type=text]').focus();
+          }
+            break;
+        }
+      }
+      if (event.keyCode == 13 || event.keyCode == 9 ) {
+        event.preventDefault();
+        col.next().find("input[type=text]").focus();
+      }
+      if (string_fill==false){
+        if (event.keyCode == 34) {
+          event.preventDefault();
+          table.find('tr:last-child td:last-child').find("input[type=text]").focus();}
+        if (event.keyCode == 33) {
+          event.preventDefault();
+          table.find('tr:eq(1) td:eq(1)').find("input[type=text]").focus();}
+      }
+    }
+    });
+    table.find("input[type=text]").each(function(){
+      $(this).on('blur', function(event){
+      var target = event.target;
+      var col = $(target).parents("td");
+      if(table.find("input[name=string-fill]").prop("checked")==true) {
+        col.nextAll().find("input[type=text]").each(function() {
+          $(this).val($(target).val());
+        });
+      }
+    });
+  })
+};
+})( jQuery );
+//
+// Beauty Hover Plugin (backlight row and col when cell in mouseover)
+//
+//
+(function( $ ){
+  $.fn.beautyHover = function() {
+    var table = this;
+    table.on('mouseover','td', function() {
+      var idx = $(this).index();
+      var rows = $(this).closest('table').find('tr');
+      rows.each(function(){
+        $(this).find('td:eq('+idx+')').addClass('beauty-hover');
+      });
+    })
+    .on('mouseleave','td', function(e) {
+      var idx = $(this).index();
+      var rows = $(this).closest('table').find('tr');
+      rows.each(function(){
+        $(this).find('td:eq('+idx+')').removeClass('beauty-hover');
+      });
+    });
+  };
+})( jQuery );
+//
+//  Function convert values of inputs in table to JSON data
+//
+//
+function Table2Json(table) {
+  var result = {};
+  table.find("tr").each(function () {
+    var oneRow = [];
+    var varname = $(this).index();
+    $("td", this).each(function (index) { if (index != 0) {oneRow.push($("input", this).val());}});
+    result[varname] = oneRow;
+  });
+  var result_json = JSON.stringify(result);
+  OpenModalBox('Table to JSON values', result_json);
+}
+/*-------------------------------------------
+  Demo graphs for Flot Chart page (charts_flot.html)
+---------------------------------------------*/
+//
+// Graph1 created in element with id = box-one-content
+//
+function FlotGraph1(){
+  // We use an inline data source in the example, usually data would
+  // be fetched from a server
+  var data = [],
+  totalPoints = 300;
+  function getRandomData() {
+    if (data.length > 0)
+      data = data.slice(1);
+    // Do a random walk
+    while (data.length < totalPoints) {
+      var prev = data.length > 0 ? data[data.length - 1] : 50,
+      y = prev + Math.random() * 10 - 5;
+      if (y < 0) {
+        y = 0;
+      } else if (y > 100) {
+        y = 100;
+      }
+      data.push(y);
+    }
+    // Zip the generated y values with the x values
+    var res = [];
+    for (var i = 0; i < data.length; ++i) {
+      res.push([i, data[i]])
+    }
+    return res;
+  }
+  var updateInterval = 30;
+  var plot = $.plot("#box-one-content", [ getRandomData() ], {
+    series: {
+      shadowSize: 0 // Drawing is faster without shadows
+    },
+    yaxis: {min: 0, max: 100},
+    xaxis: {show: false }
+  });
+  function update() {
+    plot.setData([getRandomData()]);
+    // Since the axes don't change, we don't need to call plot.setupGrid()
+    plot.draw();
+    setTimeout(update, updateInterval);
+  }
+  update();
+}
+//
+// Graph2 created in element with id = box-two-content
+//
+function FlotGraph2(){
+  var sin = [];
+  var cos = [];
+  var tan = [];
+  for (var i = 0; i < 14; i += 0.1) {
+    sin.push([i, Math.sin(i)]);
+    cos.push([i, Math.cos(i)]);
+    tan.push([i, Math.tan(i)/4]);
+  }
+  var plot = $.plot("#box-two-content", [
+    { data: sin, label: "sin(x) = -0.00"},
+    { data: cos, label: "cos(x) = -0.00" },
+    { data: tan, label: "tan(x)/4 = -0.00" }
+  ], {
+    series: {
+      lines: {
+        show: true
+      }
+    },
+    crosshair: {
+      mode: "x"
+    },
+    grid: {
+      hoverable: true,
+      autoHighlight: false
+    },
+    yaxis: {
+      min: -5.2,
+      max: 5.2
+    }
+  });
+  var legends = $("#box-two-content .legendLabel");
+  legends.each(function () {
+    // fix the widths so they don't jump around
+    $(this).css('width', $(this).width());
+  });
+  var updateLegendTimeout = null;
+  var latestPosition = null;
+  function updateLegend() {
+    updateLegendTimeout = null;
+    var pos = latestPosition;
+    var axes = plot.getAxes();
+    if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max ||
+      pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) {
+      return;
+    }
+    var i, j, dataset = plot.getData();
+    for (i = 0; i < dataset.length; ++i) {
+      var series = dataset[i];
+      // Find the nearest points, x-wise
+      for (j = 0; j < series.data.length; ++j) {
+        if (series.data[j][0] > pos.x) {
+          break;
+        }
+      }
+    // Now Interpolate
+    var y, p1 = series.data[j - 1], p2 = series.data[j];
+      if (p1 == null) {
+        y = p2[1];
+      } else if (p2 == null) {
+        y = p1[1];
+      } else {
+        y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);
+      }
+      legends.eq(i).text(series.label.replace(/=.*/, "= " + y.toFixed(2)));
+    }
+  }
+  $("#box-two-content").bind("plothover",  function (event, pos, item) {
+    latestPosition = pos;
+    if (!updateLegendTimeout) {
+      updateLegendTimeout = setTimeout(updateLegend, 50);
+    }
+  });
+}
+//
+// Graph3 created in element with id = box-three-content
+//
+function FlotGraph3(){
+  var d1 = [];
+  for (var i = 0; i <= 60; i += 1) {
+    d1.push([i, parseInt(Math.random() * 30 - 10)]);
+  }
+  function plotWithOptions(t) {
+    $.plot("#box-three-content", [{
+      data: d1,
+      color: "rgb(30, 180, 20)",
+      threshold: {
+        below: t,
+        color: "rgb(200, 20, 30)"
+      },
+      lines: {
+        steps: true
+      }
+    }]);
+  }
+  plotWithOptions(0);
+}
+//
+// Graph4 created in element with id = box-four-content
+//
+function FlotGraph4(){
+  var d1 = [];
+  for (var i = 0; i < 14; i += 0.5) {
+    d1.push([i, Math.sin(i)]);
+  }
+  var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
+  var d3 = [];
+  for (var i = 0; i < 14; i += 0.5) {
+    d3.push([i, Math.cos(i)]);
+  }
+  var d4 = [];
+  for (var i = 0; i < 14; i += 0.1) {
+    d4.push([i, Math.sqrt(i * 10)]);
+  }
+  var d5 = [];
+  for (var i = 0; i < 14; i += 0.5) {
+    d5.push([i, Math.sqrt(i)]);
+  }
+  var d6 = [];
+  for (var i = 0; i < 14; i += 0.5 + Math.random()) {
+    d6.push([i, Math.sqrt(2*i + Math.sin(i) + 5)]);
+  }
+  $.plot("#box-four-content", [{
+    data: d1,
+      lines: { show: true, fill: true }
+    }, {
+      data: d2,
+      bars: { show: true }
+    }, {
+      data: d3,
+      points: { show: true }
+    }, {
+      data: d4,
+      lines: { show: true }
+    }, {
+      data: d5,
+      lines: { show: true },
+      points: { show: true }
+    }, {
+      data: d6,
+      lines: { show: true, steps: true }
+    }]);
+}
+/*-------------------------------------------
+  Demo graphs for Morris Chart page (charts_morris.html)
+---------------------------------------------*/
+//
+// Graph1 created in element with id = morris-chart-1
+//
+function MorrisChart1(){
+  var day_data = [
+    {"period": "2013-10-01", "licensed": 3407, "sorned": 660},
+    {"period": "2013-09-30", "licensed": 3351, "sorned": 629},
+    {"period": "2013-09-29", "licensed": 3269, "sorned": 618},
+    {"period": "2013-09-20", "licensed": 3246, "sorned": 661},
+    {"period": "2013-09-19", "licensed": 3257, "sorned": 667},
+    {"period": "2013-09-18", "licensed": 3248, "sorned": 627},
+    {"period": "2013-09-17", "licensed": 3171, "sorned": 660},
+    {"period": "2013-09-16", "licensed": 3171, "sorned": 676},
+    {"period": "2013-09-15", "licensed": 3201, "sorned": 656},
+    {"period": "2013-09-10", "licensed": 3215, "sorned": 622}
+  ];
+  Morris.Bar({
+    element: 'morris-chart-1',
+    data: day_data,
+    xkey: 'period',
+    ykeys: ['licensed', 'sorned'],
+    labels: ['Licensed', 'SORN'],
+    xLabelAngle: 60
+  });
+}
+//
+// Graph2 created in element with id = morris-chart-2
+//
+function MorrisChart2(){
+  // Use Morris.Area instead of Morris.Line
+  Morris.Area({
+    element: 'morris-chart-2',
+    data: [
+      {x: '2011 Q1', y: 3, z: 3, m: 1},
+      {x: '2011 Q2', y: 2, z: 0, m: 7},
+      {x: '2011 Q3', y: 2, z: 5, m: 2},
+      {x: '2011 Q4', y: 4, z: 4, m: 5},
+      {x: '2012 Q1', y: 6, z: 1, m: 11},
+      {x: '2012 Q2', y: 4, z: 4, m: 3},
+      {x: '2012 Q3', y: 4, z: 4, m: 7},
+      {x: '2012 Q4', y: 4, z: 4, m: 9}
+    ],
+    xkey: 'x',
+    ykeys: ['y', 'z', 'm'],
+    labels: ['Y', 'Z', 'M']
+    })
+    .on('click', function(i, row){
+      console.log(i, row);
+    });
+}
+//
+// Graph3 created in element with id = morris-chart-3
+//
+function MorrisChart3(){
+  var decimal_data = [];
+  for (var x = 0; x <= 360; x += 10) {
+    decimal_data.push({ x: x, y: Math.sin(Math.PI * x / 180).toFixed(4), z: Math.cos(Math.PI * x / 180).toFixed(4) });
+  }
+  Morris.Line({
+    element: 'morris-chart-3',
+    data: decimal_data,
+    xkey: 'x',
+    ykeys: ['y', 'z'],
+    labels: ['sin(x)', 'cos(x)'],
+    parseTime: false,
+    goals: [-1, 0, 1]
+  });
+}
+//
+// Graph4 created in element with id = morris-chart-4
+//
+function MorrisChart4(){
+  // Use Morris.Bar
+  Morris.Bar({
+    element: 'morris-chart-4',
+    data: [
+      {x: '2011 Q1', y: 0},
+      {x: '2011 Q2', y: 1},
+      {x: '2011 Q3', y: 2},
+      {x: '2011 Q4', y: 3},
+      {x: '2012 Q1', y: 4},
+      {x: '2012 Q2', y: 5},
+      {x: '2012 Q3', y: 6},
+      {x: '2012 Q4', y: 7},
+      {x: '2013 Q1', y: 8},
+      {x: '2013 Q2', y: 7},
+      {x: '2013 Q3', y: 6},
+      {x: '2013 Q4', y: 5},
+      {x: '2014 Q1', y: 9}
+    ],
+    xkey: 'x',
+    ykeys: ['y'],
+    labels: ['Y'],
+    barColors: function (row, series, type) {
+      if (type === 'bar') {
+        var red = Math.ceil(255 * row.y / this.ymax);
+        return 'rgb(' + red + ',0,0)';
+      }
+      else {
+        return '#000';
+      }
+    }
+  });
+}
+//
+// Graph5 created in element with id = morris-chart-5
+//
+function MorrisChart5(){
+  Morris.Area({
+    element: 'morris-chart-5',
+    data: [
+      {period: '2010 Q1', iphone: 2666, ipad: null, itouch: 2647},
+      {period: '2010 Q2', iphone: 2778, ipad: 2294, itouch: 2441},
+      {period: '2010 Q3', iphone: 4912, ipad: 1969, itouch: 2501},
+      {period: '2010 Q4', iphone: 3767, ipad: 3597, itouch: 5689},
+      {period: '2011 Q1', iphone: 6810, ipad: 1914, itouch: 2293},
+      {period: '2011 Q2', iphone: 5670, ipad: 4293, itouch: 1881},
+      {period: '2011 Q3', iphone: 4820, ipad: 3795, itouch: 1588},
+      {period: '2011 Q4', iphone: 15073, ipad: 5967, itouch: 5175},
+      {period: '2012 Q1', iphone: 10687, ipad: 4460, itouch: 2028},
+      {period: '2012 Q2', iphone: 8432, ipad: 5713, itouch: 1791}
+    ],
+    xkey: 'period',
+    ykeys: ['iphone', 'ipad', 'itouch'],
+    labels: ['iPhone', 'iPad', 'iPod Touch'],
+    pointSize: 2,
+    hideHover: 'auto'
+  });
+}
+/*-------------------------------------------
+  Demo graphs for Google Chart page (charts_google.html)
+---------------------------------------------*/
+//
+// One function for create all graphs on Google Chart page
+//
+function DrawAllCharts(){
+  //  Chart 1
+  var chart1_data = [
+    ['Smartphones', 'PC', 'Notebooks', 'Monitors','Routers', 'Switches' ],
+    ['01.01.2014',  1234, 2342, 344, 232,131],
+    ['02.01.2014',  1254, 232, 314, 232, 331],
+    ['03.01.2014',  2234, 342, 298, 232, 665],
+    ['04.01.2014',  2234, 42, 559, 232, 321],
+    ['05.01.2014',  1999, 82, 116, 232, 334],
+    ['06.01.2014',  1634, 834, 884, 232, 191],
+    ['07.01.2014',  321, 342, 383, 232, 556],
+    ['08.01.2014',  845, 112, 499, 232, 731]
+  ];
+  var chart1_options = {
+    title: 'Sales of company',
+    hAxis: {title: 'Date', titleTextStyle: {color: 'red'}},
+    backgroundColor: '#fcfcfc',
+    vAxis: {title: 'Quantity', titleTextStyle: {color: 'blue'}}
+  };
+  var chart1_element = 'google-chart-1';
+  var chart1_type = google.visualization.ColumnChart;
+  drawGoogleChart(chart1_data, chart1_options, chart1_element, chart1_type);
+  //  Chart 2
+  var chart2_data = [
+    ['Height', 'Width'],
+    ['Samsung',  74.5],
+    ['Apple',  31.24],
+    ['LG',  12.10],
+    ['Huawei',  11.14],
+    ['Sony',  8.3],
+    ['Nokia',  7.4],
+    ['Blackberry',  6.8],
+    ['HTC',  6.63],
+    ['Motorola',  3.5],
+    ['Other',  43.15]
+  ];
+  var chart2_options = {
+    title: 'Smartphone marketshare 2Q 2013',
+    backgroundColor: '#fcfcfc'
+  };
+  var chart2_element = 'google-chart-2';
+  var chart2_type = google.visualization.PieChart;
+  drawGoogleChart(chart2_data, chart2_options, chart2_element, chart2_type);
+  //  Chart 3
+  var chart3_data = [
+    ['Age', 'Weight'],
+    [ 8, 12],
+    [ 4, 5.5],
+    [ 11, 14],
+    [ 4, 5],
+    [ 3, 3.5],
+    [ 6.5, 7]
+  ];
+  var chart3_options = {
+    title: 'Age vs. Weight comparison',
+    hAxis: {title: 'Age', minValue: 0, maxValue: 15},
+    vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
+    legend: 'none',
+    backgroundColor: '#fcfcfc'
+  };
+  var chart3_element = 'google-chart-3';
+  var chart3_type = google.visualization.ScatterChart;
+  drawGoogleChart(chart3_data, chart3_options, chart3_element, chart3_type);
+  //  Chart 4
+  var chart4_data = [
+    ['ID', 'Life Expectancy', 'Fertility Rate', 'Region',     'Population'],
+    ['CAN',    80.66,              1.67,      'North America',  33739900],
+    ['DEU',    79.84,              1.36,      'Europe',         81902307],
+    ['DNK',    78.6,               1.84,      'Europe',         5523095],
+    ['EGY',    72.73,              2.78,      'Middle East',    79716203],
+    ['GBR',    80.05,              2,         'Europe',         61801570],
+    ['IRN',    72.49,              1.7,       'Middle East',    73137148],
+    ['IRQ',    68.09,              4.77,      'Middle East',    31090763],
+    ['ISR',    81.55,              2.96,      'Middle East',    7485600],
+    ['RUS',    68.6,               1.54,      'Europe',         141850000],
+    ['USA',    78.09,              2.05,      'North America',  307007000]
+  ];
+  var chart4_options = {
+    title: 'Correlation between life expectancy, fertility rate and population of some world countries (2010)',
+    hAxis: {title: 'Life Expectancy'},
+    vAxis: {title: 'Fertility Rate'},
+    backgroundColor: '#fcfcfc',
+    bubble: {textStyle: {fontSize: 11}}
+  };
+  var chart4_element = 'google-chart-4';
+  var chart4_type = google.visualization.BubbleChart;
+  drawGoogleChart(chart4_data, chart4_options, chart4_element, chart4_type);
+  //  Chart 5
+  var chart5_data = [
+    ['Country', 'Popularity'],
+    ['Germany', 200],
+    ['United States', 300],
+    ['Brazil', 400],
+    ['Canada', 500],
+    ['France', 600],
+    ['RU', 700]
+  ];
+  var chart5_options = {
+    backgroundColor: '#fcfcfc',
+    enableRegionInteractivity: true
+  };
+  var chart5_element = 'google-chart-5';
+  var chart5_type = google.visualization.GeoChart;
+  drawGoogleChart(chart5_data, chart5_options, chart5_element, chart5_type);
+  //  Chart 6
+  var chart6_data = [
+  ['Year', 'Sales', 'Expenses'],
+    ['2004',  1000,      400],
+    ['2005',  1170,      460],
+    ['2006',  660,       1120],
+    ['2007',  1030,      540],
+    ['2008',  2080,      740],
+    ['2009',  1949,      690],
+    ['2010',  2334,      820]
+  ];
+  var chart6_options = {
+    backgroundColor: '#fcfcfc',
+    title: 'Company Performance'
+  };
+  var chart6_element = 'google-chart-6';
+  var chart6_type = google.visualization.LineChart;
+  drawGoogleChart(chart6_data, chart6_options, chart6_element, chart6_type);
+  //  Chart 7
+  var chart7_data = [
+  ['Task', 'Hours per Day'],
+    ['Work',     11],
+    ['Eat',      2],
+    ['Commute',  2],
+    ['Watch TV', 2],
+    ['Sleep',    7]
+  ];
+  var chart7_options = {
+    backgroundColor: '#fcfcfc',
+    title: 'My Daily Activities',
+    pieHole: 0.4
+  };
+  var chart7_element = 'google-chart-7';
+  var chart7_type = google.visualization.PieChart;
+  drawGoogleChart(chart7_data, chart7_options, chart7_element, chart7_type);
+  //  Chart 8
+  var chart8_data = [
+    ['Generation', 'Descendants'],
+    [0, 1], [1, 33], [2, 269], [3, 2013]
+  ];
+  var chart8_options = {
+    backgroundColor: '#fcfcfc',
+    title: 'Descendants by Generation',
+    hAxis: {title: 'Generation', minValue: 0, maxValue: 3},
+    vAxis: {title: 'Descendants', minValue: 0, maxValue: 2100},
+    trendlines: {
+      0: {
+        type: 'exponential',
+        visibleInLegend: true
+      }
+    }
+  };
+  var chart8_element = 'google-chart-8';
+  var chart8_type = google.visualization.ScatterChart;
+  drawGoogleChart(chart8_data, chart8_options, chart8_element, chart8_type);
+}
+/*-------------------------------------------
+  Demo graphs for xCharts page (charts_xcharts.html)
+---------------------------------------------*/
+//
+// Graph1 created in element with id = xchart-1
+//
+function xGraph1(){
+  var tt = document.createElement('div'),
+  leftOffset = -(~~$('html').css('padding-left').replace('px', '') + ~~$('body').css('margin-left').replace('px', '')),
+  topOffset = -32;
+  tt.className = 'ex-tooltip';
+  document.body.appendChild(tt);
+  var data = {
+    "xScale": "time",
+    "yScale": "linear",
+    "main": [
+      {
+      "className": ".xchart-class-1",
+      "data": [
+        {
+          "x": "2012-11-05",
+          "y": 6
+        },
+        {
+          "x": "2012-11-06",
+          "y": 6
+        },
+        {
+          "x": "2012-11-07",
+          "y": 8
+        },
+        {
+          "x": "2012-11-08",
+          "y": 3
+        },
+        {
+          "x": "2012-11-09",
+          "y": 4
+        },
+        {
+          "x": "2012-11-10",
+          "y": 9
+        },
+        {
+          "x": "2012-11-11",
+          "y": 6
+        },
+        {
+          "x": "2012-11-12",
+          "y": 16
+        },
+        {
+          "x": "2012-11-13",
+          "y": 4
+        },
+        {
+          "x": "2012-11-14",
+          "y": 9
+        },
+        {
+          "x": "2012-11-15",
+          "y": 2
+        }
+      ]
+      }
+    ]
+  };
+  var opts = {
+    "dataFormatX": function (x) { return d3.time.format('%Y-%m-%d').parse(x); },
+    "tickFormatX": function (x) { return d3.time.format('%A')(x); },
+    "mouseover": function (d, i) {
+      var pos = $(this).offset();
+      $(tt).text(d3.time.format('%A')(d.x) + ': ' + d.y)
+        .css({top: topOffset + pos.top, left: pos.left + leftOffset})
+        .show();
+    },
+    "mouseout": function (x) {
+      $(tt).hide();
+    }
+  };
+  var myChart = new xChart('line-dotted', data, '#xchart-1', opts);
+}
+//
+// Graph2 created in element with id = xchart-2
+//
+function xGraph2(){
+  var data = {
+  "xScale": "ordinal",
+  "yScale": "linear",
+  "main": [
+    {
+    "className": ".xchart-class-2",
+    "data": [
+      {
+        "x": "Apple",
+        "y": 575
+      },
+      {
+        "x": "Facebook",
+        "y": 163
+      },
+      {
+        "x": "Microsoft",
+        "y": 303
+      },
+      {
+        "x": "Cisco",
+        "y": 121
+      },
+      {
+        "x": "Google",
+        "y": 393
+      }
+    ]
+    }
+    ]
+  };
+  var myChart = new xChart('bar', data, '#xchart-2');
+}
+//
+// Graph3 created in element with id = xchart-3
+//
+function xGraph3(){
+  var data = {
+    "xScale": "time",
+    "yScale": "linear",
+    "type": "line",
+    "main": [
+    {
+      "className": ".xchart-class-3",
+      "data": [
+        {
+          "x": "2012-11-05",
+          "y": 1
+        },
+        {
+          "x": "2012-11-06",
+          "y": 6
+        },
+        {
+          "x": "2012-11-07",
+          "y": 13
+        },
+        {
+          "x": "2012-11-08",
+          "y": -3
+        },
+        {
+          "x": "2012-11-09",
+          "y": -4
+        },
+        {
+          "x": "2012-11-10",
+          "y": 9
+        },
+        {
+          "x": "2012-11-11",
+          "y": 6
+        },
+        {
+          "x": "2012-11-12",
+          "y": 7
+        },
+        {
+          "x": "2012-11-13",
+          "y": -2
+        },
+        {
+          "x": "2012-11-14",
+          "y": -7
+        }
+      ]
+      }
+    ]
+  };
+  var opts = {
+    "dataFormatX": function (x) { return d3.time.format('%Y-%m-%d').parse(x); },
+    "tickFormatX": function (x) { return d3.time.format('%A')(x); }
+  };
+  var myChart = new xChart('line', data, '#xchart-3', opts);
+}
+/*-------------------------------------------
+  Demo graphs for CoinDesk page (charts_coindesk.html)
+---------------------------------------------*/
+//
+// Main function for CoinDesk API Page
+// (we get JSON data and make 4 graph from this)
+//
+function CoinDeskGraph(){
+  var dates = PrettyDates();
+  var startdate = dates[0];
+  var enddate = dates[1];
+  // Load JSON data from CoinDesk API
+  var jsonURL = 'http://api.coindesk.com/v1/bpi/historical/close.json?start='+startdate+'&end='+enddate;
+  $.getJSON(jsonURL, function(result){
+    // Create array of data for xChart
+    $.each(result.bpi, function(key, val){
+      xchart_data.push({'x': key,'y':val});
+    });
+    // Set handler for resize and create xChart plot
+    var graphXChartResize;
+    $('#coindesk-xchart').resize(function(){
+      clearTimeout(graphXChartResize);
+      graphXChartResize = setTimeout(DrawCoinDeskXCharts, 500);
+    });
+    DrawCoinDeskXCharts();
+    // Create array of data for Google Chart
+      $.each(result.bpi, function(key, val){
+        google_data.push([key,val]);
+      });
+    // Set handler for resize and create Google Chart plot
+    var graphGChartResize;
+    $('#coindesk-google-chart').resize(function(){
+      clearTimeout(graphGChartResize);
+      graphGChartResize = setTimeout(DrawCoinDeskGoogleCharts, 500);
+    });
+    DrawCoinDeskGoogleCharts();
+    // Create array of data for Flot and Sparkline
+    $.each(result.bpi, function(key, val){
+      var parseDate=key;
+      parseDate=parseDate.split("-");
+      var newDate=parseDate[1]+"/"+parseDate[2]+"/"+parseDate[0];
+      var new_date = new Date(newDate).getTime();
+      exchange_rate.push([new_date,val]);
+    });
+    // Create Flot plot (not need bind to resize, cause Flot use plugin 'resize')
+    DrawCoinDeskFlot();
+    // Set handler for resize and create Sparkline plot
+    var graphSparklineResize;
+    $('#coindesk-sparklines').resize(function(){
+      clearTimeout(graphSparklineResize);
+      graphSparklineResize = setTimeout(DrawCoinDeskSparkLine, 500);
+    });
+    DrawCoinDeskSparkLine();
+  });
+}
+//
+// Draw Sparkline Graph on Coindesk page
+//
+function DrawCoinDeskSparkLine(){
+  $('#coindesk-sparklines').sparkline(exchange_rate, { height: '100%', width: '100%' });
+}
+//
+// Draw xChart Graph on Coindesk page
+//
+function DrawCoinDeskXCharts(){
+  var data = {
+    "xScale": "ordinal",
+    "yScale": "linear",
+    "main": [
+      {
+        "className": ".pizza",
+        "data": xchart_data
+      }
+      ]
+    };
+  var myChart = new xChart('line-dotted', data, '#coindesk-xchart');
+}
+//
+// Draw Flot Graph on Coindesk page
+//
+function DrawCoinDeskFlot(){
+  var data1 = [
+    { data: exchange_rate, label: "Bitcoin exchange rate ($)" }
+  ];
+  var options = {
+    canvas: true,
+    xaxes: [
+      { mode: "time" }
+    ],
+    yaxes: [
+      { min: 0 },
+      {
+        position: "right",
+        alignTicksWithAxis: 1,
+        tickFormatter: function (value, axis) {
+          return value.toFixed(axis.tickDecimals) + "€";
+        }
+      }
+    ],
+    legend: { position: "sw" }
+  };
+  $.plot("#coindesk-flot", data1, options);
+}
+//
+// Draw Google Chart Graph on Coindesk page
+//
+function DrawCoinDeskGoogleCharts(){
+  var google_options = {
+    backgroundColor: '#fcfcfc',
+    title: 'Coindesk Exchange Rate'
+  };
+  var google_element = 'coindesk-google-chart';
+  var google_type = google.visualization.LineChart;
+  drawGoogleChart(google_data, google_options, google_element, google_type);
+}
+/*-------------------------------------------
+  Scripts for DataTables page (tables_datatables.html)
+---------------------------------------------*/
+//
+// Function for table, located in element with id = datatable-1
+//
+function TestTable1(){
+  $('#datatable-1').dataTable( {
+    "aaSorting": [[ 0, "asc" ]],
+    "sDom": "<'box-content'<'col-sm-6'f><'col-sm-6 text-right'l><'clearfix'>>rt<'box-content'<'col-sm-6'i><'col-sm-6 text-right'p><'clearfix'>>",
+    "sPaginationType": "bootstrap",
+    "oLanguage": {
+      "sSearch": "",
+      "sLengthMenu": '_MENU_'
+    }
+  });
+}
+//
+// Function for table, located in element with id = datatable-2
+//
+function TestTable2(){
+  var asInitVals = [];
+  var oTable = $('#datatable-2').dataTable( {
+    "aaSorting": [[ 0, "asc" ]],
+    "sDom": "<'box-content'<'col-sm-6'f><'col-sm-6 text-right'l><'clearfix'>>rt<'box-content'<'col-sm-6'i><'col-sm-6 text-right'p><'clearfix'>>",
+    "sPaginationType": "bootstrap",
+    "oLanguage": {
+      "sSearch": "",
+      "sLengthMenu": '_MENU_'
+    },
+    bAutoWidth: false
+  });
+  var header_inputs = $("#datatable-2 thead input");
+  header_inputs.on('keyup', function(){
+    /* Filter on the column (the index) of this element */
+    oTable.fnFilter( this.value, header_inputs.index(this) );
+  })
+  .on('focus', function(){
+    if ( this.className == "search_init" ){
+      this.className = "";
+      this.value = "";
+    }
+  })
+  .on('blur', function (i) {
+    if ( this.value == "" ){
+      this.className = "search_init";
+      this.value = asInitVals[header_inputs.index(this)];
+    }
+  });
+  header_inputs.each( function (i) {
+    asInitVals[i] = this.value;
+  });
+}
+//
+// Function for table, located in element with id = datatable-3
+//
+function TestTable3(){
+  $('#datatable-3').dataTable( {
+    "aaSorting": [[ 0, "asc" ]],
+    "sDom": "T<'box-content'<'col-sm-6'f><'col-sm-6 text-right'l><'clearfix'>>rt<'box-content'<'col-sm-6'i><'col-sm-6 text-right'p><'clearfix'>>",
+    "sPaginationType": "bootstrap",
+    "oLanguage": {
+      "sSearch": "",
+      "sLengthMenu": '_MENU_'
+    },
+    "oTableTools": {
+      "sSwfPath": "plugins/datatables/copy_csv_xls_pdf.swf",
+      "aButtons": [
+        "copy",
+        "print",
+        {
+          "sExtends":    "collection",
+          "sButtonText": 'Save <span class="caret" />',
+          "aButtons":    [ "csv", "xls", "pdf" ]
+        }
+      ]
+    }
+  });
+}
+/*-------------------------------------------
+  Functions for Dashboard page (dashboard.html)
+---------------------------------------------*/
+//
+// Helper for random change data (only test data for Sparkline plots)
+//
+function SmallChangeVal(val) {
+  var new_val = Math.floor(100*Math.random());
+  var plusOrMinus = Math.random() < 0.5 ? -1 : 1;
+  var result = val[0]+new_val*plusOrMinus;
+  if (parseInt(result) > 1000){
+    return [val[0] - new_val]
+  }
+  if (parseInt(result) < 0){
+    return [val[0] + new_val]
+  }
+  return [result];
+}
+//
+// Make array of random data
+//
+function SparklineTestData(){
+  var arr = [];
+  for (var i=1; i<9; i++){
+    arr.push([Math.floor(1000*Math.random())])
+  }
+  return arr;
+}
+//
+// Redraw Knob charts on Dashboard (panel- servers)
+//
+function RedrawKnob(elem){
+  elem.animate({
+    value: Math.floor(100*Math.random())
+  },{
+    duration: 3000,
+    easing:'swing',
+    progress: function()
+    {
+      $(this).val(parseInt(Math.ceil(elem.val()))).trigger('change');
+    }
+  });
+}
+//
+// Draw 3 Sparkline plot in Dashboard header
+//
+function SparklineLoop(){
+  SparkLineDrawBarGraph($('#sparkline-1'), sparkline_arr_1.map(SmallChangeVal));
+  SparkLineDrawBarGraph($('#sparkline-2'), sparkline_arr_2.map(SmallChangeVal), '#7BC5D3');
+  SparkLineDrawBarGraph($('#sparkline-3'), sparkline_arr_3.map(SmallChangeVal), '#B25050');
+}
+//
+// Draw Morris charts on Dashboard (panel- Statistics + 3 donut)
+//
+function MorrisDashboard(){
+  Morris.Line({
+    element: 'stat-graph',
+    data: [
+      {"period": "2014-01", "Win8": 13.4, "Win7": 55.3, 'Vista': 1.5, 'NT': 0.3, 'XP':11, 'Linux': 4.9, 'Mac': 9.6 , 'Mobile':4},
+      {"period": "2013-12", "Win8": 10, "Win7": 55.9, 'Vista': 1.5, 'NT': 3.1, 'XP':11.6, 'Linux': 4.8, 'Mac': 9.2 , 'Mobile':3.8},
+      {"period": "2013-11", "Win8": 8.6, "Win7": 56.4, 'Vista': 1.6, 'NT': 3.7, 'XP':11.7, 'Linux': 4.8, 'Mac': 9.6 , 'Mobile':3.7},
+      {"period": "2013-10", "Win8": 9.9, "Win7": 56.7, 'Vista': 1.6, 'NT': 1.4, 'XP':12.4, 'Linux': 4.9, 'Mac': 9.6 , 'Mobile':3.3},
+      {"period": "2013-09", "Win8": 10.2, "Win7": 56.8, 'Vista': 1.6, 'NT': 0.4, 'XP':13.5, 'Linux': 4.8, 'Mac': 9.3 , 'Mobile':3.3},
+      {"period": "2013-08", "Win8": 9.6, "Win7": 55.9, 'Vista': 1.7, 'NT': 0.4, 'XP':14.7, 'Linux': 5, 'Mac': 9.2 , 'Mobile':3.4},
+      {"period": "2013-07", "Win8": 9, "Win7": 56.2, 'Vista': 1.8, 'NT': 0.4, 'XP':15.8, 'Linux': 4.9, 'Mac': 8.7 , 'Mobile':3.2},
+      {"period": "2013-06", "Win8": 8.6, "Win7": 56.3, 'Vista': 2, 'NT': 0.4, 'XP':15.4, 'Linux': 4.9, 'Mac': 9.1 , 'Mobile':3.2},
+      {"period": "2013-05", "Win8": 7.9, "Win7": 56.4, 'Vista': 2.1, 'NT': 0.4, 'XP':15.7, 'Linux': 4.9, 'Mac': 9.7 , 'Mobile':2.6},
+      {"period": "2013-04", "Win8": 7.3, "Win7": 56.4, 'Vista': 2.2, 'NT': 0.4, 'XP':16.4, 'Linux': 4.8, 'Mac': 9.7 , 'Mobile':2.2},
+      {"period": "2013-03", "Win8": 6.7, "Win7": 55.9, 'Vista': 2.4, 'NT': 0.4, 'XP':17.6, 'Linux': 4.7, 'Mac': 9.5 , 'Mobile':2.3},
+      {"period": "2013-02", "Win8": 5.7, "Win7": 55.3, 'Vista': 2.4, 'NT': 0.4, 'XP':19.1, 'Linux': 4.8, 'Mac': 9.6 , 'Mobile':2.2},
+      {"period": "2013-01", "Win8": 4.8, "Win7": 55.3, 'Vista': 2.6, 'NT': 0.5, 'XP':19.9, 'Linux': 4.8, 'Mac': 9.3 , 'Mobile':2.2}
+    ],
+    xkey: 'period',
+    ykeys: ['Win8', 'Win7','Vista','NT','XP', 'Linux', 'Mac', 'Mobile'],
+    labels: ['Win8', 'Win7','Vista','NT','XP', 'Linux', 'Mac', 'Mobile']
+  });
+  Morris.Donut({
+    element: 'morris_donut_1',
+    data: [
+      {value: 70, label: 'pay', formatted: 'at least 70%' },
+      {value: 15, label: 'client', formatted: 'approx. 15%' },
+      {value: 10, label: 'buy', formatted: 'approx. 10%' },
+      {value: 5, label: 'hosted', formatted: 'at most 5%' }
+    ],
+    formatter: function (x, data) { return data.formatted; }
+  });
+  Morris.Donut({
+    element: 'morris_donut_2',
+    data: [
+      {value: 20, label: 'office', formatted: 'current' },
+      {value: 35, label: 'store', formatted: 'approx. 35%' },
+      {value: 20, label: 'shop', formatted: 'approx. 20%' },
+      {value: 25, label: 'cars', formatted: 'at most 25%' }
+    ],
+    formatter: function (x, data) { return data.formatted; }
+  });
+  Morris.Donut({
+    element: 'morris_donut_3',
+    data: [
+      {value: 17, label: 'current', formatted: 'current' },
+      {value: 22, label: 'week', formatted: 'last week' },
+      {value: 10, label: 'month', formatted: 'last month' },
+      {value: 25, label: 'period', formatted: 'period' },
+      {value: 25, label: 'year', formatted: 'this year' }
+    ],
+    formatter: function (x, data) { return data.formatted; }
+  });
+}
+//
+// Draw SparkLine example Charts for Dashboard (table- Tickers)
+//
+function DrawSparklineDashboard(){
+  SparklineLoop();
+  setInterval(SparklineLoop, 1000);
+  var sparkline_clients = [[309],[223], [343], [652], [455], [18], [912],[15]];
+  $('.bar').each(function(){
+    $(this).sparkline(sparkline_clients.map(SmallChangeVal), {type: 'bar', barWidth: 5, highlightColor: '#000', barSpacing: 2, height: 30, stackedBarColor: '#6AA6D6'});
+  });
+  var sparkline_table = [ [1,341], [2,464], [4,564], [5,235], [6,335], [7,535], [8,642], [9,342], [10,765] ];
+  $('.td-graph').each(function(){
+    var arr = $.map( sparkline_table, function(val, index) {
+      return [[val[0], SmallChangeVal([val[1]])]];
+    });
+    $(this).sparkline( arr ,
+      {defaultPixelsPerValue: 10, minSpotColor: null, maxSpotColor: null, spotColor: null,
+      fillColor: false, lineWidth: 2, lineColor: '#5A8DB6'});
+    });
+}
+//
+// Draw Knob Charts for Dashboard (for servers)
+//
+function DrawKnobDashboard(){
+  var srv_monitoring_selectors = [
+    $("#knob-srv-1"),$("#knob-srv-2"),$("#knob-srv-3"),
+    $("#knob-srv-4"),$("#knob-srv-5"),$("#knob-srv-6")
+  ];
+  srv_monitoring_selectors.forEach(DrawKnob);
+  setInterval(function(){
+    srv_monitoring_selectors.forEach(RedrawKnob);
+  }, 3000);
+}
+/*-------------------------------------------
+  Function for File upload page (form_file_uploader.html)
+---------------------------------------------*/
+function FileUpload(){
+  $('#bootstrapped-fine-uploader').fineUploader({
+    template: 'qq-template-bootstrap',
+    classes: {
+      success: 'alert alert-success',
+      fail: 'alert alert-error'
+    },
+    thumbnails: {
+      placeholders: {
+        waitingPath: "assets/waiting-generic.png",
+        notAvailablePath: "assets/not_available-generic.png"
+      }
+    },
+    request: {
+      endpoint: 'server/handleUploads'
+    },
+    validation: {
+      allowedExtensions: ['jpeg', 'jpg', 'gif', 'png']
+    }
+  });
+}
+/*-------------------------------------------
+  Function for OpenStreetMap page (maps.html)
+---------------------------------------------*/
+//
+// Load GeoIP JSON data and draw 3 maps
+//
+function LoadTestMap(){
+  $.getJSON("http://www.telize.com/geoip?callback=?",
+    function(json) {
+      var osmap = new OpenLayers.Layer.OSM("OpenStreetMap");//создание слоя карты
+      var googlestreets = new OpenLayers.Layer.Google("Google Streets", {numZoomLevels: 22,visibility: false});
+      var googlesattelite = new OpenLayers.Layer.Google( "Google Sattelite", {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22});
+      var map1_layers = [googlestreets,osmap, googlesattelite];
+      // Create map in element with ID - map-1
+      var map1 = drawMap(json.longitude, json.latitude, "map-1", map1_layers);
+      $("#map-1").resize(function(){ setTimeout(map1.updateSize(), 500); });
+      // Create map in element with ID - map-2
+      var osmap1 = new OpenLayers.Layer.OSM("OpenStreetMap");//создание слоя карты
+      var map2_layers = [osmap1];
+      var map2 = drawMap(json.longitude, json.latitude, "map-2", map2_layers);
+      $("#map-2").resize(function(){ setTimeout(map2.updateSize(), 500); });
+      // Create map in element with ID - map-3
+      var sattelite = new OpenLayers.Layer.Google( "Google Sattelite", {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22});
+      var map3_layers = [sattelite];
+      var map3 = drawMap(json.longitude, json.latitude, "map-3", map3_layers);
+      $("#map-3").resize(function(){ setTimeout(map3.updateSize(), 500); });
+    }
+  );
+}
+/*-------------------------------------------
+  Function for Fullscreen Map page (map_fullscreen.html)
+---------------------------------------------*/
+//
+// Create Fullscreen Map
+//
+function FullScreenMap(){
+  $.getJSON("http://www.telize.com/geoip?callback=?",
+    function(json) {
+      var osmap = new OpenLayers.Layer.OSM("OpenStreetMap");//создание слоя карты
+      var googlestreets = new OpenLayers.Layer.Google("Google Streets", {numZoomLevels: 22,visibility: false});
+      var googlesattelite = new OpenLayers.Layer.Google( "Google Sattelite", {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22});
+      var map1_layers = [googlestreets,osmap, googlesattelite];
+      var map_fs = drawMap(json.longitude, json.latitude, "full-map", map1_layers);
+    }
+  );
+}
+/*-------------------------------------------
+  Function for Flickr Gallery page (gallery_flickr.html)
+---------------------------------------------*/
+//
+// Load data from Flicks, parse and create gallery
+//
+function displayFlickrImages(data){
+  var res;
+  $.each(data.items, function(i,item){
+    if (i >11) { return false;}
+    res = "<a href=" + item.link + " title=" + item.title + " target=\"_blank\"><img alt=" + item.title + " src=" + item.media.m + " /></a>";
+    $('#box-one-content').append(res);
+    });
+    setTimeout(function(){
+      $("#box-one-content").justifiedGallery({
+        'usedSuffix':'lt240',
+        'justifyLastRow':true,
+        'rowHeight':150,
+        'fixedHeight':false,
+        'captions':true,
+        'margins':1
+        });
+      $('#box-one-content').fadeIn('slow');
+    }, 100);
+}
+/*-------------------------------------------
+  Function for Form Layout page (form layouts.html)
+---------------------------------------------*/
+//
+// Example form validator function
+//
+function DemoFormValidator(){
+  $('#defaultForm').bootstrapValidator({
+    message: 'This value is not valid',
+    fields: {
+      username: {
+        message: 'The username is not valid',
+        validators: {
+          notEmpty: {
+            message: 'The username is required and can\'t be empty'
+          },
+          stringLength: {
+            min: 6,
+            max: 30,
+            message: 'The username must be more than 6 and less than 30 characters long'
+          },
+          regexp: {
+            regexp: /^[a-zA-Z0-9_\.]+$/,
+            message: 'The username can only consist of alphabetical, number, dot and underscore'
+          }
+        }
+      },
+      country: {
+        validators: {
+          notEmpty: {
+            message: 'The country is required and can\'t be empty'
+          }
+        }
+      },
+      acceptTerms: {
+        validators: {
+          notEmpty: {
+            message: 'You have to accept the terms and policies'
+          }
+        }
+      },
+      email: {
+        validators: {
+          notEmpty: {
+            message: 'The email address is required and can\'t be empty'
+          },
+          emailAddress: {
+            message: 'The input is not a valid email address'
+          }
+        }
+      },
+      website: {
+        validators: {
+          uri: {
+            message: 'The input is not a valid URL'
+          }
+        }
+      },
+      phoneNumber: {
+        validators: {
+          digits: {
+            message: 'The value can contain only digits'
+          }
+        }
+      },
+      color: {
+        validators: {
+          hexColor: {
+            message: 'The input is not a valid hex color'
+          }
+        }
+      },
+      zipCode: {
+        validators: {
+          usZipCode: {
+            message: 'The input is not a valid US zip code'
+          }
+        }
+      },
+      password: {
+        validators: {
+          notEmpty: {
+            message: 'The password is required and can\'t be empty'
+          },
+          identical: {
+            field: 'confirmPassword',
+            message: 'The password and its confirm are not the same'
+          }
+        }
+      },
+      confirmPassword: {
+        validators: {
+          notEmpty: {
+            message: 'The confirm password is required and can\'t be empty'
+          },
+          identical: {
+            field: 'password',
+            message: 'The password and its confirm are not the same'
+          }
+        }
+      },
+      ages: {
+        validators: {
+          lessThan: {
+            value: 100,
+            inclusive: true,
+            message: 'The ages has to be less than 100'
+          },
+          greaterThan: {
+            value: 10,
+            inclusive: false,
+            message: 'The ages has to be greater than or equals to 10'
+          }
+        }
+      }
+    }
+  });
+}
+//
+// Function for Dynamically Change input size on Form Layout page
+//
+function FormLayoutExampleInputLength(selector){
+  var steps = [
+    "col-sm-1",
+    "col-sm-2",
+    "col-sm-3",
+    "col-sm-4",
+    "col-sm-5",
+    "col-sm-6",
+    "col-sm-7",
+    "col-sm-8",
+    "col-sm-9",
+    "col-sm-10",
+    "col-sm-11",
+    "col-sm-12"
+  ];
+  selector.slider({
+     range: 'min',
+    value: 1,
+    min: 0,
+    max: 11,
+    step: 1,
+    slide: function(event, ui) {
+      if (ui.value < 1) {
+        return false;
+      }
+      var input = $("#form-styles");
+      var f = input.parent();
+      f.removeClass();
+      f.addClass(steps[ui.value]);
+      input.attr("placeholder",'.'+steps[ui.value]);
+    }
+  });
+}
+/*-------------------------------------------
+  Functions for Progressbar page (ui_progressbars.html)
+---------------------------------------------*/
+//
+// Function for Knob clock
+//
+function RunClock() {
+  var second = $(".second");
+  var minute = $(".minute");
+  var hour = $(".hour");
+  var d = new Date();
+  var s = d.getSeconds();
+  var m = d.getMinutes();
+  var h = d.getHours();
+  if (h > 11) {h = h-12;}
+    $('#knob-clock-value').html(h+':'+m+':'+s);
+    second.val(s).trigger("change");
+    minute.val(m).trigger("change");
+    hour.val(h).trigger("change");
+}
+//
+// Function for create test sliders on Progressbar page
+//
+function CreateAllSliders(){
+  $(".slider-default").slider();
+  var slider_range_min_amount = $(".slider-range-min-amount");
+  var slider_range_min = $(".slider-range-min");
+  var slider_range_max = $(".slider-range-max");
+  var slider_range_max_amount = $(".slider-range-max-amount");
+  var slider_range = $(".slider-range");
+  var slider_range_amount = $(".slider-range-amount");
+  slider_range_min.slider({
+    range: "min",
+    value: 37,
+    min: 1,
+    max: 700,
+    slide: function( event, ui ) {
+      slider_range_min_amount.val( "$" + ui.value );
+    }
+  });
+  slider_range_min_amount.val("$" + slider_range_min.slider( "value" ));
+  slider_range_max.slider({
+    range: "max",
+    min: 1,
+    max: 100,
+    value: 2,
+    slide: function( event, ui ) {
+      slider_range_max_amount.val( ui.value );
+    }
+  });
+  slider_range_max_amount.val(slider_range_max.slider( "value" ));
+  slider_range.slider({
+    range: true,
+    min: 0,
+    max: 500,
+    values: [ 75, 300 ],
+    slide: function( event, ui ) {
+      slider_range_amount.val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
+    }
+  });
+  slider_range_amount.val( "$" + slider_range.slider( "values", 0 ) +
+    " - $" + slider_range.slider( "values", 1 ) );
+  $( "#equalizer > div.progress > div" ).each(function() {
+    // read initial values from markup and remove that
+    var value = parseInt( $( this ).text(), 10 );
+    $( this ).empty().slider({
+      value: value,
+      range: "min",
+      animate: true,
+      orientation: "vertical"
+    });
+  });
+}
+/*-------------------------------------------
+  Function for jQuery-UI page (ui_jquery-ui.html)
+---------------------------------------------*/
+//
+// Function for make all Date-Time pickers on page
+//
+function AllTimePickers(){
+  $('#datetime_example').datetimepicker({});
+  $('#time_example').timepicker({
+    hourGrid: 4,
+    minuteGrid: 10,
+    timeFormat: 'hh:mm tt'
+  });
+  $('#date3_example').datepicker({ numberOfMonths: 3, showButtonPanel: true});
+  $('#date3-1_example').datepicker({ numberOfMonths: 3, showButtonPanel: true});
+  $('#date_example').datepicker({});
+}
+/*-------------------------------------------
+  Function for Calendar page (calendar.html)
+---------------------------------------------*/
+//
+// Example form validator function
+//
+function DrawCalendar(){
+  /* initialize the external events
+  -----------------------------------------------------------------*/
+  $('#external-events div.external-event').each(function() {
+    // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
+    var eventObject = {
+      title: $.trim($(this).text()) // use the element's text as the event title
+    };
+    // store the Event Object in the DOM element so we can get to it later
+    $(this).data('eventObject', eventObject);
+    // make the event draggable using jQuery UI
+    $(this).draggable({
+      zIndex: 999,
+      revert: true,      // will cause the event to go back to its
+      revertDuration: 0  //  original position after the drag
+    });
+  });
+  /* initialize the calendar
+  -----------------------------------------------------------------*/
+  var calendar = $('#calendar').fullCalendar({
+    header: {
+      left: 'prev,next today',
+      center: 'title',
+      right: 'month,agendaWeek,agendaDay'
+    },
+    selectable: true,
+    selectHelper: true,
+    select: function(start, end, allDay) {
+      var form = $('<form id="event_form">'+
+        '<div class="form-group has-success has-feedback">'+
+        '<label">Event name</label>'+
+        '<div>'+
+        '<input type="text" id="newevent_name" class="form-control" placeholder="Name of event">'+
+        '</div>'+
+        '<label>Description</label>'+
+        '<div>'+
+        '<textarea rows="3" id="newevent_desc" class="form-control" placeholder="Description"></textarea>'+
+        '</div>'+
+        '</div>'+
+        '</form>');
+      var buttons = $('<button id="event_cancel" type="cancel" class="btn btn-default btn-label-left">'+
+              '<span><i class="fa fa-clock-o txt-danger"></i></span>'+
+              'Cancel'+
+              '</button>'+
+              '<button type="submit" id="event_submit" class="btn btn-primary btn-label-left pull-right">'+
+              '<span><i class="fa fa-clock-o"></i></span>'+
+              'Add'+
+              '</button>');
+      OpenModalBox('Add event', form, buttons);
+      $('#event_cancel').on('click', function(){
+        CloseModalBox();
+      });
+      $('#event_submit').on('click', function(){
+        var new_event_name = $('#newevent_name').val();
+        if (new_event_name != ''){
+          calendar.fullCalendar('renderEvent',
+            {
+              title: new_event_name,
+              description: $('#newevent_desc').val(),
+              start: start,
+              end: end,
+              allDay: allDay
+            },
+            true // make the event "stick"
+          );
+        }
+        CloseModalBox();
+      });
+      calendar.fullCalendar('unselect');
+    },
+    editable: true,
+    droppable: true, // this allows things to be dropped onto the calendar !!!
+    drop: function(date, allDay) { // this function is called when something is dropped
+      // retrieve the dropped element's stored Event Object
+      var originalEventObject = $(this).data('eventObject');
+      // we need to copy it, so that multiple events don't have a reference to the same object
+      var copiedEventObject = $.extend({}, originalEventObject);
+      // assign it the date that was reported
+      copiedEventObject.start = date;
+      copiedEventObject.allDay = allDay;
+      // render the event on the calendar
+      // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
+      $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
+      // is the "remove after drop" checkbox checked?
+      if ($('#drop-remove').is(':checked')) {
+        // if so, remove the element from the "Draggable Events" list
+        $(this).remove();
+      }
+    },
+    eventRender: function (event, element, icon) {
+      if (event.description != "") {
+        element.attr('title', event.description);
+      }
+    },
+    eventClick: function(calEvent, jsEvent, view) {
+      var form = $('<form id="event_form">'+
+        '<div class="form-group has-success has-feedback">'+
+        '<label">Event name</label>'+
+        '<div>'+
+        '<input type="text" id="newevent_name" value="'+ calEvent.title +'" class="form-control" placeholder="Name of event">'+
+        '</div>'+
+        '<label>Description</label>'+
+        '<div>'+
+        '<textarea rows="3" id="newevent_desc" class="form-control" placeholder="Description">'+ calEvent.description +'</textarea>'+
+        '</div>'+
+        '</div>'+
+        '</form>');
+      var buttons = $('<button id="event_cancel" type="cancel" class="btn btn-default btn-label-left">'+
+              '<span><i class="fa fa-clock-o txt-danger"></i></span>'+
+              'Cancel'+
+              '</button>'+
+              '<button id="event_delete" type="cancel" class="btn btn-danger btn-label-left">'+
+              '<span><i class="fa fa-clock-o txt-danger"></i></span>'+
+              'Delete'+
+              '</button>'+
+              '<button type="submit" id="event_change" class="btn btn-primary btn-label-left pull-right">'+
+              '<span><i class="fa fa-clock-o"></i></span>'+
+              'Save changes'+
+              '</button>');
+      OpenModalBox('Change event', form, buttons);
+      $('#event_cancel').on('click', function(){
+        CloseModalBox();
+      });
+      $('#event_delete').on('click', function(){
+        calendar.fullCalendar('removeEvents' , function(ev){
+          return (ev._id == calEvent._id);
+        });
+        CloseModalBox();
+      });
+      $('#event_change').on('click', function(){
+        calEvent.title = $('#newevent_name').val();
+        calEvent.description = $('#newevent_desc').val();
+        calendar.fullCalendar('updateEvent', calEvent);
+        CloseModalBox()
+      });
+    }
+    });
+    $('#new-event-add').on('click', function(event){
+      event.preventDefault();
+      var event_name = $('#new-event-title').val();
+      var event_description = $('#new-event-desc').val();
+      if (event_name != ''){
+      var event_template = $('<div class="external-event" data-description="'+event_description+'">'+event_name+'</div>');
+      $('#events-templates-header').after(event_template);
+      var eventObject = {
+        title: event_name,
+        description: event_description
+      };
+      // store the Event Object in the DOM element so we can get to it later
+      event_template.data('eventObject', eventObject);
+      event_template.draggable({
+        zIndex: 999,
+        revert: true,
+        revertDuration: 0
+      });
+      }
+    });
+}
+//
+// Load scripts and draw Calendar
+//
+function DrawFullCalendar(){
+  LoadCalendarScript(DrawCalendar);
+}
+//////////////////////////////////////////////////////
+//////////////////////////////////////////////////////
+//
+//      MAIN DOCUMENT READY SCRIPT OF DEVOOPS THEME
+//
+//      In this script main logic of theme
+//
+//////////////////////////////////////////////////////
+//////////////////////////////////////////////////////
+$(document).ready(function () {
+  $('.show-sidebar').on('click', function () {
+    $('div#main').toggleClass('sidebar-show');
+    setTimeout(MessagesMenuWidth, 250);
+  });
+  var ajax_url = location.hash.replace(/^#/, '');
+  if (ajax_url.length < 1) {
+    ajax_url = 'ajax/dashboard.html';
+  }
+  LoadAjaxContent(ajax_url);
+  $('.main-menu').on('click', 'a', function (e) {
+    var parents = $(this).parents('li');
+    var li = $(this).closest('li.dropdown');
+    var another_items = $('.main-menu li').not(parents);
+    another_items.find('a').removeClass('active');
+    another_items.find('a').removeClass('active-parent');
+    if ($(this).hasClass('dropdown-toggle') || $(this).closest('li').find('ul').length == 0) {
+      $(this).addClass('active-parent');
+      var current = $(this).next();
+      if (current.is(':visible')) {
+        li.find("ul.dropdown-menu").slideUp('fast');
+        li.find("ul.dropdown-menu a").removeClass('active')
+      }
+      else {
+        another_items.find("ul.dropdown-menu").slideUp('fast');
+        current.slideDown('fast');
+      }
+    }
+    else {
+      if (li.find('a.dropdown-toggle').hasClass('active-parent')) {
+        var pre = $(this).closest('ul.dropdown-menu');
+        pre.find("li.dropdown").not($(this).closest('li')).find('ul.dropdown-menu').slideUp('fast');
+      }
+    }
+    if ($(this).hasClass('active') == false) {
+      $(this).parents("ul.dropdown-menu").find('a').removeClass('active');
+      $(this).addClass('active')
+    }
+    if ($(this).hasClass('ajax-link')) {
+      e.preventDefault();
+      if ($(this).hasClass('add-full')) {
+        $('#content').addClass('full-content');
+      }
+      else {
+        $('#content').removeClass('full-content');
+      }
+      var url = $(this).attr('href');
+      window.location.hash = url;
+      LoadAjaxContent(url);
+    }
+    if ($(this).attr('href') == '#') {
+      e.preventDefault();
+    }
+  });
+  var height = window.innerHeight - 49;
+  $('#main').css('min-height', height)
+    .on('click', '.expand-link', function (e) {
+      var body = $('body');
+      e.preventDefault();
+      var box = $(this).closest('div.box');
+      var button = $(this).find('i');
+      button.toggleClass('fa-expand').toggleClass('fa-compress');
+      box.toggleClass('expanded');
+      body.toggleClass('body-expanded');
+      var timeout = 0;
+      if (body.hasClass('body-expanded')) {
+        timeout = 100;
+      }
+      setTimeout(function () {
+        box.toggleClass('expanded-padding');
+      }, timeout);
+      setTimeout(function () {
+        box.resize();
+        box.find('[id^=map-]').resize();
+      }, timeout + 50);
+    })
+    .on('click', '.collapse-link', function (e) {
+      e.preventDefault();
+      var box = $(this).closest('div.box');
+      var button = $(this).find('i');
+      var content = box.find('div.box-content');
+      content.slideToggle('fast');
+      button.toggleClass('fa-chevron-up').toggleClass('fa-chevron-down');
+      setTimeout(function () {
+        box.resize();
+        box.find('[id^=map-]').resize();
+      }, 50);
+    })
+    .on('click', '.close-link', function (e) {
+      e.preventDefault();
+      var content = $(this).closest('div.box');
+      content.remove();
+    });
+  $('#locked-screen').on('click', function (e) {
+    e.preventDefault();
+    $('body').addClass('body-screensaver');
+    $('#screensaver').addClass("show");
+    ScreenSaver();
+  });
+  $('body').on('click', 'a.close-link', function(e){
+    e.preventDefault();
+    CloseModalBox();
+  });
+  $('#top-panel').on('click','a', function(e){
+    if ($(this).hasClass('ajax-link')) {
+      e.preventDefault();
+      if ($(this).hasClass('add-full')) {
+        $('#content').addClass('full-content');
+      }
+      else {
+        $('#content').removeClass('full-content');
+      }
+      var url = $(this).attr('href');
+      window.location.hash = url;
+      LoadAjaxContent(url);
+    }
+  });
+  $('#search').on('keydown', function(e){
+    if (e.keyCode == 13){
+      e.preventDefault();
+      $('#content').removeClass('full-content');
+      ajax_url = 'ajax/page_search.html';
+      window.location.hash = ajax_url;
+      LoadAjaxContent(ajax_url);
+    }
+  });
+  $('#screen_unlock').on('mouseover', function(){
+    var header = 'Enter current username and password';
+    var form = $('<div class="form-group"><label class="control-label">Username</label><input type="text" class="form-control" name="username" /></div>'+
+          '<div class="form-group"><label class="control-label">Password</label><input type="password" class="form-control" name="password" /></div>');
+    var button = $('<div class="text-center"><a href="index.html" class="btn btn-primary">Unlock</a></div>');
+    OpenModalBox(header, form, button);
+  });
+});
+
+