// JavaScript Document

    function CustomControls() {
    }
    CustomControls.prototype = new GControl();

    CustomControls.prototype.initialize = function(map) {
	  var container = document.createElement("div");
	  var DimensionPlan = map.getSize();
	  var LargeurPlan = DimensionPlan.width;
	  var HauteurPlan = DimensionPlan.height;
	  
      var zoomInDiv = document.createElement("div");
      this.setButtonStyle_(zoomInDiv, "images/imagenes_googlemap/plus.png", "60px", "31px", "7px", "", 7 + 27 + 15 + 18 + 'px', "");
      container.appendChild(zoomInDiv);
      GEvent.addDomListener(zoomInDiv, "click", function() {
        map.zoomIn();
      });

      var zoomOutDiv = document.createElement("div");
      this.setButtonStyle_(zoomOutDiv, "images/imagenes_googlemap/moins.png", "60px", "29px", "7px", "", 7 + 27 + 15 + 18 + 31 + 'px', "");
      container.appendChild(zoomOutDiv);
      GEvent.addDomListener(zoomOutDiv, "click", function() {
        map.zoomOut();
      });
	  
      var panUP = document.createElement("div");
      this.setButtonStyle_(panUP, "images/imagenes_googlemap/haut.png", "60px", "27px", "7px", "", "7px", "");
      container.appendChild(panUP);
      GEvent.addDomListener(panUP, "click", function() {
        map.panDirection(0,1);
      });	  

      var panDOWN = document.createElement("div");
      this.setButtonStyle_(panDOWN, "images/imagenes_googlemap/bas.png", "60px", "18px", "7px", "", 7 + 27 + 15 + 'px', "");
      container.appendChild(panDOWN);
      GEvent.addDomListener(panDOWN, "click", function() {
        map.panDirection(0,-1);
      });	  

      var panLEFT = document.createElement("div");
      this.setButtonStyle_(panLEFT, "images/imagenes_googlemap/gauche.png", "30px", "15px", "7px", "", 7 + 27 + 'px', "");
      container.appendChild(panLEFT);
      GEvent.addDomListener(panLEFT, "click", function() {
        map.panDirection(1,0);
      });	  

      var panRIGHT = document.createElement("div");
      this.setButtonStyle_(panRIGHT, "images/imagenes_googlemap/droite.png", "30px", "15px", 7 + 30 + 'px', "", 7 + 27 + 'px',"");
      container.appendChild(panRIGHT);
      GEvent.addDomListener(panRIGHT, "click", function() {
        map.panDirection(-1,0);
      });	

      var mapTypeMap = document.createElement("div");
      this.setButtonStyle_(mapTypeMap, "images/imagenes_googlemap/btn_plan.gif", "52px", "20px", LargeurPlan - 9 - 54 - 79 - 52 + 'px', "", "8px", "");
      container.appendChild(mapTypeMap);
      GEvent.addDomListener(mapTypeMap, "click", function() {
        map.setMapType(G_NORMAL_MAP);
      });	
	  
      var mapTypeSATELLITE = document.createElement("div");
      this.setButtonStyle_(mapTypeSATELLITE, "images/imagenes_googlemap/btn_satellite.gif", "79px", "20px", LargeurPlan - 9 - 54 - 79 + 'px', "", "8px", "");
      container.appendChild(mapTypeSATELLITE);
      GEvent.addDomListener(mapTypeSATELLITE, "click", function() {
        map.setMapType(G_SATELLITE_MAP);
      });	
	  
      var mapTypeHYBRID = document.createElement("div");
      this.setButtonStyle_(mapTypeHYBRID, "images/imagenes_googlemap/btn_mixte.gif", "54px", "20px", LargeurPlan - 9 - 54 + 'px', "", "8px","");
      container.appendChild(mapTypeHYBRID);
      GEvent.addDomListener(mapTypeHYBRID, "click", function() {
        map.setMapType(G_HYBRID_MAP);
      });		  

	  map.getContainer().appendChild(container);
      return container;
    }

    CustomControls.prototype.setButtonStyle_ = function(button, image_label, largeurImage, hauteurImage, marge_gauche, marge_droite, marge_haut, marge_bas) {
      button.style.background = "url(" + image_label + ")";
	  button.style.width = largeurImage;
	  button.style.height = hauteurImage;
	  button.style.position = "absolute";
	  button.style.marginLeft = marge_gauche;	
	  button.style.marginRight = marge_droite;	
	  button.style.marginTop = marge_haut;	
	  button.style.marginBottom = marge_bas;	
      button.style.cursor = "pointer";
    }