//////////////////////////////////////////////////////////////////
//                                  														//
//								jPlayer and Vimeo Integration 			 					//
//									By Colin Calnan. May 2010										//
//																															//
//		The  playlist is created using an external XML file				//
//             				             															//
//////////////////////////////////////////////////////////////////

// jPlayer API - http://www.happyworm.com/jquery/jplayer/latest/developer-guide.htm
// VIMEO API - http://vimeo.com/api/docs/moogaloop

// To embed the video, simply create a div with the id of vimeo and in that div place the ID of the vimeo video (e.g.10781643)...
// To embed the wimpy player, simply create a div with the id of 'wimpy-player' and it will be inserted into that div...

// Define a few strings...
var audioPath = '/audio/';
var audioPlayerStrings = { nowPlaying: 'Now Playing…', pause: 'Pause', play: 'Play'  }


// Function for generating random numbers:
function randomNumber(max) {
	return Math.floor(Math.random() * max)
}


// Pull in XML playlist for wimpy player using AJAX
$(function() {
  // Embed the vimeo video...
	vimeo_embed($('#vimeo').text(), 'vimeo');
	var video = $('#vimeo')[0];
	// Get the playlist, process it, choose randomly from the available tracks, and play the chose item...
	$.ajax({
  	type: 'GET',
    url: '/Scripts/playlist.xml',
    dataType: 'xml',
    success: function(xml) {
    	var files = new Array(), titles = new Array(), tracks = new Array(); // Set up various storage arrays...
    	$(xml)
    		.find('Track') // Find track elements...
    		.each(function(n) { // Loop through them...
    			tracks[n] = new Array(); // Create a new index in the tracks array for this track...
    			tracks[n]['file'] = audioPath + $(this).find('File').text(); // File path for this item...
    			tracks[n]['title'] = $(this).find('Title').text(); // Title of this item...
    			tracks[n]['concert'] = $(this).find('ConcertID').text(); // Concert id for this item...
    		});
    	var random = randomNumber(tracks.length); // Get a random number between 0 and the array length - 1...
    	// Build the controller markup:
			$buttons = { // We need some buttons...
				play: $('<img/>', {
					alt: audioPlayerStrings.play,
					id: 'jplayer_play',
					src: '/Scripts/wimpy/b_play_small.png'
				}).click(function() {
						$('#jPlayer').jPlayer('play');
						$(this).hide();
						$('#jplayer_pause').show();
						// Pause the Vimeo video
	   				if($('#vimeo').length >0) {
	   					var video = $('#vimeo')[0];
	   					video.api_pause();
	   				}
					}).hide(),
				pause: $('<img/>', {
					alt: audioPlayerStrings.pause,
					id: 'jplayer_pause',
					src: '/Scripts/wimpy/b_pause_small.png'
				}).click(function(){
					$('#jPlayer').jPlayer('pause');
					$(this).hide();
					$('#jplayer_play').show();
				})
			}
			$controller = $('<div/>', {id: 'jplayer_controller'}).append($buttons.play, $buttons.pause); // We need a container for the buttons too...
			$concertLink = $('<a/>', { // We also need a link to the concert...
				href: '/events/concert_template.cfm?concertid=' + tracks[random]['concert'],
				html: 'More&hellip;' 
			});
			// Now assemble it all:
			$('#audio-player').append(
				$('<h3/>', {html: audioPlayerStrings.nowPlaying}), // First the heading...
				$controller, // Then the controller markup...
				$('<p/>', {id: 'jplayer_track-info', text: tracks[random]['title']}).append(' ', $concertLink),  // Then the track info...
				$('<div/>', {id: 'jPlayer'})); // Lastly, we need to place the controller on the page, as well as a div for the actual player markup...
			$('#jPlayer').jPlayer({ // Finally, we need to get the player going...
				ready: function(){
					this.element
						.jPlayer('setFile', tracks[random]['file'])
						.jPlayer('play')
						.jPlayer('onSoundComplete', function(){
							$('#jplayer_play').show();
						});
				},
				volume: 50,
				swfPath: '/Scripts/jPlayer',
				errorAlerts: false,
				nativeSuport: false,
				customCssIds: false
			})
    } // Success function end  
  }); 
});


function vimeo_embed(video_id, swf_id) {
	// Run the javascript when the page is ready
	var flashvars = {
	  clip_id: video_id,
	  show_portrait: 1,
	  show_byline: 1,
	  show_title: 1,
		js_api: 1, // required in order to use the Javascript API
		js_onLoad: 'vimeo_player_loaded', // moogaloop will call this JS function when it's done loading (optional)
		js_swf_id: swf_id // this will be passed into all event methods so you can keep track of multiple moogaloops (optional)
  };
  var params = {
		allowscriptaccess: 'always',
		allowfullscreen: 'true'
	};
	var attributes = {};
	
	// For more SWFObject documentation visit: http://code.google.com/p/swfobject/wiki/documentation
	return swfobject.embedSWF("http://vimeo.com/moogaloop.swf", swf_id, "479", "324", "9.0.0","expressInstall.swf", flashvars, params, attributes);
}


function vimeo_player_loaded(swf_id) {
	video = document.getElementById(swf_id);
	video.api_addEventListener('onPlay',	'vimeo_on_play');
	video.api_addEventListener('onFinish','vimeo_on_finish');		
}
		

function vimeo_on_play(swf_id) {
	$('#jPlayer').jPlayer('pause');
	$('#jplayer_play').show();
	$('#jplayer_pause').hide();
}
		

function vimeo_on_finish(swf_id) {
	$('#jPlayer').jPlayer('play');
	$('#jplayer_play').hide();
	$('#jplayer_pause').show();
}