jQuery(function($) {
	$('#Cities').jqGrid({
		url:'../Components/City.cfc?method=NextN&returnformat=json',
		datatype: 'json',
		colNames:['CityID','CityName', 'RowNumber'],
		colModel :[
			{name:'CityID',index:'CityID', width:50, sorttype:'int'},
			{name:'CityName',index:'CityName', width:150, sorttype:'string',
				formatter: 'showlink', formatoptions: {baseLinkUrl: 'City.cfm'}
			},
			{name:'RowNumber',index:'RowNumber', width:150, align:'right',sortable:false}
		],
		pager: $('#CitiesPager'),
		rowNum:50,
		rowList:[10,50,100,500],
		sortorder: 'asc',
		sortname: 'CityID',
		viewrecords: true,
		caption: 'Cities',
		height:'auto',
		jsonReader: {
			root: 'ROWS',
			page: 'PAGE',
			records: 'RECORDS',
			total: 'TOTAL',
			cell: 'CELL',
			id: 'ID'
		},
		onSelectRow: viewCityDetails
	});
});

function viewCityDetails(cityID){
	$city = $("#cityDetails");
	$city.attr("title", "Testing City Details")
	// Todo: CityName, ParentID CityName
	$city.html("<p>City Details For" + cityID +"</p>");
	
	$city.dialog({
		modal: true,
		draggable: false,
		resizable: false,
		height:200,
		width:400
	});
	
	$city.dialog("open");
	
}