document.observe('dom:loaded', function() {   
	
	function resetTabs() {		
		var listItems = $('tabs-list').getElementsByTagName('LI');		
		for (var i = 0; i < listItems.length; i++)
			listItems[i].className = '';
	}
	
	function resetColumns() {
		var tableCells = $('pricing-table').getElementsByTagName('TD');
		for (var j = 0; j < tableCells.length; j++){
				var temp = tableCells[j].className.split(' ', 1);
				if (temp[1] != '')
					tableCells[j].className = temp[0];
		}
	}
	
	var changeTab = function() {
		var temp = this.id.split('-', 1);
		tabName = temp[0] + '-tab';
		planName = temp[0];
		var radioName = planName + '-radio';
		var planColumn = $$('.'+planName);
		
		resetTabs();
		resetColumns();
		
		$(tabName).className = 'active';
		$(radioName).checked = true;
		
		for (var i = 0; i < planColumn.length; i++) {
			planColumn[i].className = planName + ' active-column';
		}
		
		switch (planName) {
			case 'free':
				$('account').selectedIndex = 0;
				break;
			case 'pro':
				switch ($('pro-storage').value) {
					case 'PRO100-M-SUB':
						$('account').selectedIndex = 1;
						break;
					case 'PRO100-Y-SUB':
						$('account').selectedIndex = 2;
						break;
					case 'PRO500-M-SUB':
						$('account').selectedIndex = 3;
						break;
					case 'PRO500-Y-SUB':
						$('account').selectedIndex = 4;
						break;
				}
				break;
			case 'enterprise':
				switch ($('enterprise-storage').value) {
					case 'PRO1000-Y-SUB':
						$('account').selectedIndex = 5;
						break;
					case 'PRO2000-Y-SUB':
						$('account').selectedIndex = 6;
						break;
					case 'PRO5000-Y-SUB':
						$('account').selectedIndex = 7;
						break;
					case 'PRO10000-Y-SUB':
						$('account').selectedIndex = 8;
						break;
				}
				break;
		}
	}
	
	var updateProCost = function() {
		var proCell = $('pro-cost');
		switch(this.selectedIndex) {
			case 0:
				proCell.innerHTML = '$4.99/month';
				new Effect.Highlight(proCell, { startcolor: '#ffbb77', endcolor: '#ffffcc' });
				break;
			case 1:
				proCell.innerHTML = '$54.89/year';
				new Effect.Highlight(proCell, { startcolor: '#ffbb77', endcolor: '#ffffcc' });
				break;
			case 2:
				proCell.innerHTML = '$9.99/month';
				new Effect.Highlight(proCell, { startcolor: '#ffbb77', endcolor: '#ffffcc' });
				break;
			case 3:
				proCell.innerHTML = '$109.89/year';
				new Effect.Highlight(proCell, { startcolor: '#ffbb77', endcolor: '#ffffcc' });
				break;
		}
	}
	
	var updateEnterpriseCost = function() {
		var enterpriseCell = $('enterprise-cost');
		switch(this.selectedIndex) {
			case 0:
				enterpriseCell.innerHTML = '$240/year';
				new Effect.Highlight(enterpriseCell, { startcolor: '#ffbb77', endcolor: '#ffffcc' });
				break;
			case 1:
				enterpriseCell.innerHTML = '$480/year';
				new Effect.Highlight(enterpriseCell, { startcolor: '#ffbb77', endcolor: '#ffffcc' });
				break;
			case 2:
				enterpriseCell.innerHTML = '$1,200/year';
				new Effect.Highlight(enterpriseCell, { startcolor: '#ffbb77', endcolor: '#ffffcc' });
				break;
			case 3:
				enterpriseCell.innerHTML = '$2,400/year';
				new Effect.Highlight(enterpriseCell, { startcolor: '#ffbb77', endcolor: '#ffffcc' });
				break;
		}
	}
	
	$('free-tab').observe('click', changeTab);
	$('pro-tab').observe('click', changeTab);
	$('enterprise-tab').observe('click', changeTab);
	
	$('enterprise-storage').observe('change', updateEnterpriseCost);
	$('enterprise-storage').observe('change', changeTab);
	
	$('pro-storage').observe('change', updateProCost);
	$('pro-storage').observe('change', changeTab);
	
	
	var changeTabFromForm = function () {
		resetTabs();
		resetColumns();

		switch (this.value) {
			
			case 'free':
			
				$('free-tab').className = 'active';
				$('free-radio').checked = true;
				var planColumn = $$('.free');
				for (var i = 0; i < planColumn.length; i++) {
					planColumn[i].className = 'free active-column';
				}
				
				break;
				
			case 'PRO100-M-SUB':
			case 'PRO500-M-SUB':
			case 'PRO100-Y-SUB':
			case 'PRO500-Y-SUB':
			
				if (this.value == 'PRO100-M-SUB') {
					$('pro-storage').selectedIndex = 0;					
					$('pro-cost').innerHTML = '$4.99/month';
					new Effect.Highlight('pro-cost', { startcolor: '#ffbb77', endcolor: '#ffffcc' });
				} else if (this.value == 'PRO100-Y-SUB') {
					$('pro-storage').selectedIndex = 1;					
					$('pro-cost').innerHTML = '$54.89/year';
					new Effect.Highlight('pro-cost', { startcolor: '#ffbb77', endcolor: '#ffffcc' });
				} else if (this.value == 'PRO500-M-SUB') {
					$('pro-storage').selectedIndex = 2;
					$('pro-cost').innerHTML = '$9.99/month';
					new Effect.Highlight($('pro-cost'), { startcolor: '#ffbb77', endcolor: '#ffffcc' });
				} else if (this.value == 'PRO500-Y-SUB') {
					$('pro-storage').selectedIndex = 3;
					$('pro-cost').innerHTML = '$109.89/year';
					new Effect.Highlight($('pro-cost'), { startcolor: '#ffbb77', endcolor: '#ffffcc' });
				}
				$('pro-tab').className = 'active';
				$('pro-radio').checked = true;
				var planColumn = $$('.pro');
				for (var i = 0; i < planColumn.length; i++) {
					planColumn[i].className = 'pro active-column';
				}
				
				break;
				
			case 'PRO1000-Y-SUB':
			case 'PRO2000-Y-SUB':
			case 'PRO5000-Y-SUB':
			case 'PRO10000-Y-SUB':
			
				if (this.value == 'PRO1000-Y-SUB') {
					$('enterprise-storage').selectedIndex = 0;
					$('enterprise-cost').innerHTML = '$240/year';
					new Effect.Highlight($('enterprise-cost'), { startcolor: '#ffbb77', endcolor: '#ffffcc' });
				}
				else if (this.value == 'PRO2000-Y-SUB') {
					$('enterprise-storage').selectedIndex = 1;
					$('enterprise-cost').innerHTML = '$480/year';
					new Effect.Highlight($('enterprise-cost'), { startcolor: '#ffbb77', endcolor: '#ffffcc' });
				}
				else if (this.value == 'PRO5000-Y-SUB') {
					$('enterprise-storage').selectedIndex = 2;
					$('enterprise-cost').innerHTML = '$1,200/year';
					new Effect.Highlight($('enterprise-cost'), { startcolor: '#ffbb77', endcolor: '#ffffcc' });
				}
				else if (this.value == 'PRO10000-Y-SUB') {
					$('enterprise-storage').selectedIndex = 3;
					$('enterprise-cost').innerHTML = '$2,400/year';
					new Effect.Highlight($('enterprise-cost'), { startcolor: '#ffbb77', endcolor: '#ffffcc' });
				}
				$('enterprise-tab').className = 'active';
				$('enterprise-radio').checked = true;
				var planColumn = $$('.enterprise');
				for (var i = 0; i < planColumn.length; i++) {
					planColumn[i].className = 'enterprise active-column';
				}
				
				break;		
					
		}
	}
	
	$('account').observe('change', changeTabFromForm);
	
	/*----------*/
	var getLoginForm = function() {
		if ($('name-field').style.display != 'none') {
			$('name-field').style.display = 'none';
			$('first-name-field').style.display = 'none';
			$('last-name-field').style.display = 'none';
			$('password-verify-field').style.display = 'none';
			$('email-verify-field').style.display = 'none';
			$('sign-in-span').innerHTML = '&raquo; New user?&nbsp;&nbsp;<a href=\"#\" id=\"sign-up-link\">Sign Up</a>';
			$('sign-up-link').observe('click', getLoginForm);
			$('register-submit').text = 'Sign In';
			$('register-submit').value = 'Sign In';
		} else {
			$('name-field').style.display = 'block';
			$('first-name-field').style.display = 'block';
			$('last-name-field').style.display = 'block';
			$('password-verify-field').style.display = 'block';
			$('email-verify-field').style.display = 'block';
			$('sign-in-span').innerHTML = '&raquo; Want to upgrade an existing account?&nbsp;&nbsp;<a href=\"#\" id=\"sign-in-link\">Sign In</a>';
			$('sign-in-link').observe('click', getLoginForm);
			$('register-submit').text = 'Sign Up';
			$('register-submit').value = 'Sign Up';
		}
	}
		
	$('sign-in-link').observe('click', getLoginForm);
	
});