/* Van De Casteele Arnaud
	28/12/2008
	Version 0.1
	arnaud dot sig @ gmail dot com */


/**
 * @requires OpenLayers/Control.js
 */

/**
 * Class: OpenLayers.Control.PanZoom
 * 
 * Inherits from:
 *  - <OpenLayers.Control>
 */
OpenLayers.Control.PanZoomCustom = OpenLayers.Class(OpenLayers.Control, {

    /** 
     * APIProperty: slideFactor
     * {Integer} Number of pixels by which we'll pan the map in any direction 
     *     on clicking the arrow buttons. 
     */
    slideFactor: 50,		

    /** 
     * Property: buttons
     * {Array(DOMElement)} Array of Button Divs 
     */
    buttons: null,

    /** 
     * Property: position
     * {<OpenLayers.Pixel>} 
     */
    position: null,

	 /** 
     * Property: img
     * String 
     */
		imgPanup : "north-mini.png",
		imgPanleft : "west-mini.png",
		imgPanright : "east-mini.png",
		imgPandown : "south-mini.png",
		imgZoomin : "zoom-plus-mini.png",
		imgZoomworld : "zoom-world-mini.png",
		imgZoomout : "zoom-minus-mini.png",
		originalImage:null,

    /**
     * Constructor: OpenLayers.Control.PanZoom
     * 
     * Parameters:
     * options - {Object}
     */
    initialize: function(options) {
        this.position = new OpenLayers.Pixel(OpenLayers.Control.PanZoom.X,
                                             OpenLayers.Control.PanZoom.Y);
        OpenLayers.Control.prototype.initialize.apply(this, arguments);
    },

    /**
     * Method: draw
     *
     * Parameters:
     * px - {<OpenLayers.Pixel>} 
     * 
     * Returns:
     * {DOMElement} A reference to the container div for the PanZoom control.
     */
    draw: function(px) {
        // initialize our internal div
        OpenLayers.Control.prototype.draw.apply(this, arguments);
        px = this.position;

        // place the controls
        this.buttons = [];

        var sz = new OpenLayers.Size(24,24);
	      var centered = new OpenLayers.Pixel(px.x+sz.w/2, px.y);

        this._addButton("panup", this.imgPanup, centered, sz);
        px.y = centered.y+sz.h;
        this._addButton("panleft", this.imgPanleft, px, sz);
        this._addButton("panright", this.imgPanright, px.add(sz.w, 0), sz); 
        this._addButton("pandown", this.imgPandown, 
                        centered.add(0, sz.h*2), sz);
        this._addButton("zoomin", this.imgZoomin, 
                        centered.add(0, sz.h*3+5), sz);
        this._addButton("zoomworld", this.imgZoomworld, 
                        centered.add(0, sz.h*4+5), sz);
        this._addButton("zoomout", this.imgZoomout, 
                        centered.add(0, sz.h*5.1+5), sz);
        return this.div;
    },

	_customDraw : function() {		
 				//this.div.appendChild(btnOver);
				//this.buttons.push(btnOver);
				//this.innerHTML = btnOver;
        //return;
				console.log(1);
    },
    
    /**
     * Method: _addButton
     * 
     * Parameters:
     * id - {String} 
     * img - {String} 
     * xy - {<OpenLayers.Pixel>} 
     * sz - {<OpenLayers.Size>} 
     * 
     * Returns:
     * {DOMElement} A Div (an alphaImageDiv, to be precise) that contains the
     *     image of the button, and has all the proper event handlers set.
     */
    _addButton:function(id, img, xy, sz) {
        var imgLocation = OpenLayers.Util.getImagesLocation() +"olayers_icone/"+ img;
        var btn = OpenLayers.Util.createAlphaImageDiv(
                                    this.id + "_" + id, 
                                    xy, sz, imgLocation, "absolute");
        this.div.appendChild(btn);
        OpenLayers.Event.observe(btn, "mousedown", 
            OpenLayers.Function.bindAsEventListener(this.buttonDown, btn));
				OpenLayers.Event.observe(btn, "mouseover", 
						OpenLayers.Function.bindAsEventListener(this.buttonOver, btn));
				OpenLayers.Event.observe(btn, "mouseout", 
						OpenLayers.Function.bindAsEventListener(this.buttonOut, btn));
        OpenLayers.Event.observe(btn, "dblclick", 
            OpenLayers.Function.bindAsEventListener(this.doubleClick, btn));
        OpenLayers.Event.observe(btn, "click", 
            OpenLayers.Function.bindAsEventListener(this.doubleClick, btn));
        btn.action = id;
        btn.map = this.map;
        btn.slideFactor = this.slideFactor;

        //we want to remember/reference the outer div
        this.buttons.push(btn);
        return btn;
    },
    
    /**
     * Method: doubleClick
     *
     * Parameters:
     * evt - {Event} 
     *
     * Returns:
     * {Boolean}
     */
    doubleClick: function (evt) {
        OpenLayers.Event.stop(evt);
        return false;
    },
    
    /**
     * Method: buttonDown
     *
     * Parameters:
     * evt - {Event} 
     */
    buttonDown: function (evt) {
        if (!OpenLayers.Event.isLeftClick(evt)) {
            return;
        }

        switch (this.action) {
            case "panup": 
                this.map.pan(0, -this.slideFactor);
                break;
            case "pandown": 
                this.map.pan(0, this.slideFactor);
                break;
            case "panleft": 
                this.map.pan(-this.slideFactor, 0);
                break;
            case "panright": 								
                this.map.pan(this.slideFactor, 0);
                break;
            case "zoomin": 
                this.map.zoomIn(); 
                break;
            case "zoomout": 
                this.map.zoomOut(); 
                break;
            case "zoomworld": 
                this.map.zoomToMaxExtent(); 
                break;
        }
        OpenLayers.Event.stop(evt);
    },

			/**
			 * Method: buttonOver
			 *
			 * Parameters:
			 * evt - {Event} 
			 */

			buttonOver: function(evt) {
			   if (!OpenLayers.Event.isLeftClick(evt)) {
			        return;
			    }
					this.originalImage = document.getElementById(this.id).getElementsByTagName("img")[0].src;				
					var img = new Image();
					img.src = this.originalImage.substring(0,this.originalImage.length-4)+"_over"+this.originalImage.substring(this.originalImage.length-4,this.originalImage.length);
			    switch (this.action) {	
  					case "panup": 													
                document.getElementById(this.id).getElementsByTagName("img")[0].src = img.src;
                break;
            case "pandown": 
                document.getElementById(this.id).getElementsByTagName("img")[0].src = img.src;
                break;
            case "panleft": 
                document.getElementById(this.id).getElementsByTagName("img")[0].src = img.src;
                break;		        
			        case "panright": 
									document.getElementById(this.id).getElementsByTagName("img")[0].src = img.src;
									break;	
						case "zoomin": 
                	document.getElementById(this.id).getElementsByTagName("img")[0].src = img.src;
                break;
            case "zoomout": 
                	document.getElementById(this.id).getElementsByTagName("img")[0].src = img.src;
                break;
            case "zoomworld": 
                	document.getElementById(this.id).getElementsByTagName("img")[0].src = img.src;
                break;	      
			    }
			    OpenLayers.Event.stop(evt); 
			},

			/**
			 * Method: buttonOut
			 *
			 * Parameters:
			 * evt - {Event} 
			 */
		buttonOut: function(evt) {
			   if (!OpenLayers.Event.isLeftClick(evt)) {
			       return;
			    }				
			    switch (this.action) {	
  					case "panup": 								
                document.getElementById(this.id).getElementsByTagName("img")[0].src = this.originalImage;
                break;
            case "pandown": 
                document.getElementById(this.id).getElementsByTagName("img")[0].src = this.originalImage;
                break;
            case "panleft": 
                document.getElementById(this.id).getElementsByTagName("img")[0].src = this.originalImage;
                break;		        
			        case "panright": 
									document.getElementById(this.id).getElementsByTagName("img")[0].src = this.originalImage;
									break;	
						case "zoomin": 
                	document.getElementById(this.id).getElementsByTagName("img")[0].src = this.originalImage;
                break;
            case "zoomout": 
                	document.getElementById(this.id).getElementsByTagName("img")[0].src = this.originalImage;
                break;
            case "zoomworld": 
                	document.getElementById(this.id).getElementsByTagName("img")[0].src = this.originalImage; 
                break;	      
			    }

			    OpenLayers.Event.stop(evt); 
			},

    CLASS_NAME: "OpenLayers.Control.PanZoomCustom"
});

/**
 * Constant: X
 * {Integer}
 */
OpenLayers.Control.PanZoom.X = 4;

/**
 * Constant: Y
 * {Integer}
 */
OpenLayers.Control.PanZoom.Y = 4;
// JavaScript Document