/* Slide animations */

var HomepageSlideshow = {};
HomepageSlideshow.Easing = 'swing';
HomepageSlideshow.Rotating = true;
HomepageSlideshow.RotationSpeed = 8000;
HomepageSlideshow.FadeInSpeed = 2000;
HomepageSlideshow.SlideSizes = {
	slide0:220,
	slide1:187,
	slide2:119,
	slide3:167,
	slide4:129
};
HomepageSlideshow.SlidePositions = {
	state0:{
		slide1:{x:127,y:76},
		slide2:{x:466,y:220},
		slide3:{x:638,y:47},
		slide4:{x:870,y:165}
	},
	state1:{
		slide1:{x:45,y:30},
		slide2:{x:466,y:220},
		slide3:{x:638,y:47},
		slide4:{x:870,y:165}
	},
	state2:{
		slide1:{x:18,y:76},
		slide2:{x:215,y:83},
		slide3:{x:638,y:47},
		slide4:{x:870,y:165}
	},
	state3:{
		slide1:{x:127,y:76},
		slide2:{x:295,y:220},
		slide3:{x:450,y:45},
		slide4:{x:870,y:165}
	},
	state4:{
		slide1:{x:127,y:76},
		slide2:{x:466,y:220},
		slide3:{x:374,y:47},
		slide4:{x:608,y:55}
	}
};
HomepageSlideshow.WordPositions = {
	state1:{
		word1:{x:600,y:276,size:'28px'},
		word2:{x:830,y:100,size:'30px'},
		word3:{x:450,y:50 ,size:'36px'}
	},
	state2:{
		word1:{x:250,y:50 ,size:'24px'},
		word2:{x:830,y:100,size:'26px'},
		word3:{x:620,y:250,size:'30px'}
	},
	state3:{
		word1:{x:130,y:45 ,size:'30px'},
		word2:{x:550,y:300,size:'28px'},
		word3:{x:850,y:85 ,size:'26px'}
	},
	state4:{
		word1:{x:130,y:45 ,size:'28px'},
		word2:{x:220,y:290,size:'32px'},
		word3:{x:650,y:300,size:'24px'}
	}
}

$(document).ready( function() {
	
	HomepageSlideshow.SwitchTab('all');
	
	$("#homepage-tab-nav a").click( function() {
		var tabName = $(this).attr('data-tab');
		HomepageSlideshow.SwitchTab( tabName );
		$("#homepage-tab-nav li").removeClass('active');
		$(this).parent().addClass('active');
		
		_gaq.push(['_trackEvent','HP Category', tabName, 'Click']);
		
		return false;
	} );
	
});

HomepageSlideshow.SwitchTab = function( tabName ) {
	
	HomepageSlideshow.ActiveTab = tabName;
	
	// Load new data
	HomepageSlideshow.Slides = [];
	HomepageSlideshow.Slides = SlideshowData.stories[tabName];
	
	// TODO start preloading
	
	// Cleanup any existing slides
	if ( $('#slideshow-story-slides .story-slide').length ) {
		$('#slideshow-story-slides').fadeOut( 300, function() {
			$('#slideshow-story-slides .story-slide').remove();
			$('#slideshow-story-slides .featured-words').remove();
			HomepageSlideshow.DrawSlides();
		});
	} else {
		HomepageSlideshow.DrawSlides();
	}
	
	HomepageSlideshow.AutoPlay();
	HomepageSlideshow.FirstStateChange = setTimeout( 'HomepageSlideshow.ChangeState(1);', 2000 );
};

HomepageSlideshow.DrawSlides = function() {
	$( "#slideshow-story-template" ).tmpl( HomepageSlideshow.Slides ).appendTo( "#slideshow-story-slides" );
	$( "#slideshow-story-slides" ).hide().fadeIn( HomepageSlideshow.FadeInSpeed );
	$( ".story-slide" ).click( function() {
		var match = $(this).attr('id').match( /slide(\d+)$/ );
		var state = match[1];
		HomepageSlideshow.AutoPlay(); // reset auto play so it doesn't jump away immediately.
		if ( state != HomepageSlideshow.ActiveState ) {
			HomepageSlideshow.ChangeState( state );
		}
		
		_gaq.push(['_trackEvent','Click on HP story', HomepageSlideshow.ActiveTab, $(this).find('.slide-full-link').attr( 'href' ) ]);
		
		
	} );
	HomepageSlideshow.ActiveState = -1;
	HomepageSlideshow.ChangeState( 0, 0 );
};

HomepageSlideshow.Reset = function( callBack ) {
	var activeSlideID = '#slide'+HomepageSlideshow.ActiveState;
	// fade out the current image
	$(activeSlideID + ' .slide-image_bw').show();
	$('#slideshow-story-slides .featured-words').fadeOut(400);
	$(activeSlideID + ' .slide-image').fadeOut(100, function() {
	
		// fix sizes and positions
		for( i in HomepageSlideshow.SlidePositions.state0 ) {
			var slidePos = HomepageSlideshow.SlidePositions.state0[i];
			var size = HomepageSlideshow.SlideSizes[i] + 'px';
			
			// animate size & location of each slide
			$('#'+i).animate( {
				left: slidePos.x + 'px',
				top: slidePos.y + 'px',
				width: size,
				height: size
			}, {
				easing: HomepageSlideshow.Easing,
				duration: 300,
				complete: callBack
			} );
			
			if ( 'slide' + HomepageSlideshow.ActiveState == i ) {
				
				// start by removing the sidebar on the active tab, hiding the full-slide, and fading the image back to black and white
				$('#'+i+' .slide-image_bw_thumb').show();
				$('#'+i+' .full-slide').animate( { left:'70px' }, { duration:300, easing:HomepageSlideshow.Easing, complete: function() { $(this).hide(); } } );
				$('#'+i+' .slide-image_bw').animate( { width:size, height:size }, { duration:300, easing:HomepageSlideshow.Easing, complete: function() { $(this).hide(); } } );
				
			} else {
				// generically hide extras
				$('#'+i+' .slide-image_bw_thumb').show();
				$('#'+i+' .slide-image').hide();
				$('#'+i+' .slide-image_bw').hide();
			}
			
		}
		
		HomepageSlideshow.ActiveState = 0;
		
	});
};

HomepageSlideshow.ChangeState = function( state, speed ) {
	speed = ( ( speed === null ) ? 2000 : speed );
	
	if ( state == HomepageSlideshow.ActiveState ) {
		return;
	}
	
	if ( HomepageSlideshow.ActiveState != 0 && state != 0 ) {
		HomepageSlideshow.Reset( function() { HomepageSlideshow.ChangeState(state); } );
		return;
	}
		
	HomepageSlideshow.ActiveState = state;
	
	for( i in HomepageSlideshow.SlidePositions['state'+state] ) {
		var slidePos = HomepageSlideshow.SlidePositions['state'+state][i];
		var size = ( ( 'slide'+state == i ) ? HomepageSlideshow.SlideSizes.slide0 : HomepageSlideshow.SlideSizes[i] ) + 'px';
		
		// animate size & location of each slide
		$('#'+i).animate( {
			left: slidePos.x + 'px',
			top: slidePos.y + 'px',
			width: size,
			height: size
		}, {
			easing: HomepageSlideshow.Easing,
			duration: speed
		} );

		if ( 'slide'+state == i ) {
			
			// animate in the words
			$('#slideshow-story-slides .featured-words div').hide();
			$('#slideshow-story-slides .featured-words').hide().fadeIn(2000);
			$('#slide'+state+'_words').children().each( function() {
				var position = HomepageSlideshow.WordPositions[ 'state' + HomepageSlideshow.ActiveState ][ 'word' + $(this).attr('data-word') ];
				var offset = Math.floor(Math.random()*25+25);
				$(this).show()
					.css( { top: position.y, left: position.x + offset, fontSize: position.size, lineHeight: position.size } )
					.animate( { left:position.x }, 1000 );
			});
			
			// on the active slide, kick off extra animations
			$('#'+i+' .slide-image_bw_thumb').hide();
			
			// animate the black and white thumb to full-size
			$('#'+i+' .slide-image_bw').show().css( {
				width: HomepageSlideshow.SlideSizes[i],
				height: HomepageSlideshow.SlideSizes[i]
			} ).animate( { width:size, height:size }, {
				duration: speed,
				easing: HomepageSlideshow.Easing,
				complete: function() {
				
					// fade in the full color image
					$(this).parent().find('.slide-image').fadeIn( 500 );
					
					// grow the width to accomodate the details
					$(this).parent().animate( { width:'+=160px' }, { duration:500, easing:HomepageSlideshow.Easing } );
					
					// bring in the details
					$(this).parent().find('.full-slide')
						.show()
						.css( { left: '70px' } )
						.animate( { left:'225px' }, { duration:500, easing:HomepageSlideshow.Easing } );
				}
			});
		} else {
			// inactive slide, hide extras
			$('#'+i+' .slide-image_bw_thumb').show();
			$('#'+i+' .full-slide').hide();
			$('#'+i+' .slide-image').hide();
			$('#'+i+' .slide-image_bw').hide();
		}
	}

};

/* Auto play */

HomepageSlideshow.AutoPlay = function() {
	if ( HomepageSlideshow.FirstStateChange ) {
		clearTimeout( HomepageSlideshow.FirstStateChange );
		HomepageSlideshow.FirstStateChange = null;
	}
	if ( HomepageSlideshow.RotateTimer ) {
		clearInterval( HomepageSlideshow.RotateTimer );
	}
	HomepageSlideshow.RotateTimer = setInterval( function() {
		if ( HomepageSlideshow.Rotating ) {
			
			var state = HomepageSlideshow.ActiveState;
			state++;
			if ( state == 5 ) {
				state = 1;
			}
			
			HomepageSlideshow.ChangeState( state );
		}
	}, HomepageSlideshow.RotationSpeed );
}

$(document).ready( function() {		
	HomepageSlideshow.AutoPlay();
	
	// Pause tab switching when hovering
	$('#slideshow-story-slides').hover(
		function() { HomepageSlideshow.Rotating = false; },
		function() { HomepageSlideshow.Rotating = true; }
	);
	
	// Pause slideshow animations when browser tab is inactive
	$(window).focus( function() {
		HomepageSlideshow.Rotating = true;
	});
	
	$(window).blur( function() {
		HomepageSlideshow.Rotating = false;
	});
	
} );

/* Background text animations */

HomepageSlideshow.MarqueeLeft = function(el) {
	var toAnimate = $(el).width() / 2 * -1;
	$(el).css( {left:0} ).animate( {left:toAnimate}, 128000, "linear", function(){HomepageSlideshow.MarqueeLeft(this);} );
};

HomepageSlideshow.MarqueeRight = function(el) {
	var toAnimate = $(el).width() / 2 * -1;
	$(el).css( {right:0} ).animate( {right:toAnimate}, 128000, "linear", function(){HomepageSlideshow.MarqueeRight(this);} );
};

$(document).ready( function() {
	var i;
	// Create numbered rows, 1-6
	for ( i = 1; i <= 6; i++ ) {
		$('#slideshow-background').append( '<div class="textrow textrow'+i+'" />' );
	}
	
	// Populate the text rows with words
	$('.textrow').each( function() {
			
		// Generate random words to fill the width of the div
		var lastWord = '';
		var word = '';
		while( $(this).width() < 1280 ) {
			// make sure we don't duplicate words. It looks odd.
			while ( word == lastWord ) {
				word = SlideshowData.backgroundWords[ Math.floor( Math.random() * SlideshowData.backgroundWords.length ) ];
			}
			lastWord = word;
			$( '<span />' )
				.html( word )
				.addClass( 'word word' + Math.ceil( Math.random() * 5 ) ) // Apply one of 5 random sizes
				.appendTo( this );
		}
		
		// Duplicate the random words so that it wraps perfectly
		var textrow = this;
		$(this).find('.word').each( function() {
			$(this).clone().appendTo( textrow );
		});
	});
	
	// Fade the background into place if we're in a browser that doesn't do it badly.
	if ( $.browser.msie  && parseInt( $.browser.version, 10 ) <= 7 ) {
		$('#slideshow-background').show();
	} else {
		$('#slideshow-background').hide().fadeIn( HomepageSlideshow.FadeInSpeed );
	}
	
	// Start to animate the rows
	$('.textrow:odd').each( function() { HomepageSlideshow.MarqueeRight(this); });
	$('.textrow:even').each( function() { HomepageSlideshow.MarqueeLeft(this); });
	
});