Ext.onReady(function() {

	var v = Ext.get('ventrilo-button');
	var t = Ext.get('teamspeak-button');
	var m = Ext.get('mumble-button');
	
	var packageData;
	
	function getPackages(pid) {
		
		Ext.Ajax.request({
			url		: '/home/get_voice_packages',
			method	: 'POST',
			params	: {service: pid},
			success	: function(response, opts) {
				var data = Ext.util.JSON.decode(response.responseText);
				packageData = data;
				displayPackages(pid, data, '12 MONTHS');
			},
			failure	: function(response, opts) {
			}
		}, this);

	}

	function displayPackages(pid, d, term) {

		switch(pid) {
			case 1:
				var service = 'ventrilo';
				break;
			case 2:
				var service = 'teamspeak';
				break;
			case 3:
				var service = 'mumble';
				break;
		}

		var html = '<div class="packages-'+service+'-bg"><table cellspacing="0" cellpadding="0" style="margin-top:5px;margin-left:6px;">';

		for(var i=0;i<d.data.results.length;i++) {
			var a = d.data.results[i];
			var price;
			
			switch(service) {
				case 'ventrilo':
					var service_int = '1';
					break;
				case 'teamspeak':
					var service_int = '2';
					break;
				case 'mumble':
					var service_int = '3';
					break;
			}
			
			switch(term) {
				case '1 MONTH':
					price = a.monthly;
					break;
				case '3 MONTHS':
					price = a.quarterly / 3;
					price = price.toFixed(2);
					break;
				case '6 MONTHS':
					price = a.semiannually / 6;
					price = price.toFixed(2);
					break;
				case '12 MONTHS':
					price = a.annually / 12;
					price = price.toFixed(2);
					break;
			}

			if(i==0) {
				html += '<tr><td><a href="http://secure.pure-voice.net/order/neworder/'+service_int+'/'+a.slots+'"><div class="'+service+'-package-bg-left"><div class="package-text-slots">'+a.slots+' USERS</div><div class="package-text-price">$'+price+'/mo*</div></div></a></td>';
			}
			if(i > 0 && i < 4) {
				html += '<td><a href="http://secure.pure-voice.net/order/neworder/'+service_int+'/'+a.slots+'"><div class="'+service+'-package-bg-middle"><div class="package-text-slots">'+a.slots+' USERS</div><div class="package-text-price">$'+price+'/mo*</div></div></a></td>';
			}
			if(i==4) {
				html += '<td><a href="http://secure.pure-voice.net/order/neworder/'+service_int+'/'+a.slots+'"><div class="'+service+'-package-bg-right"><div class="package-text-slots">'+a.slots+' USERS</div><div class="package-text-price">$'+price+'/mo*</div></div></a></td></tr>';
			}
			if(i==5) {
				html += '<tr><td><a href="http://secure.pure-voice.net/order/neworder/'+service_int+'/'+a.slots+'"><div class="'+service+'-package-bg-left"><div class="package-text-slots">'+a.slots+' USERS</div><div class="package-text-price">$'+price+'/mo*</div></div></a></td>';
			}
			if(i > 5 && i < 9) {
				html += '<td><a href="http://secure.pure-voice.net/order/neworder/'+service_int+'/'+a.slots+'"><div class="'+service+'-package-bg-middle"><div class="package-text-slots">'+a.slots+' USERS</div><div class="package-text-price">$'+price+'/mo*</div></div></a></td>';
			}
			if(i==9) {
				html += '<td><a href="http://secure.pure-voice.net/order/neworder/'+service_int+'/'+a.slots+'"><div class="'+service+'-package-bg-right"><div class="package-text-slots">'+a.slots+' USERS</div><div class="package-text-price">$'+price+'/mo*</div></div></a></td></tr>';
			}
		}
		
		html += '</table>';
		html += '<div style="margin:5px 0 0 155px;"><form><select id="paymentTermSelect" name="paymentTermSelect"><option name="monthly">1 MONTH</option><option name="quarterly">3 MONTHS</option><option name="semiannually">6 MONTHS</option><option name="annually">12 MONTHS</option></select></form></div>';
		html += '</div>';

		Ext.DomHelper.overwrite('selected-packages-content', html);
		
		// -- Set the initial selection to 12 months
		document.getElementById('paymentTermSelect').selectedIndex=3;
		
		Ext.get('paymentTermSelect').on('change', function(e, el, obj) {
			var v = document.getElementById('paymentTermSelect').value;
			var x = document.getElementById('paymentTermSelect').selectedIndex;

			displayPackages(pid, d, v);

			document.getElementById('paymentTermSelect').selectedIndex=x;
		});
	}

	v.on('click', function(){
		getPackages(1);
	});

	t.on('click', function(){
		getPackages(2);
	});

	m.on('click', function(){
		getPackages(3);
	});
	
	// -- Initial load of Ventrilo
	getPackages(1);
	
});