var albums = [];
var count = 0;
var curGroup = 0;
var numGroups = 0;
var songPlaying = false;
var playerReady = false;
var curTrack = "";
var selected = 0;

$(document).ready( function()
{
	// load data
	$.ajax({ type: "GET",
		url:"http://musicboxmx.com/admin/communicationNew.php",
		success: xmlLoaded,
		error: xmlErrorHandler
	});
	
	initAudioPlayer();
	createArrows();
});


$(window).unload(function()
{
	songPlaying = false;
	curTrack = "";
	selected = 0;
	$("#jpId").jPlayer('clearFile');
});

/**
 * Handler for the success event of an ajax request.
 * @param xml The loaded XML data
 */
function xmlLoaded( xml )
{
	// iterate through each album node within the node albums
	
	var theXml = parseXml(xml);
	$(theXml).find("albums album").each( createAlbum );
	
	numGroups = Math.floor( count / 4 );
}

function parseXml(xml)
{
	if (jQuery.browser.msie)
	{
		var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
		xmlDoc.loadXML(xml);
		xml = xmlDoc;
	}
	return xml;
}


/**
 * Creates an album - loads image for album cover, adds needed html / css,
 * mouseOver handler, and registers for click events.
 */
function createAlbum()
{
	var album 	= $(this);
	
	var url 	= album.attr("cdcover");
	var title 	= album.attr("title");
	
	var cdnum 	= album.attr("cdnum");
	var trackURL 	= "http://musicboxmx.com/serverMP3/serve.php?action=serveMP3&track=CDspotlight-" + cdnum.toLowerCase() + "&Cid=-1";
	
	var mbLink	= "http://musicboxmx.com/live/?cd=" + cdnum;
	
	$("#albumSlide").append("<div class='album'>");
		
	var a = $( ".album:eq(" + count + ")" );
	
	// position the album
	var xpos = ( ( count % 4 ) * 215 ) + Math.floor( count / 4 ) * 900;
	$(a).css( 'left', xpos + 70 );
	
	// load the album cover image
	$(a).append("<img src='" + url + "' width='175' height='175' alt='" + title + "' title='" + title + "' />");
	$(a).append("<div class='meta' style='display:none;'></div>");
	
	$(a).children('.meta').append("<div class='metaBG'></div>");
	$(a).children('.meta').append("<div class='metaHolder'></div>");
	$(a).children('.meta').children('.metaHolder').append("<h2 class='albumTitle'>" + title + "</h2>");
	$(a).children('.meta').children('.metaHolder').append("<p class='genre'>Genre: " + album.attr("genre") + "</p>");
	$(a).children('.meta').children('.metaHolder').append("<p class='albumDesc'>" + album.attr("desc") + "</p>");
	
	$(a).children('.meta').children('.metaHolder').append("<a href='#' class='playSample'><span class='icon'></span>Play Sample</a>");
	$(a).children('.meta').children('.metaHolder').append("<a href='#' class='playInBox'><span class='icon'></span>View in <span>MusicBox</span>Live</a>");

	$(a).children('.meta').children('.metaHolder').data( { id:count, track:trackURL } );
	$(a).children('.meta').children('.metaHolder').click( audioControlClicked );
	
	$(a).children('.meta').children('.metaHolder').children('.playInBox').data( { link:mbLink } );
	$(a).children('.meta').children('.metaHolder').children('.playInBox').click( linkClicked );

	
	// mouse over / out - hide / show meta data
	$(a).mouseover( function() { $(this).children('.meta').show(); });
	$(a).mouseout(  function() { $(this).children('.meta').hide(); });
	
	// store this album in the albums array
	albums.push( $(a) );
	
	// add to the incrementor
	count++;
}

function linkClicked( event )
{
	window.location = $(this).data("link");

}

function audioControlClicked( event )
{
	event.preventDefault();
	
	
	
	var id 		= $(this).data().id;
	var track 	= $(this).data().track;
	
	
	if ( songPlaying )
	{
		if ( curTrack == track )
		{
			// it is the same song, so stop and clear it.
			$("#jpId").jPlayer('clearFile');
			songPlaying = false;
			$(this).children('.playSample').html("<span class='icon'></span>Play Sample");
		}
		else
		{
			// it is not the same song, clear it, 
			$("#jpId").jPlayer('clearFile');
			var a = $( ".album:eq(" + selected + ")" );
			$(a).children('.meta').children('.metaHolder').children('.playSample').html("<span class='icon'></span>Play Sample");
			
			// and play the new one
			$("#jpId").jPlayer( "setFile", track ).jPlayer("play");
			songPlaying = true;
			curTrack = track;
			$(this).children('.playSample').html("<span class='iconStop'></span>Stop Sample");
			selected = id;
		}
	}
	else
	{
		if ( playerReady )
		{
			$("#jpId").jPlayer( "setFile", track ).jPlayer("play");
			songPlaying = true;
			curTrack = track;
			$(this).children('.playSample').html("<span class='iconStop'></span>Stop Sample");
			selected = id;
		}
	}
}


/**
 *  Handler for ajax error event.
 */
function xmlErrorHandler(  XMLHttpRequest, textStatus, errorThrown )
{
	//console.log( errorThrown );
}


/**
 *  Initializes the jPlayer audio player and registers soundComplete handler.
 */
function initAudioPlayer()
{
	// init the audio player
	$("#jpId").jPlayer({ ready: function () { playerReady = true; }, swfPath: "_script/jplayer/js" });
	
	// listen for the song complete event
	$("#jpId").jPlayer("onSoundComplete", songCompleteHandler );
}


/**
 *  Handler for soundComplete event.
 */
function songCompleteHandler()
{
	//console.log("song complete");
}


/**
 *  Creates a next and previous arrow button, sets up roll overs, and registers click handlers.
 */
function createArrows()
{
	// make arrow controls
	$("#albumSlide").append("<div id='nextArrow' class='arrow'></div>");
	$("#albumSlide").append("<div id='prevArrow' class='arrow'></div>");
	
	// mouse overs / outs
	$("#nextArrow").mouseover( function() { $(this).css( "background-position", "-32px 0px" ); });
	$("#nextArrow").mouseout(  function() { $(this).css( "background-position", "0px 0px" ); });
	
	$("#prevArrow").mouseover( function() { $(this).css( "background-position", "-32px -168px" ); });
	$("#prevArrow").mouseout(  function() { $(this).css( "background-position", "0px -168px" ); });
	
	// event listeners
	$("#nextArrow").click( arrowClicked );
	$("#prevArrow").click( arrowClicked );
}


/**
 *  Paginates the albums based on the arrow clicked.
 *  @param event Click Event
 */
function arrowClicked( event )
{
	var id = $( event.currentTarget ).attr("id");
	
	if ( id == "prevArrow" )
	{
		if ( curGroup > 0 )
		{
			for( var i=0; i < albums.length; i++ )
			{
				var a = albums[i];
				$(a).animate({ left: '+=900' }, { duration: 600 });
			}
			curGroup--;
		}
	}
	else if ( id == "nextArrow" )
	{
		if ( curGroup < numGroups - 1 )
		{
			for( var i=0; i < albums.length; i++ )
			{
				var a = albums[i];
				$(a).animate({ left: '-=900' }, { duration: 600 });
			}
			curGroup++;
		}
	}
}