// JavaScript Document
	var x=10; 	// 주인공의 초기위치 : left값
	var y=100; 	//  주인공의 초기위치 :top 값
	var xx = 50; 	// 가로축 이동량
	var yy = 50; 	// 세로축 이동량
	var back_x = -150; 	// 배경의 초기 위치 
	var back_y = -150; 	// 배경의 초기 위치 
	var back_xx = 50; 	// 배경의 가로축 이동량
	var back_yy = 50;	// 배경의 가로축 이동량
	
function addLoadEvent(func) {
	var oldonLoad = window.onload;
	if (typeof window.onload != 'function') {
			window.onload = func;
	}else {
		window.onload = function(){
			oldonLoad();
			func();
		}
	}
}

function check() {
	var force = document.getElementById("force");
	var control = document.getElementById("control");
	var control_button = control.getElementsByTagName("a");
	var title = document.getElementById("debug");
	var BG = document.getElementById("background");
	
	if (x <= 0) {x = 0;}
	if (y <= 0) {y = 0;}
	if (x >= 436) {x = 436;}
	if (y >= 236) {y = 236;}
	if (back_x <= -1000) {back_x = -1000;}
	if (back_y <= -700) {back_y = -700;}
	if (back_x >= -10) {back_x = -10;}
	if (back_y >= -10) {back_y = -10;}
	

	force.style.left = x + "px";
	force.style.top = y + "px";
	
	BG.style.left = back_x + "px";
	BG.style.top = back_y + "px";
	
	title.innerHTML = " 주인공: y:"+y+" : x:"+x+" <br /> 배경: back_y:"+back_y+" : back_x:"+back_x;
}
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 check01 = setInterval ("check()",10);

	control_button[0].onmouseup= function () {
		
		moveElement("force",x,y,x,y-yy,10);
		moveElement("background",back_x,back_y,back_x,back_y+back_yy,20);
		//force.setAttribute("src","player1-002.gif");
	
		//alert ("위");
	}
		control_button[1].onmouseup = function () {
		moveElement("force",x,y,x-xx,y,10);
		moveElement("background",back_x,back_y,back_x+back_xx,back_y,20);
		
		back_x= back_x+back_xx
		//force.setAttribute("src","player1-003.gif");

		//alert ("왼쪽");
		
	}
		control_button[2].onmouseup = function () {
	
		moveElement("force",x,y,x+xx,y,10);
		moveElement("background",back_x,back_y,back_x-back_xx,back_y,20);
		
		back_x= back_x-back_xx
		//force.setAttribute("src","player1-004.gif");

		//alert ("오른쪽");
	
	}
		control_button[3].onmouseup = function () {
		moveElement("force",x,y,x,y+yy,10);
		moveElement("background",back_x,back_y,back_x,back_y-back_yy,20);
		
		//force.setAttribute("src","player1-001.png");
		//alert ("아래");
		
	}
		
	

	

}	

function moveElement(elementID,xpos,ypos,final_x,final_y,interval) {
		if (!document.getElementById) return false;
		if (!document.getElementById(elementID)) return false;		
		
		var control = document.getElementById("control");
		var control_button = control.getElementsByTagName("a");	


		var elem = document.getElementById(elementID);
		if (elem.movement) {
			clearTimeout(elem.movement);
		}

		if (xpos == final_x && ypos == final_y) {
				if (elementID == "force") {	 force_control_showup();}
				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;

		
		if (elementID == "force") {		
			force_control_hide();
			var title = document.getElementById("debug");
			//title.innerHTML = elementID+"  top:"+xpos+"px : left:"+ypos+"px";	
			x = xpos ;
			y = ypos ;
		}
		if (elementID == "background") {
			back_x = xpos ;
			back_y = ypos ;			
		}


		var repeat = "moveElement('"+elementID+"',"+xpos+","+ypos+","+final_x+","+final_y+","+interval+")";
		elem.movement = setTimeout (repeat,interval);
		
		function force_control_showup() {
					for (i=0;i<=3;i++) {control_button[i].setAttribute("style","display:block;");}
		}
		function force_control_hide() {
					for (i=0;i<=3;i++) {control_button[i].setAttribute("style","display:none;");}
		}
	}