/*
Scripts to create interactive sliders in SVG using ECMA script
Copyright (C) <2006>  <Andreas Neumann>
Version 1.0, 2006-08-04
neumann@karto.baug.ethz.ch
http://www.carto.net/
http://www.carto.net/neumann/

Credits:
* Kevin Lindsey for ideas how to implement such a slider

----

Documentation: http://www.carto.net/papers/svg/gui/slider/

----

current version: 1.0.

version history:
0.99 (not documented, somewhere around 2001)

1.0 (2006-08-04)
changed constructor parameters (added id, parentNode), removed parameter sliderGroupId, added documentation, added method .moveTo()

-------

This ECMA script library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.

This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
Lesser General Public License for more details.

You should have received a copy of the GNU Lesser General Public
License along with this library (lesser_gpl.txt); if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA

----

original document site: http://www.carto.net/papers/svg/gui/slider/
Please contact the author in case you want to use code or ideas commercially.
If you use this code, please include this copyright header, the included full
LGPL 2.1 text and read the terms provided in the LGPL 2.1 license
(http://www.gnu.org/copyleft/lesser.txt)

-------------------------------

Please report bugs and send improvements to neumann@karto.baug.ethz.ch
If you use this control, please link to the original (http://www.carto.net/papers/svg/gui/slider/)
somewhere in the source-code-comment or the "about" of your project and give credits, thanks!

*/

//slider properties
function slider(id,parentNode,x1,y1,value1,x2,y2,value2,startVal,sliderStyles,invisSliderWidth,sliderSymb,functionToCall,mouseMoveBool) {
    var nrArguments = 14;
    var createSlider= true;
    if (arguments.length == nrArguments) {    
        this.id = id; //an internal id, this id is not used in the SVG Dom tree
        this.parentNode = parentNode; //the parentNode, string or nodeReference
        this.x1 = x1; //the start point x of the slider
        this.y1 = y1; //the start point y of the slider
        this.value1 = value1; //the value at the start point, min slider value
        this.x2 = x2; //the end point x of the slider 
        this.y2 = y2; //the end point y of the slider
        this.value2 = value2; //the value at the end point, max slider value
        this.startVal = startVal; //the initial value of the slider
        this.value = startVal; //the current value of the slider
        this.sliderStyles = sliderStyles; //the color of the slider line
        this.invisSliderWidth = invisSliderWidth; //the width of invisible part of the slider
        this.sliderSymb = sliderSymb; //the id for the movable symbol to be placed on the slider line 
        this.functionToCall = functionToCall; //the callback function
        this.mouseMoveBool = mouseMoveBool; //boolean value to indicate if the slider gives immediate feedback or not
        this.length = toPolarDist((this.x2 - this.x1),(this.y2 - this.y1));
        this.direction = toPolarDir((this.x2 - this.x1),(this.y2 - this.y1));
        this.invisSliderLine = null;
        this.slideStatus = 0;
    }
    else {
        createSlider = false;
        alert("Error in slider ("+id+") constructor: wrong nr of arguments! You have to pass over "+nrArguments+" parameters.");
    }
    if (createSlider) {
        this.createSlider();
    }
    else {
        alert("Could not create slider with id '"+id+"' due to errors in the constructor parameters");        
    }
}

//create slider
slider.prototype.createSlider = function() {
    var result = this.testParent();
    if (result) {
        this.invisSliderLine = document.createElementNS(svgNS,"line");
        this.invisSliderLine.setAttributeNS(null,"x1",this.x1);
        this.invisSliderLine.setAttributeNS(null,"y1",this.y1);
        this.invisSliderLine.setAttributeNS(null,"x2",this.x2);
        this.invisSliderLine.setAttributeNS(null,"y2",this.y2);
        this.invisSliderLine.setAttributeNS(null,"stroke","black");
        this.invisSliderLine.setAttributeNS(null,"stroke-width",this.invisSliderWidth);
        //note that due to bugs in Opera9 and Firefox I can't use pointer-events here
        this.invisSliderLine.setAttributeNS(null,"stroke-opacity","0");
        this.invisSliderLine.setAttributeNS(null,"fill-opacity","0");
        this.invisSliderLine.setAttributeNS(null,"stroke-linecap","square");
        this.invisSliderLine.addEventListener("mousedown",this,false);
        this.parentGroup.appendChild(this.invisSliderLine);
        this.visSliderLine = document.createElementNS(svgNS,"line");
        this.visSliderLine.setAttributeNS(null,"x1",this.x1);
        this.visSliderLine.setAttributeNS(null,"y1",this.y1);
        this.visSliderLine.setAttributeNS(null,"x2",this.x2);
        this.visSliderLine.setAttributeNS(null,"y2",this.y2);
        for (var attrib in this.sliderStyles) {
            this.visSliderLine.setAttributeNS(null,attrib,this.sliderStyles[attrib]);
        }
        this.visSliderLine.setAttributeNS(null,"pointer-events","none");
        this.parentGroup.appendChild(this.visSliderLine);
        this.sliderSymbol = document.createElementNS(svgNS,"use");
        this.sliderSymbol.setAttributeNS(xlinkNS,"xlink:href","#"+this.sliderSymb);
        var myStartDistance = this.length - ((this.value2 - this.startVal) / (this.value2 - this.value1)) * this.length;
        var myPosX = this.x1 + toRectX(this.direction,myStartDistance);
        var myPosY = this.y1 + toRectY(this.direction,myStartDistance);
        var myTransformString = "translate("+myPosX+","+myPosY+") rotate(" + Math.round(this.direction / Math.PI * 180) + ")";
        this.sliderSymbol.setAttributeNS(null,"transform",myTransformString);
        this.sliderSymbol.setAttributeNS(null,"pointer-events","none");
        this.parentGroup.appendChild(this.sliderSymbol);
    }
    else {
        alert("could not create or reference 'parentNode' of slider with id '"+this.id+"'");            
    }
}

//test if parent group exists
slider.prototype.testParent = function() {
    //test if of type object
    var nodeValid = false;
    if (typeof(this.parentNode) == "object") {
        if (this.parentNode.nodeName == "svg" || this.parentNode.nodeName == "g" || this.parentNode.nodeName == "svg:svg" || this.parentNode.nodeName == "svg:g") {
            this.parentGroup = this.parentNode;
            nodeValid = true;
        }
    }
    else if (typeof(this.parentNode) == "string") { 
        //first test if button group exists
        if (!document.getElementById(this.parentNode)) {
            this.parentGroup = document.createElementNS(svgNS,"g");
            this.parentGroup.setAttributeNS(null,"id",this.parentNode);
            document.documentElement.appendChild(this.parentGroup);
            nodeValid = true;
           }
           else {
               this.parentGroup = document.getElementById(this.parentNode);
               nodeValid = true;
           }
       }
       return nodeValid;
}

//remove all slider elements
slider.prototype.removeSlider = function() {
    this.parentGroup.removeChild(this.sliderSymbol);
    this.parentGroup.removeChild(this.visSliderLine);
    this.parentGroup.removeChild(this.invisSliderLine);
}

//handle events
slider.prototype.handleEvent = function(evt) {
    this.drag(evt);
}

//drag slider
slider.prototype.drag = function(evt) {
    if (evt.type == "mousedown" || (evt.type == "mousemove" && this.slideStatus == 1)) {
        //get coordinate in slider coordinate system
        var coordPoint = myMapApp.calcCoord(evt,this.invisSliderLine);
        //draw normal line for first vertex
        var ax = this.x2 - this.x1;
        var ay = this.y2 - this.y1;
        //normal vector 1
        var px1 = parseFloat(this.x1) + ay * -1;
        var py1 = parseFloat(this.y1) + ax;
        //normal vector 2
        var px2 = parseFloat(this.x2) + ay * -1;
        var py2 = parseFloat(this.y2) + ax;
                
        if (leftOfTest(coordPoint.x,coordPoint.y,this.x1,this.y1,px1,py1) == 0 && leftOfTest(coordPoint.x,coordPoint.y,this.x2,this.y2,px2,py2) == 1) {
            if (evt.type == "mousedown" && (evt.detail == 1 || evt.detail == 0)) {
                this.slideStatus = 1;
                document.documentElement.addEventListener("mousemove",this,false);
                document.documentElement.addEventListener("mouseup",this,false);
            }
            myNewPos = intersect2lines(this.x1,this.y1,this.x2,this.y2,coordPoint.x,coordPoint.y,coordPoint.x + ay * -1,coordPoint.y + ax);
            var myPercentage = toPolarDist(myNewPos['x'] - this.x1,myNewPos['y'] - this.y1) / this.length;
            this.value = this.value1 + myPercentage * (this.value2 - this.value1);
        }
        else {
            var myNewPos = new Array();
            if (leftOfTest(coordPoint.x,coordPoint.y,this.x1,this.y1,px1,py1) == 0 && leftOfTest(coordPoint.x,coordPoint.y,this.x2,this.y2,px2,py2) == 0) {
                //more than max
                this.value = this.value2;
                myNewPos['x'] = this.x2;
                myNewPos['y'] = this.y2;
            }
            if (leftOfTest(coordPoint.x,coordPoint.y,this.x1,this.y1,px1,py1) == 1 && leftOfTest(coordPoint.x,coordPoint.y,this.x2,this.y2,px2,py2) == 1) {
                //less than min
                this.value = this.value1;
                myNewPos['x'] = this.x1;
                myNewPos['y'] = this.y1;
            }
        }
        var myTransformString = "translate("+myNewPos['x']+","+myNewPos['y']+") rotate(" + Math.round(this.direction / Math.PI * 180) + ")";
        this.sliderSymbol.setAttributeNS(null,"transform",myTransformString);
        this.fireFunction();
    }
    if (evt.type == "mouseup" && (evt.detail == 1 || evt.detail == 0)) {
        if (this.slideStatus == 1) {
            this.slideStatus = 2;
            document.documentElement.removeEventListener("mousemove",this,false);
            document.documentElement.removeEventListener("mouseup",this,false);
            this.fireFunction();
        }
        this.slideStatus = 0;
    }
}

//this code is executed, after the slider is released
//you can use switch/if to detect which slider was used (use this.id) for that
slider.prototype.fireFunction = function() {
    if (this.slideStatus == 1 && this.mouseMoveBool == true) {
        if (typeof(this.functionToCall) == "function") {
            this.functionToCall("change",this.id,this.value);
        }
        if (typeof(this.functionToCall) == "object") {
            this.functionToCall.getSliderVal("change",this.id,this.value);
        }
        if (typeof(this.functionToCall) == undefined) {
            return;
        }
    }
    if (this.slideStatus == 2) {
        if (typeof(this.functionToCall) == "function") {
            this.functionToCall("release",this.id,this.value);
        }
        if (typeof(this.functionToCall) == "object") {
            this.functionToCall.getSliderVal("release",this.id,this.value);
        }
        if (typeof(this.functionToCall) == undefined) {
            return;
        }
    }
}

slider.prototype.getValue = function() {
    return this.value;
}

//this is to set the value from other scripts
slider.prototype.setValue = function(value,fireFunction) {
    this.value = value;
    var myPercAlLine = (this.value - this.value1) / (this.value2 - this.value1);
    var myPosX = this.x1 + toRectX(this.direction,this.length * myPercAlLine);
    var myPosY = this.y1 + toRectY(this.direction,this.length * myPercAlLine);
    var myTransformString = "translate("+myPosX+","+myPosY+") rotate(" + Math.round(this.direction / Math.PI * 180) + ")";
    this.sliderSymbol.setAttributeNS(null,"transform",myTransformString);
    if (fireFunction) {
        //temporary set slideStatus
        this.slideStatus = 2;
        this.fireFunction();
        this.slideStatus = 0;
    }
}

slider.prototype.moveTo = function(x1,y1,x2,y2) {
    this.x1 = x1;
    this.y1 = y1;
    this.x2 = x2;
    this.y2 = y2;
    this.invisSliderLine.setAttributeNS(null,"x1",this.x1);
    this.invisSliderLine.setAttributeNS(null,"y1",this.y1);
    this.invisSliderLine.setAttributeNS(null,"x2",this.x2);
    this.invisSliderLine.setAttributeNS(null,"y2",this.y2);
    this.visSliderLine.setAttributeNS(null,"x1",this.x1);
    this.visSliderLine.setAttributeNS(null,"y1",this.y1);
    this.visSliderLine.setAttributeNS(null,"x2",this.x2);
    this.visSliderLine.setAttributeNS(null,"y2",this.y2);
    //reset direction and length of the slider
    this.length = toPolarDist((this.x2 - this.x1),(this.y2 - this.y1));
    this.direction = toPolarDir((this.x2 - this.x1),(this.y2 - this.y1));
    //reset the value to correctly reposition element
    this.setValue(this.getValue(),false);
}