on_topArtistsReady	= function()
{
	this.columnHeaders	= [
		{ key:"due", text:"Artist", type:"string", sortable:true },
		{ key:"account", text:"L", type:"number",sortable:true },
		{ key:"quantity", text:"S", type:"number", sortable:true },
		{ key:"amount", text:"LPS", type:"number", sortable:true }
	];
    this.columnSet	= new YAHOO.widget.ColumnSet( this.columnHeaders );

	var topArtists	= YAHOO.util.Dom.get( "topArtists" );

	this.dataTable	= new YAHOO.widget.DataTable( topArtists, this.columnSet, null, { sortedBy:{ colKey:"amount", dir:"desc" }} );
};


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 fnArtistListUpdate = function( strQueryString )
{
	// Creates a new datatable based on the passed in query string


	// Snag the artist results element
	objArtistResults	= document.getElementById( "artistResults" );
	if( objArtistResults )
	{
		// Clear out the artist list so we can work with a clean slate
		objArtistResults.innerHTML	= "";
	}

	// Set our column headers
	// Some have custom formatters, as explained above
	var artistColumnHeaders		= [
		{ key:"user_name", text:"Artist Name", type:"string",sortable:true, formatter:formatArtistLink },
		{ key:"totalSongs", text:"Total Songs", type:"number", sortable:true },
		{ key:"totalListens", text:"Total Listens", type:"number", sortable:true }
	];
	
	// Create our columnset object
    var artistColumnSet			= new YAHOO.widget.ColumnSet( artistColumnHeaders );

	// Attach our json script as the beautiful datasource
	var myDataSource			= new YAHOO.util.DataSource( "/api/artistData.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: [ "user_name", "user_jjUrl", "totalSongs", "totalListens" ]
	};

	// 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( "artistResults", artistColumnSet, myDataSource, myConfigs );
	YAHOO.widget.Column._nCount		= 4;

	// Make the artists results visible
	YAHOO.util.Dom.setStyle( "artistResultsContainer", "display", "block" );
	
	// Grab the current BG color
	strBGColor	 = YAHOO.util.Dom.getStyle( "artistResults", "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( "artistResults", attributes, 2, YAHOO.util.Easing.easeOut );

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


var on_searchArtistsReady = 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		= "type=artist";
	
	// 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 )
	{
		fnArtistListUpdate( "type=artist&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( "topArtists", on_topArtistsReady, on_topArtistsReady, true );
YAHOO.util.Event.onAvailable( "searchArtists", on_searchArtistsReady, on_searchArtistsReady, true );