$(document).ready(function() {
	
	$class = 'view-pick-fourth';
	
	$('.view-pick-type').click(function() {
		var val = $(this).val();

		$('.view-pick-all').hide();
		$('.view-pick-'+val).show();

	});
	
}); 

// Listen for any attempts to call changePage().
$(document).bind( "pagebeforechange", function( e, data ) {
	
		
	// We only want to handle changePage() calls where the caller is
	// asking us to load a page by URL.
	if ( typeof data.toPage === "string" ) {
		
		
		// We are being asked to load a page by URL, but we only
		// want to handle URLs that request the data for a specific
		// category.
		var u = $.mobile.path.parseUrl( data.toPage ),

		// Users
		re = /^#user/;
		if ( u.hash.search(re) !== -1 ) {
			// We're being asked to display the items for a specific category.
			// Call our internal method that builds the content for the category
			// on the fly based on our in-memory category data structure.
			showUser( u, data.options );

			// Make sure to tell changePage() we've handled this call so it doesn't
			// have to do anything.
			e.preventDefault();
		}
		
		// In Game
		re = /^#ingame/;
		// if ( u.hash.search(re) !== -1) {
		// 	
		// 	showGame(u, data.options);
		// 	
		// 	e.preventDefault();
		// } // end if 
	}
});


// Load the data for a specific category, based on
// the URL passed in. Generate markup for the items in the
// category, inject it into an embedded page, and then make
// that page the current active page.
function showUser( urlObj, options )
{
	var uid = urlObj.hash.replace( /.*uid=/, "" ),

	// The pages we use to display our content are already in
	// the DOM. The id of the page we are going to write our
	// content into is specified in the hash before the '?'.
	pageSelector = urlObj.hash.replace( /\?.*$/, "" );

	var options = {'action':'getUserInfo', 'uid':uid};
	$.getJSON('ajax.php', options, function(data) {

		// Get the page we are going to dump our content into.
		var $page = $( pageSelector ),

		// Get the header for the page.
		$header = $page.children( ":jqmData(role=header)" ),

		// Get the content area element for the page.
		$content = $page.children( ":jqmData(role=content)" );


		// Find the h1 element in our header and inject the name of
		// the category into it.
		$header.find( "h1" ).html( data.header );

		// Inject the category items markup into the content element.
		$content.html( data.content );

		// Pages are lazily enhanced. We call page() on the page
		// element to make sure it is always enhanced before we
		// attempt to enhance the listview markup we just injected.
		// Subsequent calls to page() are ignored since a page/widget
		// can only be enhanced once.
		$page.page();

		// Enhance the listview we just injected.
		$content.find( ":jqmData(role=listview)" ).listview();

		// We don't want the data-url of the page we just modified
		// to be the url that shows up in the browser's location field,
		// so set the dataUrl option to the URL for the category
		// we just loaded.
		options.dataUrl = urlObj.href;

		// Now call changePage() and tell it to switch to
		// the page we just modified.
		$.mobile.changePage( $page, options );
	});
}

function showGame (urlObj, options) {
	var gid = urlObj.hash.replace( /.*game=/, "" ),

	pageSelector = urlObj.hash.replace( /\?.*$/, "" );
		
	var options = {'action':'getIngameDetails', 'gid':gid};
	$.getJSON('ajax.php', options, function(data) {

		// Get the page we are going to dump our content into.
		var $page = $( pageSelector ),

		// Get the header for the page.
		$header = $page.children( ":jqmData(role=header)" ),

		// Get the content area element for the page.
		$content = $page.children( ":jqmData(role=content)" );


		// Find the h1 element in our header and inject the name of
		// the category into it.
		$header.find( "h1" ).html( data.header );

		// Inject the category items markup into the content element.
		$content.html( data.content );

		// Pages are lazily enhanced. We call page() on the page
		// element to make sure it is always enhanced before we
		// attempt to enhance the listview markup we just injected.
		// Subsequent calls to page() are ignored since a page/widget
		// can only be enhanced once.
		$page.page();

		// Enhance the listview we just injected.
		$content.find( ":jqmData(role=listview)" ).listview();

		// We don't want the data-url of the page we just modified
		// to be the url that shows up in the browser's location field,
		// so set the dataUrl option to the URL for the category
		// we just loaded.
		options.dataUrl = urlObj.href;

		// Now call changePage() and tell it to switch to
		// the page we just modified.
		$.mobile.changePage( $page, options );
	});
}