var sort_field = "product_price";
var sort_order = "asc";
var cur_page = 1;
var disable_updates = true;

var sliders = {
	carat: {
		name: "Carat",
		showValue: true,
		hidden: false,
		type: "continuous",
		values: carat
	},
	colour: {
		name: "Colour",
		showValue: false,
		hidden: false,
		type: "discrete",
		values: colour
	},
	clarity: {
		name: "Clarity",
		showValue: false,
		hidden: false,
		type: "discrete",
		values: clarity
	},
	cut: {
		name: "Cut",
		showValue: false,
		hidden: false,
		type: "discrete",
		values: cut
	},
	product_price: {
		name: "Price",
		showValue: true,
		hidden: false,
		type: "continuous",
		values: product_price
	},
	ratio: {
		name: "L/W",
		showValue: true,
		hidden: false,
		type: "continuous",
		values: ratio
	},
	depth: {
		name: "Depth %",
		showValue: false,
		hidden: true,
		type: "continuous",
		values: depth
	},
	table_percent: {
		name: "Table %",
		showValue: false,
		hidden: true,
		type: "continuous",
		values: table_percent
	},
	fluor: {
		name: "Fluor.",
		showValue: false,
		hidden: true,
		type: "discrete",
		values: fluor
	},
	sym: {
		name: "Symmetry",
		showValue: false,
		hidden: true,
		type: "discrete",
		values: sym
	},
	polish: {
		name: "Polish",
		showValue: false,
		hidden: true,
		type: "discrete",
		values: polish
	},
	certificate: {
		name: "Cert",
		showValue: false,
		hidden: true,
		type: "single",
		values: certificate
	}
};

var slider_order = [
	"carat",
	"cut",
	"colour",
	"clarity",
	"polish",
	"sym",
	"depth",
	"table_percent",
	"fluor",
	"ratio",
	"product_price",
	"certificate"
];

var additional_sliders = [
	"polish", "sym", "depth", "ratio", "table_percent", "fluor", "certificate"
];


// Initialise sliders
Event.observe(window, "load", function() {
	var table = $("sliders");
	var table_body = table.appendChild(Builder.node("tbody"));
	var table_top_row = table_body.appendChild(Builder.node("tr"));
	var table_slider_row = table_body.appendChild(Builder.node("tr", {"class":"tracks"}));
	var table_bottom_row = table_body.appendChild(Builder.node("tr"));

	Element.hide("loading");
	Element.show("interface");

	slider_order.each(function(k) {
		var slider = sliders[k];
		slider.heading = $("slider_headings").appendChild(Builder.node("th", slider.name));
		slider.cell = table_slider_row.appendChild(Builder.node("td"));
		var track = slider.cell.appendChild(Builder.node("div", {"class":"track-container"}, [
			Builder.node("div", {"class":"track"})
		])).firstChild;
		if (slider.type == "single") {
			var handles = track.appendChild(Builder.node("div", {"class":"handle top-handle"}));
			var sliderValue = 0;
		} else {
			var handles = [
				track.appendChild(Builder.node("div", {"class":"handle top-handle"})),
				track.appendChild(Builder.node("div", {"class":"handle bottom-handle"}))
			];
			var sliderValue = [0, slider.values.length-1];
		}

		if (k == "carat" || k == "product_price") {
			slider.top_value_box = table_top_row.appendChild(Builder.node("td", [ Builder.node("input", {"class":"value-box top", "id":"slider-input-"+k+"-top"}) ])).firstChild;
			slider.bottom_value_box = table_bottom_row.appendChild(Builder.node("td", [ Builder.node("input", {"class":"value-box bottom", "id":"slider-input-"+k+"-bottom"}) ])).firstChild;
			Event.observe(slider.top_value_box, "keypress", updateSliderValue);
			Event.observe(slider.bottom_value_box, "keypress", updateSliderValue);
		} else {
			slider.top_value_box = table_top_row.appendChild(Builder.node("td", [ Builder.node("div", {"class":"value-box top"}) ])).firstChild;
			slider.bottom_value_box = table_bottom_row.appendChild(Builder.node("td", [ Builder.node("div", {"class":"value-box bottom"}) ])).firstChild;
		}

		ranges = $R(0, slider.values.length-1);

		slider.control = new Control.Slider(handles, track, {
			axis: "vertical",
			range: ranges,
			values: ranges,
			maximum: 180,
			sliderValue: sliderValue,
			alignY: 5,
			restricted: true,
			onSlide: updateValueBoxes,
			onChange: function(values, control) {
				updateValueBoxes(values, control);
				updateSearch();
			},
			name: k
		});
		updateValueBoxes(sliderValue, slider.control);
	});
	hideAdditional();
	startUI();
});

function updateValueBoxes(values, control) {
	var slider = sliders[control.options.name];
	switch (control.options.name) {
		case "carat":
		case "product_price":
			slider.top_value_box.value = slider.values[values[0]];
			slider.bottom_value_box.value = slider.values[values[1]];
			break;
		case "certificate":
			slider.top_value_box.innerHTML = slider.values[values];
			break;
		default:
			slider.top_value_box.innerHTML = slider.values[values[0]];
			slider.bottom_value_box.innerHTML = slider.values[values[1]];
	}
}

function updateSliderValue(ev) {
	if (ev.keyCode != Event.KEY_RETURN)
		return;
	input = Event.element(ev);
	value = Number($F(input).replace("£", "").replace(",",""));
	parts = input.id.split("-");
	slider = parts[2];
	end = parts[3];
	control = sliders[slider].control;
	values = sliders[slider].values;
	var key = 0; var n;
	values.each(function(v, k) {
			v = Number(v.replace("£", "").replace(",", ""));
			switch (end) {
				case "top":
					n = 0;
					if (v <= value)
						throw $break;
						key = k;
					break;
				case "bottom":
					n = 1;
					key = k;
					if (v <= value)
						throw $break;
					break;
			}
	});
	control.setValue(key, n);
	_updateSearch();
}

function updateSearch() {
	cur_page = 1;
	_updateSearch();
}

function showPage(n) {
	cur_page = n;
	_updateSearch();
}

function _updateSearch() {
	if (disable_updates)
		return;
	data = {
		sort_field: sort_field,
		sort_order: sort_order,
		cur_page:   cur_page,
		product_type: document.getElementById("hidden_product_type").value,
		page_url: document.getElementById("page_url").value
	}
	shape = [];
	shape_checkboxes = $$("input.shape-checkbox");
	shape_checkboxes.each(function(i) {
		if ($F(i))
			shape.push($F(i))
	});
	data["shape[values][]"] = shape;
	for (var k in sliders) {
		var slider = sliders[k];
		if (slider.hidden)
			continue;
		values = slider.control.values;
		switch (slider.type) {
			case "discrete":
				if (values[0] == values[1])
					data[k+"[values][]"] = [slider.values[values[0]]];
				else
					data[k+"[values][]"] = slider.values.slice(values[0], values[1]+1);
				break;
			case "continuous":
				data[k+"[max]"] = slider.values[values[0]];
				data[k+"[min]"] = slider.values[values[1]];
				break;
			case "single":
				data[k+"[value]"] = slider.values[values];
				break;
		}
	}
	new Ajax.Updater("diamond_data", "/_cm/ajax-search.php", {
		parameters: data,
		evalScripts: true
	});
}

function hideAdditional() {
	additional_sliders.each(function(k) {
		var slider = sliders[k];
		if ($F("additional_"+k)) {
			f = Element.show;
			slider.hidden = false;
		} else {
			f = Element.hide;
			slider.hidden = true;
		}
		f(slider.heading);
		f(slider.cell);
		f(slider.top_value_box.parentNode);
		f(slider.bottom_value_box.parentNode);
	});
	updateSearch();
}

function swapOrder(field) {
	if (field == sort_field)
		sort_order = (sort_order == "asc") ? "desc" : "asc";
	else {
		sort_field = field;
		sort_order = "asc";
	}
	updateSearch();
}

function showInfoBox(ev) {
	el = Event.findElement(ev, "TR");
	id = el.id.split("_")[1];
	box = $("infobox_"+id);
	Element.show(box);
	positionInfoBox(el);
}
function hideInfoBox(ev) {
	el = Event.findElement(ev, "TR");
	id = el.id.split("_")[1];
	box = $("infobox_"+id);
	Element.hide(box);
}
function moveInfoBox(ev) {
	el = Event.findElement(ev, "TR");
	id = el.id.split("_")[1];
	box = $("infobox_"+id);
	mx = Event.pointerX(ev);
	my = Event.pointerY(ev);

	box.style.top = String(my-150)+"px";
	box.style.left = String(mx-150)+"px";
}
function positionInfoBox(el) {
	id = el.id.split("_")[1];
	box = $("infobox_"+id);
	offset = Element.positionedOffset(el).top-10;
	box.style.top = String(offset)+"px";
}

function clearDiamondCriteria () {
	if (window.confirm('Are you sure you want to reset your diamond criteria?')) {
		window.location = location + '?reset';
	}
	return false;
}