type = ['', 'info', 'success', 'warning', 'danger'];

demo = {
  initCirclePercentage: function () {
    $('#chartDashboard, #chartOrders, #chartNewVisitors, #chartSubscriptions, #chartDashboardDoc, #chartOrdersDoc').easyPieChart({
      lineWidth: 6,
      size: 160,
      scaleColor: false,
      trackColor: 'rgba(255,255,255,.25)',
      barColor: '#FFFFFF',
      animate: { duration: 5000, enabled: true },
    });
  },

  initGoogleMaps: function () {
    // Satellite Map
    var myLatlng = new google.maps.LatLng(40.748817, -73.985428);
    var mapOptions = {
      zoom: 3,
      scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.SATELLITE,
    };

    var map = new google.maps.Map(document.getElementById('satelliteMap'), mapOptions);

    var marker = new google.maps.Marker({
      position: myLatlng,
      title: 'Satellite Map!',
    });

    marker.setMap(map);
  },

  initSmallGoogleMaps: function () {
    // Regular Map
    var myLatlng = new google.maps.LatLng(40.748817, -73.985428);
    var mapOptions = {
      zoom: 8,
      center: myLatlng,
      scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page
    };

    var map = new google.maps.Map(document.getElementById('regularMap'), mapOptions);

    var marker = new google.maps.Marker({
      position: myLatlng,
      title: 'Regular Map!',
    });

    marker.setMap(map);

    // Custom Skin & Settings Map
    var myLatlng = new google.maps.LatLng(40.748817, -73.985428);
    var mapOptions = {
      zoom: 13,
      center: myLatlng,
      scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page
      disableDefaultUI: true, // a way to quickly hide all controls
      zoomControl: true,
      styles: [
        { featureType: 'water', stylers: [{ saturation: 43 }, { lightness: -11 }, { hue: '#0088ff' }] },
        { featureType: 'road', elementType: 'geometry.fill', stylers: [{ hue: '#ff0000' }, { saturation: -100 }, { lightness: 99 }] },
        { featureType: 'road', elementType: 'geometry.stroke', stylers: [{ color: '#808080' }, { lightness: 54 }] },
        { featureType: 'landscape.man_made', elementType: 'geometry.fill', stylers: [{ color: '#ece2d9' }] },
        { featureType: 'poi.park', elementType: 'geometry.fill', stylers: [{ color: '#ccdca1' }] },
        { featureType: 'road', elementType: 'labels.text.fill', stylers: [{ color: '#767676' }] },
        { featureType: 'road', elementType: 'labels.text.stroke', stylers: [{ color: '#ffffff' }] },
        { featureType: 'poi', stylers: [{ visibility: 'off' }] },
        { featureType: 'landscape.natural', elementType: 'geometry.fill', stylers: [{ visibility: 'on' }, { color: '#b8cb93' }] },
        { featureType: 'poi.park', stylers: [{ visibility: 'on' }] },
        { featureType: 'poi.sports_complex', stylers: [{ visibility: 'on' }] },
        { featureType: 'poi.medical', stylers: [{ visibility: 'on' }] },
        { featureType: 'poi.business', stylers: [{ visibility: 'simplified' }] },
      ],
    };

    var map = new google.maps.Map(document.getElementById('customSkinMap'), mapOptions);

    var marker = new google.maps.Marker({
      position: myLatlng,
      title: 'Custom Skin & Settings Map!',
    });

    marker.setMap(map);
  },

  initVectorMap: function () {
    var mapData = {
      AU: 760,
      BR: 550,
      CA: 120,
      DE: 1300,
      FR: 540,
      GB: 690,
      GE: 200,
      IN: 200,
      RO: 600,
      RU: 300,
      US: 2920,
    };

    $('#worldMap').vectorMap({
      map: 'world_mill_en',
      backgroundColor: 'transparent',
      zoomOnScroll: false,
      regionStyle: {
        initial: {
          fill: '#e4e4e4',
          'fill-opacity': 0.9,
          stroke: 'none',
          'stroke-width': 0,
          'stroke-opacity': 0,
        },
      },

      series: {
        regions: [
          {
            values: mapData,
            scale: ['#AAAAAA', '#444444'],
            normalizeFunction: 'polynomial',
          },
        ],
      },
    });
  },

  initFullScreenGoogleMap: function () {
    var myLatlng = new google.maps.LatLng(40.748817, -73.985428);
    var mapOptions = {
      zoom: 13,
      center: myLatlng,
      scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page
      styles: [
        { featureType: 'water', stylers: [{ saturation: 43 }, { lightness: -11 }, { hue: '#0088ff' }] },
        { featureType: 'road', elementType: 'geometry.fill', stylers: [{ hue: '#ff0000' }, { saturation: -100 }, { lightness: 99 }] },
        { featureType: 'road', elementType: 'geometry.stroke', stylers: [{ color: '#808080' }, { lightness: 54 }] },
        { featureType: 'landscape.man_made', elementType: 'geometry.fill', stylers: [{ color: '#ece2d9' }] },
        { featureType: 'poi.park', elementType: 'geometry.fill', stylers: [{ color: '#ccdca1' }] },
        { featureType: 'road', elementType: 'labels.text.fill', stylers: [{ color: '#767676' }] },
        { featureType: 'road', elementType: 'labels.text.stroke', stylers: [{ color: '#ffffff' }] },
        { featureType: 'poi', stylers: [{ visibility: 'off' }] },
        { featureType: 'landscape.natural', elementType: 'geometry.fill', stylers: [{ visibility: 'on' }, { color: '#b8cb93' }] },
        { featureType: 'poi.park', stylers: [{ visibility: 'on' }] },
        { featureType: 'poi.sports_complex', stylers: [{ visibility: 'on' }] },
        { featureType: 'poi.medical', stylers: [{ visibility: 'on' }] },
        { featureType: 'poi.business', stylers: [{ visibility: 'simplified' }] },
      ],
    };
    var map = new google.maps.Map(document.getElementById('map'), mapOptions);

    var marker = new google.maps.Marker({
      position: myLatlng,
      title: 'Hello World!',
    });

    // To add the marker to the map, call setMap();
    marker.setMap(map);
  },

  initOverviewDashboardDoc: function () {
    /*  **************** Chart Total Earnings - single line ******************** */

    var dataPrice = {
      labels: ['Jan', 'Feb', 'Mar', 'April', 'May', 'June'],
      series: [[230, 340, 400, 300, 570, 500, 800]],
    };

    var optionsPrice = {
      showPoint: false,
      lineSmooth: true,
      height: '210px',
      axisX: {
        showGrid: false,
        showLabel: true,
      },
      axisY: {
        offset: 40,
        showGrid: false,
      },
      low: 0,
      high: 'auto',
      classNames: {
        line: 'ct-line ct-green',
      },
    };

    Chartist.Line('#chartTotalEarningsDoc', dataPrice, optionsPrice);

    /*  **************** Chart Subscriptions - single line ******************** */

    var dataDays = {
      labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
      series: [[60, 50, 30, 50, 70, 60, 90, 100]],
    };

    var optionsDays = {
      showPoint: false,
      lineSmooth: true,
      height: '210px',
      axisX: {
        showGrid: false,
        showLabel: true,
      },
      axisY: {
        offset: 40,
        showGrid: false,
      },
      low: 0,
      high: 'auto',
      classNames: {
        line: 'ct-line ct-red',
      },
    };

    Chartist.Line('#chartTotalSubscriptionsDoc', dataDays, optionsDays);
  },

  initOverviewDashboard: function () {
    /*  **************** Chart Total Earnings - single line ******************** */

    var dataPrice = {
      labels: ['Jan', 'Feb', 'Mar', 'April', 'May', 'June'],
      series: [[230, 340, 400, 300, 570, 500, 800]],
    };

    var optionsPrice = {
      showPoint: false,
      lineSmooth: true,
      height: '210px',
      axisX: {
        showGrid: false,
        showLabel: true,
      },
      axisY: {
        offset: 40,
        showGrid: false,
      },
      low: 0,
      high: 'auto',
      classNames: {
        line: 'ct-line ct-green',
      },
    };

    Chartist.Line('#chartTotalEarnings', dataPrice, optionsPrice);

    /*  **************** Chart Subscriptions - single line ******************** */

    var dataDays = {
      labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
      series: [[60, 50, 30, 50, 70, 60, 90, 100]],
    };

    var optionsDays = {
      showPoint: false,
      lineSmooth: true,
      height: '210px',
      axisX: {
        showGrid: false,
        showLabel: true,
      },
      axisY: {
        offset: 40,
        showGrid: false,
      },
      low: 0,
      high: 'auto',
      classNames: {
        line: 'ct-line ct-red',
      },
    };

    Chartist.Line('#chartTotalSubscriptions', dataDays, optionsDays);

    /*  **************** Chart Total Downloads - single line ******************** */

    var dataDownloads = {
      labels: ['2009', '2010', '2011', '2012', '2013', '2014'],
      series: [[1200, 1000, 3490, 8345, 3256, 2566]],
    };

    var optionsDownloads = {
      showPoint: false,
      lineSmooth: true,
      height: '210px',
      axisX: {
        showGrid: false,
        showLabel: true,
      },
      axisY: {
        offset: 40,
        showGrid: false,
      },
      low: 0,
      high: 'auto',
      classNames: {
        line: 'ct-line ct-orange',
      },
    };

    Chartist.Line('#chartTotalDownloads', dataDownloads, optionsDownloads);
  },

  initStatsDashboard: function () {
    var dataSales = {
      labels: ['9:00AM', '12:00AM', '3:00PM', '6:00PM', '9:00PM', '12:00PM', '3:00AM', '6:00AM'],
      series: [
        [287, 385, 490, 562, 594, 626, 698, 895, 952],
        [67, 152, 193, 240, 387, 435, 535, 642, 744],
        [23, 113, 67, 108, 190, 239, 307, 410, 410],
      ],
    };

    var optionsSales = {
      lineSmooth: false,
      low: 0,
      high: 1000,
      showArea: true,
      height: '245px',
      axisX: {
        showGrid: false,
      },
      lineSmooth: Chartist.Interpolation.simple({
        divisor: 3,
      }),
      showLine: true,
      showPoint: false,
    };

    var responsiveSales = [
      [
        'screen and (max-width: 640px)',
        {
          axisX: {
            labelInterpolationFnc: function (value) {
              return value[0];
            },
          },
        },
      ],
    ];

    Chartist.Line('#chartHours', dataSales, optionsSales, responsiveSales);

    var data = {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      series: [
        [542, 543, 520, 680, 653, 753, 326, 434, 568, 610, 756, 895],
        [230, 293, 380, 480, 503, 553, 600, 664, 698, 710, 736, 795],
      ],
    };

    var options = {
      seriesBarDistance: 10,
      axisX: {
        showGrid: false,
      },
      height: '245px',
    };

    var responsiveOptions = [
      [
        'screen and (max-width: 640px)',
        {
          seriesBarDistance: 5,
          axisX: {
            labelInterpolationFnc: function (value) {
              return value[0];
            },
          },
        },
      ],
    ];

    Chartist.Line('#chartActivity', data, options, responsiveOptions);

    Chartist.Pie('#chartPreferences', {
      labels: ['62%', '32%', '6%'],
      series: [62, 32, 6],
    });
  },

  initChartsPage: function () {
    /*  **************** 24 Hours Performance - single line ******************** */

    var dataPerformance = {
      labels: ['6pm', '9pm', '11pm', '2am', '4am', '8am', '2pm', '5pm', '8pm', '11pm', '4am'],
      series: [[1, 6, 8, 7, 4, 7, 8, 12, 16, 17, 14, 13]],
    };

    var optionsPerformance = {
      showPoint: false,
      lineSmooth: true,
      height: '200px',
      axisX: {
        showGrid: false,
        showLabel: true,
      },
      axisY: {
        offset: 40,
      },
      low: 0,
      high: 16,
      height: '250px',
    };

    Chartist.Line('#chartPerformance', dataPerformance, optionsPerformance);

    /*   **************** 2014 Sales - Bar Chart ********************    */

    var data = {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      series: [
        [542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895],
        [412, 243, 280, 580, 453, 353, 300, 364, 368, 410, 636, 695],
      ],
    };

    var options = {
      seriesBarDistance: 10,
      axisX: {
        showGrid: false,
      },
      height: '250px',
    };

    var responsiveOptions = [
      [
        'screen and (max-width: 640px)',
        {
          seriesBarDistance: 5,
          axisX: {
            labelInterpolationFnc: function (value) {
              return value[0];
            },
          },
        },
      ],
    ];

    Chartist.Bar('#chartActivity', data, options, responsiveOptions);

    /*  **************** NASDAQ: AAPL - single line with points ******************** */

    var dataStock = {
      labels: ["'07", "'08", "'09", "'10", "'11", "'12", "'13", "'14", "'15"],
      series: [[22.2, 34.9, 42.28, 51.93, 62.21, 80.23, 62.21, 82.12, 102.5, 107.23]],
    };

    var optionsStock = {
      lineSmooth: false,
      height: '200px',
      axisY: {
        offset: 40,
        labelInterpolationFnc: function (value) {
          return '$' + value;
        },
      },
      low: 10,
      height: '250px',
      high: 110,
      classNames: {
        point: 'ct-point ct-green',
        line: 'ct-line ct-green',
      },
    };

    Chartist.Line('#chartStock', dataStock, optionsStock);

    /*  **************** Views  - barchart ******************** */

    var dataViews = {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      series: [[542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895]],
    };

    var optionsViews = {
      seriesBarDistance: 10,
      classNames: {
        bar: 'ct-bar',
      },
      axisX: {
        showGrid: false,
      },
      height: '250px',
    };

    var responsiveOptionsViews = [
      [
        'screen and (max-width: 640px)',
        {
          seriesBarDistance: 5,
          axisX: {
            labelInterpolationFnc: function (value) {
              return value[0];
            },
          },
        },
      ],
    ];

    Chartist.Bar('#chartViews', dataViews, optionsViews, responsiveOptionsViews);
  },

  showSwal: function (type) {
    if (type == 'basic') {
      swal({
        title: "Here's a message!",
        buttonsStyling: false,
        confirmButtonClass: 'btn btn-success btn-fill',
      });
    } else if (type == 'title-and-text') {
      swal({
        title: "Here's a message!",
        text: "It's pretty, isn't it?",
        buttonsStyling: false,
        confirmButtonClass: 'btn btn-info btn-fill',
      });
    } else if (type == 'success-message') {
      swal({
        title: 'Good job!',
        text: 'You clicked the button!',
        buttonsStyling: false,
        confirmButtonClass: 'btn btn-success btn-fill',
        type: 'success',
      });
    } else if (type == 'warning-message-and-confirmation') {
      swal({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        type: 'warning',
        showCancelButton: true,
        confirmButtonClass: 'btn btn-success btn-fill',
        cancelButtonClass: 'btn btn-danger btn-fill',
        confirmButtonText: 'Yes, delete it!',
        buttonsStyling: false,
      }).then(function () {
        swal({
          title: 'Deleted!',
          text: 'Your file has been deleted.',
          type: 'success',
          confirmButtonClass: 'btn btn-success btn-fill',
          buttonsStyling: false,
        });
      });
    } else if (type == 'warning-message-and-cancel') {
      swal({
        title: 'Are you sure?',
        text: 'You will not be able to recover this imaginary file!',
        type: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Yes, delete it!',
        cancelButtonText: 'No, keep it',
        confirmButtonClass: 'btn btn-success btn-fill',
        cancelButtonClass: 'btn btn-danger btn-fill',
        buttonsStyling: false,
      }).then(
        function () {
          swal({
            title: 'Deleted!',
            text: 'Your imaginary file has been deleted.',
            type: 'success',
            confirmButtonClass: 'btn btn-success btn-fill',
            buttonsStyling: false,
          });
        },
        function (dismiss) {
          // dismiss can be 'overlay', 'cancel', 'close', 'esc', 'timer'
          if (dismiss === 'cancel') {
            swal({
              title: 'Cancelled',
              text: 'Your imaginary file is safe :)',
              type: 'error',
              confirmButtonClass: 'btn btn-info btn-fill',
              buttonsStyling: false,
            });
          }
        }
      );
    } else if (type == 'custom-html') {
      swal({
        title: 'HTML example',
        buttonsStyling: false,
        confirmButtonClass: 'btn btn-success btn-fill',
        html: 'You can use <b>bold text</b>, ' + '<a href="http://github.com">links</a> ' + 'and other HTML tags',
      });
    } else if (type == 'auto-close') {
      swal({ title: 'Auto close alert!', text: 'I will close in 2 seconds.', timer: 2000, showConfirmButton: false });
    } else if (type == 'input-field') {
      swal({
        title: 'Input something',
        html: '<div class="form-group">' + '<input id="input-field" type="text" class="form-control" />' + '</div>',
        showCancelButton: true,
        confirmButtonClass: 'btn btn-success btn-fill',
        cancelButtonClass: 'btn btn-danger btn-fill',
        buttonsStyling: false,
      })
        .then(function (result) {
          swal({
            type: 'success',
            html: 'You entered: <strong>' + $('#input-field').val() + '</strong>',
            confirmButtonClass: 'btn btn-success btn-fill',
            buttonsStyling: false,
          });
        })
        .catch(swal.noop);
    }
  },

  checkFullPageBackgroundImage: function () {
    $page = $('.full-page');
    image_src = $page.data('image');

    if (image_src !== undefined) {
      image_container = '<div class="full-page-background" style="background-image: url(' + image_src + ') "/>';
      $page.append(image_container);
    }
  },

  initWizard: function () {
    $(document).ready(function () {
      var $validator = $('#wizardForm').validate({
        rules: {
          email: {
            required: true,
            email: true,
            minlength: 5,
          },
          first_name: {
            required: false,
            minlength: 5,
          },
          last_name: {
            required: false,
            minlength: 5,
          },
          website: {
            required: true,
            minlength: 5,
            url: true,
          },
          framework: {
            required: false,
            minlength: 4,
          },
          cities: {
            required: true,
          },
          price: {
            number: true,
          },
        },
      });

      // you can also use the nav-pills-[blue | azure | green | orange | red] for a different color of wizard
      $('#wizardCard').bootstrapWizard({
        tabClass: 'nav nav-pills',
        nextSelector: '.btn-next',
        previousSelector: '.btn-back',
        onNext: function (tab, navigation, index) {
          var $valid = $('#wizardForm').valid();

          if (!$valid) {
            $validator.focusInvalid();
            return false;
          }
        },
        onInit: function (tab, navigation, index) {
          //check number of tabs and fill the entire row
          var $total = navigation.find('li').length;
          $width = 100 / $total;

          $display_width = $(document).width();

          if ($display_width < 600 && $total > 3) {
            $width = 50;
          }

          navigation.find('li').css('width', $width + '%');
        },
        onTabClick: function (tab, navigation, index) {
          // Disable the posibility to click on tabs
          return false;
        },
        onTabShow: function (tab, navigation, index) {
          var $total = navigation.find('li').length;
          var $current = index + 1;

          var wizard = navigation.closest('.card-wizard');

          // If it's the last tab then hide the last button and show the finish instead
          if ($current >= $total) {
            $(wizard).find('.btn-next').hide();
            $(wizard).find('.btn-finish').show();
          } else if ($current == 1) {
            $(wizard).find('.btn-back').hide();
          } else {
            $(wizard).find('.btn-back').show();
            $(wizard).find('.btn-next').show();
            $(wizard).find('.btn-finish').hide();
          }
        },
      });
    });

    function onFinishWizard() {
      //here you can do something, sent the form to server via ajax and show a success message with swal

      swal('Good job!', 'You clicked the finish button!', 'success');
    }
  },

  initFormExtendedSliders: function () {
    // Sliders for demo purpose in refine cards section
    var slider = document.getElementById('sliderRegular');

    noUiSlider.create(slider, {
      start: 40,
      connect: [true, false],
      range: {
        min: 0,
        max: 100,
      },
    });

    var slider2 = document.getElementById('sliderDouble');

    noUiSlider.create(slider2, {
      start: [20, 60],
      connect: true,
      range: {
        min: 0,
        max: 100,
      },
    });
  },

  initFormExtendedDatetimepickers: function () {
    $('.datetimepicker').datetimepicker({
      icons: {
        time: 'fa fa-clock-o',
        date: 'fa fa-calendar',
        up: 'fa fa-chevron-up',
        down: 'fa fa-chevron-down',
        previous: 'fa fa-chevron-left',
        next: 'fa fa-chevron-right',
        today: 'fa fa-screenshot',
        clear: 'fa fa-trash',
        close: 'fa fa-remove',
      },
    });

    $('.datepicker').datetimepicker({
      format: 'MM/DD/YYYY', //use this format if you want the 12hours timpiecker with AM/PM toggle
      icons: {
        time: 'fa fa-clock-o',
        date: 'fa fa-calendar',
        up: 'fa fa-chevron-up',
        down: 'fa fa-chevron-down',
        previous: 'fa fa-chevron-left',
        next: 'fa fa-chevron-right',
        today: 'fa fa-screenshot',
        clear: 'fa fa-trash',
        close: 'fa fa-remove',
      },
    });

    $('.timepicker').datetimepicker({
      //          format: 'H:mm',    // use this format if you want the 24hours timepicker
      format: 'h:mm A', //use this format if you want the 12hours timpiecker with AM/PM toggle
      icons: {
        time: 'fa fa-clock-o',
        date: 'fa fa-calendar',
        up: 'fa fa-chevron-up',
        down: 'fa fa-chevron-down',
        previous: 'fa fa-chevron-left',
        next: 'fa fa-chevron-right',
        today: 'fa fa-screenshot',
        clear: 'fa fa-trash',
        close: 'fa fa-remove',
      },
    });
  },

  initFullCalendar: function () {
    $calendar = $('#fullCalendar');

    today = new Date();
    y = today.getFullYear();
    m = today.getMonth();
    d = today.getDate();

    $calendar.fullCalendar({
      viewRender: function (view, element) {
        // We make sure that we activate the perfect scrollbar when the view isn't on Month
        if (view.name != 'month') {
          $(element).find('.fc-scroller').perfectScrollbar();
        }
      },
      header: {
        left: 'title',
        center: 'month,agendaWeek,agendaDay',
        right: 'prev,next,today',
      },
      defaultDate: today,
      selectable: true,
      selectHelper: true,
      views: {
        month: {
          // name of view
          titleFormat: 'MMMM YYYY',
          // other view-specific options here
        },
        week: {
          titleFormat: ' MMMM D YYYY',
        },
        day: {
          titleFormat: 'D MMM, YYYY',
        },
      },

      select: function (start, end) {
        // on select we show the Sweet Alert modal with an input
        swal({
          title: 'Create an Event',
          html: '<div class="form-group">' + '<input class="form-control" placeholder="Event Title" id="input-field">' + '</div>',
          showCancelButton: true,
          confirmButtonClass: 'btn btn-success',
          cancelButtonClass: 'btn btn-danger',
          buttonsStyling: false,
        }).then(function (result) {
          var eventData;
          event_title = $('#input-field').val();

          if (event_title) {
            eventData = {
              title: event_title,
              start: start,
              end: end,
            };
            $calendar.fullCalendar('renderEvent', eventData, true); // stick? = true
          }

          $calendar.fullCalendar('unselect');
        });
      },
      editable: true,
      eventLimit: true, // allow "more" link when too many events

      // color classes: [ event-blue | event-azure | event-green | event-orange | event-red ]
      events: [
        {
          title: 'All Day Event',
          start: new Date(y, m, 1),
          className: 'event-default',
        },
        {
          id: 999,
          title: 'Repeating Event',
          start: new Date(y, m, d - 4, 6, 0),
          allDay: false,
          className: 'event-rose',
        },
        {
          id: 999,
          title: 'Repeating Event',
          start: new Date(y, m, d + 3, 6, 0),
          allDay: false,
          className: 'event-rose',
        },
        {
          title: 'Meeting',
          start: new Date(y, m, d - 1, 10, 30),
          allDay: false,
          className: 'event-green',
        },
        {
          title: 'Lunch',
          start: new Date(y, m, d + 7, 12, 0),
          end: new Date(y, m, d + 7, 14, 0),
          allDay: false,
          className: 'event-red',
        },
        {
          title: 'Md-pro Launch',
          start: new Date(y, m, d - 2, 12, 0),
          allDay: true,
          className: 'event-azure',
        },
        {
          title: 'Birthday Party',
          start: new Date(y, m, d + 1, 19, 0),
          end: new Date(y, m, d + 1, 22, 30),
          allDay: false,
          className: 'event-azure',
        },
        {
          title: 'Click for Creative Tim',
          start: new Date(y, m, 21),
          end: new Date(y, m, 22),
          url: 'http://www.creative-tim.com/',
          className: 'event-orange',
        },
        {
          title: 'Click for Google',
          start: new Date(y, m, 21),
          end: new Date(y, m, 22),
          url: 'http://www.creative-tim.com/',
          className: 'event-orange',
        },
      ],
    });
  },

  showNotification: function (from, align) {
    color = Math.floor(Math.random() * 4 + 1);

    $.notify(
      {
        icon: 'ti-gift',
        message: 'Welcome to <b>Paper Dashboard</b> - a beautiful dashboard for every web developer.',
      },
      {
        type: type[color],
        timer: 4000,
        placement: {
          from: from,
          align: align,
        },
      }
    );
  },

  initDocumentationCharts: function () {
    //     	init single simple line chart
    var dataPerformance = {
      labels: ['6pm', '9pm', '11pm', '2am', '4am', '8am', '2pm', '5pm', '8pm', '11pm', '4am'],
      series: [[1, 6, 8, 7, 4, 7, 8, 12, 16, 17, 14, 13]],
    };

    var optionsPerformance = {
      showPoint: false,
      lineSmooth: true,
      height: '200px',
      axisX: {
        showGrid: false,
        showLabel: true,
      },
      axisY: {
        offset: 40,
      },
      low: 0,
      high: 16,
      height: '250px',
    };

    Chartist.Line('#chartPerformance', dataPerformance, optionsPerformance);

    //     init single line with points chart
    var dataStock = {
      labels: ["'07", "'08", "'09", "'10", "'11", "'12", "'13", "'14", "'15"],
      series: [[22.2, 34.9, 42.28, 51.93, 62.21, 80.23, 62.21, 82.12, 102.5, 107.23]],
    };

    var optionsStock = {
      lineSmooth: false,
      height: '200px',
      axisY: {
        offset: 40,
        labelInterpolationFnc: function (value) {
          return '$' + value;
        },
      },
      low: 10,
      height: '250px',
      high: 110,
      classNames: {
        point: 'ct-point ct-green',
        line: 'ct-line ct-green',
      },
    };

    Chartist.Line('#chartStock', dataStock, optionsStock);

    //      init multiple lines chart
    var dataSales = {
      labels: ['9:00AM', '12:00AM', '3:00PM', '6:00PM', '9:00PM', '12:00PM', '3:00AM', '6:00AM'],
      series: [
        [287, 385, 490, 562, 594, 626, 698, 895, 952],
        [67, 152, 193, 240, 387, 435, 535, 642, 744],
        [23, 113, 67, 108, 190, 239, 307, 410, 410],
      ],
    };

    var optionsSales = {
      lineSmooth: false,
      low: 0,
      high: 1000,
      showArea: true,
      height: '245px',
      axisX: {
        showGrid: false,
      },
      lineSmooth: Chartist.Interpolation.simple({
        divisor: 3,
      }),
      showLine: true,
      showPoint: false,
    };

    var responsiveSales = [
      [
        'screen and (max-width: 640px)',
        {
          axisX: {
            labelInterpolationFnc: function (value) {
              return value[0];
            },
          },
        },
      ],
    ];

    Chartist.Line('#chartHours', dataSales, optionsSales, responsiveSales);

    //      pie chart
    Chartist.Pie('#chartPreferences', {
      labels: ['62%', '32%', '6%'],
      series: [62, 32, 6],
    });

    //      bar chart
    var dataViews = {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      series: [[542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895]],
    };

    var optionsViews = {
      seriesBarDistance: 10,
      classNames: {
        bar: 'ct-bar',
      },
      axisX: {
        showGrid: false,
      },
      height: '250px',
    };

    var responsiveOptionsViews = [
      [
        'screen and (max-width: 640px)',
        {
          seriesBarDistance: 5,
          axisX: {
            labelInterpolationFnc: function (value) {
              return value[0];
            },
          },
        },
      ],
    ];

    Chartist.Bar('#chartViews', dataViews, optionsViews, responsiveOptionsViews);

    //     multiple bars chart
    var data = {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      series: [
        [542, 543, 520, 680, 653, 753, 326, 434, 568, 610, 756, 895],
        [230, 293, 380, 480, 503, 553, 600, 664, 698, 710, 736, 795],
      ],
    };

    var options = {
      seriesBarDistance: 10,
      axisX: {
        showGrid: false,
      },
      height: '245px',
    };

    var responsiveOptions = [
      [
        'screen and (max-width: 640px)',
        {
          seriesBarDistance: 5,
          axisX: {
            labelInterpolationFnc: function (value) {
              return value[0];
            },
          },
        },
      ],
    ];

    Chartist.Line('#chartActivity', data, options, responsiveOptions);
  },
};