var interval;
var currentColor;

$(document).ready(function() {
		
	$("#colorpicker").farbtastic(function callback(color) {
		colorPickerCallback(color);
	});

	// set color picker to default color
	var f = $.farbtastic("#colorpicker");
	f.setColor($("#color").val());

	$("#color_chips div a").click(function() {
		colorSearch($(this).attr("href")); // trigger ajax search
		f.setColor($(this).attr("href")); // update picker
		$(this).blur();
		return false;
	});

	// set an interval to watch #color  -- if the value has changed, update the color search
	interval = setInterval("checkColor()", 1500);
});

function colorPickerCallback(color) {
	$("#color").val(color);
	$("#user").css("background", color);
}

function checkColor() {
	if ($("#color").val() != currentColor) {
		currentColor = $("#color").val();
		colorSearch(currentColor); 
	}
}

function colorSearch(color) {
	color = color.replace("#", "");
	$.get("/photos/search/color/ajax/?hex=" + color, function(data) {
		$("#colorSearchResults").html(data);
	});
}