/**
 * 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 :"Close",
			backgroundOpacity :0.7,
			className :"rumbleui-box"
		};

		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) {
		Event.stop(event);
		return false;
	},

	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
		});
	}
}