$(function() {

	// Init Top stories
	initTopStories();

});

/*------------------------------------------------------------------------------
 Top Stories
------------------------------------------------------------------------------*/
// Playlist paused by default
var playlistPlay = false;
// Set duration (ms) of each story when in play mode
var playlistDuration = 8000;

function initTopStories() {
	
	// Build Playlist and insert
	var playlist = '<div id="playlist"><ul>';
	$('.view-top-stories .permalink').each(function(){
		playlist += '<li>'+ $(this).html() +'</li>';
	});
	playlist += '</ul></div>';
	$('.view-top-stories').append(playlist);
	$('.view-top-stories').append('<div id="storyprogressbase"></div>');
	
	// Give playlist adequate width
	//var playlistWidth = $('#playlist li').length * 100;
	//$('#playlist ul').width(playlistWidth);
	
	// Set first story as active
	$('.view-top-stories .top-story').eq(0).addClass('active');
	$('#playlist li').eq(0).addClass('active');
	
	// Setup click handler
	$('#playlist li a').click(
		function() {
			playlistGotoAndStop(this);
			this.blur();
			return false;
		}
	);
	
	// Start playlist, if needed
	if ($('.view-top-stories .permalink').length > 1) {
		// Play when ready
		setTimeout("playlistStart()", 5000);
	}
	
}
function playlistStart() {
	playlistPlay = true;
	playlistGotoAndPlay($('#playlist li.active a').eq(0)); // Need a better way of doing this..
}

function playlistStop() {
	// Stop the rotating and remove and progress bars
	playlistPlay = false;
	if($('#storyprogress').length > 0) {
		$('#storyprogress').remove();
	}
}
function playlistGotoAndStop(story) {
	playlistStop();
	
	// Make this active
	$(story).parents('ul').children('li').removeClass();
	$(story).parents('li').addClass('active');
	
	// Get story ID and show the story
	var storyID = $(story).attr('href');
	storyID = storyID.split('#');
	storyID = '#' + storyID[1];
	playlistShowStory(storyID);
}
function playlistGotoAndPlay(story) {
	// Get story ID
	var storyID = $(story).attr('href');
	storyID = storyID.split('#');
	storyID = '#' + storyID[1];
	
	// Kill any current progress bar
	if($('#storyprogress').length > 0) {
		$('#storyprogress').remove();
	}
	
	// Make this active and add the progress bar
	$(story).parents('ul').children('li').removeClass();
	$(story).parents('li').addClass('active');
	$('#storyprogressbase').append('<div id="storyprogress"></div>');
	
	// Get story ID and show the story
	var storyID = $(story).attr('href');
	storyID = storyID.split('#');
	storyID = '#' + storyID[1];
	playlistShowStory(storyID);
	
	// Animate progress, goto and play next story
	if (playlistPlay) {
		$('#storyprogress').width('0').animate({ 
	      width: 65
	    },
			playlistDuration,
			'linear',
			function() {
				if (playlistPlay) {
					if ($(story).parent('li').next().length > 0) {
						// Play the next one
						playlistGotoAndPlay($(story).parent('li').next().find('a'));
					} else {
						// Play the first one
						playlistGotoAndPlay($('#playlist li a').eq(0));
					}
				}
			}
		);
	}
}
function playlistShowStory(storyID) {
	// Fade old, show new, unless this one is already active
	$(storyID).addClass('hasPlayed');
	if($(storyID +".active").length < 1) {
		//$('.view-top-stories .top-story.active').fadeOut().removeClass('active');
		//$('.view-top-stories .top-story.active h3').hide();
		//$(storyID +' h3').hide();
		//$(storyID +' .text').css('bottom', '-120px').animate({bottom: 0}, 1000, 'linear', function(){$(storyID +' h3').show();});
		//$(storyID).fadeIn().addClass('active');
		$('.view-top-stories .top-story.active').hide().removeClass('active');
		$(storyID).show().addClass('active');
	}
}
function playerReady(obj) {
	document.getElementById(obj.id).addModelListener('STATE', 'playlistVideoStateChange');
};
function playlistVideoStateChange(obj) {
	if ( ! playlistPlay && (obj.newstate == 'IDLE' || obj.newstate == 'COMPLETED')) {
		playlistStart();
	}
	if (obj.newstate == 'PLAYING') {
		playlistStop();
	}
}

/* end of file */