var debug = function(val) {
	try { document.getElementById('testOutput').innerHTML = val; } catch(err) {};
};

function vpsConfig(arPresets) {
	this.presets = arPresets;
	// bin anything that is JS only
	var arTags = ['dd','p','dl'];
	var arElements;
	var i, n;
	for(i = 0; i < arTags.length;i++) {
		// loop through the list of tag names and dump them in an array
		arElements = document.getElementsByTagName(arTags[i]);
		for(n = 0; n < arElements.length;n++) {
		// loop through the array and if the className matches, strip it off the element
			if(arElements[n].className.match('jsonly')) {
				arElements[n].className = arElements[n].className.replace('jsonly','');
			};
		};
	};
	// update the classnames for the overlay to the JavaScript enabled state
	document.getElementById('vpsForm').className = 'js';
	
	
	// local variabls
	var oCurrentPanel, oCurrentCtrl;
	var arOverlays;
	var fnUpdate = function() {};						// blank function that we can use to reference external functions by
	this.onUpdate = function( fn ) { fnUpdate = fn; };
	var fnSelect = function() {};						// blank function that we can use to reference external functions - used when changing other values
	this.onSelect = function( fn ) { fnSelect = fn; };
	var currentOS = '';
	
	var runSelect = function() {			
		// function that runs any update script we want to use
		// executes any external functions that have been passed to the class - triggered on update
		try {
			fnSelect();
		} catch(err) {
			alert(err);
		};
	};
	
	var Methods = {
		
		resetOverlays : function(ctrl, panel) {
			try {
				var o, c;
				// loop through the array of overlay elements
				for(i = 0; i < arOverlays.length; i++ ) {
					// assign the page elements to objects for ease
					p = document.getElementById(arOverlays[i][0]);
					c = document.getElementById(arOverlays[i][1]);
					// check that we have valid elements
					ctrl = $fh.isElement(ctrl);
					panel = $fh.isElement(panel);
					// test the elements and bail out if fail
					if(!ctrl || !panel) { return false; };
					
					// only test elements that the user has not clicked on and where the className is 'open'
					if(ctrl != c && c.className.indexOf('open') != -1) {
						// toggle it to hide the element and change the button
						Methods.toggle(c,p);
					};
				};
			} catch(err) {
				//alert(err);
			};
		},
		
		setLinkState : function(el) {
			if(!el) { 
				return false; 
			};
			if(el.className.indexOf('open') == -1) {
				el.className = el.className + ' open';
			} else {
				el.className = el.className.replace('open','');
			};
		},
		
		toggle : function(ctrl, pnl) {
			try {
				$fh.toggle(ctrl, pnl, 300, 'fade');
				Methods.updateFields();
				Methods.setLinkState(ctrl);
			} catch(err) {
				//alert(err);
			};
		},
		
		hide : function(el) {
			if(el) { $fh.hide(el); };
		},
		
		show : function(el) {
			if(el) { $fh.show(el); };
		},
		
		updateFields : function() {
			// loop through the server types
			var oType = document.getElementsByName('rdServerType');
			oType.display = document.getElementById('vpsspec');
			for(i = 0; i < oType.length; i++) {
				if(oType[i].checked) {
					oType.display.innerHTML = oType[i].getAttribute('rel');
				};
				oType[i].ordinal = i;
				oType[i].onclick = function() {
					Methods.updateFields();
					Methods.toggle(oCurrentCtrl,oCurrentPanel);
					if(this.ordinal != 0) {
						fnUpdate(arPresets[this.ordinal - 1]);
					};
				};
			};
			
			// loop through the IP address values
			var oIPs = document.getElementsByName('ips');
			oIPs.display = document.getElementById('ipvalue');
			for(i = 0; i < oIPs.length; i++) {
				if(oIPs[i].checked) {
					oIPs.display.innerHTML = oIPs[i].getAttribute('rel');
				};
				oIPs[i].onclick = function() {
					Methods.updateFields();
					Methods.toggle(oCurrentCtrl,oCurrentPanel);
					runSelect();
				};
			};
			
			// loo through the OS types
			var oOS = document.getElementsByName('os');
			oOS.display = document.getElementById('osname');
			for(i = 0; i < oOS.length; i++) {
				if(oOS[i].checked) {
					oOS.display.innerHTML = oOS[i].getAttribute('rel');
					// check what kind of OS we have and set the style accordingly so that the OS icon appears
					
					// clear any existsing styles
					document.getElementById('selectOS').className = document.getElementById('selectOS').className.replace(/linux/gi,'')
					document.getElementById('selectOS').className = document.getElementById('selectOS').className.replace(/windows/gi,'')
					document.getElementById('selectOS').className = document.getElementById('selectOS').className.replace(/redhat/gi,'')
					document.getElementById('selectOS').className = document.getElementById('selectOS').className.replace(/centos/gi,'')
						
					// add the new class name
					if(oOS[i].className.match('windows')) {
						// windows OS
//						document.getElementById('selectOS').className += ' windows';
						currentOS = 'windows';
						Methods.setActionPanel('windows');
					} else if(oOS[i].className.match('linux')) {
						// linux OS
//						document.getElementById('selectOS').className += ' linux';	
						currentOS = 'linux';
						Methods.setActionPanel('linux');
					} else if(oOS[i].className.match('redhat')) {
						// redhat OS
//						document.getElementById('selectOS').className += ' redhat';	
						currentOS = 'redhat';
						Methods.setActionPanel('redhat');
					} else if(oOS[i].className.match('centos')) {
						// centos OS
//						document.getElementById('selectOS').className += ' centos';	
						currentOS = 'centos';
						Methods.setActionPanel('centos');
					} else {
						currentOS = '';
						Methods.setActionPanel('windows');
					};
					document.getElementById('selectOS').className += ' ' + currentOS;
					
				};
				oOS[i].onclick = function() {
					Methods.updateFields();
					Methods.toggle(oCurrentCtrl,oCurrentPanel);
					runSelect();
				};
			};
			
		},
		
		setCustom : function() {
			var oType = document.getElementsByName('rdServerType');
			oType.display = document.getElementById('vpsspec');
			for(i = 0; i < oType.length; i++) {
				oType[i].checked = false;
			};
			oType[0].checked = true;
			Methods.updateFields();
		}, 
		
		setOverlays : function(ar) {
			try {
				arOverlays = ar;
			} catch(err) {};
		},
		
		updatePrice : function() {
			try {
				var arData = [ [6,0.25,4,4.99,1,6,0,25], [5,0.2,3,2.99,1,5,0,20], [55,2.2,33,32.89,12,55,0,220] ];
				var m = ($fh.fetch('ram_val').value / 1024).toFixed(1);
				var s = $fh.fetch('hdd_val').value;
				var c = $fh.fetch('cpu_val').value;
				var ip = document.getElementsByName('ips');
				var t = 0;
				var h = 0;
				var f = 0;
				var v = 0;
				var ipV = 0;
				var p = document.getElementsByName('payment');
				var yearly = false;

				// How many ip addresses?
				for(i = 0; i < ip.length; i++) {
					if(ip[i].checked && ip[i].value > 2) {
						ipV = ip[i].value - 2;
					};
				};
				
				// Is there an OS cost?
				var os = function(i) {
					if(currentOS == 'windows') {
						return arData[i][5];
					} else if(currentOS == 'centos') {
						return arData[i][6];
					} else if(currentOS == 'redhat') {
						return arData[i][7];
					};
				};
				
				// calculate prices for all periods
				var pP = ((m*arData[0][0])+(s*arData[0][1])+(c*arData[0][2])+arData[0][3]+(ipV*arData[0][4])+os(0)).toFixed(2);
				var pM = ((m*arData[1][0])+(s*arData[1][1])+(c*arData[1][2])+arData[1][3]+(ipV*arData[1][4])+os(1)).toFixed(2);
				var pY = ((m*arData[2][0])+(s*arData[2][1])+(c*arData[2][2])+arData[2][3]+(ipV*arData[2][4])+os(2)).toFixed(2);
				var arPrices = [pP, pM, pY];

				// Whch price period is selected?
				for(i = 0; i < p.length; i++) {
					if(p[i].checked) {
						t = arPrices[i];
						if(i == 2) { yearly = true; };
					};
				};
				
				h = Math.floor(t);
				f = (t - h).toFixed(2) * 100;
				v = (t * 1.175).toFixed(2);
				
				$fh.fetch('vpsPriceValue').innerHTML = '&pound;' + h + '<span>.' + f + '</span>';
				if(yearly) {
					var equiv = (t/12).toFixed(2)
					$fh.fetch('vpsPriceVAT').innerHTML = 'Per year &pound;' + v + ' inc VAT <span>(&pound;' + equiv + ' ex VAT per month)</span>';
					$fh.fetch('annualSaving').innerHTML = '&pound;' + ((arPrices[1]*12) - arPrices[2]).toFixed(2);
				} else {
					$fh.fetch('vpsPriceVAT').innerHTML = 'Per month &pound;' + v + ' inc VAT';
				};
				$fh.fetch('annualSaving').innerHTML = '&pound;' + ((arPrices[0]*12) - arPrices[2]).toFixed(2);
			} catch(err) {
				//alert(err);	
			};
		},
		
		setActionPanel : function(mode) {
			var a = $fh.fetch('vpsActions');
			var f = $fh.fetch('vpsForm');
			
			
			
		}

	};
	
	this.isCustom = Methods.setCustom;
	this.setOverlays = Methods.setOverlays;
	this.updatePrice = Methods.updatePrice;
	
	this.init = function() {
		// initialise the script
		
		// Hide the overlays and attach toggles
		var oLink, oPanel;
		for(i = 0; i < arOverlays.length; i++) {
			// hide the overlays
			Methods.hide(arOverlays[i][0]);
			// grab the current controler element
			oLink = document.getElementById(arOverlays[i][1]);

			// assign properties to it so we can pass them more easily in the events
			oLink.panelID = arOverlays[i][0];
			oLink.panel = document.getElementById(arOverlays[i][0]);
			oLink.visible = false;
			
			// do the same for the overlay panel
			oPanel = document.getElementById(arOverlays[i][0]);
			oPanel.ID = arOverlays[i][0];
			oPanel.ctrl = oLink;
	
			// assign events
			oLink.onclick = function() {
				// close any other overlays that might be open
				Methods.resetOverlays(this, this.panelID);
				// toggle the panels
				Methods.toggle(this, this.panelID);
				// set the place holder vars that the radio button lists use
				oCurrentCtrl = this;
				oCurrentPanel = this.panelID;
			};
		};
		// initialise the page
		Methods.updateFields();		
	};
	
};