internet-dhier-et-daujourd-hui-les-dangers-du-web/assets/js/app.js

var lang = "fr";
var dialogs;

var badChoise = 0;
var goodChoise = 0;

var screenHeight = window.innerHeight;
var screenWidth = window.innerWidth;

function setTime(ts) {
  var date = new Date(ts);
  $('.time').text(date.toLocaleString(navigator.language, {
    hour: '2-digit',
    minute: '2-digit'
  })).attr('datetime', date.getHours() + ':' + date.getMinutes());
  $('.date').text(date.toLocaleString(navigator.language, {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })).attr('datetime', date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate());
  setTimeout(function () {
    setTime(Date.now());
  }, 1000);
}

setTime(Date.now());

function Window(settings) {

  // ATTRIBUTES

  this.id = Date.now();
  this.top = settings.top || 50;
  this.left = settings.left || 20;
  this.title = settings.title || 'New Window';
  this.close = settings.close !== undefined ? settings.close : true;
  this.draggable = settings.draggable !== undefined ? settings.draggable : true;
  this.content = settings.content || null;

  // METHODS

  this.setContent = function (content) {
     console.log(content);
     console.log(this.content);
    this.content = content || null;
    var $content = $('#' + this.id).find('.content');
    if (this.content) {
      this.content.forEach(function (item, index, array) {
        var fileitem = '' +
          '<div class="file-item">' +
            '<div class="icon ' + (item.type || '') + '"><i class="fa fa-4x fa-' + (item.icon || 'question') + '"></i></div>' +
            '<div class="label">' + (item.text || 'unknown') + '</div>' +
          '</div>';
        $content.append(fileitem);
      });
    }
  };

  // CONSTRUCTOR

  var html = '' +
    '<div id="' + this.id + '" class="window" style="top: ' + this.top + 'px; left: ' + this.left + 'px">' +
      '<div class="header">' +
        '<h1>' + this.title + '</h1>' +
        (this.close ? '<div class="close"><i class="fa fa-times"></i></div>' : '') +
      '</div>' +
      '<div class="content"></div>' +
    '</div>';

  $('main').append(html);
  this.setContent(this.content);
  
  var windowID = this.id;
  $('#' + this.id).find('.close').on('click', function () {
    $('#' + windowID).fadeOut(200, function () {
      $('#' + windowID).remove();
    });
  });

  if (this.draggable) {
    $('#' + this.id).draggable({
      handle: '.header'
    });
  }
}

/**
 * this function permit slide out lock screen
 */
$('.screensaver').on('click', function () {
  if($(this).hasClass('animated') == false){
      $(this).addClass('animated');
  }
  if($(this).hasClass('slideInDown')){
      $(this).removeClass('slideInDown');
  }
  $(this).addClass("slideOutUp");
});

/**
 * this is launch game
 */
$('.play').on('click', function(){
    //$('.overlay').fadeOut(500);
    $.ajax({
        url:'assets/dialogs/'+lang+'/dialogs.json',
        async: false,
        success: function(data) {
            console.log(data);
            //dialogs = JSON.parse(data);
            dialogs = data;
            prologue();
          }
    });
    $('.startMenu').fadeOut(500);
    
});

function prologue(){
    $(".dialogs").css("display", "block");
    typeWriter(dialogs.prologue, 0);
    $("#dialogsNext").on('click', function(){
        $("#dialogsNext").off('click');
        $('#dialogsNext').css('display', "none");
        $('.screensaver').addClass("changeMailClient")
        typeWriter(dialogs.prologueChangeComputer, 0);
        $("#dialogsNext").on('click', function(){
            $("#dialogsNext").off('click');
            $('.overlay').fadeOut(500);
             $(".dialogs").fadeOut(500);
             $('.changeMailClient').on('click', changeMailClient);
        })
    })
}

function changeMailClient(){
    $("#dialogsNext").off('click');
    $('#dialogsNext').css('display', "none");
    setTimeout(function(){
        $(".dialogs").css("display", "block");
        $('.overlay').fadeIn(500);
        typeWriter(dialogs.changeMailClient, 0);
    }, 600);
    $("#dialogsNext").on('click', function(){
        $("#dialogsNext").off('click');
        $('.overlay').fadeOut(500);
        $(".dialogs").fadeOut(500);
        $("#thunderbird").on('click', function(){
            goodChoise++;
            var w = new Window({
                top: screenHeight/5,
                left: screenWidth/4,
                title: 'Thunderbird',
                close: true,
                draggable: true,
                content: 'mail'
            });
        });
        $("#outlook").on('click', function(){
            badChoise++;
            var w = new Window({
                top: screenHeight/5,
                left: screenWidth/4,
                title: 'Outlook',
                close: true,
                draggable: true,
                content: 'mail'
            });
        });
    });
}

function typeWriter(text, n) {
  if (n < (text.length)) {
    $('#typewritter').html(text.substring(0, n+1));
    n++;
    setTimeout(function() {
      typeWriter(text, n)
    }, 1);
  }
  else{
      $('#dialogsNext').css('display', "block");
  }
}

/**
 * display new page to load expose
 */
$('#expose').on('click', function(){
    var startMenu = $(".startMenu");
    startMenu.css('height', '70%');
    startMenu.css('width', '70%');
    startMenu.html($('.startButton'));
    $('.startButton').addClass('top');
    $('#play').html('Écouter l\'interview');
    $('#play').attr('data-action', 'play');
    $('.expose').html('Télécharger l\'interview');
    $('body').append('<div id="player"><div id="waveform">d</div>"></div>');
    
    var wavesurfer = Object.create(WaveSurfer);
        // Init
    wavesurfer.init({
        container: document.querySelector('#waveform'),
        waveColor: '#3b75ad',
        progressColor: '#304559',
        backend: 'MediaElement',
        height: 20,
        barHeight: 50
    });
    // Load audio from URL
    wavesurfer.load('assets/audio/interview.mp3');

    document.querySelector(
        '[data-action="play"]'
    ).addEventListener('click', wavesurfer.playPause.bind(wavesurfer));

    document.querySelector(
        '[data-action="peaks"]'
    ).addEventListener('click', function () {
        wavesurfer.load('assets/audio/Rip_Tear.mp3', [
0.0218, 0.0183, 0.0165, 0.0198, 0.2137, 0.2888, 0.2313, 0.15, 0.2542, 0.2538, 0.2358, 0.1195, 0.1591, 0.2599, 0.2742, 0.1447, 0.2328, 0.1878, 0.1988, 0.1645, 0.1218, 0.2005, 0.2828, 0.2051, 0.1664, 0.1181, 0.1621, 0.2966, 0.189, 0.246, 0.2445, 0.1621, 0.1618, 0.189, 0.2354, 0.1561, 0.1638, 0.2799, 0.0923, 0.1659, 0.1675, 0.1268, 0.0984, 0.0997, 0.1248, 0.1495, 0.1431, 0.1236, 0.1755, 0.1183, 0.1349, 0.1018, 0.1109, 0.1833, 0.1813, 0.1422, 0.0961, 0.1191, 0.0791, 0.0631, 0.0315, 0.0157, 0.0166, 0.0108
        ]);
        document.body.scrollTop = 0;
    });
});