/*
Class notification display on web pages.

@param string msg The message notification.
@param integer [Optional] Time, in seconds, to display the notification. The default is 0 (the notification does not close alone, only with the close button).
@param string position [Optional] The CSS class name for positioning.
*/
function notifly(msg, time, position) {
  if (typeof time === undefined) {
    time = 0;
  }

  if (typeof position === undefined) {
    position = 'notifly-top-center';
  }

  var mainEl = document.createElement('div');
  mainEl.className = 'notifly ' + position;

  var msgEl = document.createElement('div');
  msgEl.className = 'notifly-msg';
  msgEl.innerHTML = msg;

  var closeBtn = document.createElement('div');
  closeBtn.className = 'notifly-close';
  closeBtn.innerHTML = 'x';

  mainEl.appendChild(msgEl);
  mainEl.appendChild(closeBtn);
  document.body.appendChild(mainEl);

  var close = function() {
    document.body.removeChild(mainEl);
  };

  setTimeout(function() {
    mainEl.className = mainEl.className + ' notifly-show';
  }, 500);

  closeBtn.addEventListener('click', function(event) {
    mainEl.className = mainEl.className + ' notifly-hide';
    setTimeout(function() {
      close();
    }, 3001); /* I used 3001 milliseconds because the CSS transition time is 3 seconds. This prevents the notification disappears before completion of notification.*/
  });

  if (time > 0) {
    setTimeout(function() {
      mainEl.className = mainEl.className + ' notifly-hide';
      setTimeout(function() {
        close();
      }, 3001); /* I used 3001 milliseconds because the CSS transition time is 3 seconds. This prevents the notification disappears before completion of notification.*/
    }, (time * 1000) + 3000); /* I used 3000 milliseconds because the CSS transition time is 3 seconds. This fixes the duration of the notification, if configured. */
  }
};

/* Function with didactic intention, only to display the notification. */

function show() {
  var msg = document.getElementById('msg').innerHTML;
  var position = document.getElementById('position').value;
  var time = document.getElementById('time').value;

  var notify = new notifly(msg, time, position);
};