var VERTICAL = 'vertical';
var HORIZONTAL = 'horizontal';

function ScaleBarSlicer(wsnav){
    this.wsnav = wsnav;
    wsnav.addEventListener(this);
    this.maxZoom = 0;
    this.minZoom = 0;
    this.slicerHeight = 103;
    this.sliderHeight = 8;
    this.drawing = false;
    this.orientation = VERTICAL;
    this.embedded = true;  // true means embedded in map display panel
    this.sliderDragStart = 0;
    this.nn6=document.getElementById&&!document.all;
}

ScaleBarSlicer.prototype.mapevent=function(name){
    if(name=="map_init_end"){
        this.init();
    }
    if(name=="map_loaded"){
        this.updateZoomInterface();
    }
}

ScaleBarSlicer.prototype.init=function(){
    if(this.nn6){
        //document.getElementById("slicerdiv").className = "scalebarslicer_box_NN6";
        //marche pas avec firefox, je sais pas pkoi
    }else{
        //document.getElementById("slicerdiv").className = "scalebarslicer_box";
    }
    if (this.embedded) { // inside map panel
        document.getElementById("slicerdiv").style.top = '2px';
        document.getElementById("slicerdiv").style.left = '2px';
    }
    var sliderImg = document.getElementById("slicer_slider");
    var slicerImg = document.getElementById("slicer_pic");
    this.divTop  = findPosY(document.getElementById("slicerdiv"));
    this.divLeft = findPosX(document.getElementById("slicerdiv"));
    this.sliderLeft = findPosX(document.getElementById("slicer_pic"))-this.divLeft;
    this.sliderTop  = findPosY(document.getElementById("slicer_pic"))-this.divTop;
    this.sliderDragStart = this.divLeft;
    if (this.orientation == VERTICAL) {
        this.sliderBottom = this.sliderTop+this.slicerHeight-(this.sliderHeight/2);
        this.sliderHeight = this.sliderBottom-this.sliderTop;
    } else {
        this.slicerWidth = slicerImg.width;
        this.sliderWidth = this.slicerWidth-(sliderImg.width/2);
        this.sliderRight = this.sliderLeft + this.sliderWidth;
    }
    var temp = this;
    document.getElementById("slicer").onmousedown = function(e){ 
        if(!temp.wsnav.isLoading){
            temp.drawing = true;
            if (!e) var e = window.event;
            temp.move(e); 
            return false;
        }
    } 
    document.getElementById("slicer").onmouseup = function(e){ 
        temp.drawing = false;
        temp.changeZoomLevel();
        var divOverlay = document.getElementById("divOverlay");
        if (divOverlay) {
            divOverlay.style.display = 'block';
        }
    }
    document.getElementById("slicer").onmousemove = function(e){
        if (temp.drawing){
            if (!e) var e = window.event;
            temp.move(e);
            temp.wsnav.dispatch("map_drawing");
            var divOverlay = document.getElementById("divOverlay");
            if (divOverlay) {
                divOverlay.style.display = 'none';
            }
            return false;
        }
    }
    document.getElementById("slicer").onmouseout = function(e){ 
    }
}

ScaleBarSlicer.prototype.updateZoomInterface=function(){  // called after map_loaded
    document.getElementById("slicerdiv").style.visibility = "visible";
    document.getElementById("slicer_slider").style.visibility = "visible";
    
    D1 = this.orientation == VERTICAL ? this.sliderHeight : this.sliderWidth;
    D2 = 0;
    Q1 = Math.log(this.maxZoom+10)/Math.log(10);
    Q2 = Math.log(this.minZoom+10)/Math.log(10);
    Qn = Math.log(Number(this.wsnav.zoom)+10)/Math.log(10);
    Dn = (D1 - D2)/(Q1-Q2)*Qn + D2 - (D1-D2)/(Q1-Q2)*(Q2);
    
    // Ratio based: need to adjust computeZoom as well...
    //var zoomRange = this.maxZoom - this.minZoom;
    //var zoomRatio = this.wsnav.zoom / this.maxZoom;   // Math.sqrt(this.wsnav.zoom) / Math.sqrt(1500);
    //var val = zoomRatio * D1;
    //var newPos = this.sliderLeft+(this.sliderWidth-val);
    
    if (this.orientation == VERTICAL) {
        yy = this.validatePosition(this.sliderTop+(this.sliderHeight-Dn));
        document.getElementById("slicer_slider").style.left = this.sliderLeft + "px";
        document.getElementById("slicer_slider").style.top = yy + "px";
    } else {
        yy = this.validatePosition(this.sliderLeft+(this.sliderWidth-Dn));
        document.getElementById("slicer_slider").style.left = yy + "px";
        //document.getElementById("slicer_slider").style.top = this.sliderTop + "px"; 
    }
}

ScaleBarSlicer.prototype.move=function(e){
    var pos = e.clientY;
    if (this.orientation == VERTICAL) {
        top_slider = this.validatePosition(pos-2-this.divTop-(this.nn6?0:4));
        document.getElementById("slicer_slider").style.top = top_slider + "px";
    } else {
        pos = e.clientX; 
        left_slider = this.validatePosition(pos-this.divLeft-(this.nn6?0:4));
        document.getElementById("slicer_slider").style.left = left_slider + "px";
    }
    // resize image while dragging slider
    r = this.computeZoom()/this.wsnav.zoom;
    pw = this.wsnav.mapWidth/r;
    ph = this.wsnav.mapHeight/r;
    
    if((1/r)<500)//si strech trop le browser explose
        this.wsnav.modifyImage((this.wsnav.mapWidth-pw)/2, (this.wsnav.mapHeight-ph)/2, pw, ph);
}

ScaleBarSlicer.prototype.computeZoom=function(){ // called onmousemove & onmousedown
    if (this.orientation == VERTICAL) {
        current = findPosY(document.getElementById("slicer_slider"))-this.divTop;
        relative = this.sliderBottom-current;
        D1 = this.sliderHeight;
    } else {
        current = findPosX(document.getElementById("slicer_slider"))-this.divLeft;
        relative = this.sliderRight-current;
        D1 = this.sliderWidth;
    }
    D2 = 0;
    Q1 = Math.log(this.maxZoom+10)/Math.log(10);
    Q2 = Math.log(this.minZoom+10)/Math.log(10);
    //Qn = Math.log(Number(this.wsnav.zoom)+10)/Math.log(10);
    Qn = (relative+(((D1-D2)/(Q1-Q2))*(Q2))-D2)/((D1 - D2)/(Q1-Q2));
    
    zoom = Math.exp(Qn*Math.log(10))-10;
    return zoom;
}

ScaleBarSlicer.prototype.changeZoomLevel=function(){ // called onmouseup
    this.wsnav.setZoomExt(this.computeZoom(), this.wsnav.distanceUnit);	
    this.wsnav.refreshMap();
}

ScaleBarSlicer.prototype.validatePosition=function(pos){
    if (this.orientation == VERTICAL) {
        if(pos<this.sliderTop)
            pos=this.sliderTop;
        if(pos>this.sliderBottom)
            pos=this.sliderBottom;
    } else {
        if(pos<this.sliderLeft)
            pos=this.sliderLeft;
        if(pos>this.sliderRight)
            pos=this.sliderRight;
    }
    return pos;
}