/**
 * Overlay Box for putting any content into RumbleUI Toolkit Paul Serby -
 * paul.serby@clock.co.uk 6 September 2008
 */
RumbleUI.Box = Class.create();
RumbleUI.Box.prototype = {
  initialize: function(options) {

	  this.options = {
	    width: 200,
	    height: 200,
	    closeButtonText: "Cerrar",
	    backgroundOpacity: 0.7,
	    className: "rumbleui-box",
	    closeOnClick: false
	  };

	  Object.extend(this.options, options || {});
  },

  createBox: function() {
	  this.backgroundElement = new Element("div");
	  this.windowElement = new Element("div");
	  this.box = new Element("div");
	  this.boxInner = new Element("div");
	  this.controls = new Element("div");
	  this.closeButton = new Element("span");

	  // this.boxInner.style.position = "absolute";

	  this.backgroundElement.id = "rumbleui-box-background";
	  this.backgroundElement.setStyle( {
		  opacity: this.options.backgroundOpacity
	  });

	  this.windowElement.id = "rumbleui-box-window";
	  this.windowElement.style.position = "absolute";
	  this.windowElement.style.top = this.backgroundElement.style.top = "0px";
	  this.windowElement.style.left = this.backgroundElement.style.left = "0px";
	  this.windowElement.style.width = this.backgroundElement.style.width = "100%";
	  this.windowElement.style.height = this.backgroundElement.style.height = Math.max(document.body.scrollHeight,
	      document.viewport.getHeight())
	      + "px";

	  this.backgroundElement.style.position = "fixed";
	  this.backgroundElement.style.right = "0px";
	  this.backgroundElement.style.bottom = "0px";

	  this.box.id = "rumbleui-box";
	  this.box.className = this.options.className;

	  this.boxInner.id = "rumbleui-box-inner";

	  this.controls.id = "rumbleui-box-control";
	  this.controls.className = "rumbleui-controls";

	  this.closeButton.id = "rumbleui-box-button-close";
	  this.closeButton.update("<span>" + this.options.closeButtonText + "</span>");
	  this.closeButton.className = "rumbleui-button rumbleui-button-close";

	  document.body.appendChild(this.backgroundElement);
	  document.body.appendChild(this.windowElement);
	  this.windowElement.appendChild(this.box);
	  this.controls.appendChild(this.closeButton);
	  this.box.appendChild(this.controls);
	  this.box.appendChild(this.boxInner);

	  // Set up events
	  this.backgroundElement.onclick = this.onBackgroundClick.bindAsEventListener(this);
	  this.box.onclick = this.onBoxClick.bindAsEventListener(this);
	  this.box.onmousemove = this.onBoxMouseOver.bindAsEventListener(this);
	  this.closeButton.onclick = this.onCloseClick.bindAsEventListener(this);

  },

  createSlideShowControls: function() {
	  this.controls.addClassName("slide-show");
	  this.previousButton = new Element("span");
	  this.infoText = new Element("span");
	  this.nextButton = new Element("span");
	  this.previousButton.update("<span>Previous</span>");
	  this.infoText.update("<span>1/20</span>");
	  this.nextButton.update("<span>Next</span>");
	  this.previousButton.className = "rumbleui-button";
	  this.nextButton.className = "rumbleui-button";
	  this.controls.appendChild(this.previousButton);
	  this.controls.appendChild(this.infoText);
	  this.controls.appendChild(this.nextButton);
	  this.controls.hide();
  },

  show: function(content, overrideOptions) {

	  options = Object.clone(this.options);
	  Object.extend(options, overrideOptions || {});

	  if (this.backgroundElement == undefined) {
		  this.createBox();
		  if (this.elements) {
			  this.createSlideShowControls();
		  }
	  }

	  this.boxInner.update();
	  var startSize = 100;

	  this.box.style.width = startSize + "px";
	  this.box.style.height = startSize + "px";
	  var scrollOffset = document.viewport.getScrollOffsets();
	  var i = scrollOffset[1] + (((document.viewport.getHeight() + options.height) / 2) - options.height);
	  var y = scrollOffset[1] + (((document.viewport.getHeight() + startSize) / 2) - startSize);
	  this.box.style.marginTop = y + "px";

	  new Effect.Morph(this.box, {
	    duration: 0.5,
	    style: {
	      marginTop: i + "px",
	      width: options.width + "px",
	      height: options.height + "px"
	    },
	    afterFinish: (function() {
		    this.boxInner.update(content);
	    }).bind(this)
	  });

	  this.backgroundElement.show();
	  this.windowElement.show();
	  return false;
  },

  hide: function() {
	  this.boxInner.update();
	  new Effect.Fade(this.windowElement, {
	    duration: 0.5,
	    afterFinish: (function() {
		    this.backgroundElement.hide();
	    }).bind(this)
	  });
  },

  load: function(element, set) {
	  if (set) {
		  this.elements = $(element).select("a[rel='" + set + "']");
	  } else {
		  this.elements = $(element).select("a");
	  }
	  this.elements.each((function(element) {
		  element.onclick = this.onLoadedElementClick.bindAsEventListener(this, element);
	  }).bind(this));
  },

  loadImage: function(url) {
	  var image = new Image();
	  image.onload = this.onImageLoad.bind(this, image);
	  image.src = url;
  },

  /**
	 * Events
	 */
  onBoxClick: function(event) {
  },

  onBoxMouseOver: function() {
	  this.controls.show();
  },

  onBackgroundClick: function() {
	  this.hide();
  },

  onCloseClick: function() {
	  this.hide();
  },

  onLoadedElementClick: function(event, element) {
	  this.loadImage(element.href);
	  return false;
  },

  onImageLoad: function(image) {
	  this.show("<img src=\"" + image.src + "\">", {
	    width: image.width,
	    height: image.height
	  });
  }
}