/*********************************************************************************************
 * NB. Requires Mootools 1.2 Core and More files
 * 
 * Class: Blockout
 *
 * Attributes:
 * 		clickToHide: boolean - if true adds an onClick event to the blockout divs to allow easy removal for users
 *      onHide: function - a funcion run upon hiding the blockout
 *      onShow: function - a function run upon showing the blockout
 * 
 * Functions:
 * 		showBlockout: uses a div and sizes it to the body height/width (add custom CSS to display as blockout - e.g. opacity: 0.5)
 * 		highlightElement: uses four blockout divs which surround the element passed as an argument.
 * 		hideBlockout: hides all blockout divs    
 *
 ********************************************************************************************* 
 */
var Blockout = new Class({
	clickToHide: false,
	onHide: $empty,
	onShow: $empty,
	initialize: function() {
		new Element("div", {"id":"blockoutTop", "class":"blockout"}).inject(document.body);
		new Element("div", {"id":"blockoutBottom", "class":"blockout"}).inject(document.body);
		new Element("div", {"id":"blockoutLeft", "class":"blockout"}).inject(document.body);
		new Element("div", {"id":"blockoutRight", "class":"blockout"}).inject(document.body);
	},
	showBlockout: function(containerElement) {
		var docCoords = document.getCoordinates();
		$("blockoutTop").setStyles({
			"top":"0px",
			"left":"0px",
			"width":"100%",
			"height": docCoords.height + "px",
			"display":"block"
			});
		if (this.clickToHide) {
			$("blockoutTop").addEvent("click", function() {this.hideBlockout()}.bind(this));
		}
		this.onShow();
	},
	hideBlockout: function() {
		$$(".blockout").each(function(e) {e.setStyle("display","none")});
		this.onHide();
	},
	highlightElement: function(element) {
		var coords = $(element).getCoordinates();
		var docCoords = document.getCoordinates();
		$("blockoutTop").setStyles({
			"top":"0px",
			"left":"0px",
			"width":"100%",
			"height": coords.top + "px"
			});
		$("blockoutBottom").setStyles({
			"top":coords.top+coords.height+"px",
			"left":"0px",
			"width":"100%",
			"height": document.body.offsetHeight - (coords.top+coords.height) +"px"
			});	
		$("blockoutLeft").setStyles({
			"top":coords.top + "px",
			"left": "0px",
			"width":coords.left + "px",
			"height":coords.height + "px"
			});
		$("blockoutRight").setStyles({
			"top":coords.top + "px",
			"left":coords.left + coords.width + "px",
			"right":"0px",
			//"width":docCoords.width - coords.right + "px",
			"height":coords.height + "px"
			});	
		$$(".blockout").each(function(e) {
			e.setStyle("display","block");
			if (this.clickToHide) {
				e.addEvent("click", function() {this.hideBlockout()}.bind(this));
			}
		}.bind(this));
		this.onShow();
	}
});
