/********************************MARKER LIST CONTROL******************************/		
function MarkerListControl() {
	this.showNagvigator = false;
	this.showManupulator = false;
	this.showGenerator = false;
}

function MarkerListControl(showNagvigator, showManupulator, showGenerator) {
	this.showNagvigator = showNagvigator;
	this.showManupulator = showManupulator;
	this.showGenerator = showGenerator;
}

MarkerListControl.prototype = new GControl();

 MarkerListControl.prototype.initialize = function(map) {
 
	  var container = document.createElement("div");
	  
	  // Add Nagvigator
	  var selectDiv = document.createElement("div");
	  this.setButtonStyle_(selectDiv);
	  
	  var dropdownBox = document.createElement("select");
	  dropdownBox.style.width = "98%";
	  dropdownBox.onchange = function() {
		 map.closeInfoWindow();
		 listMarker.focusIndex(this.options[this.selectedIndex].value);		
		 GEvent.trigger(listMarker.currentMarker, "click");
		 this.options.length = 1;
	  };
	 
	  
	  var default_option = document.createElement("option");
	  default_option.text="-Chọn-";
	  default_option.value=-1;	 
	  dropdownBox.options[0] = default_option;
	  selectDiv.appendChild(dropdownBox);
	  
	  selectDiv.onmouseover = function() {
		var comboBox = selectDiv.childNodes[0];
		comboBox.options.length = 1; //Clear combobox
		for (var i=0;i<listMarker.markers.length;i++)
		{
			var opt=document.createElement('option');
 			opt.text=listMarker.markerHTMLInfo[i];
			opt.value=i;			
			comboBox.options[i+1] = opt;
		}
	  };
	  
	  
	  // Add Manupulator
	  var addDiv = document.createElement("div");
	  this.setButtonStyle_(addDiv);	 
	  addDiv.appendChild(document.createTextNode("Thêm vị trí"));		  
	  GEvent.addDomListener(addDiv, "click", function() {
			var point = _map.getCenter();
			var newMarker = new GMarker(point, {draggable: true});
			listMarker.addMarker(newMarker, "[Nhập nội dung mô tả tại đây]");
			attachMarkerEvent(newMarker, "[Nhập nội dung mô tả tại đây]");
	  });
	  
	  var removeDiv = document.createElement("div");
	  this.setButtonStyle_(removeDiv);
	  
	  removeDiv.appendChild(document.createTextNode("Xóa"));
	  GEvent.addDomListener(removeDiv, "click", function() {
		listMarker.removeMarker();
	  });
	  
	   
	  
	  // Add Generator
	  /*
	  var previewDiv = document.createElement("div");
	  this.setButtonStyle_(previewDiv);
	  container.appendChild(previewDiv);
	  previewDiv.appendChild(document.createTextNode("Xem trước"));
	  GEvent.addDomListener(previewDiv, "click", function() {
		preview();
	  });		 
	  */	  
	  var generateDiv = document.createElement("div");
	  this.setButtonStyle_(generateDiv);
	  
	  generateDiv.appendChild(document.createTextNode("Tạo mã"));
	  GEvent.addDomListener(generateDiv, "click", function() {
		generate();
	  });
	  
	  
	  if (this.showManupulator) {
		  container.appendChild(addDiv);
		  container.appendChild(removeDiv);
	  }
 
	  if (this.showNagvigator) {		  
		   container.appendChild(selectDiv);
	  }
 
	  if (this.showGenerator) {
		  container.appendChild(generateDiv);
	  }
  
	  map.getContainer().appendChild(container);
	  return container;
}

MarkerListControl.prototype.getDefaultPosition = function() {
  return new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10, 10));
}

MarkerListControl.prototype.setButtonStyle_ = function(button) {
  button.style.textDecoration = "none";
  button.style.color = "#000000";
  button.style.backgroundColor = "white";
  button.style.font = "11px Arial";
  button.style.border = "1px solid black";
  button.style.padding = "2px";
  button.style.marginBottom = "3px";
  button.style.textAlign = "center";
  button.style.width = "6em";
  button.style.cursor = "pointer";
}

/***********************************************************************************/

/********************************MAP SIZE CONTROL******************************/		
function MapSizeControl() {
	this.width = 770;
	this.height = 420;
}
MapSizeControl.prototype = new GControl();

 MapSizeControl.prototype.initialize = function(map) {
  var container = document.createElement("div");		  
  var sizeInput = document.createElement("div");
  this.setStyle_(sizeInput);
  container.appendChild(sizeInput);
 
  var inputDiv = document.createElement("div");
  inputDiv.innerHTML = "&nbsp;<strong>Ô nhúng</strong>:" +
						"<table border=0 style=\"font-size:11px\">" +		  						
						"<tr><td>Chiều rộng<td><td><input type=\"text\" id=\"txtWidth\" value=\"" + this.width + "\" style=\"width:30px\" ><td></tr>" +
						"<tr><td>Chiều cao<td><td><input type=\"text\" id=\"txtHeight\" value=\"" + this.height + "\" style=\"width:30px\" ><td></tr>" +
						"</table>";
  sizeInput.appendChild(inputDiv);
  
  map.getContainer().appendChild(container);
  return container;
}

MapSizeControl.prototype.getDefaultPosition = function() {
  return new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(10, 10));
}

MapSizeControl.prototype.setStyle_ = function(button) {		  
  button.style.color = "#000000";
  button.style.backgroundColor = "white";
  button.style.font = "11px Arial";
  button.style.border = "1px solid black";
  button.style.padding = "2px";
  button.style.marginBottom = "3px";
  button.style.textAlign = "left";
}

/***********************************************************************************/