var xmlHttp;
var query = "";
var currentNumber = 0;
var currentDirection = true;
var currentLen = 0;
var totalWord = 0;
var state = false;
var answer;

function init(){
	$(window).resize(initSize)
	$("#loadBack").hide();
	$(document).onfocusin=bluring;
	$('#help').click(function(){
		window.open("/help.html","help","resizable=yes,scrollbars=yes,location=no,status=no,toolbar=no,width=700,height=500");
	});
	$('#start').click(function(){
		if(state){
			alert('현재 게임이 진행중입니다. 게임 종료 후 새로 시작하시기 바랍니다.');
		}else{
			$('#start').css("background","url('/image/start_.jpg')");
			$('#finish').css("background","url('/image/finish.jpg')");
			clear();
			newPuzzle(91);
		}
	});
	$('#finish').click(function(){
		if (state) {
			if (confirm('게임을 완료하시겠습니까? 한번 완료한 후에는 진행이 불가능합니다.')) {
				$('#finish').css("background", "url('/image/finish_.jpg')");
				$('#start').css("background", "url('/image/start.jpg')");
				finPuzzle();
			}
		}else{
			alert(' 진행중인 게임이 없습니다. [START]버튼을 클릭하여 게임을 이용하시기 바랍니다.');
		}
	});

	
	$('#title').click(function(){
		location.href="http://mashup.cafe24.com";
	});
	initSize();
	if(document.all && document.fireEvent && document.createComment){
		try { // IE only
		    document.execCommand('BackgroundImageCache', false, true);
		} catch(e) { }
	}
}

function initSize(){
	var	heightMargin=145;
	var	widthMargin=237;
	$('#menu').height($(window).height()-heightMargin);
	$('#side').height($(window).height()-heightMargin);
	$('#contents').height($(window).height()-heightMargin);
	$('#contents').width($(window).width()-widthMargin);
	$('#bottom-center').width($(window).width()-widthMargin+137);
	$("#loadBack").width($(window).width());
	$("#loadBack").height($(window).height());
	
	$("#load").css('top',$(window).height()/2-50);
	$("#load").css('left',$(window).width()/2-75);
}

var result = function(){
		var xList = new Array();
		var yList = new Array();
		var characterList = new Array();
		this.addCharacter = function(x,y,c){
			var i = xList.length;
			xList[i] = x;
			yList[i] = y;
			characterList[i] = c;
		}
		this.getCharacter = function(x,y){
			var re='';
			for(var i=0; i<xList.length; i++){
				var confirmX = xList[i];
				var confirmY = yList[i];
				if(confirmX==x&&confirmY==y){
					re = characterList[i]; 
				}
				
			}
			return re;
		}
		this.finish = function(){
			var re=true;
			for(var i=0; i<xList.length; i++){
				var confirmX = xList[i];
				var confirmY = yList[i];
				var confirmCharacter = characterList[i];
				print("["+confirmCharacter+"::"+$("#contents input[x='" + confirmX + "'][y='" + confirmY + "']").val()+"]");
				if(confirmCharacter!=$("#contents input[x='" + confirmX + "'][y='" + confirmY + "']").val()){
					re = false;
				}
			}
			println("");
			$("#contents input").attr({ disabled : 'disabled'});
			return re;
		}
		this.setAll = function(){
			for(var i=0; i<xList.length; i++){
				var confirmX = xList[i];
				var confirmY = yList[i];
				var confirmCharacter = characterList[i];
				$("#contents input[x='" + confirmX + "'][y='" + confirmY + "']").val(confirmCharacter);
			}
			
		}
	}

function newPuzzle(action){
	xmlHttp = createXMLHttpRequest();
	var url = createUrl("puzzle", action);
	xmlHttp.open("GET", url, true);
	xmlHttp.onreadystatechange = switchWork;
	xmlHttp.send(null);
}

function finPuzzle(){
	clear();
	if(answer.finish()){
		alert('정답입니다.');
		$("#contents input]")
	}else{
		if(confirm('틀렸습니다.. 왼쪽 박스에서 틀린 사항을 확인해 보세요. 게임판에 정답을 세팅하시겠습니까?')){
			answer.setAll();
		}
	}
	state = false;
}

function createUrl(_searchWord, _action) {
    var queryString = "/servlet/ActionServlet?" 
        + "searchWord=" + encodeURIComponent(_searchWord)
    	+ "&action=" + _action
		+ "&ts=" + new Date().getTime()	
    return queryString;
}
	
function switchWork(action){
	$("#loadBack").show();
	if(xmlHttp.readyState == 4) {
		$("#loadBack").hide();
        if(xmlHttp.status == 200) {
			makePuzzle();
		}else {
            alert("Error xmlHttp.status");
        }
	}
}

function makePuzzle(){
	
	answer = new result();
	$("#contents").empty();
	
	var xml = xmlHttp.responseXML;
	var root = xml.documentElement;
	if(root.nodeName=="error"){
		var message = getValue(root,"message");
		if(confirm(message+"\n로 인해 퍼즐을 만들 수 없는 상황입니다. 기존 테스트용 퍼즐을 실행해 보시겠습니까?")){
			newPuzzle(99);
		}else{
			println("<a href=mailto:wigiri@naver.com>wigiri@naver.com</a> 로 메일 보내주시면 조치하겠습니다.");	
		}
	}else{
		var width = eval(getValue(xml, "width"));
		var height = eval(getValue(xml, "height"));
		
		var wrapWidth = 25 * width;
		$("#contents").append("<div id='outSide' class='outSide'></div>");
		for (var i = 0; i < eval(height); i++) {
			for (var j = 0; j < eval(width); j++) {
				$("#outSide").append("<div class='word' x='" + j + "' y='" + i + "'></div>");
			}
			$("#outSide").append("<div class='wordWrap'><!-- --></div>");
		}
		$("#outSide").css("width",wrapWidth);
		$("#contents").append("<br/>");
		var wordList = xml.getElementsByTagName("word");
		for (var i = 0; i < wordList.length; i++) {
			var wordNode = wordList.item(i);
			var word = getMyValue(wordNode);
			var x = eval(wordNode.getAttribute("x"));
			var y = eval(wordNode.getAttribute("y"));
			var direction = (wordNode.getAttribute("direction") == "true") ? true : false;
			var number = eval(wordNode.getAttribute("number"));
			var len = word.length;
			if(eval(number)==0){
				currentDirection = direction;
				currentLen = len;
				totalWord = wordList.length;
			} 
			var inputObj = null;	
			for (var j = 0; j < len; j++) {
				var tempX = direction?eval(x+j):eval(x);
				var tempY = direction?eval(y):eval(y+j);
				var backImg = "";
				if(j==0) backImg = "style=\"background: url('/image/wordBg_"+number+".gif')\"";
				inputObj = 	"<input number=" + number + " x=" +	tempX +	" y=" +tempY + " " +
							"' len=" +	len + " seq=" + j + " " + backImg +
							" class='inputWord' type='text' maxlength='1' "+ " " +
							"onclick='setCurrentNumber("+number+","+len+","+direction+")' "+
							"onkeyup='goNextChar(event,"+tempX+","+tempY+") ' "+
							" >";
				answer.addCharacter(tempX,tempY,word.charAt(j));
				$("#contents div[x='" + tempX + "'][y='" + tempY + "']").empty();
				$("#contents div[x='" + tempX + "'][y='" + tempY + "']").css("background-color","#ffffff");
				$("#contents div[x='" + tempX + "'][y='" + tempY + "']").append(inputObj);
			}
		}
		
		$("#contents").append("<div id='horizonalDiv' class='descriptionDiv'><div class='descriptionDivTitle'>가로문제</div></div>");
		$("#contents").append("<div id='verticalDiv' class='descriptionDiv'><div class='descriptionDivTitle'>세로문제</div></div>");
		
		var descriptionList = xml.getElementsByTagName("description");
		var thumnailList = xml.getElementsByTagName("thumnail");
		var horizonalCnt = 0;
		var verticalCnt = 0;
		for (var i = 0; i < descriptionList.length; i++) {
			var descriptionNode = descriptionList.item(i);
			var thumnailNode = thumnailList.item(i);
			var description = getMyValue(descriptionNode);
			var thumnail = getMyValue(thumnailNode);
			if(thumnail!=null&&thumnail.length>5){
				thumnail = "<div style='float:left'><img src = '"+ thumnail + "'></div>";
			}else{
				thumnail = " ";
			}
			var direction = (eval(descriptionNode.getAttribute("direction"))) ? true : false;
			var number = eval(descriptionNode.getAttribute("number"));
			var descriptionContents;
			descriptionContents = "<div class='descriptionNumber'>"+ (number+1) + "</div>"+thumnail+description;
			if(direction){
				var cls = (horizonalCnt%2==0)?"horizonalOdd":"horizonalEven";
				$("#horizonalDiv").append("<div id='description' number='"+number+"' class='"+cls+"'> "+descriptionContents+"</div>");
				$("#horizonalDiv").append("<div class='wrap'><!-- --></div>")
				horizonalCnt++;
			}else{
				var cls = (verticalCnt%2==0)?"horizonalEven":"horizonalOdd";
				$("#verticalDiv").append("<div id='description' number='"+number+"' class='"+cls+"'>"+descriptionContents+"</div>");
				$("#verticalDiv").append("<div class='wrap'><!-- --></div>")
				verticalCnt++;
			}
		}
		state = true;
	}
}

function goNextChar(otherEvent, x, y){
	var realEvent  = otherEvent?otherEvent:window.event;
	var nextNumber = eval(currentNumber)+1;
	if(realEvent.keyCode==32){
		len = currentLen-1;
		var direction = currentDirection;
		if(len!=0){
			currentLen = len;
			x = direction? eval(x)+1:eval(x);
			y = direction? eval(y):eval(y)+1;
			$("#contents input[x='" + eval(x) + "'][y='" + eval(y) + "']").focus();
		}else if(len==0 && nextNumber<totalWord){
			$("#contents input[number='" + nextNumber + "'][seq='" + 0 + "']").focus();
			checkSameLocation(nextNumber,x,y);
		}
	}
}

function setCurrentNumber(number, len, direction){
	currentNumber = eval(number);
	currentLen = eval(len);
	currentDirection = direction;
	$("#contents input").css("border", "none");
	var x = eval($("#contents input[number='" + currentNumber + "'][seq='0']").attr("x"));
	var y = eval($("#contents input[number='" + currentNumber + "'][seq='0']").attr("y"));
	for (var i = 0; i < len; i++) {
		var inX = direction ? x + i : x;
		var inY = direction ? y : y + i;
		$("#contents input[x='" + inX + "'][y='" + inY + "']").css("border-style", "inset");
		$("#contents input[x='" + inX + "'][y='" + inY + "']").css("border-width", "1px");
		$("#contents input[x='" + inX + "'][y='" + inY + "']").css("border-color", "#000000");
	}
	if (direction) {
		$("#currentWordDescription").html($("#horizonalDiv div[number='" + currentNumber + "']").html());
	}
	else {
		$("#currentWordDescription").html($("#verticalDiv div[number='" + currentNumber + "']").html());
	}
}

function checkSameLocation(nextNumber){
	var tempNumber	= $("#contents input[number='" + nextNumber + "'][seq='" + 0 + "']").attr("number");
	var len			= $("#contents input[number='" + nextNumber + "'][seq='" + 0 + "']").attr("len");
	setCurrentNumber(tempNumber, len, !currentDirection);
}

function print(str){
	$("#currentWordDescription").append(str);
}

function println(str){
	$("#currentWordDescription").append(str+"<br/>");
}

function clear(str){
	$("#currentWordDescription").empty();
}

function getMyValue(node_){
	var result = " ";
	if(node_!=null && node_.firstChild !=null)
		result = node_.firstChild.nodeValue;
	return result;		
}	
	
function getValue(node_,tagName_){
	var result = " ";
	if(node_.getElementsByTagName(tagName_)[0]!=null && node_.getElementsByTagName(tagName_)[0].firstChild !=null)
		result = node_.getElementsByTagName(tagName_)[0].firstChild.nodeValue;
	return result;		
}

function createXMLHttpRequest() {
	var xmlReq;
	if (window.XMLHttpRequest) {
		xmlReq = new XMLHttpRequest();
	} else if (window.ActiveXObject) {
		try {
			xmlReq = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e1) {
			try {
				xmlReq = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e2) { }
		}
	}
	return xmlReq;
}
	
function bluring(){ 
	if (event.srcElement.name == "click") {
		document.body.focus();
	}
}
	
$(document).ready(init);