/**
 * menuControl is a custom GoogleMap Control that creates a drag-able window.
 */
function menuControl(options){
	//mm_debug("options.container");
	//mm_debug(options.container);
	if(BrowserDetect.browser=="Explorer")
	{
		this.container=$(document.createElement('table'));
		var t=$(this.container.insertRow());
		var tl=$(t.insertCell());
		var tm=$(t.insertCell());
		var tr=$(t.insertCell());
		var m=$(this.container.insertRow());
		var ml=$(m.insertCell());
		var mm=$(m.insertCell());
		var mr=$(m.insertCell());
		var b=$(this.container.insertRow());
		var bl=$(b.insertCell());
		var bm=$(b.insertCell());
		var br=$(b.insertCell());
	}else{
		this.container=new Element('table');
		var t=new Element('tr');
		var tl=new Element('td');
		var tm=new Element('td');
		var tr=new Element('td');
		var m=new Element('tr');
		var ml=new Element('td');
		var mm=new Element('td');
		var mr=new Element('td');
		var b=new Element('tr');
		var bl=new Element('td');
		var bm=new Element('td');
		var br=new Element('td');

		this.container.appendChild(t);
		t.appendChild(tl);
		t.appendChild(tm);
		t.appendChild(tr);
		this.container.appendChild(m);
		m.appendChild(ml);
		m.appendChild(mm);
		m.appendChild(mr);
		this.container.appendChild(b);
		b.appendChild(bl);
		b.appendChild(bm);
		b.appendChild(br);
	}


	this.container.addClass("menuContainer");
	t.addClass("menuTop");
	m.addClass("menuMiddle");
	b.addClass("menuBottom");

	this.title=new Element('div',{'class':"menuTitle"});
	tm.appendChild(this.title);

	this.content=mm;



	var myState;
	this.reset=function(){
		tl.className="";
		tl.addClass("menuTopLeft");

		tm.className="";
		tm.addClass("menuTopMiddle");

		tr.className="";
		tr.addClass("menuTopRight");

		ml.className="";
		ml.addClass("menuMiddleLeft");

		mm.className="";
		mm.addClass("menuMiddleMiddle");

		mr.className="";
		mr.addClass("menuMiddleRight");


		bl.className="";
		bl.addClass("menuBottomLeft");

		bm.className="";
		bm.addClass("menuBottomMiddle");

		br.className="";
		br.addClass("menuBottomRight");

		myState={left:false,right:false,top:false,bottom:false,tl:false,tr:false,bl:false,br:false};
	};
	this.reset();


	var c=this.container;



	/**
	 * adds and removes class names to all elements when the box transistions from a snapped edge or to a snapped edge
	 * 
	 * @param state 
	 */
	var glue=function(state){


		/*
		 * Glue left
		 */
		if(state.left&&!myState.left)
		{		
			tl.addClass("menuTopLeft_gl");
			ml.addClass("menuMiddleLeft_gl");
			bl.addClass("menuBottomLeft_gl");
			tl.removeClass("menuTopLeft");
			ml.removeClass("menuMiddleLeft");
			bl.removeClass("menuBottomLeft");
			myState.left=true;

			mm_debug('glue left');
		}else if(!state.left&&myState.left){

			if(!myState.tl)
				tl.addClass("menuTopLeft");
			ml.addClass("menuMiddleLeft");
			if(!myState.bl)
				bl.addClass("menuBottomLeft");
			tl.removeClass("menuTopLeft_gl");
			ml.removeClass("menuMiddleLeft_gl");
			bl.removeClass("menuBottomLeft_gl");
			myState.left=false;
			mm_debug('rip left');
		}

		/*
		 * Glue top
		 */
		if(state.top&&!myState.top)
		{	
			tl.addClass("menuTopLeft_gt");
			tm.addClass("menuTopMiddle_gt");
			tr.addClass("menuTopRight_gt");
			tl.removeClass("menuTopLeft");
			tm.removeClass("menuTopMiddle");
			tr.removeClass("menuTopRight");
			myState.top=true;

			mm_debug('glue top');
		}else if(!state.top&&myState.top){

			if(!myState.tl)
				tl.addClass("menuTopLeft");
			tm.addClass("menuTopMiddle");
			if(!myState.tr)
				tr.addClass("menuTopRight");
			tl.removeClass("menuTopLeft_gt");
			tm.removeClass("menuTopMiddle_gt");
			tr.removeClass("menuTopRight_gt");
			myState.top=false;
			mm_debug('rip top');
		}

		/*
		 * Glue bottom
		 */
		if(state.bottom&&!myState.bottom)
		{	

			bl.addClass("menuBottomLeft_gb");
			bm.addClass("menuBottomMiddle_gb");
			br.addClass("menuBottomRight_gb");
			bl.removeClass("menuBottomLeft");
			bm.removeClass("menuBottomMiddle");
			br.removeClass("menuBottomRight");
			myState.bottom=true;

			mm_debug('glue bottom');
		}else if(!state.bottom&&myState.bottom){
			if(!myState.bl)
				bl.addClass("menuBottomLeft");
			bm.addClass("menuBottomMiddle");
			if(!myState.br)
				br.addClass("menuBottomRight");
			bl.removeClass("menuBottomLeft_gb");
			bm.removeClass("menuBottomMiddle_gb");
			br.removeClass("menuBottomRight_gb");
			myState.bottom=false;
			mm_debug('rip bottom');
		}

		/*
		 * Glue right
		 */
		if(state.right&&!myState.right)
		{	
			tr.addClass("menuTopRight_gr");
			mr.addClass("menuMiddleRight_gr");
			br.addClass("menuBottomRight_gr");
			tr.removeClass("menuTopRight");
			mr.removeClass("menuMiddleRight");
			br.removeClass("menuBottomRight");
			myState.right=true;

			mm_debug('glue right');
		}else if(!state.right&&myState.right){
			if(!myState.tr)
				tr.addClass("menuTopRight");
			mr.addClass("menuMiddleRight");
			if(!myState.br)
				br.addClass("menuBottomRight");
			tr.removeClass("menuTopRight_gr");
			mr.removeClass("menuMiddleRight_gr");
			br.removeClass("menuBottomRight_gr");
			myState.right=false;
			mm_debug('rip right');
		}


		if(myState.left&&myState.top&&!myState.tl)
		{
			tl.addClass("menuTopLeft_gtl");
			if(myState.left)
				tl.removeClass("menuTopLeft_gl");
			if(myState.top)
				tl.removeClass("menuTopLeft_gt");				
			myState.tl=true;
		}
		if((!myState.left||!myState.top)&&myState.tl)
		{
			tl.removeClass("menuTopLeft_gtl");
			if(myState.left)
				tl.addClass("menuTopLeft_gl");
			if(myState.top)
				tl.addClass("menuTopLeft_gt");					
			myState.tl=false;
		}


		if(myState.left&&myState.bottom&&!myState.bl)
		{
			bl.addClass("menuBottomLeft_gbl");
			if(myState.left)
				bl.removeClass("menuBottomLeft_gl");
			if(myState.bottom)
				bl.removeClass("menuBottomLeft_gb");				
			myState.bl=true;
		}
		if((!myState.left||!myState.bottom)&&myState.bl)
		{
			bl.removeClass("menuBottomLeft_gbl");
			if(myState.left)
				bl.addClass("menuBottomLeft_gl");
			if(myState.bottom)
				bl.addClass("menuBottomLeft_gb");					
			myState.bl=false;
		}


		if(myState.right&&myState.bottom&&!myState.br)
		{
			br.addClass("menuBottomRight_gbr");
			if(myState.right)
				br.removeClass("menuBottomRight_gr");
			if(myState.bottom)
				br.removeClass("menuBottomRight_gb");				
			myState.br=true;
		}
		if((!myState.right||!myState.bottom)&&myState.br)
		{
			br.removeClass("menuBottomRight_gbr");
			if(myState.right)
				br.addClass("menuBottomRight_gr");
			if(myState.bottom)
				br.addClass("menuBottomRight_gb");					
			myState.br=false;
		}

		if(myState.right&&myState.top&&!myState.tr)
		{
			tr.addClass("menuTopRight_gtr");
			if(myState.right)
				tr.removeClass("menuTopRight_gr");
			if(myState.top)
				tr.removeClass("menuTopRight_gt");				
			myState.tr=true;
		}
		if((!myState.right||!myState.top)&&myState.tr)
		{
			tr.removeClass("menuTopRight_gtr");
			if(myState.right)
				tr.addClass("menuTopRight_gr");
			if(myState.top)
				tr.addClass("menuTopRight_gt");					
			myState.tr=false;
		}


	};

	var myDock=null;
	$each([tm,tl,ml,bl,bm,br,mr],function(handle){
		handle.style.cursor="-moz-grab";
		var dock=new GeoliveDockable(c,{
			innerContainer:(options.container?options.container:null),
			handle:handle,
			onStart:function()
			{
			var cur=this;
			handle.style.cursor="-moz-grabbing";
			Compatability.SetOpacity(cur.element, 0.5, 1);
			},
			onComplete: function(){
				var cur=this;
				handle.style.cursor="-moz-grab";
				Compatability.SetOpacity(cur.element,1);
			}
		});
		if(!myDock)
			myDock=dock;	//keep reference to the tm dock.
		dock.addEvent('onDock',glue);
		dock.addEvent('onUndock',glue);
	});

	this.checkBounds=function(){
		myDock.checkBounds();
	};


	this.content.innerHTML="hello world<br/>welcome to MediaMAP.";//this is the default content overwrite this!!

	var me=this;

	//add menu buttons
	/**
	 * TODO: mouseover functions can be done with css!
	 */
	var closeButton=new Element('span',{"class":"menuCloseButton", events:{
		mouseover:function(){
		this.addClass("menuCloseButton_h");
		this.removeClass("menuCloseButton");
	},
	mouseout:function(){
		this.addClass("menuCloseButton");
		this.removeClass("menuCloseButton_h");
	}
	}});
	this.buttons=new Element('span',{'class':"menuButtons"});
	this.buttons.appendChild(closeButton);
	tm.appendChild(this.buttons);

	this.closeButton=closeButton;

	closeButton.addEvent("click",function(){
		if(me.map)
			me.map.removeControl(me);
		me.close();
		this.addClass("menuCloseButton");
		this.removeClass("menuCloseButton_h");
	});
}
menuControl.prototype = new GControl();
menuControl.prototype.initialize = function(map){
	this.map=map;
	map.getContainer().appendChild(this.container);
	return this.container;
};
menuControl.prototype.addButton=function(el){
	this.buttons.appendChild($(el));
};
menuControl.prototype.getDefaultPosition = function() {
	return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(100, 100));
};
menuControl.prototype.close=function(){};


/**
 * static method returns a new spacer consisting of 2 divs within a container div. 
 * style is assumed to be set in css
 */
menuControl.space=function(){
	var c=new Element('div',{'class':"menuSpacer"});
	var l=new Element('div',{'class':"menuSpacerLeft"});
	var r=new Element('div',{'class':"menuSpacerRight"});
	c.appendChild(l);
	c.appendChild(r);
	return c;

};