Palet.Polygon=Palet.Search.extend({

	loadContent:function()
	{
	var me=this;
	me.lineType=Palet.Polygon.POLY; //type of line this Palet is currently producing
	me.lastLine=null;	//last created to prevent multiple lines from being edit-able

	/* polygon palet uses the same stage as the marker palet*/
	me.loadStage("Create a Shape:: drag the shape onto the map to create a new polygon line or route");

	/* loads polygon options, type style opacity etc*/
	me.loadControls();
	},
	loadControls:function(){
		var me=this;

		/* updateLineType function is attached to radio button elements below
		 * and executed on click events
		 */
		function updateLineType(){
			if(me.lineType!=this.value) //'this' refers to the input radio button element
			{
				mm_debug("update lineType");
				me.lineType=this.value;	//change the type variable and
				me.setStage();			//then redraw the stage
			}
		}

		/*Accordion handle and Body*/
		var handles=[];
		var contents=[];
		
		var typeTitle=Palet.accordionTitle();
		var typeBody=Palet.accordionBody();

		typeTitle.innerHTML="Line Types";	//Types Title

		/*radio button polygon*/
		var poly=new Element('input',{type:'radio',name:"lineType",value:Palet.Polygon.POLY, checked:"true"});
		poly.addEvent('click',updateLineType);	//attach click function
		typeBody.appendChild(poly);			//add radio button
		/*radio button label*/
		var polyTitle=new Element('span');		//span is an in-line element
		polyTitle.setText(":polygon");
		typeBody.appendChild(polyTitle);		//add label 

		/*force newline*/
		typeBody.appendChild(new Element('br'));	

		/*radio button line*/
		var line=new Element('input',{type:'radio',name:"lineType",value:Palet.Polygon.LINE});
		line.addEvent('click',updateLineType);	
		//line.setText(":line");
		typeBody.appendChild(line);
		var lineTitle=new Element('span');

		lineTitle.innerHTML=":line";
		typeBody.appendChild(lineTitle);

		/*add first section*/
		me.menu.content.appendChild(typeTitle);
		me.menu.content.appendChild(typeBody);
		handles.push(typeTitle);
		contents.push(typeBody);

		/*style section (color thickness opacity)*/
		var styleTitle=Palet.accordionTitle();
		var styleBody=Palet.accordionBody();



		//SLIDER


		styleBody.appendChild(Slider.Make({width:120,onComplete:function(a){
			me.lineOptions.lineOpacity=a;
			me.setStage();
		}}));
		styleBody.appendChild(Slider.Make({width:120,onComplete:function(a){
			me.lineOptions.polyOpacity=a;
			me.setStage();	
		}}));
		styleTitle.innerHTML="Line Style";

		me.menu.content.appendChild(styleTitle);
		me.menu.content.appendChild(styleBody);
		handles.push(styleTitle);
		contents.push(styleBody);
		



		//SLIDER

		me.createAccordion(handles,contents);


		//<input type="radio" name="group1" value="Butter" checked> Butter<br>
		//<input type="radio" name="group1" value="Cheese"> 
		//me.menu.content.
	},
	loadStage:function(tip){

		var me=this;//abstract self

		me.lineOptions={
				lineColor:"#000000",
				lineWidth:1,
				lineOpacity:0.7,
				polyColor:"#FFFFFF",
				polyOpacity:0.7
		};
		//me.lineType=Palet.Polygon.POLY; //already done


		/*
		 * stageWrapper is the element container for the active marker icon image
		 */
		var stageWrapper=new Element('div',{title:tip,'class':"menuMarkerStageWrapper"});
		new mediaTips(stageWrapper);

		/*actual stage, attached to this (me) instance*/
		me.stage=new Element('div',{'class':"menuMarkerStage"});
		me.previewElement=new Element('div',{ 'class':"menuMarkerStageImg",styles:{width:"32px", height:"32px"}});
		me.previewElement.style.cursor="pointer";	//default cursor over the map
		//me.previewElement.style.left="34px";
		//me.previewElement.style.top="19px";	
		me.setStage();

		me.stage.appendChild(me.previewElement);
		stageWrapper.appendChild(me.stage);
		me.menu.content.appendChild(stageWrapper);

		var map=me.mediaMap.mainMap;	//need the map instance to add a new marker
		me.previewElement.style.cursor="-moz-grab";	//mouse pointer is a grabbing  hand over the image
		/*
		 * drop function: 
		 * executed on mouse up, (after dragging). It is attached to the mouseup
		 * map element event, below.
		 */
		var drop=function(event){
			/*remove self from event listener*/
			map.getContainer().removeEvent('mouseup', drop);			
			/*
			 * fade an new image into the stage
			 */
			me.previewElement.style.opacity='0';
			me.previewElement.style.left="0px";
			me.previewElement.style.top="0px";		
			new Fx.Style(me.previewElement, 'opacity', {duration:500}).start(0,me.lineOptions.lineOpacity);
			/*
			 * calculate the coordinates of the icon drop, from pixel to latLng
			 * using google api methods.
			 */
			/*pixel locations*/
			/**************
			 * IE FIX  
			 * IE doesn't provide pageX pageY so these are not available use clientX-Y
			 * This solution seems to work well. note also used in marker drop (way up)
			 */
			var x=(event.pageX||event.clientX)-me.mediaMap.element.offsetLeft;
			var y=(event.pageY||event.clientY)-me.mediaMap.element.offsetTop;

			var w=me.previewElement.offsetWidth;
			var h=me.previewElement.offsetHeight;
			/*lat lng locations*/
			me.addLine([x,y,w,h],me.options.tags);
		};
		/*
		 * make the icon image drag-able
		 */
		me.previewElement.makeDraggable({
			handle:me.previewElement,
			onStart:function()
			{
			me.mediaMap.menuOrderer.fadeOut();	//fades all controls out while placing
			/*attach drop function to map element*/
			me.mediaMap.element.addEvent('mouseup', drop);
			me.previewElement.style.cursor="-moz-grabbing";
			},
			onComplete: function(el){ 	//el -> drag-able element (argument not used)
				me.mediaMap.menuOrderer.fadeIn();	//fades all controls back in
				me.previewElement.style.cursor="-moz-grab";	//default cursor over the map
			}
		});
		this.previewElement.setStyle('position','relative'); //chrome opera fix 
	},
	/**
	 * creates a line on the map given the relative pixel coordinates and dimensions.
	 * pixels should be of the form [x,y,w,h] - of the dropped element
	 */
	addLine:function(pixels,tags){
		var me=this;
		var map=me.mediaMap.mainMap;
		var coords=[];
		var center=null;
		if(me.lineType==Palet.Polygon.POLY)	
		{
			/*add a complete square*/
			coords.push(map.fromContainerPixelToLatLng(new GPoint(pixels[0],pixels[1])));
			coords.push(map.fromContainerPixelToLatLng(new GPoint(pixels[0]+pixels[2],pixels[1])));
			coords.push(map.fromContainerPixelToLatLng(new GPoint(pixels[0]+pixels[2],pixels[1]+pixels[3])));
			coords.push(map.fromContainerPixelToLatLng(new GPoint(pixels[0],pixels[1]+pixels[3])));
			coords.push(map.fromContainerPixelToLatLng(new GPoint(pixels[0],pixels[1])));


		}
		else if(me.lineType==Palet.Polygon.LINE||me.lineType==Palet.Polygon.ROUTE)
		{
			/*add a line*/
			coords.push(map.fromContainerPixelToLatLng(new GPoint(pixels[0],pixels[1]+(pixels[3]/2))));
			coords.push(map.fromContainerPixelToLatLng(new GPoint(pixels[0]+pixels[2],pixels[1]+(pixels[3]/2))));

		}
		
		if(me.lineType=="polygon"){
		var wrapper=new GeolivePolygon(MapFactory.CreateShape(coords,me.lineType,me.lineOptions),me.mediaMap.layerManager.activeLayer);
		}
		else{
		var wrapper=new GeoliveLine(MapFactory.CreateShape(coords,me.lineType,me.lineOptions),me.mediaMap.layerManager.activeLayer);

		}
		mm_debug(wrapper);
		wrapper.change="new"; 	//tags marker as unsaved, and allows user edit access without asking server
		wrapper.type=me.lineType;

		if(tags){
			$each(tags,function(v,k){
				t={};
				t[k]=v;
				MapFactory.SetTag(wrapper, t);
			});
		}
		MapFactory.GetGMap(wrapper).addOverlay(wrapper.item);
		MapFactory.EnableMouseEditing(wrapper);
		me.disableEditOnLastShape(wrapper);	
		//open infowindow viewer in the center of the item.
		me.mediaMap.infoWindowViewer.open(
				new PageModule(me.mediaMap, wrapper.item,{page:'edit'}),
				map.fromContainerPixelToLatLng(new GPoint(pixels[0]+pixels[2]/2, pixels[1]+pixels[3]/2)));
		/*add marker to layer,  detects layer change*/ 

		wrapper.name="New "+MapFactory.ItemDisplayType(wrapper);
		wrapper.description="Empty "+MapFactory.ItemDisplayType(wrapper)+" Description";
		//wrapper.line

		var transform=function(style){
			data={};
			data.lineColor=SimpleParser.KMLConversions.RGBColorToKML(style.lineColor, style.lineOpacity);
			data.polyColor=SimpleParser.KMLConversions.RGBColorToKML(style.polyColor, style.polyOpacity);
			data.lineWidth=style.lineWidth;
			data.outline=true;

			return data;
		};

		$each(transform(me.lineOptions),function(v,k){
			wrapper[k]=v;
		});

		me.mediaMap.layerManager.activeLayer.addShape(wrapper);
		me.mediaMap.infoWindowViewer.initializePolygon(wrapper.item);
	},
	disableEditOnLastShape:function(newShape){
		var me=this;
		if(me.lastLine)
		{
			MapFactory.DisableMouseEditing(me.lastLine);
		}
		me.lastLine=newShape;
	},
	setStage:function()
	{
		var me=this;
		me.previewElement.setStyle('opacity',me.lineOptions.opacity);
		if(me.lineType==Palet.Polygon.POLY)
		{
			me.previewElement.setStyle('backgroundColor',me.lineOptions.polyColor);
			me.previewElement.setStyle('border',"solid");
			me.previewElement.setStyle('marginTop',"");
		}
		else if(me.lineType==Palet.Polygon.LINE||me.lineType==Palet.Polygon.ROUTE)
		{		
			me.previewElement.setStyle('backgroundColor',"");
			me.previewElement.setStyle('border',"none");
			me.previewElement.setStyle('borderTop',"solid");
			me.previewElement.setStyle('marginTop',"17px");
		}
		me.previewElement.setStyle('borderColor',me.lineOptions.lineColor);
		me.previewElement.setStyle('borderWidth',me.lineOptions.lineWidth+"px");
	}
});
//convenience variable
var PolygonPalet=Palet.Polygon;
/**
 * Definitions of line types that Palet.Polygon creates
 */
Palet.Polygon.POLY='polygon';
Palet.Polygon.LINE='line';
Palet.Polygon.ROUTE='route';