// JavaScript Document

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

CustomNavigationBar.prototype.initialize = function(map) {
    
	var container = document.createElement("div");
	var iconSize = { height: 18, width: 18 };
	var controlPosition = { top: 8, left: 7 };
	var spacing = 18;
	var mapSize = map.getSize();
	var mapWidth = mapSize.width;
	var mapHeight = mapSize.height;
	
	var slidePlusImg = "/img/GoogleMaps/slide-plus.png";
	var slideMoinsImg = "/img/GoogleMaps/slide-moins.png";
	var navHautImg = "/img/GoogleMaps/nav-haut.png";
	var navBasImg = "/img/GoogleMaps/nav-bas.png";
	var navGaucheImg = "/img/GoogleMaps/nav-gauche.png";
	var navDroiteImg = "/img/GoogleMaps/nav-droite.png";
	var navCentreImg = "/img/GoogleMaps/nav-centre.png";
	var planImg = "/img/GoogleMaps/plan.png";
	var satelliteImg = "/img/GoogleMaps/satellite.png";
	var mixteImg = "/img/GoogleMaps/mixte.png";
	
	if(navigator.appVersion.indexOf("MSIE 6.0") != -1)
	{
	    slidePlusImg = "/img/GoogleMaps/gif/slide-plus.gif";
	    slideMoinsImg = "/img/GoogleMaps/gif/slide-moins.gif";
	    navHautImg = "/img/GoogleMaps/gif/nav-haut.gif";
	    navBasImg = "/img/GoogleMaps/gif/nav-bas.gif";
	    navGaucheImg = "/img/GoogleMaps/gif/nav-gauche.gif";
	    navDroiteImg = "/img/GoogleMaps/gif/nav-droite.gif";
	    navCentreImg = "/img/GoogleMaps/gif/nav-centre.gif";
	    planImg = "/img/GoogleMaps/gif/plan.gif";
	    satelliteImg = "/img/GoogleMaps/gif/satellite.gif";
	    mixteImg = "/img/GoogleMaps/gif/mixte.gif";
	}
	

	var zoomInDiv = document.createElement("div");
	this.setButtonStyle_(zoomInDiv, slidePlusImg, "46px", "23px", controlPosition.left + 'px', "", controlPosition.top + 46 + 'px', "");//controlPosition.top + 2*iconSize.height + spacing + 8 + 'px', "");
	container.appendChild(zoomInDiv);
	GEvent.addDomListener(zoomInDiv, "click", function() {
		map.zoomIn();
		$("#message").hide();
	});

	var zoomOutDiv = document.createElement("div");
	this.setButtonStyle_(zoomOutDiv, slideMoinsImg, "46px", "28px", controlPosition.left + 'px', "", controlPosition.top + 184 + 'px', "");
	container.appendChild(zoomOutDiv);
	GEvent.addDomListener(zoomOutDiv, "click", function() {
		map.zoomOut();
		$("#message").hide();
	});

	var panUP = document.createElement("div");
	this.setButtonStyle_(panUP, navHautImg, "46px", "20px", controlPosition.left + "px", "", controlPosition.top + 'px', "");
	container.appendChild(panUP);
	GEvent.addDomListener(panUP, "click", function() {
		map.panDirection(0, 1);
	});

	var panDOWN = document.createElement("div");
	this.setButtonStyle_(panDOWN, navBasImg, "46px", "12px", controlPosition.left + 'px', "", controlPosition.top + 34 + 'px', "");
	container.appendChild(panDOWN);
	GEvent.addDomListener(panDOWN, "click", function() {
		map.panDirection(0, -1);
	});

	var panLEFT = document.createElement("div");
	this.setButtonStyle_(panLEFT, navGaucheImg, "14px", "14px", controlPosition.left + "px", "", controlPosition.top + 20 + 'px', "");
	container.appendChild(panLEFT);
	GEvent.addDomListener(panLEFT, "click", function() {
		map.panDirection(1, 0);
	});

	var panRIGHT = document.createElement("div");
	this.setButtonStyle_(panRIGHT, navDroiteImg, "14px", "14px", controlPosition.left + 28 + 'px', "", controlPosition.top + 20 + 'px', "");
	container.appendChild(panRIGHT);
	GEvent.addDomListener(panRIGHT, "click", function() {
		map.panDirection(-1, 0);
	});

	var panCENTER = document.createElement("div");
	this.setButtonStyle_(panCENTER, navCentreImg, "14px", "14px", controlPosition.left + 14 + 'px', "", controlPosition.top + 20 + 'px', "");
	container.appendChild(panCENTER);

	var mapTypeMap = document.createElement("div");
	this.setButtonStyle_(mapTypeMap, planImg, "51px", "18px", mapWidth - 9 - 51 - 59 - 48 + 'px', "", controlPosition.top + "px", "");
	container.appendChild(mapTypeMap);
	GEvent.addDomListener(mapTypeMap, "click", function() {
		map.setMapType(G_NORMAL_MAP);
	});

	var mapTypeSATELLITE = document.createElement("div");
	this.setButtonStyle_(mapTypeSATELLITE, satelliteImg, "59px", "18px", mapWidth - 9 - 48 - 59 + 'px', "", controlPosition.top + "px", "");
	container.appendChild(mapTypeSATELLITE);
	GEvent.addDomListener(mapTypeSATELLITE, "click", function() {
		map.setMapType(G_SATELLITE_MAP);
	});

	var mapTypeHYBRID = document.createElement("div");
	this.setButtonStyle_(mapTypeHYBRID, mixteImg, "48px", "18px", mapWidth - 9 - 48 + 'px', "", controlPosition.top + "px", "");
	container.appendChild(mapTypeHYBRID);
	GEvent.addDomListener(mapTypeHYBRID, "click", function() {
		map.setMapType(G_HYBRID_MAP);
	});

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

CustomNavigationBar.prototype.setButtonStyle_ = function(button, image_label, imageWidth, imageHeight, marginLeft, marginRigth, marginTop, marginBottom) {
	button.style.background = "url(" + image_label + ")";
	button.style.width = imageWidth;
	button.style.height = imageHeight;
	button.style.position = "absolute";
	button.style.marginLeft = marginLeft;
	button.style.marginRight = marginRigth;
	button.style.marginTop = marginTop;
	button.style.marginBottom = marginBottom;
	button.style.cursor = "pointer";
}


      // == Some global variables ==
      var YSLIDERLENGTH = 94;       // maximum length that the knob can move (slide height minus knob height)
      var MAXZOOM = 17

      // == Create a Custom GControl ==
      function YSliderControl() { }
      YSliderControl.prototype = new GControl();

      // == This function positions the slider to match the specified zoom level ==
      YSliderControl.prototype.setSlider = function(zoom) {
        var top = Math.round((YSLIDERLENGTH/MAXZOOM*(MAXZOOM-zoom)));
        this.slide.top = top + 11;
        this.knob.style.top = top + 11 +"px";
        //GLog.write("Map was zoomed to:"+zoom+" new Knob position:"+top);
      }

      // == This function reads the slider and sets the zoom level ==
      YSliderControl.prototype.setZoom = function() {
        var z=Math.round((YSLIDERLENGTH-this.slide.top)*MAXZOOM/YSLIDERLENGTH);
        this.map.setZoom(z);
        $("#message").hide();
        //GLog.write("New knob position:"+this.slide.top+" new zoom: "+z);
      }


      // == This gets called bu the API when addControl(new YSlider()) is used ==
      YSliderControl.prototype.initialize = function(map) {
        // obtain Function Closure on a reference to "this"
        var that=this;
        // store a reference to the map so that we can call setZoom() on it
        this.map = map;
        var slide = "/img/GoogleMaps/slide.png";
	    var slider = "/img/GoogleMaps/slider.png";
	    if(navigator.appVersion.indexOf("MSIE 6.0") != -1)
	    {
	        slide = "/img/GoogleMaps/gif/slide.gif";
	        slider = "/img/GoogleMaps/gif/slider.gif";
	    }
        // Is this MSIE, if so we need to use AlphaImageLoader
        var agent = navigator.userAgent.toLowerCase();
        if ((agent.indexOf("msie") > -1) && (agent.indexOf("opera") < 1)){this.ie = true} else {this.ie = false}

        // create the background graphic as a <div> containing an image
        var container = document.createElement("div");
        container.style.width="46px";
        container.style.height="116px";
        container.style.marginTop="70px";

        // Handle transparent PNG files in MSIE
//        if (this.ie) {
//          var loader = "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+slide+"', sizingMethod='scale');";
//          container.innerHTML = '<div style="height:116px; width:46px; ' +loader+ '" ></div>';
//        } else {
          container.style.backgroundImage = "URL('"+slide+"')";
          container.style.zindex = 2000;
//        }

        // create the knob as a GDraggableObject
        // Handle transparent PNG files in MSIE
        if (this.ie) {
          var loader = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/GoogleMaps/slider2.gif', sizingMethod='scale');";
          this.knob = document.createElement("div"); 
          this.knob.style.height="11px";
          this.knob.style.width="46px";
          this.knob.style.filter=loader;
        } else {
          this.knob = document.createElement("img"); 
          this.knob.src = "/img/GoogleMaps/slider2.gif";
          this.knob.height = "11";
          this.knob.width = "46";
        }
        container.appendChild(this.knob);
        this.slide=new GDraggableObject(this.knob, {container:container});

        // attach the control to the map
        map.getContainer().appendChild(container);

        // Listen for other things changing the zoom level and move the slider
        GEvent.addListener(map, "zoomend", function(a,b) {that.setSlider(b)});

        // Listen for the slider being moved and set the zoom level
        GEvent.addListener(this.slide, "dragend", function() {that.setZoom()});

        return container;
      }

      // == Set the default position for the control ==
      YSliderControl.prototype.getDefaultPosition = function() {
        return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
      }