var Kevstuff = {
	elRollon: function(whichElement) {
		changeTo = Event.element(whichElement).id;
		//alert(changeTo);
		$('headNav').className = changeTo;
	},
	elRolloff: function(whichElement) {
		//changeTo = Event.element(whichElement).id;
		//alert(changeTo);
		$('headNav').className = 'default';
	},
	overdrive: function(whichLayer) {
		thisLayer = Event.element(whichLayer).id;
		getParent = Event.element(whichLayer).ancestors()[0];
		if ($(thisLayer+'Overlay')) {
			return;
		}
		//Create the div
		var newOverlay = new Element('div', { 'class': 'showOverlay', id: thisLayer+'Overlay' });
		//Create the header
		var newOverlayHeader = new Element('h2').update(eval('overlayContent.'+thisLayer+'.header'));
		//Create the content
		var newOverlayContent = new Element('p').update(eval('overlayContent.'+thisLayer+'.content'));
		//Create the closer
		var newOverlayCloser = new Element('a', {'href' : '#'+thisLayer, 'class' : 'closer', id : thisLayer+'OverlayCloser'}).update('close');
		//Add event listener to close link
		Event.observe(newOverlayCloser, 'click', Kevstuff.closeOverlay.bindAsEventListener(newOverlayCloser));
		//Insert the div
		$(getParent).insert(newOverlay, {position: 'bottom'});
		//Insert the header
		newOverlay.insert(newOverlayHeader, {position: 'bottom'});
		//Insert the content
		newOverlay.insert(newOverlayContent, {position: 'bottom'});
		//Insert the close link
		newOverlay.insert(newOverlayCloser, {position: 'bottom'});
		Kevstuff.positionMe(newOverlay);
	},
	closeOverlay: function(whichLayer) {
		getParent = Event.element(whichLayer).ancestors()[0];
		$(getParent).remove();
	},
	positionMe: function(whichLayer) {
		$(whichLayer).addClassName('overlayBox');
		getAnchor = $(whichLayer).previous(0);
		parentOffset = getAnchor.cumulativeOffset();
		nodeOffset = $(whichLayer).cumulativeOffset();
		moveX = parentOffset[0] - nodeOffset[0];
		moveY = parentOffset[1] - nodeOffset[1];
		new Effect.Move ($(whichLayer),{ x: moveX+getAnchor.getWidth()+5, y: moveY, mode: 'relative'});
	}	
}

var overlayContent = {
	aos: {
		'header' : 'accessible overlay system',
		'content' : 'this is the content for the first overlay.'
	},
	aos2: {
		'header' : 'these overlays',
		'content' : 'they sure are a hoot.'
	}
}

var getRollies = $$('.rollMe');
for (i=0; i<getRollies.length; i++) {
	Event.observe($(getRollies[i]), 'focus', Kevstuff.elRollon.bindAsEventListener($(getRollies[i])));
	Event.observe($(getRollies[i]), 'blur', Kevstuff.elRolloff.bindAsEventListener($(getRollies[i])));
	Event.observe($(getRollies[i]), 'mouseover', Kevstuff.elRollon.bindAsEventListener($(getRollies[i])));
	Event.observe($(getRollies[i]), 'mouseout', Kevstuff.elRolloff.bindAsEventListener($(getRollies[i])));
}

var getOverlays = $$('.overlay');
for (i=0; i<getOverlays.length; i++) {
	Event.observe($(getOverlays[i]), 'click', Kevstuff.overdrive.bindAsEventListener($(getOverlays[i])));
}