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

				TrafficControl.prototype.initialize = function(map) {
				// create Parent object container - give id ='container'
				var container = document.createElement("div");
				container.setAttribute('id', 'container');
				this.setButtonStyle_(container);
				//window.alert ("container hoogte " + container.height) 
							   
			   // create trafficHeder and put to Stage
				var trafficHeader = document.createElement("div");
				trafficHeader.setAttribute('id', 'trafHeader');
				trafficHeader.width = "100px";
				trafficHeader.bgColor = "#123121";
				trafficHeader.appendChild(document.createTextNode(tm_traff_headerBoxtext));
				container.appendChild(trafficHeader)
				

				
					// EventListener and logic for displaying
					GEvent.addDomListener(trafficHeader, "click", function() {
					  // variable to define height of animation box
					  
							  
					  // set current state
					  if (tm_traffic_on == false) {
						  // invert => set to true
						  tm_traffic_on = true;
						  
						  
						  // animate height
						  $('#container').animate(
							  {"height": traffic_box_height +"px"}, "fast")
					  
						  $("div[name^= 'mydiv']").show();
						  $('.labelForStyler').show();  // 	
							  
						  } // end if
						  
					else {
						  // close the button, set traffic_on to false
						  tm_traffic_on = false;
						  $('#container').animate({"height": "13px"}, "fast");	// close container
						  $("div[name^= 'mydiv']").hide(); // hide input items
						  $('.labelForStyler').hide();  // hide
						  
					} // end else
					 
				
				}); // end eventlistener
				 
										  
			   
				 map.getContainer().appendChild(container);
				 return container;
			   }
			   

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

			   // Sets the proper CSS for the given button element.
			   TrafficControl.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 = "white";
				button.style.padding = "3px";
				
				/*button.style.color = "#000000";
				button.style.marginBottom = "2px";
				button.style.textAlign = "center";
                */
				}