/**
/**
 * @author ITC073
 * $HeadURL: http://lisa/svn/webapps/GISplus/trunk/gisplus/web/webclient/js/map.js $
 * $LastChangedBy: daniel.wiesner $
 * $LastChangedRevision: 5681 $
 * $LastChangedDate: 2008-03-03 11:38:44 +0100 (Mo, 03 Mrz 2008) $
 */

//spezielle Version für SMG Präsentation
var Map;
Map = function(params) {

    this.version = "0.9";

    //Standardeinstellungen
    this.defaults = $.extend({
        saveExtend: false,
        saveLayers: false,
        legendId: "legend",
        scalebarId: "scalebar",
        refmapId: "minimap",
        layerListId: "dhtmlgoodies_tree",
        mapserverVersion: 4,
        toolTipps: false,
        dataWindowName: "iframe1",
        method: "GET",
        type: "cgi",
        zoomSize: 2,
        zoomDir: 0,
        strokeColor: "#c00",
        strokeWidth: "2px",
        fillColor: "#000",
        opacity: 0.5,
        mode: "browse",
        extras: {},
        onExtendChange: function() {},
        onMouseMove: function() {},
        onMeasure: function() {},
        onRenderStart: function() {},
        onRenderEnd: function() {},
		onToolTippShow: function() {},
		onToolTippHide: function() {}
    }, params);
	
	//'this' konservieren da bei Events 'this' das auslösende Element repräsentiert.
    var self = this;

    if(this.defaults.saveExtend) {
      //if($.cookie('_extend')) {
      //  this.defaults.extend = $.cookie('_extend');
      //}
    }

    if(this.defaults.saveLayers) {
      //if($.cookie('_layers')) {
        //alert($.cookie('_layers'));
        //this.defaults.layers = $.cookie('_layers');
      //}
    }

    //Container für Karte
    this.canvas = $("#" + this.defaults.containerId);
	$("<div id='imageMapContainer" + this.defaults.containerId + "'></div>").appendTo(self.canvas);
	
	$("<div class='toolTipp' id='toolTipp"+this.defaults.containerId+"'></div>").appendTo("body");
	
	/*this.mapImage = $("<img />")
		.attr("id","mapImage")
		.attr("usemap","#imageMap")
		
		.attr("src",this.defaults.themePath + "img/empty.gif")
		.css("width","100%")
		.css("height","100%")
		.css("position","absolute")
		.css("z-index","100000")
		.css("border","1px solid #c00")
		.load(function(){
			self.imageMap = $("<map />")
			.attr("id","imageMap")
			.attr("name","imageMap")
			.css("position","absolute")
			.css("z-index","20000")
			.appendTo(self.canvas)
			$(this).appendTo(self.canvas);
		});
	*/
	
			
		
		
		
	
    //aktuelles Shape bei Zeichenoperationen
    this.selected = null;

    //Array für Punkte
    this.pathData = new Array();

    //Modus bei Mausklicks
    this.mouseMode = this.mode.MOVE;

    //Position des letzten Mausklicks
    this.mouseDownX = 0;
    this.mouseDownY = 0;

    //Aktuelle Position der Maus
    this.mouseX = 0;
    this.mouseY = 0;

    //virtueller Mausklick
    this.imgX = this.canvas.width() / 2;
    this.imgY = this.canvas.height() / 2;

    //Mausklicks auf Übersichtskarte
    this.refX = null;
    this.refY = null;

    //Position der Karte im Browser
    this.offsetX = $(this.canvas).offset().left;
    this.offsetY = $(this.canvas).offset().top;

  

    // Vmlrenderer für IE, SVG für Firefox
    if ($.browser.msie) {
        this.renderer = new VmlRenderer(this.defaults.containerId);
    } else {
        this.renderer = new SvgRenderer(this.defaults.containerId);
    }




    //Handler für Mausbewegungen
    $(document).bind("mousemove", function(e) {
        self.handleDocumentMouseMove(e, this, self);
    });


    /**
     *
     */
    if ($.browser.msie) {
        this.canvas.bind("selectstart", self.nullHandler);
        $(document).bind("dragstart", self.nullHandler);
    }

    $("#splitter").bind("mousedown.splitter", function() {
        self.startDrag();
        var currentSplitterPosition = $("#splitter").css("right").replace(/px/,"");


       $(document).bind("mousemove.splitter", function() {
           self.handleSplitterDrag(currentSplitterPosition);
       });
       $(document).bind("mouseup.splitter", function() {
           $(document).unbind("mousemove.splitter");
           $(document).unbind("mouseup.splitter");
           self.handleSplitterDragStop();
           self.drawMap();
       });
    });



    $("#dialogTitle").bind("mousedown.dialogTitle", function() {
        $("#dialog iframe").hide();
        $(this).css("cursor","move");

        self.startDrag();
        var currentPosition = $("#dialog").position();
        $(document).bind("mousemove.dialogTitle", function() {
            self.handleDialogDrag(currentPosition);
        });
        $(document).bind("mouseup.dialogTitle", function() {
            $("#dialogTitle").css("cursor","pointer");
            $(document).unbind("mousemove.dialogTitle");
            $(document).unbind("mouseup.dialogTitle");
            $("#dialog iframe").show();
        });
    });

    $("#dialogResize").bind("mousedown.dialogResize", function() {
        $("#dialog iframe").hide();
        //$(this).css("cursor","move");

        self.startDrag();
        var currentWidth = $("#dialog").width();
        var currentHeight = $("#dialog").height();
        $(document).bind("mousemove.dialogResize", function() {
            self.handleDialogResize(currentWidth, currentHeight);
        });
        $(document).bind("mouseup.dialogResize", function() {
            //$("#dialogResize").css("cursor","pointer");
            $(document).unbind("mousemove.dialogResize");
            $(document).unbind("mouseup.dialogResize");
            $("#dialog iframe").show();
        });
    });


    //@todo close button separieren
    $("#" + this.defaults.refmapId).bind("mousedown.minimap", function(e) {
		var x =  e.pageX - $(this).offset().left;
        var y =  e.pageY - $(this).offset().top;

		self.refX = x;
        self.refY = y;
        self.refreshMap();
        return false;
    });


	try {
  		document.execCommand("BackgroundImageCache", false, true);
	}
	catch(err){
		;
	}



    self.drawMap(true);
    if(self.defaults.executeOnLoad) {
		if(self.defaults.executeOnLoad.url)
	    	self.callWindow(self.defaults.executeOnLoad.url,'post',self.defaults.dataWindowName);
    }
    self.bindDragStart();
    //private methods
    loadImage = function(url, targetElement) {
        var loaded = false;
        $("<img />")
            .attr("src", url)
            .load(function(){
                loaded = true;
                targetElement.html("<img alt='' src='"  + url + "' />");
             });
        $(this).remove();
        /*
        window.setTimeout(function(){
            if(!loaded) {
                alert(url + " konnte nicht geladen werden.");
            }
        }, 5000);*/
    };
};

Map.prototype = {

    //Enum für Mapmodi simulieren
    mode: {
        "MOVE":1,
        "ZOOM_IN":2,
        "ZOOM_OUT":3,
        "DRAW_LINE":4,
        "DRAW_POINT":5,
        "DRAW_CIRCLE":6,
        "DRAW_OVAL":7,
        "DRAW_RECT":8,
        "DRAW_POLYGONE":9,
        "INFO":10,
        "NQUERY":11,
        "MEASURE":12,
        "DRAW_MULTI_POINTS":13
    },
    /*
     * Event Extend change
     */
    onExtendChange: function(e) {
        this.defaults.onExtendChange(e);
        //$.cookie('_extend',e);
    },

    onMouseMove: function(e) {
        this.defaults.onMouseMove(e);
    },

    onMeasure: function(e) {
        this.defaults.onMeasure(e);
    },

    onRenderEnd: function(e) {
        this.defaults.onRenderEnd(e);
    },

    onRenderStart: function(e) {
        this.defaults.onRenderStart(e);
    },
	onToolTippShow: function(e) {
        this.defaults.onToolTippShow(e);
    },
	
	onToolTippHide: function(e) {
        this.defaults.onToolTippHide(e);
    },
	

	/***
	 * Anzeige eines oder mehrerer Layer
	 */
	showLayer: function() {
		if(arguments.length==0)
			throw("Fehler: keine Argumente übergeben");
		for(var i=0; i<arguments.length; i++) {
			if(typeof(arguments[i])!= "string") {
				throw("Ungültiges Format");
			}

			this.addLayer(arguments[i]);
		}
		this.refreshMap();
	},

	/***
	 * Ausblenden eines oder mehrerer Layer
	 */
	hideLayer: function(layerName) {
		this.removeLayer(layerName);
		this.refreshMap();
	},

	/***
	 * obsolete
	 */
    addLayer: function(layerName) {


    	if(this.defaults.layers.indexOf(layerName) == -1) {
	        if (this.defaults.layers != "") this.defaults.layers += " ";
	        this.defaults.layers += layerName;
			$("#" + this.defaults.layerListId + " input:checkbox[@value="+layerName+"]").attr("checked", "checked");
	        //$.cookie('_layers',this.defaults.layers);
    	}
    },

	/***
	 * obsolete
	 */
    removeLayer: function(layerName) {
    	if(this.defaults.layers.indexOf(layerName) != -1) {
    		var a_layers = this.defaults.layers.split(" ");
	        $("#" + this.defaults.layerListId + " input:checkbox[@value="+layerName+"]").removeAttr("checked");

	        var layerstring = "";
	        j = 0;
	        for  (i=0; i < a_layers.length; i++ ) {
	            if (a_layers[i] != layerName) {
	                if (j > 0) layerstring += " ";
	                layerstring += a_layers[i];
	                j += 1;
	            }
	        }
	        this.defaults.layers = layerstring;
	        //$.cookie('_layers',this.defaults.layers);
    	}
    },

    getHeight: function() {
        return this.canvas.height();
    },

    getWidth: function() {
        return this.canvas.width();
    },

    bindZoomOut: function() {
        var self = this;
        self.canvas.bind("mouseup.zoom", function() {
            //document.getElementById("imageMap").innerHTML = "";
            self.defaults.zoomDir = -1;
            self.imgX = self.mouseX;
            self.imgY = self.mouseY;
            self.drawMap();

        });
    },

    zoomOutStop: function() {
        this.canvas.unbind("mouseup.zoom");
    },

    bindDragStart: function() {
        var self = this;

        self.canvas.bind("mousedown.map", function() {
            self.clearImageMap();
            self.startDrag();
            //self.canvas.css("cursor","url(webclient/theme/default/cursor/Hand.cur)");
            $(document).bind("mousemove.drag", function() {
                self.canvas.addClass(".hand");
                self.handleMapDrag();
            });
            $(document).bind("mouseup.drag", function() {
                $(document).unbind("mousemove.drag");
                $(document).unbind("mouseup.drag");
                self.handleMapDragStop();
                self.drawMap();
            });
            return false;
        });
    },

    dragStop: function() {
        this.canvas.unbind("mousedown.map");
    },

    bindDrawStart: function() {
        var self = this;
        self.canvas.bind("mousedown.drawstart",function() {
            self.unbindToolTipps();
			//$("area").unbind("mouseover");
            //$("area").unbind("mouseout");
            self.canvas.unbind("mousedown.drawstart");
            self.startDraw();
            self.bindDraw();
            return false;
        });
    },

    drawStop: function() {
        //this.hideFadenKreuz();
		this.bindToolTipps();
        $(document).unbind("mousemove.draw");
        $(document).unbind("mouseup.draw");
        this.canvas
            .unbind("dblclick.draw")
            .unbind("contextmenu.draw")
            .unbind("mousedown.drawstart");
        //confirm(this.pathData.join(" "));
        //this.clearCanvas();

    },
	
	bindToolTipps: function() {
		var self = this;
		var shape;
		$("#imageMapContainer" + self.defaults.containerId + " area").bind("mouseover.tooltipp",function() {
			self.clearCanvas();
			
			var points = $(this).attr("coords").split(",");
			if($(this).attr("shape").toLowerCase() == "circle") {
				shape = self.renderer.create("circle", self.defaults.fillColor ,self.defaults.strokeColor,  self.defaults.strokeWidth , points[0] - points[2] , points[1] - points[2] , points[2] * 2, points[2] * 2);
			} else {
				shape = self.renderer.create("shape", self.defaults.strokeColor, "",  self.defaults.strokeWidth , points[0] , points[1], 1, 1);
				for (var i=0;i<points.length;i+=2) {
					self.renderer.addPoint(points[i],points[i+1]);
				}
				self.renderer.closePolygone(shape);
			}
			self.onToolTippShow({
				id:$(this).attr("id"),
				title:$(this).attr("title"),
				href: $(this).attr("href"),
				coords:$(this).attr("coords")
			});
		});
		

		$("#imageMapContainer" + self.defaults.containerId + " area").bind("mouseout.tooltipp",function() {
			//self.clearCanvas();
			//self.onToolTippHide();
		});
	
	},
	
	unbindToolTipps: function() {
		$("#imageMapContainer" + this.defaults.containerId + " area").unbind("mouseover.tooltipp");
		$("#imageMapContainer" + this.defaults.containerId + " area").unbind("mouseout.tooltipp");
	},

    bindDraw: function() {
        var self = this;
        $(document).bind("mousemove.draw", function() {
            self.draw();
        });
        $(document).bind("mouseup.draw", function() {
            if(self.mouseMode == self.mode.ZOOM_IN || self.mouseMode == self.mode.NQUERY ) {

                    self.drawStop();
                    var firstPointKoords = self.pathData[0].split(" ");
                    var firstPointX = firstPointKoords[0];
                    var firstPointY = firstPointKoords[1];


                    //Zoombox
                    if(firstPointX > self.mouseX)
                       self.defaults.imgbox = self.mouseX + " " + self.mouseY + " " + firstPointKoords.join(" ");
                    else
                       self.defaults.imgbox = firstPointKoords.join(" ") + " " + self.mouseX + " " + self.mouseY;


                    if(self.mouseMode == self.mode.ZOOM_IN)
                        self.defaults.zoomDir = 1;


                    self.imgX = self.mouseX;
                    self.imgY = self.mouseY;
                    //Karte zeichnen
                    if(self.mouseMode == self.mode.NQUERY) {
                        //self.drawMap();
                        self.callWindow(self.defaults.mapServer, "get", self.defaults.dataWindow);
                        self.reset();
                    } else {
                        self.drawMap();
                    }
                    self.bindDrawStart();
            } else {
                self.addPoint();
            }
        });

        this.canvas.bind("contextmenu.draw", function(e) {
            self.renderer.removeLastPoint();
            self.pathData.pop();
            self.draw();
            return false;
        });

        this.canvas.bind("dblclick.draw", function() {
            if(self.action) {
                if(self.action.url)
                    self.callWindow(self.action.url, "post", self.defaults.dataWindowName);
                if(self.action.callback)
                    self.action.callback();
            };

            self.drawStop();
            self.bindDrawStart();
        });
    },


    closeWindow: function() {
    	$('#dialog').hide();
    	//$('#dialog iframe').attr("src","about:blank");
    },

    minWindow: function() {
    	$('#dialog').hide();
    },

	maxWindow: function() {
    	$('#dialog').hide();
    },

	openWindow: function() {
		$('#dialog').show();
	},

    printWindow: function() {
    	var win1=window.open('','','width=800,height=500,left=100,top=100,resizable=yes,scrollbars=yes');
			var html = window.frames['iframe'].document.body.innerHTML;

	        html = html.replace(/<script/g,"<!--<script");
	        html = html.replace(/<\/script>/g,"</script>-->");
	        html = html.replace(/\ on.+=['\"].+['\"]/gi,"");


	    with(win1.document)
	    {
	        writeln('<html><head><title>'+title+'</title><style type="text/css">img {display:none}* {font-family:arial;font-size:12px;}table{width:90%;border:1px solid #666;border-collapse:collapse}th, td {border:1px solid #666}</style><script>window.onerror = function() {return false;}</script></head><body onload="print()">');
			write(html);
	        writeln('</body></html>');
	        close();
	    }
    	//alert($("iframe"));
    	//alert(document.frames.iframe1.body.innerHTML);
    	//popPrintVersion(document.frames['iframe'].document.body.innerHTML)
    },




    callWindow: function(url, method, target) {

		//durch Doppelklick wird der letzte Punkt zweimal hinzugefügt, wird hier entfernt
		var pointArrayLength = this.pathData.length;
		if(this.pathData[pointArrayLength-1] == this.pathData[pointArrayLength-2])
			this.pathData.pop();
		//alert(this.pathData.join(" "));



        $('#dialog').show();

        if(!url)
            url = "about:blank";
        if(!method)
            method = "post";
        if(!target)
            target = this.defaults.dataWindowName;
        var form = $('<form name="form1" is="form1"></form>')
                .attr("action",url)
                .attr("method",method)
                .attr("target",target)
                .append($("<input name='myminx' />").attr("value", this.minX))
                .append($("<input name='myminy' />").attr("value", this.minY))
                .append($("<input name='mymaxx' />").attr("value", this.maxX))
                .append($("<input name='mymaxy' />").attr("value", this.maxY))
				.append($("<input name='map' />").attr("value", this.defaults.mapFile))
                .append($("<input name='mode' />").attr("value", this.defaults.mode))
				.append($("<input name='zoomSize' />").attr("value", this.defaults.zoomSize))
				.append($("<input name='zoomDir' />").attr("value", this.defaults.zoomDir))
				.append($("<input name='imgext' />").attr("value", this.defaults.extend))
           		.append($("<input name='mapsize' />").attr("value", this.canvas.width() + " " + this.canvas.height()))
				//.append($("<input name='map_querymap_size' />").attr("value", this.canvas.width() + " " + this.canvas.height()))

				.append($("<input name='imgxy' />").attr("value", this.imgX + " " + this.imgY))
				.append($("<input name='imgbox' />").attr("value", this.defaults.imgbox))
				.append($("<input name='anz_und_koordinaten' />").attr("value", this.pathData.join(" ")))
                .append($("<input name='layers' />").attr("value", this.defaults.layers));

				for(key in this.defaults.extras) {
					form.append($("<input name='"+key+"' />").attr("value", this.defaults.extras[key]));
				}


				var data = {
		            //map_web_template: this.defaults.template,
		            //map_web_imagepath: this.defaults.imagePath,
		            //map_web_imageurl: this.defaults.imageUrl,
		            //map_scalebar_size: this.canvas.width() + " 3"
		           //map_web: " template " + this.defaults.template + " imagepath " + this.defaults.imagePath + " imageurl " + this.defaults.imageUrl
		           //map_scalebar: "size+" + this.canvas.width() + "3"

		        };
		        if(this.defaults.mapserverVersion < 5) {
                    data.map_web_template = this.defaults.template;
                    data.map_web_imagepath = this.defaults.imagePath;
                    data.map_web_imageurl = this.defaults.imageUrl;
                    //data.map_scalebar_size = this.canvas.width()   + " 3";
                } else {
                    data.map_web = "template '" + this.defaults.template + "' imagepath '" + this.defaults.imagePath + "' imageurl '" + this.defaults.imageUrl + "'";
	                //data.map_scalebar = "size " + this.canvas.width() - 10 + " 3";
	                //data.map_scalebar = "size " + $("#" + self.defaults.scalebarId).width() + " 3";
                }

				for(key in data) {
					form.append($("<input name='" + key + "' />").attr("value", data[key]));
				}

                form.appendTo("body");
                form.trigger("submit");
                form.remove();
    },

    setMode: function(mode, action) {
        this.action = action;
        this.drawStop();
        this.dragStop();
        this.zoomOutStop();
        this.mouseMode = mode;
        //Status Meßanzeige ausblenden;
        $("#"+ this.defaults.measureId).css("left","-1000px");



        switch(mode) {
            case this.mode.MOVE:
                this.bindDragStart();
                this.canvas.css("cursor","pointer");
                this.defaults.mode = "browse";
                break;
            case this.mode.ZOOM_OUT:
                this.bindZoomOut();
                this.canvas.css("cursor","pointer");
                this.defaults.mode = "browse";
                break;
           case this.mode.ZOOM_IN:
                this.defaults.mode = "browse";
                this.bindDrawStart();
                break;
            case this.mode.DRAW_LINE:
            case this.mode.DRAW_POINT:
            case this.mode.DRAW_MULTI_POINTS:
            case this.mode.MEASURE:
            case this.mode.DRAW_POLYGONE:
                this.defaults.mode = "browse";
                this.bindDrawStart();
                break;

            case this.mode.NQUERY:
                this.defaults.mode = "nquery";
                this.bindDrawStart();
                this.canvas.css("cursor","crosshair");
                break;

        }
    },

    /***
    * Tue gar nichts
    */
    nullHandler: function() {
        return false;
    },


     /**
     *
     * @param {Event} e
     * speichern der aktuellen Mausposition
     *
     */
    startDrag: function() {
        //document.getElementById("imageMap").innerHTML = "";

        this.clearCanvas();
        this.mouseDownY = this.mouseY;
        this.mouseDownX = this.mouseX;
    },

    handleMapDrag:  function() {
        var deltaX = this.mouseX - this.mouseDownX;
        var deltaY = this.mouseY - this.mouseDownY;
        this.canvas.css("background-position", deltaX + "px" + " " + deltaY + "px");
    },

    handleMapDragStop: function() {
       this.imgX = this.imgX - (this.mouseX - this.mouseDownX);
       this.imgY = this.imgY - (this.mouseY - this.mouseDownY);
    },


    handleSplitterDrag:  function(pos) {

        var deltaX = pos -  (this.mouseX - this.mouseDownX);
        var newPos = deltaX + $("#splitter").width();

        $("#splitter").css("right", deltaX + "px");
        $("#side").css("width",  (deltaX - $("#splitter").width() - 10) + "px");
        $("#main").css("right", (newPos) + "px");
        this.canvas
            .css("right", (newPos + 5) + "px")
            .css("right", (newPos + 5) + "px");
        //$("#minimap").css("right", newPos + 5  + "px");


    },

    handleSplitterDragStop: function() {
       this.imgX = this.imgX - (this.mouseX - this.mouseDownX);
       this.imgY = this.imgY - (this.mouseY - this.mouseDownY);
    },

    handleDialogDrag: function(startPosition) {


        var deltaX = this.mouseX - this.mouseDownX;
        var deltaY = this.mouseY - this.mouseDownY;


        $("#dialog").css("left",(startPosition.left + deltaX) + "px");
        $("#dialog").css("top", (startPosition.top + deltaY) + "px");
    },

    handleDialogResize: function(startWidth, startHeight) {
        var deltaX = this.mouseX - this.mouseDownX;
        var deltaY = this.mouseY - this.mouseDownY;
        $("#dialog").css("width",(startWidth + deltaX) + "px");
        $("#dialog").css("height", (startHeight + deltaY) + "px");
    },

    startDraw: function() {
       //document.getElementById("imageMap").innerHTML = "";

       this.mouseDownY = this.mouseY;
       this.mouseDownX = this.mouseX;

       var shape = null;
       switch(this.mouseMode) {
            case this.mode.DRAW_RECT:
                shape = "rect";
                break;
            case this.mode.ZOOM_IN:
                shape = "rect";
                break;
            case this.mode.DRAW_MULTI_POINTS:
            case this.mode.DRAW_POINT:
                shape = "rect";
                break;

            case this.mode.NQUERY:
                shape = "rect";
                break;
            case this.mode.DRAW_LINE:
                shape = "line";
                break;
             case this.mode.DRAW_POLYGONE:
                shape = "shape";
                break;
            case this.mode.MEASURE:
                shape = "shape";
                break;
       }



	   if(this.mouseMode == this.mode.DRAW_MULTI_POINTS ) {
	   		this.renderer.create(shape, '' ,this.defaults.strokeColor,  this.defaults.strokeWidth , this.mouseDownX -4 , this.mouseDownY - 4, 8, 8);
            this.setMode(this.mode.DRAW_MULTI_POINTS, this.action);
	   } else if(this.mouseMode == this.mode.DRAW_POINT ) {
	   		this.clearCanvas();
			this.renderer.create(shape, '' ,this.defaults.strokeColor,  this.defaults.strokeWidth , this.mouseDownX -4 , this.mouseDownY - 4, 8, 8);
            this.setMode(this.mode.DRAW_POINT, this.action);
       } else {
            if(this.mouseMode == this.mode.MEASURE) {
                this.clearCanvas();
            }
            this.selected =  this.renderer.create(shape, this.defaults.fillColor ,this.defaults.strokeColor,  this.defaults.strokeWidth , this.mouseDownX , this.mouseDownY, 1, 1);
            if(this.mouseMode == this.mode.ZOOM_IN || this.mouseMode == this.mode.NQUERY) {
                this.addPoint();
            }

       }

    },

    addPoint: function() {
        this.pathData.push(this.mouseX + " " + this.mouseY);
        if(this.mouseMode == this.mode.DRAW_POLYGONE || this.mouseMode == this.mode.DRAW_LINE || this.mouseMode == this.mode.MEASURE) {
           this.renderer.addPoint(this.mouseX, this.mouseY);
        }

    },

    draw: function() {
        if(this.mouseMode != this.mode.DRAW_POINT && this.mouseMode != this.mode.DRAW_MULTI_POINTS) {
            this.renderer.resize(this.selected, this.mouseDownX, this.mouseDownY, this.mouseX , this.mouseY);
            if(this.mouseMode === this.mode.MEASURE)	{
                var laenge = 0;
                var area   = 0;
                var x1, x2, y1, y2;
                if (this.pathData.length > 0) {
                    for (var i=0; i < this.pathData.length; i++) {
                        if (i < this.pathData.length-1) {
                            x1 = this.pathData[i].split(" ")[0];
                            y1 = this.pathData[i].split(" ")[1];
                            x2 = this.pathData[i+1].split(" ")[0];
                            y2 = this.pathData[i+1].split(" ")[1];
                        }
                        else {
                            //letzter Punkt erreicht
                            x1 = this.pathData[i].split(" ")[0];
                            y1 = this.pathData[i].split(" ")[1];
                            x2 = this.mouseX;
                            y2 = this.mouseY;
                        }
                        laenge += Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
                        if (i==0) {
                        	// calc first point
                        	area  = x1 * (y2 - this.mouseY);
                        }
                        else {
                        	area += x1 * (y2 - this.pathData[i-1].split(" ")[1]);
                        }
                        if (i == this.pathData.length-1) {
                        	// calc last point
                        	area += x2 * (this.pathData[0].split(" ")[1] - y1);
                        }
                    }
                }
                //Umrechnung in m
                var ergebnis = Math.round((laenge * this.sizeX)/this.canvas.width());
                //var ergebnis = ((laenge * this.sizeX)/this.canvas.width());
                var ergebnis2= Math.round((Math.abs(area/2) * (this.sizeX*this.sizeX))/(this.canvas.width()*this.canvas.width()));
                this.onMeasure({
                    length: ergebnis,
                    area: ergebnis2
                });

            }
        } else {
        	//this.renderer.create("rect", this.defaults.fillColor ,this.defaults.strokeColor,  this.defaults.strokeWidth , this.mouseDownX -4 , this.mouseDownY - 4, 8, 8);
        }

    },



    clearCanvas: function() {
		 this.pathData = null;
         this.pathData = new Array();
         this.renderer.clear();
		 this.onToolTippHide();
         //mit nichtsichtbarem rechteck schneller im ie
         //if ($.browser.msie)

    },


    /**
     *
     * @param {Event} e
     * speichern der aktuellen Mausposition
     *
     */
    handleDocumentMouseMove: function(e) {
        this.mouseX = e.pageX - this.offsetX;
        this.mouseY = e.pageY - this.offsetY;
        this.onMouseMove({
            rw: Math.round(this.minX + this.mouseX * this.sizeX / this.canvas.width()),
            hw: Math.round(this.maxY - this.mouseY * this.sizeY / this.canvas.height())
        });
    },


    showFadenKreuz: function() {
        var self = this;
        //Fadenkreuz
        self.canvas.append("<div id='vline' style='width:1px;height:100%;background:#000;position:absolute;'></div>");
        self.canvas.append("<div id='hline' style='height:1px;width:100%;background:#000;position:absolute;'></div>");
        $(document).bind("mousemove.fadenkreuz",function() {
            $("#hline").css("top", self.mouseY + "px");
            $("#vline").css("left", self.mouseX + "px");
        });
    },

    hideFadenKreuz: function() {
        $(document).unbind("mousemove.fadenkreuz");
        $("#hline").remove();
        $("#vline").remove();
    },

    reset: function() {
        this.imgX = this.canvas.width() / 2;
        this.imgY = this.canvas.height() / 2;
        this.refX = null;
        this.refY = null;
        this.defaults.imgbox = null;
        this.defaults.zoomDir = 0;
        this.clearCanvas();
    },

    //setzt das Mapimage
    setImage: function (imageFileName) {
    	var self = this;
    	self.onRenderStart();
    	$("<img />")
                .attr("src",imageFileName)
                .load(function(){
					self.canvas.css("background","url(" + imageFileName + ") no-repeat");
					self.reset();
					self.onRenderEnd();
                });
    },

    clearImageMap : function() {
		$("#imageMapContainer" + this.defaults.containerId ).empty();
        //$("#imageMap").remove();
        //$("#mapImage").remove();
    },

    drawImageMap: function(data) {

        //document.getElementById("imageMap").innerHTML = "";
        var self = this;
        //self.onRenderStart();
		

        var data = {
            zoomSize: this.defaults.zoomSize,
            zoomDir: this.defaults.zoomDir,
            imgext: this.defaults.extend,
            layers: this.defaults.layers,
			mapsize: this.canvas.width() + " " + this.canvas.height()
        };

	if(this.defaults.mapserverVersion < 5) {
            data.map_web_imagepath = this.defaults.imagePath;
            data.map_web_imageurl = this.defaults.imageUrl;
        } else {
            data.map_web = "imagepath '" + this.defaults.imagePath + "' imageurl '" + this.defaults.imageUrl + "'";
        }


        if(this.defaults.imgbox != null) {
           data.imgbox = this.defaults.imgbox;
        }
        if(self.refX != null && self.refY != null) {
            data.refxy = self.refX + " " + self.refY;
        } else  {
            data.imgxy = self.imgX + " " + self.imgY;
        }
		
		for(key in self.defaults.extras) {
            data[key] = self.defaults.extras[key]
        }
        //Imagemap
        data.map = self.defaults.mapFileToolTipp;

        data.searchmap = "true";
        data.mode = "nquery";

        $.ajax({
            async: true,
            type: this.defaults.method,
            url: this.defaults.mapServer,
            dataType: "html",
            data: data,
            cache: false,
            success: function(response) {
				self.clearImageMap();
                //Container für transparentes Gif mit Imagemap
				//$("<map id='imageMap' name='imageMap'>"+response+"</map>")
				//$(response).appendTo(self.imageMap);
				//alert(response);
				//$("#imageMap").empty();
				$("<img />")
		
				//document.getElementById("imageMap").innerHTML = response;
				
				
				$("<img usemap='#imageMap" + self.defaults.containerId + "'  style='position:absolute;width:100%;height:100%;z-index:10000' src='" +self.defaults.themePath + "img/empty.gif' /><map  name='imageMap"+  self.defaults.containerId+"'>" + response + "</map>")
				.appendTo($("#imageMapContainer" + self.defaults.containerId));
				self.bindToolTipps();
					
				//alert(document.getElementById("karte").innerHTML);
				
				
				


                

                //self.onRenderEnd();
            },
            error: function() {
                //self.onRenderEnd();
            }

        });
    },

    //Karte neu aden
    refreshMap: function() {
        var mode = this.defaults.mode;
        this.defaults.mode = "browse";
        this.drawMap();
        this.defaults.mode = mode;
    },

    drawMap: function(first) {
		var self = this;
		self.onRenderStart();
       
		if (self.defaults.toolTipps) {
			self.drawImageMap();
		}
       
        self.clearImageMap();
        self.clearCanvas();

        var data = {
            zoomSize: this.defaults.zoomSize,
            zoomDir: this.defaults.zoomDir,
            imgext: this.defaults.extend,
            layers: this.defaults.layers,
            mapsize: this.canvas.width() + " " + this.canvas.height()
        };
		
        if(this.defaults.mapserverVersion < 5) {
            data.map_web_template = this.defaults.template;
            data.map_web_imagepath = this.defaults.imagePath;
            data.map_web_imageurl = this.defaults.imageUrl;
            if(this.defaults.scaletextId) {
            	data.map_scalebar_size = this.canvas.width() - $("#"+this.defaults.scaletextId).width() + " 3";
            } else {
            	data.map_scalebar_size = this.canvas.width()  + " 3";
            }

        } else {
            data.map_web = "template '" + this.defaults.template + "' imagepath '" + this.defaults.imagePath + "' imageurl '" + this.defaults.imageUrl + "'";
            if(this.defaults.scaletextId) {
            	data.map_scalebar = "size " + this.canvas.width() - $("#"+this.defaults.scaletextId).width() + " 3";
            } else {
            	data.map_scalebar = "size " + (this.canvas.width() - 10) + " 3";
            }
        }
        if(this.defaults.scaletextId) {
        	$("#" + self.defaults.scalebarId).css("width",this.canvas.width() - $("#"+this.defaults.scaletextId).width());
        } else {
       	 	$("#" + self.defaults.scalebarId).css("width",this.canvas.width());
        }



        if(this.defaults.imgbox != null) {
           data.imgbox = this.defaults.imgbox;
        }
        if(self.refX != null && self.refY != null) {
            data.refxy = self.refX + " " + self.refY;
        } else  {
            data.imgxy = self.imgX + " " + self.imgY;
        }
        for(key in self.defaults.extras) {
            data[key] = self.defaults.extras[key]
        }

        //Images
        data.map = this.defaults.mapFile;
        data.mode = this.defaults.mode;

        $.ajax({
            cache: false,
            async: true,
            type: this.defaults.method,
            url: this.defaults.mapServer,
            dataType: "html",
            data: data,
            success: function(responseText) {
                var Rows = responseText.split(":::");
                if ($.trim(Rows[0]) == 'STATUS_OK') {
                    //self.onExtendChange($.trim(Rows[5]));
                    $("<img />")
                    .attr("src",$.trim(Rows[1]))
                    .load(function(){
                        self.canvas.css("background","url("+$.trim(Rows[1])+") no-repeat");
                        self.onRenderEnd();

                        $(this).remove();


                    })

					
					
                    if (($.trim(Rows[5]) != self.defaults.extend || first)) {
                        self.defaults.extend = $.trim(Rows[5]);
                        self.onExtendChange($.trim(Rows[5]));

                        var cornerPoints = self.defaults.extend.split(" ");
                        self.minX = parseInt(cornerPoints[0]);
                        self.minY = parseInt(cornerPoints[1]);
                        self.maxX = parseInt(cornerPoints[2]);
                        self.maxY = parseInt(cornerPoints[3]);
                        self.sizeX =  self.maxX  - self.minX;
                        self.sizeY = self.maxY  - self.minY;


                        //@todo: Abfrag falls eins nicht im Mapfile
                        //loadImage($.trim(Rows[3]), $("#" + self.defaults.refmapId));
                        //loadImage($.trim(Rows[4]), $("#" + self.defaults.scalebarId));
                        //loadImage($.trim(Rows[2]), $("#" + self.defaults.legendId));


                        
                        if(self.defaults.scaletextId) {
                            $("#" + self.defaults.scaletextId).html("Maßstab: 1:" + Math.round($.trim(Rows[12])));
                        }
						/*
                        $("<img />")
                        .attr("src",$.trim(Rows[3]))
                        .load(function(){
                            $("<img />")
                            .attr("src",$.trim(Rows[4]))
                            .load(function(){

                                $("#" + self.defaults.scalebarId).css("background","url("+$.trim(Rows[4])+")");
                                $("#" + self.defaults.refmapId).css("background","url("+$.trim(Rows[3])+") no-repeat");
                                $("#" + self.defaults.legendId).html("<img alt='legende' src='"  + $.trim(Rows[2]) + "' />");

                                if(self.defaults.toolTipps) {
                                    self.drawImageMap();
                                }
                                if(self.defaults.scaletextId) {
                                	$("#" + self.defaults.scaletextId).html("Maßstab: 1:" + Math.round($.trim(Rows[12])));
                                }
                                $(this).remove();
                            });
                            $(this).remove();

                        });*/

                    }

                    self.reset();

                    if ($.browser.opera) {
                        self.canvas.css("height",self.canvas.height() + "px");
                    }
                } else {
                    alert(responseText);
                }
            }
        });
    }
};