(function($){

	/* DOM Ready
	 * -----------------------------
	 * When the DOM is ready (i.e. the
	 * document structure is known), 
	 * prepare elements for animation.
	 */
	$(document).ready(function(){
		$.debug = false;
		prepStage();
	});
	
	/* Window Load
	 * -----------------------------
	 * When all the window's images and
	 * files have loaded, begin animations.
	 */
	$(window).load(function(){
		prepStage();
		
		$('#marquee').css({ overflow: 'hidden', visibility: 'visible' });
		
		/* if the user's specified a slide to play, play it. else, play the first one */
		if(window.location.hash) playSlide($(window.location.hash));
		else playSlide($('#marquee .slide:random'));
		
		$('#marquee_clients li').click(function(){
			$selection = $($('a', this).attr('href')).eq(0);
			prepStage();
			$selection.css('display', 'block');
			$selection.siblings().css('display', 'none');
			
			/* gotta prep the slide, since we're not playing the whole thing */
			prepSlide($selection); showStore($selection);
			
			// return false;
		});
	});
	
	/* !prepStage : re-establish onReady settings (see above) */
	function prepStage() {
		$('#marquee').css({ overflow: 'hidden', visibility: 'hidden' });
		$('#marquee .name').css({ opacity: 0, top: '-1em', left: '-1em' });
		$('#marquee .details').css({ display: 'block' });
		$('#marquee .detail').css({ opacity: 0 });
		$('#marquee .description').css({ opacity: 0, bottom: '-5em' });
		$('#marquee .exterior').css({ opacity: 0 });
	}
	
	/* !prepSlide : re-establish onReady settings for a specific slide */
	function prepSlide($slide) {
		$slide.css({ display: 'block', opacity: 1 });
		$slide.siblings().css({ display: 'none', opacity: 0 });
		$('.name', $slide).css({ opacity: 0, top: '-1em', left: '-1em' });
		$('.details', $slide).css({ display: 'block' });
		$('.detail', $slide).css({ opacity: 0 });
		$('.description', $slide).css({ opacity: 0, bottom: '-5em' });
		$('.exterior', $slide).css({ opacity: 0 });
	}

	/* !playSlide : play through all of the slide-animation shenanigans */
	function playSlide($active_slide) {
		prepSlide($active_slide);
		
		/* Play the detail images */
		var $detail_timeout = 1;
		$('li.detail', $active_slide).each(function(){
			$t = $detail_timeout * 500;
			$(this).animate({
				opacity: 0
			}, ($t), function(){
				$(this).animate({
					opacity: 1
				}, $t);
			});
			$detail_timeout++;
		});
		
		/* Insert the "Detail/Retail Oriented" tagline */
		$active_slide.append('<div class="tagline"></div>');
		$('.tagline', $active_slide).append('<span class="tagline_detail">Detail</span> ');
		$('.tagline', $active_slide).append('<span class="tagline_retail">Retail</span> ');
		$('.tagline', $active_slide).append('<span class="tagline_oriented">Oriented<sup>SM</sup></span> ');
		$('.tagline', $active_slide).css({
			zIndex: 999,
			display: 'block',
			position: 'absolute',
			left: '16.25em', top: 0,
			textTransform: 'uppercase',
			fontSize: '1.6em',
			fontWeight: 'bold',
			overflow: 'visible',
			height: '20em',
			opacity: 0
		});
		$('.tagline_detail', $active_slide).css({
			color: '#1a0045',
			position: 'absolute',
			zIndex: 999,
			left: 0, top: '15em'
		});
		$('.tagline_oriented', $active_slide).css({
			color: '#ea831a',
			position: 'absolute',
			zIndex: 999,
			right: 0, top: '15em'
		});
		$('.tagline_retail', $active_slide).css({
			color: '#ea831a',
			opacity: 0,
			position: 'absolute',
			zIndex: 999,
			left: 0, top: '-100px'
		});
		
		setTimeout(function()	{
			animateTagline($active_slide);
		}, 2000);
		
		setTimeout(function(){
			$('.details', $active_slide).animate({
				opacity: 0
			}, 600);
		}, 4000);
		
		setTimeout(function(){
			showStore($active_slide);
		}, 5800);
	}
	
	/* !animateTagline : animate the tagline of the active slide */
	function animateTagline($active_slide) {
		$('.tagline', $active_slide).log('Animating the tagline.').animate({
			opacity: 1
		}, 500);
		
		setTimeout(function(){
			$('.tagline_retail').log('Animating "Retail"').animate({
				top: '15em', opacity: 1
			}, 1500, 'easeOutElastic');
			$('.tagline_detail').log('Animating "Detail"').animate({
				opacity: 0
			}, 800);
			$('.tagline_oriented').log('Animating "Oriented"').animate({
				color: '#230859'
			}, 1000).css('background-image', 'url(../media/graphics/oriented_violet.gif)');
		}, 2000);
	}
	
	/* !showStore : show the storefront image & details in the active slide */
	function showStore($active_slide) {		
		$('.details', $active_slide).css('opacity', 0);
		$('.exterior', $active_slide).css('opacity', 0);
		$('.description', $active_slide).css({
			bottom: '-5em',
			opacity: 0
		});
	
		$('.tagline', $active_slide).stop().animate({
			opacity: 0
		}, 800);
		$('.exterior', $active_slide).stop().animate({
			opacity: 1
		}, 1000, function(){
			$('.description', $active_slide).stop().animate({
				bottom: 0, opacity: .9
			}, 500, 'easeOutQuad');
		});
	}
	
})(jQuery);