var currentText = "";
var currentNumbers = new Array();

var dateName = "";
var dateText =  new Array("00", "00", "00");
var dateNumbers = new Array();
for (i=0; i<6; i++) dateNumbers[i] = 2;

$(document).ready(function(){
	$('#word').keyup(refreshAll);
	$('#date-input-0').keyup(refreshAll);
	$('#date-input-1').keyup(refreshAll);
	$('#date-input-2').keyup(refreshAll);
	$('#date-input-names').keyup(refreshAll);
	$('.mat-radio').change(refreshAll);
	window.setInterval(refreshAll, 1000);
	setCurrentText("");
	refreshMat();
 });

 function refreshAll() {
	var raw = $("#word").val();
	var text = raw.replace(/[^A-Za-z0-9]/g, "").toUpperCase();
	if (raw != currentText) {
		setCurrentText(text);
	} else {
	}
	refreshDate();
	refreshMat();
}

function matColor() {
	if ($("#mat-black").prop("checked")) return "Black";
	if ($("#mat-cream").prop("checked")) return "Cream";
}

function refreshMat() {
	if ($("#mat-black").prop("checked")) $("#frame-table").prop("class", "mat-black");
	if ($("#mat-cream").prop("checked")) $("#frame-table").prop("class", "mat-cream");
}

function setCurrentText(text) {
	var oldText = currentText;
	if (text.length < 2) {
		currentText = "WILD";
	} else {
		currentText = text.toUpperCase();
	}
	currentNumbers.length = currentText.length;
		
	for(i=0; i<currentText.length; i++) {
		if (i >= oldText.length) {
			resetCurrentNumber(i);
		} else if (currentText.charAt(i) != oldText.charAt(i)) {
			resetCurrentNumber(i);
		}
	}
	if (oldText != currentText) {
		$("#word").val(text.toUpperCase());
		refreshMat();	
		refreshImages();
		refreshPriceAndSize();
	}
}

function refreshDate() {
	// Check to see if the text has changed
	var dateChanged = false;
	for (i=0; i<3; i++) {
		var raw = $("#date-input-" + i).val();
		var clean = raw.replace(/[^0-9]/g, "");
		var text = padNumberString(clean, 2, "0");
		if (text != dateText[i]) {
			dateChanged = true;
			var old = dateText[i];
			if (old.charAt(0) != text.charAt(0)) resetDateNumber(text.charAt(0), 2*i);
			if (old.charAt(1) != text.charAt(1)) resetDateNumber(text.charAt(1), 2*i + 1);
			dateText[i] = text;
		}
		if (clean != raw) $("#date-input-" + i).prop('value', clean);
	}
	var nameChanged = false;
	var nameText = $("#date-names").val();
	if (nameText != dateName) {
		dateName = nameText;
		$("#date-name-div").empty();
		$("#date-name-div").append(dateName);
		nameChanged = true;
	}
	if (dateChanged || nameChanged) {
		refreshDateImages();
		refreshDateProductName();
	}
}

function resetDateNumber(c, i) {
	if (c == "0") dateNumbers[i] = 2;
	else dateNumbers[i] = 1;
}

function refreshDateImages() {
	for (i=0; i<3; i++) {
		for (j=0; j<2; j++) {
			var k = i*2 + j;
			var c = dateText[i].charAt(j);
			var idx = dateNumbers[k];
			var td = $("#date-td-" + i + "-" + j);
			td.empty();
			td.append(dateImageHtml(i, j, c, idx));
			$("#q-" + i + "-" + j + "-" + c + "-" + idx + "-l").click(dateCycleHandler);
			$("#q-" + i + "-" + j + "-" + c + "-" + idx + "-r").click(dateCycleHandler);
			$("#d-" + i + "-" + j + "-" + c + "-" + idx).click(dateShowZoom);
		}
	}
}

function dateShowZoom(event) {
	var fields = this.id.split("-");
	var i = fields[1]
	var i = fields[2]
	var c = fields[3];
	var idx = new Number(fields[4]);
	var tooltip = getImageName(c, idx)
	jQuery.slimbox("zoom/" + c + "-" + idx + ".png", "Zoom view of " + tooltip);
	event.preventDefault();
}

function dateCycleHandler(event) {
	var fields = this.id.split("-");
	var q = fields[0];
	var i = new Number(fields[1]);
	var j = new Number(fields[2]);
	var c = fields[3];
	var idx = new Number(fields[4]);
	var dir = fields[5];
	var nextIdx = idx;
	if (dir == "l") {
		nextIdx = prevInCycle(c, idx);
	} else if (dir == "r") {
		nextIdx = nextInCycle(c, idx);
	}
	dateNumbers[2*i+j] = nextIdx;
	refreshDateImages();
	refreshDateProductName();
	event.preventDefault();
}

function refreshDateProductName() {
	$("#date-item-name").prop('value', "Custom Framed Date '" + dateLetterCodesString() + "' with text '" + dateName + "'");
	$("#date-custom-code").prop('value', dateLetterCodesString() + " '" + dateName + "'");
}

function dateLetterCodesString() {
	var str = "";
	for (i = 0; i<3; i++) {
		for (j = 0; j<2; j++) {
			if (i != 0 || j != 0) str = str + " ";
			str = str + dateText[i].charAt(j) + "-" + dateNumbers[2*i+j];
		}
	}
	return str;
}

function dateImageHtml(i, j, c, idx) {
	var tooltip = getImageName(c, idx)
	return "<a href='zoom/" + c + "-" + idx + ".png' id='d-" + i + "-" + j + "-" + c + "-" + idx + "' title='Zoom view of " + tooltip + "'>" +
	"<img width='57' height='85' class='wild-image' src='thumb/" + c + "-" + idx + ".png' title='" + tooltip + "' />" + 
	"</a>" + 
	"<div class='cycle-controls'>" + 
	"<a href='index.html' id='q-" + i + "-" + j + "-" + c + "-" + idx + "-l'>" + "&laquo;" +
	"</a>" +
	"<span class='image-code'>" + c + "-" + idx + "</span>" +
	"<a href='index.html' id='q-" + i + "-" + j + "-" + c + "-" + idx + "-r'>" + "&raquo;" +
	"</a>" + 
	"</div>";
}

function padNumberString(str, minLen, pad) {
	while (str.length < minLen) str = pad + str;
	return str;
}

function refreshPriceAndSize() {
	var size = $("#frame-size-span")
	var price = $("#frame-price-span")
	var len = currentText.length;
	size.empty();
	price.empty();
	if (len >= 2 && len <= 11) {
		$("#frame-buy-now-button").show();
		$("#frame-size-tr").show();
		$("#frame-price-tr").show();
		$("#frame-error-msg").hide();
		size.append(wordFrameSize(len));
		price.append(wordPrice(len));
	} else {
		$("#frame-buy-now-button").hide();
		$("#frame-size-tr").hide();
		$("#frame-price-tr").hide();
		$("#frame-error-msg").show();
		size.append("");
		price.append("");
	}
	$("#frame-paypal-button-id").prop('value', wordPayPalButtonId(len));
	$("#frame-item-name").prop('value', "Custom Framed '" + letterCodesString() + "' with " + matColor() + " Mat");
	$("#frame-custom-code").prop('value', letterCodesString() + " : " + matColor());
}

function resetCurrentNumber(i) {
	if (currentText.charAt(i) == "Z") currentNumbers[i] = 2;
	else if (currentText.charAt(i) == "0") currentNumbers[i] = 2;
	else currentNumbers[i] = 1;
}

function debug(message) {
	$("#debug").append(message + "<br/>");
}

function letterCodesString() {
	var str = "";
	for (i = 0; i<currentText.length; i++) {
		if (i != 0) str = str + " ";
		str = str + currentText[i] + "-" + currentNumbers[i];
	}
	return str;
}

function wordFrameSize(len) {
	if (len == 2 || len == 3) return "6\" x 10\"";
	if (len == 4 || len == 5) return "6\" x 14\"";
	if (len == 6 || len == 7) return "6\" x 18\"";
	if (len == 8 || len == 9) return "6\" x 22\"";
	if (len == 10 || len == 11) return "6\" x 26\"";
	return "";
}

function wordPrice(len) {
	if (len == 2 || len == 3) return "$36 (plus $10 shipping)";
	if (len == 4 || len == 5) return "$44 (plus $10 shipping)";
	if (len == 6 || len == 7) return "$52 (plus $10 shipping)";
	if (len == 8 || len == 9) return "$60 (plus $10 shipping)";
	if (len == 10 || len == 11) return "$68 (plus $10 shipping)";
	return "";
}

function wordPayPalButtonId(len) {
	if (len == 2 || len == 3) return "XUGX35N8RLVVA";
	if (len == 4 || len == 5) return "JTZ269QVN3676";
	if (len == 6 || len == 7) return "PNCCGGSNTXYSU";
	if (len == 8 || len == 9) return "R7GD3BEBRCJVG";
	if (len == 10 || len == 11) return "4ZHGS3RFSZBT2";
	return "";
}

function refreshImages() {
	$("#frame-tr").children().remove();
	for(i=0; i<currentText.length; i++) {
		var c = currentText.charAt(i);
		var idx = currentNumbers[i];
		var html = imageHtml(i, c, idx);
		$("#frame-tr").append(html);
		$("#" + i + "-" + c + "-" + idx + "-l").click(cycleHandler);
		$("#" + i + "-" + c + "-" + idx + "-r").click(cycleHandler);
		$("#a-" + i + "-" + c + "-" + idx).click(showZoom);
	}
}

function showZoom(event) {
	var fields = this.id.split("-");
	var i = fields[1]
	var c = fields[2];
	var idx = new Number(fields[3]);
	var tooltip = getImageName(c, idx)
	jQuery.slimbox("zoom/" + c + "-" + idx + ".png", "Zoom view of " + tooltip);
	event.preventDefault();
}

function imageHtml(i, c, idx) {
	var tooltip = getImageName(c, idx)
	return "<td class='wild-cell'>" + 
	"<a href='zoom/" + c + "-" + idx + ".png' id='a-" + i + "-" + c + "-" + idx + "' title='Zoom view of " + tooltip + "'>" +
	"<img width='57' height='85' class='wild-image' src='thumb/" + c + "-" + idx + ".png' title='" + tooltip + "' />" + 
	"</a>" + 
	"<div class='cycle-controls'>" + 
	"<a href='index.html' id='" + i + "-" + c + "-" + idx + "-l'>" + "&laquo;" +
	"</a>" +
	"<span class='image-code'>" + c + "-" + idx + "</span>" +
	"<a href='index.html' id='" + i + "-" + c + "-" + idx + "-r'>" + "&raquo;" +
	"</a>" + 
	"</div>" + 
	"</td>";
}

function cycleHandler(event) {
	var fields = this.id.split("-");
	var i = new Number(fields[0]);
	var c = fields[1];
	var idx = new Number(fields[2]);
	var dir = fields[3];
	var nextIdx = idx;
	if (dir == "l") {
		nextIdx = prevInCycle(c, idx);
	} else if (dir == "r") {
		nextIdx = nextInCycle(c, idx);
	}
	currentNumbers[i] = nextIdx;
	refreshImages();
	refreshPriceAndSize();
	event.preventDefault();
}

function nextInCycle(c, idx) {
	if (c == "D" && idx == 4) return 6;
	else if (c == "G" && idx == 3) return 5;
	else if (c == "V" && (idx == 1 || idx == 2 || idx == 3)) return 4;
	else if (c == "O" && idx == 6) return 8;
	else if (c == "Q" && idx == 1) return 3;
	else if (c == "M" && idx == 2) return 4;
	else if (c == "U" && idx == 4) return 6;
	else if (c == "X" && idx == 2) return 4;
	else if (c == "Y" && idx == 2) return 4;
	else if (c == "Z" && idx == 4) return 2;
	else if (c == "8" && idx == 2) return 4;
	else if (c == "0" && idx == 5) return 2;
	else {
		var maxIdx = getMaxIdx(c);
		return (idx % maxIdx) + 1;
	}
}

function prevInCycle(c, idx) {
	if (c == "D" && idx == 6) return 4;
	else if (c == "G" && idx == 5) return 3;
	else if (c == "V" && (idx == 4 || idx == 2 || idx == 3)) return 1;
	else if (c == "O" && idx == 8) return 6;
	else if (c == "Q" && idx == 3) return 1;
	else if (c == "M" && idx == 4) return 2;
	else if (c == "U" && idx == 6) return 4;
	else if (c == "X" && idx == 4) return 2;
	else if (c == "Y" && idx == 4) return 2;
	else if (c == "Z" && idx == 2) return 4;
	else if (c == "8" && idx == 4) return 2;
	else if (c == "0" && idx == 2) return 5;
	else {
		var maxIdx = getMaxIdx(c);
		return ((idx + 2*maxIdx - 2) % maxIdx) + 1;
	}
}

function getMaxIdx(c) {
	if (c == "0") return 5;
	if (c == "1") return 5;
	if (c == "2") return 3;
	if (c == "3") return 2;
	if (c == "4") return 3;
	if (c == "5") return 1;
	if (c == "6") return 1;
	if (c == "7") return 3;
	if (c == "8") return 6;
	if (c == "9") return 4;
	if (c == "A") return 8;
	if (c == "B") return 4;
	if (c == "C") return 10;
	if (c == "D") return 6;
	if (c == "E") return 11;
	if (c == "F") return 4;
	if (c == "G") return 5;
	if (c == "H") return 6;
	if (c == "I") return 12;
	if (c == "J") return 5;
	if (c == "K") return 5;
	if (c == "L") return 7;
	if (c == "M") return 4;
	if (c == "N") return 6;
	if (c == "O") return 12;
	if (c == "P") return 7;
	if (c == "Q") return 3;
	if (c == "R") return 5;
	if (c == "S") return 10;
	if (c == "T") return 8;
	if (c == "U") return 7;
	if (c == "V") return 9;
	if (c == "W") return 7;
	if (c == "X") return 6;
	if (c == "Y") return 7;
	if (c == "Z") return 4;
	return 1;
}

function getImageName(c, idx) {
	var code = c + "-" + idx;
	if (code == "0-2") return "goatsbeard";
	if (code == "0-3") return "flower circle";
	if (code == "0-4") return "hawkweed";
	if (code == "0-5") return "sarsparilla";
	if (code == "1-1") return "asparagus";
	if (code == "1-2") return "lupine";
	if (code == "1-3") return "caterpillar";
	if (code == "1-4") return "driftwood";
	if (code == "1-5") return "grass and bee";
	if (code == "2-1") return "budding stem";
	if (code == "2-2") return "tendril";
	if (code == "2-3") return "dry leaf";
	if (code == "3-1") return "moose shed";
	if (code == "3-2") return "leaves";
	if (code == "4-1") return "spruce";
	if (code == "4-2") return "grass & flower";
	if (code == "4-3") return "Culvers root";
	if (code == "5-1") return "cedar twig";
	if (code == "6-1") return "bean";
	if (code == "7-1") return "milkweed";
	if (code == "7-2") return "bent grass";
	if (code == "7-3") return "False Solomons seal";
	if (code == "8-1") return "button bush";
	if (code == "8-2") return "dandelion";
	if (code == "8-4") return "dandelion puffs";
	if (code == "8-5") return "Hibiscus";
	if (code == "8-6") return "apples";
	if (code == "9-1") return "blackberry cane";
	if (code == "9-2") return "driftwood";
	if (code == "9-3") return "hickory leaf frond";
	if (code == "9-4") return "fiddlehead";
	if (code == "A-1") return "grapevine";
	if (code == "A-2") return "leaves in ice";
	if (code == "A-3") return "beargrass";
	if (code == "A-4") return "twig and vine";
	if (code == "A-5") return "star moss";
	if (code == "A-6") return "vine";
	if (code == "A-7") return "grass";
	if (code == "A-8") return "leafy vine";
	if (code == "B-1") return "lily pad";
	if (code == "B-2") return "tree stump";
	if (code == "B-3") return "dry rudbeckia";
	if (code == "B-4") return "mussel shells";
	if (code == "C-1") return "hoary puccoon";
	if (code == "C-10") return "fungi";
	if (code == "C-2") return "streambed pothole";
	if (code == "C-3") return "dead leaf";
	if (code == "C-4") return "dead leaf";
	if (code == "C-5") return "cottonwood on ice";
	if (code == "C-6") return "fungi";
	if (code == "C-7") return "onion top";
	if (code == "C-8") return "crescent moon";
	if (code == "C-9") return "grass seedhead";
	if (code == "D-1") return "cat tail";
	if (code == "D-2") return "waterfall";
	if (code == "D-3") return "leaf";
	if (code == "D-4") return "compass flower";
	if (code == "D-6") return "Queen Annes lace";
	if (code == "E-1") return "beach pea";
	if (code == "E-10") return "seed heads";
	if (code == "E-11") return "sumac";
	if (code == "E-2") return "ice drips";
	if (code == "E-3") return "sumac";
	if (code == "E-4") return "sumac";
	if (code == "E-5") return "dead leaves";
	if (code == "E-6") return "fern";
	if (code == "E-7") return "feather";
	if (code == "E-8") return "sumac";
	if (code == "E-9") return "wild indigo pods";
	if (code == "F-1") return "clintonia";
	if (code == "F-2") return "marsh grass";
	if (code == "F-3") return "maple branch";
	if (code == "F-4") return "baby leaves";
	if (code == "G-1") return "birch curl";
	if (code == "G-2") return "fungi";
	if (code == "G-3") return "fiddlehead";
	if (code == "G-5") return "sumac";
	if (code == "H-1") return "berries & leaves";
	if (code == "H-2") return "blazing star";
	if (code == "H-3") return "tree roots";
	if (code == "H-4") return "fern";
	if (code == "H-5") return "basalt";
	if (code == "H-6") return "rudbeckia";
	if (code == "I-1") return "spider on lupine";
	if (code == "I-10") return "grass with water drops";
	if (code == "I-11") return "Solomons seal";
	if (code == "I-12") return "bee on clover";
	if (code == "I-2") return "limestone";
	if (code == "I-3") return "rattlesnake plantain";
	if (code == "I-4") return "caterpillar";
	if (code == "I-5") return "driftwood";
	if (code == "I-6") return "lupine";
	if (code == "I-7") return "onion scape";
	if (code == "I-8") return "grass and bee";
	if (code == "I-9") return "grass with water drops";
	if (code == "J-1") return "Indian Pipe";
	if (code == "J-2") return "lupine";
	if (code == "J-3") return "thistle";
	if (code == "J-4") return "rudbeckia";
	if (code == "J-5") return "bean";
	if (code == "K-1") return "cornstalk";
	if (code == "K-2") return "cornstalk";
	if (code == "K-3") return "Union Bay shale";
	if (code == "K-4") return "maple samara";
	if (code == "K-5") return "basalt";
	if (code == "L-1") return "sunset";
	if (code == "L-2") return "streambed shale";
	if (code == "L-3") return "pasque flower";
	if (code == "L-4") return "maple twig";
	if (code == "L-5") return "arboretum grass";
	if (code == "L-6") return "fungi";
	if (code == "L-7") return "grass";
	if (code == "M-1") return "cat tails";
	if (code == "M-2") return "Blue Spruce";
	if (code == "M-4") return "iris leaves";
	if (code == "N-1") return "birches";
	if (code == "N-2") return "grapevine";
	if (code == "N-3") return "granite";
	if (code == "N-4") return "fungi";
	if (code == "N-5") return "spiderwort";
	if (code == "N-6") return "grass";
	if (code == "O-1") return "flower circle";
	if (code == "O-10") return "pink hydrangea";
	if (code == "O-11") return "buttercup";
	if (code == "O-12") return "sunflower";
	if (code == "O-2") return "frog eye";
	if (code == "O-3") return "hawkweed";
	if (code == "O-4") return "amanita";
	if (code == "O-5") return "sarsparilla";
	if (code == "O-6") return "horsehair bird nest";
	if (code == "O-8") return "blackcaps";
	if (code == "O-9") return "blue hydrangea";
	if (code == "P-1") return "driftwood";
	if (code == "P-2") return "blackberry cane";
	if (code == "P-3") return "fiddlehead";
	if (code == "P-4") return "onion scape";
	if (code == "P-5") return "fiddlehead";
	if (code == "P-6") return "fiddlehead";
	if (code == "P-7") return "hickory leaf frond";
	if (code == "Q-1") return "bubble";
	if (code == "Q-3") return "sunflower";
	if (code == "R-1") return "dead leaves";
	if (code == "R-2") return "ladyfern";
	if (code == "R-3") return "onion scape";
	if (code == "R-4") return "onion scape plain";
	if (code == "R-5") return "bur marigold";
	if (code == "S-1") return "blackberry";
	if (code == "S-10") return "liatris";
	if (code == "S-2") return "ice";
	if (code == "S-3") return "fern";
	if (code == "S-4") return "Eastern milk snake";
	if (code == "S-5") return "flamingo";
	if (code == "S-6") return "onion scape";
	if (code == "S-7") return "basalt-feldspar";
	if (code == "S-8") return "dry leaf";
	if (code == "S-9") return "butterfly weed";
	if (code == "T-1") return "dragonfly blue sky";
	if (code == "T-2") return "dragonfly twig";
	if (code == "T-3") return "caterpillar thimbleberry";
	if (code == "T-4") return "union bay shale";
	if (code == "T-5") return "baby hickory tree";
	if (code == "T-6") return "wild geranium";
	if (code == "T-7") return "grass";
	if (code == "T-8") return "yellow osier";
	if (code == "U-1") return "wild indigo";
	if (code == "U-2") return "waterline";
	if (code == "U-3") return "onion top";
	if (code == "U-4") return "blue snake";
	if (code == "U-6") return "leafy vine";
	if (code == "U-7") return "Turks cap lily";
	if (code == "V-1") return "Turks cap lily";
	if (code == "V-4") return "red osier";
	if (code == "V-5") return "sandstone";
	if (code == "V-6") return "birch-trillium";
	if (code == "V-7") return "grass with water drops";
	if (code == "V-8") return "smartweed";
	if (code == "V-9") return "compass flower";
	if (code == "W-1") return "cat tail";
	if (code == "W-2") return "blue bead lily";
	if (code == "W-3") return "rattlesnake master";
	if (code == "W-4") return "eel grass";
	if (code == "W-5") return "red osier";
	if (code == "W-6") return "grass";
	if (code == "W-7") return "pruned tree";
	if (code == "X-1") return "shale";
	if (code == "X-2") return "garden spider";
	if (code == "X-4") return "red osier";
	if (code == "X-5") return "grass with water drops";
	if (code == "X-6") return "basalt-feldspar";
	if (code == "Y-1") return "maple samara";
	if (code == "Y-2") return "birch branch";
	if (code == "Y-4") return "maple twig";
	if (code == "Y-5") return "compass flower";
	if (code == "Y-6") return "branch";
	if (code == "Y-7") return "red osier";
	if (code == "Z-2") return "virginia creeper";
	if (code == "Z-3") return "red virginia creeper";
	if (code == "Z-4") return "basalt";
	return "";
}

function getParameterByName(name) {
    var match = RegExp('[?&]' + name + '=([^&]*)')
                    .exec(window.location.search);
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}