var pricingLetter = 'a';
var pricingType = 'sms';

var jqGrid;

function reloadTable() {
    jqGrid.setGridParam(
       {
           url:'pricing-data?type=' + pricingType + '&letter=' + pricingLetter + '&nd='+new Date().getTime(),
           page: 1
       }
       ).trigger("reloadGrid");
}

function prepareLinks() {
	if(pricingType == 'sms') {
		document.getElementById('smsPricingContainer').innerHTML = 'SMS Texting Outbound Rates';
		document.getElementById('voicePricingContainer').innerHTML = '<a href="javascript:showVoicePrices()" id="voicePricing">Voice Outbound Rates</a>';
	} else {
		document.getElementById('smsPricingContainer').innerHTML = '<a href="javascript:showTextPrices()" id="smsPricing">SMS Texting Outbound Rates</a>';
		document.getElementById('voicePricingContainer').innerHTML = 'Voice Outbound Rates';
	}
	
}

function showVoicePrices() {
	pricingType = 'voice';
	prepareLinks();
    reloadTable();
}

function showTextPrices() {
	pricingType = 'sms';
	prepareLinks();
    reloadTable();
}

// We use a document ready jquery function.
jQuery(document).ready(function(){

    
    
    
    prepareLinks();

	jqGrid = jQuery("#price-data").jqGrid({
	    url:'/pricing-data?type=' + pricingType + '&letter=' + pricingLetter + '&nd='+new Date().getTime(),
	    datatype: 'xml',
		mtype: 'GET',
		colNames:['Country','Destination', 'Rate'],
		colModel :[ 
		    {name:'country', index:'country', width:150, sortable:false, resizable:false}, 
		    {name:'operator', index:'operator', width:350, sortable:false, resizable:false}, 
		    {name:'price', index:'Price', width:100, resizable:false} ],
		imgpath: '/jqgrid/themes/steel/images',
	    viewrecords: true,
	    hidegrid: false,
	    pager: jQuery('#pagerb'), 
	    rowNum:50, 
	    width: 570, 
	    height: 400 
	});
	


    $('#letterA').click(function(){
	    pricingLetter = 'a';
	    reloadTable();
	});
	$('#letterB').click(function(){
		pricingLetter = 'b';
	    reloadTable();
	});
	$('#letterC').click(function(){
		pricingLetter = 'c';
	    reloadTable();
	});
	$('#letterD').click(function(){
		pricingLetter = 'd';
	    reloadTable();
	});
	$('#letterE').click(function(){
		pricingLetter = 'e';
	    reloadTable();
	});
	$('#letterF').click(function(){
		pricingLetter = 'f';
	    reloadTable();
	});
	$('#letterG').click(function(){
		pricingLetter = 'g';
	    reloadTable();
	});
	$('#letterH').click(function(){
		pricingLetter = 'h';
	    reloadTable();
	});
	$('#letterI').click(function(){
		pricingLetter = 'i';
	    reloadTable();
	});
	$('#letterJ').click(function(){
		pricingLetter = 'j';
	    reloadTable();
	});
	$('#letterK').click(function(){
		pricingLetter = 'k';
	    reloadTable();
	});
	$('#letterL').click(function(){
		pricingLetter = 'l';
	    reloadTable();
	});
	$('#letterM').click(function(){
		pricingLetter = 'm';
	    reloadTable();
	});
	$('#letterN').click(function(){
		pricingLetter = 'n';
	    reloadTable();
	});
	$('#letterO').click(function(){
		pricingLetter = 'o';
	    reloadTable();
	});
	$('#letterP').click(function(){
		pricingLetter = 'p';
	    reloadTable();
	});
	$('#letterQ').click(function(){
		pricingLetter = 'q';
	    reloadTable();
	});
	
	$('#letterR').click(function(){
		pricingLetter = 'r';
	    reloadTable();
	});
	$('#letterS').click(function(){
		pricingLetter = 's';
	    reloadTable();
	});
	$('#letterT').click(function(){
		pricingLetter = 't';
	    reloadTable();
	});
	$('#letterU').click(function(){
		pricingLetter = 'u';
	    reloadTable();
	});
	$('#letterV').click(function(){
		pricingLetter = 'v';
	    reloadTable();
	});
	$('#letterW').click(function(){
		pricingLetter = 'w';
	    reloadTable();
	});
	$('#letterX').click(function(){
		pricingLetter = 'x';
	    reloadTable();
	});
	$('#letterY').click(function(){
		pricingLetter = 'y';
	    reloadTable();
	});
	$('#letterZ').click(function(){
		pricingLetter = 'z';
	    reloadTable();
	});



});