var Overlay = {
	init: function() {
		if (!this.overlay) {
			this.overlay = new Element("div").setStyles({
				"position":"absolute",
				"left":"0",
				"width":"100%",
				"background-color":"#000000",
				"z-index":100
			}).injectInside(document.body);
			this.overlay.fx = {};
			this.overlay.fx.opacity = new Fx.Style(this.overlay, "opacity", {duration:300});
			this.overlay.fx.opacity.set(0);
			this.overlay.addEvent("click", function() {
				this.hide();
			}.bind(this));
			window.addEvent("resize", function() {
				this.setpos();
			}.bind(this));
		}
	},
	show: function(immediate) {
		this.showing = true;
		this.init();
		this.setpos();
		this.overlay.setStyle("display","block");
		this.overlay.fx.opacity.stop();
		this.overlay.fx.opacity[(immediate) ? "set" : "start"](0.8).chain(this.fixdisp.bind(this));
	},
	hide: function(immediate) {
		this.showing = false;
		if (this.closer) {
			this.closer();
			this.closer = null;
		}
		this.overlay.fx.opacity.stop();
		this.overlay.fx.opacity[(immediate) ? "set" : "start"](0).chain(this.fixdisp.bind(this));
	},
	//fix the displayable state of the overlay
	fixdisp: function() {
		this.overlay.setStyle("display",this.showing ? "block" : "none");
	},
	setpos: function() {
		this.overlay.setStyles({
			top: window.getScrollTop()+"px", 
			height: window.getHeight()+"px"});
	},
	//set a function to be called when the overlay is closed
	setcloser: function(closer) {
		this.closer = closer;
	}
};

var Whitebox = {
	init: function() {
		if (!this.loaded) {
			this.loaded = true;
			this.whitebox = new Element("div").setStyles({
				"position":"absolute",
				"z-index":110
			}).injectInside(document.body);
			this.cbox = new Element("div").setStyles({
				"position":"absolute",
				"padding":"3px",
				"left":"0px","top":"0px","bottom":"0px","right":"0px",
				"background-color":"#FFFFFF",
				"overflow":"hidden"
			}).injectInside(this.whitebox);
			//BROWSERHACK: cbox fx needed in ie6
			this.cbox.fx = new Fx.Styles(this.cbox);
			this.whitebox.fx = new Fx.Styles(this.whitebox);
			this.closebut = new Element("img").setStyles({
				"position":"absolute",
				"top":"0px",
				"right":"-25px"
			}).setProperty("src","img/home/Close.png")
			.addEvent("mouseover", function() {
				this.setProperty("src","img/home/CloseOver.png");	
			}).addEvent("mouseout", function() {
				this.setProperty("src","img/home/Close.png");	
			}).addEvent("mousedown", function() {
				this.hide();
			}.bind(this))
			.injectInside(this.whitebox);
			window.addEvent("resize", function() {
				this.setpos();
			}.bind(this));
		}
	},
	//sets a requested width and height. Set to null for automatic dimensioning to about half
	requestsize: function(w,h) {
		this.reqw = w;
		this.reqh = h;
	},
	show: function(immediate) {
		//alert("showing");
		Overlay.show(immediate);
		Overlay.setcloser(function() {
			this.hideSansOverlay(immediate);
		}.bind(this));
		this.init();
		this.showing = true;
		this.fixdisp();
		this.whitebox.setStyles({
			"left": (window.getWidth())/2,
			"top": (window.getHeight())/2,
			"margin-left": 0,
			"margin-top": 0,
			"width":0,
			"height":0			
		});
		this.setpos(immediate);
		this.whitebox.setStyle("display","block");
	},
	hide: function(immediate) {
		Overlay.hide(immediate);
		this.hideSansOverlay(immediate);
	},
	hideSansOverlay: function(immediate) {
		this.showing = false;
		this.whitebox.fx.stop();
		this.whitebox.fx[immediate ? "set" : "start"]({
			"left": (window.getWidth())/2,
			"top": (window.getHeight())/2,
			"margin-left": 0,
			"margin-top": 0,
			"width":0,
			"height":0			
		}).chain(this.fixdisp.bind(this));
		//BROWSERHACK: we need to manually set size in ie6
		if (window.ie6) {
			this.cbox.fx[immediate ? "set" : "start"]({
				"width":0,
				"height":0
			});
		}
	},
	setContent: function(cont) {
		this.init();
		this.content = cont;
		cont.injectInside(this.cbox);
	},
	//fix the displayable state of the overlay
	fixdisp: function() {
		this.whitebox.setStyle("display",this.showing ? "block" : "none");
		if (this.content && !this.showing) {
			this.cbox.removeChild(this.content);
			this.content = null;
		}
	},
	setpos: function(immediate) {
		if (!this.showing) {
			return;
		}
		if (this.reqw) {
			this.wwidth = this.reqw;
		} else {
			this.wwidth = window.getWidth() * (3/4);
		}
		if (this.reqh) {
			this.wheight = this.reqh;
		} else {
			this.wheight = window.getHeight() * (3/4);
		}
		
		this.whitebox.fx.stop();
		this.whitebox.fx[immediate ? "set" : "start"]({
			"left": (window.getWidth())/2,
			"top": (window.getHeight())/2 + window.getScrollTop(),
			"margin-left": -this.wwidth/2,
			"margin-top": -this.wheight/2,
			"width":this.wwidth,
			"height":this.wheight
		}).chain(this.fixdisp.bind(this));
		//BROWSERHACK: we need to attach the box manually in ie6
		if (window.ie6) {
			this.cbox.fx[immediate ? "set" : "start"]({
				"width":this.wwidth,
				"height":this.wheight 
			});
		}
	}
}