var exploreItems = [];
var memoItems = [];

function initialize() {
	$("phrase").focus();
	var p = location.href.indexOf("?q=");
	if(p >= 0) {
		var phrase = decodeURIComponent(location.href.substring(p + 3));
		phrase = phrase.replace(/\+/g, " ");
		setPhrase(phrase, true);
	}
}

function addSearchEngine() {
	if(window.sidebar && window.sidebar.addSearchEngine) {
		window.sidebar.addSearchEngine(
			"http://native-checker.com/native-checker/firefox.src",
			"http://native-checker.com/native-checker/images/icon.gif",
			"NativeChecker", "Web");
	}
	else {
		alert("現在お使いのブラウザがFirefoxでないため、検索プラグインをインストールできません。");
	}
}

function setPhrase(phrase, checkImmediately) {
	$("phrase").value = phrase;
	if(checkImmediately) {
		checkPhrase();
	}
}

function checkPhrase() {
	var phrase = $("phrase").value;
	if(phrase == "") {
		return;
	}
	$("check").disabled = true;
	$("suggestion").innerHTML = buildWaitHtml();
	$("result").innerHTML = "";
	Kumu.Ajax.executeTeedaAjax(
		function(response) {
			$("check").disabled = false;
			$("suggestion").innerHTML = buildCheckResultHtml(response);
			if(response && response.phrase) {
				var r = { "items" : [ response ] };
				r.items[0].html = r.items[0].phrase;
				r.items[0].original = true;
				$("result").innerHTML = buildExploreResultHtml(r);
				exploreItems = r.items;
			}
			if(response && response.items && response.items.length > 0) {
				var builder = new DomMenuBuilder();
				builder.setSettings(new Hash(
					'menuBarWidth', '0%',
					'subMenuMinWidth', 'auto',
					'distributeSpace', false,
					'subMenuWidthCorrection', -1,
					'verticalSubMenuOffsetX', -1,
					'verticalSubMenuOffsetY', -1,
					'horizontalSubMenuOffsetX', 1,
					'openMouseoverMenuDelay', 150,
					'closeMouseoutMenuDelay', 300,
					'expandMenuArrowUrl', '/vizwik/app/images/menu_arrow.gif'
				));
				builder.replace("suggestion");
			}
		},
		{
			"component" : "check",
			"action" : "check",
			"phrase" : phrase
		});
}

function explore(phrase, index, id) {
	$("check").disabled = true;
	$("result").innerHTML = buildWaitHtml();
	Kumu.Ajax.executeTeedaAjax(
		function(response) {
			$("check").disabled = false;
			$("result").innerHTML = buildExploreResultHtml(response);
			if(response && response.items) {
				exploreItems = response.items;
			}
		},
		{
			"component" : "explore",
			"action" : "explore",
			"phrase" : phrase,
			"index" : index,
			"suggestion" : id
		});
}

function toggleContextExpansion(event) {
	var img = Event.element(event);
	var expanded = (img.src.indexOf("collapse") >= 0);
	var td = img.parentNode.parentNode.parentNode;
	var children = td.getElementsByTagName("div");
	for(var i = 0; i < children.length; i++) {
		if(children[i].className == "context") {
			var context = children[i];
			if(expanded) {
				context.style.position = "absolute";
				context.style.top = "-1000px";
				img.src = "/native-checker/images/expand.gif";
			}
			else {
				context.style.position = "static";
				context.style.top = "auto";
				img.src = "/native-checker/images/collapse.gif";
			}
			return;
		}
	}
}

function addMemo(index) {
	for(var i = 0; i < memoItems.length; i++) {
		if(memoItems[i].phrase == exploreItems[index].phrase) {
			return;
		}
	}
	memoItems.push(exploreItems[index]);
	memoItems = memoItems.sortBy(function(value, index) {
		return -value.hitCount;
	});
	$("memo").innerHTML = buildMemoHtml(memoItems);
}

function deleteMemo(index) {
	memoItems.splice(index, 1);
	$("memo").innerHTML = buildMemoHtml(memoItems);
}

function deleteAllMemos() {
	memoItems = [];
	$("memo").innerHTML = "";
}

function buildWaitHtml() {
	return "<img src='/native-checker/images/wait.gif'/>"
}

function buildCheckResultHtml(r) {
	if(!r) {
		return "<span class='error'>一時的に利用できません。しばらく後に再度アクセスしてください</span>";
	}
	if(r.errorMessage) {
		return "<span class='error'>" + r.errorMessage + "</span>";
	}
	
	var html = "<ul style='position: absolute; top: -1000px; visibility: hidden;'>";
	for(var i = 0; i < r.items.length; i++) {
		var item = r.items[i];
		var corr = (item.corrections && item.corrections.length > 0);
		var sugg = (item.suggestions && item.suggestions.length > 0);

		html += "<li>";
		html += "<div style='margin-bottom: 6px;'>"
		if(corr) {
			html += "<span class='correctionFound'>";
			html += "スペルミス? ";
			html += item.word.lemma;
			html += "</span>";
		}
		else if(sugg) {
			html += "<span class='suggestionFound'>";
			html += item.word.lemma;
			html += "</span>";
		}
		else {
			html += item.word.lemma;
		}
		html += "</div>"
		html += "<span class='pos'>" + item.word.pos.name + "</span>";
		
		if(corr) {
			html += "<ul>";
			for(var j = 0; j < item.corrections.length; j++) {
				html += "<li>";
				html += "<img class='icon' src='/native-checker/images/suggest.gif'/>";
				html += " <a href='javascript:setPhrase(\"" + 
					escape(item.corrections[j].phrase) + "\", true);'" +
					" onmouseover='window.status = \"\"; return true;'>";
				html += item.corrections[j].lemma;
				html += "</a>";
				html += "</li>";
			}
			html += "</ul>";
		}
		else if(sugg) {
			html += "<ul>";
			for(var j = 0; j < item.suggestions.length; j++) {
				html += "<li>";
				html += "<img class='icon' src='/native-checker/images/suggest.gif'/>";
				html += " <a href='javascript:explore(\"" + 
					escape(r.phrase) + "\", " + i + ", \"" + item.suggestions[j].id + "\")'" +
					" onmouseover='window.status = \"\"; return true;'>";
				html += item.suggestions[j].name;
				html += "</a>";
				html += "</li>";
			}
			html += "</ul>";
		}
		html += "</li>";
	}
	html += "<li>";
	html += "<div style='margin-bottom: 6px;'><br/></div>";
	html += "<span class='tooltip'>修正したい単語をポイントしてください</span>";
	html += "</li></ul>";
	return html;
}

function buildExploreResultHtml(r) {
	if(!r || r.error) {
		return "<span class='error'>一時的に利用できません。しばらく後に再度アクセスしてください</span>";
	}
	var html = "<table>";
	for(var i = 0; i < r.items.length; i++) {
		var item = r.items[i];
		if(item.original) {
			html += "<tr><td class='original'>";
		}
		else {
			html += "<tr><td>";
		}
		html += "<div>"
		html += "<div class='left'>";
		if(item.contexts && item.contexts.length > 0) {
			html += "<img class='icon' src='/native-checker/images/expand.gif'" +
					" onclick='toggleContextExpansion(event);'/>";
		}
		else {
			html += getDummyImage();
		}
		html += "</div>";
		
		// phrase
		html += "<div class='phrase'>";
		html += getDummyImage();
		html += item.html;
		html += "</div>";
		
		// hit count
		html += "<div class='hitCount'>";
		html += getDummyImage();
		html += format(item.hitCount) + " 件";
		html += "</div>";

		// memo
		html += "<div class='function'>";
		html += "<img class='icon' src='/native-checker/images/memo.gif'/>";
		html += " <a class='menu' href='#' onclick='addMemo(" + i + "); return false;'>" +
				"記憶</a>";
		html += "</div>";

		// check
		html += "<div class='function'>";
		html += "<img class='icon' src='/native-checker/images/check.gif'/>";
		html += " <a class='menu' href='#' onclick='setPhrase(\"" + 
			escape(item.phrase) + "\", true); return false;'>" +
			"再チェック</a>";
		html += "</div></div>";
		
		if(item.contexts && item.contexts.length > 0) {
			html += "<div class='context' style='position: absolute; top: -1000px;'>";
			html += "\n<span></span>\n"; // for Safari
			for(var j = 0; j < item.contexts.length; j++) {
				html += "<div class='contextItem'>";
				html += item.contexts[j];
				html += "</div>";
			}
			html += "</div>";
		}

		html += "</td></tr>";
	}
	html += "</table>";
	return html;
}

function buildMemoHtml(items) {
	var html = "<table>";
	for(var i = 0; i < items.length; i++) {
		var item = items[i];
		html += "<tr><td>";

		html += "<div>"
		html += "<div class='left'>";
		if(item.contexts && item.contexts.length > 0) {
			html += "<img class='icon' src='/native-checker/images/expand.gif'" +
					" onclick='toggleContextExpansion(event);'/>";
		}
		else {
			html += getDummyImage();
		}
		html += "</div>";

		// phrase
		html += "<div class='phrase memo'>";
		html += getDummyImage();
		html += item.phrase;
		html += "</div>";
		
		// hit count
		html += "<div class='hitCount memo'>";
		html += getDummyImage();
		html += format(item.hitCount) + " 件";
		html += "</div>";

		// recheck
		html += "<div class='function memo'>";
		html += "<img class='icon' src='/native-checker/images/check.gif'/>";
		html += " <a class='menu' href='#' onclick='setPhrase(\"" + 
			escape(item.phrase) + "\", true); return false;'>" +
			"再チェック</a>";
		html += "</div>";

		// memo
		html += "<div class='function memo'>";
		html += "<img class='icon' src='/native-checker/images/delete.gif'/>";
		html += " <a class='menu' href='#' onclick='deleteMemo(" + i + "); return false;'>" +
				" 削除</a>";
		html += "</div>";

		if(items.length >= 2 && i == 0) {
			html += "<div class='function memo'>";
			html += "<img class='icon' src='/native-checker/images/delete.gif'/>";
			html += " <a class='menu' href='#' onclick='deleteAllMemos(); return false;'>" +
					" 全て削除</a>";
			html += "</div>";
		}
		html += "</div>";

		if(item.contexts && item.contexts.length > 0) {
			html += "<div class='context' style='position: absolute; top: -1000px;'>";
			html += "\n<span></span>\n"; // for Safari
			for(var j = 0; j < item.contexts.length; j++) {
				html += "<div class='contextItem'>";
				html += item.contexts[j];
				html += "</div>";
			}
			html += "</div>";
		}

		html += "</td></tr>";
	}
	html += "</table>";
	return html;
}

function getDummyImage() {
	return "<img class='icon' src='/native-checker/images/dummy.gif'/>"
}

function escape(s) {
	return s.escapeHTML().replace(/'/g, "&apos;");
}

function format(num) {
	var s = num.toString();
	while(s != (s = s.replace(/^(-?\d+)(\d{3})/, "$1,$2"))) { }
	return s;
}