Materialize.toast = function (message, displayLength, className, completeCallback) {

className = className || "";

var container = document.getElementById('toast-container');

// Create toast container if it does not exist
if (container === null) {
    // create notification container
    container = document.createElement('div');
    container.id = 'toast-container';
    document.body.appendChild(container);
}

// Select and append toast
var newToast = createToast(message);

// only append toast if message is not undefined
if(message){
    container.appendChild(newToast);
}

newToast.style.top = '35px';
newToast.style.opacity = 0;

// Animate toast in
Vel(newToast, { "top" : "0px", opacity: 1 }, {duration: 300,
  easing: 'easeOutCubic',
  queue: false});

// Allows timer to be pause while being panned
var timeLeft = displayLength;
var counterInterval;
if (timeLeft != null)  {
  counterInterval = setInterval (function(){
    if (newToast.parentNode === null)
      window.clearInterval(counterInterval);

    // If toast is not being dragged, decrease its time remaining
    if (!newToast.classList.contains('panning')) {
      timeLeft -= 20;
    }

    if (timeLeft <= 0) {
      // Animate toast out
      Vel(newToast, {"opacity": 0, marginTop: '-40px'}, { duration: 375,
          easing: 'easeOutExpo',
          queue: false,
          complete: function(){
            // Call the optional callback
            if(typeof(completeCallback) === "function")
              completeCallback();
            // Remove toast after it times out
            this[0].parentNode.removeChild(this[0]);
          }
        });
      window.clearInterval(counterInterval);
    }
  }, 20);
}

function createToast(html) {

    // Create toast
    var toast = document.createElement('div');
    toast.classList.add('toast');
    if (className) {
        var classes = className.split(' ');

        for (var i = 0, count = classes.length; i < count; i++) {
            toast.classList.add(classes[i]);
        }
    }
    // If type of parameter is HTML Element
    if ( typeof HTMLElement === "object" ? html instanceof HTMLElement : html && typeof html === "object" && html !== null && html.nodeType === 1 && typeof html.nodeName==="string"

) {

      toast.appendChild(html);
    }
    else if (html instanceof jQuery) {
      // Check if it is jQuery object
      toast.appendChild(html[0]);
    }
    else {
      // Insert as text;
      toast.innerHTML = html;
    }
    // Bind hammer
    var hammerHandler = new Hammer(toast, {prevent_default: false});
    hammerHandler.on('pan', function(e) {
      var deltaX = e.deltaX;
      var activationDistance = 80;

      // Change toast state
      if (!toast.classList.contains('panning')){
        toast.classList.add('panning');
      }

      var opacityPercent = 1-Math.abs(deltaX / activationDistance);
      if (opacityPercent < 0)
        opacityPercent = 0;

      Vel(toast, {left: deltaX, opacity: opacityPercent }, {duration: 50, queue: false, easing: 'easeOutQuad'});

    });

    hammerHandler.on('panend', function(e) {
      var deltaX = e.deltaX;
      var activationDistance = 80;

      // If toast dragged past activation point
      if (Math.abs(deltaX) > activationDistance) {
        Vel(toast, {marginTop: '-40px'}, { duration: 375,
            easing: 'easeOutExpo',
            queue: false,
            complete: function(){
              if(typeof(completeCallback) === "function") {
                completeCallback();
              }
              toast.parentNode.removeChild(toast);
            }
        });

      } else {
        toast.classList.remove('panning');
        // Put toast back into original position
        Vel(toast, { left: 0, opacity: 1 }, { duration: 300,
          easing: 'easeOutExpo',
          queue: false
        });

      }
    });

    return toast;
}

};