function spcOptionPanel()
{
	this.name = 'spcOptionPanel';

	this.debug = false;
	this.initialized = false;
	this.editmode = false;
	
	this.optionListLabel 	= new spcOptionList();
	this.optionListAfloop   = new spcOptionList();
	this.optionListYear 	= new spcOptionList();
	this.optionListProvince = new spcOptionList();
	this.optionListCategory = new spcOptionList();
	this.optionListCategory2 = new spcOptionList();
	
	this.newItem = null;
	this.newPoint = null;
	
	this.pointShown = false;

}

spcOptionPanel.prototype.onClick = function()
{
	this.onSelect();
}

spcOptionPanel.prototype.onSelect = function()
{
var x=document.getElementById("myProvincie");
var txt="All options: ";
var i;
var sProvincie='overijssel';
var sJaar='2010';
var sCategorie;
var sSelection;
var sSelectionList;


	sJaar = this.optionListYear.getSelectionList('','','');
	sProvincie = this.optionListProvince.getSelectionList('','','');

var fields = '*';
var table = 'ongevallen'+sProvincie.toLowerCase()+sJaar;
var where = '';

	/*
	if (!this.newItem) {
	this.newItem = new spcMapItem(20000);
	this.newPoint = new spcMapPoint(mygmap,this.newItem);
	}

	if (this.pointShown) {
		this.newPoint.hide();
		this.pointShown = false;
	}
	else {
		this.newPoint.show();
		this.pointShown = true;
	}
	*/

  txt = 'SELECT *';
  //txt += this.optionListLabel.getSelectionList('',', ','');
  txt += ' FROM ' + table + ' WHERE ';
  
  txt += '(';
  txt += this.optionListAfloop.getAssignmentList('(',' OR ',')');
  
  if (this.optionListCategory.length()>0) {
    txt += ' AND (';
	txt += this.optionListCategory.getAssignmentList('(',' OR ',')');
  }

  if (this.optionListCategory2.length()>0) {
	txt += ' OR (';
	txt += this.optionListCategory2.getAssignmentList('(',' OR ',')');
	
  }
  
  if (this.optionListCategory.length()>0) { txt += ')'; }
  if (this.optionListCategory2.length()>0) { txt += ')'; }
  txt += ')';
  
  txt += ' LIMIT 0, 5000';
  
  var query = 'SELECT  afloop, lat, lng, CONCAT(omschrijving_voertuig, " ",omschrijving_voertuig_2, " ",CAST(afloop AS CHAR)," ",CAST(datum_ong AS CHAR)," ",CAST(tijd AS CHAR)) AS title FROM ongevallenoverijssel2009 WHERE  ((( objecttype >= 61) and (objecttype <= 64 )) or ((objecttype_2 >= 61) and (objecttype_2 <= 64)))';
  query = txt;
  // var query = 'SELECT * FROM '+ table +' WHERE  ((( objecttype >= 61) and (objecttype <= 64 )) or ((objecttype_2 >= 61) and (objecttype_2 <= 64)))';
  
  mapmeta.refreshAccidents(query);
  //this.optionListCategory.database.fetchQuery(query);
  
  //alert(query);
}


spcOptionPanel.prototype.onQueryDone = function(queryResult)
{
	console.log('Done spcOptionPanel.prototype.onQueryDone()');
}

spcOptionPanel.prototype.create = function(className)
{
	var self = this;

	this.optionListLabel.create("myLabel"
								,4
								,true		
								,"SHOW COLUMNS FROM ongevallenoverijssel2009"
								,function(queryResult) {self.optionListLabel.populateDOM();}
								,"Field"
								);
								
	this.optionListYear.create("myJaar"
								,1
								,false		
								,null
								,null
								,"Jaar"
								);
								
	this.optionListProvince.create("myProvincie"
								,1
								,false		
								,null
								,null
								,"Provincie"
								);
								
	this.optionListCategory.create("myCategory"
								,24
								,true		
								,"SELECT DISTINCT omschrijving_voertuig FROM ongevallenoverijssel2009 ORDER BY omschrijving_voertuig"
								,function(queryResult) {self.optionListCategory.populateDOM();}
								,'omschrijving_voertuig'
								);
								
	this.optionListCategory2.create("myCategory2"
								,24
								,true		
								,"SELECT DISTINCT omschrijving_voertuig_2 FROM ongevallenoverijssel2009 ORDER BY omschrijving_voertuig_2"
								,function(queryResult) {self.optionListCategory2.populateDOM();}
								,'omschrijving_voertuig_2'
								);
								
    this.optionListAfloop.create("myOutcome"
								,5
								,true		
								,"SELECT DISTINCT afloop FROM ongevallenoverijssel2009 ORDER BY afloop"
								,function(queryResult) {self.optionListAfloop.populateDOM();}
								,'afloop'
								);

	radioButtonSlowTraffic = new spcInput('radioButtonSlowTraffic',
												  { type: 		'radio'
												  , name:		'Ongevallen selectie'
												  , onClick:	function (e) {	self.optionListAfloop.selectAll(); 
																				self.optionListCategory.deselectAll();
																				self.optionListCategory.select(2);
																				self.optionListCategory.select(3);	
																				//self.optionListCategory.select(5);
																				self.optionListCategory.select(6);
																				
																				self.optionListCategory.select(12);
																				self.optionListCategory.select(13);
																				self.optionListCategory.select(16);	
																				
																				self.optionListCategory2.deselectAll();
																				self.optionListCategory2.select(3);
																				self.optionListCategory2.select(4);	
																				self.optionListCategory2.select(7);
																				self.optionListCategory2.select(16);
																				self.optionListCategory2.select(17);
																				self.optionListCategory2.select(21);
																					
																			}
												  , value:		'Langzaam verkeer'
												  , checked:	false
												  }
												 );
												 
	radioButtonFastTraffic = new spcInput('radioButtonFastTraffic',
												  { type: 		'radio'
												  , name:		'Ongevallen selectie'
												  , onClick:	function (e) {	self.optionListAfloop.selectAll();
																				self.optionListCategory.selectAll();
																				self.optionListCategory.deselect(2);
																				self.optionListCategory.deselect(3);	
																				self.optionListCategory.deselect(5);
																				self.optionListCategory.deselect(6);
																				self.optionListCategory.deselect(10);
																				self.optionListCategory.deselect(12);
																				self.optionListCategory.deselect(13);
																				self.optionListCategory.deselect(16);
																				self.optionListCategory.deselect(8);
																				
																				self.optionListCategory2.deselectAll();
																				self.optionListCategory2.select(1);
																				self.optionListCategory2.select(5);	
																				self.optionListCategory2.select(8);
																				self.optionListCategory2.select(11);
																				self.optionListCategory2.select(15);
																				self.optionListCategory2.select(18);
																				self.optionListCategory2.select(19);
																				self.optionListCategory2.select(20);
																				self.optionListCategory2.select(22);
																				
																			  }
												  , value:		'Snel verkeer'
												  }
												 );
												 
	radioButtonFixedObjects = new spcInput('radioButtonFixedObjects',
												  { type: 		'radio'
												  , name:		'Ongevallen selectie'
												  , onClick:	function (e) {	self.optionListAfloop.selectAll();
																				self.optionListCategory.deselectAll();
																				self.optionListCategory.select(8);
																				self.optionListCategory2.deselectAll();
																				self.optionListCategory2.select(2);
																				self.optionListCategory2.select(9);
																				self.optionListCategory2.select(10);
																				self.optionListCategory2.select(13);
																				self.optionListCategory2.select(14);
																				
																				}
												  , value:		'Ongevallen met vaste objecten'
												  }
												 );											 
	
	radioButtonAnimals = new spcInput('radioButtonAnimals',
												  { type: 		'radio'
												  , name:		'Ongevallen selectie'
												  , onClick:	function (e) {	self.optionListAfloop.selectAll();
																				self.optionListCategory.deselectAll();
																				self.optionListCategory.select(5);
																				self.optionListCategory2.deselectAll();
																				self.optionListCategory2.select(6);
																				}
												  , value:		'Ongevallen met dieren'
												  }
												 );	
	
	radioButtonUnknown = new spcInput('radioButtonUnknown',
												  { type: 		'radio'
												  , name:		'Ongevallen selectie'
												  , onClick:	function (e) {	self.optionListAfloop.selectAll();
																				self.optionListCategory.deselectAll();
																				self.optionListCategory.select(10);
																				self.optionListCategory2.deselectAll();
																				self.optionListCategory2.select(12);
																				}
												  , value:		'Ongevallen met doorrijders'
												  }
												 );	
	
	radioButtonFatal = new spcInput('radioButtonFatal',
												  { type: 		'radio'
												  , name:		'Ongevallen selectie'
												  , onClick:	function (e) {	self.optionListAfloop.deselectAll(); 
																				//self.optionListAfloop.select('Dodelijk');
																				self.optionListAfloop.select(0);
																				self.optionListCategory.deselectAll();
																				self.optionListCategory2.deselectAll();
																				}
												  , value:		'Dodelijke ongevallen'
												  }
												 );	
												 
	radioButtonNone = new spcInput('radioButtonNone',
												  { type: 		'radio'
												  , name:		'Ongevallen selectie'
												  , onClick:	function (e) {	self.optionListAfloop.deselectAll();
																				self.optionListCategory.deselectAll();
																				self.optionListCategory2.deselectAll();
																				}
												  , value:		'Zonder ongevallen'
												  }
												 );												 
												 
	buttonDisplayAccidents = new spcInput('buttonDisplayAccidents',
												  { type: 		'button'
												  , name:		'Button afbeelden ongevallen'
												  , onClick:	function (e) { self.onSelect();}
												  , value:		'Afbeelden'
												  }
												 );											 
	
	
}

spcOptionPanel.prototype.draw = function(className)
{
	var self = this;

	var panelLegend = document.createElement('div');
	panelLegend.className = className //"panelAccidentLegend";

	
	radioButtonSlowTraffic.onClick(radioButtonSlowTraffic,window.event);
	//this.optionListAfloop.selectAll();
	
	
		
	
	//panelLegend.onmouseout = function() { self.pingType(0); };

	var   mapTypes = mapmeta.types
		, theType
		, panelHTML = '<table class="legendAccidentTable" border="0" >';
		
	/*	
	panelHTML += '<tr>Label</tr>';
	panelHTML += '<tr>';
								
	panelHTML += this.optionListLabel.htmlContent();
	
	
	panelHTML += '<br /><br />';
	//panelHTML += '<input type="button" onclick="changeCategorySelection()" value="Kies Provincie">';
	panelHTML += '</tr>';	
	panelHTML += '<tr>';
	panelHTML += '</tr>';
	*/
	//panelHTML += '<div id="divRadioButtonSlowTraffic" class="clickable,radioButtonSlowTraffic" onClick="eventDispatch(this,event,\'onClick\')" >';
	panelHTML += '<tr onClick="radioButtonSlowTraffic.onClick();" >';
		
			panelHTML += '<td>';
			panelHTML += '<img src="gfx/map_icons/gmaps/walking-tour.png" class="radioButtonSlowTraffic" />';
			panelHTML += '</td>';
			panelHTML += '<td>';
			panelHTML += '<img src="gfx/map_icons/gmaps/cyclingsport.png" class="radioButtonSlowTraffic" />';
			panelHTML += '</td>';
			panelHTML += '<td>';
			panelHTML += radioButtonSlowTraffic.htmlContent();
			panelHTML += '</td>';
		
	panelHTML += '</tr>';
	//panelHTML += '</div>';
	
	panelHTML += '<tr onClick="radioButtonFastTraffic.onClick();" >';
		panelHTML += '<td>';
		panelHTML += '<img src="gfx/map_icons/gmaps/car.png" class="radioButtonFastTraffic"  />';
		panelHTML += '</td>';
		panelHTML += '<td>';
		panelHTML += '<img src="gfx/map_icons/gmaps/truck.png" class="radioButtonFastTraffic" />';
		panelHTML += '</td>';
		panelHTML += '<td>';
		panelHTML += radioButtonFastTraffic.htmlContent();
		panelHTML += '</td>';
	panelHTML += '</tr>';
	panelHTML += '<tr onClick="radioButtonFixedObjects.onClick();" >';
	
		panelHTML += '<td>';
		panelHTML += '<img src="gfx/map_icons/gmaps/forest.png" class="radioButtonFixedObjects"  />';
		panelHTML += '</td>';
		panelHTML += '<td>';
		panelHTML += '</td>';
		panelHTML += '<td>';
		panelHTML += radioButtonFixedObjects.htmlContent();
		panelHTML += '</td>';

	panelHTML += '</tr>';
	panelHTML += '<tr onClick="radioButtonAnimals.onClick();" >';
		panelHTML += '<td>';
		panelHTML += '<img src="gfx/map_icons/gmaps/pets.png" class="radioButtonAnimals"/>';
		panelHTML += '</td>';
		panelHTML += '<td>';
		panelHTML += '</td>';
		panelHTML += '<td>';
		panelHTML += radioButtonAnimals.htmlContent();
		panelHTML += '</td>';
		
	panelHTML += '</tr>';
	panelHTML += '<tr onClick="radioButtonUnknown.onClick();" >';
	
		panelHTML += '<td>';
		panelHTML += '<img src="gfx/map_icons/gmaps/curvyroad.png" class="radioButtonUnknown"/>';
		panelHTML += '</td>';
		panelHTML += '<td>';
		panelHTML += '</td>';
		panelHTML += '<td>';
		panelHTML += radioButtonUnknown.htmlContent();
		panelHTML += '</td>';
	
	panelHTML += '</tr>';
	panelHTML += '<tr onClick="radioButtonFatal.onClick();" >';
		panelHTML += '<td>';
		panelHTML += '<img src="gfx/map_icons/gmaps/cemetary.png" class="radioButtonFatal" />';
		panelHTML += '</td>';
		panelHTML += '<td>';
		panelHTML += '</td>';
		panelHTML += '<td>';
		panelHTML += radioButtonFatal.htmlContent();
		panelHTML += '</td>';
	
	panelHTML += '</tr>';
	panelHTML += '<tr onClick="radioButtonNone.onClick();" >';
		panelHTML += '<td>';
		panelHTML += '</td>';
		panelHTML += '<td>';
		panelHTML += '</td>';
		panelHTML += '<td>';
		panelHTML += radioButtonNone.htmlContent();
		panelHTML += '</td>';
	
	panelHTML += '</tr>';
	panelHTML += '<tr>';
		panelHTML += '<td>';
			panelHTML += ' <br>';
		panelHTML += '</td>';
		panelHTML += '<td>';
		panelHTML += '</td>';
		panelHTML += '<td>';
		panelHTML += '</td>';
	
	panelHTML += '</tr>';
	panelHTML += '</table>';
	
	panelHTML += '<table class="legendAccidentTable2" border="0" >';
	panelHTML += '<tr>';
	
		panelHTML += '<td>';
		
		//panelHTML += 'Jaar';
		panelHTML += '<select id="myJaar">';
		panelHTML += '  <option>2006</option>';
		panelHTML += '  <option>2007</option>';
		panelHTML += '  <option>2008</option>';
		panelHTML += '  <option>2009</option>';
		panelHTML += '  <option selected>2010</option>';
		panelHTML += '  <option>2011</option>';
		panelHTML += '  <option>2012</option>';
		panelHTML += '</select>';
		panelHTML += '</td>';
		
		panelHTML += '<td>';
		panelHTML += '</td>';
		
		panelHTML += '<td>';
		//panelHTML += 'Provincie';
		panelHTML += '<select id="myProvincie">';
		panelHTML += '  <option selected>Overijssel</option>';
		panelHTML += '  <option>Flevoland</option>';
		panelHTML += '</select>';
		
		panelHTML += '</td>';
		
	
	panelHTML += '</tr>';
	
	panelHTML += '</table>';
	
	
	
	panelHTML += '<br>';
	panelHTML += buttonDisplayAccidents.htmlContent();
	panelHTML += '<br>';
	
	panelHTML += '<hr>';
	
	panelHTML += '<table class="legendAccidentTable3" border="0" >';
	
	panelHTML += '<tr>';
	
		panelHTML += '<td>';
		panelHTML += 'Afloop';	
		panelHTML += '<br>';		
		panelHTML += this.optionListAfloop.htmlContent();
		panelHTML += '</td>';
		panelHTML += '<td>';
		panelHTML += '</td>';
		panelHTML += '<td>';
		panelHTML += '</td>';
	
	panelHTML += '</tr>';	
	
	panelHTML += '<tr>';
		panelHTML += '<td>';
		panelHTML += 'Categorie';
		panelHTML += this.optionListCategory.htmlContent();
		panelHTML += '</td>';
		
		panelHTML += '<td>';
		panelHTML += 'Categorie 2';
		panelHTML += this.optionListCategory2.htmlContent();
		panelHTML += '</td>';
		
		panelHTML += '<td>';
		panelHTML += '</td>';
		
	panelHTML += '</tr>';
	
	panelHTML += '<tr>';
		panelHTML += '<td>';
		panelHTML += '<input type="button" onclick="buttonDisplayAccidents.onClick();" value="Afbeelden">';
		panelHTML += '</td>';
		
		panelHTML += '<td>';
		panelHTML += '</td>';
		
		panelHTML += '<td>';
		panelHTML += '</td>';
		
	panelHTML += '</tr>';

	panelLegend.innerHTML = panelHTML + '</table>';

	return panelLegend;
	
}