/**
 * @constructor
 * @param {String} borderColor
 * @param {String} borderStyle
 * @param {String} borderWidth
 */
function RubberRectangle(borderColor, borderStyle, borderWidth){

    /** @type function */
    this.mouseMove = RubberRectangle_mouseMove;
    /** @type function */
    this.mouseDown = RubberRectangle_mouseDown;
    /** @type function */
    this.mouseUp = RubberRectangle_mouseUp;

    /** @type HTMLElement */
    this.box = document.getElementById('box');
    if (this.box)  {
   
      //initialize the styles for the rubberbanding box
      this.box.style.borderColor.value = borderColor ? borderColor : "black";
      this.box.style.borderStyle.value = borderStyle ? borderStyle : "solid";
      this.box.style.borderWidth.value = borderWidth ? borderWidth : "2px";
      this.box.style.position = "absolute";
      if( this.box.style.filter ){
        this.box.style.backgroundColor = "#ffffff";
        this.box.style.filter = "alpha(opacity=50)";
      }

      //preset the rubberbanding flag
      map.rubberbanding = false;

   }
}

function RubberRectangle_mouseUp(e){
    if (map.rubberbanding ){
                                
            map.rubberbanding = false;
            this.box.style.visibility = "hidden";

            map.prevPrevBounds = map.prevBounds.copy();
            map.prevBounds = map.cBounds.copy();

            //ensure that the new aspect is equal to the original aspect defined by map.aspect
            //by altering the heigth of the zoomrect
            this.box.style.height = parseInt(this.box.style.width)/map.dimension.aspect;

            var ul = map.pixelToDD( parseInt(this.box.style.left), parseInt(this.box.style.top));
            var lr = map.pixelToDD( parseInt(this.box.style.left)+parseInt(this.box.style.width), parseInt(this.box.style.top)+parseInt(this.box.style.height) );

            if( parseInt(this.box.style.height) == 0 && map.mode == 1){ //Click & Zoom in
                map.zoomDD( ul[0], ul[1] );
            }
            else if( parseInt(this.box.style.height) == 0 && map.mode == 2){ //Click & Zoom out
                map.zoomOut( ul[0], ul[1] );
            }
            else if( parseInt(this.box.style.height) == 0 && map.mode == 3){ //Click & Pan
                map.pan( ul[0], ul[1] );
            }
            else{
                if(map.mode == 1){ //Box & Zoom in

                    map.cBounds.xMin = ul[0]; //minx
                    map.cBounds.yMin = lr[1]; //miny
                    map.cBounds.xMax = lr[0]; //maxx
                    map.cBounds.yMax = ul[1]; //maxy
                    map.redraw();
                }
                else if(map.mode == 2){ //Box & Zoom out
                    map.zoomOut( (ul[0]+(lr[0] - ul[0])/2), (lr[1]+(ul[1] - lr[1])/2) );                    
                }
                else if(map.mode == 3){ //Box & Pan
                    map.pan( (lr[0]+(lr[0] - ul[0])), (lr[1]+(ul[1] - lr[1])) );
                }

            }

        }
}

function RubberRectangle_mouseDown(e){
    if (!map.rubberbanding ){
            //envelope coordinates in pixels
            //Absolute for dynamically locating the div in the browser
            //Relative for converting to map coordinates on the server

            var pos = getXY(e);

            this.absOrigX = pos.x; //e.offsetX;
            this.absOrigY = pos.y; //e.offsetY;
            this.absDestX = pos.x; //e.offsetX;
            this.absDestY = pos.y; //e.offsetY;
            this.relOrigX = pos.x; //e.offsetX;
            this.relOrigY = pos.y; //e.offsetY;
            this.relDestX = pos.x; //e.offsetX;
            this.relDestY = pos.y; //e.offsetY;

            //switch the rubberbanding flag so it will be rendered dynamically
            map.rubberbanding = true;

            //locate the div and initialize its dimensions
            this.box.style.left = this.absOrigX;
            this.box.style.top = this.absOrigY;
            this.box.style.height = "0";
            this.box.style.width = "0";
            this.box.style.visibility = "visible";

        }
}

function RubberRectangle_mouseMove(e){
    if (map.rubberbanding ){

            //store the current cursor coordinates
            var pos = getXY(e);
            this.absDestX = pos.x; //e.offsetX;
            this.absDestY = pos.y; //e.offsetY;

            //height and width will always be the absolute value of the difference in client coordinates
            //var height = Math.abs(this.absOrigY - this.absDestY);
            var width = Math.abs(this.absOrigX - this.absDestX);

            //this.box.style.height = height;
            this.box.style.width  = width;
            this.box.style.height = parseInt(this.box.style.width)/map.dimension.aspect;
            height = width/map.dimension.aspect;

            //branch on the cartesian coordinate system quadrants relative to origin
            if (this.absDestX > this.absOrigX && this.absDestY < this.absOrigY){ // I

                this.box.style.left = this.absOrigX;
                this.box.style.top  = this.absOrigY - height; //this.absDestY

                this.relDestX = this.relOrigX + width;
                this.relDestY = this.relOrigY - height;
            }
            else if (this.absDestX < this.absOrigX && this.absDestY < this.absOrigY){ // II

                this.box.style.left = this.absDestX;
                this.box.style.top  = this.absOrigY - height; //this.absDestY

                this.relDestX = this.relOrigX - width;
                this.relDestY = this.relOrigY - height;
            }
            else if (this.absDestX < this.absOrigX && this.absDestY > this.absOrigY){ // III

                this.box.style.left = this.absDestX;
                this.box.style.top  = this.absOrigY;

                this.relDestX = this.relOrigX - width;
                this.relDestY = this.relOrigY + height;
            }
            else if (this.absDestX > this.absOrigX && this.absDestY > this.absOrigY){ // IV

                this.box.style.left = this.absOrigX;
                this.box.style.top  = this.absOrigY;

                this.relDestX = this.relOrigX + width;
                this.relDestY = this.relOrigY + height;
            }
            else if (this.absDestX > this.absOrigX && this.absDestY == this.absOrigY){ // 0 degrees

                this.box.style.left = this.absOrigX;
                this.box.style.top  = this.absOrigY;

                this.relDestX = this.relOrigX + width;
                this.relDestY = this.relOrigY;
            }
            else if (this.absDestX == this.absOrigX && this.absDestY < this.absOrigY){ // 90 degrees

                this.box.style.left = this.absOrigX;
                this.box.style.top  = this.absOrigY - height; //this.absDestY;

                this.relDestX = this.relOrigX;
                this.relDestY = this.relOrigY - height;
            }
            else if (this.absDestX < this.absOrigX && this.absDestY == this.absOrigY){ // 180 degrees

                this.box.style.left = this.absDestX;
                this.box.style.top  = this.absOrigY;

                this.relDestX = this.relOrigX - width;
                this.relDestY = this.relOrigY;
            }
            else if (this.absDestX == this.absOrigX && this.absDestY > this.absOrigY){ // 270 degrees

                this.box.style.left = this.absOrigX;
                this.box.style.top  = this.absOrigY;

                this.relDestX = this.relOrigX;
                this.relDestY = this.relOrigY + height;
            }
        }
}