// This is lowpro's behaviour class, that when applied to link, will change the links so it shows a
// popup box and fetches it's content asynchronously (with ajax).
//
// == Example
//
//   Event.addBehavior({'a.popup_trigger': PopupLink});
//
// == Options
//
// boxClass:   css class of the box. Default is "popup_box".
// placement:  where will the box be placed. Can be:
//               "center": center of the browser viewport
//               "belowTrigger": below the element that pops the box up when clicked.
//             Default is "belowTrigger".
// method:     which HTTP method is used to send the request. Default is "get".
// cache:      if true, the content of the box is cached after first poped up, and reused
//             on subsequent popups. If false, it's reloaded on every popup. Default is true.
// onStart:    callback that is called before the box content is requested from server.
//             It is passed one parameter: the behaviour object.
// onComplete: callback called after the content is retrieved, just before the box is popped up.
PopupLink = Behavior.create({
  initialize: function(options) {
    this.options = Object.extend({
      method: 'get', cache: true, boxClass: 'popup_box', placement: 'belowTrigger'},
      options);
    this.parameters = '';
  },

  onclick: function() {
    if (this.box) {
      if (this.box.visible()) {
        this.box.fade({duration: 0.5});
      } else {
        if (this.options.cache) {
          this.box.appear({duration: 0.5});
        } else {
          this.fetchContent();
        }
      }
    } else {
      this.createBox();
      this.fetchContent();
    }

    return false;
  },
  
  createBox: function() {
    // this.content = $div({'class': 'content'});
    this.content = new Element('div');
		this.content.addClassName('content')
    // this.box = $div({'class': this.options.boxClass}, [this.content]);
    this.box = new Element('div').update(this.content);
		this.box.addClassName(this.options.boxClass)

    this.box.hide();
    this.box.style.position = 'absolute';
    this.box.style.zIndex = 999;

    document.body.appendChild(this.box);
  },

  fetchContent: function() {
    if (this.options.onStart) {
      this.options.onStart(this);
    }

    new Ajax.Updater(this.content, this.element.href, {
      evaluateScripts: true,
      method: this.options.method,
      parameters: this.parameters,
      onComplete: function() {
        var box = this.box;

        // Add close button.
        // this.content.appendChild(
        // $span(	{'class': 'popup_close close_button', 'title': 'Close'}));
					var close = new Element('span');


				this.content.appendChild(close);
				close.addClassName('popup_close close_button');
				// new Element('span', {'class':'popup_close close_button'})			
        // If there is an element with class=popup_close, make it close the popup on click.
        this.box.getElementsBySelector('.popup_close').each(function(element) {
          element.observe('click', function(event) {
            box.fade({duration: 0.5});
            event.stop();
            return false;
          });
        });

        this.placeBox();
        
        if (this.options.onComplete) {
          this.options.onComplete(this);
        }

        this.box.appear({appear: 0.5});

      }.bind(this)
    });
  },

  placeBox: function() {
    switch (this.options.placement) {
      case 'center':
        var min = {top: 10, left: 10};
        var scroll = document.viewport.getScrollOffsets();

        var left = (document.viewport.getWidth() - this.box.getWidth()) / 2;
        var top = (document.viewport.getHeight() - this.box.getHeight()) / 2;

        left = [left, min.left].max() + scroll.left;
        top = [top, min.top].max() + scroll.top;
        break;
      case 'belowTrigger':
        var left = this.element.cumulativeOffset()[0] + 
                   (this.element.getWidth() - this.box.getWidth()) / 2;

        var top = this.element.cumulativeOffset()[1] + this.element.getHeight() + 12;
        break;
    }

    this.box.style.left = left + "px";
    this.box.style.top = top + "px";
  }
});

// Close all popups on page matching given css selector.
PopupLink.closeAll = function(selector) {
  $$(selector).each(function(element) { element.fade({duration: 0.5}); });
}