// A TrafficControl is a GControl that displays textual 'Traffic' button.
function TrafficControl() {
}

TrafficControl.prototype = new GControl();
// Creates a one DIV for each of the buttons and places them in a container
// DIV which is returned as our control element. We add the control 
// to the map container and return the element for the map class to
// position properly.
TrafficControl.prototype.initialize = function(map) {
	var container = document.createElement('div');
	var trafficHolder = document.createElement('div');
	var trafficDiv = document.createElement('div');
	this.setButtonStyle_(trafficDiv);
	container.appendChild(trafficHolder);
	trafficHolder.style.border = '1px solid #000';
	trafficHolder.appendChild(trafficDiv);
	trafficDiv.appendChild(document.createTextNode('Traffic'));
	GEvent.addDomListener(trafficDiv, 'click', function() {
		if (trafficVisible == false){
			map.addOverlay(trafficInfo);
			trafficVisible = true;
			this.style.fontWeight = 'bold';
			this.style.borderBottomColor = '#6c9ddf';
			this.style.borderRightColor = '#6c9ddf';
			this.style.borderLeftColor = '#345684';
			this.style.borderTopColor = '#345684';
		}else{
			map.removeOverlay(trafficInfo);
			trafficVisible = false;
			this.style.fontWeight = 'normal';
			this.style.borderBottomColor = '#b0b0b0';
			this.style.borderRightColor = '#b0b0b0';
			this.style.borderLeftColor = '#ffffff';
			this.style.borderTopColor = '#ffffff';
		}
	});
	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(220, 7));
}

// Sets the proper CSS for the given button element.
TrafficControl.prototype.setButtonStyle_ = function(button) {
	button.style.textDecoration = 'none';
	button.style.color = '#000000';
	button.style.backgroundColor = 'white';
	button.style.height = '18px';
	button.style.font = '12px Arial';
	button.style.border = '1px solid #ffffff';
	button.style.borderBottomColor = '#b0b0b0';
	button.style.borderRightColor = '#b0b0b0';
	button.style.padding = '0px';
	button.style.textAlign = 'center';
	button.style.width = '5em';
	button.style.cursor = 'pointer';
	button.style.lineHeight = '18px';
}

// A LegendControl is a GControl that displays a legend for the different location types.
function LegendControl() {
}

LegendControl.prototype = new GControl();
// Creates a one DIV for each of the buttons and places them in a container
// DIV which is returned as our control element. We add the control 
// to the map container and return the element for the map class to
// position properly.
LegendControl.prototype.initialize = function(map) {
	var container = document.createElement('div');
	var legendHolder = document.createElement('div');
	var legendDiv = document.createElement('div');
	legendHolder.style.height = "133px";
	legendHolder.style.width = "204px";
	legendHolder.style.cursor = "default";
	legendHolder.style.backgroundColor = "#f1f1f1";
	container.appendChild(legendHolder);
	legendHolder.style.border = '1px solid #000';
	legendHolder.appendChild(legendDiv);
	legendHolder.innerHTML = '<div class="legendTitle">Map Legend</div><img src="assets/images/legend.jpg" />';
	//legendDiv.appendChild(document.createTextNode('Map Legend'));
	map.getContainer().appendChild(container); 
	return container;
}

// By default, the control will appear in the bottom left corner of the
// map above the Google logo.
LegendControl.prototype.getDefaultPosition = function() {
	return new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(4, 18));
}