var hostingPackages = function() {
	
	var clearRadioButtons = function() {
		var oRdContract = document.getElementsByName('contract');
		for(i = 0; i < oRdContract.length; i++) {
			oRdContract[i].checked = false;
		};
	};
	
	var setButtons = function() {
		// remove any checked states for the radio buttons
		var oRdContract = document.getElementsByName('contract');
		for(i = 0; i < oRdContract.length; i++) {
			oRdContract[i].checked = false;
			oRdContract[i].className = oRdContract[i].className + ' js';
		};
		
		// display the buttons
		var arBtns = document.getElementsByTagName('button');
		var strTemp = '';
		for(i = 0; i < arBtns.length; i++) {
			strTemp = arBtns[i].className.replace('nonjs','js');
			arBtns[i].className = arBtns[i].className.replace('nonjs','js');
			arBtns[i].onclick = function() {
				clearRadioButtons();
				try {
					document.getElementById(this.getAttribute('id').substr(3)).checked = true;
				} catch(err) {};
			};
		};
		try { document.getElementById('btnSubmitNonJs').className = document.getElementById('btnSubmitNonJs').className + ' nonjs'; } catch(err) {};
	};
	
	this.setButtons = setButtons;
	
	this.loadOverlay = function(pkgType, custType) {
		// attempt to notify Google Analytics that the overlay has loaded.
		try {
			pageTracker._trackPageview('/hosting/overlay/' + custType + '/' + pkgType); 
		} catch(err) {
		};
		
		var arErrors = [];
	
		var customerType = 0;			// 0 = Personal, 2 = Business
		var packageType = 1;			// 0 = Standard, 1 = Premium
		try {
			var oTabStandard = document.getElementById('standardLink');
			var oTabPremium = document.getElementById('premiumLink');
			var oRdWIN = document.getElementById('OSWIN');
			var oRdLIN = document.getElementById('OSLIN');
			var arPanels = [ [document.getElementById('standardOptionsPersonal'),'WINDOWS_STANDARD','LINUX_STANDARD','ps'],
							 [document.getElementById('premiumOptionsPersonal'),'WINDOWS_PREMIUM','LINUX_PREMIUM','pp'],
							 [document.getElementById('standardOptionsBusiness'),'WINDOWS_BUSINESS_STANDARD','LINUX_BUSINESS_STANDARD','bs'],
							 [document.getElementById('premiumOptionsBusiness'),'WINDOWS_BUSINESS_PREMIUM','LINUX_BUSINESS_PREMIUM','bp'] ];
		} catch(err) {
			arErrors.push(err);
		};
		
		var setPanels = function() {
			try {
				var custValue = customerType + packageType;
						
				// hide all the panels
				for(i = 0; i < arPanels.length; i++) {
					arPanels[i][0].style.display = 'none';
				};
		
				// set the correct tab style
				if(packageType == 0) {
					oTabStandard.className = 'selected';
					oTabPremium.className = '';
				} else {
					oTabStandard.className = '';
					oTabPremium.className = 'selected';
				};
				
				// set the background image
				if(customerType == 0) {
					document.getElementById('headingContainer').className = 'pers-heading';
					document.getElementById('lnkPers').style.display = 'none';
					document.getElementById('lnkBus').style.display = 'block';
				} else {
					document.getElementById('headingContainer').className = 'bus-heading';
					document.getElementById('lnkPers').style.display = 'block';
					document.getElementById('lnkBus').style.display = 'none';
				};
				
				// get the selected radio button
				// first get all the radio buttons
				var oRdContract = document.getElementsByName('contract');
				oRdContract.selectedID = 'Null';
				oRdContract.initialID = 'Null';
				// find the one that is selected
				for(i = 0; i < oRdContract.length; i++) {
					if(oRdContract[i].checked == true) {
						oRdContract.selectedID = oRdContract[i].getAttribute('id').substring(0,oRdContract[i].getAttribute('id').length-2);
					};
					if(oRdContract.initialID == 'Null') {
						oRdContract.initialID = oRdContract[i].getAttribute('id').substring(0,oRdContract[i].getAttribute('id').length-2);
					};
				};
				
				// now unselected them all
				for(i = 0; i < oRdContract.length; i++) {
					oRdContract[i].checked = false;
				};
				
				// now select the relevant one
				if(oRdContract.selectedID == 'Null' && oRdContract.initialID != 'Null') {
					// nothing currently selected so select the top one of that block
					document.getElementById(oRdContract.initialID + arPanels[custValue][3]).checked = 'checked';
				} else {
					document.getElementById(oRdContract.selectedID + arPanels[custValue][3]).checked = 'checked';
				};
				
				// show the correct panel
				arPanels[custValue][0].style.display = 'block';
				oRdWIN.value = arPanels[custValue][1];
				oRdLIN.value = arPanels[custValue][2];
			} catch(err) {
				arErrors.push(err);
			};
			if(arErrors.length > 0) {
				showErrors();
				return false;
			};
		};
		
		var init = function(pkgType, custType) {
			try {
				if(pkgType.toUpperCase() == 'STANDARD') {
					packageType = 0;
				} else {
					packageType = 1;
				};
				if(custType.toUpperCase() == 'BUSINESS') {
					customerType = 2;
				} else {
					customerType = 0;
				};
			} catch(err) {
				packageType = 1;
				customerType = 0;
			};
			
			// assign onclick events to the page elements
			try {
				document.getElementById('lnkPers').onclick = function() {
					customerType = 0;
					setPanels();
					return false;
				};
				document.getElementById('lnkBus').onclick = function() {
					customerType = 2;
					setPanels();
					return false;
				};
				document.getElementById('lnkStd').onclick = function() {
					packageType = 0;
					setPanels();
					return false;	
				};
				document.getElementById('lnkPrm').onclick = function() {
					packageType = 1;
					setPanels();
					return false;	
				};
				
				// Set up JS based buy now buttons
				setButtons();
				
				// initialise the panels
				setPanels();
				
				try { document.getElementById('hostingSignupForm').onselectstart = function () { return false; } /* ie  */ } catch(err) {};
				try { document.getElementById('hostingSignupForm').onmousedown = function () { return false; } /* mozilla */ } catch(err) {};

			} catch(err) {
				arErrors.push(err);
			};
			
			if(arErrors.length > 0) {
				showErrors();
				return false;
			};
		};
		
		var showErrors = function() {
			var strErr = ''
			for(i = 0; i < arErrors.length; i++) {
				strErr = strErr + arErrors[i] + '\n';
			};
//			alert('The following error(s) occured: \n\n' + strErr);
		}
		
		init(pkgType, custType);
		
		if(arErrors.length > 0) {
			showErrors();
			return false;
		};
	
	};
	
	this.loadCarousel = function(listPanels) {
		
		// Parameter variables
		var speed = 1.5;												// Sets the speed of the animation/transition between panels 
																		//		- the higher the number, the slower the animation
		var delay = 8000;												// Set the delay between each animation/transition - value in milliseconds
		var autoScroll = true;											// Autoscroll on/off (true = on, false = off)
		var restartAuto = false;										// Restart autoscrolling after a user has clicked on of the buttons
		var doDisableButtons = true;									// Set the enabled/disabled states of the buttons when at the beginning or
																		// end of the list of panels
		var oContent = document.getElementById('carouselContent');		// The containing DOM element of all of the panels
		var oLnkLeft = document.getElementById('lnkMoveLeft');			// The button (href) that moves the panels left
		var oLnkRight = document.getElementById('lnkMoveRight');		// The button (href) that moves the panels right
		var btnLeft = '<img src="/pics/hosting/2010packages/carousel-btt-left.png" />';	 // Src image of left hand button
		var btnLeftDisabled = '<img src="/pics/hosting/2010packages/carousel-btt-left-disabled.png" />';	// Src image of left hand button - disabled state
		var btnRight = '<img src="/pics/hosting/2010packages/carousel-btt-right.png" />';	// Src image of right hand button
		var btnRightDisabled = '<img src="/pics/hosting/2010packages/carousel-btt-right-disabled.png" />';	// Src image of right hand button - disabled state
		var cursorOn = 'pointer';										// CSS cursor type for active buttons
		var cursorOff = 'text';											// CSS cursor type for disabled buttons
		var autoDirection = 'left';										// starting direction for autoscroll
		
		// Local variables
		var arTimers = [];
		var masterX = oContent.clientWidth + 15;
		var currentPanel = 0;
		var nextPanel = 0;
		
		// local function to clear all animation timers
		var clearTimers = function() {
			for(i = 0; i < arTimers.length; i++) {
				clearTimeout(arTimers[i]);
			};
		};
		
		// Grab DOM objects from the ID in the array and update the values in the array to be the DOm objects
		var arPanels = listPanels.split(',');
		for(i = 0; i < arPanels.length;i++) {
			try {
				arPanels[i] = document.getElementById(arPanels[i]);
			} catch(err) {
			//	alert(err);
				return false;
			}
		};
	
		var movePanels = function(direction) {
			// First, clear any existing timeouts
			clearTimers();
			
			// Get the array ordinal for the next panel to be displayed
			if(direction.toLowerCase() == 'left') {
				nextPanel = currentPanel + 1;
			} else {
				nextPanel = currentPanel - 1;
			};

			// Check for out of range values
			if(nextPanel < 0 && autoScroll) {
				// if out of range and we're autoscrolling, then grab the last item in the array to be the next panel
				nextPanel = arPanels.length - 1;
			};
			if(nextPanel >= arPanels.length && autoScroll) {
				// if out of range and we're autoscrolling, then grab the first item in the array to be the next panel
				nextPanel = 0;
			};
			
			// Set the deault button states
			oLnkLeft.innerHTML = btnLeft
			oLnkRight.innerHTML = btnRight
			
			// if autoscroll is not enabled and we have reached the upper or lower bound of the array, then bail out
			if(!autoScroll && (nextPanel < 0 || nextPanel >= arPanels.length)) {
				return false;
			};
			
			// position current and next panels on the stage
			for(i = 0; i < arPanels.length; i++) {
				// set all panels off the visible stage
				arPanels[i].style.left = masterX + 'px';
			};
			
			// set the correct positions of the relevant panels
			arPanels[currentPanel].style.left = 0 + 'px';
			if(direction.toLowerCase() == 'left') {
				arPanels[nextPanel].style.left = masterX + 'px';
			} else {
				arPanels[nextPanel].style.left = '-' + masterX + 'px';
			};
		
			// get the current positions and IDs of the panels we're animating
			var xA = arPanels[currentPanel].offsetLeft;
			var xB = arPanels[nextPanel].offsetLeft;
			var idA = arPanels[currentPanel].getAttribute('id');
			var idB = arPanels[nextPanel].getAttribute('id');

			// move the panels
			for(i = 0; i < masterX; i++) {
				// increase of decrease the position variables depending on direction
				if(direction.toLowerCase() == 'left') {
					xA--;
					xB--;
				} else {
					xA++;
					xB++;
				}
				// set the timers to animate the movement
				arTimers[1] = setTimeout('document.getElementById(\'' + idA + '\').style.left = \'' + xA + 'px\'',speed * i);
				arTimers[2] = setTimeout('document.getElementById(\'' + idB + '\').style.left = \'' + xB + 'px\'',speed * i);
			};
			
			// update the currentPanel variable to reflect the new visible panel
			currentPanel = nextPanel;
			
			// change the buttons if we're not autoscrolling and we've reached the upper or lower bound of the panel array
			arTimers[3] = setTimeout(function() {setControlState()}, speed * masterX);
			
			// do we want to restart the autoscroll feature?
			if(restartAuto) {
				autoScroll = true;
				arTimers[0] = setTimeout(function() {fnPanelAutoScroll()},delay * 2);	// doubling up the delay time so that it lingers longer
																						// on the selected panel before it starts the animation again
			};
		};
		
		// Sets the initial state of the left and right buttons and adds onClick events where required
		var setControlState = function() {
			// set default state to use the value of the auto scroll variable
			var localScroll = autoScroll;
			
			if(doDisableButtons) {
				// allows us to overide whether to use the autoscroll variable or not
				// to detect whether to disable the buttons based on their state
				// i.e. if doDisabledButtons is FALSE than the buttons will be disabled/enabled
				// according to the state of the autoScroll variable
				localScroll = false;
			};
			if(!localScroll && currentPanel < 1) {
				// change the LH button
				oLnkLeft.innerHTML = btnLeftDisabled;
				// change the cursor state
				oLnkLeft.style.cursor = cursorOff;
				// remove the onclick event
				oLnkLeft.onclick = null;
				// change autoscroll direction
				autoDirection = 'left';
			} else {
				// change the cursor state back to pointer
				oLnkLeft.style.cursor = cursorOn;
				// add the onclick event
				oLnkLeft.onclick = function() { 
					movePanels('right');
					autoScroll = false;
					return false;
				};
			};
			if(!localScroll && currentPanel >= arPanels.length - 1) {
				// change the LH button - as per RH button
				oLnkRight.innerHTML = btnRightDisabled;
				oLnkRight.style.cursor = 'text';
				oLnkRight.onclick = null;
				autoDirection = 'right';
			} else {
				oLnkRight.style.cursor = 'pointer';
				oLnkRight.onclick = function() { 
					movePanels('left');
					autoScroll = false;
					return false;
				};
			};
		};
		
		// Auto scroll function
		var fnPanelAutoScroll = function() {
			movePanels(autoDirection);
			arTimers[0] = setTimeout(function() {fnPanelAutoScroll()},delay);
		};
		
		// FF from doing drag and drop with the buttons
		try { oLnkRight.onmousedown = function () { return false; } /* mozilla */ } catch(err) {};
		try { oLnkLeft.onmousedown = function () { return false; } /* mozilla */ } catch(err) {};
		
		// Do we need to start the auto scroller
		if(autoScroll) {
			arTimers[0] = setTimeout(function() {fnPanelAutoScroll()},delay);
		};

		// set the initial state of the controls
		setControlState();	

	};
};