var border;
var gMultiSelect = false;


/***** EXT JS *****/


Ext.ux.SliderTip = Ext.extend(Ext.Tip, {
    minWidth: 10,
    offsets : [0, -10],
    init : function(slider){
        slider.on('dragstart', this.onSlide, this);
        slider.on('drag', this.onSlide, this);
        slider.on('dragend', this.hide, this);
        slider.on('destroy', this.destroy, this);
    },

    onSlide : function(slider){
        this.show();
        this.body.update(this.getText(slider));
        this.doAutoWidth();
        this.el.alignTo(slider.thumb, 'b-t?', this.offsets);
    },

    getText : function(slider){		// Can be overridden
        return slider.getValue();
    }

});


Ext.onReady(function(){
	init();		// Load google maps etc. This sets gQuery.sp_tsn which is needed for store.load()

	if (store.id == "dataset_store") {
		var btn_sort = new Ext.Toolbar.Button({id: "btn_sort", text: "Sort by provider", handler: sort_by_provider, tooltip: "Sort by provider name, list refleshed and regrouped (default: date added)",  tooltipType: "title"});
		var multi_select_tip = "Press to select multiple datasets";
		var collapse_tip = "Collapse providers";
	} else {
		var btn_sort = new Ext.Toolbar.Button({id: "btn_sort", text: "Sort by name", handler: sort_by_name, tooltip: "Sort by scientific name",  tooltipType: "title"});
		var multi_select_tip = "Press to select multiple species";
		var collapse_tip = "Collapse taxa group";
	}
	var btn_collapse = new Ext.Toolbar.Button({text: "Collapse all", id: "btn_collapse", handler: collapse_all, tooltip: collapse_tip,  tooltipType: "title"});
	var btn_fill = new Ext.Toolbar.Fill();
	var btn_multi_select = new Ext.Toolbar.Button({text: "Multi-select", id: "btn_multi_select", enableToggle: true, toggleHandler: multi_select, pressed: false, tooltip: multi_select_tip,  tooltipType: "title"});
	var btn_show_all = new Ext.Toolbar.Button({text: "Clear selection", id: "btn_show_all", handler: show_all, tooltip: "Clear user-made selection and show all observations",  tooltipType: "title"});
	
    grid = new Ext.grid.GridPanel({		// This grid is rendered (grid.render()) when species tab first shows up: switch_tab() in detail_common_v2_2.js.
    	id: "grid",
        el: 'list_frame',
        //width: 'auto',		// Width is set to 'auto' in switch_tab in detail_common_v2_2.js
        height:430,
        title:'Large list',
        header: false,
        store: store,
        trackMouseOver:true,
        loadMask: true,
		autoHeight: false,
		cm: cm,
		sm: new Ext.ux.RowSelectionModelMSBSC(),
		stripeRows: true,
		tbar: [btn_sort, '-',btn_collapse, btn_fill, btn_multi_select, '-', btn_show_all],
		autoExpandColumn: 'entity_name',	// performance check
		cls: "grid",
		ctCls: "grid",
		stateful: false,
	    view: gv
    });
     
   
    // trigger the data store load
    //store.load();		// store is loaded in map_loaded in species_profile_v2_2.js which makes you feel faster page loading.
    
    // main frame
	border = new Ext.Panel({
	    title: 'Main frame',
	    id: "main_frame",
	    header: false,
	    layout:'border',
	    renderTo: "body_frame",
	    monitorResize: true,
        height: 850,
		defaults: {
	        split: true,
			animFloat: false,
			autoHide: false,
			useSplitTips: true,
			monitorResize: true		// performance check
		},
	    items: [
	    	{
	    		region: 'west',
		        title: 'Search Options',
		        width: 250,
				collapsible: true,
		        margins: '5 0 5 5',
		        cmargins: '5 5 5 5',
				defaults: {
			        border: false,
					collapsible: true,
					titleCollapse: true,
					animFloat: false,
			        autoWidth: true,
					autoHide: false,
					collapseFirst: false,
					listeners: {
						//resize: resize_west
						expand: resize_west,
						collapse: resize_west
					}
				},
			    items: search_option_panels
	    	},{
		        region: 'center',		// Google Maps, legend and graph, large list
		        title: 'Map, list, legend, graph',
		        layout: 'border',
		        header: false,
		        border: false,
		        minHeight: 350,
		        margins: '5 5 0 0',
		        items: [
					{
				        title: 'Map, Legend, Graph',	// Center region: Nested border containing google maps, graph, legend
				        region:'north',
				        id: 'map_list_legend_graph_panel',
				        layout:'border',
				        header: false,
				        height: 400,
				        minHeight: 350,
				        border: false,
				        split: true,
						defaults: {
					        split: true,
							animFloat: false,
							autoHide: false,
							useSplitTips: true,
							monitorResize: false	// for performance. not yet verified, though.
						},
				        items: [{
				        	title: 'Google Maps and tools',
				        	id: 'map_panel',
				        	region:'center',
				        	contentEl: "center_pane",
			   		        header: false,
					        height: 400,
					        minHeight: 350,
					        autoHeight: false,
					        listeners: {
								resize: resize_map
					        }
				        	}, {
						        title: ' ',
						        region:'east',
						        id:'general_info_panel',
						        layout: 'card',
						        activeItem: 0,
								collapsible: true,
								cmargins: '0 0 0 5',
						        width: 170,
						        height: 400,
						        minHeight: 350,
						        autoHeight: false,
						        stateful: false,
						        bbar: [{
								    id: 'card-general',
								    text: '« General info.',
								    handler: switch_card.createDelegate(this, [0, "general_info_panel"]),
								    hidden: true
								},'->', {
								    id: 'card-legend',
								    text: 'Env. legend »',
								    handler: switch_card.createDelegate(this, [1, "general_info_panel"])
								}],
						        items: [
						        {
						        	id: 'general_info',
						        	contentEl: 'east_pane',
							        border: false
						        }, {
						        	id: 'env_legend_panel',
						        	html: "<div class='current_env_layer'></div><img class='env_legend' src='/seamap2/icons/blank.png'>",
							        border: false,
							        bodyStyle: 'padding:5px',
							        autoScroll: true
						        }
						        ]
					        }, {
						        title: 'Graph and Environment',
						        id: "graph_and_env_panel",
						        region:'south',
						        layout: 'border',
						        border: false,
								collapsible: false,
								hidden: true,
								header: false,
						        width: 150,
						        height: 200,
						        minHeight: 200,
						        autoHeight: false,
						        defaults: {
							        split: true,
									animFloat: false,
									autoHide: false,
									useSplitTips: true,
									monitorResize: true
						        },
						        items: [{
						        	title: 'Graph',
						        	region:'center',
						        	id: 'graph_panel',
						        	contentEl: "info_frame",
					   		        header: false,
							        height: 200,
							        minHeight: 200,
							        autoHeight: false
						        }, {
						        	title: 'Environmental Layer',
						        	region:'east',
						        	id: 'env_option_panel',
						        	contentEl: "option_form",
					   		        header: true,
					   		        collapsible: true,
									collapsed: true,
							        height: 200,
							        minHeight: 200,
							        width: 300,
							        cmargins: '0 0 0 5',
							        bodyStyle: 'padding: 5px',
							        autoHeight: false
						        }]		// End of Graph / Environment (south region)
					        }]			// End of Google Maps and tools (center region)
				    }, {
				        region: 'center',
				        title: 'Large list',
				        header: false,
				        contentEl: "list_frame",
				        border: false,
				        height: 450,
				        minHeight: 300,
				        margins: '0 0 5 0',
				        listeners: {
							resize: window_resize
				        }
				    } ]	// End of Map, legend, graph
		}]
	});		// End of main frame (Ext.Panel)
	
	//grid.render();		// grid is rendered in get_datasets. It makes you feel faster page loading.
	//grid.on("rowclick", row_clicked);	
	
	toggle_east_toolbar(true);
	
	/***** Implement misc tools. *****/
	/* 1. Transparency slide bar */
	var transparency_tip = new Ext.ux.SliderTip({		// Defined above
	    getText: function(slider){
	        return String.format('{0}% transparent', slider.getValue());
	    }
	});
	
    new Ext.Slider({
        renderTo: 'transparency_bar',
        //width: 105,
        width: 80,
        minValue: 0,
        maxValue: 100,
        value: 60,
        plugins: transparency_tip,
        listeners: {
        	 change: polygon_transparency
        }
    });
    
    new Ext.ToolTip({
    	target: "transparency_bar",
    	html: "drag slider to change polygon transparency",
    	autoWidth: true,
    	autoHeight: true,
    	mouseOffset: [10,10]
    });	
    
	/* 2. Calendar tool for env layer "Specified below" option */
	/*
	new Ext.form.DateField({
		renderTo: "div_env_time_range",
		fieldLabel: "Specified below",
		name: "env_time_range",
		id: "env_time_range",
		//format: "Y-m-d",
		altFormats: "Y|Y-m|Y-m-d|Y/m/d|m/d/Y",
		value: "2000",
		validateOnBlur: false,
		validationEvent: false
	});
	*/

	/* Set default for input boxes */
	$$("input[type='checkbox']").each(function(item){item.checked = false});
	$$("input[value='specific']").each(function(item){item.checked = true;});
	$$("input[value='N']").each(function(item){item.checked = true;});
});

function row_clicked(theGrid, rowIndex, e) {
	gQuery.clearTemporal();
	
	var row = theGrid.store.getAt(rowIndex);
	var row_div = grid.getView().getRow(rowIndex);
	var id = parseInt(row.id);			
	if (store.id == "species_store") {
		var ids = gQuery.sp_tsn;	// Species Search Page
	} else {
		var ids = gQuery.dataset;	// Dataset Search Page
	}
	
	//if (ids.indexOf(id) == -1) {
	if (theGrid.getSelectionModel().isSelected(rowIndex)) {
		// Newly selected.
		if (gMultiSelect) {
			ids.push(id);
		} else {
			ids = [id];			
		}
		$$("div.x-grid3-row-expanded").invoke("removeClassName", "x-grid3-row-expanded").invoke("addClassName", "x-grid3-row-collapsed");
		Ext.fly(row_div).replaceClass('x-grid3-row-collapsed', 'x-grid3-row-expanded');
	} else {
		// Already selected. Deselect. gMultiSelect doesn't matter.
		ids = ids.without(id);
		Ext.fly(row_div).replaceClass('x-grid3-row-expanded', 'x-grid3-row-collapsed');
	}
	
	if (store.id == "species_store") {
		gQuery.sp_tsn = ids;
	} else {
		gQuery.dataset = ids;
	}
	
	var graph_panel = Ext.getCmp("graph_and_env_panel");
	if (!graph_panel.hidden) {
		update_chart();
	}
	update_dist_layers();
	
	if (store.id == "species_store") {
		update_num_species();
		var extent = row.data.extent;
	} else {
		update_num_datasets();
		var extent = row.data.longitude_min + " " + row.data.latitude_min + "," + row.data.longitude_max + " " + row.data.latitude_max;
	}
	
	if (extent != "" && gROIs.length == 0) {
		zoomToBOX3D(extent);
	}
	
}

function switch_card(id, panel_id) {
	var east = Ext.getCmp(panel_id);
	east.layout.setActiveItem(id);
	var bbar = east.getBottomToolbar();
	bbar.items.items[id * 2].hide();
	bbar.items.items[2 - id * 2].show();
}

function toggle_east_toolbar(hidden) {
	var east = Ext.getCmp("general_info_panel");
	var height = east.getSize().height;
	var bbar = east.getBottomToolbar();
	if (hidden) {
		bbar.hide();
		if (Ext.isIE) {		// IE can't handle bbar's outer div height.
			$$("#general_info_panel div.x-panel-bbar")[0].setStyle({display: "none"});
		}
	} else {
		if (Ext.isIE) {		// IE can't handle bbar's outer div height.
			$$("#general_info_panel div.x-panel-bbar")[0].setStyle({display: "block"});
		}
		bbar.show();
	}
	east.syncSize();
	east.doLayout();
	east.setHeight(height);
}

function multi_select(item, pressed){
	if (item.id == "btn_series_multi_select") {
		gSeriesMultiSelect = pressed;
		Ext.getCmp("series_grid").getSelectionModel().multiSelectWithClick = pressed;
	} else {
		gMultiSelect = pressed;
		grid.getSelectionModel().multiSelectWithClick = pressed;
		grid_simple.getSelectionModel().multiSelectWithClick = pressed;
	}	
	if (!pressed) {
		// Clear selection. not used now.
	}
}


function window_resize (panel, adjWidth, adjHeight, rawWidth, rawHeight) {
	if (typeof(border) != "undefined") {
		if (Ext.isIE6) {
			// IE6 can't adjust the width of main frame and needs help here.
			// Also resize event is not fired in IE6. So when resizing the window after the initial page load, this function is not called.
			var width = GetWindowSize('width') * 0.95;
			border.setWidth(width);
		}

		/* Adjust height of grid */
		var layout = border.layout;
		//var main_height =layout.center.getSize().height;
		//var map_height = layout.center.panel.layout.north.getSize().height;
		//grid.setHeight(main_height - map_height - margin);
		
		var center_panel = layout.center.panel;
		border.suspendEvents();
		center_panel.layout.center.panel.suspendEvents();
		var buffer = 5;
		var grid_margin = 3;
		var north_height = center_panel.layout.north.getSize().height;
		var grid_height = grid.getSize().height;
		center_panel.layout.center.panel.setHeight(grid_height + grid_margin);
		center_panel.setHeight(north_height + grid_height + buffer);
		layout.west.panel.setHeight(north_height + grid_height);
		border.setHeight(north_height + grid_height + grid_margin + buffer * 2);
		border.resumeEvents();
		center_panel.layout.center.panel.resumeEvents();
		grid.setWidth('auto');
		grid_simple.setWidth('auto');
		grid.syncSize();
		grid_simple.syncSize();
		
		resize_west();	// Needed. Otherwise, the height of the taxontree panel not properly initialized.
	}
}

function resize_west(panel, adjWidth, adjHeight) {
	if (typeof(border) != "undefined") {
		var margin = 5;
		var buffer = 4;
		var layout = border.layout;
		
		/* Adjust left hand side grid (provider/taxon tree) */
		var header = layout.west.panel.getFrameHeight();
		var height = layout.west.panel.items.items.inject(0, function(acc, item){
			if (item.id == "grid_simple") {
				return acc;
			} else {
				return acc + item.getSize().height};
			});
		grid_simple.setHeight(layout.west.getSize().height - height - margin - header + buffer);
	}
}


function resize_map (panel, adjWidth, adjHeight) {
	var toolbar_height = 30;
	var dimension = {};
	if (typeof(adjWidth) != "undefined") {
		dimension['width'] = adjWidth + "px";
	}
	if (typeof(adjHeight) != "undefined") {
		dimension['height'] = (adjHeight - toolbar_height) + "px";
	}
	$("map").setStyle(dimension);
	if(typeof(map) != "undefined") {
		map.checkResize();
	}
}


function sort_by_name(btn) {
	// this function is used by both a button in grid toolbar and <a> link in grid_simple titlebar.
	// In titlebar, it's a link and btn is not passed.
	if (typeof(btn) == "undefined") {
		btn = Ext.getCmp("btn_sort");
	}
	if (btn.text == "Sort by name") {
		store.clearGrouping();
		store.sort("entity_name", "ASC");
		if (store.id == "species_store") {
			var title = "Group by taxa";
		} else {
			var title = "Group by provider";
		}
	} else {
		store.groupBy("group_field");
		var title = "Sort by name";
	}
	btn.setText(title);
}

function collapse_all(btn) {
	if (btn.id == "btn_series_collapse") {
		var theGrid = Ext.getCmp("series_grid");
	} else {
		var theGrid = grid;
	}
	
	if (btn.text == "Collapse all") {
		theGrid.getView().collapseAllGroups();
		btn.setText("Expand all");
	} else {
		theGrid.getView().expandAllGroups();
		btn.setText("Collapse all");
	}
}

function show_all(btn) {
	gQuery.clearTemporal();
	
	if (store.id == "species_store") {
		gQuery.sp_tsn = [];
	} else {
		gQuery.dataset = [];
	}
	grid.selModel.clearSelections();
	
	var graph_panel = Ext.getCmp("graph_and_env_panel");
	if (!graph_panel.hidden) {
		update_chart();
	}
	update_dist_layers();
	
	if (store.id == "species_store") {
		// update species count
	} else {
		update_num_datasets();
	}	
}

function whole_extent() {
	map.setCenter(new GLatLng(gInitLoc["latitude"], gInitLoc["longitude"]), gInitLoc["zoom"]);	
}

function show_env_window() {
	load_env_desc();
	
	var win = new Ext.Window({
		title: 'Environmental layer',
		contentEl     : 'tab_environment',
		autoScroll: true,
		autoShow: true,
		layout      : 'fit',
		width       : 800,
		height      : 400,
		closeAction :'hide',
		plain       : true,
		bodyStyle: 'text-align: left; background-color:#FFFFFF',
		bodyCfg: {
	        tag: 'center',
	        cls: 'extjs_popup'
	    }
	});
	
	win.show();	
}