var searchResults = new Array;
var numberOfResults = 8;
var selectedPage = 0;

$(document).ready( function() 
{
	$( "#searchResults" ).hide();
	$( "#navigator" ).hide();

	$( "a#nextPage" ).click( nextPage );
	$( "a#prevPage" ).click( prevPage );
	$( "a#submitButton" ).click( function() { $( "#navigator" ).fadeOut( 350 ); $("#spinner").fadeIn( 350 ); $("#searchResults").fadeOut( 350, getSearchResults ); });
});


function getSearchResults ()
{
	if ( $("#zipForm").val() != "" && $("#zipForm").val() != "Je postcode" )
	{
		var myPrice = $("input[name='priceForm']:checked").val();
		var myParams = { zip: $("#zipForm").val(), price: myPrice, distance: $("#distanceForm").val() };
	
		$.get( "searchResults.php", myParams, onSearchResults );
	}
	else
	{
		$("tbody#searchResultsBody").empty();		
		$("tbody#searchResultsBody").append( '<td colspan="3" class="noResults">Voer een postcode in</td>' );

		$("#spinner").fadeOut( 350 );		
		$("#searchResults").fadeIn( 350 );				
	}
}


function onSearchResults ( responseXML )
{
	searchResults = new Array;
	$("item", responseXML ).each( function( i ) 
	{
		var myItem = 
		{
			title: $(this).find( "title" ).text(),
			url: $(this).find( "url" ).text(),
			date: $(this).find( "date" ).text(),
			thumbnail: $(this).find( "thumbnail" ).text(),
			description: $(this).find( "description" ).text(),
			city: $(this).find( "city" ).text(),
			price: $(this).find( "price" ).text(),					
			distance: $(this).find( "distance" ).text()
		}
		
		searchResults.push ( myItem );	
	})	
	
	$("#spinner").fadeOut( 350 )
	selectedPage = 0;
	showResults( 0 );
	showNavigator( 0 );
}


function showResults ()
{
	$("tbody#searchResultsBody").empty();
	if ( searchResults.length > 0 )
	{
		var myStart = selectedPage * numberOfResults;
		var myEnd = ( selectedPage + 1 ) * numberOfResults;
		var myClass;

		$.each ( searchResults, function ( i, item )
		{
			if ( i >= myStart && i < myEnd )
			{
				myClass = i % 2 == 1 ? "even" : "odd";
				$("tbody#searchResultsBody").append( '<tr class="' + myClass + '"><td class="description" width="610"><div><div class="thumbnail"><a href="' + item.url + '" target="_blank"><img src="' + item.thumbnail + '" alt=""/></a></div><div class="info"><a href="' + item.url + '" target="_blank"><h2>' + item.title + '</h2></a><p>' + item.description + '</p><a href="' + item.url + '" target="_blank" class="button"><span>Bekijk op Marktplaats</span></a></div></div></td><td class="price" width="146">&euro; ' + item.price + '</td><td class="location" width="89"><strong>' + item.city + '</strong><br/>' + item.distance + 'km</td></tr>' );
			}		
		});
	}
	else
	{
		$("tbody#searchResultsBody").append( '<td colspan="3" class="noResults">Geen barrel gevonden</td>' );
	}

	$("#searchResults").fadeIn( 350 );
}


function showNavigator ( page )
{
	$("ol#pageList").empty();
	$("span#searchSummary").empty();
	
	var myNumberOfPages = Math.ceil(searchResults.length / numberOfResults );
	for ( var i = 0; i < myNumberOfPages; i++ )
	{
		if ( i == page )
			$("ol#pageList").append( '<li><span class="selectedPage">' + ( i + 1 )+ '</span></li>' );
		else
			$("ol#pageList").append( '<li><a href="#" class="pageButton"><span>' + ( i + 1 ) + '</span></a></li>' );
	}
	
	$( "span#searchSummary" ).append( '<strong>Resultaten ' + ( ( page * numberOfResults ) + 1 )+ '</strong>-' + ( ( page + 1 ) * numberOfResults ) + ' <strong>van</strong> ' + searchResults.length );
	$( "ol#pageList li a" ).click( selectPage );
	$( "#navigator" ).fadeIn( 350 );
}


function gotoPage ( page )
{
	selectedPage = page;
	$("#searchResults").fadeOut( 350, showResults );
	showNavigator( page );
	
	return false;
}


function nextPage ()
{
	var myPage = selectedPage + 1;
	if ( myPage < Math.ceil(searchResults.length / numberOfResults ) )
		gotoPage ( myPage );
		
	return false;		
}


function prevPage ()
{
	var myPage = selectedPage - 1;
	if ( myPage >= 0 )
		gotoPage ( myPage );
		
	return false;		
}


function selectPage ()
{
	var myPage = $(this).find( "span" ).text() - 1;
	gotoPage( myPage )
	
	return false;	
}


function onCustomPriceFormClick ()
{
	var myRadio = $("#price_custom");
	var myText = $("#customPriceForm");
	
	myText.removeClass( "inactive" ).addClass ( "active" );
	myRadio.attr("checked", true );
	
	if ( myText.val() == "Eigen bedrag" )
		myText.val( "" );
}


function onCustomPriceFormRelease ()
{
	var myRadio = $( "#price_custom" );
	var myText = $( "#customPriceForm" );

	if ( isNaN ( myText.val() ) )
	{
		myText.removeClass( "active" ).addClass ( "inactive" );
 		myText.val( "Eigen bedrag" );
	}
	else
		myRadio.val( myText.val() );
}


function onZipFormClick ()
{
	var myText = $( "#zipForm" );
	
	myText.removeClass( "inactive" ).addClass ( "active" );
	if ( myText.val() == "Je postcode" )
 		myText.val( "" );
}


function onZipFormRelease ()
{
	var myText = $( "#zipForm" );
	if ( myText.val().length < 4 || isNaN ( myText.val() ) )
	{
		myText.removeClass( "active" ).addClass ( "inactive" );
		myText.val( "Je postcode" );
	}
}