// jz GPoly Poly Canvas, jzLatLngCanvas, jzPolyline & jzPolygone
//uses jz
with(jzGMap){

$.toDivBoundsOn = function(llBounds,map) {
		return new GBounds([
			map.fromLatLngToDivPixel(llBounds.getSouthWest()),
			map.fromLatLngToDivPixel(llBounds.getNorthEast())
			])
		}

$.toLLBoundsOn = function(divBounds,map) {
		var b=new GLatLngBounds()
		b.extend(map.fromDivPixelToLatLng(divBounds.min()))
		b.extend(map.fromDivPixelToLatLng(divBounds.max()))
		return b
		}

$.LL = function(lat,lng){return new GLatLng(lat,lng) }
	

// jzRect this is based on (95% copy of)  Rectangle found at ... its the basis of all other classes
// A Rectangle is a simple overlay that outlines a lat/lng bounds on the
// map. It has a border of the given weight and color and can optionally
// have a semi-transparent background color.
$.Rectangle = Class(GOverlay,{
	//Default values
	weight	: 3,
	color	: 'yellow',
	background:'transparent',
	opacity	: 1.,
	currentZIndex:1000,

	//Class initializer
	jz_init	: function(bounds,style) { 
		this.bounds_ = bounds
		update(this,style)
		},

	// Creates the DIV representing this rectangle.called during addovelry
	initialize : function(map) {
		// Create the HTML elemnt representing overlay
		this.map_ = map;
		this.initHTML()
		div = this.div_;
		
		// Our rectangle is flat against the map, so we add our selves to the
		// MAP_PANE pane, which is at the same z-index as the map itself (i.e.,
		// below the marker shadows)
		map.getPane(G_MAP_MARKER_PANE).appendChild(div);
		if (this._jzSetZ) {
			div.style.zIndex=this._jzSetZ
			}
		else div.style.zIndex=GOverlay.getZIndex(this.bounds_.getNorthEast().lat())
		//div.onclick="alert('goa click')"
		
		},
	
	initHTML : function(){ 
		var div=this.div_=document.createElement("div")
		//Log('In initHTML doc='+document)
		//Log('In initHTML created:'+this.div_.outerHTML)
		
		div.style.border = this.weight + "px solid " + this.color;
		if (this.background) div.style.backgroundColor = this.background
		if (this.opacity) div.style.MozOpacity = div.style.khtmlOpacity = this.opacity
		div.style.position = "absolute";
		},

	setSize	: function(width,height){
		if (width) this.div_.style.width=width+'px'
		if (height) this.div_.style.height=height+'px'
		},

	setPosition : function(x,y,z){ //of top left coner
		if (x || x===0. ) this.div_.style.left=x+'px'
		if (y || y===0. ) this.div_.style.top=y+'px'
		if (z || z===0. ) this.div_.style.zIndex=z
		},

	// Remove the main DIV from the map pane
	remove	: function() {
		if (!this.div_) return
		this.div_.parentNode.removeChild(this.div_);
		this.map_=this.div_=null
		},
		
		
	// Redraw the rectangle based on the current projection and zoom level
	redraw : function(force) {
		// We only need to redraw if the coordinate system has changed
		if (!force) return;
		if (!this.div_) return
		
		// Calculate the DIV coordinates of two opposite corners of our bounds to
		// get the size and position of our rectangle
		var divRect = toDivBoundsOn(this.bounds_,this.map_)
		
		// Now position our DIV based on the DIV coordinates of our bounds
		//var w=this.weight
		//this.setSize((2*w)+divRect.maxX-divRect.minX,(2*w)+divRect.maxY-divRect.minY)
		//this.setPosition(divRect.minX - w, divRect.minY - w)
		this.setSize(divRect.maxX-divRect.minX,divRect.maxY-divRect.minY)
		this.setPosition(divRect.minX, divRect.minY)
		},
					
		//Get bounds of rectangle (read only)
	getBounds : function (){return this.bounds_}, // { return newBounds(this.bounds_) }
		
	removeable : function (){return false}
	
	})//End of class Rectangle

//Canvas class 
$.Canvas = Class(Rectangle,{
	//a Canvas on a map ... simple but a few gotchya's (not sure of spelling there ... ;-)
	// 1) exCanvas (IE OSS implementation of Canvas) does not clip so div overflow hidden is used to do that
	// 2) Canvas in Moz cant be resized! We have to recreate it, so its put in a div to keep a handle on something ... 

	initHTML : function(){
		Rectangle.prototype.initHTML.call(this)
		//this.div_.style.overflow='hidden' //Clip IE, 
		var canvas=document.createElement("canvas")
		update(canvas.style,{border:'0px', margin:'0px', padding:'0px', overflow:'hidden'})
		update(this.div_.style,{border:'0px', margin:'0px', padding:'0px', overflow:'hidden'})
		
		this.canvas_=canvas=this.div_.appendChild(canvas)
		if (IE) this.canvas_=canvas=G_vmlCanvasManager.initElement(canvas)
		},
	
	setSize	: function(width,height){
		Rectangle.prototype.setSize.call(this,width,height)
		var canvas=this.canvas_
		if (!canvas) return
		if (width) canvas.width=width
		if (height) canvas.height=height
		if (IE) {
			canvas.style.width=width+'px'
			canvas.style.height=height+'px'
			}
		},

	getContext : function(ctxType){
		if (!this.canvas_ || !this.canvas_.getContext) return 
		if (!ctxType) ctxType='2d'
		return this.canvas_.getContext(ctxType)
		}
	})

$.Polyline = Class(Canvas,{

	weight	: 1,
	color	: 'blue',
	background:'transparent',
	opacity	: 1.,
	currentZIndex:1000,

	jz_init	: function(llList,lineStyle){
		this.llList=llList
		update(this,lineStyle)
		var bounds=this.bounds_=new GLatLngBounds()
		//Log('In poly initbefore bounds build')
		dof(llList,function(pt){bounds.extend(pt)})
		//Log('bounds = '+this.bounds_)
		},

	redraw : function(force) {
		//Log('in redraw canavs='+this.canvas_)
		// Do a super for this
		// We only need to redraw if the coordinate system has changed
		Rectangle.prototype.redraw.call(this,force)
		if (!this.canvas_) return
		if (!force) return;
		var map=this.map_

		//OK now redraw the polyline
		//Log('before get context')
		var ctx=this.getContext()
		if (!ctx) return
		ctx.save()
		ctx.clearRect(0,0,this.canvas_.width,this.canvas_.height)
		var org = map.fromLatLngToDivPixel(LL(this.bounds_.getNorthEast().lat(),this.bounds_.getSouthWest().lng()));
		//Log('org is'+org)
		ctx.translate(-org.x,-org.y)
		this.drawOn(ctx,org)
		ctx.restore()
		},


	drawOn : function(ctx,org){
		///Log('drawing '+this.llList.length+' lines')
		var t=new Date()
		var llList=this.llList
		if (!llList || llList.length < 1) return
		var map=this.map_
		ctx.beginPath()
		var xy=map.fromLatLngToDivPixel(this.llList[0])
		ctx.moveTo(xy.x,xy.y)
		ctx.miterLimit=2
		
		dof(llList,function(pt){
			var xy=map.fromLatLngToDivPixel(pt)
			ctx.lineTo(xy.x, xy.y)
			})
		ctx.lineWidth=this.weight
		ctx.strokeStyle=this.color
		ctx.stroke()
		t=(new Date())-t
		//Log('Finished drawing in '+t+'ms, '+(t/this.llList.length)+'ms per line')
		}
	})

$.Circle = Class(Canvas,{

	weight	: 1,
	color	: 'black',
	fillColor : 'rgba(0,0,255,0.3)',
	background:'transparent',
	opacity	: 1,
	currentZIndex:1000,

	jz_init	: function(center,radious,style){
		this.center=center
		this.radious=radious
		var bounds=this.bounds_=  new GLatLngBounds( 
			LL(center.lat()-radious, center.lng()-radious), //North west
			LL(center.lat()+radious, center.lng()+radious)  //South east
			)
		//becarefull this is not a square!!..because of projection distortion...
		//Set bounds to remain 'compatible' with rectangle and other descending classes in general
		//But radious can represent 3 diffrent pixel values: center to top, center to left or right and center to bootom
		// are 3 diffrent values .... again du to merantil projection...
		update(this,style)
		//Log('bounds = '+this.bounds_)
		},

	redraw : function(force) {
		//Log('in redraw canavs='+this.canvas_)
		// Do a super for this
		// We only need to redraw if the coordinate system has changed
		Rectangle.prototype.redraw.call(this,force)
		if (!this.canvas_) return
		if (!force) return;
		var map=this.map_

		//OK now redraw the polyline
		//Log('before get context')
		var ctx=this.getContext()
		if (!ctx) return
		ctx.save()
		ctx.clearRect(0,0,this.canvas_.width,this.canvas_.height)
		var org = map.fromLatLngToDivPixel(LL(this.bounds_.getNorthEast().lat(),this.bounds_.getSouthWest().lng()))
		var xtent = map.fromLatLngToDivPixel(LL(this.bounds_.getSouthWest().lat(),this.bounds_.getNorthEast().lng()))
		var center = map.fromLatLngToDivPixel(this.center)
		//Log('org is '+org+' xtent='+xtent+' center='+center)
		ctx.translate(-org.x,-org.y)
		radious=Math.min((center.x-org.x),(center.y-org.y),(xtent.x-center.x),(xtent.y-center.y))
		//ctx.scale(radious,radious)
		ctx.beginPath()
		ctx.moveTo(center.x+radious,center.y)
		ctx.arc(center.x,center.y,radious,0,Math.PI*2,false) // Outer circle
		if (this.fillColor) {
			ctx.fillStyle=this.fillColor
			ctx.fill()
			}
		if (this.weight && this.color) {
			ctx.lineWidth=this.weight
			ctx.strokeStyle=this.color
			ctx.stroke()
			}
		ctx.restore()
		},


	drawOn : function(ctx,org){
		//all drawing done in redraw...
		}
	})

//Log('loaded GPoly')
} //close the withs