API tools faq
paste
Advertisement
hollerith

indecks

hollerith
Jan 19th, 2015
920
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 140.14 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>skillBase</title>
  6.         <meta name="description" content="description">
  7.         <meta name="author" content="DevOOPS">
  8.         <meta name="viewport" content="width=device-width, initial-scale=1">
  9.         <link href="plugins/bootstrap/bootstrap.css" rel="stylesheet">
  10.         <link href="plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet">
  11.         <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
  12.         <link href='https://fonts.googleapis.com/css?family=Righteous' rel='stylesheet' type='text/css'>
  13.         <link href="plugins/fancybox/jquery.fancybox.css" rel="stylesheet">
  14.         <link href="plugins/fullcalendar/fullcalendar.css" rel="stylesheet">
  15.         <link href="plugins/xcharts/xcharts.min.css" rel="stylesheet">
  16.         <link href="plugins/select2/select2.css" rel="stylesheet">
  17.         <link href="plugins/justified-gallery/justifiedGallery.css" rel="stylesheet">
  18.         <link href="css/style_v2.css" rel="stylesheet">
  19.         <link href="plugins/chartist/chartist.min.css" rel="stylesheet">
  20.         <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  21.         <!--[if lt IE 9]>
  22.                <script src="https://getbootstrap.com/docs-assets/js/html5shiv.js"></script>
  23.                <script src="https://getbootstrap.com/docs-assets/js/respond.min.js"></script>
  24.        <![endif]-->
  25.      </head>
  26. <body>
  27. <!--Start Header-->
  28. <div id="screensaver">
  29.     <canvas id="canvas"></canvas>
  30.     <i class="fa fa-lock" id="screen_unlock"></i>
  31. </div>
  32. <div id="modalbox">
  33.     <div class="devoops-modal">
  34.         <div class="devoops-modal-header">
  35.             <div class="modal-header-name">
  36.                 <span>Basic table</span>
  37.             </div>
  38.             <div class="box-icons">
  39.                 <a class="close-link">
  40.                     <i class="fa fa-times"></i>
  41.                 </a>
  42.             </div>
  43.         </div>
  44.         <div class="devoops-modal-inner">
  45.         </div>
  46.         <div class="devoops-modal-bottom">
  47.         </div>
  48.     </div>
  49. </div>
  50. <header class="navbar">
  51.     <div class="container-fluid expanded-panel">
  52.         <div class="row">
  53.             <div id="logo" class="col-xs-12 col-sm-2">
  54.                 <a href="#/">skillBase</a>
  55.             </div>
  56.             <div id="top-panel" class="col-xs-12 col-sm-10">
  57.                 <div class="row">
  58.                     <div class="col-xs-8 col-sm-4">
  59.                         <div id="search">
  60.                             <input type="text" placeholder="search"/>
  61.                             <i class="fa fa-search"></i>
  62.                         </div>
  63.                     </div>
  64.                     <div class="col-xs-4 col-sm-8 top-panel-right">
  65.                         <a href="#" class="about">about</a>
  66.                         <a href="index_v1.html" class="style1"></a>
  67.                         <ul class="nav navbar-nav pull-right panel-menu">
  68.                             <li class="hidden-xs">
  69.                                 <a href="index.html" class="modal-link">
  70.                                     <i class="fa fa-bell"></i>
  71.                                     <span class="badge">7</span>
  72.                                 </a>
  73.                             </li>
  74.                             <li class="hidden-xs">
  75.                                 <a class="ajax-link" href="ajax/calendar.html">
  76.                                     <i class="fa fa-calendar"></i>
  77.                                     <span class="badge">7</span>
  78.                                 </a>
  79.                             </li>
  80.                             <li class="hidden-xs">
  81.                                 <a href="ajax/page_messages.html" class="ajax-link">
  82.                                     <i class="fa fa-envelope"></i>
  83.                                     <span class="badge">7</span>
  84.                                 </a>
  85.                             </li>
  86.                             <li class="dropdown">
  87.                                 <a href="#" class="dropdown-toggle account" data-toggle="dropdown">
  88.                                     <div class="avatar">
  89.                                         <img src="img/avatar.jpg" class="img-circle" alt="avatar" />
  90.                                     </div>
  91.                                     <i class="fa fa-angle-down pull-right"></i>
  92.                                     <div class="user-mini pull-right">
  93.                                         <span class="welcome">Welcome,</span>
  94.                                         <span>Jane Devoops</span>
  95.                                     </div>
  96.                                 </a>
  97.                                 <ul class="dropdown-menu">
  98.                                     <li>
  99.                                         <a href="#">
  100.                                             <i class="fa fa-user"></i>
  101.                                             <span>Profile</span>
  102.                                         </a>
  103.                                     </li>
  104.                                     <li>
  105.                                         <a href="ajax/page_messages.html" class="ajax-link">
  106.                                             <i class="fa fa-envelope"></i>
  107.                                             <span>Messages</span>
  108.                                         </a>
  109.                                     </li>
  110.                                     <li>
  111.                                         <a href="ajax/gallery_simple.html" class="ajax-link">
  112.                                             <i class="fa fa-picture-o"></i>
  113.                                             <span>Albums</span>
  114.                                         </a>
  115.                                     </li>
  116.                                     <li>
  117.                                         <a href="ajax/calendar.html" class="ajax-link">
  118.                                             <i class="fa fa-tasks"></i>
  119.                                             <span>Tasks</span>
  120.                                         </a>
  121.                                     </li>
  122.                                     <li>
  123.                                         <a href="#">
  124.                                             <i class="fa fa-cog"></i>
  125.                                             <span>Settings</span>
  126.                                         </a>
  127.                                     </li>
  128.                                     <li>
  129.                                         <a href="#/logout">
  130.                                             <i class="fa fa-power-off"></i>
  131.                                             <span>Logout</span>
  132.                                         </a>
  133.                                     </li>
  134.                                 </ul>
  135.                             </li>
  136.                         </ul>
  137.                     </div>
  138.                 </div>
  139.             </div>
  140.         </div>
  141.     </div>
  142. </header>
  143. <!--End Header-->
  144. <!--Start Container-->
  145. <div id="main" class="container-fluid">
  146.     <div class="row">
  147.         <div id="sidebar-left" class="col-xs-2 col-sm-2">
  148.             <ul class="nav main-menu">
  149.                 <li>
  150.                     <a href="ajax/dashboard.html" class="active ajax-link">
  151.                         <i class="fa fa-dashboard"></i>
  152.                         <span class="hidden-xs">Dashboard</span>
  153.                     </a>
  154.                 </li>
  155.                 <li class="dropdown">
  156.                     <a href="#" class="dropdown-toggle">
  157.                         <i class="fa fa-bar-chart-o"></i>
  158.                         <span class="hidden-xs">Charts</span>
  159.                     </a>
  160.                     <ul class="dropdown-menu">
  161.                         <li><a class="ajax-link" href="ajax/charts_xcharts.html">xCharts</a></li>
  162.                         <li><a class="ajax-link" href="ajax/charts_flot.html">Flot Charts</a></li>
  163.                         <li><a class="ajax-link" href="ajax/charts_google.html">Google Charts</a></li>
  164.                         <li><a class="ajax-link" href="ajax/charts_morris.html">Morris Charts</a></li>
  165.                         <li><a class="ajax-link" href="ajax/charts_amcharts.html">AmCharts</a></li>
  166.                         <li><a class="ajax-link" href="ajax/charts_chartist.html">Chartist</a></li>
  167.                         <li><a class="ajax-link" href="ajax/charts_coindesk.html">CoinDesk realtime</a></li>
  168.                     </ul>
  169.                 </li>
  170.                 <li class="dropdown">
  171.                     <a href="#" class="dropdown-toggle">
  172.                         <i class="fa fa-table"></i>
  173.                          <span class="hidden-xs">Tables</span>
  174.                     </a>
  175.                     <ul class="dropdown-menu">
  176.                         <li><a class="ajax-link" href="ajax/tables_simple.html">Simple Tables</a></li>
  177.                         <li><a class="ajax-link" href="ajax/tables_datatables.html">Data Tables</a></li>
  178.                         <li><a class="ajax-link" href="ajax/tables_beauty.html">Beauty Tables</a></li>
  179.                     </ul>
  180.                 </li>
  181.                 <li class="dropdown">
  182.                     <a href="#" class="dropdown-toggle">
  183.                         <i class="fa fa-pencil-square-o"></i>
  184.                          <span class="hidden-xs">Forms</span>
  185.                     </a>
  186.                     <ul class="dropdown-menu">
  187.                         <li><a class="ajax-link" href="ajax/forms_elements.html">Elements</a></li>
  188.                         <li><a class="ajax-link" href="ajax/forms_layouts.html">Layouts</a></li>
  189.                         <li><a class="ajax-link" href="ajax/forms_file_uploader.html">File Uploader</a></li>
  190.                     </ul>
  191.                 </li>
  192.                 <li class="dropdown">
  193.                     <a href="#" class="dropdown-toggle">
  194.                         <i class="fa fa-desktop"></i>
  195.                          <span class="hidden-xs">UI Elements</span>
  196.                     </a>
  197.                     <ul class="dropdown-menu">
  198.                         <li><a class="ajax-link" href="ajax/ui_grid.html">Grid</a></li>
  199.                         <li><a class="ajax-link" href="ajax/ui_buttons.html">Buttons</a></li>
  200.                         <li><a class="ajax-link" href="ajax/ui_progressbars.html">Progress Bars</a></li>
  201.                         <li><a class="ajax-link" href="ajax/ui_jquery-ui.html">Jquery UI</a></li>
  202.                         <li><a class="ajax-link" href="ajax/ui_icons.html">Icons</a></li>
  203.                     </ul>
  204.                 </li>
  205.                 <li class="dropdown">
  206.                     <a href="#" class="dropdown-toggle">
  207.                         <i class="fa fa-list"></i>
  208.                          <span class="hidden-xs">Pages</span>
  209.                     </a>
  210.                     <ul class="dropdown-menu">
  211.                         <li><a href="ajax/page_login.html">Login</a></li>
  212.                         <li><a href="#/login">Login</a></li>
  213.                         <li><a href="ajax/page_register.html">Register</a></li>
  214.                         <li><a id="locked-screen" class="submenu" href="ajax/page_locked.html">Locked Screen</a></li>
  215.                         <li><a class="ajax-link" href="ajax/page_contacts.html">Contacts</a></li>
  216.                         <li><a class="ajax-link" href="ajax/page_feed.html">Feed</a></li>
  217.                         <li><a class="ajax-link add-full" href="ajax/page_messages.html">Messages</a></li>
  218.                         <li><a class="ajax-link" href="ajax/page_pricing.html">Pricing</a></li>
  219.                         <li><a class="ajax-link" href="ajax/page_product.html">Product</a></li>
  220.                         <li><a class="ajax-link" href="ajax/page_invoice.html">Invoice</a></li>
  221.                         <li><a class="ajax-link" href="ajax/page_search.html">Search Results</a></li>
  222.                         <li><a class="ajax-link" href="ajax/page_404.html">Error 404</a></li>
  223.                         <li><a href="ajax/page_500.html">Error 500</a></li>
  224.                     </ul>
  225.                 </li>
  226.                 <li class="dropdown">
  227.                     <a href="#" class="dropdown-toggle">
  228.                         <i class="fa fa-map-marker"></i>
  229.                         <span class="hidden-xs">Maps</span>
  230.                     </a>
  231.                     <ul class="dropdown-menu">
  232.                         <li><a class="ajax-link" href="ajax/maps.html">OpenStreetMap</a></li>
  233.                         <li><a class="ajax-link" href="ajax/map_fullscreen.html">Fullscreen map</a></li>
  234.                         <li><a class="ajax-link" href="ajax/map_leaflet.html">Leaflet</a></li>
  235.                     </ul>
  236.                 </li>
  237.                 <li class="dropdown">
  238.                     <a href="#" class="dropdown-toggle">
  239.                         <i class="fa fa-picture-o"></i>
  240.                          <span class="hidden-xs">Gallery</span>
  241.                     </a>
  242.                     <ul class="dropdown-menu">
  243.                         <li><a class="ajax-link" href="ajax/gallery_simple.html">Simple Gallery</a></li>
  244.                         <li><a class="ajax-link" href="ajax/gallery_flickr.html">Flickr Gallery</a></li>
  245.                     </ul>
  246.                 </li>
  247.                 <li>
  248.                      <a class="ajax-link" href="ajax/typography.html">
  249.                          <i class="fa fa-font"></i>
  250.                          <span class="hidden-xs">Typography</span>
  251.                     </a>
  252.                 </li>
  253.                  <li>
  254.                     <a class="ajax-link" href="ajax/calendar.html">
  255.                          <i class="fa fa-calendar"></i>
  256.                          <span class="hidden-xs">Calendar</span>
  257.                     </a>
  258.                  </li>
  259.                 <li class="dropdown">
  260.                     <a href="#" class="dropdown-toggle">
  261.                         <i class="fa fa-picture-o"></i>
  262.                          <span class="hidden-xs">Multilevel menu</span>
  263.                     </a>
  264.                     <ul class="dropdown-menu">
  265.                         <li><a href="#">First level menu</a></li>
  266.                         <li><a href="#">First level menu</a></li>
  267.                         <li class="dropdown">
  268.                             <a href="#" class="dropdown-toggle">
  269.                                 <i class="fa fa-plus-square"></i>
  270.                                 <span class="hidden-xs">Second level menu group</span>
  271.                             </a>
  272.                             <ul class="dropdown-menu">
  273.                                 <li><a href="#">Second level menu</a></li>
  274.                                 <li><a href="#">Second level menu</a></li>
  275.                                 <li class="dropdown">
  276.                                     <a href="#" class="dropdown-toggle">
  277.                                         <i class="fa fa-plus-square"></i>
  278.                                         <span class="hidden-xs">Three level menu group</span>
  279.                                     </a>
  280.                                     <ul class="dropdown-menu">
  281.                                         <li><a href="#">Three level menu</a></li>
  282.                                         <li><a href="#">Three level menu</a></li>
  283.                                         <li class="dropdown">
  284.                                             <a href="#" class="dropdown-toggle">
  285.                                                 <i class="fa fa-plus-square"></i>
  286.                                                 <span class="hidden-xs">Four level menu group</span>
  287.                                             </a>
  288.                                             <ul class="dropdown-menu">
  289.                                                 <li><a href="#">Four level menu</a></li>
  290.                                                 <li><a href="#">Four level menu</a></li>
  291.                                                 <li class="dropdown">
  292.                                                     <a href="#" class="dropdown-toggle">
  293.                                                         <i class="fa fa-plus-square"></i>
  294.                                                         <span class="hidden-xs">Five level menu group</span>
  295.                                                     </a>
  296.                                                     <ul class="dropdown-menu">
  297.                                                         <li><a href="#">Five level menu</a></li>
  298.                                                         <li><a href="#">Five level menu</a></li>
  299.                                                         <li class="dropdown">
  300.                                                             <a href="#" class="dropdown-toggle">
  301.                                                                 <i class="fa fa-plus-square"></i>
  302.                                                                 <span class="hidden-xs">Six level menu group</span>
  303.                                                             </a>
  304.                                                             <ul class="dropdown-menu">
  305.                                                                 <li><a href="#">Six level menu</a></li>
  306.                                                                 <li><a href="#">Six level menu</a></li>
  307.                                                             </ul>
  308.                                                         </li>
  309.                                                     </ul>
  310.                                                 </li>
  311.                                             </ul>
  312.                                         </li>
  313.                                         <li><a href="#">Three level menu</a></li>
  314.                                     </ul>
  315.                                 </li>
  316.                             </ul>
  317.                         </li>
  318.                     </ul>
  319.                 </li>
  320.             </ul>
  321.         </div>
  322.         <!--Start Content-->
  323.         <div id="content" class="col-xs-12 col-sm-10">
  324.             <div id="about">
  325.                 <div class="about-inner">
  326.                     <h4 class="page-header">Open-source admin theme for you</h4>
  327.                     <p>DevOOPS team</p>
  328.                     <p>Homepage - <a href="https://devoops.me" target="_blank">https://devoops.me</a></p>
  329.                     <p>Email - <a href="mailto:devoopsme@gmail.com">devoopsme@gmail.com</a></p>
  330.                     <p>Twitter - <a href="https://twitter.com/devoopsme" target="_blank">https://twitter.com/devoopsme</a></p>
  331.                     <p>Donate - BTC 123Ci1ZFK5V7gyLsyVU36yPNWSB5TDqKn3</p>
  332.                 </div>
  333.             </div>
  334.             <div class="preloader">
  335.                 <img src="img/devoops_getdata.gif" class="devoops-getdata" alt="preloader"/>
  336.             </div>
  337.             <div id="ajax-content"></div>
  338.         </div>
  339.         <!--End Content-->
  340.     </div>
  341. </div>
  342. <!--End Container-->
  343. <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  344. <!--<script src="https://code.jquery.com/jquery.js"></script>-->
  345. <script src="plugins/jquery/jquery.min.js"></script>
  346. <script src="plugins/jquery-ui/jquery-ui.min.js"></script>
  347.  
  348. <!-- Include all compiled plugins (below), or include individual files as needed -->
  349. <script src="plugins/bootstrap/bootstrap.min.js"></script>
  350. <script src="plugins/justified-gallery/jquery.justifiedGallery.min.js"></script>
  351. <script src="plugins/tinymce/tinymce.min.js"></script>
  352. <script src="plugins/tinymce/jquery.tinymce.min.js"></script>
  353. <script type="text/javascript" src="plugins/router/path.js"></script>
  354. <!--script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/path.js/0.8.4/path.min.js"></script-->
  355. <script type="text/javascript" src="https://cdn.firebase.com/js/client/1.1.1/firebase.js"></script>
  356.  
  357. <script>
  358.     Path.map("#/").to(function() {
  359.         var rootRef = new Firebase('https://docs-sandbox.firebaseio.com/web/uauth');
  360.  
  361.         // Check the current user
  362.         var user = rootRef.getAuth();
  363.         var userRef;
  364.        
  365.         if (!user) {
  366.             console.log('Not logged in');
  367.             return
  368.         }          
  369.     });
  370.    
  371.     Path.map("#/login").to(function() {
  372.  
  373.         LoadAjaxContent('ajax/page_login.html')
  374.        
  375.     });
  376.     Path.map("#/logout").to(function() { console.log('Logged out') });
  377.     Path.listen();
  378. </script>
  379.  
  380. <!-- All functions for this theme + document.ready processing -->
  381. <script>
  382. //
  383. //    Main script of DevOOPS v1.0 Bootstrap Theme
  384. //
  385. "use strict";
  386. /*-------------------------------------------
  387.     Dynamically load plugin scripts
  388. ---------------------------------------------*/
  389. //
  390. // Dynamically load Fullcalendar Plugin Script
  391. // homepage: https://arshaw.com/fullcalendar
  392. // require moment.js
  393. //
  394. function LoadCalendarScript(callback){
  395.     function LoadFullCalendarScript(){
  396.         if(!$.fn.fullCalendar){
  397.             $.getScript('plugins/fullcalendar/fullcalendar.js', callback);
  398.         }
  399.         else {
  400.             if (callback && typeof(callback) === "function") {
  401.                callback();
  402.             }
  403.         }
  404.     }
  405.     if (!$.fn.moment){
  406.         $.getScript('plugins/moment/moment.min.js', LoadFullCalendarScript);
  407.     }
  408.     else {
  409.         LoadFullCalendarScript();
  410.     }
  411. }
  412. //
  413. // Dynamically load  OpenStreetMap Plugin
  414. // homepage: https://openlayers.org
  415. //
  416. function LoadOpenLayersScript(callback){
  417.     if (!$.fn.OpenLayers){
  418.         $.getScript('plugins/maps/OpenLayers.js', callback);
  419.     }
  420.     else {
  421.         if (callback && typeof(callback) === "function") {
  422.            callback();
  423.         }
  424.     }
  425. }
  426. //
  427. // Dynamically load  Leaflet Plugin
  428. // homepage: https://leafletjs.com
  429. //
  430. function LoadLeafletScript(callback){
  431.     if (!$.fn.L){
  432.         $.getScript('plugins/leaflet/leaflet.js', callback);
  433.     }
  434.     else {
  435.         if (callback && typeof(callback) === "function") {
  436.            callback();
  437.         }
  438.     }
  439. }
  440. //
  441. //  Dynamically load  jQuery Timepicker plugin
  442. //  homepage: https://trentrichardson.com/examples/timepicker/
  443. //
  444. function LoadTimePickerScript(callback){
  445.     if (!$.fn.timepicker){
  446.         $.getScript('plugins/jquery-ui-timepicker-addon/jquery-ui-timepicker-addon.min.js', callback);
  447.     }
  448.     else {
  449.         if (callback && typeof(callback) === "function") {
  450.            callback();
  451.         }
  452.     }
  453. }
  454. //
  455. //  Dynamically load Bootstrap Validator Plugin
  456. //  homepage: https://github.com/nghuuphuoc/bootstrapvalidator
  457. //
  458. function LoadBootstrapValidatorScript(callback){
  459.     if (!$.fn.bootstrapValidator){
  460.         $.getScript('plugins/bootstrapvalidator/bootstrapValidator.min.js', callback);
  461.     }
  462.     else {
  463.         if (callback && typeof(callback) === "function") {
  464.            callback();
  465.         }
  466.     }
  467. }
  468. //
  469. //  Dynamically load jQuery Select2 plugin
  470. //  homepage: https://github.com/ivaynberg/select2  v3.4.5  license - GPL2
  471. //
  472. function LoadSelect2Script(callback){
  473.     if (!$.fn.select2){
  474.         $.getScript('plugins/select2/select2.min.js', callback);
  475.     }
  476.     else {
  477.         if (callback && typeof(callback) === "function") {
  478.            callback();
  479.         }
  480.     }
  481. }
  482. //
  483. //  Dynamically load DataTables plugin
  484. //  homepage: https://datatables.net v1.9.4 license - GPL or BSD
  485. //
  486. function LoadDataTablesScripts(callback){
  487.     function LoadDatatables(){
  488.         $.getScript('plugins/datatables/jquery.dataTables.js', function(){
  489.             $.getScript('plugins/datatables/ZeroClipboard.js', function(){
  490.                 $.getScript('plugins/datatables/TableTools.js', function(){
  491.                     $.getScript('plugins/datatables/dataTables.bootstrap.js', callback);
  492.                 });
  493.             });
  494.         });
  495.     }
  496.     if (!$.fn.dataTables){
  497.         LoadDatatables();
  498.     }
  499.     else {
  500.         if (callback && typeof(callback) === "function") {
  501.            callback();
  502.         }
  503.     }
  504. }
  505. //
  506. //  Dynamically load Widen FineUploader
  507. //  homepage: https://github.com/Widen/fine-uploader  v5.0.5 license - GPL3
  508. //
  509. function LoadFineUploader(callback){
  510.     if (!$.fn.fineuploader){
  511.         $.getScript('plugins/fineuploader/jquery.fineuploader-5.0.5.min.js', callback);
  512.     }
  513.     else {
  514.         if (callback && typeof(callback) === "function") {
  515.            callback();
  516.         }
  517.     }
  518. }
  519. //
  520. //  Dynamically load xCharts plugin
  521. //  homepage: https://tenxer.github.io/xcharts/ v0.3.0 license - MIT
  522. //  Required D3 plugin https://d3js.org/ v3.4.11 license - MIT
  523. //
  524. function LoadXChartScript(callback){
  525.     function LoadXChart(){
  526.         $.getScript('plugins/xcharts/xcharts.js', callback);
  527.     }
  528.     function LoadD3Script(){
  529.         if (!$.fn.d3){
  530.             $.getScript('plugins/d3/d3.min.js', LoadXChart)
  531.         }
  532.         else {
  533.             LoadXChart();
  534.         }
  535.     }
  536.     if (!$.fn.xcharts){
  537.         LoadD3Script();
  538.     }
  539.     else {
  540.         if (callback && typeof(callback) === "function") {
  541.            callback();
  542.         }
  543.     }
  544. }
  545. //
  546. //  Dynamically load Flot plugin
  547. //  homepage: https://www.flotcharts.org  v0.8.2 license- MIT
  548. //
  549. function LoadFlotScripts(callback){
  550.     function LoadFlotScript(){
  551.         $.getScript('plugins/flot/jquery.flot.js', LoadFlotResizeScript);
  552.     }
  553.     function LoadFlotResizeScript(){
  554.         $.getScript('plugins/flot/jquery.flot.resize.js', LoadFlotTimeScript);
  555.     }
  556.     function LoadFlotTimeScript(){
  557.         $.getScript('plugins/flot/jquery.flot.time.js', callback);
  558.     }
  559.     if (!$.fn.flot){
  560.         LoadFlotScript();
  561.     }
  562.     else {
  563.         if (callback && typeof(callback) === "function") {
  564.            callback();
  565.         }
  566.     }
  567. }
  568. //
  569. //  Dynamically load Morris Charts plugin
  570. //  homepage: https://www.oesmith.co.uk/morris.js/ v0.4.3 License - MIT
  571. //  require Raphael https://raphael.js
  572. //
  573. function LoadMorrisScripts(callback){
  574.     function LoadMorrisScript(){
  575.         if(!$.fn.Morris){
  576.             $.getScript('plugins/morris/morris.min.js', callback);
  577.         }
  578.         else {
  579.             if (callback && typeof(callback) === "function") {
  580.                callback();
  581.             }
  582.         }
  583.     }
  584.     if (!$.fn.raphael){
  585.         $.getScript('plugins/raphael/raphael-min.js', LoadMorrisScript);
  586.     }
  587.     else {
  588.         LoadMorrisScript();
  589.     }
  590. }
  591. //
  592. //  Dynamically load Am Charts plugin
  593. //  homepage: https://www.amcharts.com/ 3.11.1 free with linkware
  594. //
  595. function LoadAmchartsScripts(callback){
  596.     function LoadAmchartsScript(){
  597.         $.getScript('plugins/amcharts/amcharts.js', LoadFunnelScript);
  598.     }
  599.     function LoadFunnelScript(){
  600.         $.getScript('plugins/amcharts/funnel.js', LoadSerialScript);
  601.     }
  602.     function LoadSerialScript(){
  603.         $.getScript('plugins/amcharts/serial.js', LoadPieScript);
  604.     }
  605.     function LoadPieScript(){
  606.         $.getScript('plugins/amcharts/pie.js', callback);
  607.     }
  608.     if (!$.fn.AmCharts){
  609.         LoadAmchartsScript();
  610.     }
  611.     else {
  612.         if (callback && typeof(callback) === "function") {
  613.            callback();
  614.         }
  615.     }
  616. }
  617. //
  618. //  Dynamically load Chartist plugin
  619. //  homepage: https://gionkunz.github.io/chartist-js/index.html 0.1.15 AS IS
  620. //
  621. function LoadChartistScripts(callback){
  622.     function LoadChartistScript(){
  623.         $.getScript('plugins/chartist/chartist.min.js', callback);
  624.     }
  625.     if (!$.fn.Chartist){
  626.         LoadChartistScript();
  627.     }
  628.     else {
  629.         if (callback && typeof(callback) === "function") {
  630.            callback();
  631.         }
  632.     }
  633. }
  634. //
  635. //  Dynamically load Springy plugin
  636. //  homepage: https://getspringy.com/ 2.6.1 as is
  637. //
  638. function LoadSpringyScripts(callback){
  639.     function LoadSpringyScript(){
  640.         $.getScript('plugins/springy/springy.js', LoadSpringyUIScript);
  641.     }
  642.     function LoadSpringyUIScript(){
  643.         $.getScript('plugins/springy/springyui.js', callback);
  644.     }
  645.     if (!$.fn.Springy){
  646.         LoadSpringyScript();
  647.     }
  648.     else {
  649.         if (callback && typeof(callback) === "function") {
  650.            callback();
  651.         }
  652.     }
  653. }
  654. // Draw all test Am Charts
  655. function DrawAllAmCharts(){
  656.     DrawAmChart1();
  657.     DrawAmChart2();
  658.     DrawAmChart3();
  659.     DrawAmChart4();
  660.     DrawAmChart5();
  661. }
  662. function DrawAmChart1(){
  663.     var chart;
  664.     var data = [
  665.         {
  666.             "title": "Website visits",
  667.             "value": 200
  668.         },
  669.         {
  670.             "title": "Downloads",
  671.             "value": 123
  672.         },
  673.         {
  674.             "title": "Requested price list",
  675.             "value": 98
  676.         },
  677.         {
  678.             "title": "Contaced for more info",
  679.             "value": 72
  680.         },
  681.         {
  682.             "title": "Purchased",
  683.             "value": 65
  684.         },
  685.         {
  686.             "title": "Contacted for support",
  687.             "value": 45
  688.         },
  689.         {
  690.             "title": "Purchased additional products",
  691.             "value": 36
  692.         }
  693.     ];
  694.     chart = new AmCharts.AmFunnelChart();
  695.     chart.rotate = true;
  696.     chart.titleField = "title";
  697.     chart.balloon.fixedPosition = true;
  698.     chart.marginRight = 150;
  699.     chart.marginLeft = 15;
  700.     chart.labelPosition = "right";
  701.     chart.funnelAlpha = 0.9;
  702.     chart.valueField = "value";
  703.     chart.startX = -500;
  704.     chart.dataProvider = data;
  705.     chart.startAlpha = 0;
  706.     chart.depth3D = 100;
  707.     chart.angle = 30;
  708.     chart.outlineAlpha = 1;
  709.     chart.outlineThickness = 2;
  710.     chart.outlineColor = "#FFFFFF";
  711.     chart.write("am-chart-1");
  712. }
  713. function DrawAmChart2(){
  714.     var chart;
  715.     var chartData = [
  716.         {
  717.             "name": "Income A",
  718.             "open": 0,
  719.             "close": 11.13,
  720.             "color": "#54cb6a",
  721.             "balloonValue": 11.13
  722.         },
  723.         {
  724.             "name": "Income B",
  725.             "open": 11.13,
  726.             "close": 15.81,
  727.             "color": "#54cb6a",
  728.             "balloonValue": 4.68
  729.         },
  730.         {
  731.             "name": "Total Income",
  732.             "open": 0,
  733.             "close": 15.81,
  734.             "color": "#169b2f",
  735.             "balloonValue": 15.81
  736.         },
  737.         {
  738.             "name": "Expenses A",
  739.             "open": 12.92,
  740.             "close": 15.81,
  741.             "color": "#cc4b48",
  742.             "balloonValue": 2.89
  743.         },
  744.         {
  745.             "name": "Expenses B",
  746.             "open": 8.64,
  747.             "close": 12.92,
  748.             "color": "#cc4b48",
  749.             "balloonValue": 4.24
  750.         },
  751.         {
  752.             "name": "Revenue",
  753.             "open": 0,
  754.             "close": 8.64,
  755.             "color": "#1c8ceb",
  756.             "balloonValue": 11.13
  757.         }
  758.     ];
  759.  
  760.     // Waterfall chart is a simple serial chart with some specific settings
  761.     chart = new AmCharts.AmSerialChart();
  762.     chart.dataProvider = chartData;
  763.     chart.categoryField = "name";
  764.     chart.columnWidth = 0.6;
  765.     chart.startDuration = 1;
  766.  
  767.     // AXES
  768.     // Category
  769.     var categoryAxis = chart.categoryAxis;
  770.     categoryAxis.gridAlpha = 0.1;
  771.     categoryAxis.axisAlpha = 0;
  772.     categoryAxis.gridPosition = "start";
  773.  
  774.     // Value
  775.     var valueAxis = new AmCharts.ValueAxis();
  776.     valueAxis.gridAlpha = 0.1;
  777.     valueAxis.axisAlpha = 0;
  778.     chart.addValueAxis(valueAxis);
  779.  
  780.     // GRAPH
  781.     var graph = new AmCharts.AmGraph();
  782.     graph.valueField = "close";
  783.     graph.openField = "open";
  784.     graph.type = "column";
  785.     graph.lineAlpha = 1;
  786.     graph.lineColor = "#BBBBBB";
  787.     graph.colorField = "color";
  788.     graph.fillAlphas = 0.8;
  789.     graph.balloonText = "<span style='color:[[color]]'>[[category]]</span><br><span style='font-size:13px;'><b>$[[balloonValue]] Mln</b></span>";
  790.     graph.labelText = "$[[balloonValue]]";
  791.     chart.addGraph(graph);
  792.  
  793.     // Trend lines used for connectors
  794.     var trendLine = new AmCharts.TrendLine();
  795.     trendLine.initialCategory = "Income A";
  796.     trendLine.finalCategory = "Income B";
  797.     trendLine.initialValue = 11.13;
  798.     trendLine.finalValue = 11.13;
  799.     trendLine.lineColor = "#888888";
  800.     trendLine.dashLength = 3;
  801.     chart.addTrendLine(trendLine);
  802.  
  803.     trendLine = new AmCharts.TrendLine();
  804.     trendLine.initialCategory = "Income B";
  805.     trendLine.finalCategory = "Expenses A";
  806.     trendLine.initialValue = 15.81;
  807.     trendLine.finalValue = 15.81;
  808.     trendLine.lineColor = "#888888";
  809.     trendLine.dashLength = 3;
  810.     chart.addTrendLine(trendLine);
  811.  
  812.     trendLine = new AmCharts.TrendLine();
  813.     trendLine.initialCategory = "Expenses A";
  814.     trendLine.finalCategory = "Expenses B";
  815.     trendLine.initialValue = 12.92;
  816.     trendLine.finalValue = 12.92;
  817.     trendLine.lineColor = "#888888";
  818.     trendLine.dashLength = 3;
  819.     chart.addTrendLine(trendLine);
  820.  
  821.     trendLine = new AmCharts.TrendLine();
  822.     trendLine.initialCategory = "Expenses B";
  823.     trendLine.finalCategory = "Revenue";
  824.     trendLine.initialValue = 8.64;
  825.     trendLine.finalValue = 8.64;
  826.     trendLine.lineColor = "#888888";
  827.     trendLine.dashLength = 3;
  828.     chart.addTrendLine(trendLine);
  829.  
  830.     // WRITE
  831.     chart.write("am-chart-2");
  832.  
  833. }
  834. function DrawAmChart3(){
  835.     var chart;
  836.     var chartData = [];
  837.  
  838.     // generate some random data first
  839.     generateChartData();
  840.  
  841.     // SERIAL CHART
  842.     chart = new AmCharts.AmSerialChart();
  843.     chart.pathToImages = "../amcharts/images/";
  844.     chart.dataProvider = chartData;
  845.     chart.categoryField = "date";
  846.  
  847.     // listen for "dataUpdated" event (fired when chart is inited) and call zoomChart method when it happens
  848.     chart.addListener("dataUpdated", zoomChart);
  849.  
  850.     // AXES
  851.     // category
  852.     var categoryAxis = chart.categoryAxis;
  853.     categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
  854.     categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
  855.     categoryAxis.minorGridEnabled = true;
  856.     categoryAxis.axisColor = "#DADADA";
  857.     categoryAxis.twoLineMode = true;
  858.     categoryAxis.dateFormats = [{
  859.             period: 'fff',
  860.             format: 'JJ:NN:SS'
  861.         }, {
  862.             period: 'ss',
  863.             format: 'JJ:NN:SS'
  864.         }, {
  865.             period: 'mm',
  866.             format: 'JJ:NN'
  867.         }, {
  868.             period: 'hh',
  869.             format: 'JJ:NN'
  870.         }, {
  871.             period: 'DD',
  872.             format: 'DD'
  873.         }, {
  874.             period: 'WW',
  875.             format: 'DD'
  876.         }, {
  877.             period: 'MM',
  878.             format: 'MMM'
  879.         }, {
  880.             period: 'YYYY',
  881.             format: 'YYYY'
  882.         }];
  883.  
  884.     // first value axis (on the left)
  885.     var valueAxis1 = new AmCharts.ValueAxis();
  886.     valueAxis1.axisColor = "#FF6600";
  887.     valueAxis1.axisThickness = 2;
  888.     valueAxis1.gridAlpha = 0;
  889.     chart.addValueAxis(valueAxis1);
  890.  
  891.     // second value axis (on the right)
  892.     var valueAxis2 = new AmCharts.ValueAxis();
  893.     valueAxis2.position = "right"; // this line makes the axis to appear on the right
  894.     valueAxis2.axisColor = "#FCD202";
  895.     valueAxis2.gridAlpha = 0;
  896.     valueAxis2.axisThickness = 2;
  897.     chart.addValueAxis(valueAxis2);
  898.  
  899.     // third value axis (on the left, detached)
  900.     var valueAxis3 = new AmCharts.ValueAxis();
  901.     valueAxis3.offset = 50; // this line makes the axis to appear detached from plot area
  902.     valueAxis3.gridAlpha = 0;
  903.     valueAxis3.axisColor = "#B0DE09";
  904.     valueAxis3.axisThickness = 2;
  905.     chart.addValueAxis(valueAxis3);
  906.  
  907.     // GRAPHS
  908.     // first graph
  909.     var graph1 = new AmCharts.AmGraph();
  910.     graph1.valueAxis = valueAxis1; // we have to indicate which value axis should be used
  911.     graph1.title = "red line";
  912.     graph1.valueField = "visits";
  913.     graph1.bullet = "round";
  914.     graph1.hideBulletsCount = 30;
  915.     graph1.bulletBorderThickness = 1;
  916.     chart.addGraph(graph1);
  917.  
  918.     // second graph
  919.     var graph2 = new AmCharts.AmGraph();
  920.     graph2.valueAxis = valueAxis2; // we have to indicate which value axis should be used
  921.     graph2.title = "yellow line";
  922.     graph2.valueField = "hits";
  923.     graph2.bullet = "square";
  924.     graph2.hideBulletsCount = 30;
  925.     graph2.bulletBorderThickness = 1;
  926.     chart.addGraph(graph2);
  927.  
  928.     // third graph
  929.     var graph3 = new AmCharts.AmGraph();
  930.     graph3.valueAxis = valueAxis3; // we have to indicate which value axis should be used
  931.     graph3.valueField = "views";
  932.     graph3.title = "green line";
  933.     graph3.bullet = "triangleUp";
  934.     graph3.hideBulletsCount = 30;
  935.     graph3.bulletBorderThickness = 1;
  936.     chart.addGraph(graph3);
  937.  
  938.     // CURSOR
  939.     var chartCursor = new AmCharts.ChartCursor();
  940.     chartCursor.cursorAlpha = 0.1;
  941.     chartCursor.fullWidth = true;
  942.     chart.addChartCursor(chartCursor);
  943.  
  944.     // SCROLLBAR
  945.     var chartScrollbar = new AmCharts.ChartScrollbar();
  946.     chart.addChartScrollbar(chartScrollbar);
  947.  
  948.     // LEGEND
  949.     var legend = new AmCharts.AmLegend();
  950.     legend.marginLeft = 110;
  951.     legend.useGraphSettings = true;
  952.     chart.addLegend(legend);
  953.  
  954.     // WRITE
  955.     chart.write("am-chart-3");
  956.  
  957.     // generate some random data, quite different range
  958.     function generateChartData() {
  959.         var firstDate = new Date();
  960.         firstDate.setDate(firstDate.getDate() - 50);
  961.  
  962.         for (var i = 0; i < 50; i++) {
  963.            // we create date objects here. In your data, you can have date strings
  964.            // and then set format of your dates using chart.dataDateFormat property,
  965.            // however when possible, use date objects, as this will speed up chart rendering.
  966.            var newDate = new Date(firstDate);
  967.            newDate.setDate(newDate.getDate() + i);
  968.  
  969.            var visits = Math.round(Math.random() * 40) + 100;
  970.            var hits = Math.round(Math.random() * 80) + 500;
  971.            var views = Math.round(Math.random() * 6000);
  972.  
  973.            chartData.push({
  974.                date: newDate,
  975.                visits: visits,
  976.                hits: hits,
  977.                views: views
  978.            });
  979.        }
  980.    }
  981.  
  982.    // this method is called when chart is first inited as we listen for "dataUpdated" event
  983.    function zoomChart() {
  984.        // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
  985.        chart.zoomToIndexes(10, 20);
  986.    }
  987. }
  988. function DrawAmChart4(){
  989.    var chart;
  990.    var chartData = [
  991.        {
  992.            "year": 2009,
  993.            "income": 23.5,
  994.            "expenses": 18.1
  995.        },
  996.        {
  997.            "year": 2010,
  998.            "income": 26.2,
  999.            "expenses": 22.8
  1000.        },
  1001.        {
  1002.            "year": 2011,
  1003.            "income": 30.1,
  1004.            "expenses": 23.9
  1005.        },
  1006.        {
  1007.            "year": 2012,
  1008.            "income": 29.5,
  1009.            "expenses": 25.1
  1010.        },
  1011.        {
  1012.            "year": 2013,
  1013.            "income": 30.6,
  1014.            "expenses": 27.2,
  1015.            "dashLengthLine": 5
  1016.        },
  1017.        {
  1018.            "year": 2014,
  1019.            "income": 34.1,
  1020.            "expenses": 29.9,
  1021.            "dashLengthColumn": 5,
  1022.            "alpha":0.2,
  1023.            "additional":"(projection)"
  1024.        }
  1025.    ];
  1026.  
  1027.    // SERIAL CHART
  1028.    chart = new AmCharts.AmSerialChart();
  1029.    chart.pathToImages = "../amcharts/images/";
  1030.    chart.dataProvider = chartData;
  1031.    chart.categoryField = "year";
  1032.    chart.startDuration = 1;
  1033.  
  1034.    chart.handDrawn = true;
  1035.    chart.handDrawnScatter = 3;
  1036.  
  1037.    // AXES
  1038.    // category
  1039.    var categoryAxis = chart.categoryAxis;
  1040.    categoryAxis.gridPosition = "start";
  1041.  
  1042.    // value
  1043.    var valueAxis = new AmCharts.ValueAxis();
  1044.    valueAxis.axisAlpha = 0;
  1045.    chart.addValueAxis(valueAxis);
  1046.  
  1047.    // GRAPHS
  1048.    // column graph
  1049.    var graph1 = new AmCharts.AmGraph();
  1050.    graph1.type = "column";
  1051.    graph1.title = "Income";
  1052.    graph1.lineColor = "#a668d5";
  1053.    graph1.valueField = "income";
  1054.    graph1.lineAlpha = 1;
  1055.    graph1.fillAlphas = 1;
  1056.    graph1.dashLengthField = "dashLengthColumn";
  1057.    graph1.alphaField = "alpha";
  1058.    graph1.balloonText = "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b> [[additional]]</span>";
  1059.     chart.addGraph(graph1);
  1060.  
  1061.     // line
  1062.     var graph2 = new AmCharts.AmGraph();
  1063.     graph2.type = "line";
  1064.     graph2.title = "Expenses";
  1065.     graph2.lineColor = "#fcd202";
  1066.     graph2.valueField = "expenses";
  1067.     graph2.lineThickness = 3;
  1068.     graph2.bullet = "round";
  1069.     graph2.bulletBorderThickness = 3;
  1070.     graph2.bulletBorderColor = "#fcd202";
  1071.     graph2.bulletBorderAlpha = 1;
  1072.     graph2.bulletColor = "#ffffff";
  1073.     graph2.dashLengthField = "dashLengthLine";
  1074.     graph2.balloonText = "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b> [[additional]]</span>";
  1075.     chart.addGraph(graph2);
  1076.  
  1077.     // LEGEND
  1078.     var legend = new AmCharts.AmLegend();
  1079.     legend.useGraphSettings = true;
  1080.     chart.addLegend(legend);
  1081.  
  1082.     // WRITE
  1083.     chart.write("am-chart-4");
  1084.  
  1085. }
  1086.  
  1087. function DrawAmChart5(){
  1088. var chartData = [
  1089.         {
  1090.             "date": "2012-01-01",
  1091.             "distance": 227,
  1092.             "townName": "New York",
  1093.             "townName2": "New York",
  1094.             "townSize": 25,
  1095.             "latitude": 40.71,
  1096.             "duration": 408
  1097.         },
  1098.         {
  1099.             "date": "2012-01-02",
  1100.             "distance": 371,
  1101.             "townName": "Washington",
  1102.             "townSize": 14,
  1103.             "latitude": 38.89,
  1104.             "duration": 482
  1105.         },
  1106.         {
  1107.             "date": "2012-01-03",
  1108.             "distance": 433,
  1109.             "townName": "Wilmington",
  1110.             "townSize": 6,
  1111.             "latitude": 34.22,
  1112.             "duration": 562
  1113.         },
  1114.         {
  1115.             "date": "2012-01-04",
  1116.             "distance": 345,
  1117.             "townName": "Jacksonville",
  1118.             "townSize": 7,
  1119.             "latitude": 30.35,
  1120.             "duration": 379
  1121.         },
  1122.         {
  1123.             "date": "2012-01-05",
  1124.             "distance": 480,
  1125.             "townName": "Miami",
  1126.             "townName2": "Miami",
  1127.             "townSize": 10,
  1128.             "latitude": 25.83,
  1129.             "duration": 501
  1130.         },
  1131.         {
  1132.             "date": "2012-01-06",
  1133.             "distance": 386,
  1134.             "townName": "Tallahassee",
  1135.             "townSize": 7,
  1136.             "latitude": 30.46,
  1137.             "duration": 443
  1138.         },
  1139.         {
  1140.             "date": "2012-01-07",
  1141.             "distance": 348,
  1142.             "townName": "New Orleans",
  1143.             "townSize": 10,
  1144.             "latitude": 29.94,
  1145.             "duration": 405
  1146.         },
  1147.         {
  1148.             "date": "2012-01-08",
  1149.             "distance": 238,
  1150.             "townName": "Houston",
  1151.             "townName2": "Houston",
  1152.             "townSize": 16,
  1153.             "latitude": 29.76,
  1154.             "duration": 309
  1155.         },
  1156.         {
  1157.             "date": "2012-01-09",
  1158.             "distance": 218,
  1159.             "townName": "Dalas",
  1160.             "townSize": 17,
  1161.             "latitude": 32.8,
  1162.             "duration": 287
  1163.         },
  1164.         {
  1165.             "date": "2012-01-10",
  1166.             "distance": 349,
  1167.             "townName": "Oklahoma City",
  1168.             "townSize": 11,
  1169.             "latitude": 35.49,
  1170.             "duration": 485
  1171.         },
  1172.         {
  1173.             "date": "2012-01-11",
  1174.             "distance": 603,
  1175.             "townName": "Kansas City",
  1176.             "townSize": 10,
  1177.             "latitude": 39.1,
  1178.             "duration": 890
  1179.         },
  1180.         {
  1181.             "date": "2012-01-12",
  1182.             "distance": 534,
  1183.             "townName": "Denver",
  1184.             "townName2": "Denver",
  1185.             "townSize": 18,
  1186.             "latitude": 39.74,
  1187.             "duration": 810
  1188.         },
  1189.         {
  1190.             "date": "2012-01-13",
  1191.             "townName": "Salt Lake City",
  1192.             "townSize": 12,
  1193.             "distance": 425,
  1194.             "duration": 670,
  1195.             "latitude": 40.75,
  1196.             "dashLength": 8,
  1197.             "alpha":0.4
  1198.         },
  1199.         {
  1200.             "date": "2012-01-14",
  1201.             "latitude": 36.1,
  1202.             "duration": 470,
  1203.             "townName": "Las Vegas",
  1204.             "townName2": "Las Vegas"
  1205.         },
  1206.         {
  1207.             "date": "2012-01-15"
  1208.         },
  1209.         {
  1210.             "date": "2012-01-16"
  1211.         },
  1212.         {
  1213.             "date": "2012-01-17"
  1214.         },
  1215.         {
  1216.             "date": "2012-01-18"
  1217.         },
  1218.         {
  1219.             "date": "2012-01-19"
  1220.         }
  1221.     ];
  1222.     var chart;
  1223.  
  1224.     // SERIAL CHART
  1225.     chart = new AmCharts.AmSerialChart();
  1226.     chart.dataProvider = chartData;
  1227.     chart.categoryField = "date";
  1228.     chart.dataDateFormat = "YYYY-MM-DD";
  1229.     chart.color = "#FFFFFF";
  1230.     chart.marginLeft = 0;
  1231.  
  1232.     // AXES
  1233.     // category
  1234.     var categoryAxis = chart.categoryAxis;
  1235.     categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
  1236.     categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
  1237.     categoryAxis.autoGridCount = false;
  1238.     categoryAxis.gridCount = 50;
  1239.     categoryAxis.gridAlpha = 0.1;
  1240.     categoryAxis.gridColor = "#FFFFFF";
  1241.     categoryAxis.axisColor = "#555555";
  1242.     // we want custom date formatting, so we change it in next line
  1243.     categoryAxis.dateFormats = [{
  1244.         period: 'DD',
  1245.         format: 'DD'
  1246.     }, {
  1247.         period: 'WW',
  1248.         format: 'MMM DD'
  1249.     }, {
  1250.         period: 'MM',
  1251.         format: 'MMM'
  1252.     }, {
  1253.         period: 'YYYY',
  1254.         format: 'YYYY'
  1255.     }];
  1256.  
  1257.     // as we have data of different units, we create three different value axes
  1258.     // Distance value axis
  1259.     var distanceAxis = new AmCharts.ValueAxis();
  1260.     distanceAxis.title = "distance";
  1261.     distanceAxis.gridAlpha = 0;
  1262.     distanceAxis.axisAlpha = 0;
  1263.     chart.addValueAxis(distanceAxis);
  1264.  
  1265.     // latitude value axis
  1266.     var latitudeAxis = new AmCharts.ValueAxis();
  1267.     latitudeAxis.gridAlpha = 0;
  1268.     latitudeAxis.axisAlpha = 0;
  1269.     latitudeAxis.labelsEnabled = false;
  1270.     latitudeAxis.position = "right";
  1271.     chart.addValueAxis(latitudeAxis);
  1272.  
  1273.     // duration value axis
  1274.     var durationAxis = new AmCharts.ValueAxis();
  1275.     durationAxis.title = "duration";
  1276.     // the following line makes this value axis to convert values to duration
  1277.     // it tells the axis what duration unit it should use. mm - minute, hh - hour...
  1278.     durationAxis.duration = "mm";
  1279.     durationAxis.durationUnits = {
  1280.         DD: "d. ",
  1281.         hh: "h ",
  1282.         mm: "min",
  1283.         ss: ""
  1284.     };
  1285.     durationAxis.gridAlpha = 0;
  1286.     durationAxis.axisAlpha = 0;
  1287.     durationAxis.inside = true;
  1288.     durationAxis.position = "right";
  1289.     chart.addValueAxis(durationAxis);
  1290.  
  1291.     // GRAPHS
  1292.     // distance graph
  1293.     var distanceGraph = new AmCharts.AmGraph();
  1294.     distanceGraph.valueField = "distance";
  1295.     distanceGraph.title = "distance";
  1296.     distanceGraph.type = "column";
  1297.     distanceGraph.fillAlphas = 0.9;
  1298.     distanceGraph.valueAxis = distanceAxis; // indicate which axis should be used
  1299.     distanceGraph.balloonText = "[[value]] miles";
  1300.     distanceGraph.legendValueText = "[[value]] mi";
  1301.     distanceGraph.legendPeriodValueText = "total: [[value.sum]] mi";
  1302.     distanceGraph.lineColor = "#263138";
  1303.     distanceGraph.dashLengthField = "dashLength";
  1304.     distanceGraph.alphaField = "alpha";
  1305.     chart.addGraph(distanceGraph);
  1306.  
  1307.     // latitude graph
  1308.     var latitudeGraph = new AmCharts.AmGraph();
  1309.     latitudeGraph.valueField = "latitude";
  1310.     latitudeGraph.title = "latitude/city";
  1311.     latitudeGraph.type = "line";
  1312.     latitudeGraph.valueAxis = latitudeAxis; // indicate which axis should be used
  1313.     latitudeGraph.lineColor = "#786c56";
  1314.     latitudeGraph.lineThickness = 1;
  1315.     latitudeGraph.legendValueText = "[[description]]/[[value]]";
  1316.     latitudeGraph.descriptionField = "townName";
  1317.     latitudeGraph.bullet = "round";
  1318.     latitudeGraph.bulletSizeField = "townSize"; // indicate which field should be used for bullet size
  1319.     latitudeGraph.bulletBorderColor = "#786c56";
  1320.     latitudeGraph.bulletBorderAlpha = 1;
  1321.     latitudeGraph.bulletBorderThickness = 2;
  1322.     latitudeGraph.bulletColor = "#000000";
  1323.     latitudeGraph.labelText = "[[townName2]]"; // not all data points has townName2 specified, that's why labels are displayed only near some of the bullets.
  1324.     latitudeGraph.labelPosition = "right";
  1325.     latitudeGraph.balloonText = "latitude:[[value]]";
  1326.     latitudeGraph.showBalloon = true;
  1327.     latitudeGraph.dashLengthField = "dashLength";
  1328.     chart.addGraph(latitudeGraph);
  1329.  
  1330.     // duration graph
  1331.     var durationGraph = new AmCharts.AmGraph();
  1332.     durationGraph.title = "duration";
  1333.     durationGraph.valueField = "duration";
  1334.     durationGraph.type = "line";
  1335.     durationGraph.valueAxis = durationAxis; // indicate which axis should be used
  1336.     durationGraph.lineColor = "#ff5755";
  1337.     durationGraph.balloonText = "[[value]]";
  1338.     durationGraph.lineThickness = 1;
  1339.     durationGraph.legendValueText = "[[value]]";
  1340.     durationGraph.bullet = "square";
  1341.     durationGraph.bulletBorderColor = "#ff5755";
  1342.     durationGraph.bulletBorderThickness = 1;
  1343.     durationGraph.bulletBorderAlpha = 1;
  1344.     durationGraph.dashLengthField = "dashLength";
  1345.     chart.addGraph(durationGraph);
  1346.  
  1347.     // CURSOR
  1348.     var chartCursor = new AmCharts.ChartCursor();
  1349.     chartCursor.zoomable = false;
  1350.     chartCursor.categoryBalloonDateFormat = "DD";
  1351.     chartCursor.cursorAlpha = 0;
  1352.     chartCursor.valueBalloonsEnabled = false;
  1353.     chart.addChartCursor(chartCursor);
  1354.  
  1355.     // LEGEND
  1356.     var legend = new AmCharts.AmLegend();
  1357.     legend.bulletType = "round";
  1358.     legend.equalWidths = false;
  1359.     legend.valueWidth = 120;
  1360.     legend.useGraphSettings = true;
  1361.     legend.color = "#FFFFFF";
  1362.     chart.addLegend(legend);
  1363.  
  1364.     // WRITE
  1365.     chart.write("am-chart-5");
  1366. }
  1367. // Draw all test Chartist Charts
  1368. function DrawChartistCharts(){
  1369.     DrawChartistChart1();
  1370.     DrawChartistChart2();
  1371.     DrawChartistChart3();
  1372.     DrawChartistChart4();
  1373.     DrawChartistChart5();
  1374. }
  1375. function DrawChartistChart1(){
  1376.     Chartist.Line('#chartist-1', {
  1377.         labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October',
  1378.             'November', 'December'],
  1379.         series: [
  1380.             [12, 9, 7, 8, 5, 5, 17, 11 , 12, 6, 3, 9],
  1381.             [2, 1, 3.5, 7, 3, 6, 2, 9, 1, 21, 15, 1],
  1382.             [1, 3, 4, 5, 6, 1, 15, 3, 9, 11, 18, 14]
  1383.         ]
  1384.     });
  1385. }
  1386. function DrawChartistChart2(){
  1387.     var times = function(n) {
  1388.         return Array.apply(null, new Array(n));
  1389.     };
  1390.     var data = times(52).map(Math.random).reduce(function(data, rnd, index) {
  1391.         data.labels.push(index + 1);
  1392.         data.series.forEach(function(series) {
  1393.             series.push(Math.random() * 100)
  1394.         });
  1395.         return data;
  1396.     }, {
  1397.         labels: [],
  1398.         series: times(4).map(function() { return new Array() })
  1399.     });
  1400.     var options = {
  1401.         showLine: false,
  1402.         axisX: {
  1403.             labelInterpolationFnc: function(value, index) {
  1404.                 return index % 13 === 0 ? 'W' + value : null;
  1405.             }
  1406.         }
  1407.     };
  1408.     var responsiveOptions = [
  1409.         ['screen and (min-width: 640px)', {
  1410.             axisX: {
  1411.                 labelInterpolationFnc: function(value, index) {
  1412.                     return index % 4 === 0 ? 'W' + value : null;
  1413.                 }
  1414.             }
  1415.         }]
  1416.     ];
  1417.     Chartist.Line('#chartist-2', data, options, responsiveOptions);
  1418. }
  1419. function DrawChartistChart3(){
  1420.     Chartist.Line('#chartist-3', {
  1421.         labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
  1422.         series: [
  1423.                 [1, 2, 3, 1, -2, 0, 1, 0, 3, -1, 1],
  1424.                 [-2, -1, -2, -1, -2.5, -1, -2, -1, -2, 2, -2],
  1425.                 [0, 0, 0, 1, 2, 2.5, 2, 1, 4, -3, 1],
  1426.                 [2.5, 2, 1, 0.5, 1, 0.5, -1, -2.5, -1, 2, 1]
  1427.             ]
  1428.         }, {
  1429.             high: 3,
  1430.             low: -3,
  1431.             showArea: true,
  1432.             showLine: false,
  1433.             showPoint: false,
  1434.             axisX: {
  1435.                 showLabel: false,
  1436.                 showGrid: false
  1437.             }
  1438.         });
  1439. }
  1440. function DrawChartistChart4(){
  1441.     Chartist.Pie('#chartist-4', {
  1442.         series: [20, 10, 30, 40]
  1443.     }, {
  1444.         donut: true,
  1445.         donutWidth: 60,
  1446.         startAngle: 270,
  1447.         total: 200,
  1448.         showLabel: false
  1449.     });
  1450. }
  1451. function DrawChartistChart5(){
  1452.     var data = {
  1453.         labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10', 'W11', 'W12', 'W13', 'W14', 'W15', 'W16', 'W17', 'W18'],
  1454.         series: [
  1455.                 [1, 2, 4, 8, 6, -2, -1, -4, -6, -2, 3, 6, 1, -4, 2, 7, -1, 3]
  1456.             ]
  1457.     };
  1458.     var options = {
  1459.         high: 10,
  1460.         low: -10,
  1461.         axisX: {
  1462.             labelInterpolationFnc: function(value, index) {
  1463.                 return index % 2 === 0 ? value : null;
  1464.             }
  1465.         }
  1466.     };
  1467.     Chartist.Bar('#chartist-5', data, options);
  1468. }
  1469. //
  1470. //  Dynamically load Fancybox 2 plugin
  1471. //  homepage: https://fancyapps.com/fancybox/ v2.1.5 License - MIT
  1472. //
  1473. function LoadFancyboxScript(callback){
  1474.     if (!$.fn.fancybox){
  1475.         $.getScript('plugins/fancybox/jquery.fancybox.js', callback);
  1476.     }
  1477.     else {
  1478.         if (callback && typeof(callback) === "function") {
  1479.            callback();
  1480.         }
  1481.     }
  1482. }
  1483. //
  1484. //  Dynamically load jQuery-Knob plugin
  1485. //  homepage: https://anthonyterrien.com/knob/  v1.2.5 License- MIT or GPL
  1486. //
  1487. function LoadKnobScripts(callback){
  1488.     if(!$.fn.knob){
  1489.         $.getScript('plugins/jQuery-Knob/jquery.knob.js', callback);
  1490.     }
  1491.     else {
  1492.         if (callback && typeof(callback) === "function") {
  1493.            callback();
  1494.         }
  1495.     }
  1496. }
  1497. //
  1498. //  Dynamically load Sparkline plugin
  1499. //  homepage: https://omnipotent.net/jquery.sparkline v2.1.2  License - BSD
  1500. //
  1501. function LoadSparkLineScript(callback){
  1502.     if(!$.fn.sparkline){
  1503.         $.getScript('plugins/sparkline/jquery.sparkline.min.js', callback);
  1504.     }
  1505.     else {
  1506.         if (callback && typeof(callback) === "function") {
  1507.            callback();
  1508.         }
  1509.     }
  1510. }
  1511. /*-------------------------------------------
  1512.     Main scripts used by theme
  1513. ---------------------------------------------*/
  1514. //
  1515. //  Function for load content from url and put in $('.ajax-content') block
  1516. //
  1517. function LoadAjaxContent(url){
  1518.     $('.preloader').show();
  1519.     $.ajax({
  1520.         mimeType: 'text/html; charset=utf-8', // ! Need set mimeType only when run from local file
  1521.         url: url,
  1522.         type: 'GET',
  1523.         success: function(data) {
  1524.             $('#ajax-content').html(data);
  1525.             $('.preloader').hide();
  1526.         },
  1527.         error: function (jqXHR, textStatus, errorThrown) {
  1528.             alert(errorThrown);
  1529.         },
  1530.         dataType: "html",
  1531.         async: false
  1532.     });
  1533. }
  1534. //
  1535. //  Function maked all .box selector is draggable, to disable for concrete element add class .no-drop
  1536. //
  1537. function WinMove(){
  1538.     $( "div.box").not('.no-drop')
  1539.         .draggable({
  1540.             revert: true,
  1541.             zIndex: 2000,
  1542.             cursor: "crosshair",
  1543.             handle: '.box-name',
  1544.             opacity: 0.8
  1545.         })
  1546.         .droppable({
  1547.             tolerance: 'pointer',
  1548.             drop: function( event, ui ) {
  1549.                 var draggable = ui.draggable;
  1550.                 var droppable = $(this);
  1551.                 var dragPos = draggable.position();
  1552.                 var dropPos = droppable.position();
  1553.                 draggable.swap(droppable);
  1554.                 setTimeout(function() {
  1555.                     var dropmap = droppable.find('[id^=map-]');
  1556.                     var dragmap = draggable.find('[id^=map-]');
  1557.                     if (dragmap.length > 0 || dropmap.length > 0){
  1558.                         dragmap.resize();
  1559.                         dropmap.resize();
  1560.                     }
  1561.                     else {
  1562.                         draggable.resize();
  1563.                         droppable.resize();
  1564.                     }
  1565.                 }, 50);
  1566.                 setTimeout(function() {
  1567.                     draggable.find('[id^=map-]').resize();
  1568.                     droppable.find('[id^=map-]').resize();
  1569.                 }, 250);
  1570.             }
  1571.         });
  1572. }
  1573. //
  1574. // Swap 2 elements on page. Used by WinMove function
  1575. //
  1576. jQuery.fn.swap = function(b){
  1577.     b = jQuery(b)[0];
  1578.     var a = this[0];
  1579.     var t = a.parentNode.insertBefore(document.createTextNode(''), a);
  1580.     b.parentNode.insertBefore(a, b);
  1581.     t.parentNode.insertBefore(b, t);
  1582.     t.parentNode.removeChild(t);
  1583.     return this;
  1584. };
  1585. //
  1586. //  Screensaver function
  1587. //  used on locked screen, and write content to element with id - canvas
  1588. //
  1589. function ScreenSaver(){
  1590.     var canvas = document.getElementById("canvas");
  1591.     var ctx = canvas.getContext("2d");
  1592.     // Size of canvas set to fullscreen of browser
  1593.     var W = window.innerWidth;
  1594.     var H = window.innerHeight;
  1595.     canvas.width = W;
  1596.     canvas.height = H;
  1597.     // Create array of particles for screensaver
  1598.     var particles = [];
  1599.     for (var i = 0; i < 25; i++) {
  1600.        particles.push(new Particle());
  1601.    }
  1602.    function Particle(){
  1603.        // location on the canvas
  1604.        this.location = {x: Math.random()*W, y: Math.random()*H};
  1605.        // radius - lets make this 0
  1606.        this.radius = 0;
  1607.        // speed
  1608.        this.speed = 3;
  1609.        // random angle in degrees range = 0 to 360
  1610.        this.angle = Math.random()*360;
  1611.        // colors
  1612.        var r = Math.round(Math.random()*255);
  1613.        var g = Math.round(Math.random()*255);
  1614.        var b = Math.round(Math.random()*255);
  1615.        var a = Math.random();
  1616.        this.rgba = "rgba("+r+", "+g+", "+b+", "+a+")";
  1617.    }
  1618.    // Draw the particles
  1619.    function draw() {
  1620.        // re-paint the BG
  1621.        // Lets fill the canvas black
  1622.        // reduce opacity of bg fill.
  1623.        // blending time
  1624.        ctx.globalCompositeOperation = "source-over";
  1625.        ctx.fillStyle = "rgba(0, 0, 0, 0.02)";
  1626.        ctx.fillRect(0, 0, W, H);
  1627.        ctx.globalCompositeOperation = "lighter";
  1628.        for(var i = 0; i < particles.length; i++){
  1629.            var p = particles[i];
  1630.            ctx.fillStyle = "white";
  1631.            ctx.fillRect(p.location.x, p.location.y, p.radius, p.radius);
  1632.            // Lets move the particles
  1633.            // So we basically created a set of particles moving in random direction
  1634.            // at the same speed
  1635.            // Time to add ribbon effect
  1636.            for(var n = 0; n < particles.length; n++){
  1637.                var p2 = particles[n];
  1638.                // calculating distance of particle with all other particles
  1639.                var yd = p2.location.y - p.location.y;
  1640.                var xd = p2.location.x - p.location.x;
  1641.                var distance = Math.sqrt(xd*xd + yd*yd);
  1642.                // draw a line between both particles if they are in 200px range
  1643.                if(distance < 200){
  1644.                    ctx.beginPath();
  1645.                    ctx.lineWidth = 1;
  1646.                    ctx.moveTo(p.location.x, p.location.y);
  1647.                    ctx.lineTo(p2.location.x, p2.location.y);
  1648.                    ctx.strokeStyle = p.rgba;
  1649.                    ctx.stroke();
  1650.                    //The ribbons appear now.
  1651.                }
  1652.            }
  1653.            // We are using simple vectors here
  1654.            // New x = old x + speed * cos(angle)
  1655.            p.location.x = p.location.x + p.speed*Math.cos(p.angle*Math.PI/180);
  1656.            // New y = old y + speed * sin(angle)
  1657.            p.location.y = p.location.y + p.speed*Math.sin(p.angle*Math.PI/180);
  1658.            // You can read about vectors here:
  1659.            // https://physics.about.com/od/mathematics/a/VectorMath.htm
  1660.            if(p.location.x < 0) p.location.x = W;
  1661.            if(p.location.x > W) p.location.x = 0;
  1662.             if(p.location.y < 0) p.location.y = H;
  1663.            if(p.location.y > H) p.location.y = 0;
  1664.         }
  1665.     }
  1666.     setInterval(draw, 30);
  1667. }
  1668. //
  1669. // Helper for draw Google Chart
  1670. //
  1671. function drawGoogleChart(chart_data, chart_options, element, chart_type) {
  1672.     // Function for visualize Google Chart
  1673.     var data = google.visualization.arrayToDataTable(chart_data);
  1674.     var chart = new chart_type(document.getElementById(element));
  1675.     chart.draw(data, chart_options);
  1676. }
  1677. //
  1678. //  Function for Draw Knob Charts
  1679. //
  1680. function DrawKnob(elem){
  1681.     elem.knob({
  1682.         change : function (value) {
  1683.             //console.log("change : " + value);
  1684.         },
  1685.         release : function (value) {
  1686.             //console.log(this.$.attr('value'));
  1687.             //console.log("release : " + value);
  1688.         },
  1689.         cancel : function () {
  1690.             //console.log("cancel : ", this);
  1691.         },
  1692.         draw : function () {
  1693.             // "tron" case
  1694.             if(this.$.data('skin') == 'tron') {
  1695.                 var a = this.angle(this.cv);  // Angle
  1696.                 var sa = this.startAngle;          // Previous start angle
  1697.                 var sat = this.startAngle;         // Start angle
  1698.                 var ea;                            // Previous end angle
  1699.                 var eat = sat + a;                 // End angle
  1700.                 var r = 1;
  1701.                 this.g.lineWidth = this.lineWidth;
  1702.                 this.o.cursor
  1703.                     && (sat = eat - 0.3)
  1704.                    && (eat = eat + 0.3);
  1705.                 if (this.o.displayPrevious) {
  1706.                     ea = this.startAngle + this.angle(this.v);
  1707.                     this.o.cursor
  1708.                         && (sa = ea - 0.3)
  1709.                        && (ea = ea + 0.3);
  1710.                     this.g.beginPath();
  1711.                     this.g.strokeStyle = this.pColor;
  1712.                     this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false);
  1713.                     this.g.stroke();
  1714.                 }
  1715.                 this.g.beginPath();
  1716.                 this.g.strokeStyle = r ? this.o.fgColor : this.fgColor ;
  1717.                 this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false);
  1718.                 this.g.stroke();
  1719.                 this.g.lineWidth = 2;
  1720.                 this.g.beginPath();
  1721.                 this.g.strokeStyle = this.o.fgColor;
  1722.                 this.g.arc( this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
  1723.                 this.g.stroke();
  1724.                 return false;
  1725.             }
  1726.         }
  1727.     });
  1728.     // Example of infinite knob, iPod click wheel
  1729.     var v;
  1730.     var up = 0;
  1731.     var down=0;
  1732.     var i=0;
  1733.     var $idir = $("div.idir");
  1734.     var $ival = $("div.ival");
  1735.     var incr = function() { i++; $idir.show().html("+").fadeOut(); $ival.html(i); }
  1736.     var decr = function() { i--; $idir.show().html("-").fadeOut(); $ival.html(i); };
  1737.     $("input.infinite").knob(
  1738.         {
  1739.             min : 0,
  1740.             max : 20,
  1741.             stopper : false,
  1742.             change : function () {
  1743.                 if(v > this.cv){
  1744.                     if(up){
  1745.                         decr();
  1746.                         up=0;
  1747.                     } else {
  1748.                         up=1;down=0;
  1749.                     }
  1750.                 } else {
  1751.                     if(v < this.cv){
  1752.                        if(down){
  1753.                            incr();
  1754.                            down=0;
  1755.                        } else {
  1756.                            down=1;up=0;
  1757.                        }
  1758.                    }
  1759.                }
  1760.                v = this.cv;
  1761.            }
  1762.        });
  1763. }
  1764. //
  1765. // Create OpenLayers map with required options and return map as object
  1766. //
  1767. function drawMap(lon, lat, elem, layers) {
  1768.    var LayersArray = [];
  1769.    // Map initialization
  1770.    var map = new OpenLayers.Map(elem);
  1771.    // Add layers on map
  1772.    map.addLayers(layers);
  1773.    // WGS 1984 projection
  1774.    var epsg4326 =  new OpenLayers.Projection("EPSG:4326");
  1775.    //The map projection (Spherical Mercator)
  1776.    var projectTo = map.getProjectionObject();
  1777.    // Max zoom = 17
  1778.    var zoom=10;
  1779.    map.zoomToMaxExtent();
  1780.    // Set longitude/latitude
  1781.    var lonlat = new OpenLayers.LonLat(lon, lat);
  1782.    map.setCenter(lonlat.transform(epsg4326, projectTo), zoom);
  1783.    var layerGuest = new OpenLayers.Layer.Vector("You are here");
  1784.    // Define markers as "features" of the vector layer:
  1785.    var guestMarker = new OpenLayers.Feature.Vector(
  1786.        new OpenLayers.Geometry.Point(lon, lat).transform(epsg4326, projectTo)
  1787.    );
  1788.    layerGuest.addFeatures(guestMarker);
  1789.    LayersArray.push(layerGuest);
  1790.    map.addLayers(LayersArray);
  1791.    // If map layers > 1 then show checker
  1792.     if (layers.length > 1){
  1793.         map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':true}));
  1794.     }
  1795.     // Link to current position
  1796.     map.addControl(new OpenLayers.Control.Permalink());
  1797.     // Show current mouse coords
  1798.     map.addControl(new OpenLayers.Control.MousePosition({ displayProjection: epsg4326 }));
  1799.     return map
  1800. }
  1801. //
  1802. //  Function for create 2 dates in human-readable format (with leading zero)
  1803. //
  1804. function PrettyDates(){
  1805.     var currDate = new Date();
  1806.     var year = currDate.getFullYear();
  1807.     var month = currDate.getMonth() + 1;
  1808.     var startmonth = 1;
  1809.     if (month > 3){
  1810.         startmonth = month -2;
  1811.     }
  1812.     if (startmonth <=9){
  1813.        startmonth = '0'+startmonth;
  1814.    }
  1815.    if (month <= 9) {
  1816.        month = '0'+month;
  1817.    }
  1818.    var day= currDate.getDate();
  1819.    if (day <= 9) {
  1820.        day = '0'+day;
  1821.    }
  1822.    var startdate = year +'-'+ startmonth +'-01';
  1823.    var enddate = year +'-'+ month +'-'+ day;
  1824.    return [startdate, enddate];
  1825. }
  1826. //
  1827. //  Function set min-height of window (required for this theme)
  1828. //
  1829. function SetMinBlockHeight(elem){
  1830.    elem.css('min-height', window.innerHeight - 49)
  1831. }
  1832. //
  1833. //  Helper for correct size of Messages page
  1834. //
  1835. function MessagesMenuWidth(){
  1836.    var W = window.innerWidth;
  1837.    var W_menu = $('#sidebar-left').outerWidth();
  1838.    var w_messages = (W-W_menu)*16.666666666666664/100;
  1839.    $('#messages-menu').width(w_messages);
  1840. }
  1841. //
  1842. // Function for change panels of Dashboard
  1843. //
  1844. function DashboardTabChecker(){
  1845.    $('#content').on('click', 'a.tab-link', function(e){
  1846.        e.preventDefault();
  1847.        $('div#dashboard_tabs').find('div[id^=dashboard]').each(function(){
  1848.            $(this).css('visibility', 'hidden').css('position', 'absolute');
  1849.        });
  1850.        var attr = $(this).attr('id');
  1851.        $('#'+'dashboard-'+attr).css('visibility', 'visible').css('position', 'relative');
  1852.        $(this).closest('.nav').find('li').removeClass('active');
  1853.        $(this).closest('li').addClass('active');
  1854.    });
  1855. }
  1856. //
  1857. // Helper for run TinyMCE editor with textarea's
  1858. //
  1859. function TinyMCEStart(elem, mode){
  1860.    var plugins = [];
  1861.    if (mode == 'extreme'){
  1862.        plugins = [ "advlist anchor autolink autoresize autosave bbcode charmap code contextmenu directionality ",
  1863.            "emoticons fullpage fullscreen hr image insertdatetime layer legacyoutput",
  1864.            "link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace",
  1865.            "tabfocus table template textcolor visualblocks visualchars wordcount"]
  1866.    }
  1867.    tinymce.init({selector: elem,
  1868.        theme: "modern",
  1869.        plugins: plugins,
  1870.        //content_css: "css/style.css",
  1871.        toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons",
  1872.        style_formats: [
  1873.            {title: 'Header 2', block: 'h2', classes: 'page-header'},
  1874.            {title: 'Header 3', block: 'h3', classes: 'page-header'},
  1875.            {title: 'Header 4', block: 'h4', classes: 'page-header'},
  1876.            {title: 'Header 5', block: 'h5', classes: 'page-header'},
  1877.            {title: 'Header 6', block: 'h6', classes: 'page-header'},
  1878.            {title: 'Bold text', inline: 'b'},
  1879.            {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
  1880.            {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
  1881.            {title: 'Example 1', inline: 'span', classes: 'example1'},
  1882.            {title: 'Example 2', inline: 'span', classes: 'example2'},
  1883.            {title: 'Table styles'},
  1884.            {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
  1885.        ]
  1886.    });
  1887. }
  1888. //
  1889. // Helper for draw Sparkline plots on Dashboard page
  1890. //
  1891. function SparkLineDrawBarGraph(elem, arr, color){
  1892.    if (color) {
  1893.        var stacked_color = color;
  1894.    }
  1895.    else {
  1896.        stacked_color = '#6AA6D6'
  1897.    }
  1898.    elem.sparkline(arr, { type: 'bar', barWidth: 7, highlightColor: '#000', barSpacing: 2, height: 40, stackedBarColor: stacked_color});
  1899. }
  1900. //
  1901. //  Helper for open ModalBox with requested header, content and bottom
  1902. //
  1903. //
  1904. function OpenModalBox(header, inner, bottom){
  1905.    var modalbox = $('#modalbox');
  1906.    modalbox.find('.modal-header-name span').html(header);
  1907.    modalbox.find('.devoops-modal-inner').html(inner);
  1908.    modalbox.find('.devoops-modal-bottom').html(bottom);
  1909.    modalbox.fadeIn('fast');
  1910.    $('body').addClass("body-expanded");
  1911. }
  1912. //
  1913. //  Close modalbox
  1914. //
  1915. //
  1916. function CloseModalBox(){
  1917.    var modalbox = $('#modalbox');
  1918.    modalbox.fadeOut('fast', function(){
  1919.        modalbox.find('.modal-header-name span').children().remove();
  1920.        modalbox.find('.devoops-modal-inner').children().remove();
  1921.        modalbox.find('.devoops-modal-bottom').children().remove();
  1922.        $('body').removeClass("body-expanded");
  1923.    });
  1924. }
  1925. //
  1926. //  Beauty tables plugin (navigation in tables with inputs in cell)
  1927. //  Created by DevOOPS.
  1928. //
  1929. (function( $ ){
  1930.    $.fn.beautyTables = function() {
  1931.        var table = this;
  1932.        var string_fill = false;
  1933.        this.on('keydown', function(event) {
  1934.        var target = event.target;
  1935.        var tr = $(target).closest("tr");
  1936.        var col = $(target).closest("td");
  1937.        if (target.tagName.toUpperCase() == 'INPUT'){
  1938.            if (event.shiftKey === true){
  1939.                switch(event.keyCode) {
  1940.                    case 37: // left arrow
  1941.                        col.prev().children("input[type=text]").focus();
  1942.                        break;
  1943.                    case 39: // right arrow
  1944.                        col.next().children("input[type=text]").focus();
  1945.                        break;
  1946.                    case 40: // down arrow
  1947.                        if (string_fill==false){
  1948.                            tr.next().find('td:eq('+col.index()+') input[type=text]').focus();
  1949.                        }
  1950.                        break;
  1951.                    case 38: // up arrow
  1952.                        if (string_fill==false){
  1953.                            tr.prev().find('td:eq('+col.index()+') input[type=text]').focus();
  1954.                        }
  1955.                        break;
  1956.                }
  1957.            }
  1958.            if (event.ctrlKey === true){
  1959.                switch(event.keyCode) {
  1960.                    case 37: // left arrow
  1961.                        tr.find('td:eq(1)').find("input[type=text]").focus();
  1962.                        break;
  1963.                    case 39: // right arrow
  1964.                        tr.find('td:last-child').find("input[type=text]").focus();
  1965.                        break;
  1966.                case 40: // down arrow
  1967.                    if (string_fill==false){
  1968.                        table.find('tr:last-child td:eq('+col.index()+') input[type=text]').focus();
  1969.                    }
  1970.                    break;
  1971.                case 38: // up arrow
  1972.                    if (string_fill==false){
  1973.                        table.find('tr:eq(1) td:eq('+col.index()+') input[type=text]').focus();
  1974.                    }
  1975.                        break;
  1976.                }
  1977.            }
  1978.            if (event.keyCode == 13 || event.keyCode == 9 ) {
  1979.                event.preventDefault();
  1980.                col.next().find("input[type=text]").focus();
  1981.            }
  1982.            if (string_fill==false){
  1983.                if (event.keyCode == 34) {
  1984.                    event.preventDefault();
  1985.                    table.find('tr:last-child td:last-child').find("input[type=text]").focus();}
  1986.                if (event.keyCode == 33) {
  1987.                    event.preventDefault();
  1988.                    table.find('tr:eq(1) td:eq(1)').find("input[type=text]").focus();}
  1989.            }
  1990.        }
  1991.        });
  1992.        table.find("input[type=text]").each(function(){
  1993.            $(this).on('blur', function(event){
  1994.            var target = event.target;
  1995.            var col = $(target).parents("td");
  1996.            if(table.find("input[name=string-fill]").prop("checked")==true) {
  1997.                col.nextAll().find("input[type=text]").each(function() {
  1998.                    $(this).val($(target).val());
  1999.                });
  2000.            }
  2001.        });
  2002.    })
  2003. };
  2004. })( jQuery );
  2005. //
  2006. // Beauty Hover Plugin (backlight row and col when cell in mouseover)
  2007. //
  2008. //
  2009. (function( $ ){
  2010.    $.fn.beautyHover = function() {
  2011.        var table = this;
  2012.        table.on('mouseover','td', function() {
  2013.            var idx = $(this).index();
  2014.            var rows = $(this).closest('table').find('tr');
  2015.            rows.each(function(){
  2016.                $(this).find('td:eq('+idx+')').addClass('beauty-hover');
  2017.            });
  2018.        })
  2019.        .on('mouseleave','td', function(e) {
  2020.            var idx = $(this).index();
  2021.            var rows = $(this).closest('table').find('tr');
  2022.            rows.each(function(){
  2023.                $(this).find('td:eq('+idx+')').removeClass('beauty-hover');
  2024.            });
  2025.        });
  2026.    };
  2027. })( jQuery );
  2028. //
  2029. //  Function convert values of inputs in table to JSON data
  2030. //
  2031. //
  2032. function Table2Json(table) {
  2033.    var result = {};
  2034.    table.find("tr").each(function () {
  2035.        var oneRow = [];
  2036.        var varname = $(this).index();
  2037.        $("td", this).each(function (index) { if (index != 0) {oneRow.push($("input", this).val());}});
  2038.        result[varname] = oneRow;
  2039.    });
  2040.    var result_json = JSON.stringify(result);
  2041.    OpenModalBox('Table to JSON values', result_json);
  2042. }
  2043. /*-------------------------------------------
  2044.    Demo graphs for Flot Chart page (charts_flot.html)
  2045. ---------------------------------------------*/
  2046. //
  2047. // Graph1 created in element with id = box-one-content
  2048. //
  2049. function FlotGraph1(){
  2050.    // We use an inline data source in the example, usually data would
  2051.    // be fetched from a server
  2052.    var data = [],
  2053.    totalPoints = 300;
  2054.    function getRandomData() {
  2055.        if (data.length > 0)
  2056.             data = data.slice(1);
  2057.         // Do a random walk
  2058.         while (data.length < totalPoints) {
  2059.            var prev = data.length > 0 ? data[data.length - 1] : 50,
  2060.             y = prev + Math.random() * 10 - 5;
  2061.             if (y < 0) {
  2062.                y = 0;
  2063.            } else if (y > 100) {
  2064.                 y = 100;
  2065.             }
  2066.             data.push(y);
  2067.         }
  2068.         // Zip the generated y values with the x values
  2069.         var res = [];
  2070.         for (var i = 0; i < data.length; ++i) {
  2071.            res.push([i, data[i]])
  2072.        }
  2073.        return res;
  2074.    }
  2075.    var updateInterval = 30;
  2076.    var plot = $.plot("#box-one-content", [ getRandomData() ], {
  2077.        series: {
  2078.            shadowSize: 0    // Drawing is faster without shadows
  2079.        },
  2080.        yaxis: {min: 0,    max: 100},
  2081.        xaxis: {show: false    }
  2082.    });
  2083.    function update() {
  2084.        plot.setData([getRandomData()]);
  2085.        // Since the axes don't change, we don't need to call plot.setupGrid()
  2086.        plot.draw();
  2087.        setTimeout(update, updateInterval);
  2088.    }
  2089.    update();
  2090. }
  2091. //
  2092. // Graph2 created in element with id = box-two-content
  2093. //
  2094. function FlotGraph2(){
  2095.    var sin = [];
  2096.    var cos = [];
  2097.    var tan = [];
  2098.    for (var i = 0; i < 14; i += 0.1) {
  2099.        sin.push([i, Math.sin(i)]);
  2100.        cos.push([i, Math.cos(i)]);
  2101.        tan.push([i, Math.tan(i)/4]);
  2102.    }
  2103.    var plot = $.plot("#box-two-content", [
  2104.        { data: sin, label: "sin(x) = -0.00"},
  2105.        { data: cos, label: "cos(x) = -0.00" },
  2106.        { data: tan, label: "tan(x)/4 = -0.00" }
  2107.    ], {
  2108.        series: {
  2109.            lines: {
  2110.                show: true
  2111.            }
  2112.        },
  2113.        crosshair: {
  2114.            mode: "x"
  2115.        },
  2116.        grid: {
  2117.            hoverable: true,
  2118.            autoHighlight: false
  2119.        },
  2120.        yaxis: {
  2121.            min: -5.2,
  2122.            max: 5.2
  2123.        }
  2124.    });
  2125.    var legends = $("#box-two-content .legendLabel");
  2126.    legends.each(function () {
  2127.        // fix the widths so they don't jump around
  2128.        $(this).css('width', $(this).width());
  2129.    });
  2130.    var updateLegendTimeout = null;
  2131.    var latestPosition = null;
  2132.    function updateLegend() {
  2133.        updateLegendTimeout = null;
  2134.        var pos = latestPosition;
  2135.        var axes = plot.getAxes();
  2136.        if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max ||
  2137.             pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) {
  2138.             return;
  2139.         }
  2140.         var i, j, dataset = plot.getData();
  2141.         for (i = 0; i < dataset.length; ++i) {
  2142.            var series = dataset[i];
  2143.            // Find the nearest points, x-wise
  2144.            for (j = 0; j < series.data.length; ++j) {
  2145.                if (series.data[j][0] > pos.x) {
  2146.                     break;
  2147.                 }
  2148.             }
  2149.         // Now Interpolate
  2150.         var y, p1 = series.data[j - 1],    p2 = series.data[j];
  2151.             if (p1 == null) {
  2152.                 y = p2[1];
  2153.             } else if (p2 == null) {
  2154.                 y = p1[1];
  2155.             } else {
  2156.                 y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);
  2157.             }
  2158.             legends.eq(i).text(series.label.replace(/=.*/, "= " + y.toFixed(2)));
  2159.         }
  2160.     }
  2161.     $("#box-two-content").bind("plothover",  function (event, pos, item) {
  2162.         latestPosition = pos;
  2163.         if (!updateLegendTimeout) {
  2164.             updateLegendTimeout = setTimeout(updateLegend, 50);
  2165.         }
  2166.     });
  2167. }
  2168. //
  2169. // Graph3 created in element with id = box-three-content
  2170. //
  2171. function FlotGraph3(){
  2172.     var d1 = [];
  2173.     for (var i = 0; i <= 60; i += 1) {
  2174.        d1.push([i, parseInt(Math.random() * 30 - 10)]);
  2175.    }
  2176.    function plotWithOptions(t) {
  2177.        $.plot("#box-three-content", [{
  2178.            data: d1,
  2179.            color: "rgb(30, 180, 20)",
  2180.            threshold: {
  2181.                below: t,
  2182.                color: "rgb(200, 20, 30)"
  2183.            },
  2184.            lines: {
  2185.                steps: true
  2186.            }
  2187.        }]);
  2188.    }
  2189.    plotWithOptions(0);
  2190. }
  2191. //
  2192. // Graph4 created in element with id = box-four-content
  2193. //
  2194. function FlotGraph4(){
  2195.    var d1 = [];
  2196.    for (var i = 0; i < 14; i += 0.5) {
  2197.        d1.push([i, Math.sin(i)]);
  2198.    }
  2199.    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
  2200.    var d3 = [];
  2201.    for (var i = 0; i < 14; i += 0.5) {
  2202.        d3.push([i, Math.cos(i)]);
  2203.    }
  2204.    var d4 = [];
  2205.    for (var i = 0; i < 14; i += 0.1) {
  2206.        d4.push([i, Math.sqrt(i * 10)]);
  2207.    }
  2208.    var d5 = [];
  2209.    for (var i = 0; i < 14; i += 0.5) {
  2210.        d5.push([i, Math.sqrt(i)]);
  2211.    }
  2212.    var d6 = [];
  2213.    for (var i = 0; i < 14; i += 0.5 + Math.random()) {
  2214.        d6.push([i, Math.sqrt(2*i + Math.sin(i) + 5)]);
  2215.    }
  2216.    $.plot("#box-four-content", [{
  2217.        data: d1,
  2218.            lines: { show: true, fill: true }
  2219.        }, {
  2220.            data: d2,
  2221.            bars: { show: true }
  2222.        }, {
  2223.            data: d3,
  2224.            points: { show: true }
  2225.        }, {
  2226.            data: d4,
  2227.            lines: { show: true }
  2228.        }, {
  2229.            data: d5,
  2230.            lines: { show: true },
  2231.            points: { show: true }
  2232.        }, {
  2233.            data: d6,
  2234.            lines: { show: true, steps: true }
  2235.        }]);
  2236. }
  2237. /*-------------------------------------------
  2238.    Demo graphs for Morris Chart page (charts_morris.html)
  2239. ---------------------------------------------*/
  2240. //
  2241. // Graph1 created in element with id = morris-chart-1
  2242. //
  2243. function MorrisChart1(){
  2244.    var day_data = [
  2245.        {"period": "2013-10-01", "licensed": 3407, "sorned": 660},
  2246.        {"period": "2013-09-30", "licensed": 3351, "sorned": 629},
  2247.        {"period": "2013-09-29", "licensed": 3269, "sorned": 618},
  2248.        {"period": "2013-09-20", "licensed": 3246, "sorned": 661},
  2249.        {"period": "2013-09-19", "licensed": 3257, "sorned": 667},
  2250.        {"period": "2013-09-18", "licensed": 3248, "sorned": 627},
  2251.        {"period": "2013-09-17", "licensed": 3171, "sorned": 660},
  2252.        {"period": "2013-09-16", "licensed": 3171, "sorned": 676},
  2253.        {"period": "2013-09-15", "licensed": 3201, "sorned": 656},
  2254.        {"period": "2013-09-10", "licensed": 3215, "sorned": 622}
  2255.    ];
  2256.    Morris.Bar({
  2257.        element: 'morris-chart-1',
  2258.        data: day_data,
  2259.        xkey: 'period',
  2260.        ykeys: ['licensed', 'sorned'],
  2261.        labels: ['Licensed', 'SORN'],
  2262.        xLabelAngle: 60
  2263.    });
  2264. }
  2265. //
  2266. // Graph2 created in element with id = morris-chart-2
  2267. //
  2268. function MorrisChart2(){
  2269.    // Use Morris.Area instead of Morris.Line
  2270.    Morris.Area({
  2271.        element: 'morris-chart-2',
  2272.        data: [
  2273.            {x: '2011 Q1', y: 3, z: 3, m: 1},
  2274.            {x: '2011 Q2', y: 2, z: 0, m: 7},
  2275.            {x: '2011 Q3', y: 2, z: 5, m: 2},
  2276.            {x: '2011 Q4', y: 4, z: 4, m: 5},
  2277.            {x: '2012 Q1', y: 6, z: 1, m: 11},
  2278.            {x: '2012 Q2', y: 4, z: 4, m: 3},
  2279.            {x: '2012 Q3', y: 4, z: 4, m: 7},
  2280.            {x: '2012 Q4', y: 4, z: 4, m: 9}
  2281.        ],
  2282.        xkey: 'x',
  2283.        ykeys: ['y', 'z', 'm'],
  2284.        labels: ['Y', 'Z', 'M']
  2285.        })
  2286.        .on('click', function(i, row){
  2287.            console.log(i, row);
  2288.        });
  2289. }
  2290. //
  2291. // Graph3 created in element with id = morris-chart-3
  2292. //
  2293. function MorrisChart3(){
  2294.    var decimal_data = [];
  2295.    for (var x = 0; x <= 360; x += 10) {
  2296.        decimal_data.push({ x: x, y: Math.sin(Math.PI * x / 180).toFixed(4), z: Math.cos(Math.PI * x / 180).toFixed(4) });
  2297.    }
  2298.    Morris.Line({
  2299.        element: 'morris-chart-3',
  2300.        data: decimal_data,
  2301.        xkey: 'x',
  2302.        ykeys: ['y', 'z'],
  2303.        labels: ['sin(x)', 'cos(x)'],
  2304.        parseTime: false,
  2305.        goals: [-1, 0, 1]
  2306.    });
  2307. }
  2308. //
  2309. // Graph4 created in element with id = morris-chart-4
  2310. //
  2311. function MorrisChart4(){
  2312.    // Use Morris.Bar
  2313.    Morris.Bar({
  2314.        element: 'morris-chart-4',
  2315.        data: [
  2316.            {x: '2011 Q1', y: 0},
  2317.            {x: '2011 Q2', y: 1},
  2318.            {x: '2011 Q3', y: 2},
  2319.            {x: '2011 Q4', y: 3},
  2320.            {x: '2012 Q1', y: 4},
  2321.            {x: '2012 Q2', y: 5},
  2322.            {x: '2012 Q3', y: 6},
  2323.            {x: '2012 Q4', y: 7},
  2324.            {x: '2013 Q1', y: 8},
  2325.            {x: '2013 Q2', y: 7},
  2326.            {x: '2013 Q3', y: 6},
  2327.            {x: '2013 Q4', y: 5},
  2328.            {x: '2014 Q1', y: 9}
  2329.        ],
  2330.        xkey: 'x',
  2331.        ykeys: ['y'],
  2332.        labels: ['Y'],
  2333.        barColors: function (row, series, type) {
  2334.            if (type === 'bar') {
  2335.                var red = Math.ceil(255 * row.y / this.ymax);
  2336.                return 'rgb(' + red + ',0,0)';
  2337.            }
  2338.            else {
  2339.                return '#000';
  2340.            }
  2341.        }
  2342.    });
  2343. }
  2344. //
  2345. // Graph5 created in element with id = morris-chart-5
  2346. //
  2347. function MorrisChart5(){
  2348.    Morris.Area({
  2349.        element: 'morris-chart-5',
  2350.        data: [
  2351.            {period: '2010 Q1', iphone: 2666, ipad: null, itouch: 2647},
  2352.            {period: '2010 Q2', iphone: 2778, ipad: 2294, itouch: 2441},
  2353.            {period: '2010 Q3', iphone: 4912, ipad: 1969, itouch: 2501},
  2354.            {period: '2010 Q4', iphone: 3767, ipad: 3597, itouch: 5689},
  2355.            {period: '2011 Q1', iphone: 6810, ipad: 1914, itouch: 2293},
  2356.            {period: '2011 Q2', iphone: 5670, ipad: 4293, itouch: 1881},
  2357.            {period: '2011 Q3', iphone: 4820, ipad: 3795, itouch: 1588},
  2358.            {period: '2011 Q4', iphone: 15073, ipad: 5967, itouch: 5175},
  2359.            {period: '2012 Q1', iphone: 10687, ipad: 4460, itouch: 2028},
  2360.            {period: '2012 Q2', iphone: 8432, ipad: 5713, itouch: 1791}
  2361.        ],
  2362.        xkey: 'period',
  2363.        ykeys: ['iphone', 'ipad', 'itouch'],
  2364.        labels: ['iPhone', 'iPad', 'iPod Touch'],
  2365.        pointSize: 2,
  2366.        hideHover: 'auto'
  2367.    });
  2368. }
  2369. /*-------------------------------------------
  2370.    Demo graphs for Google Chart page (charts_google.html)
  2371. ---------------------------------------------*/
  2372. //
  2373. // One function for create all graphs on Google Chart page
  2374. //
  2375. function DrawAllCharts(){
  2376.    //  Chart 1
  2377.    var chart1_data = [
  2378.        ['Smartphones', 'PC', 'Notebooks', 'Monitors','Routers', 'Switches' ],
  2379.        ['01.01.2014',  1234, 2342, 344, 232,131],
  2380.        ['02.01.2014',  1254, 232, 314, 232, 331],
  2381.        ['03.01.2014',  2234, 342, 298, 232, 665],
  2382.        ['04.01.2014',  2234, 42, 559, 232, 321],
  2383.        ['05.01.2014',  1999, 82, 116, 232, 334],
  2384.        ['06.01.2014',  1634, 834, 884, 232, 191],
  2385.        ['07.01.2014',  321, 342, 383, 232, 556],
  2386.        ['08.01.2014',  845, 112, 499, 232, 731]
  2387.    ];
  2388.    var chart1_options = {
  2389.        title: 'Sales of company',
  2390.        hAxis: {title: 'Date', titleTextStyle: {color: 'red'}},
  2391.        backgroundColor: '#fcfcfc',
  2392.        vAxis: {title: 'Quantity', titleTextStyle: {color: 'blue'}}
  2393.    };
  2394.    var chart1_element = 'google-chart-1';
  2395.    var chart1_type = google.visualization.ColumnChart;
  2396.    drawGoogleChart(chart1_data, chart1_options, chart1_element, chart1_type);
  2397.    //  Chart 2
  2398.    var chart2_data = [
  2399.        ['Height', 'Width'],
  2400.        ['Samsung',  74.5],
  2401.        ['Apple',  31.24],
  2402.        ['LG',  12.10],
  2403.        ['Huawei',  11.14],
  2404.        ['Sony',  8.3],
  2405.        ['Nokia',  7.4],
  2406.        ['Blackberry',  6.8],
  2407.        ['HTC',  6.63],
  2408.        ['Motorola',  3.5],
  2409.        ['Other',  43.15]
  2410.    ];
  2411.    var chart2_options = {
  2412.        title: 'Smartphone marketshare 2Q 2013',
  2413.        backgroundColor: '#fcfcfc'
  2414.    };
  2415.    var chart2_element = 'google-chart-2';
  2416.    var chart2_type = google.visualization.PieChart;
  2417.    drawGoogleChart(chart2_data, chart2_options, chart2_element, chart2_type);
  2418.    //  Chart 3
  2419.    var chart3_data = [
  2420.        ['Age', 'Weight'],
  2421.        [ 8, 12],
  2422.        [ 4, 5.5],
  2423.        [ 11, 14],
  2424.        [ 4, 5],
  2425.        [ 3, 3.5],
  2426.        [ 6.5, 7]
  2427.    ];
  2428.    var chart3_options = {
  2429.        title: 'Age vs. Weight comparison',
  2430.        hAxis: {title: 'Age', minValue: 0, maxValue: 15},
  2431.        vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
  2432.        legend: 'none',
  2433.        backgroundColor: '#fcfcfc'
  2434.    };
  2435.    var chart3_element = 'google-chart-3';
  2436.    var chart3_type = google.visualization.ScatterChart;
  2437.    drawGoogleChart(chart3_data, chart3_options, chart3_element, chart3_type);
  2438.    //  Chart 4
  2439.    var chart4_data = [
  2440.        ['ID', 'Life Expectancy', 'Fertility Rate', 'Region',     'Population'],
  2441.        ['CAN',    80.66,              1.67,      'North America',  33739900],
  2442.        ['DEU',    79.84,              1.36,      'Europe',         81902307],
  2443.        ['DNK',    78.6,               1.84,      'Europe',         5523095],
  2444.        ['EGY',    72.73,              2.78,      'Middle East',    79716203],
  2445.        ['GBR',    80.05,              2,         'Europe',         61801570],
  2446.        ['IRN',    72.49,              1.7,       'Middle East',    73137148],
  2447.        ['IRQ',    68.09,              4.77,      'Middle East',    31090763],
  2448.        ['ISR',    81.55,              2.96,      'Middle East',    7485600],
  2449.        ['RUS',    68.6,               1.54,      'Europe',         141850000],
  2450.        ['USA',    78.09,              2.05,      'North America',  307007000]
  2451.    ];
  2452.    var chart4_options = {
  2453.        title: 'Correlation between life expectancy, fertility rate and population of some world countries (2010)',
  2454.        hAxis: {title: 'Life Expectancy'},
  2455.        vAxis: {title: 'Fertility Rate'},
  2456.        backgroundColor: '#fcfcfc',
  2457.        bubble: {textStyle: {fontSize: 11}}
  2458.    };
  2459.    var chart4_element = 'google-chart-4';
  2460.    var chart4_type = google.visualization.BubbleChart;
  2461.    drawGoogleChart(chart4_data, chart4_options, chart4_element, chart4_type);
  2462.    //  Chart 5
  2463.    var chart5_data = [
  2464.        ['Country', 'Popularity'],
  2465.        ['Germany', 200],
  2466.        ['United States', 300],
  2467.        ['Brazil', 400],
  2468.        ['Canada', 500],
  2469.        ['France', 600],
  2470.        ['RU', 700]
  2471.    ];
  2472.    var chart5_options = {
  2473.        backgroundColor: '#fcfcfc',
  2474.        enableRegionInteractivity: true
  2475.    };
  2476.    var chart5_element = 'google-chart-5';
  2477.    var chart5_type = google.visualization.GeoChart;
  2478.    drawGoogleChart(chart5_data, chart5_options, chart5_element, chart5_type);
  2479.    //  Chart 6
  2480.    var chart6_data = [
  2481.    ['Year', 'Sales', 'Expenses'],
  2482.        ['2004',  1000,      400],
  2483.        ['2005',  1170,      460],
  2484.        ['2006',  660,       1120],
  2485.        ['2007',  1030,      540],
  2486.        ['2008',  2080,      740],
  2487.        ['2009',  1949,      690],
  2488.        ['2010',  2334,      820]
  2489.    ];
  2490.    var chart6_options = {
  2491.        backgroundColor: '#fcfcfc',
  2492.        title: 'Company Performance'
  2493.    };
  2494.    var chart6_element = 'google-chart-6';
  2495.    var chart6_type = google.visualization.LineChart;
  2496.    drawGoogleChart(chart6_data, chart6_options, chart6_element, chart6_type);
  2497.    //  Chart 7
  2498.    var chart7_data = [
  2499.    ['Task', 'Hours per Day'],
  2500.        ['Work',     11],
  2501.        ['Eat',      2],
  2502.        ['Commute',  2],
  2503.        ['Watch TV', 2],
  2504.        ['Sleep',    7]
  2505.    ];
  2506.    var chart7_options = {
  2507.        backgroundColor: '#fcfcfc',
  2508.        title: 'My Daily Activities',
  2509.        pieHole: 0.4
  2510.    };
  2511.    var chart7_element = 'google-chart-7';
  2512.    var chart7_type = google.visualization.PieChart;
  2513.    drawGoogleChart(chart7_data, chart7_options, chart7_element, chart7_type);
  2514.    //  Chart 8
  2515.    var chart8_data = [
  2516.        ['Generation', 'Descendants'],
  2517.        [0, 1], [1, 33], [2, 269], [3, 2013]
  2518.    ];
  2519.    var chart8_options = {
  2520.        backgroundColor: '#fcfcfc',
  2521.        title: 'Descendants by Generation',
  2522.        hAxis: {title: 'Generation', minValue: 0, maxValue: 3},
  2523.        vAxis: {title: 'Descendants', minValue: 0, maxValue: 2100},
  2524.        trendlines: {
  2525.            0: {
  2526.                type: 'exponential',
  2527.                visibleInLegend: true
  2528.            }
  2529.        }
  2530.    };
  2531.    var chart8_element = 'google-chart-8';
  2532.    var chart8_type = google.visualization.ScatterChart;
  2533.    drawGoogleChart(chart8_data, chart8_options, chart8_element, chart8_type);
  2534. }
  2535. /*-------------------------------------------
  2536.    Demo graphs for xCharts page (charts_xcharts.html)
  2537. ---------------------------------------------*/
  2538. //
  2539. // Graph1 created in element with id = xchart-1
  2540. //
  2541. function xGraph1(){
  2542.    var tt = document.createElement('div'),
  2543.    leftOffset = -(~~$('html').css('padding-left').replace('px', '') + ~~$('body').css('margin-left').replace('px', '')),
  2544.    topOffset = -32;
  2545.    tt.className = 'ex-tooltip';
  2546.    document.body.appendChild(tt);
  2547.    var data = {
  2548.        "xScale": "time",
  2549.        "yScale": "linear",
  2550.        "main": [
  2551.            {
  2552.            "className": ".xchart-class-1",
  2553.            "data": [
  2554.                {
  2555.                  "x": "2012-11-05",
  2556.                  "y": 6
  2557.                },
  2558.                {
  2559.                  "x": "2012-11-06",
  2560.                  "y": 6
  2561.                },
  2562.                {
  2563.                  "x": "2012-11-07",
  2564.                  "y": 8
  2565.                },
  2566.                {
  2567.                  "x": "2012-11-08",
  2568.                  "y": 3
  2569.                },
  2570.                {
  2571.                  "x": "2012-11-09",
  2572.                  "y": 4
  2573.                },
  2574.                {
  2575.                  "x": "2012-11-10",
  2576.                  "y": 9
  2577.                },
  2578.                {
  2579.                  "x": "2012-11-11",
  2580.                  "y": 6
  2581.                },
  2582.                {
  2583.                  "x": "2012-11-12",
  2584.                  "y": 16
  2585.                },
  2586.                {
  2587.                  "x": "2012-11-13",
  2588.                  "y": 4
  2589.                },
  2590.                {
  2591.                  "x": "2012-11-14",
  2592.                  "y": 9
  2593.                },
  2594.                {
  2595.                  "x": "2012-11-15",
  2596.                  "y": 2
  2597.                }
  2598.            ]
  2599.            }
  2600.        ]
  2601.    };
  2602.    var opts = {
  2603.        "dataFormatX": function (x) { return d3.time.format('%Y-%m-%d').parse(x); },
  2604.        "tickFormatX": function (x) { return d3.time.format('%A')(x); },
  2605.        "mouseover": function (d, i) {
  2606.            var pos = $(this).offset();
  2607.            $(tt).text(d3.time.format('%A')(d.x) + ': ' + d.y)
  2608.                .css({top: topOffset + pos.top, left: pos.left + leftOffset})
  2609.                .show();
  2610.        },
  2611.        "mouseout": function (x) {
  2612.            $(tt).hide();
  2613.        }
  2614.    };
  2615.    var myChart = new xChart('line-dotted', data, '#xchart-1', opts);
  2616. }
  2617. //
  2618. // Graph2 created in element with id = xchart-2
  2619. //
  2620. function xGraph2(){
  2621.    var data = {
  2622.    "xScale": "ordinal",
  2623.    "yScale": "linear",
  2624.    "main": [
  2625.        {
  2626.        "className": ".xchart-class-2",
  2627.        "data": [
  2628.            {
  2629.              "x": "Apple",
  2630.              "y": 575
  2631.            },
  2632.            {
  2633.              "x": "Facebook",
  2634.              "y": 163
  2635.            },
  2636.            {
  2637.              "x": "Microsoft",
  2638.              "y": 303
  2639.            },
  2640.            {
  2641.              "x": "Cisco",
  2642.              "y": 121
  2643.            },
  2644.            {
  2645.              "x": "Google",
  2646.              "y": 393
  2647.            }
  2648.        ]
  2649.        }
  2650.        ]
  2651.    };
  2652.    var myChart = new xChart('bar', data, '#xchart-2');
  2653. }
  2654. //
  2655. // Graph3 created in element with id = xchart-3
  2656. //
  2657. function xGraph3(){
  2658.    var data = {
  2659.        "xScale": "time",
  2660.        "yScale": "linear",
  2661.        "type": "line",
  2662.        "main": [
  2663.        {
  2664.            "className": ".xchart-class-3",
  2665.            "data": [
  2666.                {
  2667.                  "x": "2012-11-05",
  2668.                  "y": 1
  2669.                },
  2670.                {
  2671.                  "x": "2012-11-06",
  2672.                  "y": 6
  2673.                },
  2674.                {
  2675.                  "x": "2012-11-07",
  2676.                  "y": 13
  2677.                },
  2678.                {
  2679.                  "x": "2012-11-08",
  2680.                  "y": -3
  2681.                },
  2682.                {
  2683.                  "x": "2012-11-09",
  2684.                  "y": -4
  2685.                },
  2686.                {
  2687.                  "x": "2012-11-10",
  2688.                  "y": 9
  2689.                },
  2690.                {
  2691.                  "x": "2012-11-11",
  2692.                  "y": 6
  2693.                },
  2694.                {
  2695.                  "x": "2012-11-12",
  2696.                  "y": 7
  2697.                },
  2698.                {
  2699.                  "x": "2012-11-13",
  2700.                  "y": -2
  2701.                },
  2702.                {
  2703.                  "x": "2012-11-14",
  2704.                  "y": -7
  2705.                }
  2706.            ]
  2707.            }
  2708.        ]
  2709.    };
  2710.    var opts = {
  2711.        "dataFormatX": function (x) { return d3.time.format('%Y-%m-%d').parse(x); },
  2712.        "tickFormatX": function (x) { return d3.time.format('%A')(x); }
  2713.    };
  2714.    var myChart = new xChart('line', data, '#xchart-3', opts);
  2715. }
  2716. /*-------------------------------------------
  2717.    Demo graphs for CoinDesk page (charts_coindesk.html)
  2718. ---------------------------------------------*/
  2719. //
  2720. // Main function for CoinDesk API Page
  2721. // (we get JSON data and make 4 graph from this)
  2722. //
  2723. function CoinDeskGraph(){
  2724.    var dates = PrettyDates();
  2725.    var startdate = dates[0];
  2726.    var enddate = dates[1];
  2727.    // Load JSON data from CoinDesk API
  2728.    var jsonURL = 'https://api.coindesk.com/v1/bpi/historical/close.json?start='+startdate+'&end='+enddate;
  2729.    $.getJSON(jsonURL, function(result){
  2730.        // Create array of data for xChart
  2731.        $.each(result.bpi, function(key, val){
  2732.            xchart_data.push({'x': key,'y':val});
  2733.        });
  2734.        // Set handler for resize and create xChart plot
  2735.        var graphXChartResize;
  2736.        $('#coindesk-xchart').resize(function(){
  2737.            clearTimeout(graphXChartResize);
  2738.            graphXChartResize = setTimeout(DrawCoinDeskXCharts, 500);
  2739.        });
  2740.        DrawCoinDeskXCharts();
  2741.        // Create array of data for Google Chart
  2742.            $.each(result.bpi, function(key, val){
  2743.                google_data.push([key,val]);
  2744.            });
  2745.        // Set handler for resize and create Google Chart plot
  2746.        var graphGChartResize;
  2747.        $('#coindesk-google-chart').resize(function(){
  2748.            clearTimeout(graphGChartResize);
  2749.            graphGChartResize = setTimeout(DrawCoinDeskGoogleCharts, 500);
  2750.        });
  2751.        DrawCoinDeskGoogleCharts();
  2752.        // Create array of data for Flot and Sparkline
  2753.        $.each(result.bpi, function(key, val){
  2754.            var parseDate=key;
  2755.            parseDate=parseDate.split("-");
  2756.            var newDate=parseDate[1]+"/"+parseDate[2]+"/"+parseDate[0];
  2757.            var new_date = new Date(newDate).getTime();
  2758.            exchange_rate.push([new_date,val]);
  2759.        });
  2760.        // Create Flot plot (not need bind to resize, cause Flot use plugin 'resize')
  2761.        DrawCoinDeskFlot();
  2762.        // Set handler for resize and create Sparkline plot
  2763.        var graphSparklineResize;
  2764.        $('#coindesk-sparklines').resize(function(){
  2765.            clearTimeout(graphSparklineResize);
  2766.            graphSparklineResize = setTimeout(DrawCoinDeskSparkLine, 500);
  2767.        });
  2768.        DrawCoinDeskSparkLine();
  2769.    });
  2770. }
  2771. //
  2772. // Draw Sparkline Graph on Coindesk page
  2773. //
  2774. function DrawCoinDeskSparkLine(){
  2775.    $('#coindesk-sparklines').sparkline(exchange_rate, { height: '100%', width: '100%' });
  2776. }
  2777. //
  2778. // Draw xChart Graph on Coindesk page
  2779. //
  2780. function DrawCoinDeskXCharts(){
  2781.    var data = {
  2782.        "xScale": "ordinal",
  2783.        "yScale": "linear",
  2784.        "main": [
  2785.            {
  2786.              "className": ".pizza",
  2787.              "data": xchart_data
  2788.            }
  2789.          ]
  2790.        };
  2791.    var myChart = new xChart('line-dotted', data, '#coindesk-xchart');
  2792. }
  2793. //
  2794. // Draw Flot Graph on Coindesk page
  2795. //
  2796. function DrawCoinDeskFlot(){
  2797.    var data1 = [
  2798.        { data: exchange_rate, label: "Bitcoin exchange rate ($)" }
  2799.    ];
  2800.    var options = {
  2801.        canvas: true,
  2802.        xaxes: [
  2803.            { mode: "time" }
  2804.        ],
  2805.        yaxes: [
  2806.            { min: 0 },
  2807.            {
  2808.                position: "right",
  2809.                alignTicksWithAxis: 1,
  2810.                tickFormatter: function (value, axis) {
  2811.                    return value.toFixed(axis.tickDecimals) + "€";
  2812.                }
  2813.            }
  2814.        ],
  2815.        legend: { position: "sw" }
  2816.    };
  2817.    $.plot("#coindesk-flot", data1, options);
  2818. }
  2819. //
  2820. // Draw Google Chart Graph on Coindesk page
  2821. //
  2822. function DrawCoinDeskGoogleCharts(){
  2823.    var google_options = {
  2824.        backgroundColor: '#fcfcfc',
  2825.        title: 'Coindesk Exchange Rate'
  2826.    };
  2827.    var google_element = 'coindesk-google-chart';
  2828.    var google_type = google.visualization.LineChart;
  2829.    drawGoogleChart(google_data, google_options, google_element, google_type);
  2830. }
  2831. /*-------------------------------------------
  2832.    Scripts for DataTables page (tables_datatables.html)
  2833. ---------------------------------------------*/
  2834. //
  2835. // Function for table, located in element with id = datatable-1
  2836. //
  2837. function TestTable1(){
  2838.    $('#datatable-1').dataTable( {
  2839.        "aaSorting": [[ 0, "asc" ]],
  2840.        "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'>>",
  2841.         "sPaginationType": "bootstrap",
  2842.         "oLanguage": {
  2843.             "sSearch": "",
  2844.             "sLengthMenu": '_MENU_'
  2845.         }
  2846.     });
  2847. }
  2848. //
  2849. // Function for table, located in element with id = datatable-2
  2850. //
  2851. function TestTable2(){
  2852.     var asInitVals = [];
  2853.     var oTable = $('#datatable-2').dataTable( {
  2854.         "aaSorting": [[ 0, "asc" ]],
  2855.         "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'>>",
  2856.         "sPaginationType": "bootstrap",
  2857.         "oLanguage": {
  2858.             "sSearch": "",
  2859.             "sLengthMenu": '_MENU_'
  2860.         },
  2861.         bAutoWidth: false
  2862.     });
  2863.     var header_inputs = $("#datatable-2 thead input");
  2864.     header_inputs.on('keyup', function(){
  2865.         /* Filter on the column (the index) of this element */
  2866.         oTable.fnFilter( this.value, header_inputs.index(this) );
  2867.     })
  2868.     .on('focus', function(){
  2869.         if ( this.className == "search_init" ){
  2870.             this.className = "";
  2871.             this.value = "";
  2872.         }
  2873.     })
  2874.     .on('blur', function (i) {
  2875.         if ( this.value == "" ){
  2876.             this.className = "search_init";
  2877.             this.value = asInitVals[header_inputs.index(this)];
  2878.         }
  2879.     });
  2880.     header_inputs.each( function (i) {
  2881.         asInitVals[i] = this.value;
  2882.     });
  2883. }
  2884. //
  2885. // Function for table, located in element with id = datatable-3
  2886. //
  2887. function TestTable3(){
  2888.     $('#datatable-3').dataTable( {
  2889.         "aaSorting": [[ 0, "asc" ]],
  2890.         "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'>>",
  2891.         "sPaginationType": "bootstrap",
  2892.         "oLanguage": {
  2893.             "sSearch": "",
  2894.             "sLengthMenu": '_MENU_'
  2895.         },
  2896.         "oTableTools": {
  2897.             "sSwfPath": "plugins/datatables/copy_csv_xls_pdf.swf",
  2898.             "aButtons": [
  2899.                 "copy",
  2900.                 "print",
  2901.                 {
  2902.                     "sExtends":    "collection",
  2903.                     "sButtonText": 'Save <span class="caret" />',
  2904.                     "aButtons":    [ "csv", "xls", "pdf" ]
  2905.                 }
  2906.             ]
  2907.         }
  2908.     });
  2909. }
  2910. /*-------------------------------------------
  2911.     Functions for Dashboard page (dashboard.html)
  2912. ---------------------------------------------*/
  2913. //
  2914. // Helper for random change data (only test data for Sparkline plots)
  2915. //
  2916. function SmallChangeVal(val) {
  2917.     var new_val = Math.floor(100*Math.random());
  2918.     var plusOrMinus = Math.random() < 0.5 ? -1 : 1;
  2919.    var result = val[0]+new_val*plusOrMinus;
  2920.    if (parseInt(result) > 1000){
  2921.         return [val[0] - new_val]
  2922.     }
  2923.     if (parseInt(result) < 0){
  2924.        return [val[0] + new_val]
  2925.    }
  2926.    return [result];
  2927. }
  2928. //
  2929. // Make array of random data
  2930. //
  2931. function SparklineTestData(){
  2932.    var arr = [];
  2933.    for (var i=1; i<9; i++){
  2934.        arr.push([Math.floor(1000*Math.random())])
  2935.    }
  2936.    return arr;
  2937. }
  2938. //
  2939. // Redraw Knob charts on Dashboard (panel- servers)
  2940. //
  2941. function RedrawKnob(elem){
  2942.    elem.animate({
  2943.        value: Math.floor(100*Math.random())
  2944.    },{
  2945.        duration: 3000,
  2946.        easing:'swing',
  2947.        progress: function()
  2948.        {
  2949.            $(this).val(parseInt(Math.ceil(elem.val()))).trigger('change');
  2950.        }
  2951.    });
  2952. }
  2953. //
  2954. // Draw 3 Sparkline plot in Dashboard header
  2955. //
  2956. function SparklineLoop(){
  2957.    SparkLineDrawBarGraph($('#sparkline-1'), sparkline_arr_1.map(SmallChangeVal));
  2958.    SparkLineDrawBarGraph($('#sparkline-2'), sparkline_arr_2.map(SmallChangeVal), '#7BC5D3');
  2959.    SparkLineDrawBarGraph($('#sparkline-3'), sparkline_arr_3.map(SmallChangeVal), '#B25050');
  2960. }
  2961. //
  2962. // Draw Morris charts on Dashboard (panel- Statistics - Planning + 3 donuts)
  2963. //
  2964. function MorrisDashboard(){
  2965.    Morris.Line({
  2966.        element: 'stat-graph',
  2967.        data: [
  2968.            {"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},
  2969.            {"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},
  2970.            {"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},
  2971.            {"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},
  2972.            {"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},
  2973.            {"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},
  2974.            {"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},
  2975.            {"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},
  2976.            {"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},
  2977.            {"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},
  2978.            {"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},
  2979.            {"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},
  2980.            {"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}
  2981.        ],
  2982.        xkey: 'period',
  2983.        ykeys: ['Win8', 'Win7','Vista','NT','XP', 'Linux', 'Mac', 'Mobile'],
  2984.        labels: ['Win8', 'Win7','Vista','NT','XP', 'Linux', 'Mac', 'Mobile']
  2985.    });
  2986.    Morris.Donut({
  2987.        element: 'morris_donut_1',
  2988.        data: [
  2989.            {value: 70, label: 'pay', formatted: 'at least 70%' },
  2990.            {value: 15, label: 'client', formatted: 'approx. 15%' },
  2991.            {value: 10, label: 'buy', formatted: 'approx. 10%' },
  2992.            {value: 5, label: 'hosted', formatted: 'at most 5%' }
  2993.        ],
  2994.        formatter: function (x, data) { return data.formatted; }
  2995.    });
  2996.    Morris.Donut({
  2997.        element: 'morris_donut_2',
  2998.        data: [
  2999.            {value: 20, label: 'office', formatted: 'current' },
  3000.            {value: 35, label: 'store', formatted: 'approx. 35%' },
  3001.            {value: 20, label: 'shop', formatted: 'approx. 20%' },
  3002.            {value: 25, label: 'cars', formatted: 'at most 25%' }
  3003.        ],
  3004.        formatter: function (x, data) { return data.formatted; }
  3005.    });
  3006.    Morris.Donut({
  3007.        element: 'morris_donut_3',
  3008.        data: [
  3009.            {value: 17, label: 'current', formatted: 'current' },
  3010.            {value: 22, label: 'week', formatted: 'last week' },
  3011.            {value: 10, label: 'month', formatted: 'last month' },
  3012.            {value: 25, label: 'period', formatted: 'period' },
  3013.            {value: 25, label: 'year', formatted: 'this year' }
  3014.        ],
  3015.        formatter: function (x, data) { return data.formatted; }
  3016.    });
  3017.    Morris.Bar({
  3018.        element: 'planning-chart-1',
  3019.        data: [
  3020.            {x: 'Network upgrade', y: 179459},
  3021.            {x: 'Improved power equipment', y: 59411},
  3022.            {x: 'New ticket system', y: 14906},
  3023.            {x: 'Storage area network', y: 250000},
  3024.            {x: 'New optical channels', y: 22359},
  3025.            {x: 'Load balance system', y: 33950}
  3026.        ],
  3027.        xkey: 'x',
  3028.        ykeys: ['y'],
  3029.        labels: ['Y'],
  3030.        barColors: function (row, series, type) {
  3031.            if (type === 'bar') {
  3032.                var red = Math.ceil(255 * row.y / this.ymax);
  3033.                return 'rgb(' + red + ',0,0)';
  3034.            }
  3035.            else {
  3036.                return '#000';
  3037.            }
  3038.        }
  3039.    });
  3040.    Morris.Bar({
  3041.        element: 'planning-chart-2',
  3042.        data: [
  3043.            {x: "2015-01", y: 179459},
  3044.            {x: "2015-02", y: 149459},
  3045.            {x: "2015-03", y: 13849},
  3046.            {x: "2015-04", y: 12349},
  3047.            {x: "2015-05", y: 200019},
  3048.            {x: "2015-06", y: 59459},
  3049.            {x: "2015-07", y: 93459},
  3050.            {x: "2015-08", y: 133044},
  3051.            {x: "2015-09", y: 9244},
  3052.            {x: "2015-10", y: 54144},
  3053.            {x: "2015-11", y: 19954},
  3054.            {x: "2015-11", y: 38452}
  3055.        ],
  3056.        xkey: 'x',
  3057.        ykeys: ['y'],
  3058.        labels: ['Spending'],
  3059.        barColors: function (row, series, type) {
  3060.            if (type === 'bar') {
  3061.                var red = Math.ceil(255 * row.y / this.ymax);
  3062.                return 'rgb(0,' + red + ',0)';
  3063.            }
  3064.            else {
  3065.                return '#000';
  3066.            }
  3067.        }
  3068.    });
  3069.    Morris.Donut({
  3070.        element: 'planning-chart-3',
  3071.        data: [
  3072.            {label: 'Network upgrade', value: 179459},
  3073.            {label: 'Improved power equipment', value: 59411},
  3074.            {label: 'New ticket system', value: 14906},
  3075.            {label: 'Storage area network', value: 250000},
  3076.            {label: 'New optical channels', value: 22359},
  3077.            {label: 'Load balance system', value: 33950}
  3078.        ],
  3079.        colors: ['#CCC', '#DDD', '#BBB']
  3080.    });
  3081. }
  3082. //
  3083. // Draw SparkLine example Charts for Dashboard (table- Tickers)
  3084. //
  3085. function DrawSparklineDashboard(){
  3086.    SparklineLoop();
  3087.    setInterval(SparklineLoop, 1000);
  3088.    var sparkline_clients = [[309],[223], [343], [652], [455], [18], [912],[15]];
  3089.    $('.bar').each(function(){
  3090.        $(this).sparkline(sparkline_clients.map(SmallChangeVal), {type: 'bar', barWidth: 5, highlightColor: '#000', barSpacing: 2, height: 30, stackedBarColor: '#6AA6D6'});
  3091.    });
  3092.    var sparkline_table = [ [1,341], [2,464], [4,564], [5,235], [6,335], [7,535], [8,642], [9,342], [10,765] ];
  3093.    $('.td-graph').each(function(){
  3094.        var arr = $.map( sparkline_table, function(val, index) {
  3095.            return [[val[0], SmallChangeVal([val[1]])]];
  3096.        });
  3097.        $(this).sparkline( arr ,
  3098.            {defaultPixelsPerValue: 10, minSpotColor: null, maxSpotColor: null, spotColor: null,
  3099.            fillColor: false, lineWidth: 2, lineColor: '#5A8DB6'});
  3100.        });
  3101. }
  3102. //
  3103. // Draw Knob Charts for Dashboard (for servers)
  3104. //
  3105. function DrawKnobDashboard(){
  3106.    var srv_monitoring_selectors = [
  3107.        $("#knob-srv-1"),$("#knob-srv-2"),$("#knob-srv-3"),
  3108.        $("#knob-srv-4"),$("#knob-srv-5"),$("#knob-srv-6")
  3109.    ];
  3110.    srv_monitoring_selectors.forEach(DrawKnob);
  3111.    setInterval(function(){
  3112.        srv_monitoring_selectors.forEach(RedrawKnob);
  3113.    }, 3000);
  3114. }
  3115. //
  3116. // Draw Springy graphs (Network map) on Dashboard page
  3117. //
  3118. function SpringyNetmap(){
  3119.    var graph = new Springy.Graph();
  3120.    var core1 = graph.newNode({label: 'Network core 1 (Cisco 3750G-48PS)'});
  3121.    var core2 = graph.newNode({label: 'Network core 2 (Cisco 3750G-48PS)'});
  3122.    var srv1 = graph.newNode({label: 'Server switch 1 (Cisco 3750G-48TS)'});
  3123.    var srv2 = graph.newNode({label: 'Server switch 2 (Cisco 3750G-48TS)'});
  3124.    var pabx1 = graph.newNode({label: 'PABX switch 1 (Cisco 3750G-48TS)'});
  3125.    var pabx2 = graph.newNode({label: 'PABX switch 2 (Cisco 3750G-48TS)'});
  3126.    var router1 = graph.newNode({label: 'Router 1 (Cisco 3945E)'});
  3127.    var router2 = graph.newNode({label: 'Router 2 (Cisco 3945E)'});
  3128.    graph.newEdge(core1, core2, {color: '#00A0B0'});
  3129.    graph.newEdge(core2, core1, {color: '#6A4A3C'});
  3130.    graph.newEdge(core1, srv1, {color: '#CC333F'});
  3131.    graph.newEdge(core2, srv1, {color: '#CC333F'});
  3132.    graph.newEdge(core1, srv2, {color: '#EB6841'});
  3133.    graph.newEdge(core2, srv2, {color: '#EB6841'});
  3134.    graph.newEdge(srv1, srv2, {color: '#EDC951'});
  3135.    graph.newEdge(srv2, srv1, {color: '#EDC951'});
  3136.    graph.newEdge(pabx1, core1, {color: '#7DBE3C'});
  3137.    graph.newEdge(pabx1, core2, {color: '#7DBE3C'});
  3138.    graph.newEdge(pabx2, core1, {color: '#000000'});
  3139.    graph.newEdge(pabx2, core2, {color: '#000000'});
  3140.    graph.newEdge(router1, core1, {color: '#00A0B0'});
  3141.    graph.newEdge(router1, core2, {color: '#00A0B0'});
  3142.    graph.newEdge(router2, core1, {color: '#6A4A3C'});
  3143.    graph.newEdge(router2, core2, {color: '#6A4A3C'});
  3144.    graph.newEdge(pabx1, pabx2, {color: '#CC333F'});
  3145.    graph.newEdge(pabx2, pabx1, {color: '#CC333F'});
  3146.    graph.newEdge(router1, router2, {color: '#EB6841'});
  3147.    graph.newEdge(router2, router1, {color: '#EB6841'});
  3148.    $('#springy-demo').springy({
  3149.        graph: graph,
  3150.        nodeSelected: function(node){
  3151.            console.log('Node selected: ' + JSON.stringify(node.data));
  3152.        }
  3153.    });
  3154. }
  3155. /*-------------------------------------------
  3156.    Function for File upload page (form_file_uploader.html)
  3157. ---------------------------------------------*/
  3158. function FileUpload(){
  3159.    $('#bootstrapped-fine-uploader').fineUploader({
  3160.        template: 'qq-template-bootstrap',
  3161.        classes: {
  3162.            success: 'alert alert-success',
  3163.            fail: 'alert alert-error'
  3164.        },
  3165.        thumbnails: {
  3166.            placeholders: {
  3167.                waitingPath: "assets/waiting-generic.png",
  3168.                notAvailablePath: "assets/not_available-generic.png"
  3169.            }
  3170.        },
  3171.        request: {
  3172.            endpoint: 'server/handleUploads'
  3173.        },
  3174.        validation: {
  3175.            allowedExtensions: ['jpeg', 'jpg', 'gif', 'png']
  3176.        }
  3177.    });
  3178. }
  3179. /*-------------------------------------------
  3180.    Function for OpenStreetMap page (maps.html)
  3181. ---------------------------------------------*/
  3182. //
  3183. // Load GeoIP JSON data and draw 3 maps
  3184. //
  3185. function LoadTestMap(){
  3186.    $.getJSON("https://www.telize.com/geoip?callback=?",
  3187.        function(json) {
  3188.            var osmap = new OpenLayers.Layer.OSM("OpenStreetMap");// create map layer
  3189.            var googlestreets = new OpenLayers.Layer.Google("Google Streets", {numZoomLevels: 22,visibility: false});
  3190.            var googlesattelite = new OpenLayers.Layer.Google( "Google Sattelite", {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22});
  3191.            var map1_layers = [googlestreets,osmap, googlesattelite];
  3192.            // Create map in element with ID - map-1
  3193.            var map1 = drawMap(json.longitude, json.latitude, "map-1", map1_layers);
  3194.            $("#map-1").resize(function(){ setTimeout(map1.updateSize(), 500); });
  3195.            // Create map in element with ID - map-2
  3196.            var osmap1 = new OpenLayers.Layer.OSM("OpenStreetMap");// create map layer
  3197.            var map2_layers = [osmap1];
  3198.            var map2 = drawMap(json.longitude, json.latitude, "map-2", map2_layers);
  3199.            $("#map-2").resize(function(){ setTimeout(map2.updateSize(), 500); });
  3200.            // Create map in element with ID - map-3
  3201.            var sattelite = new OpenLayers.Layer.Google( "Google Sattelite", {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22});
  3202.            var map3_layers = [sattelite];
  3203.            var map3 = drawMap(json.longitude, json.latitude, "map-3", map3_layers);
  3204.            $("#map-3").resize(function(){ setTimeout(map3.updateSize(), 500); });
  3205.        }
  3206.    );
  3207. }
  3208. /*-------------------------------------------
  3209.    Function for Fullscreen Map page (map_fullscreen.html)
  3210. ---------------------------------------------*/
  3211. //
  3212. // Create Fullscreen Map
  3213. //
  3214. function FullScreenMap(){
  3215.    $.getJSON("https://www.telize.com/geoip?callback=?",
  3216.        function(json) {
  3217.            var osmap = new OpenLayers.Layer.OSM("OpenStreetMap");// create map layer
  3218.            var googlestreets = new OpenLayers.Layer.Google("Google Streets", {numZoomLevels: 22,visibility: false});
  3219.            var googlesattelite = new OpenLayers.Layer.Google( "Google Sattelite", {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22});
  3220.            var map1_layers = [googlestreets,osmap, googlesattelite];
  3221.            var map_fs = drawMap(json.longitude, json.latitude, "full-map", map1_layers);
  3222.        }
  3223.    );
  3224. }
  3225. /*-------------------------------------------
  3226.    Function for Fullscreen Leaflet map page (map_leaflet.html)
  3227. ---------------------------------------------*/
  3228. //
  3229. // Create Leaflet Fullscreen Map
  3230. //
  3231. function FullScreenLeafletMap(){
  3232.    $.getJSON("https://www.telize.com/geoip?callback=?",
  3233.        function(json) {
  3234.            var map = L.map('full-map').setView([json.latitude, json.longitude ], 10);
  3235.            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  3236.                attribution: 'Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://mapbox.com">Mapbox</a>',
  3237.                 maxZoom: 18
  3238.             }).addTo(map);
  3239.             var circle = L.circle([json.latitude, json.longitude], 350, {
  3240.                 color: 'red',
  3241.                 fillColor: '#f03',
  3242.                 fillOpacity: 0.5
  3243.             }).addTo(map);
  3244.             circle.bindPopup("<b>Hello!</b><br>May be you here.").openPopup();
  3245.         }
  3246.     );
  3247. }
  3248. /*-------------------------------------------
  3249.     Function for get stock from Yahoo finance to dashboard page
  3250. ---------------------------------------------*/
  3251. //
  3252. // Make stock dashboard page
  3253. //
  3254. function CreateStockPage(){
  3255.     var yqlURL="https://query.yahooapis.com/v1/public/yql?q=";
  3256.     var dataFormat="&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
  3257.     $(function() { //Load jQueryUI DatePicker by class name
  3258.         $( ".datePick" ).datepicker({dateFormat: 'yy-mm-dd'} );
  3259.     });
  3260.     $("#submit").click(function() {
  3261.         var symbol = $("#txtSymbol").val();
  3262.         var startDate=$("#startDate").val();
  3263.         var endDate=$("#endDate").val();
  3264.         var realtimeQ = yqlURL+"select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22" + symbol + "%22)%0A%09%09&"+ dataFormat;
  3265.         var historicalQ = yqlURL+"select%20*%20from%20yahoo.finance.historicaldata%20where%20symbol%20%3D%20%22"+ symbol +"%22%20and%20startDate%20%3D%20%22"+ startDate +"%22%20and%20endDate%20%3D%20%22"+ endDate +"%22"+ dataFormat;
  3266.         $(function() {
  3267.             $.getJSON(realtimeQ, function(json) {//YQL Request
  3268.                 $('#symbol').text(json.query.results.quote.Name);//Assign quote.Param to span tag
  3269.                 $('#bidRealtime').text(json.query.results.quote.BidRealtime);
  3270.             });
  3271.         });
  3272.         $(function() {
  3273.             $.getJSON(historicalQ, function(json) {
  3274.                 $.each(json.query.results.quote, function(i, quote) {//loop results.quote object
  3275.                     $("#date").append('<span>' + quote.Date + '</span');//create span for each record
  3276.                });
  3277.                $.each(json.query.results.quote, function(i, quote) { //new each statement is needed
  3278.                    $("#closeValue").append('<span>' + quote.Close + '</span');
  3279.                });
  3280.            });
  3281.        });
  3282.    });
  3283. }
  3284. /*-------------------------------------------
  3285.    Function for Flickr Gallery page (gallery_flickr.html)
  3286. ---------------------------------------------*/
  3287. //
  3288. // Load data from Flicks, parse and create gallery
  3289. //
  3290. function displayFlickrImages(data){
  3291.    var res;
  3292.    $.each(data.items, function(i,item){
  3293.        if (i >11) { return false;}
  3294.         res = "<a href=" + item.link + " title=" + item.title + " target=\"_blank\"><img alt=" + item.title + " src=" + item.media.m + " /></a>";
  3295.         $('#box-one-content').append(res);
  3296.         });
  3297.         setTimeout(function(){
  3298.             $("#box-one-content").justifiedGallery({
  3299.                 'usedSuffix':'lt240',
  3300.                 'justifyLastRow':true,
  3301.                 'rowHeight':150,
  3302.                 'fixedHeight':false,
  3303.                 'captions':true,
  3304.                 'margins':1
  3305.                 });
  3306.             $('#box-one-content').fadeIn('slow');
  3307.         }, 100);
  3308. }
  3309. /*-------------------------------------------
  3310.     Function for Form Layout page (form layouts.html)
  3311. ---------------------------------------------*/
  3312. //
  3313. // Example form validator function
  3314. //
  3315. function DemoFormValidator(){
  3316.     $('#defaultForm').bootstrapValidator({
  3317.         message: 'This value is not valid',
  3318.         fields: {
  3319.             username: {
  3320.                 message: 'The username is not valid',
  3321.                 validators: {
  3322.                     notEmpty: {
  3323.                         message: 'The username is required and can\'t be empty'
  3324.                     },
  3325.                     stringLength: {
  3326.                         min: 6,
  3327.                         max: 30,
  3328.                         message: 'The username must be more than 6 and less than 30 characters long'
  3329.                     },
  3330.                     regexp: {
  3331.                         regexp: /^[a-zA-Z0-9_\.]+$/,
  3332.                         message: 'The username can only consist of alphabetical, number, dot and underscore'
  3333.                     }
  3334.                 }
  3335.             },
  3336.             country: {
  3337.                 validators: {
  3338.                     notEmpty: {
  3339.                         message: 'The country is required and can\'t be empty'
  3340.                     }
  3341.                 }
  3342.             },
  3343.             acceptTerms: {
  3344.                 validators: {
  3345.                     notEmpty: {
  3346.                         message: 'You have to accept the terms and policies'
  3347.                     }
  3348.                 }
  3349.             },
  3350.             email: {
  3351.                 validators: {
  3352.                     notEmpty: {
  3353.                         message: 'The email address is required and can\'t be empty'
  3354.                     },
  3355.                     emailAddress: {
  3356.                         message: 'The input is not a valid email address'
  3357.                     }
  3358.                 }
  3359.             },
  3360.             website: {
  3361.                 validators: {
  3362.                     uri: {
  3363.                         message: 'The input is not a valid URL'
  3364.                     }
  3365.                 }
  3366.             },
  3367.             phoneNumber: {
  3368.                 validators: {
  3369.                     digits: {
  3370.                         message: 'The value can contain only digits'
  3371.                     }
  3372.                 }
  3373.             },
  3374.             color: {
  3375.                 validators: {
  3376.                     hexColor: {
  3377.                         message: 'The input is not a valid hex color'
  3378.                     }
  3379.                 }
  3380.             },
  3381.             zipCode: {
  3382.                 validators: {
  3383.                     usZipCode: {
  3384.                         message: 'The input is not a valid US zip code'
  3385.                     }
  3386.                 }
  3387.             },
  3388.             password: {
  3389.                 validators: {
  3390.                     notEmpty: {
  3391.                         message: 'The password is required and can\'t be empty'
  3392.                     },
  3393.                     identical: {
  3394.                         field: 'confirmPassword',
  3395.                         message: 'The password and its confirm are not the same'
  3396.                     }
  3397.                 }
  3398.             },
  3399.             confirmPassword: {
  3400.                 validators: {
  3401.                     notEmpty: {
  3402.                         message: 'The confirm password is required and can\'t be empty'
  3403.                     },
  3404.                     identical: {
  3405.                         field: 'password',
  3406.                         message: 'The password and its confirm are not the same'
  3407.                     }
  3408.                 }
  3409.             },
  3410.             ages: {
  3411.                 validators: {
  3412.                     lessThan: {
  3413.                         value: 100,
  3414.                         inclusive: true,
  3415.                         message: 'The ages has to be less than 100'
  3416.                     },
  3417.                     greaterThan: {
  3418.                         value: 10,
  3419.                         inclusive: false,
  3420.                         message: 'The ages has to be greater than or equals to 10'
  3421.                     }
  3422.                 }
  3423.             }
  3424.         }
  3425.     });
  3426. }
  3427. //
  3428. // Function for Dynamically Change input size on Form Layout page
  3429. //
  3430. function FormLayoutExampleInputLength(selector){
  3431.     var steps = [
  3432.         "col-sm-1",
  3433.         "col-sm-2",
  3434.         "col-sm-3",
  3435.         "col-sm-4",
  3436.         "col-sm-5",
  3437.         "col-sm-6",
  3438.         "col-sm-7",
  3439.         "col-sm-8",
  3440.         "col-sm-9",
  3441.         "col-sm-10",
  3442.         "col-sm-11",
  3443.         "col-sm-12"
  3444.     ];
  3445.     selector.slider({
  3446.        range: 'min',
  3447.         value: 1,
  3448.         min: 0,
  3449.         max: 11,
  3450.         step: 1,
  3451.         slide: function(event, ui) {
  3452.             if (ui.value < 1) {
  3453.                return false;
  3454.            }
  3455.            var input = $("#form-styles");
  3456.            var f = input.parent();
  3457.            f.removeClass();
  3458.            f.addClass(steps[ui.value]);
  3459.            input.attr("placeholder",'.'+steps[ui.value]);
  3460.        }
  3461.    });
  3462. }
  3463. /*-------------------------------------------
  3464.    Functions for Progressbar page (ui_progressbars.html)
  3465. ---------------------------------------------*/
  3466. //
  3467. // Function for Knob clock
  3468. //
  3469. function RunClock() {
  3470.    var second = $(".second");
  3471.    var minute = $(".minute");
  3472.    var hour = $(".hour");
  3473.    var d = new Date();
  3474.    var s = d.getSeconds();
  3475.    var m = d.getMinutes();
  3476.    var h = d.getHours();
  3477.    if (h > 11) {h = h-12;}
  3478.         $('#knob-clock-value').html(h+':'+m+':'+s);
  3479.         second.val(s).trigger("change");
  3480.         minute.val(m).trigger("change");
  3481.         hour.val(h).trigger("change");
  3482. }
  3483. //
  3484. // Function for create test sliders on Progressbar page
  3485. //
  3486. function CreateAllSliders(){
  3487.     $(".slider-default").slider();
  3488.     var slider_range_min_amount = $(".slider-range-min-amount");
  3489.     var slider_range_min = $(".slider-range-min");
  3490.     var slider_range_max = $(".slider-range-max");
  3491.     var slider_range_max_amount = $(".slider-range-max-amount");
  3492.     var slider_range = $(".slider-range");
  3493.     var slider_range_amount = $(".slider-range-amount");
  3494.     slider_range_min.slider({
  3495.         range: "min",
  3496.         value: 37,
  3497.         min: 1,
  3498.         max: 700,
  3499.         slide: function( event, ui ) {
  3500.             slider_range_min_amount.val( "$" + ui.value );
  3501.         }
  3502.     });
  3503.     slider_range_min_amount.val("$" + slider_range_min.slider( "value" ));
  3504.     slider_range_max.slider({
  3505.         range: "max",
  3506.         min: 1,
  3507.         max: 100,
  3508.         value: 2,
  3509.         slide: function( event, ui ) {
  3510.             slider_range_max_amount.val( ui.value );
  3511.         }
  3512.     });
  3513.     slider_range_max_amount.val(slider_range_max.slider( "value" ));
  3514.     slider_range.slider({
  3515.         range: true,
  3516.         min: 0,
  3517.         max: 500,
  3518.         values: [ 75, 300 ],
  3519.         slide: function( event, ui ) {
  3520.             slider_range_amount.val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
  3521.         }
  3522.     });
  3523.     slider_range_amount.val( "$" + slider_range.slider( "values", 0 ) +
  3524.       " - $" + slider_range.slider( "values", 1 ) );
  3525.     $( "#equalizer > div.progress > div" ).each(function() {
  3526.         // read initial values from markup and remove that
  3527.         var value = parseInt( $( this ).text(), 10 );
  3528.         $( this ).empty().slider({
  3529.             value: value,
  3530.             range: "min",
  3531.             animate: true,
  3532.             orientation: "vertical"
  3533.         });
  3534.     });
  3535. }
  3536. /*-------------------------------------------
  3537.     Function for jQuery-UI page (ui_jquery-ui.html)
  3538. ---------------------------------------------*/
  3539. //
  3540. // Function for make all Date-Time pickers on page
  3541. //
  3542. function AllTimePickers(){
  3543.     $('#datetime_example').datetimepicker({});
  3544.     $('#time_example').timepicker({
  3545.         hourGrid: 4,
  3546.         minuteGrid: 10,
  3547.         timeFormat: 'hh:mm tt'
  3548.     });
  3549.     $('#date3_example').datepicker({ numberOfMonths: 3, showButtonPanel: true});
  3550.     $('#date3-1_example').datepicker({ numberOfMonths: 3, showButtonPanel: true});
  3551.     $('#date_example').datepicker({});
  3552. }
  3553. /*-------------------------------------------
  3554.     Function for Calendar page (calendar.html)
  3555. ---------------------------------------------*/
  3556. //
  3557. // Example form validator function
  3558. //
  3559. function DrawCalendar(){
  3560.     /* initialize the external events
  3561.     -----------------------------------------------------------------*/
  3562.     $('#external-events div.external-event').each(function() {
  3563.         // create an Event Object (https://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
  3564.         var eventObject = {
  3565.             title: $.trim($(this).text()) // use the element's text as the event title
  3566.         };
  3567.         // store the Event Object in the DOM element so we can get to it later
  3568.         $(this).data('eventObject', eventObject);
  3569.         // make the event draggable using jQuery UI
  3570.         $(this).draggable({
  3571.             zIndex: 999,
  3572.             revert: true,      // will cause the event to go back to its
  3573.             revertDuration: 0  //  original position after the drag
  3574.         });
  3575.     });
  3576.     /* initialize the calendar
  3577.     -----------------------------------------------------------------*/
  3578.     var calendar = $('#calendar').fullCalendar({
  3579.         header: {
  3580.             left: 'prev,next today',
  3581.             center: 'title',
  3582.             right: 'month,agendaWeek,agendaDay'
  3583.         },
  3584.         selectable: true,
  3585.         selectHelper: true,
  3586.         select: function(start, end, allDay) {
  3587.             var form = $('<form id="event_form">'+
  3588.                 '<div class="form-group has-success has-feedback">'+
  3589.                 '<label">Event name</label>'+
  3590.                 '<div>'+
  3591.                 '<input type="text" id="newevent_name" class="form-control" placeholder="Name of event">'+
  3592.                 '</div>'+
  3593.                 '<label>Description</label>'+
  3594.                 '<div>'+
  3595.                 '<textarea rows="3" id="newevent_desc" class="form-control" placeholder="Description"></textarea>'+
  3596.                 '</div>'+
  3597.                 '</div>'+
  3598.                 '</form>');
  3599.             var buttons = $('<button id="event_cancel" type="cancel" class="btn btn-default btn-label-left">'+
  3600.                             '<span><i class="fa fa-clock-o txt-danger"></i></span>'+
  3601.                             'Cancel'+
  3602.                             '</button>'+
  3603.                             '<button type="submit" id="event_submit" class="btn btn-primary btn-label-left pull-right">'+
  3604.                             '<span><i class="fa fa-clock-o"></i></span>'+
  3605.                             'Add'+
  3606.                             '</button>');
  3607.             OpenModalBox('Add event', form, buttons);
  3608.             $('#event_cancel').on('click', function(){
  3609.                 CloseModalBox();
  3610.             });
  3611.             $('#event_submit').on('click', function(){
  3612.                 var new_event_name = $('#newevent_name').val();
  3613.                 if (new_event_name != ''){
  3614.                     calendar.fullCalendar('renderEvent',
  3615.                         {
  3616.                             title: new_event_name,
  3617.                             description: $('#newevent_desc').val(),
  3618.                             start: start,
  3619.                             end: end,
  3620.                             allDay: allDay
  3621.                         },
  3622.                         true // make the event "stick"
  3623.                     );
  3624.                 }
  3625.                 CloseModalBox();
  3626.             });
  3627.             calendar.fullCalendar('unselect');
  3628.         },
  3629.         editable: true,
  3630.         droppable: true, // this allows things to be dropped onto the calendar !!!
  3631.         drop: function(date, allDay) { // this function is called when something is dropped
  3632.             // retrieve the dropped element's stored Event Object
  3633.             var originalEventObject = $(this).data('eventObject');
  3634.             // we need to copy it, so that multiple events don't have a reference to the same object
  3635.             var copiedEventObject = $.extend({}, originalEventObject);
  3636.             // assign it the date that was reported
  3637.             copiedEventObject.start = date;
  3638.             copiedEventObject.allDay = allDay;
  3639.             // render the event on the calendar
  3640.             // the last `true` argument determines if the event "sticks" (https://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
  3641.             $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
  3642.             // is the "remove after drop" checkbox checked?
  3643.             if ($('#drop-remove').is(':checked')) {
  3644.                 // if so, remove the element from the "Draggable Events" list
  3645.                 $(this).remove();
  3646.             }
  3647.         },
  3648.         eventRender: function (event, element, icon) {
  3649.             if (event.description != "") {
  3650.                 element.attr('title', event.description);
  3651.             }
  3652.         },
  3653.         eventClick: function(calEvent, jsEvent, view) {
  3654.             var form = $('<form id="event_form">'+
  3655.                 '<div class="form-group has-success has-feedback">'+
  3656.                 '<label">Event name</label>'+
  3657.                 '<div>'+
  3658.                 '<input type="text" id="newevent_name" value="'+ calEvent.title +'" class="form-control" placeholder="Name of event">'+
  3659.                 '</div>'+
  3660.                 '<label>Description</label>'+
  3661.                 '<div>'+
  3662.                 '<textarea rows="3" id="newevent_desc" class="form-control" placeholder="Description">'+ calEvent.description +'</textarea>'+
  3663.                 '</div>'+
  3664.                 '</div>'+
  3665.                 '</form>');
  3666.             var buttons = $('<button id="event_cancel" type="cancel" class="btn btn-default btn-label-left">'+
  3667.                             '<span><i class="fa fa-clock-o txt-danger"></i></span>'+
  3668.                             'Cancel'+
  3669.                             '</button>'+
  3670.                             '<button id="event_delete" type="cancel" class="btn btn-danger btn-label-left">'+
  3671.                             '<span><i class="fa fa-clock-o txt-danger"></i></span>'+
  3672.                             'Delete'+
  3673.                             '</button>'+
  3674.                             '<button type="submit" id="event_change" class="btn btn-primary btn-label-left pull-right">'+
  3675.                             '<span><i class="fa fa-clock-o"></i></span>'+
  3676.                             'Save changes'+
  3677.                             '</button>');
  3678.             OpenModalBox('Change event', form, buttons);
  3679.             $('#event_cancel').on('click', function(){
  3680.                 CloseModalBox();
  3681.             });
  3682.             $('#event_delete').on('click', function(){
  3683.                 calendar.fullCalendar('removeEvents' , function(ev){
  3684.                     return (ev._id == calEvent._id);
  3685.                 });
  3686.                 CloseModalBox();
  3687.             });
  3688.             $('#event_change').on('click', function(){
  3689.                 calEvent.title = $('#newevent_name').val();
  3690.                 calEvent.description = $('#newevent_desc').val();
  3691.                 calendar.fullCalendar('updateEvent', calEvent);
  3692.                 CloseModalBox()
  3693.             });
  3694.         }
  3695.         });
  3696.         $('#new-event-add').on('click', function(event){
  3697.             event.preventDefault();
  3698.             var event_name = $('#new-event-title').val();
  3699.             var event_description = $('#new-event-desc').val();
  3700.             if (event_name != ''){
  3701.             var event_template = $('<div class="external-event" data-description="'+event_description+'">'+event_name+'</div>');
  3702.             $('#events-templates-header').after(event_template);
  3703.             var eventObject = {
  3704.                 title: event_name,
  3705.                 description: event_description
  3706.             };
  3707.             // store the Event Object in the DOM element so we can get to it later
  3708.             event_template.data('eventObject', eventObject);
  3709.             event_template.draggable({
  3710.                 zIndex: 999,
  3711.                 revert: true,
  3712.                 revertDuration: 0
  3713.             });
  3714.             }
  3715.         });
  3716. }
  3717. //
  3718. // Load scripts and draw Calendar
  3719. //
  3720. function DrawFullCalendar(){
  3721.     LoadCalendarScript(DrawCalendar);
  3722. }
  3723. //////////////////////////////////////////////////////
  3724. //////////////////////////////////////////////////////
  3725. //
  3726. //      MAIN DOCUMENT READY SCRIPT OF DEVOOPS THEME
  3727. //
  3728. //      In this script main logic of theme
  3729. //
  3730. //////////////////////////////////////////////////////
  3731. //////////////////////////////////////////////////////
  3732. $(document).ready(function () {
  3733.  
  3734.     // Event handlers
  3735.     $('body').on('click', '.show-sidebar', function (e) {
  3736.         e.preventDefault();
  3737.         $('div#main').toggleClass('sidebar-show');
  3738.         setTimeout(MessagesMenuWidth, 250);
  3739.     });
  3740.    
  3741.     // LOAD CONTENT
  3742.     var ajax_url = location.hash.replace(/^#/, '');
  3743.     if (ajax_url.length < 1) {
  3744.        ajax_url = 'ajax/dashboard.html';
  3745.    }
  3746.    LoadAjaxContent(ajax_url);
  3747.    
  3748.    // Event handlers
  3749.    $('.main-menu').on('click', 'a', function (e) {
  3750.        var parents = $(this).parents('li');
  3751.        var li = $(this).closest('li.dropdown');
  3752.        var another_items = $('.main-menu li').not(parents);
  3753.        another_items.find('a').removeClass('active');
  3754.        another_items.find('a').removeClass('active-parent');
  3755.        if ($(this).hasClass('dropdown-toggle') || $(this).closest('li').find('ul').length == 0) {
  3756.            $(this).addClass('active-parent');
  3757.            var current = $(this).next();
  3758.            if (current.is(':visible')) {
  3759.                li.find("ul.dropdown-menu").slideUp('fast');
  3760.                li.find("ul.dropdown-menu a").removeClass('active')
  3761.            }
  3762.            else {
  3763.                another_items.find("ul.dropdown-menu").slideUp('fast');
  3764.                current.slideDown('fast');
  3765.            }
  3766.        }
  3767.        else {
  3768.            if (li.find('a.dropdown-toggle').hasClass('active-parent')) {
  3769.                var pre = $(this).closest('ul.dropdown-menu');
  3770.                pre.find("li.dropdown").not($(this).closest('li')).find('ul.dropdown-menu').slideUp('fast');
  3771.            }
  3772.        }
  3773.        if ($(this).hasClass('active') == false) {
  3774.            $(this).parents("ul.dropdown-menu").find('a').removeClass('active');
  3775.            $(this).addClass('active')
  3776.        }
  3777.        if ($(this).hasClass('ajax-link')) {
  3778.            e.preventDefault();
  3779.            if ($(this).hasClass('add-full')) {
  3780.                $('#content').addClass('full-content');
  3781.            }
  3782.            else {
  3783.                $('#content').removeClass('full-content');
  3784.            }
  3785.            var url = $(this).attr('href');
  3786.            //window.location.hash = url;
  3787.            LoadAjaxContent(url);
  3788.        }
  3789.        if ($(this).attr('href') == '#') {
  3790.            e.preventDefault();
  3791.        }
  3792.    });
  3793.    var height = window.innerHeight - 49;
  3794.    $('#main').css('min-height', height)
  3795.        .on('click', '.expand-link', function (e) {
  3796.            var body = $('body');
  3797.            e.preventDefault();
  3798.            var box = $(this).closest('div.box');
  3799.            var button = $(this).find('i');
  3800.            button.toggleClass('fa-expand').toggleClass('fa-compress');
  3801.            box.toggleClass('expanded');
  3802.            body.toggleClass('body-expanded');
  3803.            var timeout = 0;
  3804.            if (body.hasClass('body-expanded')) {
  3805.                timeout = 100;
  3806.            }
  3807.            setTimeout(function () {
  3808.                box.toggleClass('expanded-padding');
  3809.            }, timeout);
  3810.            setTimeout(function () {
  3811.                box.resize();
  3812.                box.find('[id^=map-]').resize();
  3813.            }, timeout + 50);
  3814.        })
  3815.        .on('click', '.collapse-link', function (e) {
  3816.            e.preventDefault();
  3817.            var box = $(this).closest('div.box');
  3818.            var button = $(this).find('i');
  3819.            var content = box.find('div.box-content');
  3820.            content.slideToggle('fast');
  3821.            button.toggleClass('fa-chevron-up').toggleClass('fa-chevron-down');
  3822.            setTimeout(function () {
  3823.                box.resize();
  3824.                box.find('[id^=map-]').resize();
  3825.            }, 50);
  3826.        })
  3827.        .on('click', '.close-link', function (e) {
  3828.            e.preventDefault();
  3829.            var content = $(this).closest('div.box');
  3830.            content.remove();
  3831.        });
  3832.    $('#locked-screen').on('click', function (e) {
  3833.        e.preventDefault();
  3834.        $('body').addClass('body-screensaver');
  3835.        $('#screensaver').addClass("show");
  3836.        ScreenSaver();
  3837.    });
  3838.    $('body').on('click', 'a.close-link', function(e){
  3839.        e.preventDefault();
  3840.        CloseModalBox();
  3841.    });
  3842.    $('#top-panel').on('click','a', function(e){
  3843.        if ($(this).hasClass('ajax-link')) {
  3844.            e.preventDefault();
  3845.            if ($(this).hasClass('add-full')) {
  3846.                $('#content').addClass('full-content');
  3847.            }
  3848.            else {
  3849.                $('#content').removeClass('full-content');
  3850.            }
  3851.            var url = $(this).attr('href');
  3852.            window.location.hash = url;
  3853.            LoadAjaxContent(url);
  3854.        }
  3855.    });
  3856.    $('#search').on('keydown', function(e){
  3857.        if (e.keyCode == 13){
  3858.            e.preventDefault();
  3859.            $('#content').removeClass('full-content');
  3860.            ajax_url = 'ajax/page_search.html';
  3861.            window.location.hash = ajax_url;
  3862.            LoadAjaxContent(ajax_url);
  3863.        }
  3864.    });
  3865.    $('#screen_unlock').on('mouseover', function(){
  3866.        var header = 'Enter current username and password';
  3867.        var form = $('<div class="form-group"><label class="control-label">Username</label><input type="text" class="form-control" name="username" /></div>'+
  3868.                     '<div class="form-group"><label class="control-label">Password</label><input type="password" class="form-control" name="password" /></div>');
  3869.         var button = $('<div class="text-center"><a href="index.html" class="btn btn-primary">Unlock</a></div>');
  3870.         OpenModalBox(header, form, button);
  3871.     });
  3872.     $('.about').on('click', function(){
  3873.         $('#about').toggleClass('about-h');
  3874.     })
  3875.     $('#about').on('mouseleave', function(){
  3876.         $('#about').removeClass('about-h');
  3877.     })
  3878. });
  3879. </script>
  3880.  
  3881. </body>
  3882. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!