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;
                    case 'PRO1000-M-SUB':
                        $('account').selectedIndex = 5;
                        break;
				}
				break;
			case 'enterprise':
				switch ($('enterprise-storage').value) {
					case 'PRO1000-Y-SUB':
						$('account').selectedIndex = 6;
						break;
					case 'PRO2000-Y-SUB':
						$('account').selectedIndex = 7;
						break;
					case 'PRO5000-Y-SUB':
						$('account').selectedIndex = 8;
						break;
					case 'PRO10000-Y-SUB':
						$('account').selectedIndex = 9;
						break;
				}
				break;
		}
	}

	var updateProCost = function() {
		var proCell = $('pro-cost');
		switch(this.selectedIndex) {
			case 0:
				proCell.innerHTML = '$5/month';
				break;
			case 1:
				proCell.innerHTML = '$55/year';
				break;
			case 2:
				proCell.innerHTML = '$10/month';
				break;
			case 3:
				proCell.innerHTML = '$110/year';
				break;
            case 4:
                proCell.innerHTML = '$20/month';
                break;
		}
        new Effect.Highlight(proCell, { startcolor: '#ffbb77', endcolor: '#ffffcc' });
	}

	var updateEnterpriseCost = function() {
		var enterpriseCell = $('enterprise-cost');
		switch(this.selectedIndex) {
			case 0:
				enterpriseCell.innerHTML = '$240/year';
				break;
			case 1:
				enterpriseCell.innerHTML = '$480/year';
				break;
			case 2:
				enterpriseCell.innerHTML = '$1,200/year';
				break;
			case 3:
				enterpriseCell.innerHTML = '$2,400/year';
				break;
		}
        new Effect.Highlight(enterpriseCell, { startcolor: '#ffbb77', endcolor: '#ffffcc' });
	}

	$('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':
            case 'PRO1000-M-SUB':

				if (this.value == 'PRO100-M-SUB') {
					$('pro-storage').selectedIndex = 0;
					$('pro-cost').innerHTML = '$5/month';
				} else if (this.value == 'PRO100-Y-SUB') {
					$('pro-storage').selectedIndex = 1;
					$('pro-cost').innerHTML = '$55/year';
				} else if (this.value == 'PRO500-M-SUB') {
					$('pro-storage').selectedIndex = 2;
					$('pro-cost').innerHTML = '$10/month';
				} else if (this.value == 'PRO500-Y-SUB') {
					$('pro-storage').selectedIndex = 3;
					$('pro-cost').innerHTML = '$110/year';
                } else if (this.value == 'PRO1000-M-SUB') {
                    $('pro-storage').selectedIndex = 4;
                    $('pro-cost').innerHTML = '$20/month';
                }
                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';
				}
				else if (this.value == 'PRO2000-Y-SUB') {
					$('enterprise-storage').selectedIndex = 1;
					$('enterprise-cost').innerHTML = '$480/year';
				}
				else if (this.value == 'PRO5000-Y-SUB') {
					$('enterprise-storage').selectedIndex = 2;
					$('enterprise-cost').innerHTML = '$1,200/year';
				}
				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);

});