/* EXT JS Layout: referred to in page_layout_v2_2 */
var store;
var store_simple;
var cm;
var cm_simple;
var grid;
var grid_simple;
var gv;
var gv_simple;

var gDatasetListStartAt = 0;
var gDontUpdateChart = false;

var gLockDetectScroll = false;
var gPageSize = 50;
var gSortByProvider = false;

// Initialize EXT JS store, reader, ColumnModel
store = new Ext.data.GroupingStore({
	groupField: "group_field",
	id: 'dataset_store',
	remoteGroup: true,
	remoteSort: true,
  
	proxy: new Ext.data.HttpProxy({
            url: g_ROOT_URL + '/functions/contributing_datasets',
            method: 'POST'
        }),
	baseParams: gQuery.query("facts"),
	
	listeners: {
		load: data_loaded
	},
	
	reader: new Ext.data.JsonReader({   
	    root: 'dataset_list',
	    totalProperty: 'num_datasets',
	    id: 'id'},
	    [ 
	        {name: 'id', type: 'string'},
	        {name: 'entity_name', type: 'string', mapping: 'name_short'},
	        {name: 'group_field', type: 'string', mapping: 'md_provider'},
	        {name: 'sources', type: 'string'},
	        {name: 'ds_type', type: 'string'},
	        {name: 'reptilia_count', type: 'int'},
	        {name: 'aves_count', type: 'int'},
	        {name: 'mammalia_count', type: 'int'},
	        {name: 'num_records', type: 'int'},
	        {name: 'yr_begin', type: 'int'},
	        {name: 'yr_end', type: 'int'},
	        {name: 'date_begin', type: 'string'},
	        {name: 'date_end', type: 'string'},
	        {name: 'platform', type: 'string'},
	        {name: 'longitude_max', type: 'float'},
	        {name: 'longitude_min', type: 'float'},
	        {name: 'latitude_max', type: 'float'},
	        {name: 'latitude_min', type: 'float'},
	        {name: 'urlimg_s', type: 'string'},
	        {name: 'table2', type: 'string'},
	        {name: 'relation', type: 'string'},
	        {name: 'auto', type: 'string'},
	        {name: 'added', type: 'string'},
	        {name: 'updated', type: 'string'}
	  	]),
  	
  sortInfo:{field: 'entity_name', direction: "ASC"}
});


cm = new Ext.grid.ColumnModel(
[{
	id: 'entity_name',
    header: 'Dataset name',
    readOnly: true,
    dataIndex: 'entity_name',
    width: 200,
    renderer: function(value, metadata, record, rowIndex, colIndex, store) {
		switch (parseInt(record.data.id)) {
			case 415:
				var dataset_url = "/widecast";
				break;
			case 545:
				var dataset_url = "/swot";
				break;
			default:
				var dataset_url = '/datasets/detail/' + record.data.id;
				break;
		}
   		var text = "<a href='" + dataset_url + "' title='Go to Dataset Page' onmousedown='cancel_bubble(event);' onclick='cancel_bubble(event);'>" + value + "</a>";
    	return text;
    }
  },{
    header: 'Map',
    readOnly: true,
    dataIndex: 'id',
    sortable: false,
    resizable: false,
    menuDisabled: true,
    fixed: true,
    align: 'center',
    //tooltip: "",
    width: 56,
    renderer: function(value, metadata, record, rowIndex, colIndex, store) {
   		var text = "<a><img src='/seamap2/images/datasets/dataset_" + value + "_s.png' _title='Map this dataset with Advanced Onilne Mapper'></a>";
    	return text;
    }
  },{
    header: 'Platform',
    readOnly: true,
    dataIndex: 'platform',
    tooltip: "Platform",
    align: "center",
    width: 75
  },{
    header: 'Year',
    readOnly: true,
    dataIndex: 'yr_begin',
    align: "center",
    tooltip: "Range fo survey",
    renderer: function(value, metadata, record, rowIndex, colIndex, store) {
    	if (value == record.data.yr_end) {
    		var text = value;
    	} else {
    		var text = value + "-"  + record.data.yr_end;
    	}
    	return text;
    },
    width: 95
  },{
    header: '<img src="/seamap2/icons/bird_w30.gif" height="21">',
    readOnly: true,
    dataIndex: 'aves_count',
    align: "right",
    tooltip: "#obs of Searbirds",
    renderer: function(value, metadata, record, rowIndex, colIndex, store) {
   		var text = int_format(value);
    	return text;
    },
    width: 75
  },{
    header: '<img src="/seamap2/icons/mammal_w30.gif" height="22">',
    readOnly: true,
    dataIndex: 'mammalia_count',
    align: "right",
    tooltip: "#obs of Marine mammals",
    renderer: function(value, metadata, record, rowIndex, colIndex, store) {
   		var text = int_format(value);
    	return text;
    },
    width: 70
  },{
    header: '<img src="/seamap2/icons/turtle_w30.gif" height="22">',
    readOnly: true,
    dataIndex: 'reptilia_count',
    align: "right",
    tooltip: "#obs of Sea turtles",
    renderer: function(value, metadata, record, rowIndex, colIndex, store) {
   		var text = int_format(value);
    	return text;
    },
    width: 70
  },{
    header: ' ',
    readOnly: true,
    dataIndex: 'sources',
    tooltip: "Data source/Customized interface",
    sortable: false,
    resizable: false,
    menuDisabled: true,
    fixed: true,    
    align: 'center',
    renderer: function(value, metadata, record, rowIndex, colIndex, store) {
		switch (value) {
			case "Satellite Tracking and Analysis Tool":
				var text = "<img src='" + gIconBase + "stat_small.gif' title='Data fed from " + value + "' width=20>";
				break;
			case "WIDECAST":
			case "The State of the World's Sea Turtles":
			case "ESAS":
				var text = "<img src='" + gIconBase + "custom_app.png' title='Customized application available'>";
				break;
			default:
				var text = "";
		}
		return text;
    },
    width: 36
  },{
    header: 'SEAMAP Taxa',
    readOnly: true,
    dataIndex: 'group_field',
    width: 10,
	hidden: true
  }
]);
cm.defaultSortable= true;


store_simple = new Ext.data.Store({
	id: 'store_simple',
	sortInfo:{field: 'entity_name', direction: "ASC"},
	reader: new Ext.data.JsonReader({   
	    root: '',
	    totalProperty: '',
	    id: 'md_provider'},
	    [ 
	        {name: 'entity_name', type: 'string', mapping: 'md_provider'},
	        {name: 'datasets', type: 'string'},
	        {name: 'count', type: 'int'}
	  	])}
);


cm_simple = new Ext.grid.ColumnModel(
[{
    header: 'Provider name',
    readOnly: true,
    dataIndex: 'entity_name',
    width: 220
  },{
    header: 'Count',
    readOnly: true,
    dataIndex: 'count',
    align: 'right',
    width: 30
  }
  ]);

gv = new Ext.grid.GroupingView({
	groupTextTpl: '{group} ({[values.rs.length]})',
	enableRowBody: true,
	getRowClass : function(record, rowIndex, rowParams, store){
		if (record.data.table2 != "" && record.data.auto.toLowerCase() == 'true') {
			var effort = 'Yes';
		} else {
			var effort = 'No';
		}
		
		if (record.data.sources == "") {
			var source = "-";
		} else {
			var source = record.data.sources;
		}
        var text = "<p><table style='margin-left:1em;'><tr>";
        text += "<td class='ds_attr'>ID</td><td class='ds_attr'>#Observations</td><td class='ds_attr'>Tracks</td><td class='ds_attr' style='width: 180px;'>Source</td><td class='ds_attr'>Added</td><td class='ds_attr'>Updated</td><td class='ds_attr'>Map with</td>";
        text += "</tr>";
        text += "<tr>";
        text += "<td class='ds_attr' align='center'>" + record.data.id + "</td>";
        text += "<td class='ds_attr' align='center'>" + int_format(record.data.num_records, false) + "</td>";
        text += "<td class='ds_attr' align='center'>" + effort + "</td>";
        text += "<td class='ds_attr' align='center'>" + source + "</td>";
        text += "<td class='ds_attr' align='center'>" + record.data.added.split(" ")[0] + "</td>";
        text += "<td class='ds_attr' align='center'>" + record.data.updated.split(" ")[0] + "</td>";
        text += "<td class='ds_attr' align='center'><img src='/seamap2/icons/icon_tool_ge.png' class='button' onmousedown='cancel_bubble(event);' onclick='cancel_bubble(event); open_google_earth(\"dataset\", " + id + ")' title='Map this dataset with Google Earth'></td>";
        text += "</tr></table></p>";
        rowParams.body = text;
        return 'x-grid3-row-collapsed';
    }
});

gv_simple = new Ext.grid.GridView({forceFit: true});

grid_simple = new Ext.grid.GridPanel({
	id: "grid_simple",
    title:'Provider',
    width:250,
    minHeight: 350,
    autoHeight: true,
    hideHeaders: true,
    store: store_simple,
    trackMouseOver:true,
    loadMask: true,
	autoHeight: false,
	autoExpandColumn: 'entity_name',
	cm: cm_simple,
	sm: new Ext.ux.RowSelectionModelMSBSC(),
	stripeRows: true,
	cls: "grid",
	ctCls: "grid",
	stateful: false,
	view: gv_simple
});   

grid_simple.on("rowclick", grid_simple_clicked);

var search_option_panels = [{
        title: 'Species',
        contentEl: "box_species",
        autoHeight: true,
        bodyStyle: 'padding:5px 0px 5px 0px'
    },{
        title: 'Keyword',
        contentEl: "box_keyword",
        collapsed: true,
        autoHeight: true,
        bodyStyle: 'padding:5px 0px 5px 0px'	// need this as grid_simple has different padding
    },{
        title: 'Platform',
        contentEl: "box_platform",
        collapsed: true,
        autoHeight: true,
        bodyStyle: 'padding:5px 0px 5px 0px'
    },{
        title: 'Taxon group',
        contentEl: "box_taxa",
        collapsed: true,
        autoHeight: true,
        bodyStyle: 'padding:5px 0px 5px 0px'
    },
    grid_simple
];
			    
/**** initialize page *****/
function init() {
	var url = gPlone + 'getSpecies';
	var parseFunc = parseSpecies;	// Defined in auto_suggest.js
	var aAutoSuggestSp = new AutoSuggest("species", "result_list", species_changed);
	aAutoSuggestSp.SearchOptions = {record_count:1};
	aAutoSuggestSp.setFilter(url, parseFunc);
	
	// Register Navigation Tools.
	$$('img.NavTool').each(function (item) {NavigationTools.add(item);});

	//
	$$('img.button').each(function (item) {
		item.observe('mouseover', function (event) {
			if (!$(item).hasClassName('button_selected')) {
				item.src = item.src.replace('.png', '_hover.png');
			}
		});
		item.observe('mouseout', function (event) {
			if (!$(item).hasClassName('button_selected')) {
				item.src = item.src.replace('_hover.png', '.png');
			}
		});});

	new Draggable('div_chart',{zindex: 10, constraint:'horizontal',  starteffect:null, endeffect:null});
	
	gMapserver = new Mapserver(gUrlPhp, "");
	initialize_mapfile();
}


function choose_layer(zoom, update_legend) {
	var layer_name = "dist_";

	if (gQuery.sp_tsn.length != 0 || gQuery.sp_tsns.length != 0 || gQuery.provider_datasets != "" || gQuery.temporal != "" || gQuery.datasets != "" || gQuery.dataset.length != 0) {
		layer_name += "sp_";
		gQuery.taxaColumn = "record_count";	// cheat
	} else {
		layer_name += "taxa_";
		gQuery.taxaColumn = "all_taxa";	// cheat
	}
	if (zoom >= gZoom['001']) {
		var cellsize = "001";
	} else if (zoom >= gZoom['01']) {
		var cellsize = "01";
	} else {
		var cellsize = "1";
	}
	layer_name += cellsize + "deg";
	
	if (update_legend) {
		choose_legend(layer_name, cellsize);
	}
	return layer_name;
}

function keyword_keyup(event) {
	if(!event) {
		//if the browser did not pass the event information to the
		//function, we will have to obtain it from the event register
		if(window.event) {
			//Internet Explorer
			event = window.event;
		} else {
			//total failure, we have no way of referencing the event
			return;
		}
	}	
	
	var keyPressed = event.which || event.keyCode;
	
	if(keyPressed == Event.KEY_RETURN || keyPressed == 14){	
		option_changed();
	}
}


// set gQuery.sp_tsn (done in species_search) and update affected components (map, graph, species list)
function species_changed() {
	if ($('result_list').visible()) {
		$('result_list').hide();
	}
	
	//gAllProviders = true;
	gQuery.dataset = [];
	gQuery.temporal = "";
	gQuery.provider_datasets = "";
	//clear_dataset_list();
	
	if ($F('species') != "") {
		// Species
		var species = $F('species');
		// Need to find children species, if any.
		var sp_tsn = species_search(species);	// species_search accepts either name or TSN number

		if (sp_tsn == "") {
			alert("No species found");
			return true;
		}
	} else {
		gQuery.sp_tsns = [];
		gSpeciesList = [];
	}	
	update_your_species();

	// Update provider list so it reflects the species chosen
	get_datasets(true, gQuery.provider_datasets != "");
	
	var graph_panel = Ext.getCmp("graph_and_env_panel");
	if (!graph_panel.hidden) {
		update_chart();
	}
	
	update_dist_layers();
}

function species_search_results(oj) {
	var species_info = oj.responseText.evalJSON();
	var species = species_info.species_list;
	
	
	for (var i=0; i < species.length; i++) {
		var skip_this = false;
		var sp_tsn = species[i]['sp_tsn'];
		for (var j=0; j < gSpeciesList.length; j++) {
			if (gSpeciesList[j].sp_tsn == sp_tsn) {
				skip_this = true;
				break;
			}
		}
		if (!skip_this) {
			gQuery.sp_tsns.push(species[i]['sp_tsn']);
			gSpeciesList.push(species[i]);
		}
	}

	return gQuery.sp_tsns;
}

function update_your_species() {
	var s = "";
	var delimiter = "";
	for (var i = 0; i < gSpeciesList.length; i++) {
		var scientific = gSpeciesList[i].scientific_name;
		arry_scientific = scientific.split(" ");
		if (arry_scientific.length > 1) {
			scientific = arry_scientific[0].substr(0, 1) + ". " + arry_scientific[1];
		}
		s += delimiter + scientific;
		delimiter = "<BR>";
	}
	$('your_species').update(s);
}


function year_or_season_changed() {
	update_chart();
	time_range_changed();
}


function map_loaded() {
	get_datasets(true, false);	
	grid.render();
    grid.on("bodyscroll", list_scrolled);
    grid.on("rowclick", row_clicked);
    window_resize();	
}

function list_scrolled(scrollLeft, scrollTop ) {
	var column_header_height = 32;
	var visible_height = grid.getInnerHeight();
	
	var view = grid.getView();
	var list_body = $(view.mainBody.id);
	var list_height = list_body.getHeight();
	
	if (!gLockDetectScroll && (visible_height + scrollTop + column_header_height > list_height * 0.9)) {
		get_datasets(false, true);
	}
}

/* EXT JS version */
function get_datasets(initial_load, keep_simple_grid) {
	gLockDetectScroll = true;

	var btn_sort = Ext.getCmp("btn_sort");
	if (gSortByProvider) {
		var order_by = "md_provider asc, name_short";
	} else {
		var order_by = "added desc, name_short";
	}
	
	store.baseParams = gQuery.query("facts");
    var params = store.baseParams;
    params["num_datasets"] = gPageSize;
    params["order_by"] = order_by;
    
    if (keep_simple_grid) {
	    params["provider_list"] = "";
    } else {
	    params["provider_list"] = 1;
    }
    
	store.remoteGroup = true;
	store.remoteSort = true;
    if (initial_load) {
		gDatasetListStartAt = 0;
	    params["start_at"] = gDatasetListStartAt;
    	store.load({params: params});
    } else {
    	gDatasetListStartAt += gPageSize;
	    params["start_at"] = gDatasetListStartAt;
	    // initial_load = false means auto scroll. In this case, keep gQuery.provider_datatasets/datasets but clear gQuery.dataset (selected by user in the list).
	    // Otherwise, the next page contains undesired list of datasets.
		var datasets = "";
		if (gQuery.datasets != "") {
			datasets = gQuery.datasets;
		}
		if (gQuery.provider_datasets != "") {
			datasets = gQuery.provider_datasets;
		}
	    
	    params["datasets"] = datasets;
	    
	    store.proxy.load(params, store.reader, function(records, args, status) {
			store.remoteGroup = false;
			store.remoteSort = false;
	    	if (records.totalRecords > 0) {
		    	store.add(records.records);
		    	gLockDetectScroll = false;
	    	}
	    });
    }
}

function data_loaded(theStore, records, options) {
	if (options.params.provider_list == 1) {
		store_simple.removeAll();
		var providers = theStore.reader.jsonData.providers;
		var records = store_simple.reader.readRecords(providers);
		store_simple.add(records.records);
		
		// Update #datasets
		update_num_datasets();
	}
	store.remoteGroup = false;
	store.remoteSort = false;
	
	gLockDetectScroll = false;
}

function update_num_datasets() {
	// Update #datasets
	if (gQuery.dataset.length > 0) {
		var num_datasets = gQuery.dataset.length;
	} else if (gQuery.provider_datasets != "") {
		var num_datasets = grid_simple.selModel.getSelected().data.count;
	} else {
		var num_datasets = store_simple.reader.jsonData.inject(0, function(acc, item){return acc + item.count});
	}
	$("num_datasets").update(num_datasets);	
}

function roi_updated() {
	gQuery.clearTemporal();

	if (gQuery.dataset.length == 0) {
		// do not update dataset list, if a dataset(s) is selected.
		if (gQuery.provider_datasets != "") {
			// if provider is selected, do not update provider list
			var keep = true;
		} else {
			var keep = false;
		}
		get_datasets(true, keep);
	}
	
	update_dist_layers();
	
	var graph_panel = Ext.getCmp("graph_and_env_panel");
	if (!graph_panel.hidden) {
		update_chart();
	}
}


function update_chart() {
	if (gQuery.spatial == "" && gQuery.sp_tsn.length == 0 && gQuery.dataset.length == 0 && gQuery.provider_datasets == "") {
		$$('div.chart_area').invoke('hide');
		return true;
	}

	// Update chart
	$('div_chart').style.left = 0 + "px";
	$('charts_div').update("<img src='" + gIconBase + "ajax_loader.gif' style='margin-left:310px; margin-top:25px'>");
	$('range_select').hide();
	gQuery.clearTemporal();
	var parameters = gQuery.toQueryString('chart') + "&mode=ds";
	var url = gPlone + "dist_sp_chart_url?" + parameters;

	new Ajax.Request(url,
		{
			method: 'GET',
			onSuccess: show_chart
		});
}

function show_chart(oj) {
	var chart_data_list = oj.responseText.evalJSON();

	$$('div.chart_area').invoke('show');
	$('charts_div').update("");
	$('charts_div').style.width = (950 * chart_data_list.length) + "px";
	for (var i = 0; i < chart_data_list.length; i++) {
		var image = document.createElement("IMG");
		image.src = chart_data_list[i].url;
		
		if (i > 0) {
			image.style.marginLeft = "10px";
		}
		$('charts_div').insert(image);
	}
	$('range_select').show();
	build_range_select(chart_data_list[0]);
}


// When the slidebar is moved. Called by slider_dropped in dist_map_common.js.
function time_range_changed() {
	if (gQuery.dataset.length == 0) {
		get_datasets(true, gQuery.provider_datasets != "");
	}
	update_dist_layers();
}

/***** When the user clicks on the dataset IDs in the popup... *****/
function dataset_observed(dataset_ids) {
	if (dataset_ids != "") {
		var parameters = $H({dataset_ids: dataset_ids, columns: 'id,name_short,md_provider', start_at:0, num_datasets: -1, order_by:'name_short'}).toQueryString();
		var url = gPlone + "getDatasets?" + parameters;
		new Ajax.Request(url,
			{
				method: 'GET',
				onSuccess: update_taxa_infowindow_ds
			});
	} else {
		var s = alert("No datasets observed in this cell.");
	}
}

function update_taxa_infowindow_ds(oj) {
	var datasets = oj.responseText.evalJSON();
	var dataset_list = datasets.dataset_list;
	s = "";
	for (var i = 0; i < dataset_list.length; i++) {
		var dataset = dataset_list[i];
		s += "<a href='/datasets/detail/" + dataset.id + "' class='dataset_link' target='dataset'>" + dataset.name_short + "</a> (" + dataset.md_provider + ")<BR>";
	}
	s = "<div style='height:140px; overflow:auto;'>" + s + "</div>";
	var infowindow = map.getInfoWindow();
	map.openInfoWindowHtml(infowindow.getPoint(), s, {maxHeight: 150, maxWidth:350});
}

function option_changed() {
	var platform_checked = $$('input.platform').findAll(function(item){return item.checked;});
	platform_checked = platform_checked.collect(function(item){return "'" + item.value + "'";});
	platform_checked = platform_checked.join(",");
	
	var taxa_checked = $$('input.taxa').findAll(function(item){return item.checked;});
	taxa_checked = taxa_checked.collect(function(item){return item.value + " > 0";});
	taxa_checked = taxa_checked.join(" and ");

	var keyword = $F("keyword");
	
	gQuery.dataset = [];
	gQuery.provider_datasets = "";		// Always refresh provider list.
	
	// first, get the dataset IDs that meet platform/taxa criteria.
	// Set the returned IDs to gQuery.datasets and update map.
	//clear_dataset_list();
	if (platform_checked != "" || taxa_checked != "" || keyword != "") {
		var parameters = $H({dataset_ids: "", platform: platform_checked, taxa: taxa_checked, provider: "", sp_tsns: '', keyword: keyword, columns: 'id,name_short,md_provider', start_at:0, num_datasets: -1, order_by:'id'}).toQueryString();
		var url = gPlone + "getDatasets?" + parameters;
		new Ajax.Request(url,
			{
				method: 'GET',
				onSuccess: update_criteria
			});
	} else {
		gQuery.datasets = "";
		get_datasets(true, gQuery.provider_datasets != "");
		update_dist_layers();
	}
}

function update_criteria(oj) {
	var datasets = oj.responseText.evalJSON();
	var dataset_list = datasets.dataset_list;
	var dataset_ids = "";
	var delimiter = "";
	for (var i = 0; i < dataset_list.length; i++) {
		dataset_ids += delimiter + dataset_list[i].id;
		delimiter = ",";
	}
	gQuery.datasets = dataset_ids;

	get_datasets(true, gQuery.provider_datasets != "");
	update_dist_layers();
}

function grid_simple_clicked(theGrid, rowIndex, e) {
	// When a new provider selected (or deselected), clear currently selected datasets.
	gQuery.dataset = [];
	gQuery.clearTemporal();
	var row = theGrid.store.getAt(rowIndex);
	if (grid_simple.selModel.isSelected(rowIndex)) {
		var dataset_ids = row.data.datasets;			// At this moment, only one provider can be selected.
		gQuery.provider_datasets = dataset_ids;
	} else {
		gQuery.provider_datasets = "";
	}
	get_datasets(true, true);
	
	var graph_panel = Ext.getCmp("graph_and_env_panel");
	if (!graph_panel.hidden) {
		update_chart();
	}
	update_dist_layers();
	update_num_datasets();
}


function sort_by_provider(btn) {
	if (btn.text == "Sort by provider") {
		gSortByProvider = true;
		var title = "Sort by date added";
		var tooltip = "Sort by date added, list refleshed and regrouped";
	} else {
		gSortByProvider = false;
		store.groupBy("group_field");
		var title = "Sort by provider";
		var tooltip = "Sort by provider name, list refleshed and regrouped";
	}
	btn.setText(title);
	$$("#" + btn.id + " button").each(function(item){item.title = tooltip});
	//btn.tooltip = tooltip;  this doesn't work as tooltip is read-only (used only when it is rendered)
	get_datasets(true, false);
}