function initHome() {
	initCSSForm();
}
function initDetail() {
	initCSSForm();
	colorPickerList = $('.cp');
	replaceInput = $("#replace");
	replacements = replaceInput.val().split(",");
	initColorPickers();
	initLinesLink();
	showReplacementOptions(replaceInput.val());
	storeBaseDownloadLink();
	storeLoadedColors(colorPickerList, replacements);
	insertInstanceListControls();
	bindInstanceListControls();
}
function initColorPickers() {
	colorPickerList.each(function() {
		var cp = $(this);
		var color_value = cp.val().substring(1, cp.val().length);
		
		if (color_value.length == 3) {
			var char_list = color_value.split('');
			var color_value = "";
			for (i=0; i < 3; i++) {
				color_value += char_list[i] + char_list[i];
			}
		}
		cp.ColorPicker({
			color: color_value,
			flat: true,
			onSubmit: function(sb, hex, rgb, el) {
				var thisPicker = $(el);
				thisPicker.val(hex);
				var loadColor = thisPicker.data("loadColor");
				var originalColor = thisPicker.data("originalColor");
				var fullHex = addHash(hex);
				var replaceInput = $("#replace");
				var replacements = replaceInput.val();
				var overwritten = false;
				var firstTime = true;
				
				if (replacements) {
					firstTime = false;
					replacements = replacements.split(",");
					for (var i=0; i < replacements.length; i++) {
						var replacement = replacements[i].split(":");
						if (replacement[0] == originalColor) {
							// Color has been replaced already. Just change the new value
							replacement[1] = hex;
							replacements[i] = replacement.join(":");
							overwritten = true;
						}

					}
					
					if (overwritten == false) {
						// This color has never been replaced before. Add it to the list
						newReplacements = replacements.push(loadColor + ":" + hex);
					}
					
					newReplacements = replacements.join(",");
					if (newReplacements.charAt(0) == ",") {
						newReplacements = newReplacements.substring(1, replacements.length);
					}
					
				} else {
					// No replacements have been made previously
					var newReplacements = originalColor + ":" + hex;
				}
				
				replaceInput.val(newReplacements);
				if (firstTime) { showReplacementOptions(newReplacements); }
				updateOptionLinks();
				
				// Change the background color
				thisPicker.parents('div.color_container').find('div.color_examples').css('background', fullHex);
				// Change the text colors
				thisPicker.parents('div.color_container').find('span.color_on_x').css('color', fullHex).text(fullHex);
				thisPicker.parents('div.color_container').find('span.x_on_color').text(fullHex);
			},
		});
	});
}
function storeBaseDownloadLink() {
	var downloadLink = $("#download");
	downloadLink.data("baseDownloadLink", downloadLink.attr("href"));
}
function updateOptionLinks() {
	var downloadLink = $("#download");
	var viewLink = $("#view");
	var newLink = "/spectrum/?css=" + $("#css_interior").val();
	var replacements = $("#replace").val();
	if (replacements) {
		newLink += "&replace=" + replacements;
	}
	downloadLink.attr("href", newLink + "&download=1");
	viewLink.attr("href", newLink)
}
function storeLoadedColors(pickers, replacements) {
	pickers.each(function() {
		var picker = $(this);
		var loadColor = removeHash(picker.val());
		picker.data("loadColor", loadColor);
		
		var originalColor = checkReplacements(replacements, 1, loadColor);
		if (originalColor) {
			picker.data("originalColor", originalColor);
		} else {
			picker.data("originalColor", loadColor);
		}
	});
}
function checkReplacements(replacements, index, color) {
	// Replacements should be a list, i=0 or 1 (old or new)
	// Replacements format: ['aaa:aa1', '000:001']
	for (var i=0; i < replacements.length; i++) {
		var replacement = replacements[i].split(":");
		var originalColor = checkReplacement(replacement, index, color);
		if (originalColor) {
			return removeHash(originalColor); // Returns the original color
		}
	}
	return false;
}
function checkReplacement(replacement, index, color) {
	if (replacement[index] == color) { return replacement[0];} else { return false;}
}
function removeHash(color) {
	if (color.charAt(0) == "#") { return color.substring(1, color.length); } else { return color; }	
}

function addHash(color) {
	if (color.charAt(0) != "#") { return "#" + color; } else { return color; }
}

function hideInstanceLists() {
	$(".color_instance_list").slideUp(function() {
		$("a.color_instance_list_control").text('Show line numbers').removeClass("color_instance_list_control_hide");
	});
}

function showInstanceLists() {
	$(".color_instance_list").slideDown(function() {
		$("a.color_instance_list_control").text('Hide line numbers').addClass("color_instance_list_control_hide");
	});
}

function insertInstanceListControls() {
	var instanceGroups = $(".color_instance_list");
	instanceGroups.each(function() {
		var group = $(this);
		var id = group.attr("id");
		
		var control = '<a href="#' + id + '" class="color_instance_list_control" id="' + id + '_control">Show line numbers</a>'; 
		group.before(control);
	});
}

function bindInstanceListControls() {
	var controlsList = $("a.color_instance_list_control");
	controlsList.click(function(e) {
		e.preventDefault();
		var control = $(this);
		var re = /\d+/;
		var instanceListID = re.exec(control.attr("id"));
		var instanceList = $("#color_instance_list_" + instanceListID);
		if (control.text() == "Show line numbers") {
			instanceList.slideDown("slow", function() {
				control.text("Hide line numbers");
				control.addClass("color_instance_list_control_hide");
			});
		} else {
			instanceList.slideUp("slow", function() {
				control.text("Show line numbers");
				control.removeClass("color_instance_list_control_hide");
			});
		}
	});
}
function cleanURL(url) {
	if (url.indexOf("http://") != 0 && url.indexOf("https://") != 0) {
		return "http://" + url;
	} else {
		return url;
	}
}
function initCSSForm() {
	var cssForm = $($(".css_form")[0]);
	
	cssForm.submit(function(event) {
		var cssVal = $($(".css")[0]).val();
		event.preventDefault();
		window.location = decodeURI(window.location.protocol + "//" + window.location.host + "/spectrum/?css=" + cleanURL(cssVal));
	});
	cssForm.append('<a href="/spectrum/" id="submit_link">See color spectrum</a>');
	$("#submit_link").click(function(e) {
		e.preventDefault();
		cssForm.submit();
	});
}
function initLinesLink() {
	var linesLink = $("#lines");
	linesLink.click(function(event) {
		event.preventDefault();
		toggleLines(linesLink);
	});
}

function toggleLines(linesLink) {
	if (linesLink.text() == 'Show all line numbers') {
		// Lines are hidden - show them
		showInstanceLists();
		linesLink.text('Hide all line numbers');
	} else {
		// Lines are visibile - hide them
		hideInstanceLists();
		linesLink.text('Show all line numbers');
	}
}
function showReplacementOptions(replacementsValue) {
	if (replacementsValue) {
		$("#options_download").fadeIn();
		$("#options_reset").fadeIn();
	}
}