/**
 * The Palet class is the base class for all of the palets used by 
 * Geolive. It is a container class for a Custom Google Maps control called 
 * a menuControl and it is defined in MediaMenuControls.js. 
 * the menuControl is simply a draggable box that can snap/stick to the parent container 
 * (the map borders) as well as the window. it is drawn completely with css styles.
 * 
 * the content and title of a menuControl are filled by thes Palets, and
 * and the Palet Class functions are the most important to understand.
 * the Palet is built on first open 
 */
var Palet=new Class({
	options:
	{
	title:"Window" /*title is always overridden by caller*/
	},
	initialize:function(mediaMap, options){
		this.mediaMap=mediaMap;
		this.setOptions(options);
		this.state="closed";
		//tiler will place the palet on the screen in a position that 
		//does not cover other palets. 
		if(mediaMap.tiler)
			mediaMap.tiler.addPalet(this);
	},
	content:new Element('div',{'class':"mediaPalet"}),

	/**
	 * open method draws the palet to the screen, it gets it location from 
	 * the tiler object if it exists
	 */
	open:function(){
		var me=this;	//abstract self 
		if(!me.menu)	//if now menuControl has not previously been created, then create it.
		{
			me.menu=new menuControl({container:me.mediaMap.element});
			me.menu.closeButton.addEvent('click',function(){me.fireEvent('onClose');});
			me.mediaMap.menuOrderer.addItem(me.menu.container);
			me.menu.content.innerHTML=""; //must be cleared because it is set to 'hello world' by default		
			me.menu.title.innerHTML=me.options.title;	//set title bar		
			//add event listener for this palets state
			me.addEvent('onOpen',function(){me.state="open";});
			me.addEvent('onClose',function(){me.state="closed";});			
			/*
			 * the following call to loadContent is expected to 
			 * be overridden by implementor. 
			 */
			me.loadContent(); //eg. MarkerPalet adds it's stage and icon selection accordion here
			me.fireEvent('onLoad');
		}
		else
		{
			me.mediaMap.menuOrderer.front(me.menu.container); //make sure that this window goes to the front (z-index)
		}
		me.mediaMap.mainMap.addControl(me.menu, me.mediaMap.tiler.getPosition(me));	//add the control back to the map. regardless of whether it is already on the map, GMap checks!
		me.menu.reset();								//clears any glue
		me.fireEvent('onOpen');
		if(me.mediaMap.fullscreen)
			me.mediaMap.fullscreen.addEvent("onResize",me.menu.checkBounds); //glues if necessary
	},
	isOpen:function(){return this.state=="open";},
	loadContent:function(){/* override this function*/},
	/**
	 * creates an accordion element which updates this menu's glue on changes
	 * this method is a helper method for the palets that extend this class
	 */
	createAccordion:function(handles, contents){
		var me=this;
		/*
		 * the following transition creates an elastic effect to the accordion
		 * var myTransition = new Fx.Transition(Fx.Transitions.Elastic, 10);
		 */
		var a=new Accordion(handles, contents,{
			show:0
			/*, 
			 *transition: myTransition.easeOut //add elastic effect
			 */
		});
		a.addEvent('onComplete',function(){
			me.menu.checkBounds();	//updates the glue
		});
		return a;
	},
	createMultiAccordion:function(handles, contents, options){
		var me=this;
		var config=$merge({show:0,alwaysHide:true,multiExpand:true}, options||{});
		var a=new MultiAccordion(handles, contents, config);
		a.addEvent('onComplete',function(){
			me.menu.checkBounds();	//updates the glue
		});
		return a;


	}

});
Palet.implement(new Events(), new Options());
/*
 * Palet Static methods 
 */
Palet.accordionTitle=function(){
	return new Element('span',{'class':"paletAccordionTitle"});
};
Palet.Span=function(el){
	var span=new Element('span');
	span.appendChild(el);
	return span;
};
Palet.accordionBody=function(){
	return new Element('div',{'class':"paletAccordionBody"});
};

var MultiAccordion = Accordion.extend({
	display: function(index)
	{
	index = ($type(index) == 'element') ? this.elements.indexOf(index) : index;
	if ((this.timer && this.options.wait) || (index === this.previous && !this.options.alwaysHide)) return this;
	this.previous = index;
	var obj = {};
	if(this.options.multiExpand&&index>=0){
		obj[index]={};
		var el=this.elements[index];
		var hide =(this.options.alwaysHide && (el.offsetHeight > 0));
		for (var fx in this.effects) obj[index][fx] = hide ? 0 : el[this.effects[fx]];
	}else{
		this.elements.each(function(el, i){
			obj[i] = {};
			var hide = (i != index) || (this.options.alwaysHide && (el.offsetHeight > 0));
			this.fireEvent(hide ? 'onBackground' : 'onActive', [this.togglers[i], el]);
			for (var fx in this.effects) obj[i][fx] = hide ? 0 : el[this.effects[fx]];
		}, this);
	}
	return this.start(obj);
	},
	//displayOnly executes the default Accordion display behaviour
	displayOnly: function(index){ 
		
		index = ($type(index) == 'element') ? this.elements.indexOf(index) : index;
		if ((this.timer && this.options.wait) || (index === this.previous)) return this;
		this.previous = index;
		var obj = {};
		this.elements.each(function(el, i){
			obj[i] = {};
			var hide = (i != index);
			this.fireEvent(hide ? 'onBackground' : 'onActive', [this.togglers[i], el]);
			for (var fx in this.effects) obj[i][fx] = hide ? 0 : el[this.effects[fx]];
		}, this);
		return this.start(obj);
	}
});