//Fonctions permettant de customizer l'apparence des boutons de zoom
//We define the function first
function ZoomControlImg() { 
}
		
// To "subclass" the GControl, we set the prototype object to an instance of the GControl object
ZoomControlImg.prototype = new GControl();

//Creer une image pour chaque bouton zoom
ZoomControlImg.prototype.initialize = function(map) {
	//Div contenant les deux images de zoom / dezoom
	var container = document.createElement("div");
	
	//#####################################
	//Creation l'img pour vue carte
	var planElmt = document.createElement("img");
	//Image qui sera affichee
	planElmt.src = 'img/map/plan.png';
	planElmt.title = 'Map';
	//Definition du style de l'elemt zoomIn
	this.setButtonStyle_(planElmt);
	
	//Ajout du l'element zoomin au contener
	container.appendChild(planElmt);
	
	//Ajout d'une action lors du click
	GEvent.addDomListener(planElmt, "click", function() {
		map.setMapType(G_NORMAL_MAP);
	});
	
	//#####################################
	//Creation l'img pour vue satellite
	var satelliteElmt = document.createElement("img");
	//Image qui sera affichee
	satelliteElmt.src = 'img/map/satellite.png';
	satelliteElmt.title = 'Satellite';
	//Definition du style de l'elemt zoomIn
	this.setButtonStyle_(satelliteElmt);
	
	//Ajout du l'element zoomin au contener
	container.appendChild(satelliteElmt);
	
	//Ajout d'une action lors du click
	GEvent.addDomListener(satelliteElmt, "click", function() {
		map.setMapType(G_SATELLITE_MAP);
	});
	
	//#####################################
	//Creation l'img pour vue hybrid
	var hybridElmt = document.createElement("img");
	//Image qui sera affichee
	hybridElmt.src = 'img/map/plan_satellite.png';
	hybridElmt.title = 'Hibrid';
	//Definition du style de l'elemt zoomIn
	this.setButtonStyle_(hybridElmt);
	
	//Ajout du l'element zoomin au contener
	container.appendChild(hybridElmt);
	
	//Ajout d'une action lors du click
	GEvent.addDomListener(hybridElmt, "click", function() {
		map.setMapType(G_HYBRID_MAP);
	});
	
	
	
	//#####################################
	//Creation du div pour zoom in
	var zoomInElmt = document.createElement("img");
	//Image qui sera affichee
	zoomInElmt.src = 'img/map/zoom_in.png';
	zoomInElmt.title = 'Zoom';
	//Definition du style de l'elemt zoomIn
	this.setButtonStyle_(zoomInElmt);
	
	//Ajout du l'element zoomin au contener
	container.appendChild(zoomInElmt);
	
	//Ajout d'une action lors du click
	GEvent.addDomListener(zoomInElmt, "click", function() {
		if(marker != null) {
			map.setCenter(marker.getPoint());
			map.zoomIn();
		}
		else {
			map.zoomIn();
		}
	});


		  
	//#####################################
	//Creation du div pour zoom out
	var zoomOutElmt = document.createElement("img");
	//Image qui sera affichee
	zoomOutElmt.src = 'img/map/zoom_out.png';
	zoomOutElmt.title = 'Zoom Out';
	//Definition du style de l'elemt zoomIn
	this.setButtonStyle_(zoomOutElmt);
	
	//Ajout du l'element zoomin au contener
	container.appendChild(zoomOutElmt);
	GEvent.addDomListener(zoomOutElmt, "click", function() {
		map.zoomOut();
	});
		
	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.
ZoomControlImg.prototype.getDefaultPosition = function() {
	return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(7, 7));
}

// Sets the proper CSS for the given button element.
ZoomControlImg.prototype.setButtonStyle_ = function(button) {
	button.style.cursor = "pointer";
}