text: demo = {
    initPickColor: function () {
      $('.pick-class-label').click(function () {
        var new_class = $(this).attr('new-class');
        var old_class = $('#display-buttons').attr('data-class');
        var display_div = $('#display-buttons');
        if (display_div.length) {
          var display_buttons = display_div.find('.btn');
          display_buttons.removeClass(old_class);
          display_buttons.addClass(new_class);
          display_div.attr('data-class', new_class);
        }
      });
    },
  
    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);
      }
    },
  
    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',
          inline: true
        }
      });
  
      $('.datepicker').datetimepicker({
        format: 'MM/DD/YYYY',
        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',
          inline: true
        }
      });
  
      $('.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',
          inline: true
  
        }
      });
    },
  
    initMaterialWizard: function () {
      // Code for the Validator
      var $validator = $('.wizard-card form').validate({
        rules: {
          firstname: {
            required: true,
            minlength: 3
          },
          lastname: {
            required: true,
            minlength: 3
          },
          email: {
            required: true,
            minlength: 3,
          }
        },
  
        errorPlacement: function (error, element) {
          $(element).parent('div').addClass('has-error');
        }
      });
  
      // Wizard Initialization
      $('.wizard-card').bootstrapWizard({
        'tabClass': 'nav nav-pills',
        'nextSelector': '.btn-next',
        'previousSelector': '.btn-previous',
  
        onNext: function (tab, navigation, index) {
          var $valid = $('.wizard-card form').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;
          var $wizard = navigation.closest('.wizard-card');
  
          $display_width = $(document).width();
  
          if ($display_width < 600 && $total > 3) {
            $width = 50;
          }
  
          navigation.find('li').css('width', $width + '%');
          $first_li = navigation.find('li:first-child a').html();
          $moving_div = $('<div class="moving-tab">' + $first_li + '</div>');
          $('.wizard-card .wizard-navigation').append($moving_div);
          refreshAnimation($wizard, index);
          $('.moving-tab').css('transition', 'transform 0s');
        },
  
        onTabClick: function (tab, navigation, index) {
          var $valid = $('.wizard-card form').valid();
  
          if (!$valid) {
            return false;
          } else {
            return true;
          }
        },
  
        onTabShow: function (tab, navigation, index) {
          var $total = navigation.find('li').length;
          var $current = index + 1;
  
          var $wizard = navigation.closest('.wizard-card');
  
          // 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 {
            $($wizard).find('.btn-next').show();
            $($wizard).find('.btn-finish').hide();
          }
  
          button_text = navigation.find('li:nth-child(' + $current + ') a').html();
  
          setTimeout(function () {
            $('.moving-tab').text(button_text);
          }, 150);
  
          var checkbox = $('.footer-checkbox');
  
          if (!index == 0) {
            $(checkbox).css({
              'opacity': '0',
              'visibility': 'hidden',
              'position': 'absolute'
            });
          } else {
            $(checkbox).css({
              'opacity': '1',
              'visibility': 'visible'
            });
          }
  
          refreshAnimation($wizard, index);
        }
      });
  
      // Prepare the preview for profile picture
      $("#wizard-picture").change(function () {
        readURL(this);
      });
  
      $('[data-toggle="wizard-radio"]').click(function () {
        wizard = $(this).closest('.wizard-card');
        wizard.find('[data-toggle="wizard-radio"]').removeClass('active');
        $(this).addClass('active');
        $(wizard).find('[type="radio"]').removeAttr('checked');
        $(this).find('[type="radio"]').attr('checked', 'true');
      });
  
      $('[data-toggle="wizard-checkbox"]').click(function () {
        if ($(this).hasClass('active')) {
          $(this).removeClass('active');
          $(this).find('[type="checkbox"]').removeAttr('checked');
        } else {
          $(this).addClass('active');
          $(this).find('[type="checkbox"]').attr('checked', 'true');
        }
      });
  
      $('.set-full-height').css('height', 'auto');
  
      //Function to show image before upload
  
      function readURL(input) {
        if (input.files && input.files[0]) {
          var reader = new FileReader();
  
          reader.onload = function (e) {
            $('#wizardPicturePreview').attr('src', e.target.result).fadeIn('slow');
          }
          reader.readAsDataURL(input.files[0]);
        }
      }
  
      $(window).resize(function () {
        $('.wizard-card').each(function () {
          $wizard = $(this);
          index = $wizard.bootstrapWizard('currentIndex');
          refreshAnimation($wizard, index);
  
          $('.moving-tab').css({
            'transition': 'transform 0s'
          });
        });
      });
  
      function refreshAnimation($wizard, index) {
        total_steps = $wizard.find('li').length;
        move_distance = $wizard.width() / total_steps;
        step_width = move_distance;
        move_distance *= index;
  
        $current = index + 1;
  
        if ($current == 1) {
          move_distance -= 8;
        } else if ($current == total_steps) {
          move_distance += 8;
        }
  
        $wizard.find('.moving-tab').css('width', step_width);
        $('.moving-tab').css({
          'transform': 'translate3d(' + move_distance + 'px, 0, 0)',
          'transition': 'all 0.5s cubic-bezier(0.29, 1.42, 0.79, 1)'
  
        });
      }
    },
  
  
    initDocumentationCharts: function () {
      /* ----------==========     Daily Sales Chart initialization For Documentation    ==========---------- */
  
      dataDailySalesChart = {
        labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
        series: [
          [12, 17, 7, 17, 23, 18, 38]
        ]
      };
  
      optionsDailySalesChart = {
        lineSmooth: Chartist.Interpolation.cardinal({
          tension: 0
        }),
        low: 0,
        high: 50, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
        chartPadding: {top: 0, right: 0, bottom: 0, left: 0},
      }
  
      var dailySalesChart = new Chartist.Line('#dailySalesChart', dataDailySalesChart, optionsDailySalesChart);
  
      var animationHeaderChart = new Chartist.Line('#websiteViewsChart', dataDailySalesChart, optionsDailySalesChart);
    },
  
    initCharts: function () {
  
      /* ----------==========    Rounded Line Chart initialization    ==========---------- */
  
      dataRoundedLineChart = {
        labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
        series: [
          [0, 0, 0, 0, 0, 0, 0]
        ]
      };
  
      optionsRoundedLineChart = {
        lineSmooth: Chartist.Interpolation.cardinal({
          tension: 10
        }),
        axisX: {
          showGrid: false,
        },
        low: 0,
        high: 50, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
        chartPadding: {top: 0, right: 0, bottom: 0, left: 0},
        showPoint: false
      }
  
      var RoundedLineChart = new Chartist.Line('#roundedLineChart', dataRoundedLineChart, optionsRoundedLineChart);
  
      md.startAnimationForLineChart(RoundedLineChart);
  
  
      /*  **************** Straight Lines Chart - single line with points ******************** */
  
      dataStraightLinesChart = {
        labels: ['\'07', '\'08', '\'09', '\'10', '\'11', '\'12', '\'13', '\'14', '\'15'],
        series: [
          [0, 0, 0, 0, 0, 0, 0, 0, 0]
        ]
      };
  
      optionsStraightLinesChart = {
        lineSmooth: Chartist.Interpolation.cardinal({
          tension: 0
        }),
        low: 0,
        high: 50, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
        chartPadding: {top: 0, right: 0, bottom: 0, left: 0},
        classNames: {
          point: 'ct-point ct-white',
          line: 'ct-line ct-white'
        }
      }
  
      var straightLinesChart = new Chartist.Line('#straightLinesChart', dataStraightLinesChart, optionsStraightLinesChart);
  
      md.startAnimationForLineChart(straightLinesChart);
  
  
      /*  **************** Coloured Rounded Line Chart - Line Chart ******************** */
  
  
      dataColouredRoundedLineChart = {
        labels: ['\'06', '\'07', '\'08', '\'09', '\'10', '\'11', '\'12', '\'13', '\'14', '\'15'],
        series: [
          [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
        ]
      };
  
      optionsColouredRoundedLineChart = {
        lineSmooth: Chartist.Interpolation.cardinal({
          tension: 10
        }),
        axisY: {
          showGrid: true,
          offset: 40
        },
        axisX: {
          showGrid: false,
        },
        low: 0,
        high: 1000,
        showPoint: true,
        height: '300px'
      };
  
  
      var colouredRoundedLineChart = new Chartist.Line('#colouredRoundedLineChart', dataColouredRoundedLineChart, optionsColouredRoundedLineChart);
  
      md.startAnimationForLineChart(colouredRoundedLineChart);
  
  
      /*  **************** Coloured Rounded Line Chart - Line Chart ******************** */
  
  
      dataColouredBarsChart = {
        labels: ['\'06', '\'07', '\'08', '\'09', '\'10', '\'11', '\'12', '\'13', '\'14', '\'15'],
        series: [
          [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
        ]
      };
  
      optionsColouredBarsChart = {
        lineSmooth: Chartist.Interpolation.cardinal({
          tension: 10
        }),
        axisY: {
          showGrid: true,
          offset: 40
        },
        axisX: {
          showGrid: false,
        },
        low: 0,
        high: 1000,
        showPoint: true,
        height: '300px'
      };
  
  
      var colouredBarsChart = new Chartist.Line('#colouredBarsChart', dataColouredBarsChart, optionsColouredBarsChart);
  
      md.startAnimationForLineChart(colouredBarsChart);
  
  
      /*  **************** Public Preferences - Pie Chart ******************** */
  
      var dataPreferences = {
        labels: ['62%', '32%', '6%'],
        series: [0, 0, 0]
      };
  
      var optionsPreferences = {
        height: '230px'
      };
  
      Chartist.Pie('#chartPreferences', dataPreferences, optionsPreferences);
  
      /*  **************** Simple Bar Chart - barchart ******************** */
  
      var dataSimpleBarChart = {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        series: [
          [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
        ]
      };
  
      var optionsSimpleBarChart = {
        seriesBarDistance: 10,
        axisX: {
          showGrid: false
        }
      };
  
      var responsiveOptionsSimpleBarChart = [
        ['screen and (max-width: 640px)', {
          seriesBarDistance: 5,
          axisX: {
            labelInterpolationFnc: function (value) {
              return value[0];
            }
          }
        }]
      ];
  
      var simpleBarChart = Chartist.Bar('#simpleBarChart', dataSimpleBarChart, optionsSimpleBarChart, responsiveOptionsSimpleBarChart);
  
      //start animation for the Emails Subscription Chart
      md.startAnimationForBarChart(simpleBarChart);
  
  
      var dataMultipleBarsChart = {
        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 optionsMultipleBarsChart = {
        seriesBarDistance: 10,
        axisX: {
          showGrid: false
        },
        height: '300px'
      };
  
      var responsiveOptionsMultipleBarsChart = [
        ['screen and (max-width: 640px)', {
          seriesBarDistance: 5,
          axisX: {
            labelInterpolationFnc: function (value) {
              return value[0];
            }
          }
        }]
      ];
  
      var multipleBarsChart = Chartist.Bar('#multipleBarsChart', dataMultipleBarsChart, optionsMultipleBarsChart, responsiveOptionsMultipleBarsChart);
  
      //start animation for the Emails Subscription Chart
      md.startAnimationForBarChart(multipleBarsChart);
    },
  
    initDashboardPageCharts: function () {
  
      /* ----------==========     Daily Sales Chart initialization    ==========---------- */
  
      dataDailySalesChart = {
        labels: ['L', 'M', 'M', 'J', 'V', 'S', 'D'],
        series: [
          [0, 0, 0, 0, 0, 0, 0]
        ]
      };
  
      optionsDailySalesChart = {
        lineSmooth: Chartist.Interpolation.cardinal({
          tension: 0
        }),
        low: 0,
        high: 50, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
        chartPadding: {top: 0, right: 0, bottom: 0, left: 0},
      }
  
      var dailySalesChart = new Chartist.Line('#dailySalesChart', dataDailySalesChart, optionsDailySalesChart);
  
      md.startAnimationForLineChart(dailySalesChart);
  
  
      /* ----------==========     Completed Tasks Chart initialization    ==========---------- */
  
      dataCompletedTasksChart = {
        labels: ['L', 'M', 'M', 'J', 'V', 'S', 'D'],
        series: [
          [0, 0, 0, 0, 0, 0, 0]
        ]
      };
  
      optionsCompletedTasksChart = {
        lineSmooth: Chartist.Interpolation.cardinal({
          tension: 0
        }),
        low: 0,
        high: 110, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
        chartPadding: {top: 0, right: 0, bottom: 0, left: 0}
      }
  
      var completedTasksChart = new Chartist.Line('#completedTasksChart', dataCompletedTasksChart, optionsCompletedTasksChart);
  
      // start animation for the Completed Tasks Chart - Line Chart
      md.startAnimationForLineChart(completedTasksChart);
  
  
      /* ----------==========     Emails Subscription Chart initialization    ==========---------- */
  
      var dataWebsiteViewsChart = {
        labels: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
        series: [
          [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
  
        ]
      };
      var optionsWebsiteViewsChart = {
        axisX: {
          showGrid: false
        },
        low: 0,
        high: 1000,
        chartPadding: {top: 0, right: 5, bottom: 0, left: 0}
      };
      var responsiveOptions = [
        ['screen and (max-width: 640px)', {
          seriesBarDistance: 5,
          axisX: {
            labelInterpolationFnc: function (value) {
              return value[0];
            }
          }
        }]
      ];
      var websiteViewsChart = Chartist.Bar('#websiteViewsChart', dataWebsiteViewsChart, optionsWebsiteViewsChart, responsiveOptions);
  
      //start animation for the Emails Subscription Chart
      md.startAnimationForBarChart(websiteViewsChart);
  
    },
  
    showSwal: function (type) {
  
      if (type == 'basic') {
        swal({
          title: "Here's a message!",
          buttonsStyling: false,
          confirmButtonClass: "btn btn-success"
        });
  
      } 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"
        });
  
      } else if (type == 'success-message') {
        swal({
          title: "Good job!",
          text: "You clicked the button!",
          buttonsStyling: false,
          confirmButtonClass: "btn btn-success",
          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',
          cancelButtonClass: 'btn btn-danger',
          confirmButtonText: 'Yes, delete it!',
          buttonsStyling: false
        }).then(function () {
          swal({
            title: 'Deleted!',
            text: 'Your file has been deleted.',
            type: 'success',
            confirmButtonClass: "btn btn-success",
            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",
          cancelButtonClass: "btn btn-danger",
          buttonsStyling: false
        }).then(function () {
          swal({
            title: 'Deleted!',
            text: 'Your imaginary file has been deleted.',
            type: 'success',
            confirmButtonClass: "btn btn-success",
            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",
              buttonsStyling: false
            })
          }
        })
  
      } else if (type == 'custom-html') {
        swal({
          title: 'HTML example',
          buttonsStyling: false,
          confirmButtonClass: "btn btn-success",
          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',
          cancelButtonClass: 'btn btn-danger',
          buttonsStyling: false
        }).then(function (result) {
          swal({
            type: 'success',
            html: 'You entered: <strong>' +
            $('#input-field').val() +
            '</strong>',
            confirmButtonClass: 'btn btn-success',
            buttonsStyling: false
  
          })
        }).catch(swal.noop)
      }
    },
  
    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'
          }]
        },
      });
    },
  
    initGoogleMaps: 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);
    },
  
    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);
  
  
      // 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);
  
  
    },
  
    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) {
      type = ['', 'info', 'success', 'warning', 'danger', 'rose', 'primary'];
  
      color = Math.floor((Math.random() * 6) + 1);
  
      $.notify({
        icon: "notifications",
        message: "Welcome to <b>Material Dashboard</b> - a beautiful freebie for every web developer."
  
      }, {
        type: type[color],
        timer: 3000,
        placement: {
          from: from,
          align: align
        }
      });
    }
    //dialog header
  
    //hasta aqui dialog header
  }
  
  