document.loaded(function() {
	$(document.body).addClassName('javascript');

	new SlideOverlay('slide-overlay');
});

Event.observe(window, 'load', function() {
	if($('visitor-info-map')) {
		var vitraHausLat = 47.602;
		var vitraHausLong = 7.61762;
		var map = new GMap2($('visitor-info-map'));
		map.addControl(new GSmallMapControl());
		map.addControl(new GMapTypeControl());
		map.addControl(new GScaleControl());
		map.setCenter(new GLatLng(vitraHausLat,vitraHausLong), 14);

		var baseIcon = new GIcon();
		baseIcon.iconSize = new GSize(68, 33);
		baseIcon.iconAnchor = new GPoint(50, 32);
		baseIcon.infoWindowAnchor = new GPoint(50, 12);
		baseIcon.shadow = '/_images/dealer/map-shadow.png';
		baseIcon.shadowSize = new GSize(71, 36);
		var point = new GLatLng(vitraHausLat,vitraHausLong);
		var icon = new GIcon(baseIcon);
		icon.image = "/_images/dealer/map-cold.png";
		var marker = new GMarker(point, {icon:icon});

		map.addOverlay(marker);
	}
	
	if($('design-collage')) {
		new MouseoverCollage('design-collage');
	}
});

var SlideOverlay = Class.create();
SlideOverlay.prototype = {

	initialize: function(className) {
		var overlays = document.getElementsByClassName('slide-overlay-slide');
		overlays.each(function(element) {
			element.hide();
		});
		
		var activators = document.getElementsByClassName(className);
		for(var i = 0; i < activators.length; i++) {
			Event.observe(activators[i], 'mouseover', this.showOverlay.bindAsEventListener(this));
			Event.observe(activators[i], 'mouseout', this.hideOverlay.bindAsEventListener(this));
		}
	},
	
	showOverlay: function(e) {
		if(Event.element(e).up('a') && Event.element(e).up('a').down('.slide-overlay-slide')) {
			Event.element(e).up('a').down('.slide-overlay-slide').show();
		}
	},
	
	hideOverlay: function(e) {
		if(Event.element(e).up('a') && Event.element(e).up('a').down('.slide-overlay-slide')) {
			Event.element(e).up('a').down('.slide-overlay-slide').hide();
		}
	}
}



var originalZIndex = '';
var overlayShowing = false;
var greyBoxOpacity = 0.4


var MouseoverCollage = Class.create();
MouseoverCollage.prototype = {
	initialize: function(container) {
		if (!$(container)) {
			return false;
		}
	
		this.container = $(container);
		$A(this.container.getElementsByClassName('collage-photo')).each(function(image) {
			var photo = image.up('li');
			var caption = photo.down(".collage-caption");
			var dimensions = image.getDimensions();
			
			//add grey covering boxes
			var greyBoxText = '<div class="grey-box" id="box-' + photo.id + '"></div>';
			new Insertion.After(image, greyBoxText);
			var greyBox = photo.down(".grey-box");
			
			//overlap boxes, position grey covering boxes, move captions into correct position
			photo.setStyle({'position' : 'absolute'});
			photo.setStyle({'margin-bottom' : '0'});
			
			greyBox.setOpacity(greyBoxOpacity);
			greyBox.setStyle({'height' : dimensions.height + 'px', 'width' : dimensions.width + 'px'});
			caption.setOpacity(0);
			caption.setStyle({'top' : (dimensions.height - 100) + 'px', 'left' : '-40px', 'position' : 'absolute'});
			
			if (caption.hasClassName('right-side'))
			{
				caption.setStyle({'left' : (dimensions.width - caption.getWidth() + 40) + 'px'});
			}
			this.setZIndex(photo);
			
			//add event bindings
			Event.observe(greyBox, 'mouseover', this.setFocus.bindAsEventListener(this));
			Event.observe(greyBox, 'mouseout', this.removeFocus.bindAsEventListener(this));
			Event.observe(greyBox, 'click', this.showOverlay.bindAsEventListener(this));
			Event.observe(caption, 'click', this.showOverlay.bindAsEventListener(this));
		}.bind(this));
	},

	setFocus: function(e) {
		var greyBox = Event.element(e);
		var photo = greyBox.up('li');
		var caption = photo.down(".collage-caption");
		this.originalZIndex = photo.getStyle('z-index');
		
		new Effect.Opacity(greyBox, { from: greyBoxOpacity, to: 0, duration: 0.25, queue: { position: 'front', scope: greyBox.id, limit: 2} });
		caption.setStyle({'display' : 'block'});
		new Effect.Opacity(caption, { from: 0, to: 1, duration: 0.25, queue: { position: 'front', scope: 'caption-' + greyBox.id, limit: 2} });
		
		photo.setStyle({'z-index': '200'});
		this.setZIndex(photo);
	},
	
	removeFocus: function(e) {
		greyBox = Event.element(e);
		photo = greyBox.up('li');
		caption = photo.down(".collage-caption");
		
		new Effect.Opacity(greyBox, { from: 0, to: greyBoxOpacity, duration: 0.25, queue: { position: 'front', scope: greyBox.id, limit: 2} });
		new Effect.Opacity(
				caption,
				{ 	from: 1, to: 0, duration: 0.25, 
					queue: { position: 'front', scope: 'caption-' + greyBox.id, limit: 2},  
					afterFinish: function() { caption.setStyle({'display' : 'none'}); }
				}
			);
		
		photo.setStyle({'z-index': this.originalZIndex});
		this.setZIndex(photo);
		
		//this.displayZIndex();
	},
	
	setZIndex: function(photo) {
		var caption = photo.down(".collage-caption");
		var greyBox = photo.down(".grey-box");
		
		var baseZIndex = photo.getStyle('z-index');
		greyBox.setStyle({'z-index': parseInt(photo.getStyle('z-index')) + 2});
		caption.setStyle({'z-index': parseInt(photo.getStyle('z-index')) + 1});
	},
	
	displayZIndex: function() {
		$A($('design-collage').getElementsByClassName('collage-photo')).each(function(image) {
			var photo = image.up('li');
			var caption = photo.down(".collage-caption");
			var greyBox = photo.down(".grey-box");
		});
	},	
	
	showOverlay: function(e) {
		Event.stop(e);
		if (!overlayShowing)
		{
			overlayShowing = true;
			photo = Event.element(e).up('li');
			
			if(!photo) {
				return false;
			}
			
			var	requestUrl = window.location.protocol + "//" + window.location.host;
			
			if (window.location.pathname.substring(0,1) != '/')
			{
				requestUrl += '/';
			}
			requestUrl += window.location.pathname;
			
			new Ajax.Request( requestUrl + photo.id + '/', {
				method: 'get',
				onSuccess: function(transport) {
					var fragmentHtml = transport.responseText;
					
					var detailsOverlay = '<div id="overlay">' + fragmentHtml + '</div>';
					new Insertion.After(photo.up('ul'), detailsOverlay);
					
					$('overlay').setStyle({
						'top': '155px',
						'left' : Element.getWidth('inspirational-ideas') + 'px',
						'height' : Element.getHeight('inspirational-ideas') + 'px'
					});
					
					var overlayImage = $('overlay').down('img.fullsize');
	
					if ($('overlay').down('#details'))
					{		
						var overlayDetails = $('overlay').down('#details').remove();
						new Insertion.After('inspirational-ideas-intro', '<div id="overlay-details"></div>');
						new Insertion.Top('overlay-details', overlayDetails.innerHTML);
						
						var overlayCaption = $('overlay-details').down('.caption');
						if (overlayCaption)
						{
							overlayCaption.setOpacity(0);
						}
						
						var overlayDesigner = $('overlay-details').down('.designer');
						if (overlayDesigner)
						{
							overlayDesigner.setOpacity(0);
						}
					}
					
					new Insertion.Top('overlay', '<div class="overlay-close"></div>');
					var overlayClose = $('overlay').down('.overlay-close');
					if (overlayClose)
					{
						overlayClose.setOpacity(0);
						overlayClose.setStyle({'left' : Element.getWidth(overlayImage) - 60 + 'px'});
					}
					
					$A($('overlay').getElementsByClassName('hotspot')).each(function(hotspot) {
						//add event bindings
						Event.observe(hotspot, 'mouseover', this.showHotspot.bindAsEventListener(this));
						hotspotDetail = $(hotspot.id + '-detail');
						Event.observe(hotspotDetail, 'mouseout', this.hideHotspot.bindAsEventListener(this));
						hotspotDetail.setOpacity(0);
					}.bind(this));
					
					if (window.location.href.toQueryParams().fadeout == 'true')
					{
						new Effect.Opacity('design-collage', {from: 1, to: 0, duration: 0.5});
					}
					
					new Effect.Opacity('inspirational-ideas-intro', {from: 1, to: 0, duration: 0.25});
					
					new Effect.MoveBy('overlay', 0, Element.getWidth(overlayImage) * -1, {
						duration: 0.75,
						delay: 0.25,
						afterFinish: function() {
						
							var closeLink = $('overlay').down('.overlay-close');
							Event.observe(closeLink, 'click', this.hideOverlay);
							if (overlayCaption)
							{
								new Effect.Opacity(overlayCaption, {from: 0, to: 1, duration: 0.5});
							}
							if (overlayDesigner)
							{
								new Effect.Opacity(overlayDesigner, {from: 0, to: 1, duration: 0.5});
							}
							if (overlayClose)
							{
								new Effect.Opacity(overlayClose, {from: 0, to: 1, duration: 0.5});
							}
							
						}.bind(this)
					});	
				}.bind(this)
			});		
		}
	},
	
	hideOverlay: function(e) {
		Event.stop(e);
		overlayShowing = false;
		if(!$('overlay')) {
			return false;
		}
		
		if ($('overlay-details'))
		{
			new Effect.Opacity($('overlay-details'), {
				from: 1, to: 0, 
				duration: 0.25,
				afterFinish: function() {
					new Effect.MoveBy($('overlay'), 0, $('overlay').getWidth(), {
						duration: 0.75,
						afterFinish: function() {
							if (window.location.href.toQueryParams().fadeout == 'true')
							{
								new Effect.Opacity($('design-collage'), {from: 0, to: 1, duration: 0.5});
							}
							new Effect.Opacity($('inspirational-ideas-intro'), {from: 0, to: 1, duration: 0.5});
							$('overlay').remove();
							$('overlay-details').remove();
						}
					});
					
				}
			});
		}
		else
		{
			new Effect.MoveBy($('overlay'), 0, $('overlay').getWidth(), {
				duration: 0.75,
				afterFinish: function() {
					if (window.location.href.toQueryParams().fadeout == 'true')
					{
						new Effect.Opacity($('design-collage'), {from: 0, to: 1, duration: 0.5});
					}
					new Effect.Opacity($('inspirational-ideas-intro'), {from: 0, to: 1, duration: 0.5});
					$('overlay').remove();
				}
			});
			
		}
	},
	
	showHotspot: function(e) {
		hotspot = Event.element(e);
		hotspotDetail = $(hotspot.id + '-detail');
		hotspotDetail.setOpacity(0);
		hotspotDetail.setStyle(
			{
				'display' : 'block',
				'top' : parseInt(hotspot.getStyle("top")) - 33 + "px",
				'left' : parseInt(hotspot.getStyle("left")) - 10 + "px"
			}
		);
		new Effect.Opacity(hotspotDetail, {from: 0, to: 1, duration: 0.5});
	},
	
	hideHotspot: function(e) {
		hotspotDetail = Event.element(e);
		new Effect.Opacity(hotspotDetail, {from: 1, to: 0, duration: 0.5});
		hotspotDetail.setStyle({'display' : 'none'});
	}
}