var ModalBox = new Class({

	Implements: [Options],

	options : {
		zIndex: 20,
	        opacity: .7,
	        backgroundColour: "#000000",
	        events: $empty(),
	        backgroundclick: true,
	        onFadeComplete: $empty()
	},
	
	backgroundlayer: null,
	showing: false,
	internalwindow: null,
	fxchain: null,

	initialize: function(divtoadopt, options) {
		this.setOptions(options);
		this.createmodal(divtoadopt);
		this.fxchain = new Chain();
	},
	
	createmodal: function(divtoadopt){
	
		newbackground = new Element("div", {
			styles: {
			    position: "absolute",
			    top: 0,
			    left: 0,
			    width: window.getScrollWidth(),
			    height: window.getScrollHeight(),
			    background: this.options.backgroundColour,
			    "z-index": this.options.zIndex
			},
			opacity: 0,
			events: {
					click: (this.options.backgroundclick ? this.onbackgroundclick.bind(this) : $lambda(false))
				}
							
		    }).inject(document.body);	
		   
		 this.backgroundlayer = newbackground;
		 
		 
		 newinternal = new Element("div", {
		 
		 	styles: {
		 	
				clear: "both",
				overflow: "hidden",
				"z-index": this.options.zIndex + 1
		 	
		 	},
		 	opacity: 0
		 }).inject(document.body);
		 
		 
		 
		 this.internalwindow = newinternal;
		 
		 modaltable = this.makeTable(divtoadopt);
		 
		 modaltable.injectInside(this.internalwindow);
		 
		 this.internalresize();
		 
		this.internaltweenout = new Fx.Tween(this.internalwindow,{
			link: 'cancel',
			property: 'opacity',
			duration: '250',
			onComplete: this.options.onFadeComplete
		});	
		
		this.internaltweenin = new Fx.Tween(this.internalwindow,{
			link: 'cancel',
			property: 'opacity',
			duration: '250'
		});		
		this.backgroundtween = new Fx.Tween(this.backgroundlayer,{
			link: 'cancel',
			property: 'opacity',
			duration: '250'
		});		
		 
		 
	
	},
	
	makeTable : function(divtoadopt) {
		var table = new Element('table');
			table.cellPadding ='0';
			table.cellSpacing ='0';
			table.border ='0';
			
			var tbody = new Element('tbody').injectInside(table);
				var tr1 = new Element('tr').injectInside(tbody);
					new Element('td', {'class' : 'modaltl'}).injectInside(tr1);
					new Element('td', {'class' : 'modalt'}).injectInside(tr1);
					new Element('td', {'class' : 'modaltr'}).injectInside(tr1);
				var tr2 = new Element('tr').injectInside(tbody);
					new Element('td', {'class' : 'modall'}).injectInside(tr2);
					var cont = new Element('td', {'class' : 'modalc'}).injectInside(tr2);
						cont.adopt(divtoadopt);
						divtoadopt.setStyle("display", "block");
					new Element('td', {'class' : 'modalr'}).injectInside(tr2);
				var tr3 = new Element('tr').injectInside(tbody);
					new Element('td', {'class' : 'modalbl'}).injectInside(tr3);
					new Element('td', {'class' : 'modalb'}).injectInside(tr3);
					new Element('td', {'class' : 'modalbr'}).injectInside(tr3);	


					
		return table;
	},	
	
	internalresize: function() {
			
		intdim = this.internalwindow.getElement("table").getDimensions();
		
		this.internalwindow.setStyles({
		
			width: intdim.width,
			height: intdim.height,
			"margin-left": "auto",
			"margin-right": "auto",
			position: "fixed",
			top: (window.getSize().y - intdim.height) / 2,
			left: (window.getSize().x - intdim.width) / 2
		
		});
	
		this.removeheightconstraint();
	
	},
	
	removeheightconstraint: function() {
		this.internalwindow.setStyle("height", "auto");
	},
	
	onbackgroundclick: function(e)
	{
		this.hidemodal();	
	},
	
	hidemodal: function(e) 
	{
		this.backgroundtween.start(0);
		
		this.internaltweenout.start(0);
		
		this.showing = false;
	},
	
	showmodal: function()
	{
		this.backgroundtween.start(this.options.opacity);
		this.internalresize();
		this.internaltweenin.start(1);
		this.showing = true;
	}

});

function callbackscript() {


	var callbackDiv = new ModalBox($("callbackcontent"))
	
	var callbackerrors = new Fx.Reveal($("cberrors"));
	var callbackspinner = new Spinner("cbfields");
	
	$("callback_btn").addEvent("click", function (e) {
	
		e.stop();
		
		callbackDiv.showmodal();
	
	});
	
	$("cb-close").addEvent("click", function(e) {
	
		e.stop();
		
		callbackDiv.hidemodal();
	
	});
	
	$("cb-submit").addEvent("click", function(e) {
	
		e.stop();
		
		callbackerrors.dissolve();
		var cbname = $("cbname").get("value");
		var cbtel = $("cbtel").get("value");
		var cbemail = $("cbemail").get("value");
		var cbpcode = $("cbpcode").get("value");
		
		var myJSONRequest = new Request.JSON({
				url: "process-cb-callback.php", 
				method: 'get',
				noCache: true,
				data: 'pcode=' + cbpcode + '&name=' + cbname + '&email=' + cbemail + "&tel=" + cbtel,
				onRequest: function() {
				
					callbackspinner.show(true);
				
				},
				onSuccess: function(returnedjson) {
				
					callbackspinner.hide(true);
					
					if(returnedjson.completed == 1)
					{
						$("cbfields").empty();
						$("cbfields").set("html", "Thank you for submitting your callback request - we will get back to you as soon as possible");
						pageTracker._trackPageview('/conversion_page.html');
					}
					else
					{
						$("cberrors").set("html", returnedjson.errors);
						callbackerrors.reveal();
					}
				
				}
		}).send();
	
	});

}