// JavaScript Document
// This script builds, styles and animates the POI controls
                                               
			function POIControl(map) {
			   
				this.map = map;
				this.button = document.createElement("a")
			
				}
			   
				POIControl.prototype = new GControl();

				POIControl.prototype.initialize = function(map) {
				// create Parent object poi_container - give id ='poi_container '
				var poi_container = document.createElement("div");
				poi_container.setAttribute('id', 'poi_container');
				this.setButtonStyle_(poi_container);
				//window.alert ("poi_container  hoogte " + poi_container .height) 
							   
			   // create POIHeder and put to Stage
				var POIHeader = document.createElement("div");
				POIHeader.setAttribute('id', 'poiHeader');
				POIHeader.width = "100px";
				POIHeader.bgColor = "#123121";
				POIHeader.appendChild(document.createTextNode(tm_poi_headerBoxtext));
				poi_container.appendChild(POIHeader)
				

				
					// EventListener and logic for displaying
					GEvent.addDomListener(POIHeader, "click", function() {
					  // variable to define height of animation box
					  
					  // set current state
					  if (tm_POI_on == false) {
						  // invert => set to true
						  tm_POI_on = true;
						  
						  // animate height
						  $('#poi_container').animate(
							  {"height": poi_box_height +"px"}, "fast")
					  
					// adapt selection when input names are defined
						  $("div[name^= 'poidiv']").show(); 
						  $('.labelPOIStyler').show();  // 	
							  
						  } // end if
						  
					else {
						  // close the button, set POIopen to false
						  tm_POI_on = false;
						  $('#poi_container').animate({"height": "13px"}, "fast");	// close poi_container 
		//adapt selection when input names are defined
						  $("div[name^= 'poidiv']").hide(); // hide input items 
						  $('.labelPOIStyler').hide();  // hide
						  
					} // end else
					 
				
				}); // end eventlistener
				 
										  
				map.getContainer().appendChild(poi_container);
				return poi_container;
			   } // end initialize

			   // By default, the control will appear in the top left corner of the
			   // map with 7 pixels of padding.
			   POIControl.prototype.getDefaultPosition = function() {
				 return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(258, 11));
			   } // end getDefaultPosition
			   

			   // Sets the proper CSS for the given button element.
			   POIControl.prototype.setButtonStyle_ = function(button) {
				button.style.cursor = "pointer";
				button.style.textDecoration = "none";
				button.style.font = "small Arial";
				button.style.border = "1px solid black";
				button.style.width = "7em";
				button.style.height = "13px";
                button.style.backgroundColor = "#FFFFEE";
				button.style.padding = "3px";
				
				/*button.style.color = "#000000";
				button.style.marginBottom = "2px";
				button.style.textAlign = "center";
                */
				} // end setButtonsStyle_