Mootools.Popup.js

/**
 * Mootool Popup
 * @author Tung Dao <[email protected]>
 */
;(function(exports) {

var Popup = new Class({

    initialize: function(selector) {
      this.elements = $$(selector);
      this.attach();
      this.setupPopup();
    },

    attach: function() {
      var _self = this;
      this.elements.each(function(el, idx) {
        el.addEvents({
          mouseenter: function(e) {
            _self.setPopupContent(el.getElement('img').clone());
            _self.setPopupPosition(e.event.pageX, e.event.pageY);
            _self.showPopup();
          },
          mousemove: function(e) {
            // On 1.1.x this return raw Event Object
            if (_self.isPopupOn) {
              _self.setPopupPosition(e.pageX, e.pageY);
            }
          },
          mouseleave: function(e) {
            _self.hidePopup();
          }
        });
      });
    },

    setupPopup: function() {
      this.popup = new Element("div");
      this.popup.setStyles({
        "position": "absolute",
        "z-index": 9999,
        "width": 300,
        "height": 400,
        "opacity": 0,
        "border": "2px solid #ddd"
      });
      this.popupAnimation = new Fx.Style(this.popup, 'opacity', { "wait": false });
      this.popup.inject(document.body);
      this.isPopupOn = false;
    },

    setPopupPosition: function(x, y) {
      this.popup.setStyles({
        "top": y + 10,
        "left": x + 10
      });
    },

    setPopupContent: function(content) {
      this.popup.empty();
      content.removeAttribute('width');
      content.removeAttribute('height');
      content.setStyles({
        "max-width": "100%",
        "height": "auto"
      });
      this.popup.adopt(content);
    },

    hidePopup: function() {
      this.popupAnimation.start(1, 0);
      this.isPopupOn = false;
    },

    showPopup: function() {
      this.popupAnimation.start(0, 1);
      this.isPopupOn = true;
    }

});

exports.Popup = Popup;

})(window);