$(document).ready(function() {
	
	// Update the sample colours as the slider is moved
	$(".slider").bind('slide',function () {
		var red = parseInt($("#red").val());
		var green = parseInt($("#green").val());
		var blue = parseInt($("#blue").val());
		var range = parseInt($("#range").val());
		
		displaySampleColour(red,green,blue,range);
	});

	
	// Perform a search for the colour once the slider is stopped
	$(".slider").bind('slidestop',function () {
		var red = parseInt($("#red").val());
		var green = parseInt($("#green").val());
		var blue = parseInt($("#blue").val());
		var range = parseInt($("#range").val());
				
		getRecords(red,green,blue,range);
	});


	// Click on a sample colour
	$('#examples area').click(function(event) {
		event.preventDefault();

		var link = $(this).attr('href');
		var link = link.split(',');
		
		var red = link[0];
		var green = link[1];
		var blue = link[2];
		var range = link[3];
		
		var value = $('#redSlider').slider('option', 'value', red);
		var value = $('#greenSlider').slider('option', 'value', green);
		var value = $('#blueSlider').slider('option', 'value', blue);
		var value = $('#rangeSlider').slider('option', 'value', range);
		$('#red').val(red);
		$('#green').val(green);
		$('#blue').val(blue);
		$('#range').val(range);
		
		displaySampleColour(red,green,blue,range);
		
		getRecords(red,green,blue,range);
		
	});


	// Click on a thumbnail
	$("#results li a").livequery('click',function(event) {
		event.preventDefault();
		var url = $(this).attr('href').split('/');
		var id = url[url.length-1];
		
		closeOverlay();
		getDetailedRecord(id);
	});



	// When a user clicks on the close button, remove the overlay
	$('.close').click(function(event) {
		event.preventDefault();
		closeOverlay();
	});



	// close the overlay
	function closeOverlay() {
		$('#record').find('li').removeAttr("style");
		$('#title').empty();
		$('#creator').empty();
		$('#thumbnail').empty();
		$('#overlay').hide('slow');
	}



	function displaySampleColour(red,green,blue,range) {
		
		var rgb = red +','+ green +','+ blue;
		var rgbLower = (red-range) +','+ (green-range) +','+ (blue-range);
		var rgbUpper = (parseInt(red)+parseInt(range)) +','+ (parseInt(green)+parseInt(range)) +','+ (parseInt(blue)+parseInt(range));
		
		//$("#sampleColour").css("background-color","rgb("+ rgb +")");
		//$("#sampleColourLower").css("background-color","rgb("+ rgbLower +")");
		//$("#sampleColourUpper").css("background-color","rgb("+ rgbUpper +")");
		$("body").css("background-color","rgb("+ rgb +")");
	}


	function getRecords(red,green,blue,range) {
		// Make sure the about text is gone for the first set of records
		$("#about").css("display","none");
		//$("#results").css("display","visible");
		
		
		// Empty any previous results and scroll to the top of the page
		$("#results").empty();
		$("html, body").animate({scrollTop:0}, 0);
		
		
		$.ajax({ 
			type: 'GET', 
			url: 'http://www.paulhagon.com/commonscolour/pickcolour.php', 
			data: 'r='+ red +'&g='+ green +'&b='+ blue +'&range='+ range,
			dataType: 'xml', 
			success: function(xml) {		
				var id='';
				var owner = '';
				var thumbnail = ''
				
				$('#results').empty();
				var i= 0;
				
				$(xml).find('item').each(function() {
					var id = $(this).find('id').text();
					var owner = $(this).find('owner').text();
					var thumbnail = $(this).find('thumbnail').text();
					//console.log("PI=",pi);
					i++;
					$('<li></li>').html('<a href="http://www.flickr.com/'+ owner +'/'+ id +'"><img src="'+ thumbnail +'" /></a>').appendTo('#results');
				});		
				
				
				// If there are no results display a message
				if(i == 0) {
					$('<li></li>').html('Hmmm, nothing here with that colour in it').appendTo('#results');
				}
			}
		});
	}
	
	
	
	// Get record details from the OAI-PMH repository
	// http://www.nla.gov.au/apps/oaicat/servlet/OAIHandler?verb=GetRecord&metadataPrefix=oai_dc&identifier=oai:nla.gov.au:nla.pic-vn3078298
	function getDetailedRecord(id) {
		
		
			$.ajax({ 
			type: 'GET', 
			url: 'http://www.paulhagon.com/commonscolour/detail.php', 
			data: 'id='+ id,
			dataType: 'xml', 
			success: function(xml) {		
				
					var title = $(xml).find('title').text();
					var owner = $(xml).find('owner').text();
					var url = $(xml).find('url').text();
					var link = $(xml).find('link').text();
					var publisher = $(xml).find('publisher').text();
					var relation = $(xml).find('relation').text();
					var type = $(xml).find('type').text();
			//alert(title);
				$('#title').append(title);
				$('#creator').append(owner);
				$('#thumbnail').append('<a href="'+ link +'"><img src="'+ url +'" alt="'+ title +'" /></a>');
				
				$('#overlay').show('slow');

			}
		});
	}
	
		
});