// JavaScript Document
function addLoadEvent(func) {
	var oldonLoad = window.onload;
	if (typeof window.onload != 'function') {
			window.onload = func;
	}else {
		window.onload = function(){
			oldonLoad();
			func();
		}
	}
}

addLoadEvent(준비);
function 준비() {
	var force = document.getElementById("force");
	var control = document.getElementById("control");
	var control_button = control.getElementsByTagName("a");
	var title = document.getElementById("header").getElementsByTagName("h1");

	var x=10;
	var y=100;
	var xx = 50; // 가로축 이동량
	var yy = 50; // 세로축 이동량
	var back_x = -150;
	var back_xx = 50;
	control_button[0].onmouseup= function () {
		check(x,y);
		moveElement("force",x,y,x,y-yy,10);
		y=y-yy;
		//force.setAttribute("src","player1-002.gif");
		
		//alert ("위");
	}
		control_button[1].onmouseup = function () {
		check(x,y);
		moveElement("force",x,y,x-xx,y,10);
		moveElement("background",back_x,0,back_x+back_xx,0,20);
		x=x-xx;
		back_x= back_x+back_xx
		//force.setAttribute("src","player1-003.gif");
		
		//alert ("왼쪽");
		
	}
		control_button[2].onmouseup = function () {
		check(x,y);
		moveElement("force",x,y,x+xx,y,10);
		moveElement("background",back_x,0,back_x-back_xx,0,20);
		x=x+xx
		back_x= back_x-back_xx
		//force.setAttribute("src","player1-004.gif");
		//alert ("오른쪽");
		
	}
		control_button[3].onmouseup = function () {
		check(x,y);
		moveElement("force",x,y,x,y+yy,10);
		y=y+yy;
		//force.setAttribute("src","player1-001.png");
		//alert ("아래");
		
	}
	function check(x,y) {		
		}
	function moveout(x,y) {
		for (i=0;i<=3;i++){
			control_button[i].setAttribute("style","display:block;")
		}
		
		if (x < 0) {x=0;control_button[1].setAttribute("style","display:none;");}
		if (y < 0) {y=0;control_button[0].setAttribute("style","display:none;");}
		if (x > 436) {x=436;control_button[2].setAttribute("style","display:none;");}
		if (y > 236) {y=236;control_button[3].setAttribute("style","display:none;");}
		
		//force.setAttribute("style","top:"+y+"px; left:"+x+"px;");
		force.style.top = y + "px";
		force.style.left = x + "px";
		title[0].innerHTML = "top:"+y+"px : left:"+x+"px";
	}
	

}	

function moveElement(elementID,xpos,ypos,final_x,final_y,interval) {
		if (!document.getElementById) return false;
		if (!document.getElementById(elementID)) return false;
		var elem = document.getElementById(elementID);
		if (elem.movement) {
			clearTimeout(elem.movement);
		}

		if (xpos == final_x && ypos == final_y) return true; 
		if (xpos < final_x) xpos = xpos +2;
		if (xpos > final_x) xpos = xpos -2;
		if (ypos < final_y) ypos = ypos +2;
		if (ypos > final_y) ypos = ypos -2;
		elem.style.left = xpos + "px";
		elem.style.top = ypos + "px";
		
		if (elementID == "force") {		
			var control = document.getElementById("control");
			var control_button = control.getElementsByTagName("a");	
			
			for (i=0;i<=3;i++){
				control_button[i].setAttribute("style","display:block;")
			}
			if (xpos <= 0) {xpos=0;control_button[1].setAttribute("style","display:none;");}
			if (ypos <= 0) {ypos=0;control_button[0].setAttribute("style","display:none;");}
			if (xpos >= 436) {xpos=436;control_button[2].setAttribute("style","display:none;");}
			if (ypos >= 236) {ypos=236;control_button[3].setAttribute("style","display:none;");}
			var title = document.getElementById("debug");
			title.innerHTML = elementID+"  top:"+xpos+"px : left:"+ypos+"px";
		}


		var repeat = "moveElement('"+elementID+"',"+xpos+","+ypos+","+final_x+","+final_y+","+interval+")";
		elem.movement = setTimeout (repeat,interval);
	}