LHS.MapESRI = Class.create();
LHS.MapESRI.prototype = Object.extend(new LHS.Map(), {
	initialize: function (id, options) {
		this.id = id;
		this.scrollStart = null;
		//used to extend this.options, but didnt work properly
		this.options = Object.extend({}, options);
		this.holder = $('map-' + id.substringAfter('-')) || document.body;
		this.maps = $H({});
		this.layers = [];
		this.userShapes = [];
		this.zoomLevel = null;
		dojo.require("esri.map");
		dojo.require("esri.tasks.query");
		dojo.require("esri.toolbars.draw");
		this.createMap();
		this.setupFeatureCreation();
		this.setupAreaSearch();
		this.setupLayerToggles();
		this.type = 'ESRI';
	},
	/**
	 * Function to turn the object tag into a map using the options that have been set
	 */
	createMap: function () {
		this.map = null;
		this.map = new esri.Map(this.id);
		
		if ($T.isString(this.options.mapURL)) {
			this.options.mapURL = [this.options.mapURL];
		}
		
		// loop around map URLs
		var getVisibleLayers = function (layer) {
			layer.visibleLayers = [];
			if (this.options.layer) {
				layer.visibleLayers = this.options.layer.split(',');
				this.maps[layer.url].setVisibleLayers(layer.visibleLayers);
			} else {
				for (var y = 0, len = layer.layerInfos.length; y < len; y++) {
				    layer.visibleLayers.push(layer.layerInfos[y].id);
				}
			}
		}.bind(this);
		
		for (var i = 0, len = this.options.mapURL.length; i < len; i++) {
			var url = this.options.mapURL[i];
		    this.maps[url] = new esri.layers.ArcGISDynamicMapServiceLayer(url);
		    if (i === 0) {
		    	this.defaultLayer = this.maps[url];
		    } else {
		    	this.maps[url].setOpacity(0.5);
		    }
		    this.map.addLayer(this.maps[url]);
			dojo.connect(this.maps[url], "onLoad", getVisibleLayers);
		}
		
	    this.options.extent = this.map.extent;
	    
		function initMap() {
		    // load the KML and RSS feeds
		    this.options.zoomToLayer = this.options.zoomToLayer ? true : false;
		    if (this.options.geoKML) {
				this.options.geoKML.each(function (kml) {
					this.loadKML(kml, null, this.options.zoomToLayer);
				}.bind(this));
			}
			if (this.options.geoRSS) {
				this.options.geoRSS.each(function (rss) {
					this.loadRSS(rss, null, this.options.zoomToLayer);
				}.bind(this));
			}
			if (this.options.xmin && this.options.ymin && this.options.xmax && this.options.ymax) {
				this.changeExtent();
			}
			
			this.addMapForm();

			var urls = [];
			this.maps.each(function (pair) {
				var url = pair.key;
				pair.value.layerInfos.each(function (layer) {
					urls.push(url + '/' + layer.id);
				});
			});
			$(this.id).style.backgroundImage = '';
			
			if (this.controls.btnGroup) {
				this.controls.btnGroup.hide();
				this.togglePopup(true, 'startMsg');
			}
			this.options.extent = this.map.extent;
			var breadcrumb = $$('div.breadcrumb')[0];
			if (breadcrumb) {
				breadcrumb.scrollTo();
			}
		}
		// map onload function
	    dojo.connect(this.map, "onLoad", initMap.bind(this));
	},
	changeExtent: function () {
		this.options.extent = new esri.geometry.Extent(Number(this.options.xmin), Number(this.options.ymin), Number(this.options.xmax), Number(this.options.ymax), this.map.spatialReference);
		this.map.setExtent(this.options.extent);
	},
	querySearch: function (event, url, sValue) {
		var queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0");
		var query = new esri.tasks.Query();
        sValue = sValue.value;
        query.returnGeometry = true;
        query.outFields = ["CITY_NAME"];
        query.where = "CITY_NAME like '" + sValue + "'";
		queryTask.execute(query, function (fset) {
        	fset.features.each(function (f, i) {
	        	this.map.centerAt(f.geometry);
	        }.bind(this));
        }.bind(this));
        
        Event.element(event).blur();
        Event.stop(event);
	},
	deleteLastLayer: function () {
		
	},
	setLayers: function(mapURL, layers){
		this.maps[mapURL].setVisibleLayers(layers);
	},
	/**
	 * Function to position the popup over the map
	 * @param {String} type - The type of popup to position
	 */
	positionPopup: function (type) {
		// check popup exists
		if (this.controls.pointPopup) {
			var leftPosition = $(this.id).getWidth() / 2;
			var topPosition = $(this.id).getHeight() / 2;
			
			// according to type position it in middle of map
			if (type === 'startMsg') {
				leftPosition = (leftPosition + 242) - 333;
				topPosition = (topPosition + $$('div.header')[0].getHeight()) - 155;
				this.controls.pointPopup.setStyle({position: 'absolute', top: topPosition + 'px', left: leftPosition + 'px', width: '666px'});
			} else {
				leftPosition = (leftPosition + 242) - 170;
				topPosition = (topPosition + $$('div.header')[0].getHeight()) - this.controls.pointPopup.getHeight() / 2;
				this.controls.pointPopup.setStyle({position: 'absolute', top:  topPosition + 'px', left: leftPosition + 'px', width: '340px'});
			}	
		}
	}, 
	/**
	 * Function to add a form to the map that will be populated on the panning/zooming of map.
	 */
	addMapForm: function () {
		// check map exists
		if (this.options.form && $(this.options.form)) {
			this.options.form = $(this.options.form);
			
			var change = function (event) {
				
				// populate form width data
				this.options.form.populate({
					'param:xmin': this.map.extent.xmin,
					'param:xmax': this.map.extent.xmax,
					'param:ymin' : this.map.extent.ymin,
					'param:ymax': this.map.extent.ymax,
					'param:spatialReference': this.map.spatialReference.wkid,
					'map:xmin': this.map.extent.xmin,
					'map:xmax': this.map.extent.xmax,
					'map:ymin' : this.map.extent.ymin,
					'map:ymax': this.map.extent.ymax,
					'map:spatialReference': this.map.spatialReference.wkid
				});
			}.bind(this);
			change();
			dojo.connect(this.map, 'onExtentChange', change);
		}
	},
	addMap: function () {
		
	},
	findAddress: function (event, where) {
		var findObj = where.innerHTML.evalJSON();
		if (findObj.candidates[0]) {
			if (findObj.candidates[0].location) {
				var minY, minX, maxY, maxX, x, y, ext;
				x = parseFloat(findObj.candidates[0].location.x);
				y = parseFloat(findObj.candidates[0].location.y);
				minX = x - 500;
				minY = y - 500;
				maxX = x + 500;
				maxY = y + 500;
				ext = new esri.geometry.Extent(minX, minY, maxX, maxY, this.map.spatialReference);
				//this.map.centerAt(new esri.geometry.Point(, findObj.candidates[0].location.y));
				this.map.setExtent(ext);
			} 
		} else {
			this.togglePopup(true, 'findMsg');
			this.positionPopup('findMsg');
		}
	},
	/**
	 * Resets the map to its original view
	 */
	resetView: function (event, element) {
		this.map.setExtent(this.options.extent);
	},
	mapResize: function (width, height) {
		
	},
	/**
	 * @param {String} url - The url of the KML feed
	 * @param {Function} callback - A function to be run when the KML is loaded
	 * @param {Boolean|Integer} zoomTo - If true then the Map should move to the best view for the new Layer - If an Integer then zoom to that idexed shape
	 * @return {VEShapeLayer} - the new layer
	 */
	loadKML: function (url, callback, zoomTo, options) {

	},
	loadJSON: function (url) {
		var map = this;
		var layer = [];
		///AJAX request to get geoJSON object
		var kml2json = new Ajax.Request(url, {
			method: 'get',
			onSuccess: function (transport) {
				var jsonStr = transport.responseText.gsub('\n', '').gsub('\t', '');
				var obj = jsonStr.evalJSON();
				
				obj.features.each(function (feature) {
					//call shape drawer
					if (feature.type === 'Point') {
						map.drawJSONPoint(layer, feature);
					} else if (feature.type === 'Polygon' || feature.type === 'LineString') {
						map.drawJSONPoly(layer, feature);
					}
				});
				
				//check for bounding box
				if (obj.bbox) {
					//remove '0' from bounding box
					obj.bbox = obj.bbox.without(0);
					var bestFit = new esri.geometry.Extent(obj.bbox[3], obj.bbox[0], obj.bbox[1], obj.bbox[2], map.map.extent.spatialReference.wkid);
					//timeout prevents IE error
					if (bestFit) {
						setTimeout(function () {
							//map.map.setExtent(bestFit);
						}.bind(this), 1000);
					}
				}
			}
			
		});
		return layer;
	},
	/**
	 * Removes all shapes from drawing layers
	 */
	removeAllShapes: function () {
		this.layers.each(function(layer) {
			if (typeof layer!= 'undefined') {
				layer.each(function(shape) {
					this.map.graphics.remove(shape);
				}.bind(this));
			}
		}.bind(this));
		this.layers = [];
	},
	drawJSONPoint: function (layer, feature) {
		//set map symbol for marker
		var symbol;
		var iconHref;
		if (feature.style.iconStyle) {
			iconHref = feature.style.iconStyle.iconHref;
			if (Prototype.Browser.IE && Prototype.Browser.version < 7) {
				iconHref = iconHref.substringBefore('.') + '.gif';
			} 
			symbol = new esri.symbol.PictureMarkerSymbol(iconHref, 57, 53);
			symbol.yoffset = 18;
			symbol.xoffset = 9;
		} else {
			if (feature.styleUrl) {
				if (feature.styleUrl.indexOf('-') !== -1) {
					iconHref = $rootUrl + '/layer/' + feature.styleUrl.substringAfter('-') + '/marker.png';
				} else {
					iconHref = $rootUrl + '/' + feature.styleUrl;
				}
				if (Prototype.Browser.IE && Prototype.Browser.version < 7) {
					iconHref = iconHref.substringBefore('.') + '.gif';
				}
				symbol = new esri.symbol.PictureMarkerSymbol(iconHref, 57, 53);
				symbol.yoffset = 18;
				symbol.xoffset = 9;
			} else {
				symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1), new dojo.Color([0, 255, 0, 0.25]));
			}
		}
		//set shape and add graphic to layer array
		var geometry = new esri.geometry.Point(feature.coordinates[0], feature.coordinates[1], this.map.spatialReference);
		var graphic = new esri.Graphic(geometry, symbol);
		graphic.visible = true;
	    this.map.graphics.add(graphic);
	    layer.push(graphic);
	},
	drawJSONPoly: function (layer, feature) {
		feature.type = (feature.type === 'Polygon') ?  feature.type : 'Polyline';
		var polygon = (feature.type === 'Polygon') ?  true : false;
		var symbol, fColour, width, fillColour, lineSymbol, polySymbol;
    	var geometry = new esri.geometry[feature.type]();
    	var points = feature.coordinates.collect(function (coord) {
    		return  new esri.geometry.Point(coord[0], coord[1]);
    	});
    	
    	if (polygon) {
    		geometry.addRing(points);
    	} else {
    		geometry.addPath(points);
    	}
		geometry.spatialReference = this.map.spatialReference;

		fColour = (feature.style.lineStyle) ? feature.style.lineStyle.color : null;

		colour = (fColour) ?  new dojo.Color('#' + fColour.substr(6, 2) + fColour.substr(4, 2) + fColour.substr(2, 2)) : new dojo.Color('#FF0000');

    	width = (feature.style.lineStyle) ?  feature.style.lineStyle.width : 2;
    	fillColour = (fColour) ?  new dojo.Color('#' + fColour.substr(6, 2) + fColour.substr(4, 2) + fColour.substr(2, 2)) : new dojo.Color('#FF0000');
    	fillColour.a = 0.4;
    	lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, colour, width);
    	polySymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, colour, width), fillColour);
    	
		symbol = (feature.type === 'Polyline') ? lineSymbol : polySymbol;
			
    	var graphic = new esri.Graphic(geometry, symbol);
    	graphic.visible = true;
    	this.map.graphics.add(graphic);
    	layer.push(graphic);
	},
	/**
	 * @param {VEShapeLayer} layer - The layer to be removed
	 */
	unloadLayer: function (layer) {
		layer.each(function (graphic) {
			this.map.graphics.remove(graphic);
		}.bind(this));
	},
	toggleMap: function (map) {
		var visible = map.visible ? false : true;
		map._setVisibility(visible);
		if (visible) {
			map.setVisibleLayers(map.layerInfos.collect(function (l) {
				return l.id;
			}));
		}
		var form = $(this.id).up('form');
		if (form) {
			form.getElementsBySelector('input[name="param:mapURL"]').each(function (mapURL) {
				if (mapURL.value === map.url) {
					mapURL.disabled = visible ? false : true;
				}
			});
		}
		return visible;
	},
	/**
	 * @param {VEShapeLayer} layer - The layer to show
	 * @param {Boolean|Integer} zoomTo - If true then the Map should move to the best view for the new Layer - If an Integer then zoom to that idexed shape
	 */
	showLayer: function (url, layerId, json) {
		if (json) {
			var layer = url;
			layer.each(function (graphic) {
				graphic.show();
				graphic.visible = true;
			}.bind(this));
		} else {
			if (this.maps[url].visibleLayers.indexOf(layerId) === -1) {
				this.maps[url].visibleLayers.push(Number(layerId));
			}
			this.maps[url].setVisibleLayers(this.maps[url].visibleLayers);
		}
	},
	/**
	 * @param {VEShapeLayer} layer - The layer to hide
	 */
	hideLayer: function (url, layerId, json) {
		if (json) {
			var layer = url;
			layer.each(function (graphic) {
				graphic.hide();
				graphic.visible = false;
			}.bind(this));
		} else {
			this.maps[url].visibleLayers = this.maps[url].visibleLayers.without(layerId);
			this.maps[url].setVisibleLayers(this.maps[url].visibleLayers);
		}
	},
	/**
	 * Hide all layers
	 */
	hideAllLayer: function () {

	},
	zoomTo: function (event, element) {
		var ext, maxX, maxY, minY, minX;
		maxX = maxY = minY = minX = null;
		this.map.graphics.graphics.each(function (g, i) {
			if (g.visible) {
				if (minX === null) {
					if (g.geometry.type === 'point') {
						minX = g.geometry.x - 0.5;
						minY = g.geometry.y - 0.5;
						maxX = g.geometry.x + 0.5;
						maxY = g.geometry.y + 0.5;
					} else {
						ext = g.geometry.getExtent();
						minX = ext.xmin;
						minY = ext.ymin;
						maxX = ext.xmax;
						maxY = ext.ymax;
					}		
				}
				if (g.geometry.type === 'point') {
					minX = (g.geometry.x - 0.5 < minX) ? g.geometry.x - 0.5 : minX;
					minY = (g.geometry.y - 0.5 < minY) ? g.geometry.y - 0.5 : minY;
					maxX = (g.geometry.x + 0.5 > maxX) ? g.geometry.x + 0.5 : maxX;
					maxY = (g.geometry.y + 0.5 > maxY) ? g.geometry.y + 0.5 : maxY;
				} else {
					ext = g.geometry.getExtent();
					minX = (ext.xmin < minX) ? ext.xmin : minX;
					minY = (ext.ymin < minY) ? ext.ymin : minY;
					maxX = (ext.xmax > maxX) ? ext.xmax : maxX;
					maxY = (ext.ymax > maxY) ? ext.ymax : maxY;
				}		
			}
		}.bind(this));
		if (minX !== null) {
			ext = new esri.geometry.Extent(minX, minY, maxX, maxY, this.map.SpatialReference);
			this.map.setExtent(ext);
		}
		if (element) {
			element.blur();
			Event.stop(event);
		}
	},
	/**
	 * @param {String} url - The url of the RSS feed
	 * @param {Function} callback - A function to be run when the RSS is loaded
	 * @param {Boolean} zoomTo - If true then the Map should move to the best view for the new Layer
	 */
	loadRSS: function (url, callback, zoomTo, options) {

	},
	styleLayerFeatures: function (layer, options) {

	},
	selectGeometry: function () {

	},
	removePointsFromFeature: function () {

	},
	/**
	 * Adds points onto all the vertices and side of a Polygon/Line so that it can be modified
	 * 
	 * @param {VEShape} geometry - The shape we are going to edit
	 * @param {Boolean} end - If true then the points will be removed
	 */
	pointsToFeature: function (geometry, end) {

	},
	mapDrag: function (mapDiv, event) {

	},
	mapScroll: function (mapDiv, event) {

	}
});
/**
 * The Line Drawer extends the Base Drawer
 */
LHS.MapESRI.PointDrawer = Class.create();
LHS.MapESRI.PointDrawer.prototype = Object.extend(new LHS.Map.Drawer(), {
	shape: null,
	shapeType: esri.toolbars.Draw.POINT,
	layer: null,
	/**
	 * @constructor
	 * @param {LHS.MapImpl} Map - the map implementation
	 * @param {String} icon - the url to the icon used on the start point
	 * @param {String} colour - the colour to be used to the stroke and fill
	 * @param {Integer} width - the width of the stroke
	 * @param {String} title - the title of the layer of the stroke
	 */
	initialize: function (Map, options) {
		
		if (Map) {
			this.mapObj = Map;
			this.markers = [];
			this.options = Object.extend(Map.drawOptions, options);
			this.drawToolbar = new esri.toolbars.Draw(Map.map);
	        dojo.connect(this.drawToolbar, 'onDrawEnd', this.makePoint.bind(this));
	        this.drawToolbar.activate(this.shapeType);
			//this.mapObj.map.hideZoomSlider();                                             
			this.layer = [];
		}
	},
	/**
	 * Create a point for the shape here
	 * @param {VEEvent} event
	 */
	makePoint: function (geometry) {
		var symbol;
		if (this.options.marker && this.options.marker.endsWith('.png')) {
			var iconHref = this.options.marker;
			if (Prototype.Browser.IE && Prototype.Browser.version < 7) {
				iconHref = iconHref.substringBefore('.') + '.gif';
			}
			symbol = new esri.symbol.PictureMarkerSymbol(iconHref, 57, 53);
			symbol.yoffset = 18;
			symbol.xoffset = 9;
		} else {
			symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1), new dojo.Color([0, 255, 0, 0.25]));
		}
		
		if (this.markers.length < 1) {
			var graphic = new esri.Graphic(geometry, symbol);
	        this.mapObj.map.graphics.add(graphic);
			this.markers.push({x: geometry.x, y: geometry.y, spatialReference: this.mapObj.map.spatialReference});
	        this.shape = graphic;
		}
	},
	/**
	 * Remove the last drawn marker
	 */
	stepBack: function () {
		if (this.markers.length !== 0) {
			if (this.shape) {
				this.mapObj.map.graphics.remove(this.shape);
			}
			if (this.markers.length === 1 && this.startPoint) {
				this.mapObj.map.graphics.remove(this.startPoint);
			}
			this.markers.pop();
		}
	},
	/**
	 * Cancel the current shape completely
	 */
	clear: function () {
		this.mapObj.map.graphics.remove(this.shape);
		if (this.startPoint) {
			this.mapObj.map.graphics.remove(this.startPoint);
		}
		if (this.endPoint) {
			this.mapObj.map.graphics.remove(this.endPoint);
		}
		this.drawToolbar.deactivate();
	},
	/**
	 * Remove the endpoint marker, click event and return the KML
	 * @param {VEShapeLayer} outputLayer - the layer to add to new shape too
	 */
	finish: function () {
		this.drawToolbar.deactivate();
		var kml = this.serialize();
		if (this.mapObj.layers[this.options.layerId]) {
			this.mapObj.layers[this.options.layerId].push(this.shape);
		} else {
			this.mapObj.layers[this.options.layerId] = [];
			this.mapObj.layers[this.options.layerId].push(this.shape);
		}
		
		if (this.startPoint) {
			this.mapObj.map.graphics.remove(this.startPoint);
		}
		if (this.endPoint) {
			this.mapObj.map.graphics.remove(this.endPoint);
		}
		return kml;
	},
	/**
	 * Uses the collection of markers that have been created to produce the KML for the points
	 * @return {String|null} return the KML String or null if there are not sufficient markers 
	 */
	serialize: function () {
		if (this.markers.length === 0) {
			return null;
		}
		var kml = this.markers.collect(function (marker) {
			return '<Point xmlns="http://earth.google.com/kml/2.2"><coordinates>' + marker.x + ',' + marker.y + '</coordinates></Point>';
		});
		return kml.join('');
	}
});

/**
 * The Line Drawer extends the Point Drawer
 */
LHS.MapESRI.LineDrawer = Class.create();
LHS.MapESRI.LineDrawer.prototype = Object.extend(new LHS.MapESRI.PointDrawer(), {
	pointCount: 0,
	startPoint: null,
	editPoint: null,
	type: 'Polyline',
	makePoint: function (geometry) {
    	var point = {x: geometry.x, y: geometry.y, spatialReference: this.mapObj.map.spatialReference};
    	this.markers.push(point);
    	if (this.markers.length > 1) { 
        	this.redraw();
    	} else {
    		if (this.options.marker && this.options.marker.endsWith('.png')) {
				var iconHref = this.options.marker;
				if (Prototype.Browser.IE && Prototype.Browser.version < 7) {
					iconHref = iconHref.substringBefore('.') + '.gif';
				}
				symbol = new esri.symbol.PictureMarkerSymbol(iconHref, 57, 53);
				symbol.yoffset = 18;
				symbol.xoffset = 9;
			} else {
				symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1), new dojo.Color([0, 255, 0, 0.25]));
			}
			this.startPoint = new esri.Graphic(new esri.geometry.Point(point), symbol);
        	this.mapObj.map.graphics.add(this.startPoint);
    	}
	},
	redraw: function () {
		if (this.shape) {
			this.mapObj.map.graphics.remove(this.shape);
    	}
    	var iconHref = (Prototype.Browser.IE && Prototype.Browser.version < 7) ? $context + '/images/mapping/pencil.gif': $context + '/images/mapping/pencil.png';	
    	var editSymbol, editPoint;
    	var colour = (this.options.colour) ?  new dojo.Color('#' + this.options.colour) : new dojo.Color('#FF0000');
    	var width = (this.options.width) ?  this.options.width : 2;
    	var fillColour = (this.options.colour) ?  new dojo.Color('#' + this.options.colour) : new dojo.Color('#FF0000');
    	fillColour.a = 0.4;
    	
    	var lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, colour, width);
    	var polySymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, colour, width), fillColour);
    	
		var symbol = (this.type === 'Polyline') ? lineSymbol : polySymbol;
    	var geometry = new esri.geometry[this.type]();
    	var points = this.markers.collect(function (marker) {
    		return  new esri.geometry.Point(marker.x, marker.y);
    	});
    	if (this.type === 'Polyline') {
			geometry.addPath(points);
    	} else {
    		geometry.addRing(points);
    	}
		
		if (this.endPoint) {
			this.mapObj.map.graphics.remove(this.endPoint);
		}	
		editSymbol = new esri.symbol.PictureMarkerSymbol(iconHref, 40, 40);
		editSymbol.yoffset = 12;
		editSymbol.xoffset = 14;
		editPoint = this.markers.last();
		this.endPoint = new esri.Graphic(new esri.geometry.Point(editPoint), editSymbol);
    	this.mapObj.map.graphics.add(this.endPoint);
        	
		geometry.spatialReference = this.mapObj.map.spatialReference;
    	this.shape = new esri.Graphic(geometry, symbol);
    	this.mapObj.map.graphics.add(this.shape);
	},
	serialize: function () {
		if (this.markers.length <= 1) {
			return null;
		}
		
		var kml = this.markers.collect(function (marker) {
			return marker.x + ',' + marker.y + ',0.000000';
		});
		
		return '<LineString xmlns="http://earth.google.com/kml/2.2"><tessellate>1</tessellate><coordinates>' + kml.join(' ') + '</coordinates></LineString>';
	}
});

/**
 * The Polygon Drawer extends the Line Drawer
 */
LHS.MapESRI.PolygonDrawer = Class.create();
LHS.MapESRI.PolygonDrawer.prototype = Object.extend(new LHS.MapESRI.LineDrawer(), {
	type: 'Polygon',
	serialize: function () {
		if (this.markers.length <= 2) {
			return null;
		}
		
		var kml = this.markers.collect(function (marker) {
			return marker.x + ',' + marker.y + ',0.000000';
		});
		
		return '<Polygon xmlns="http://earth.google.com/kml/2.2"><outerBoundaryIs><LinearRing><tessellate>1</tessellate><coordinates>' + kml.join(' ') + '</coordinates></LinearRing></outerBoundaryIs></Polygon>';
	}
});