$(function() {

	// move person callout person to layer 5
	var calloutPerson = $('#callout-person');
	var layer5 = $('.layer-5');
	layer5.prepend(calloutPerson);
	var calloutPersonLabel = $('#callout-person-label');
	calloutPerson.after(calloutPersonLabel);

	// prepare animation
	// - gather DOM elements
	// - create 4 slides
	// - hide slides right after creation
	// - show first slide
	var links = $('#callout-navigation ul li a');
	var photos = $('#photo .workarea-photo');
	var contents = $('#callout-content .content');
	var personImages = $('#callout-person .person-image');
	var personLabels = $('#callout-person-label .person');

	var slides = [];
	for (var i=0; i<links.length; i++) {
		slides[i] = {
			link: $(links[i]),
			photo: $(photos[i]),
			content: $(contents[i]),
			personImage: $(personImages[i]),
			personLabel: $(personLabels[i]),

			init: function() {
				this.initHover();
				this.hide();

				var self = this;
				this.link.click(function(e) {
					e.preventDefault();
					self.animateShow();
					stopAutoAdvance();
				});
			},

			initHover: function() {
				var self = this;
				this.personImage.hover(function(e) {
					$('#callout-person-label').show();
					self.personLabel.show();
				});
				$('#callout-person-label').mouseleave(function(e) {
					$('#callout-person-label').hide();
					self.personLabel.hide();
				});
			},

			hide: function() {
				this.link.removeClass('current');
				this.photo.hide();
				this.content.hide();
				this.personImage.hide();
				this.personLabel.hide();
			},

			show: function() {
				this.link.addClass('current');
				this.photo.show();
				this.content.show();
				if ($('html').hasClass('ie8')) {
					// need to 'reset' opacity state for IE8, otherwise :hover doesn't work
					this.content.find('.read-more a').css('opacity', 1);
				}
				this.personImage.show();
				this.personLabel.show();

				window.currentSlide = this;
			},

			animateShow: function() {
				var currentSlide = window.currentSlide;

				currentSlide.link.removeClass('current');
				this.link.addClass('current');

				var self = this;
				currentSlide.content.parent().fadeOut(600, function() {
					currentSlide.content.hide();
					self.content.show();
					if ($('html').hasClass('ie8')) {
						self.content.find('.read-more a').css('opacity', 1);
					}
					self.content.parent().fadeIn(400, function() {
						currentSlide.photo.fadeOut(600);
						self.photo.fadeIn(600);

						currentSlide.personImage.fadeOut(400, function() {
							self.personImage.fadeIn(400);
						});
					});
				});

				window.currentSlide = self;
			}
		};

		slides[i].init();
	}

	if (links.length) {
		// start slideshow if there are workareas
		slides[0].show();
	}

	// create automatic animation
	var advanceSlide = function() {
		if (window.currentSlide && links.length > 1) {
			nextSlideIndex = ($.inArray(window.currentSlide, slides) + 1) % 4;
			slides[nextSlideIndex].animateShow();
		}
	};

	var autoAdvance = window.setInterval(function() {
		advanceSlide();
	}, 8000);

	var stopAutoAdvance = function() {
		clearInterval(autoAdvance);
	};
});