/*Layout.js*/
/*Provides base functions to create layout elements on the page - Panels and Picklists*/

/*FUNCTIONS
-createPanel
-createPicklist
-createPlantpicklists
*/

/*---------------------------------------------------------------------------------------------------------------------------------------
| Function - createPanel(panelID, height, panelClass, icon, title, headerClass, headerRightContent, headerRightContentClass, panelContent, panelContentClass, startVisibility);

| Purpose- Creates a panel

| panelID 
	- ID of the panel
	Default Value - dummyPanel ( do NOT leave panelID empty )
	
| height 
	- Height of the panel div itself, must be specified as the toggleSlide function must know the panel's height 
	- Play around with different values until an appropiate height is found
	Default Value - 90
	
| panelClass 
	- The class to use for the panel
	Default Value - panelClass

| icon 
	- URL of the min / max icon
	- Most likey this won't change from the default value
	Default Value - ../lib/img/divmin.png
	
| title 
	- Title of the div, appears next to the icon in the header
	Default Value - 'Dummy Panel'

| headerClass 
	- The class to use for the panel's header. The header div appears directly above the panel div itself, and is always displayed 
	-( the panel div is the one that is affected by the toggle, this header div contains the toggleSlide function )

| headerRightContent 
	- Additional functions / links / etc
	- Appears on the right side of the header
	Default Value - null

| headerRightContentClass
	-Class of the div that contains the headerRightContent
	Default Value - panelRightHeaderContent

| panelContent
	-Content inside the panel ( Stuff that gets displayed when the panel is open )
	-Useful to place atlas buttons and other stuff
	Default Value - null

| panelContentClass
	-Class the controls the style of the panel content
	-By default, there is 10px left padding
	Default Value - panelContent

| startVisibility
	-Controls if the panel is expanded by default or not
	-If startVisibility is "hidden", then the panel is not expanded
	Default Value - N/A, the panel is expanded by default
	
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*-------
|	createPanel( panelID, height, icon, title, headerRightContent, panelClass, panelHeaderClass, panelContent, panelContentClass, startVisibility )
|
|ex. createPanel( 'mapZoom', 'Map Zoom', null, 90, '../lib/img/divmin.png' );
|
--------*/
function createPanel(panelID, height, panelClass, icon, title, headerClass, headerRightContent, headerRightContentClass, panelContent, panelContentClass, startVisibility)
{
/*Set default values if none are given*/
	if(panelID == null || panelID == undefined)
		panelID = 'dummyPanel';
	if(height == null || height == undefined)
		height = 90;
	if(panelClass == null || panelClass == undefined)
		panelClass = 'panelClass';
	if(icon == null || icon == undefined)
		icon = '../lib/img/divmin.png';
	if(title == null || title == undefined)
		title = 'Dummy Panel';
	if(headerClass == null || headerClass == undefined)
		headerClass = 'panelHeader';
	if(headerRightContent == null || headerRightContent == undefined)
		headerRightContent = '';
	if(headerRightContentClass == null || headerRightContentClass == undefined)
		headerRightContentClass = 'panelRightHeaderContent';
	if(panelContent == null || panelContent == undefined)
		panelContent = '';
	if(panelContentClass == null || panelContentClass == undefined)
		panelContentClass = 'panelContent';
	if(startVisibility == null || startVisibility == undefined)
		startVisibility = "";
	if(startVisibility == 'hidden' || startVisibility == 'hide' || startVisibility == '0')
		startVisibility = 'display:none;'
	else
		startVisibility = "";
		
/*Get the container div (mapDiv)*/
/*$(element) is the same as getElementById(element) - this function is defined in the lib*/
	theDiv = $('panelContainer');
	
/*Create the map zoom div*/	
	theDiv.innerHTML += "<!--Begin " + title + " Box-->"
	+     		"<div id='" + panelID + "Toggle' class='" + headerClass +"'>"
	+		"<a onmousedown='toggleSlide(\"" + panelID + "\");'>"
	+		"	<img src='" + icon + "' id='" + panelID +"Img'/>"
	+		"	" + title + ""
	+		"</a>"
		/*Start right header content*/
	+			"<div class='" + headerRightContentClass + "'>"
	+				headerRightContent
	+			"</div>"
	+		"</div>";
		/*End panel header div*/
		
		/*Begin panel content div*/
	theDiv.innerHTML += "<div id='" + panelID + "'  style='height:" + height + "px; " + startVisibility + "' class='" + panelClass + "'>"
	+      		"	<br />"			
	+      		"	<div id='" + panelID + "Content' class='" + panelContentClass + "'>"
	+			panelContent;

		/*The picklists will go in the panelIDContent div*/
		/* Picklists are created and placed here*/


	/*Close everything up*/
	theDiv.innerHTML +=	""
	+			"</div>"
	+		"</div>"
       	+		"<br />"
	+		"<!--End " + title + " Box-->";
}


/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
| Function - createPicklist( parentPanelID, picklistID, picklistTitle, picklistArray, picklistFunction, picklistClass )

| Purpose - Creates a picklist
-(Picklist is synamous with <select> list)

| parentPanelID 
	- ID of the panel the picklist is in
	Default Value - dummyPanel ( do NOT leave parentPanelID empty )

| picklistID 
	- ID (type i.e. "county") of the picklist
	Default Value - dummyPicklist ( do NOT leave picklistID empty )
	
| picklistTitle 
	- Title of the picklist, is displayed above the actual <select> list in a <h1> tag ( can be overriden in the CSS )
	Default Value - 'Dummy Picklist'

| picklistArray 
	- Array that holds the actual content
	Default Value - 'Dummy Array'
	
| picklistFunction 
	- String that has the function's name and any parameters ( i.e. 'function(\"param"\)' )
	Default Value - null

| picklistClass
	-Class used to control the style of the picklist
	Default Value - picklistContent
	
------------------------------------------------------------------*/
/*-------
|	createPicklist( parentPanelID, picklistID, picklistTitle, picklistArray, picklistFunction, picklistClass )
|
|ex. 	createPicklist( 'mapZoom', 'county2', 'Zoom to County',  counties, 'zoomToExtent(\"county\")', null );
|
--------*/
function createPicklist(parentPanelID, picklistID, picklistTitle, picklistArray, picklistFunction, picklistClass)
{
/*Set default values if none are given*/
	if(parentPanelID == null || parentPanelID == undefined)
		parentPanelID = 'dummyPanel';
	if(picklistID == null || picklistID == undefined)
		picklistID = 'dummyPicklist';
	if(picklistTitle == null || picklistTitle == undefined)
		picklistTitle = 'Dummy Picklist';
	if(picklistArray == null || picklistArray == undefined)
		picklistArray = 'Dummy Array';
	if(picklistFunction == null || picklistFunction == undefined)
		picklistFunction = '';
	if(picklistClass == null || picklistClass == undefined)
		picklistClass = 'picklistContent';
		
/*Get the parent div's content div*/
	parentDiv = $(parentPanelID + 'Content');
	parentDiv.innerHTML += ""
		+	"<div class='" + picklistClass + "'>"
		+	"<h1>" + picklistTitle + "</h1>"
		+	"<br />"
		+	"<div id='" + picklistID + "div'><select name='" + picklistID + "' id='" + picklistID + "' onchange='" + picklistFunction + "'></div>"
		+	"";
	/*Get the ID of the actual <select> element*/
	picklistSelectID = $(picklistID);
	/*Loop through the array and put each array element in a <option> tag*/
	/*IE skips the 0th element if we start at 0, so if the user is using IE we'll start at -1*/
	var browser=navigator.appName;
	if ( browser == "Microsoft Internet Explorer" || browser == "Windows Internet Explorer"  ){
		for (i = -1; i < picklistArray.length; i++)
		{
			picklistSelectID.innerHTML += "<option id= '" + picklistArray[i] + "' value= '" + picklistArray[i] + "' >" + picklistArray[i] + "</option>";
		}
	}
	else {
		for (i = 0; i < picklistArray.length; i++)
		{
			picklistSelectID.innerHTML += "<option id= '" + picklistArray[i] + "' value= '" + picklistArray[i] + "' >" + picklistArray[i] + "</option>";
		}
	}
	/*End the select and div tags and add a linebreak*/
		parentDiv.innerHTML +="</select></div>";
}

/*---------------------------------------------------------------------------------------------------------------------------------------
| Function - createPlantPicklists(parentPanelID, plantCNameArray, plantSNameArray, picklistClass);

| Purpose- Creates two picklists - common and scientific name - with id's of plantCNameSelect and plantSNameSelect.
		-This function is not designed to be very flexibe, as every map will have a list of common and scientific plant names that need to be connected to each other (i.e. when one changes, the other is updated).  This function will create the two picklists without making the function caller have to write any other special functions. 

| parentPanelID 
	- ID of the parent panel
	Default Value - dummyPanel ( do NOT leave panelID empty )
	
| plantCNameArray 
	- Array that stores common plant names
	- Grab from DB
	Default Value - null
	
| plantSNameArray 
	- Array that store scientific plant names
	- Grab from DB
	Default Value - null
		
| panelClass 
	- The class to use for the panel
	Default Value - picklistContent

/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*-------
|	createPlantPicklists(parentPanelID, plantCNameArray, plantSNameArray, picklistClass)
|
|ex. createPlantPicklists('panelID', commonNames, speciesNames);
|
|This function acts like a helper function - the plant picklists can be created manually, but the IDs passed into createPicklist() must be plantCName and plantSName
--------*/
function createPlantPicklists(parentPanelID, picklistClass){
	/*Set default values if none are given*/
	if(parentPanelID == null || parentPanelID == undefined)
		parentPanelID = 'dummyPanel';
	if(picklistClass == null | picklistClass == undefined)
		picklistClass = "picklistContent";
		
	
	/*createPicklist(parentPanelID, picklistID, picklistTitle, picklistArray, picklistFunction, picklistClass);*/
	createPicklist( parentPanelID, 'plantCNameSelect', 'Common Names', loadEmptyNames('com'), 'plantCNameChange();clearPicklistArray(listToClear);filterWeeds();', null );
		$('plantCNameSelect').innerHTML += getPlantList('common'); /*Set the innerHTML to the returned option list from python*/
	createPicklist( parentPanelID, 'plantSNameSelect', 'Scientific Names',  loadEmptyNames('sci'), 'plantSNameChange();clearPicklistArray(listToClear);filterWeeds();', null );
		$('plantSNameSelect').innerHTML += getPlantList('scientific'); /*Set the innerHTML to the returned option list from python*/

    //By default, the values of 'by common (and scientific) name' aren't set to the same value.  They must be the same value so plantC(andS)NameChange() work
        $('by Common Name').value = 1337;
        $('by Scientific Name').value = 1337;
}	

function loadEmptyNames(type){
	if(type == 'com'){
		var name = new Array();
		name[0] = 'by Common Name';
		return name;
	}
	if(type == 'sci'){
		var name = new Array();
		name[0] = 'by Scientific Name';
		return name;
	}	
}
/*createPicklist(parentPanelID, picklistID, picklistTitle, picklistArray, picklistFunction, picklistClass)*/
function createPlantScientificPicklistReport(parentPanelID, reportURL, picklistClass, report){
	if(report == undefined || report == null)
		report = false;
	createPicklist( parentPanelID, 'plantSNameOnlySelect', 'Scientific Names', '', 'getReport(\"' + reportURL + '\",\"plantSNameOnlySelect\");', null );
	if(report = true)
		$('plantSNameOnlySelect').innerHTML = getPlantList('scientific', true); 
	else
		$('plantSNameOnlySelect').innerHTML = getPlantList('scientific', true); 
}


/*---------------------------------------------------------------------------------------------------------------------------------------
| Function - createButton(parentPanelID, buttonID, buttonClass, buttonValue, buttonFunction)

| Purpose- Create a button, such as the view atlas or state report button

| parentPanelID 
	- ID of the parent panel
	Default Value - dummyPanel ( do NOT leave panelID empty )
	
| buttonID 
	- ID of the button
	Default Value - dummyButtonID
	
| buttonClass 
	- Class applied to the button
	Default Value - buttonClassOverride
		
| buttonValue 
	- Text that appears in the button
	Default Value - Dummy Button

| buttonFunction
	- String that has the function's name and any parameters ( i.e. 'function(\"param"\)' )
	Default Value - null;
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-------
|	createButton(parentPanelID, buttonID, buttonClass, buttonValue, buttonFunction)
|
|ex. createPlantPicklists('panelID', commonNames, speciesNames);
|
|This will create a button, used to create the atlas, reports, etc buttons
--------*/
function createButton(parentPanelID, buttonID, buttonClass, buttonValue, buttonFunction){
	/*Set default values if none are given*/
	if(parentPanelID == null || parentPanelID == undefined)
		parentPanelID = 'dummyPanel';
	if(buttonID == null || buttonID == undefined)
		picklistID = 'dummyButtonID';
	if(buttonClass == null || buttonClass == undefined)
		buttonClass = 'buttonClassOverride';
	if(buttonValue == null || buttonValue == undefined)
		buttonValue = 'Dummy Button';
	if(buttonFunction == null || buttonFunction == undefined)
		buttonFunction = null;
		
/*Get the parent div's content div*/
	parentDiv = $(parentPanelID + 'Content');
	
	parentDiv.innerHTML += "<input id='" + buttonID + "' type='submit' class='" + buttonClass + "' value='" + buttonValue + "' onclick='" + buttonFunction + "' />";
	
}