var ctxmenu = {
  container: null
  
  // Initialize and add the div#ctxmenu container in the body
  ,init: function() {
    // hide the old ctxmenu
    this.hide();
    
    this.container = document.createElement('div');
    this.container.setAttribute('id', 'ctxmenu');
    // autohide
    this.container.className = 'ctxmenu hidden';
    
    document.body.appendChild(this.container);
  }
  
  // Setting the configuration of the ctxmenu
  ,set: function() {
    this.init();
    
    // override the default settings
    var settings = _.extend({
      content: null
      ,posX: 0
      ,posY: 0
    }, arguments[0] || {});

    // adding the content
    this.container.innerHTML = settings.content;
    
    // positionning
    this.container.style.left = settings.posX + 'px';
    this.container.style.top = settings.posY + 'px';
  }
  
  // Showing the ctxmenu
  ,show: function() {
    if(undefined !== arguments[0]) {
       this.set(arguments[0]); 
    }

    this.container.className = 'ctxmenu';
  }
  
  // Hide the ctxmenu
  ,hide: function() {
    if(this.container) {
      this.container.remove();
      this.container = null;
    }
  }
};

[].forEach.call(document.querySelectorAll('.with-ctxmenu'), function(el) {
  el.addEventListener('contextmenu', function(e) {
    // prevent the right click default action
    e.preventDefault();
    // prevent the auto kill
    e.stopPropagation();

    ctxmenu.show({
      content: document.getElementById('ctxmenu-tpl').innerHTML
      ,posX: e.clientX
      ,posY: e.clientY
    });
  });
});

// hide the contextmenu on left/right click
document.addEventListener('click', function() { ctxmenu.hide(); }, false);
document.addEventListener('contextmenu', function() { ctxmenu.hide(); }, false);