var formatArtistLink	= function( elCell, oRecord, oColumn, sData )
{
	// Return a link formatted to point to the artist URL
	elCell.innerHTML = "<a href=\"/" + oRecord.user_jjUrl + "/\">" + sData + "</a>";
};


var formatSongLink	= function( elCell, oRecord, oColumn, sData )
{
	// Return a link formatted to point to the song URL
	elCell.innerHTML = "<a href=\"/" + oRecord.user_jjUrl + "/songs/" + oRecord.song_id + "/\">" + sData + "</a>";
};

var formatterSongClip = function( elCell, oRecord, oColumn, sData )
{
	if( oRecord.song_clip == 1 )
	{
		elCell.innerHTML	= "<div class=\"hasClip\">&nbsp;</div>";
	}
	else
	{
		elCell.innerHTML	= "";
	}
};

var formatDate	= function( elCell, oRecord, oColumn, sData )
{
	// Use YUI to parse the date in your JSON feed as if it were coming from markup
	// For some reason, YUI skips this step if you're not parsing from HTML
	objDate				= YAHOO.widget.Column.parseDate( sData );

	// Populate the cell with the proper date
	elCell.innerHTML	= ( objDate.getMonth() ) + "/" + objDate.getDate()  + "/" + objDate.getFullYear();

	// Assign the YUI date class to a var
	strClassname		= YAHOO.widget.DataTable.CLASS_DATE;
	
	// Add the YUI class to the table cell (for styling creaminess) 
	YAHOO.util.Dom.addClass( elCell, strClassname );
};

var mySortAsc = function(a, b) {
var compFnc = YAHOO.util.Sort.compareAsc;
var comp = compFnc(parseInt(a.song_listens), parseInt(b.song_listens));
return comp;
}

var mySortDesc = function(a, b) {
var compFnc = YAHOO.util.Sort.compareDesc;
var comp = compFnc(parseInt(a.song_listens),parseInt( b.song_listens));
return comp;
}


var on_songListReady	= function()
{
	// Once the song list is ready, let's create a default "all songs" datatable
	fnSongListUpdate( "" );
};


var on_genreFilterReady	= function()
{
	// Once the genre filter list is loaded, retrieve all the genre list items
	aryGenres	= YAHOO.util.Dom.getElementsByClassName( "genreLink" );

	// Loop each list item
	for( i=0; i < aryGenres.length; i++ )
	{
		// Attach the click listeners to the genre links
		YAHOO.util.Event.addListener( aryGenres[i], "click", on_genreLinkClick, null, null );
	}
};


var on_genreLinkClick = function( objEvent )
{
	// When a genre link is clicked, we want to first retrieve the clicked element
    var objTarget	= YAHOO.util.Event.getTarget( objEvent );

	// Then we can request a new datatable be built using our elements "Rel" value as the genre slug
	fnSongListUpdate( "genre=" + objTarget.getAttribute( "rel" ) );

};

var fnSongListUpdate = function( strQueryString )
{
	// Creates a new datatable based on the passed in query string

	// Snag the song list element
	objSongList		= document.getElementById( "songList" );
	if( objSongList )
	{
		// Clear out the song list so we can work with a clean slate
		objSongList.innerHTML	= "";
	}

	// Set our column headers
	// Some have custom formatters, as explained above
	var songColumnHeaders		= [
		{ key:"song_clip", text:" ", type:"string", sortable:true, formatter:formatterSongClip },
		{ key:"song_title", text:"Song Title", type:"string", sortable:true, formatter:formatSongLink },
		{ key:"user_name", text:"Artist Name", type:"string",sortable:true, formatter:formatArtistLink },
		{ key:"genre_title", text:"Genre", type:"string", sortable:true },
		{ key:"song_listens", text:"Listens", type:"number", sortable:true, sortOptions:{ascFunction:mySortAsc,descFunction:mySortDesc} },
		{ key:"song_created", text:"Created", type:"date", sortable:true, formatter:formatDate },
		{ key:"song_updated", text:"Last Updated", type:"date", sortable:true, formatter:formatDate }
	];
	
	// Create our columnset object
    var songColumnSet			= new YAHOO.widget.ColumnSet( songColumnHeaders );

	// Attach our json script as the beautiful datasource
	var myDataSource			= new YAHOO.util.DataSource( "/api/songData.json" );

	// We're expecting a JSON object to be returned, so lets let YUI know that
	myDataSource.responseType	= YAHOO.util.DataSource.TYPE_JSON;

	// Specify the format of the response we're expecting from JSON
	myDataSource.responseSchema = {
		resultsList: "ResultSet.Result",
		fields: [ "song_title", "user_name", "genre_title", "song_listens", "song_created", "song_updated", "user_jjUrl", "genre_slug", "song_id", "song_clip" ]
	};

	// Some configuration lovin' for our datatable.
	// We're using the paginator design pattern built into YUI
	var myConfigs = { 
		paginator: true, 
		paginatorOptions: { 
			rowsPerPage: 20,
			pageLinks: 5 
		},
		initialRequest: strQueryString
	}

	// And now we create the datatable 
	var myDataTable					= new YAHOO.widget.DataTable( "songList", songColumnSet, myDataSource, myConfigs );

	// We're resetting this value to 0
	// It determines the class name of our <th>.  If we didn't reset it here, it would incrementally add across multiple tables
	// That means if we created a "Second datatable", regardless of if we deleted the first or not, it would call the first
	// column "column 6" because our first datatable had 5 columns
	YAHOO.widget.Column._nCount		= 0;

	// Grab the current BG color
	strBGColor	 = YAHOO.util.Dom.getStyle( "songList", "backgroundColor" )

	// Color fade the new table
	var attributes = {
		backgroundColor: { from:  "#FFFF9C", to: strBGColor }
	};

	// Fade the background of the table from manilla yellow to whatever our bg color is
	var anim = new YAHOO.util.ColorAnim( "songList", attributes, 2, YAHOO.util.Easing.easeOut );

	// Start the fade
	anim.animate();
};


var on_searchSongsReady = function()
{
// Instantiate an XHR DataSource and define schema as an array:
//     ["Multi-depth.object.notation.to.find.a.single.result.item",
//     "Query Key",
//     "Additional Param Name 1",
//     ...
//     "Additional Param Name n"]

	objAutocompleteConfig						= new YAHOO.widget.DS_XHR( "/api/search.json", ["ResultSet.Result","Title"] );
	objAutocompleteConfig.queryMatchContains	= true;
	objAutocompleteConfig.scriptQueryAppend		= "";
	
	// Instantiate AutoComplete 
	objAutocomplete					= new YAHOO.widget.AutoComplete( "query", "searchComplete", objAutocompleteConfig );
	objAutocomplete.useShadow		= false;
	objAutocomplete.allowBrowserAutocomplete = false;
	objAutocomplete.formatResult	= function( objResultItem, strQuery) {
		return objResultItem[1].Title;
	};
	
	objAutocomplete.doBeforeExpandContainer = function( objTextbox, objContainer, strQuery, aryResults) {
		var aryPos	= YAHOO.util.Dom.getXY( objTextbox );
		aryPos[1]	+= YAHOO.util.Dom.get( objTextbox ).offsetHeight;
		YAHOO.util.Dom.setXY( objContainer, aryPos );
		return true;
	};
	
	
	var on_autocompleteSelect = function( objType, aryArgs )
	{
		var objAutoComp	= aryArgs[0]; // the autocomplete instance
		var elListItem	= aryArgs[1]; // the result list item element
		
		if( aryArgs[2][1].Url )
		{
			location.href = aryArgs[2][1].Url;
		}
		
	};
	
	objAutocomplete.itemSelectEvent.subscribe( on_autocompleteSelect );
	/*objAutocomplete.itemSelectEvent = function( objSelf, objTarget, objData )
	{
		alert( objTarget.id );
	};*/
	
	// Attach a listener to the form submission
	//objAutocomplete._onFormSubmit( on_searchFormSubmit, objAutocomplete );
	YAHOO.util.Event.addListener( "searchForm", "submit", on_searchFormSubmit, null, null );

};



var on_searchFormSubmit = function( objEvent )
{
	// Snag the event target
	objQueryField		= document.getElementById( 'query' );
	if( objQueryField.value )
	{
		fnSongListUpdate( "query=" + objQueryField.value );	
	}

	objEvent.cancelBubble = true; // for IE
	if( typeof objEvent.stopPropagation == 'function' )
	{
		objEvent.stopPropagation();
	}

	objEvent.returnValue = false; // for IE
    if( typeof objEvent.preventDefault == 'function' )
	{
		objEvent.preventDefault();
	}
};


YAHOO.util.Event.onAvailable( "songList", on_songListReady, on_songListReady, true );
YAHOO.util.Event.onAvailable( "genreFilter", on_genreFilterReady, on_genreFilterReady, true );
YAHOO.util.Event.onAvailable( "searchSongs", on_searchSongsReady, on_searchSongsReady, true );