//methods for drawing on the screen
//depending on the browser, either VML (IE) or CANVAS (Firefox) are used
//each of these has their own string format and style components

function IMS2_PolygonDrawing(){
    var self = this;
    
    this.fill = "#ffdddd";
    this.stroke = "#660000";
    this.drawPointsFun = null;
    this.clearFun = null;
    this.drawingSurfaceId = null;
    this.resizeFun = null;
    
    //add drawing "surface" to map
    function Init(contTag,mapPolyTip){
        self.drawingSurfaceId = contTag.id + "_polygon";
        if(contTag){
            if(IMS2_isMSIE()){
                contTag.innerHTML =
			        "<v:shape id=\"" +  self.drawingSurfaceId + "\" strokecolor=\"blue\" strokeweight=\"1pt\" coordsize=\"100,100\" style=\"LEFT:0px;POSITION:absolute;TOP:0px;width:100px;height:100px;\" filled=\"t\" fillcolor=\"blue\" >" +
		    	        "<v:fill id=\"" + self.drawingSurfaceId + "_fill\" opacity=\"0.75\" />" +
			        "</v:shape>"
			        +
			        "<v:shape id=\"" +  self.drawingSurfaceId + "_v\" strokecolor=\"blue\" strokeweight=\"1pt\" coordsize=\"100,100\" style=\"LEFT:0px;POSITION:absolute;TOP:0px;width:100px;height:100px;\" filled=\"t\" fillcolor=\"blue\" >" +
		    	        "<v:fill id=\"" + self.drawingSurfaceId + "_vfill\" opacity=\"0.80\" />" +
			        "</v:shape>"
			        +
			        "<div id=\"" +  self.drawingSurfaceId + "_ctrd\" style=\"LEFT:0px;POSITION:absolute;TOP:0px;\" class=\"" + mapPolyTip + "\"> </div>";
			    //self.drawingSurface = document.getElementById(self.drawingSurfaceId);
                self.drawPointsFun = _DrawPointsVML;
                self.clearFun = _ClearVML;
                self.resizeFun = _ResizeVML;
            }else{
                contTag.innerHTML =
                    "<canvas id=\"" + self.drawingSurfaceId + "\" width=\"100px\" height=\"100px\" style=\"left: 0px; top: 0px;position: absolute;width: 100px; height: 100px;\"></canvas>"
                    +
                    "<div id=\"" +  self.drawingSurfaceId + "_ctrd\" style=\"LEFT:0px;POSITION:absolute;TOP:0px;\" class=\"" + mapPolyTip + "\"> </div>";
                //self.drawingSurface = document.getElementById(self.drawingSurfaceId);
                self.drawPointsFun = _DrawPointsCanvas;
                self.clearFun = _ClearCanvas;
                self.resizeFun = _ResizeCanvas;
            }
        }
    }
    this.Init = Init;
    
    function Resize(w,h){
        if(self.resizeFun){
            self.resizeFun(w,h);
        }
    }
    this.Resize = Resize;
    
    function _ResizeVML(w,h){
        var drawingSurface = document.getElementById(self.drawingSurfaceId);
        var drawingSurfaceV = document.getElementById(self.drawingSurfaceId + "_v");
        if(drawingSurface){
            drawingSurface.style["width"] = w + "px";
            drawingSurface.style["height"] = h + "px";
            drawingSurface.coordsize.value = w + " " + h;
        }
        if(drawingSurfaceV){
            drawingSurfaceV.style["width"] = w + "px";
            drawingSurfaceV.style["height"] = h + "px";
            drawingSurfaceV.coordsize.value = w + " " + h;
        }
    }
    this._ResizeVML = _ResizeVML;
    
    function _ResizeCanvas(w,h){
        var drawingSurface = document.getElementById(self.drawingSurfaceId);
        if(drawingSurface){
            drawingSurface.style["width"] = w + "px";
            drawingSurface.style["height"] = h + "px";
            drawingSurface.width = w;
            drawingSurface.height = h;
        }
    }
    this._ResizeCanvas = _ResizeCanvas;
    
    function DrawPoints(pointList,ring,centroid){
        if(self.drawPointsFun && pointList && ring){
            self.drawPointsFun(pointList,ring,centroid);
        }
    }
    this.DrawPoints = DrawPoints;
    
    //control adding points in VML
    function _DrawPointsVML(pointList,ring,centroid){
        var vertexSize = (ring)?(ring.vertexSize):(2); 
        var closed = (ring)?(ring.closed):(true);
        var closedStr = (closed)?("x"):("");
        var drawingSurface = document.getElementById(self.drawingSurfaceId);
        var drawingSurfaceV = document.getElementById(self.drawingSurfaceId + "_v");
        var drawingSurfaceFill = document.getElementById(self.drawingSurfaceId + "_fill");
        var drawingSurfaceVFill = document.getElementById(self.drawingSurfaceId + "_vfill");
        if(drawingSurface && drawingSurfaceFill){
            drawingSurfaceFill.on = (closed)?("true"):("false");
            drawingSurfaceFill.color = self.fill;
            drawingSurfaceVFill.on = "true";
            drawingSurfaceVFill.color = ((ring.vertexColor)?(ring.vertexColor):("#ffffff"));
            drawingSurface.strokeColor = self.stroke;
            drawingSurfaceV.strokeColor = "#000000";
            var polyPathStr = "m 0,0 x e";
            var vertPathStr = "m 0,0 x e";
            if(pointList){
                if(pointList.length > 0){
                    var pt = pointList[0];
                    polyPathStr = "m " + pt[0] + "," + pt[1];
                    vertPathStr = "";
                    var lasti = pointList.length - 1;
                    for(var i = 0;i < pointList.length;i++){
                        pt = pointList[i];
                        if(i > 0){
                            polyPathStr += (" l " + pt[0] + "," + pt[1]);
                        }
                        var x1 = pt[0] - vertexSize;
                        var x2 = pt[0] + vertexSize;
                        var y1 = pt[1] - vertexSize;
                        var y2 = pt[1] + vertexSize;
                        var sc = x2 + "," + pt[1];
                        
                        var curVertPath = "";
                        if(i == lasti && pointList.length > 1){
                            curVertPath = " m " + x1 + "," + y1 + " l " + x2 + "," + y1 + " " + x2 + "," + y2 + " " + x1 + "," + y2 + " x e";
                        }else if(i == 0 && pointList.length > 1){
                            curVertPath = " m " + pt[0] + "," + y1 + " l " + x2 + "," + pt[1] + " " + pt[0] + "," + y2 + " " + x1 + "," + pt[1] + " x e";
                        }else{
                            curVertPath = " m " + sc + " qy " + pt[0] + "," + y1 + " " + x1 + "," + pt[1] + " " + pt[0] + "," + y2 + " " + x2 + "," + pt[1] + " x e";
                        }
                        vertPathStr += curVertPath;
                    }
                }
            }
            var drawingSurfaceCtrd = document.getElementById(self.drawingSurfaceId + "_ctrd");
            if(centroid && pointList.length > 1){
                var cx = Math.round(centroid[0]);
                var cy = Math.round(centroid[1]);
                if(!closed && pointList.length > 0){
                    var pt = pointList[pointList.length-1];
                    cx = pt[0];
                    cy = pt[1];
                }
                var x1 = cx - vertexSize;
                var x2 = cx + vertexSize;
                var y1 = cy - vertexSize;
                var y2 = cy + vertexSize;

                vertPathStr += " m " + x1 + "," + y1 + " l " + x2 + "," + y2 + " e m " + x1 + "," + y2 + " l " + x2 + "," + y1 + " e";

                if(drawingSurfaceCtrd){
					//get map units
					var mapctl = ((IMS2_MapManager)?(IMS2_MapManager.GetMap("MapControl1")):(null));
					var mapUnits = "";
					if(mapctl){
						mapUnits = mapctl.unit;
					}
					
                    drawingSurfaceCtrd.style["left"] = cx + "px";
                    drawingSurfaceCtrd.style["top"] = cy + "px";
                    var polyInfo = new Array();
                    if(ring && ring.area && 0 != ring.area && closed){
                        polyInfo[polyInfo.length] = "Area: " + Math.round(ring.area * 100)/100 + " " + mapUnits + "2".sup();
                    }
                    if(ring && ring.perimeter && 0 != ring.perimeter && closed){
                        polyInfo[polyInfo.length] = "Perimeter: " + Math.round(ring.perimeter * 100)/100 + " " + mapUnits;
                    }
                    if(ring && ring.distance && 0 != ring.distance){
                        polyInfo[polyInfo.length] = "Distance: " + Math.round(ring.distance * 100)/100 + " " + mapUnits;
                    }
                    if(ring && ring.lastSegLen && 0 != ring.lastSegLen){
                        polyInfo[polyInfo.length] = "Last Segment: " + Math.round(ring.lastSegLen * 100)/100 + " " + mapUnits;
                    }
                    drawingSurfaceCtrd.innerHTML = polyInfo.join("<br/>");
                    drawingSurfaceCtrd.style["visibility"] = "visible";
                }
            }else{
                if(drawingSurfaceCtrd){
                    drawingSurfaceCtrd.style["visibility"] = "hidden";
                }
            }
            drawingSurface.path.value = polyPathStr + " " + closedStr + " e";
            drawingSurface.style["visibility"] = "visible";            
            drawingSurfaceV.path.value = vertPathStr;
            drawingSurfaceV.style["visibility"] = "visible";            
        }
    }
    this._DrawPointsVML = _DrawPointsVML;
    
    
    //points control for CANVAS
    function _DrawPointsCanvas(pointList,ring,centroid){
        var drawingSurface = document.getElementById(self.drawingSurfaceId);
        var vertexSize = (ring)?(ring.vertexSize):(2);
        var closed = (ring)?(ring.closed):(true);
        if(drawingSurface){
            self.Clear();
            var context = drawingSurface.getContext("2d");
            if(pointList && context){
                if(pointList.length > 0){
                    context.fillStyle = self.fill;
                    context.strokeStyle = self.stroke;
                    context.globalAlpha = "0.75";
                    context.beginPath();
                    var pt = pointList[0];
                    context.moveTo(pt[0],pt[1]);
                    for(var i = 1;i < pointList.length;i++){
                        pt = pointList[i];
                        context.lineTo(pt[0],pt[1]);
                    }
                    if(closed){
                        context.closePath();
                        context.fill();
                    }
                    context.stroke();
                    context.fillStyle = ((ring.vertexColor)?(ring.vertexColor):("rgb(255,255,255)"));
                    context.strokeStyle = "rgb(0,0,0)";
                    context.globalAlpha = "0.8";
                    var lm1 = pointList.length - 1;
                    var twopi = Math.PI * 2;
                    if(lm1 > 0 && pointList.length > 1){
                        pt = pointList[0];
                        var x1 = pt[0] - vertexSize;
                        var x2 = pt[0] + vertexSize;
                        var y1 = pt[1] - vertexSize;
                        var y2 = pt[1] + vertexSize;
                        var w = x2 - x1;
                        var h = y2 - y1;
                        context.beginPath();
                        context.moveTo(pt[0],y1);
                        context.lineTo(x2,pt[1]);
                        context.lineTo(pt[0],y2);
                        context.lineTo(x1,pt[1]);
                        context.closePath();
                        context.fill();
                        context.stroke();
                    }
                    for(var i = ((pointList.length > 1)?(1):(0));i < lm1;i++){
                        pt = pointList[i];
                        context.beginPath();
                        context.arc(pt[0],pt[1],vertexSize,0,twopi,false);
                        context.fill();
                        context.stroke();
                    }
                    if(lm1 >= 0){
                        pt = pointList[lm1];
                        var x1 = pt[0] - vertexSize;
                        var x2 = pt[0] + vertexSize;
                        var y1 = pt[1] - vertexSize;
                        var y2 = pt[1] + vertexSize;
                        var w = x2 - x1;
                        var h = y2 - y1;
                        context.fillRect(x1,y1,w,h);
                        context.strokeRect(x1,y1,w,h);
                    }
                    var drawingSurfaceCtrd = document.getElementById(self.drawingSurfaceId + "_ctrd");
                    if(centroid && pointList.length > 1){
                        var cx = Math.round(centroid[0]);
                        var cy = Math.round(centroid[1]);
                        if(!closed && pointList.length > 0){
                            var pt = pointList[pointList.length-1];
                            cx = pt[0];
                            cy = pt[1];
                        }
                        var x1 = cx - vertexSize;
                        var x2 = cx + vertexSize;
                        var y1 = cy - vertexSize;
                        var y2 = cy + vertexSize;

                        context.beginPath();
                        context.moveTo(x1,y1);
                        context.lineTo(x2,y2);
                        context.moveTo(x1,y2);
                        context.lineTo(x2,y1);
                        context.closePath();
                        context.stroke();

                        if(drawingSurfaceCtrd){
                            drawingSurfaceCtrd.style["left"] = cx + "px";
                            drawingSurfaceCtrd.style["top"] = cy + "px";
                            var polyInfo = new Array();
                            if(ring && ring.area && 0 != ring.area && closed){
                                polyInfo[polyInfo.length] = "Area: " + Math.round(ring.area * 100)/100;
                            }
                            if(ring && ring.perimeter && 0 != ring.perimeter && closed){
                                polyInfo[polyInfo.length] = "Perimeter: " + Math.round(ring.perimeter * 100)/100;
                            }
                            if(ring && ring.distance && 0 != ring.distance){
                                polyInfo[polyInfo.length] = "Distance: " + Math.round(ring.distance * 100)/100;
                            }
                            if(ring && ring.lastSegLen && 0 != ring.lastSegLen){
                                polyInfo[polyInfo.length] = "Last Segment: " + Math.round(ring.lastSegLen * 100)/100;
                            }
                            drawingSurfaceCtrd.innerHTML = polyInfo.join("<br/>");
                            drawingSurfaceCtrd.style["visibility"] = "visible";
                        }
                    }else{
                        if(drawingSurfaceCtrd){
                            drawingSurfaceCtrd.style["visibility"] = "hidden";
                        }
                    }
                }
            }
        }
    }
    this._DrawPointsCanvas = _DrawPointsCanvas;
    
    function Clear(){
        if(self.clearFun){
            self.clearFun();
        }
    }
    this.Clear = Clear;
    
    //erase objects on drawing surface
    function _ClearVML(){
        var drawingSurface = document.getElementById(self.drawingSurfaceId);
        var drawingSurfaceV = document.getElementById(self.drawingSurfaceId + "_v");
        var drawingSurfaceCtrd = document.getElementById(self.drawingSurfaceId + "_ctrd");
        if(drawingSurface){
            drawingSurface.style["visibility"] = "hidden";
        }
        if(drawingSurfaceV){
            drawingSurfaceV.style["visibility"] = "hidden";
        }
        if(drawingSurfaceCtrd){
            drawingSurfaceCtrd.style["visibility"] = "hidden";
        }
    }
    this._ClearVML = _ClearVML;
    
    //erase objects on drawing surface
    function _ClearCanvas(){
        var drawingSurface = document.getElementById(self.drawingSurfaceId);
        var drawingSurfaceCtrd = document.getElementById(self.drawingSurfaceId + "_ctrd");
        if(drawingSurface){
            var context = drawingSurface.getContext("2d");
            var size = IMS2_GetElementDimension(drawingSurface);
            context.clearRect(0,0, size[0],size[1]);
        }
        if(drawingSurfaceCtrd){
            drawingSurfaceCtrd.style["visibility"] = "hidden";
        }
    }
    this._ClearCanvas = _ClearCanvas;
}