/**
 * Palet.Marker extends Palet.Search, however it currently does not use the 
 * search function.
 */
Palet.Marker=Palet.Search.extend({
	/**
	 * loadStage: called by loadContent. creates the 
	 * marker stage area for dragging new markers onto the 
	 * map
	 * tip: the text string to use as the tool tip
	 */
	loadStage:function(tip){
	var me=this;//abstract self
	me.image=me.options.defaultIcon;

	/*
	 * 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"});
	this.imageElement=new Element('img',{ 'class':"menuMarkerStageImg",
		src:me.image
	});

	me.stage.appendChild(this.imageElement);
	stageWrapper.appendChild(me.stage);
	me.menu.content.appendChild(stageWrapper);

	/*
	 * HTML structure of the stage is now inserted into the menu.
	 * the following configures the drag and drop functionality.
	 */
	var map=me.mediaMap.mainMap;	//need the map instance to add a new marker
	me.imageElement.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.imageElement.style.opacity='0';
		me.imageElement.style.left="0px";
		me.imageElement.style.top="0px";	
		new Fx.Style(me.imageElement, 'opacity', {duration:500}).start(0,1);
		/*
		 * calculate the coordinates of the icon drop, from pixel to latLng
		 * using google api methods.
		 */
		/*pixel location*/
		/**************
		 * IE FIX 
		 * IE doesn't provide pageX pageY so these are not available use clientX-Y
		 * This solution seems to work well.
		 */
		var x=(event.pageX||event.clientX)-me.mediaMap.element.offsetLeft;
		var y=((event.pageY||event.clientY)-me.mediaMap.element.offsetTop)+me.imageElement.height/2;
		/*lat lng location*/
		var latLng=map.fromContainerPixelToLatLng(new GPoint(x,y));
		me.addMarker(latLng,me.options.tags);
	};
	/*
	 * make the icon image drag-able
	 */
	this.imageElement.makeDraggable({
		handle:me.imageElement,
		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.imageElement.style.cursor="-moz-grabbing";
		//me.imageElement.style.opacity="0.5"
		},
		onComplete: function(el) 	//el -> drag-able element (not used)
		{
			me.mediaMap.menuOrderer.fadeIn();	//fades all controls back in
			me.imageElement.style.cursor="-moz-grab";	//default cursor over the map
		}
	});
	this.imageElement.setStyle('position','relative'); //chrome opera fix
},
/**
 * addmarker - called on drag end and on 'place' button click (if given a valid address)
 */
addMarker:function(latLng,tags){
	/*
	 * TODO: Implement a Sanity Check: ensure that drop event was within map, right now dropping a marker
	 * 		 outside of the map will just place a marker on the map out of sight
	 * 		 easy to check is latLng is within map.getBounds()..
	 */
	/*add marker to map and initialize*/
	var me=this;

	mm_debug("add marker start");
	MapFactory.CreateMarker({
		coordinates:latLng,
		icon:me.imageElement.src,
		name:'new empty marker',
		description:'' //must not be null or will query server on open
	}, function(marker){

		mm_debug("add Marker");
		var geoliveMarker=new GeoliveMarker(marker, MapFactory.GetLMan(me.mediaMap).activeLayer);
		geoliveMarker.change="new"; 	//tags marker as unsaved, and allows user edit access without asking server
		if(tags)
		{
			geoliveMarker.tags=tags;
		}

		me.mediaMap.markerManager.addMarker(geoliveMarker.item,0);
		geoliveMarker.latLng=geoliveMarker.item.getLatLng();
		MapFactory.SetMarkerDragEvents(geoliveMarker);
		
		me.mediaMap.infoWindowViewer.open(
				new CustomPageModule(me.mediaMap, geoliveMarker, PageFactory.getEditModules(me.mediaMap, geoliveMarker, {}), {}), geoliveMarker);

		//me.mediaMap.squeezeViewer.open(
				//new CustomPageModule(me.mediaMap, marker, PageFactory.getWizardEditModules(me.mediaMap, marker, {template:'squeeze'}), {template:'squeeze'}));
		
		//(new EditInfoContent()).openInfoWindow(markerContainer);
		/*add marker to layer*/
		me.mediaMap.layerManager.activeLayer.addMarker(geoliveMarker);

	});

	mm_debug("add marker initiated");

},
/**
 * loadGeocoder - called by loadContent. loads
 * input area for address placement
 * tip: the tool tip text for the geocode area
 */
loadGeocoder:function(){
	var me=this;
	var search=me.createSearchbox({
		tip:"Find Location::enter the address for a location on the map to place a marker more acurately",
		columns:"17"
	}); //object containing elements: container-div, textarea-element, TextAreaMessage, and GeoCoder

	me.attachFind(search);
	me.attachPlace(search);

},
attachPlace:function(search){
	var me=this;
	var place=new Element('button',{'class':"paletButton"});
	place.innerHTML="place";
	place.addEvent('click',function(){
		search.geo.getLatLng(search.el.value, function(latlng){
			if(latlng&&search.msg.verify())
				me.addMarker(latlng, me.options.tags);
		});
	});
	search.cntnr.appendChild(place);
},
/**
 * loadIcons -  called by loadContent. loads
 * the icon select menus
 */
loadIcons:function(){
	var me=this;
	var result={titleElements:[], contentElements:[],elementTree:new Element('div')};

	$each(me.options.iconSets,function(set){
		var title=Palet.accordionTitle();	
		var content=Palet.accordionBody();
		title.innerHTML=set.options.title;
		var tbl=set.toTable(
				{
					/*
					 * the default click function for the toTable method is empty.
					 * all others are set properly (since only styles change), but 
					 * this function needs access 'this' or 'me' since it is abstracted above
					 */
					click:function(icon){
					if(me.image!=icon.src)
					{
						me.setStage(icon.src);
					}
				}	
				});
		content.appendChild(tbl);
		result.titleElements.push(title);
		result.contentElements.push(content);
		result.elementTree.appendChild(title);
		result.elementTree.appendChild(content);

		/*
		 * if no default icon has been set then use the first icon
		 */
		if(!me.options.defaultIcon)
		{
			me.options.defaultIcon=set.icons[0];
			me.setStage(set.icons[0]);
		}

	});


	/*
	 *	don't show icon choices if there are no sets, or one set with only one icon 
	 */
	if(!(!me.options.iconSets||
			me.options.iconSets.length==0||
			me.options.iconSets.length==1&&me.options.iconSets[0].icons.length<=1))
	{			

		me.createAccordion(result.titleElements,result.contentElements);
		me.contents=result;	
		me.menu.content.appendChild(me.contents.elementTree);
	}

},
/**
 * loadContent called by constructor to create menu content
 */
loadContent:function()
{
	this.loadStage("Place A Marker::click down on the image in this box and drag it onto the map to create a new placemark at that point");
	//this.loadGeocoder(); /* removed as per request*/
	this.loadIcons();
},
/**
 * default options for creating iconTables. note that the click function 
 * is added to this list in the loadStage method since it relies on this instances 'menu' item to be set.
 */
iconOptions:{},
setStage:function(url){
	var me=this;
	me.image=url;
	me.imageElement.style.opacity='0';
	me.imageElement.src=url;
	new Fx.Style(me.imageElement, 'opacity', {duration:500}).start(0,1);

}
});
//convenience variable
var MarkerPalet=Palet.Marker;