$(document).ready( function(){

  var socket = io();
  socket.on('message', getMessage);

  var baseUrl = 'http://' + window.location.hostname;
  var content = $('.content');
  var urlString = window.location.href;
  var url = new URL(urlString);
  var sid = getParameterByName("sid", urlString);

  $.getJSON( baseUrl + '/apis/getMessages.php', {
    sid: sid
  }).done( function(session){
    console.log(session, new Date().getTime());

    if(session.enabled){
      $.each(session.messages, function(index,item){
        if(item.timer != session.start){

          var now = new Date().getTime();

          var timerValue = item.timer.split(' ');
          var timerDate = timerValue[0].split('-');
          var timerHours = timerValue[1].split(':');
          var timer = new Date(timerDate[0], timerDate[1] - 1, timerDate[2], timerHours[0], timerHours[1], timerHours[2]).getTime();

          var startValue = session.start.split(' ');
          var startDate = startValue[0].split('-');
          var startHours = startValue[1].split(':');
          var start = new Date(startDate[0], startDate[1] - 1, startDate[2], startHours[0], startHours[1], startHours[2]).getTime();

          if(now > timer){
            showCloud(item.title, [item.short_text, item.long_text], item.image, item.actions, session.messages);
            notify(true);
          } else {
            var delay = (timer - now);
            setTimeout(  function(){
              showCloud(item.title, [item.short_text, item.long_text], item.image, item.actions, session.messages);
              notify(true);
            },delay);
          }
        }
      });
    }
  });


  function showCloud(title, text, img, actions, messages){

    var image = img ? '<img src="' + img : '';
    var long_text = text[1] ? '<div class="long-text"> <button class="toggle button confirm">More...</button> <div class="text-content">' + text[1] + '</div> </div>' : '';

    var cloud = $('<div class="cloud left"> <div class="title">' + title + '</div> <div class="short-text">' + text[0] + '</div>' + long_text + image + '</div>');

    cloud.find('.toggle').on('click', function(e){
      var button = $(e.currentTarget);
      var text = button.siblings('.text-content');
      if(text.is(':visible')){
        button.text('More...');
        text.slideUp();
      }else{
        button.text('Less...');
        text.slideDown();
      }
    });
    content.append(cloud);

    if(actions.length){

      var actionsContainer = $('<div class="actions"></div>');
      $.each(actions, function(index, value){
        var button = $('<button class="goto button dotted" data-goto="' + value.mid + '">' + value.label + '</button>');

        button.on('click', function(e){
          var goto = $(e.currentTarget);
          var messageId = goto.data('goto');
          var fullMessage = messages.filter( function(m){m.id == messageId});
          showCloud(fullMessage[0].title, [fullMessage[0].short_text, fullMessage[0].long_text], fullMessage[0].image, fullMessage[0].actions, messages);
          notify(false);
        });

        actionsContainer.append(button);
      });

      content.append(actionsContainer);
    }

    scrollBottom();
  }

  function scrollBottom(){
    $('html, body').stop().animate({
      scrollTop: $('.cloud').last().offset().top
    }, 1000);
  }

  function notify(vibrate){
    if(vibrate){
      var canVibrate = (navigator.vibrate ||
                     navigator.webkitVibrate ||
                     navigator.mozVibrate ||
                     navigator.msVibrate);
      if(canVibrate){
        navigator.vibrate(500);
      }
    }
    $('#notify1')[0].play();
  }


  function getMessage(message){
    showCloud(message.title, [message.short_text, message.long_text], message.image, '', '');
    notify(true);
  }


  function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
  }

});