/**
 *	Showcase viewer - V1.00.080812 for jQuery
 *	---------------------------------------------
 *	(c) 2008 Lost Boys - http://www.lostboys.com
 *
 *	requires
 *		- jquery
 *		- jquery UI
 *		- jquery.lb.utils.js
 */

(function($){

	var CLASS_ACTIVE	= 'active',			// case selector active class
		CLASS_INACTIVE	= 'inactive',		// case selector active class
		CLASS_INTERACT	= 'interactive',	// interactive, shows chapters
		CLASS_HOVER		= 'hover',			// hover class
		CLASS_FULLSCREEN = 'fullscreen';

	function Showcase(element, settings) {
		var set = settings || {};
		
		this.root = element;
		this.viewer = $(set.viewer);
		this.player = $(set.player);
		this.flash = window[set.flash] || document[set.flash];
		this.current = $('.showcase.active');
		this.isPortalPage = $('#nav_main')[0]? false : true;
		
		$(window).bind('load', function(){
			$('.showcase:not(.active)').hide();
		});

		var self = this;
		$(this.root).hover(function(){
			self.toggleCaseSize(true);
		}, function() {
			self.toggleCaseSize(false);
		})
		
		$('#showcase-selector li').hover(function(){
			if($(element).hasClass(CLASS_ACTIVE)) {
			//	$('a', this).animate({height:'105px'}, 150);
			//	$(this).animate({marginTop:'-15px'}, 150, function(){ 
					$(this).addClass(CLASS_HOVER); 
			//	});
			}
		}, function(){
			if($(element).hasClass(CLASS_ACTIVE)) {
			//	$('a', this).animate({height:'90px'}, 150);
			//	$(this).removeClass('hover').animate({marginTop:'0'}, 150, function(){ 
					$(this).removeClass(CLASS_HOVER); 
			//	});
			}
		})

		$(document).addRelation(/showcase-/, this.handleClick, this);
		$('.showcase .chapters').draggable({ handle:'h3', containment: 'parent' });

		$(window).bindScoped('resize', this.handleResize, this);

		
		
		if(this.viewer.hasClass('single-case')) {
			this.singleCaseMode = true;
			this.handleResize();
/* Arjen
			setTimeout(function(){
				self.playSingleCase();
			}, 1000);
*/
			this.showSingleCasePreview();
			$('#playbutton').click(function(){
				self.playSingleCase();
			});
//End Arjen
		} else {
			this.handleResize();
			this.viewer.css({ height: this.caseHeight + 'px' });
		}		

		window.showCases = this; // there can be only one
	}

	Showcase.prototype = {
		handleClick:function(link, rel) {
			var type = /showcase-([^\$ ]+)/i.exec(rel)[1];
			switch (type) {
				
				// select a case from the list
				case 'select':
					var id = /(#.*)/.exec(link.getAttribute('href'))[1]; // #id, IE adds entire url to href
					this.setCase(id, link);
					return true;
				break;
				
				// play a selected case
				case 'play':
					// play movie, and then:
					this.playIntroduction(true);
					return true;
				break;

				case 'fullscreen':
					this.toggleFullscreen()
				break;

				// play chapter from selected case
				case 'chapter':
					var chapter = link.getAttribute('href');
					this.playChapter(chapter, link);
					return true;
				break;

				// close chapters
				case 'close':
					this.toggleChapters(false, true);
					return true;
				break;
			}
		},

		setCase:function(id, link) {
			var self = this;
			this.current.fadeOut(function(){
				$('#showcase-selector li.active').removeClass('active');
				$(link).bubbleTo('li').addClass('active');
				self.toggleChapters(false);
				
				var current = (self.current = $(id));
				current.fadeIn();
			});
		},

		toggleCaseSize:function(toggle) {
			if(this.csAnimating) return;

			var self = this;
			var root = $(this.root);
			root[toggle? 'addClass':'removeClass'](CLASS_ACTIVE);
			this.csAnimating = true;
			root.animate({
				height:		toggle? '104px' : '28px', 
				marginTop:	toggle? '75px' : '0'
			}, 250, function(){
				self.csAnimating = false;
			});
		},

		playIntroduction:function() {
			var self = this;
			var root = $(this.root);
			var description = $('.description', this.current);
			var content = $('.content', this.current);
			var intro = $('.introduction', content);

			// fade out the case selector
			root.animate({bottom: '-200px'});
			
			// hide secondary content
			$('#secondary').slideUp(500);

			// hide the navigation
			if(!this.isPortalPage) {
				$('#nav_main, #search').hide();
				$('#header').css({overflow:'hidden'}).animate({height:'65px'}, 500);
			}

			// size the viewer up
			this.viewer.animate({height: '500px'}, 500, function(){
				
				var viewHeight = $('p:first', content).height() + 20;
				content.css({height: viewHeight + 'px'});
				
				description.addClass('playing');

				var last = $('p:last', content);
				var contentHeight = last.height() + last[0].offsetTop;

				var scrollHeight = (contentHeight - viewHeight);
				var scrollTime = scrollHeight * 150;
				
				// scroll the intro text
				intro.animate({marginTop: -scrollHeight+'px'}, scrollTime, 'linear', function(){

					// fade out the desciption
					description.fadeOut();

					// move the background
					self.current.animate({
						backgroundPosition: '-600px 0'
					}, 1500, function(){

						// and finally display the chapters
						self.toggleChapters(true);
					});
				});
			});
		},

		playChapter:function(url, origin) {
			var description = $('.description', this.current);
			var chapters = $('.chapters', this.current);
			var self = this;

			try {
				$('.chapters li').removeClass(CLASS_ACTIVE);
				$(origin).bubbleTo('li').addClass(CLASS_ACTIVE);
			} catch (e) {
			}
			
			// fade out the description
			description.fadeOut();
			
			// move the background
			if(this.singleCaseMode) {
				// size the viewer down
				this.viewer.animate({height: '500px'}, 500);
			} else {
				this.current.animate({
					backgroundPosition: '-1000px 0'
				}, 1000);
			}

			// move the chapter window
			chapters.animate({
				left:'10px', 
				top:'50px'
			}, 250, 'swing', function(){

				self.player.show();
				
				// play or enqueue movie
				try {
					self.flash.playVideo(url);
				} catch (e) {
					FlashVideo.request(self.flash, url);
				}
			});
		},

		toggleFullscreen:function() {
			if(this.viewer.hasClass(CLASS_FULLSCREEN)) {
				this.viewer.removeClass(CLASS_FULLSCREEN);
			} else {
				this.viewer.addClass(CLASS_FULLSCREEN);
			}
		},

		toggleChapters:function(toggle, ending) {
			var description = $('.description', this.current);
			var chapters = $('.chapters', this.current);
			var intro = $('.introduction', this.current);

			if(toggle) {
				chapters.css({left:'300px', top:'150px'}).fadeIn();
			} else {
				description.removeClass('playing');
				intro.css({marginTop: 0 });

				// size the viewer down
				this.viewer.animate({height: this.caseHeight + 'px'}, 500);
				
				// bring back the navigation
				if(!this.isPortalPage && ending) {
					$('#header').css({overflow:'visible'}).animate({height:'97px'}, 500, function(){
						$('#nav_main, #search').show();
					});
				}

				// show the description
				description.fadeIn();

				if(this.singleCaseMode) {
					if(chapters.hasClass(CLASS_INACTIVE)) {
						chapters.animate({left:'20px', top:(this.caseHeight-150)+'px', height:'129px'});
						chapters.removeClass(CLASS_INACTIVE);
					} else {
						chapters.animate({left:'20px', top:(this.caseHeight-50)+'px', height:'29px'});
						chapters.addClass(CLASS_INACTIVE);
					}
				} else {
					// reset background
					this.current.animate({
						backgroundPosition: '1px 0'
					}, 1000);
				
					// hide the chapters
					chapters.fadeOut(function(){
						chapters.css({left:'300px', top:'150px'});
					});
				}
				
				// hide the player
				this.player.hide();

				// show the case selector
				$(this.root).animate({bottom:'25px'}, function(){
					
					// and show secondary content
					if(ending) {
						$('#secondary').slideDown(500);
					}
				});
			}
		},

		showSingleCasePreview:function() {
			//Arjen Move all animated elements to their final position, last animation frame should be visible from start
			var description = $('.description', this.current);
			var alineas = $('.description p', this.current);
			var chapters = $('.chapters', this.current);
			var sprite = $('.sprite', this.current);
			var self = this;
			
			this.current.css({opacity:100, backgroundPosition:'-750px 130px'});
			alineas.hide();
			alineas.eq(0).show();
			description.show();
			sprite.css({top:'50px', left:'800px'});

		},

		playSingleCase:function() {
			var description = $('.description', this.current);
			var alineas = $('.description p', this.current);
			var chapters = $('.chapters', this.current);
			var sprite = $('.sprite', this.current);
			var playbutton = $('#playbutton', this.current);
			var self = this;

			// Arjen reset sprite and chapters
			sprite.css({top:'-200px', left:'900px'});
			chapters.css({left:'20px', top:(this.caseHeight-150)+'px', height:'129px'});
			chapters.removeClass(CLASS_INACTIVE);
			chapters.hide();
			playbutton.hide();

			// hide secondary content
			$('#secondary').slideUp(500);

			this.viewer.animate({height: '500px'}, 500);

			var duration = 2000;
			setTimeout(function () {alineas.eq(0).fadeOut()}, duration);
			setTimeout(function () {alineas.eq(1).fadeIn()}, duration + 500);

			duration = duration + 3500;
			setTimeout(function () {alineas.eq(1).fadeOut()}, duration);
			setTimeout(function () {alineas.eq(2).fadeIn()}, duration + 500);

			duration = duration + 4500;
			setTimeout(function () {alineas.eq(2).fadeOut()}, duration);
			setTimeout(function () {alineas.eq(3).fadeIn()}, duration + 500);

			duration = duration + 4500;
			setTimeout(function () {alineas.eq(3).fadeOut()}, duration);
			setTimeout(function () {alineas.eq(4).fadeIn()}, duration + 500);

			this.animate({from:0, to:100, duration:8000}, function(i){
				this.current.css({opacity:(i/50)+0.5, backgroundPosition:'-750px '+(530 - (i*4))+'px'});
			}, this);
			
			setTimeout(function(){
				self.animate({from:0,to:100, duration:7000}, function(i){
					var left = (900 - i) + 'px';
					var top = (-200 + (2.5 * i)) + 'px';
					sprite.css({top:top, left:left});
				}, self);
				
				setTimeout(function(){
					chapters.css({left:'300px', top:'150px'}).fadeIn();
				}, 11000);

				setTimeout(function(){
					self.toggleChapters(false, true);
					alineas.eq(4).hide();
					alineas.eq(0).show();
					playbutton.show();
				}, 14000);
				
			}, 6000);
		},

		animate:function(options, callBack, scope, chain) {
			var from = options.from,
				to = options.to,
				duration = options.duration || 1000,
				frames = duration / 40,
				change = (to - from)/frames,
				pos = from,
				time = 0;

			callBack.call(scope, from);
			
			var timer = setInterval(function(){
				time += 40;

				pos = ((to-from) * Math.sin((time/duration) * (Math.PI/2))) + from;
				
				if(time >= duration) {
					callBack.call(scope, to);
					clearInterval(timer);
					chain && chain.call(scope)
				} else {
					callBack.call(scope, pos);
				}
			}, 40);
		},

		handleResize:function() {
			var height = Math.max(document.documentElement.scrollHeight || document.body.scrollHeight, 
				window.innerHeight || document.documentElement.clientHeight);
			
			var maxHeight = this.singleCaseMode? 500 : 400;
			var minHeight = this.singleCaseMode? 300 : 250;
			var offset = 400;
			
			this.caseHeight = Math.max(Math.min(height - offset, maxHeight), minHeight);
		}
	}

	$.registerPlugin('showcase', Showcase);

})(jQuery);