$(document).ready(function() {
	// Hide the no Javascript error
	$("#NoJavaScriptError").hide();
	
	// Load the initial image
	$("img#Gradient").attr("src", "AJAX/MakeGradient.php?Orientation=Vertical&Gloss=Round");
	
	// Set input to defaults
	reset();
	
	// Update the gradient image when the parameters are changed
	$(".GradientParameter").change(function() {
		updateGradient();
	});
	
	// Swap the stored start and stop values
	$("div#SwapColors").click(function() {
		var StartColor = $("div#StartColorPicker").find("div:first").css("backgroundColor");
		var StopColor = $("div#StopColorPicker").find("div:first").css("backgroundColor");
		$("div#StartColorPicker").find("div:first").css("backgroundColor", StopColor);
		$("div#StopColorPicker").find("div:first").css("backgroundColor", StartColor);
		updateGradient();
	});
	
	// Enable gloss options
	$("div.GlossOption").click(function() {
		// Activate the correct icon
		if ($(this).hasClass("NoGloss")) {
			$("div.FlatGlossActive").addClass("FlatGloss");
			$("div.FlatGlossActive").removeClass("FlatGlossActive");
			$("div.RoundGlossActive").addClass("RoundGloss");
			$("div.RoundGlossActive").removeClass("RoundGlossActive");
			$(this).removeClass("NoGloss");
			$(this).addClass("NoGlossActive");
		}
		else if ($(this).hasClass("FlatGloss")) {
			$("div.NoGlossActive").addClass("NoGloss");
			$("div.NoGlossActive").removeClass("NoGlossActive");
			$("div.RoundGlossActive").addClass("RoundGloss");
			$("div.RoundGlossActive").removeClass("RoundGlossActive");
			$(this).removeClass("FlatGloss");
			$(this).addClass("FlatGlossActive");
		}
		else if ($(this).hasClass("RoundGloss")) {
			$("div.FlatGlossActive").addClass("FlatGloss");
			$("div.FlatGlossActive").removeClass("FlatGlossActive");
			$("div.NoGlossActive").addClass("NoGloss");
			$("div.NoGlossActive").removeClass("NoGlossActive");
			$(this).removeClass("RoundGloss");
			$(this).addClass("RoundGlossActive");
		}
		updateGradient();
		// Ignore click if the option is already active
	});
	
	// Enable color pickers
	$('div#StartColorPicker').find("div:first").ColorPicker({
		color: '#64FB32',
		onShow: function (Picker) {
			$(Picker).slideDown(500);
			return false;
		},
		onHide: function (Picker) {
			$(Picker).slideUp(500);
			return false;
		},
		onChange: function (hsb, hex, rgb) {
			$('div#StartColorPicker').find("div").css('backgroundColor', '#' + hex);
			updateGradient();
		}
	});
	
	$('div#StopColorPicker').find("div:first").ColorPicker({
		color: '#3C971E',
		onShow: function (Picker) {
			$(Picker).slideDown(500);
			return false;
		},
		onHide: function (Picker) {
			$(Picker).slideUp(500);
			return false;
		},
		onChange: function (hsb, hex, rgb) {
			$('div#StopColorPicker').find("div").css('backgroundColor', '#' + hex);
			updateGradient();
		}
	});

});

// Reset to defaults
function reset() {
	$("div.FlatGlossActive").addClass("FlatGloss");
	$("div.FlatGlossActive").removeClass("FlatGlossActive");
	$("div.NoGlossActive").addClass("NoGloss");
	$("div.NoGlossActive").removeClass("NoGlossActive");
	$("div.RoundGloss").addClass("RoundGlossActive");
	$("div.RoundGloss").removeClass("RoundGloss");
	$("#Height").val("100");
	$("#Width").val("900");
}

// Convert rgb array to hex
function toHex(RGB)
{
	// IE treats the color as #RRGGBB
	if (RGB.indexOf("#") > -1) return RGB.replace(/#/, "");

	// Most other browsers treat the color as rgb(R, G, B)
	RGB = RGB.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    var Hex = Number(RGB[3]) + (256 * Number(RGB[2])) + (65536 * Number(RGB[1]));
    Hex = Hex.toString(16);
	while (Hex.length < 6) Hex = "0" + Hex;
	return Hex;
}

// Get the new image
function updateGradient() {
	// Find out which gloss to set based on the UI elements
	var Gloss = "Round";
	if ($("div.NoGlossActive").size() > 0) Gloss = "None";
	else if ($("div.FlatGlossActive").size() > 0) Gloss = "Flat";

	var URL = "AJAX/MakeGradient.php?";
	URL += "Start=" + toHex($("#StartColorPicker").find("div:first").css("backgroundColor"));
	URL += "&Stop=" + toHex($("#StopColorPicker").find("div:first").css("backgroundColor"));
	URL += "&Gloss=" + Gloss;
	URL += "&Orientation=Vertical";
	URL += "&Height=" + $("#Height").val();
	URL += "&Width=" + $("#Width").val();
	
	$("#Gradient").attr("src", URL);
}