Event.observe(window,'load',function(){
	//debug('height',$('content').getHeight());
	/*
	if ( $('content').getHeight() < 500 )
	{
		$('content').setStyle({
			'height' : '500px'
		});
	}
	*/
	dropNroll.init('menubar');
	$$('.track').each( function(node)
	{
		//debug('node',node);
		node.observe('click',function(evt)
		{
			//Event.stop(evt);
			var href = node.readAttribute('href');
			debug('tracking',href);
			urchinTracker(href);
		});
	});
});

var dropNroll = {
	showTO	: null,		// timeout
	hideTO	: null,		// timeout
	areaCurrent : null,		// node
	current_focus : null,	// int... toDo: change to LI node
	capturingKeys : false,
	showPopup : function(evt,areaShow)
	{
		var showID = ( id = areaShow.readAttribute('id') )
			? id.split("_")[0]+'_menu'
			: null;
		debug('showPopup');
		clearTimeout(this.hideTO);
		var alreadyShown = false;
		var ac = dropNroll.areaCurrent;
		if ( ac )
		{
			var curID = ( id = ac.readAttribute('id') )
				? id.split('_')[0]+'_menu'
				: null
			if ( curID )
			{
				if ( curID == showID )
					alreadyShown = true;
				else
				{
					debug('hiding areaCurrent');
					new Effect.BlindUp(curID, { duration:.3 });
				}
			}
		}
		this.areaCurrent = areaShow;
		if ( !alreadyShown )
		{
			//debug('not already shown - setting show timeout');
			if ( showID != null )
				$(showID).setAttribute('Style','display:none;');	// reset the style.. it tends to get stuck with a bogus height
			this.showTO = setTimeout(function()
			{
				imgSwap(areaShow,'mouseover');
				if ( showID )
				{
					debug('dropping',showID);
					new Effect.BlindDown(showID, { duration:.3 })
				}
			},200);
			if ( !this.capturingKeys )
			{
				this.capturingKeys = true;
				Event.observe(document, 'keypress', dropNroll.keypress );
			}
		}
	},
	hidePopup : function(evt,areaHide)
	{
		var hideID = ( areaHide && ( id = areaHide.readAttribute('id') ) )
			? id.split("_")[0]+'_menu'
			: null;
		if( ( this.current_focus != null && evt.type == 'blur' ) || hideID && $(hideID).getStyle('display') == 'none' )
		{
			//debug('hidePopup - already hidden - ',hideID);
		}
		else
		{
			debug('hidePopup - setting timeout - '+hideID);
			clearTimeout(this.showTO);
			this.hideTO = setTimeout(function()
			{
				dropNroll.current_focus = null;
				dropNroll.areaCurrent = null;
				if ( hideID )
					new Effect.BlindUp(hideID,
					{
						duration:.3,
						afterFinish: function()
						{
							imgSwap(areaHide,'mouseout');
						}
					});
				else
					imgSwap(areaHide,'mouseout');
				if ( this.capturingKeys )
				{
					this.capturingKeys = false;
					Event.stopObserving(document,'keypress',dropNroll.keypress);
				}
			},50);
		}
	},
	init : function(usemapID)
	{
		areas = $(usemapID).getElementsBySelector('area');
		areas.each( function(area)
		{
				var dropID = ( id = area.readAttribute('id') )
					? id.split("_")[0]+'_menu'
					: null;
				area.observe('mouseover',	dropNroll.showPopup.bindAsEventListener(dropNroll,area));
				area.observe('focus',		dropNroll.showPopup.bindAsEventListener(dropNroll,area));
				area.observe('mouseout',	dropNroll.hidePopup.bindAsEventListener(dropNroll,area));
				area.observe('blur',		dropNroll.hidePopup.bindAsEventListener(dropNroll,area));
				if ( dropID != null )
				{
					$(dropID).observe('mouseover',	dropNroll.showPopup.bindAsEventListener(dropNroll,area));
					$(dropID).observe('mouseout',	dropNroll.hidePopup.bindAsEventListener(dropNroll,area));
				}
		});
	},
	keypress : function(evt)
	{
		var code;
		if (!evt) var evt = window.event;
		if (evt.keyCode) code = evt.keyCode;
		else if (evt.which) code = evt.which;
		var character = String.fromCharCode(code);
		var ARRUP = 38;
		var ARRDN = 40;
		var ARRL = 37;
		var ARRR = 39;
		var TAB = 9;
		//debug('Character was ',code,character);
		var shiftKey = evt.shiftKey;
		if ( dropNroll.areaCurrent )
		{
			curID = ( id = dropNroll.areaCurrent.readAttribute('id') )
				? id.split("_")[0]+'_menu'
				: null;
			switch(code)
			{
				case ARRUP:
					dropNroll.keyNav('up');
				break;
				case ARRDN:
					dropNroll.keyNav('down');
				break;
				case ARRL:
					dropNroll.keyNav('left');
				break;
				case ARRR:
					dropNroll.keyNav('right');
				break;
				case TAB:
					debug('tab',shiftKey);
					dropNroll.current_focus = null;
					if ( shiftKey )
						dropNroll.keyNav('left');
					else
						dropNroll.keyNav('right');
				break;
			}
			Event.stop(evt);
		}
	},
	keyNav : function(d)
	{
		ac = this.areaCurrent;
		var curID = ( id = $(ac).readAttribute('id') )
			? id.split("_")[0]+'_menu'
			: null;
		debug('keyNav',d,this.current_focus);
		cf = this.current_focus
		if ( curID )
		{
			anchors = $(curID).getElementsBySelector('A');
			anchors.each( function(anchor){ anchor.removeClassName('focus') } );
		}
		if ( curID && ( d == 'up' || d == 'down' ) )
		{
			if ( cf == null )
				cf = -1;
			cf += d == 'down'
				? 1
				: -1;
			if ( cf < -1 )				// went above parent
				cf = anchors.length - 1;
			if ( cf == -1 || cf == anchors.length )	// landed on parent or past end
			{
				debug('parent');
				anchors[this.current_focus].blur();
				this.current_focus = null;
			}
			else
			{
				anchors[cf].focus();
				anchors[cf].addClassName('focus');	// for IE
				this.current_focus = cf;
			}
		}
		else if ( d == 'right' )
		{
			if ( cf == null )	// topmost
			{
				if ( ac.next() )
					ac.next().focus();
				else
					ac.siblings()[0].focus();
			}
		}
		else if ( d == 'left' )
		{
			if ( cf == null )	// topmost
			{
				if ( ac.previous() )
					ac.previous().focus();
				else
					ac.siblings()[ac.siblings().length-1].focus();
			}
		}
		clearTimeout(this.hideTO);	// prevent menu from going byebye
	}
}

var newTimeout;
var backTimeout;
var fadeIs = 'q_mark_backup';
var fadeStatus = 'finished';	// delay, fade, appear, finished
function helper_node(node,whereID,contentID)
{
	node.setStyle( { cursor:'help' } );
	node.observe('mouseover', function(evt) {
		//debug('over '+fadeIs+'/'+fadeStatus+'/'+contentID);
		clearTimeout(backTimeout);
		if ( fadeIs != contentID )
		{
			//fadeStatus = 'delay';
			newTimeout = setTimeout( function(){
				content_swap(whereID,contentID);
			},1000);
		}
	});
	node.observe('mouseout', function(evt) {
		//debug('out '+fadeIs+'/'+fadeStatus+'/'+whereID+'_backup');
		clearTimeout(newTimeout);
		if ( fadeIs != whereID+'_backup' )
		{
			//fadeStatus = 'delay';
			backTimeout = setTimeout( function(){
				content_swap(whereID,whereID+'_backup');
			},1000);
		}
	});
}

function helper_node_focus(node,whereID,contentID)
{
	node.observe('focus', function(evt) {
		clearTimeout(backTimeout);
		if ( fadeIs != contentID )
		{
			newTimeout = setTimeout( function(){
				content_swap(whereID,contentID);
			},500);
		}
	});
	node.observe('blur', function(evt) {
		clearTimeout(newTimeout);
		if ( fadeIs != whereID+'_backup' )
		{
			backTimeout = setTimeout( function(){
				content_swap(whereID,whereID+'_backup');
			},500);
		}
	});
}

function content_swap(whereID,contentID)
{
	debug('content_swap',whereID,contentID);
	if ( $(contentID) )
	{
		var queue = Effect.Queues.get('hint');
		queue.each( function(e) {
			e.cancel()
		});
		//fadeStatus = 'fade';
		fadeIs = contentID;
		new Effect.Opacity(whereID, {
			duration: $(whereID).getStyle('opacity'),
			from: $(whereID).getStyle('opacity'),
			to: 0,
			afterFinish: function() {
				//fadeStatus = 'appear';
				$(whereID).innerHTML = $(contentID).innerHTML;
				new Effect.Opacity(whereID, {
					duration: 1,
					from: 0,
					to: 1,
					queue:{scope:'hint'}
					//afterFinish: function() { fadeStatus = 'finished'; }
				});
			},
			queue:{scope:'hint'}
		});
	}
	return;
}