/** Description:
 *		creates a custom GoogleMaps Control object in which a set of customizable tabs are placed 
 *		along the top of the map
 *var MediaMenuControlsVersion = 1;
 */
var gDiv;
function tabbedMenuControl(name, description, iconsPath){
	var me=this;
	me.path=iconsPath;
	me.title=$pick(name,"geoLive");

	if(BrowserDetect.browser=="Explorer")
	{
		me.container=$(document.createElement('table'));
		var row=$(me.container.insertRow());
		var left=$(row.insertCell());
		var middle=$(row.insertCell());
		var tabsTable=$(document.createElement('table'));
		me.wrapper=$(tabsTable.insertRow());
		var right_0=$(row.insertCell());
		var right_1=$(row.insertCell());
		var right_2=$(row.insertCell());


	}
	else
	{
		me.container=new Element('table');
		var row=new Element('tr');
		var left=new Element('td');
		var middle=new Element('td');
		var tabsTable=new Element('table');
		me.wrapper=new Element('tr');
		var right_0=new Element('td');
		var right_1=new Element('td');
		var right_2=new Element('td');

		me.container.appendChild(row);
		tabsTable.appendChild(me.wrapper);
		row.appendChild(left);
		row.appendChild(middle);
		row.appendChild(right_0);
		row.appendChild(right_1);
		row.appendChild(right_2);
	}

	middle.appendChild(tabsTable);




	me.container.addClass("tabMenuContainer_parent");
	left.addClass("tabMenuLeftColumn_minmax");
	middle.addClass("tabMenuMiddleColumn_content");
	me.wrapper.addClass("tabMenuContentTable_wrapper");
	right_0.addClass("tabMenuRightColumn_title_0");
	right_1.addClass("tabMenuRightColumn_title_1");
	right_2.addClass("tabMenuRightColumn_title_2");

	var img_0=new Element("img",{src:this.path+"images/TabGreyRight-0.png"});
	var title=new Element('div',{'class':"tabMenuTitle"});

	title.setText(me.title);
	left.setText('-');

	right_0.appendChild(img_0);
	right_1.appendChild(title);


	var expand=null;		//defined below
	var shrink=function(){
		middle.removeChild(tabsTable);
		this.removeEvents("click");
		this.addEvent("click", expand);
		this.setText('+');
	};
	expand=function(){
		middle.appendChild(tabsTable);
		this.removeEvents("click");
		this.addEvent("click", shrink);
		this.setText('-');

	};


	left.addEvent('click', shrink);

	this.imageOptions={
			events:{
		mouseover: function(){this.setStyle("opacity",'1');},
		mouseout: function(){
			var me=this; 
			Compatability.SetOpacity(me, 0.7);
		}
	},
	styles:{
		cursor: 'pointer',
		opacity: (BrowserDetect.browser=="Explorer"?'1':'0.7')
	}};
	mm_debugBrowser('Explorer','TabbedMenu Initialized IE7');
	if(false&&BrowserDetect.browser=="Explorer")
	{
		this.box=new Element('div');
		this.box.setStyle('width',"100px");
		this.box.setStyle('height',"100px");
		this.box.setStyle('overflow',"visible");
		var tb=document.createElement('table');//,{styles:{zIndex:'9999'}});
//		tb.setStyle('backgroundColor',"blue");
//		tb.setStyle('display',"table");
//		tb.setStyle('visibility',"visible");


		var tr0=tb.insertRow();
		//new Element('tr',{styles:{zIndex:'9999'}});
		var tr1=tb.insertRow();//new Element('tr',{styles:{zIndex:'9999'}});
		var td00=tr0.insertCell();//new Element('td',{styles:{width:"50px", height:"50px", backgroundColor:"red", zIndex:'9999'}});
		var td01=tr0.insertCell();//new Element('td',{styles:{width:"50px", height:"50px", backgroundColor:"yellow", zIndex:'9999'}});
		var td10=tr1.insertCell();//new Element('td',{styles:{width:"50px", height:"50px", backgroundColor:"yellow", zIndex:'9999'}});
		var td11=tr1.insertCell();//new Element('td',{styles:{width:"50px", height:"50px", backgroundColor:"red", zIndex:'9999'}});
		//tb.appendChild(tr0);
		//tb.appendChild(tr1);

		//tr0.appendChild(td00);
		//tr0.appendChild(td01);
		//tr1.appendChild(td10);
		//tr1.appendChild(td11);

		//td00.appendChild(new Element('div',{styles:{width:"50px", height:"50px", zIndex:'9999'}}));
		//td01.appendChild(new Element('div',{styles:{width:"50px", height:"50px"}}));
		//td10.appendChild(new Element('div',{styles:{width:"50px", height:"50px"}}));
		//td11.appendChild(new Element('div',{styles:{width:"50px", height:"50px"}}));
		$(td11).setText('hello world');


		this.box.appendChild(tb);

		gDiv=this.box;



		//this.container.appendChild(new Element('table',{styles:{width:"10px",height:"10px",backgroundColor:'red'}}));
		var c=this.container;
		var b=this.box;
		var t='i';
	}
}

tabbedMenuControl.prototype = new GControl();
tabbedMenuControl.prototype.generateTab=function(buttonIcon, name, clickFunction,tip)
{	
	/*tab menus can me styled in css as a group with class tabMenuItem or individually with tabMenuItem_.name*/
	var me=this;
	if(BrowserDetect.browser=="Explorer")
	{
		var tabCell=$(me.wrapper.insertCell());
	}
	else
	{
		var tabCell=new Element('td');
		this.wrapper.appendChild(tabCell);
	}

	tabCell.addClass("tabMenuItem");
	tabCell.addClass("tabMenuItem_"+name);

	var tab=new Element('img', this.imageOptions);
	tab.addClass("tabMenuItemImage");
	tab.addClass("tabMenuItemImage_"+name);
	tab.addEvent("click",clickFunction);
	tab.src=this.path+buttonIcon;
	tab.alt=name;	

	if(tip)
	{
		tab.setAttribute("title", tip);
		new mediaTips([tab],{maxTitleChars: 50});
	}

	tabCell.appendChild(tab);
	return tabCell;
};
tabbedMenuControl.prototype.initialize = function(map){
	var me=this;
	map.getContainer().appendChild(me.container);
	return me.container;

};
tabbedMenuControl.prototype.getDefaultPosition = function() {
	return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(100, -1));
};


tabbedMenuControl.prototype.addTab = function(buttonIcon, name, clickFunction, tip){
	/**
	 * TODO: throw this method away, optionally rename generateTab to addTab since it is the same
	 */
	var tab=this.generateTab(buttonIcon, name, clickFunction,tip);
	return tab;
};

//TODO: addOpenTab is not used
tabbedMenuControl.prototype.addOpenTab = function(buttonIcon, link){
	this.addTab(buttonIcon,'open',function(){
		open(link);
	});

};

tabbedMenuControl.prototype.addDropDownTab=function(buttonIcon, name, clickFunction, tip, subMenu)
{
	var hasClick=clickFunction?true:false;
	if(!hasClick)
	{
		clickFunction=function(){};
	}
	var tab=this.addTab(buttonIcon, name, clickFunction, tip);

	if(BrowserDetect.browser=="Explorer"){
		var tbl=$(document.createElement('table'));
		var grace=800;
	}
	else{
		var tbl=new Element('table');
		var grace=250;
	}

	tbl.addClass("tabMenuDropTbl_down");
	$each(subMenu,function(value){
		if(BrowserDetect.browser=="Explorer"){var row=$(tbl.insertRow());}
		else{
			var row=new Element('tr');
			tbl.appendChild(row);
		}
		row.addClass("tabMenuDropRow_down");
		row.appendChild(value);
	});

	if(!hasClick)
		$each(tab.childNodes,function(c){
			c.addEvent("mousedown",function(){			
				$each(tbl.childNodes,function(d,i){
					setTimeout(function(){
						d.style.backgroundImage="url(/modules/mod_MediaMAP/images/ringGlow.png)";
					},50+(i*250));
					setTimeout(function(){
						d.style.backgroundImage="";
					},250+(i*250));
				});	
				mm_debug("glow");
			});
		});

	tbl.style.opacity="0";
	tbl.style.display="none";

	var timeout=null;
	var visible=false;
	var fadingIn=false;
	var fadingOut=false;
	var fade=null;

	var show=function(){
		tbl.style.display="block";
		if(BrowserDetect.browser!="Explorer")
		{
			var time=500;
			var start=0;
			if(fade)
			{
				time=time*(1-fade.now); //shorten the fade time to account for current state
				var start=fade.now;		//never start from 0 or 1 because then there will be flicker
				fade.stop();
				fadingIn=true;
				fadingOut=false;
			}
			fade=new Fx.Style(tbl, 'opacity', {duration:500,onComplete:function(){ 
				fade=null;
				visible=true;
				fadingIn=false;
				mm_debug("onIn vis:"+visible+" in:"+fadingIn+" out:"+fadingOut+" tm:"+timeout);
			}}).start(start,1);
		}
		else
		{
			visible=true;
			mm_debug("onShow vis:"+visible+" in:"+fadingIn+" out:"+fadingOut+" tm:"+timeout);
		}


	};
	var hide=function(){
		if(visible||fadingIn)
		{
			if(BrowserDetect.browser=="Explorer")
			{
				tbl.style.display="none";
				visible=false;
				if(timeout)
				{
					clearTimeout(timeout);
					timeout=null;
				}
				mm_debug("onHide onvis:"+visible+" in:"+fadingIn+" out:"+fadingOut+" tm:"+timeout);
			}
			else
			{
				var time=2000;
				var start=1;
				if(fade)
				{
					time=time*(fade.now); //shorten
					var start=fade.now;
				}
				fadingOut=true;
				fadingIn=false;
				visible=false;
				fade=new Fx.Style(tbl, 'opacity', {duration:time, onComplete:function(){
					fade=null;
					if(timeout)
					{
						clearTimeout(timeout);
						timeout=null;
					}
					fadingOut=false;
					tbl.style.display="none";
					//tab.style.backgroundImage="";
					//tbl.style.backgroundImage="";
					mm_debug("onOut vis:"+visible+" in:"+fadingIn+" out:"+fadingOut+" tm:"+timeout);
				}}).start(start,0);	
			}
		}
		else
		{
			if(timeout)
			{
				clearTimeout(timeout);
				timeout=null;
			}
			mm_debug("failHide vis:"+visible+" in:"+fadingIn+" out:"+fadingOut+" tm:"+timeout);
		}
	};



	tab.addEvent("mouseover",function(){

		if(timeout)
		{
			clearTimeout(timeout);
			timeout=null;
		}
		if(!visible||fadingOut)
			show();

	});
	tab.addEvent("mouseout",function(){
		if(!timeout)
			timeout=setTimeout(hide, grace);
	});

	tab.appendChild(tbl);

};

//not used
tabbedMenuControl.prototype.addCloseTab = function(buttonIcon){
	this.addTab(buttonIcon,'close',function(){
		close();
	});
};