var Popup = new Class({
  Implements: [Options, Events],

  options: {
    popup_frame_name : 'popup',
    height : 0,
    width : 0,
    max_height : 0,
    max_width : 960,
    oncomplete : null
  },

  initialize: function(options) {
    this.setOptions(options);
    this.createPopup();
    this.loadLinks();
  },

  popup_frame : null,

  overlay : null,

  createPopup: function() {
    this.popup_frame = new Element('div', {
      id: this.options.popup_frame_name,
      'class': 'popup',
      style:"z-index:1100;position:absolute;position:fixed;visibility:hidden;display:block;overflow:auto;"
    });
    this.overlay = new Element('div', {
      id: this.options.overlay_name,
      style: "display:none;height:9999px;top:0;left:0;z-index:1000;position:absolute;width:100%;background: transparent url(/images/popup/black-70.png) repeat;",
      events: {
        click: function() {
          this.close();
        }.bind(this)
      }
    });
    this.overlay.inject(document.body, 'bottom');
    this.popup_frame.inject(document.body, 'bottom');
  },

  loadLinks: function() {
    $$('a.popuplink').each(function(link) {
      link.addEvent('click', this.popup.bind(this));

      if (link.rel) {
        $(link.rel).setStyle('visibility', 'hidden');
      }
    }, this)
  },

  popup: function(ev) {
    new Event(ev).stop();
    var link = ev.target
    if (link.rel) {
      this.rel_popup(link.rel);
    } else {
      var req = new Request.HTML({
        url: link.href,
        method: 'get',
        async: false,
        onComplete: function(tree, els, html, js) {
          this.popup_frame.set('html', "<div class='top'></div><div class='mid'>"+html+"<div id='pClose'><a href='' onclick='popups.close();return false;'>CLOSE</a></div></div><div class='bottom'></div>");
          this.show();
          this.movePopup();
          eval(js);
          //custom onComplete
          if (this.options.oncomplete) {
            this.options.oncomplete();
          }
        }.bind(this)
      }).send();
    }
  },

  open: function(link, request_method, data_source) {
    if (typeof(request_method) == 'undefined') {
      request_method = 'get';
    }
    var req = new Request.HTML({
      url: link,
      data: data_source,
      method: request_method,
      async: false,
      onComplete: function(tree, els, html, js) {
        this.popup_frame.set('html', "<div class='top'></div><div class='mid'>"+html+"<div id='pClose'><a href='' onclick='popups.close();return false;'>CLOSE</a></div></div><div class='bottom'></div>");
        this.show();
        this.movePopup();
        eval(js);
        //custom onComplete
        if (this.options.oncomplete) {
          this.options.oncomplete();
        }
      }.bind(this)
    }).send();
  },
  rel_popup: function(frame) {
    frame = $(frame);
    frame.inject(this.popup_frame);
    frame.setStyle('visibility', 'visible');
    this.show();
    this.movePopup();
  },

  show: function() {
    this.popup_frame.setStyle('visibility', 'visible');
    this.overlay.setStyle('display', 'block');
  },

  movePopup: function() {
    if (this.options.width && this.options.height) {
      this.popup_frame.setStyle('width', this.options.width);
      this.popup_frame.setStyle('height', this.options.height);
      var x = (window.getWidth() - this.options.width)/2;
      var y = (window.getHeight() - this.options.height)/2;
    } else {
      var size = this.popup_frame.getSize();
      if (this.options.max_width > 0 && size.x > this.options.max_width) {
        var x = (window.getWidth() - this.options.max_width)/2;
      } else {
        var x = (window.getWidth() - size.x)/2;
      }
      if (this.options.max_height > 0 && size.y > this.options.max_height) {
        var y = (window.getHeight() - this.options.max_height)/2;
      } else {
        var y = (window.getHeight() - size.y)/2;
      }
      if (y < 1) { // went negative. the div is too big
        y = 50;
        this.popup_frame.setStyle('height', window.getHeight() - 100);
      }
      if (x < 1) {
        x = 100;
        this.popup_frame.setStyle('width', window.getWidth() - 200);
      }

    }
    this.popup_frame.setStyle('left', x);
    this.popup_frame.setStyle('top', y);
  },

  close: function() {
    this.overlay.setStyle('display', 'none');
    this.popup_frame.setStyle('visibility', 'hidden');
  }
});