document.loaded(function() {

	var openers = document.getElementsByClassName('opener', 'p');
	var extendedOptions = document.getElementsByClassName('extended', 'div');

	openers.each(function(e) {
		Event.observe(e, 'mouseover', function() { this.addClassName('hover'); }.bind(e));
		Event.observe(e, 'mouseout', function() { this.removeClassName('hover'); }.bind(e));
	});

	var highlightAccordion = new fx.Accordion(openers, extendedOptions,
			{
				opacity: true,
				onComplete: function(e) {

					var openers = document.getElementsByClassName('opener', 'p');
					openers.each(function(opener) {

						opener.removeClassName('active');
					});

					var opener = e.previous('.opener');
					if(opener && e.style.height != '0px') {

						opener.addClassName('active');
						Event.observe(opener, 'click', function() {

							highlightAccordion.showThisHideOpen(-1);
							this.removeClassName('active');
						}.bind(opener));
					}
				}
			}
	);

	new MapOverlays('campus-calendar-map-overlays');
});



var MapOverlays = Class.create();
MapOverlays.prototype = {
	initialize: function(container) {

		this.container = $(container);
		$A(this.container.getElementsByClassName('hover')).each(function(link) {

			Event.observe(link, 'mouseover', this.showOverlay.bindAsEventListener(this));
			Event.observe(link, 'mouseout', this.hideOverlay.bindAsEventListener(this));
			Event.observe(link, 'click', function(e) { Event.stop(e); });
		}.bind(this));

		this.container.setStyle({
				display: 'block',
				height: '1px',
				overflow: 'hidden'
		});
		$A(this.container.getElementsByClassName('map-extended')).each(function(overlay) {

			overlay.hide();
		});
	},

	showOverlay: function(e) {

		var eventElement = Event.element(e);
		var contentDiv = eventElement.next('.map-extended');
		
		var leftPos = Position.positionedOffset(eventElement)[0] - 10;
		var topPos = Position.positionedOffset(eventElement)[1] - (Element.getHeight(contentDiv) - 50);	
		
		// If overlay falls off page, pull it back by 10px		
		if(leftPos + Element.getWidth(contentDiv) > 934) {
			leftPos = 934 - Element.getWidth(contentDiv);	
		}

		contentDiv.setStyle({
				position: 'absolute',
				left: leftPos + 'px',
				top: topPos + 'px'
		});
		
		Event.observe(contentDiv, 'mouseout', this.hideOverlay.bindAsEventListener(this));

		contentDiv.show();
	},

	hideOverlay: function(e) {

		document.getElementsByClassName('map-extended').each(function(element) {
			if(!Position.within(element, Event.pointerX(e), Event.pointerY(e))) {
				element.hide();
			}
		}.bind(this));
	}
}