function checkNumber(min, max) {
	var num = onlyNumber;
	if (num >= min && max > num) { return true; } 
	else { return false; }
}

function loadColors(fromColor, toColor){
	
	var url = "graniteOptions.php?fromColor=" + fromColor + "&toColor=" + toColor;
	
	$('#granite-results').empty();
	
	$.getJSON(url, function(data) {
		
		$table = $('<table></table>');
		
		$.each(data, function(i,item){
			if(i % 5 == 0){
				//add new row row
				$table.append('<tr/>');
			}
			
			// create image
			$img = $("<img/>").attr("src", item.image).attr("width", 75).attr("height", 70);
			
			// create td
			$td = $("<td/>").append($img).append('<span class="title">' + item.name + '</span>');
			
			// append image to results table
			$('tr:last',$table).append($td);
		});
		
		$('#granite-results').append($table);
	});
}

var onlyNumber = 0;

$(document).ready(function() {
	
	if ($("#myslider").slider) {
		
		$("#myslider").slider({
			orientation: "horizontal",
			value:33, //33 final value
			min: 0,
			max: 100,
			stop: function(event, ui) {
				var percent = $('.ui-slider-handle').css('left');
				onlyNumber = percent.replace(/%/,"");

				if (checkNumber(-1, 3)) {  } 
				else if (checkNumber(3,8))    { loadColors("Black"); }
				else if (checkNumber(8, 11))  { loadColors("Black", "Blue"); }
				else if (checkNumber(11, 15)) { loadColors("Blue", "Blue"); }
				else if (checkNumber(15, 21)) { loadColors("Blue", "Brown"); }
				else if (checkNumber(21, 26)) { loadColors("Brown", "Brown"); }
				else if (checkNumber(26, 31)) { loadColors("Brown", "Red"); }
				else if (checkNumber(31, 36)) { loadColors("Red", "Red"); }
				else if (checkNumber(36, 41)) { loadColors("Red", "Pink"); }
				else if (checkNumber(41, 45)) { loadColors("Pink", "Pink"); }
				else if (checkNumber(45, 50)) { loadColors("Pink", "Green"); }
				else if (checkNumber(50, 55)) { loadColors("Green", "Green"); }
				else if (checkNumber(55, 61)) { loadColors("Green", "Gold"); }
				else if (checkNumber(61, 65)) { loadColors("Gold", "Gold"); }
				else if (checkNumber(65, 71)) { loadColors("Gold", "Cream"); }
				else if (checkNumber(71, 75)) { loadColors("Cream", "Cream"); }
				else if (checkNumber(75, 80)) { loadColors("Cream", "Beige"); }
				else if (checkNumber(80, 85)) { loadColors("Beige", "Beige"); }
				else if (checkNumber(85, 90)) { loadColors("Beige", "Gray"); }
				else if (checkNumber(90, 95)) { loadColors("Grey", "Grey"); }
				else if (checkNumber(95, 99)) { loadColors("Gray", "White"); }
				else if (checkNumber(99, 101)) { loadColors("White", "White"); } 
			}
		});
		
		// sets default value - on page load
		loadColors("Red");
	}
});