document.loaded(function() {
	new MapOverlays('collage-campus-map-overlays');
});



var MapOverlays = Class.create();
MapOverlays.prototype = {
	initialize: function(container) {
		if ($('learn-more-link')) {
			Event.observe('learn-more-link', 'click', this.showInfo.bindAsEventListener(this));
		}

		this.container = $(container);
		$A(this.container.getElementsByClassName('map-location-number')).each(function(number) {
			Event.observe($(number), 'mouseover', this.showOverlay.bindAsEventListener(this));
			Event.observe($(number), 'click', this.showInfo.bindAsEventListener(this));
		}.bind(this));
		
		$A(this.container.getElementsByClassName('map-location-more-link')).each(function(open) {
			Event.observe(open, 'click', this.showInfo.bindAsEventListener(this));
		}.bind(this));
				
		$A(this.container.getElementsByClassName('map-location-teaser')).each(function(overlay) {
			overlay.hide();
		});
		
		$A(this.container.getElementsByClassName('map-location-full')).each(function(overlayFull) {
			overlayFull.hide();
		});
		
		$('collage-campus-map-overlays').addClassName('javascript');
				
		this.masked = false;
	},

	showOverlay: function(e) {	
		document.getElementsByClassName('map-location-teaser').each(function(element) {
			element.hide();
		});
	
		var eventElement = Event.element(e);
		var contentDiv = eventElement.next('.map-location-teaser');
		
		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);	
		}
		
		if(topPos < 0) {
			topPos = 0;
		}

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

		contentDiv.show();
		contentDiv.addClassName('currentlyShowing');
	},

	hideOverlay: function(e) {
		document.getElementsByClassName('map-location-teaser').each(function(element) {
			if(!Position.within(element, Event.pointerX(e), Event.pointerY(e))) {
				element.hide();
			}
		}.bind(this));
	},
	
	showInfo: function(e) {
		Event.stop(e);
		
		if(Event.element(e).id == 'learn-more-link') {
			var contentDiv = $('learn-more').down('.map-location-full');
		} else {
			var contentDiv = Event.element(e).up('.map-location').down('.map-location-full');
		}
				
		if(!contentDiv) {
			return false;
		}
		
		var infoBox = '<div id="overlay" class="map-location-full">' + contentDiv.innerHTML + '</div>';
		new Insertion.Top('collage-campus', infoBox);
				
		$('overlay').setStyle({
			left: Element.getWidth('collage-campus') + 'px',
			height: Element.getHeight('collage-campus') + 'px'
		});
				
		$('overlay').addClassName('javascript');
		$('overlay').down('div').addClassName('javascript');

		new Effect.MoveBy('overlay', 0, contentDiv.getWidth() * -1, {
				afterFinish: function() {

					// Hide any teaser boxes that may be displayed
					document.getElementsByClassName('map-location-teaser').each(function(element) {
						element.hide();
					}.bind(this));		
				
					var closeLink = $('overlay').down('.map-location-close');
					Event.observe(closeLink, 'click', this.hideInfo);
				
					// Need to do this via integer offset as IE keeps choking on CSS selectors
					var copyOuter = Element.down('overlay', 6);
					var copyInner = Element.down('overlay', 7);
					copyOuter.addClassName('expanded');
					
					var overlayHeight = Element.getHeight('collage-campus');
					var copyOffset =  $('overlay').down('.everything-else').getHeight();
																																																									
					copyOuter.setStyle({
						height: overlayHeight - copyOffset - 70 + 'px'
					});
															
					if(copyInner.getHeight() > copyOuter.getHeight()) {
						new Insertion.Bottom('overlay', '' +
								'<div class="track" id="track">' +
								'	<div id="slider" class="slider"></div>' +
								'</div>'
						);
						
						$('track').setStyle({
							height: overlayHeight - copyOffset - 70 + 'px'
						});
						
						// IE6 :hover substitutes					
						Event.observe('slider', 'mouseover', function() {
							$('slider').addClassName('hover');
						});
						Event.observe('slider', 'mouseout', function() {
							$('slider').removeClassName('hover');
						});
																				
						new Control.Slider('slider', 'track', {
							axis: 'vertical',
							onSlide: this.moveSlider.bind(this, copyOuter),
							onChange: this.moveSlider.bind(this, copyOuter)
						});
					}
				}.bind(this)
		});
	},
	
	moveSlider: function(copyOuter, value) {
		var overlay = $('overlay');
	  	var copyInner = Element.down('overlay', 7);
	  
	  	var offset = (copyInner.getHeight() - copyOuter.getHeight()) * value;
	  	copyInner.setStyle({
	  		top: '-' + offset + 'px'
	  	});
	},
	
	hideInfo: function(e) {
		Event.stop(e);
		
		if(!$('overlay')) {
			return false;
		}
		
		$('overlay').down('.copy').removeClassName('expanded');		
		new Effect.MoveBy($('overlay'), 0, $('overlay').getWidth(), {
				afterFinish: function() {
					$('overlay').remove();
				}
		});
	}
}