/*
top_el.tools_mode 
	front-color
	back-color
	
top_el.brush_size : 브러시 사이즈
top_el.xx : 그림 가로크기
top_el.yy : 그림의 세로크기
top_el.bgColor : 설정된 배경색.
top_el.color : 설정된 전경색.
*/
addLoadEvent(JpaintForm);
function JpaintForm(){
	if (!document.getElementById)return false;
	if (!document.getElementById("javascript-paint"))return false;
	top_el = document.getElementById("javascript-paint");
	if (top_el.getElementsByTagName("img").length>=1){
		img_el = top_el.getElementsByTagName("img");
		top_el.iconSrc = new Array();
		for (i=0;i<img_el.length;i++){
			top_el.iconSrc[i] = img_el[i].src;
			img_el[i].parentNode.removeChild(img_el[i]);
		}
	}
	top_el.draw_mode = "point-draw";
	top_el.tools_mode = "front-color";
	top_el.brush_size = 1;
	var form_el = document.createElement("form");
	insertTag(form_el,"h2","도트놀이");
	form_el.className = "first_form";
	
	var p_el = document.createElement("p");
	form_el.setAttribute("action","#");
	form_el.setAttribute("method","get");
	insertTag(p_el,"strong","자바스크립트");
	insertTag(p_el,"text","로 구현한 그림판 입니다.");
	insertTag(p_el,"em","가로 세로 12픽셀");
	insertTag(p_el,"text"," 에서 ");
	insertTag(p_el,"em","가로 32픽셀 세로 36픽셀");
	insertTag(p_el,"text","까지 크기 조절이 가능합니다.");
	insertTag(p_el,"hr");
	insertTag(p_el,"a","gallery","http://kongbaguni.net/project/javascript-game/dotdot/");
	insertTag(p_el,"text","에서 다른사람의 도트 그림을 구경할수 있습니다. 물론, 이곳에 그림을 올리는것도 가능합니다.");
	insertTag(p_el,"hr");
	var input = new Array();
	for (i=0;i<3;i++){input[i] = new Array()}
	input[0] = {"name":"xx", "value":32, "type":"text","desc":"가로"}
	input[1] = {"name":"yy", "value":36, "type":"text","desc":"세로"}
	input[2] = {"value":"시작","type":"submit"}
	for (i=0;i<input.length;i++){
		label_el = document.createElement("label");
		label_el.className = input[i]["name"];
		label_el.setAttribute("for",input[i]["name"]);
		if (input[i]["name"])insertTag(label_el,"span",input[i]["desc"]);
		input_el = document.createElement("input");
		input_el.setAttribute("value",input[i]["value"]);
		input_el.setAttribute("type",input[i]["type"]);
		input_el.setAttribute("name",input[i]["name"]);
		input_el.setAttribute("size",input[i]["size"]);
		label_el.appendChild(input_el);
		p_el.appendChild(label_el);
	}
	form_el.appendChild(p_el);
	top_el.appendChild(form_el);
	p_el = document.createElement("p")
	insertTag(form_el,"h3","지원 브라우저");
	insertTag(p_el,"text","도트놀이는 익스플로러의 경우 버전8이상에서 정상 작동합니다.");
	insertTag(p_el,"sub","(그마저도 약간 문제가 있습니다. 컬러팔레트에 잘못된 값을 입력하면 새로고침해버립니다.)");
	insertTag(p_el,"text","그렇지만, ");
	insertTag(p_el,"a","모질라 파이어폭스","http://www.mozilla.or.kr/ko/firefox/");
	insertTag(p_el,"text", ", ");
	insertTag(p_el,"a","애플 사파리","http://www.apple.com/safari/");
	insertTag(p_el,"text", ", ");	
	insertTag(p_el,"a","오페라","http://www.opera.com/");
	insertTag(p_el,"text", ", ");	
	insertTag(p_el,"a","구글 크롬","http://www.google.com/chrome/");
	insertTag(p_el,"text", "에서는 문제없이 작동합니다.");
	insertTag(p_el,"br");
	insertTag(p_el,"em","Last-update: 2009-2-19");
	form_el.appendChild(p_el);
	insertTag(form_el,"hr");
	insertTag(form_el,"h3","만든사람");
	p_el = document.createElement("p");
	p_el.setAttribute("style","text-align:right");
	form_el.appendChild(p_el);
	insertTag(p_el,"br");
	insertTag(p_el,"text","Site : ");
	insertTag(p_el,"a","http://kongbaguni.net","http://kongbaguni.net");
	insertTag(p_el,"br");
	insertTag(p_el,"text","E-mail : ");
	insertTag(p_el,"a","kongbaguni@gmail.com","mailto://kongbaguni@gmail.com");
	form_el.onsubmit = function(){
		var xx = this.xx.value;
		var yy = this.yy.value;
		if (xx>32) {this.xx.value=32;}
		else if (xx<12) { this.xx.value=12; }
		else if (xx+1-1<xx) {this.xx.value = 32;  }
		if (yy>36) {this.yy.value=36;}
		else if (yy<12) {this.yy.value=12;}
		else if (yy+1-1<yy){this.yy.value=36;}
		if (xx>=12 && xx<=36 && yy>=12 && yy<=36) {
			top_el.xx=xx;
			top_el.yy=yy;
			Jpaint();
			animateElementRemove(this);
		}
		return false;
	}
	animateElement(form_el,0,100,"opacity",2,30);
	animateElement(form_el,0,700,"height",5,30)
}

function Jpaint(){

	if (!document.getElementById)return false;
	if (!document.getElementById("javascript-paint"))return false;
	var top_el=document.getElementById("javascript-paint");
	top_el.color="#000";
	top_el.bgcolor="none";
	top_el.brush_mode = false;
	var xx=top_el.xx; // 작업화면 가로 픽셀 수
	var yy=top_el.yy; // 작업화면 세로 픽셀 수
	top_el.dot=new Array(); // 도트 배열선언
	//---------------------------------------------- work 만들기 시작
	top_el.work=document.createElement("ol");
	top_el.work.className="work";
	for (i=0;i<yy;i++){
		top_el.dot[i]=new Array();
		var li_el=document.createElement("li");
		for (j=0;j<xx;j++){
			top_el.dot[i][j]=document.createElement("a");
			top_el.dot[i][j].href="#";
			top_el.dot[i][j].i = i;
			top_el.dot[i][j].j = j;
			top_el.dot[i][j].onclick=function (){
				this.oldbg = this.bg;
				if (top_el.draw_mode=="spuit"){	
					if(top_el.tools_mode=="front-color"){
						top_el.color = this.bg;
						top_el.color_set.button[0].style.background = this.bg;
					} else if (top_el.tools_mode =="back-color"){
						top_el.bgcolor = this.bg;
						top_el.work.style.background = this.bg;
						top_el.preview.style.background = this.bg;
						top_el.color_set.button[1].style.background = this.bg;
					}
					top_el.color_form.color.value = this.bg;
					return false;
				}
				if (top_el.draw_mode=="point-draw"){
					var x = this.i;
					var y = this.j;
					for (i=0;i<top_el.brush_size;i++){
						for (j=0;j<top_el.brush_size;j++){
							var xx1 = x+i;
							var yy1 = y+j;
							var xx2 = x-i;
							var yy2 = y-j;
							if (xx2<0) xx2 = 0;
							if (xx1>top_el.yy-1) {
								xx1 = x;
								return false;
							}
							if (yy2<0) yy2 = 0;
							if (yy1>top_el.xx-1) yy1 = y;
							if (top_el.dot[x][y].oldbg == top_el.dot[xx1][yy1].bg){
								top_el.dot[xx1][yy1].style.background = top_el.color;
								top_el.dot[xx1][yy1].bg = top_el.color;
								top_el.preview[xx1][yy1].style.background = top_el.color;
							} if (top_el.dot[x][y].oldbg == top_el.dot[xx2][yy2].bg){
								top_el.dot[xx2][yy2].style.background = top_el.color;
								top_el.dot[xx2][yy2].bg = top_el.color;
								top_el.preview[xx2][yy2].style.background = top_el.color;
							} if (top_el.dot[x][y].oldbg == top_el.dot[xx1][yy2].bg){
								top_el.dot[xx1][yy2].style.background = top_el.color;
								top_el.dot[xx1][yy2].bg = top_el.color;
								top_el.preview[xx1][yy2].style.background = top_el.color;
							} if (top_el.dot[x][y].oldbg == top_el.dot[xx2][yy1].bg){
								top_el.dot[xx2][yy1].style.background = top_el.color;
								top_el.dot[xx2][yy1].bg = top_el.color;
								top_el.preview[xx2][yy1].style.background = top_el.color;
							}
						}
					}
					
				}
				if(top_el.brush_mode==false){
					top_el.brush_mode=true;
					return false;
				} else {
					top_el.brush_mode=false;
					return false;
				}
				return false;
			}
			top_el.dot[i][j].onmouseover= function() { 
				this.oldbg = this.bg;
				var x = this.i;
				var y = this.j;
				var xxx = x+1; var yyy = y+1
				top_el.statusbar.bar.value = "x:"+xxx+" y:"+yyy+" mode:"+top_el.draw_mode;
				if (top_el.draw_mode!="point-draw")return false;
				for (i=0;i<top_el.brush_size;i++){
					for (j=0;j<top_el.brush_size;j++){
						var xx1 = x+i; var yy1 = y+j; var xx2 = x-i; var yy2 = y-j;
						if (xx2<0) xx2 = 0;
						if (xx1>top_el.yy-1) xx1 = x;
						if (yy2<0) yy2 = 0;
						if (yy1>top_el.xx-1) yy1 = y;
						if (top_el.dot[x][y].oldbg == top_el.dot[xx1][yy1].bg){
							top_el.dot[xx1][yy1].className = "hover";
						}
						if (top_el.dot[x][y].oldbg == top_el.dot[xx2][yy2].bg){
						top_el.dot[xx2][yy2].className = "hover";
						}
						if (top_el.dot[x][y].oldbg == top_el.dot[xx1][yy2].bg){
							top_el.dot[xx1][yy2].className = "hover";
						}
						if (top_el.dot[x][y].oldbg == top_el.dot[xx2][yy1].bg){
							top_el.dot[xx2][yy1].className = "hover";
						}
					}
				}
			}
			top_el.dot[i][j].onmouseout = function(){
					if (top_el.draw_mode!="point-draw")return false;
                    var x = this.i;
                    var y = this.j;
                    for (i=0;i<top_el.brush_size;i++){
                        for (j=0;j<top_el.brush_size;j++){
                            var xx1 = x+i; var yy1 = y+j; var xx2 = x-i; var yy2 = y-j;
                            if (xx2<0) xx2 = 0;
                            if (xx1>top_el.yy-1) xx1 = x;
                            if (yy2<0) yy2 = 0;
                            if (yy1>top_el.xx-1) yy1 = y;
                            top_el.dot[xx1][yy1].className = "";
                            top_el.dot[xx2][yy2].className = "";
                            top_el.dot[xx1][yy2].className = "";
                            top_el.dot[xx2][yy1].className = "";
                        }
                    }
			}
			top_el.dot[i][j].onmousedown=function(){ this.onclick();}
			top_el.dot[i][j].onmouseup=function(){ this.onclick();}
			
			top_el.dot[i][j].bg ="none";
			var txt=document.createTextNode("dot");
			top_el.dot[i][j].appendChild(txt);
			li_el.appendChild(top_el.dot[i][j]);
		}
		top_el.work.appendChild(li_el);
	}
	top_el.work.onmouseout = function(){top_el.statusbar.bar.value = "";}
	top_el.appendChild(top_el.work);
	div_el = document.createElement("div");
	animateElement(top_el.work,0,100,"opacity",2,30);


	//animateElement(top_el.work,0,top_el.work.offsetHeight,"height",4,50);
	
	//----------------------------------------------  work 만들기 끝
	
	
	
	//---------------------------------------------- 미리보기 시작
	top_el.preview=new Array();
	top_el.preview=document.createElement("ol");
	top_el.preview.className="preview";
	top_el.preview.style.width = xx + "px";
	top_el.preview.style.height = yy + "px";
	for (i=0;i<yy;i++){
		var li_el = document.createElement("li");
		top_el.preview[i]=new Array();
		for (j=0;j<xx;j++){
			top_el.preview[i][j] = document.createElement("a");
			top_el.preview[i][j].className = "none";
			li_el.appendChild(top_el.preview[i][j]);
		}
		top_el.preview.appendChild(li_el);
	}
	top_el.appendChild(top_el.preview);
	animateElement(top_el.preview,0,100,"opacity",2,30);
	//---------------------------------------------- 미리보기 끝
	//---------------------------------------------- 색상선택 시작
	/*
	var tools = new Array("none","#000","#444","#666","#999","#ccc","#fff",
						  "#300","#500","#700","#900","#b00","#d00","#f00",
						  "#f30","#f50","#f70","#f90","#fb0","#fd0","#ff0",
						  "#f03","#f05","#f07","#f09","#f0b","#f0d","#f0f",
						  "#f33","#f55","#f77","#f99","#fbb","#ffd","#ffe",
						  "#f24","#f48","#f6a","#f8c","#fae","#fcf","#fef",
						  "#040","#050","#070","#090","#0b0","#0d0","#0f0",
						  "#2f0","#6f0","#8f0","#af0","#cf0","#ef0","#ff0",
						  "#0f2","#0f4","#0f6","#0f8","#0fa","#0fc","#0ff",
						  "#2f2","#4f4","#6f6","#8f8","#afa","#cfc","#efe",
						  "#004","#005","#007","#009","#00b","#00d","#00f",
						  "#02f","#04f","#06f","#08f","#0af","#0cf","#0ef",
						  "#20f","#40f","#60f","#80f","#a0f","#c0f","#e0f",
						  "#22f","#44f","#66f","#88f","#aaf","#ccf","#eef",
						  "#a2f","#a4f","#a6f","#a8f","#aaf","#acf","#aef"
						  );*/
	var tools = new Array();
	for (var i=0; i<16;i++){
		var CC = (i*16).toString(16);
		var CC2 = ((i*8)+126).toString(16);
		if ((i*16)<16) CC = "0"+CC;
		tools[i] = "#"+CC+"0000";
		tools[i+16] = "#00"+CC+"00";
 		tools[i+32] = "#"+CC+"ff"+CC;
		tools[i+48] = "#0000"+CC;
		tools[i+64] = "#"+CC+CC+"00";
		tools[i+80] = "#"+CC+"00"+CC;
		tools[i+96] = "#00"+CC+CC;
		tools[i+112] = "#ff"+CC+"00";
        tools[i+128] = "#ffff"+CC;
		tools[i+144] = "#ff00"+CC;
		tools[i+160] = "#ff"+CC+"ff";
		tools[i+176] = "#"+CC+"ffff";
		tools[i+192] = "#"+CC+CC+"ff";
		tools[i+208] = "#ffaa"+CC;
		tools[i+224] = "#ff"+CC+"aa";
		tools[i+240] = "#"+CC+"ffaa";
		tools[i+256] = "#"+CC+"aaff";
		tools[i+272] = "#aaff"+CC;
		tools[i+288] = "#aa"+CC+"ff";
		tools[i+304] = "#"+CC+CC+CC;
		tools[i+320] = "#"+CC+CC+CC2;
		tools[i+336] = "#"+CC+CC2+CC;
		tools[i+352] = "#"+CC2+CC+CC;
		tools[i+368] = "#"+CC2+CC2+CC;
		tools[i+384] = "#"+CC2+CC+CC2;
		tools[i+400] = "#"+CC+CC2+CC2;
		tools[i+416] = "#ff"+CC+CC2;
		tools[i+432] = "#ff"+CC2+CC;
		tools[i+448] = "#"+CC+"ff"+CC2;
		tools[i+464] = "#"+CC2+"ff"+CC;
		tools[i+480] = "#"+CC+CC2+"ff";
		tools[i+490] = "#"+CC2+CC+"ff";
	}
	tools[0] = "none";
	tools[1] = "#000";

	top_el.color1List = document.createElement("ul");
	top_el.color1List.className = "tools";
	for (i=0;i<tools.length;i++){
		li_el = document.createElement("li");
		a_el = document.createElement("a");
		a_el.href = "#";
		a_el.style.background=tools[i];
		a_el.bg = tools[i];
		a_el.onclick = function() {
			colorChange(this.bg);
			return false;
		}
		txt = document.createTextNode(tools[i]);
		a_el.title = tools[i];
		if (i==0) a_el.title="지우개";
		a_el.appendChild(txt);
		li_el.appendChild(a_el);
		top_el.color1List.appendChild(li_el);
	}
	top_el.appendChild(top_el.color1List);
	
	top_el.color_form = document.createElement("form");
	top_el.color_form.setAttribute("method","post");
	top_el.color_form.setAttribute("action","#");
	top_el.color_form.className = "color";
	var p_el = document.createElement("p");
	var label_el = document.createElement("label");
	label_el.setAttribute("for","select-color");
	var input_el = document.createElement("input");
	input_el.setAttribute("name","color");
	input_el.setAttribute("type","text");
	input_el.setAttribute("value","#");
	label_el.appendChild(input_el);
	p_el.appendChild(label_el);
	top_el.color_form.appendChild(p_el);
	top_el.appendChild(top_el.color_form);
	top_el.color_form.onsubmit = function(){
		if (this.color.value.substring(0,1)!="#") this.color.value = "#";
		colorChange(this.color.value);
		return false;
	}
	animateElement(top_el.color_form,0,100,"opacity",2,30);
	// ----------------------------- 색상선택 끝
	top_el.RGBcolor_form = document.createElement("form");
	top_el.RGBcolor_form.setAttribute("action","#");
	top_el.RGBcolor_form.setAttribute("id","RGBcolor_form");
	top_el.RGBcolor_form.onsubmit = function(){
		return false;
	}
	var p_el = document.createElement("p");
	var item = new Array();
	item[0] = "red";
	item[1] = "green";
	item[2] = "blue";
	for (i=0;i<item.length;i++){
	var selectEl = document.createElement("select");
	selectEl.setAttribute("name",item[i]);
		for (j=0;j<256;j++){
			var optionEl = document.createElement("option");
			optionEl.setAttribute("value",j);
			var text = document.createTextNode(j);
			optionEl.appendChild(text);
			selectEl.appendChild(optionEl);
		}
	insertTag(p_el,"span",item[i]);
	p_el.appendChild(selectEl);
	selectEl._value = "00";
	selectEl.onchange = function() {
			this._value  = parseInt(this.value).toString(16);
			if (this.value<16)this._value="0"+this._value;
			top_el.RGBcolor_form._value = "#" + top_el.RGBcolor_form.red._value + top_el.RGBcolor_form.green._value + top_el.RGBcolor_form.blue._value;
			if (top_el.tools_mode == "front-color"){
				top_el.color = top_el.RGBcolor_form._value;
				top_el.color_set.button[0].style.background = top_el.RGBcolor_form._value;
			} else if (top_el.tools_mode == "back-color"){
				top_el.bgcolor = top_el.RGBcolor_form._value;
				top_el.work.style.background = top_el.RGBcolor_form._value;
				top_el.preview.style.background = top_el.RGBcolor_form._value;
				top_el.color_set.button[1].style.background = top_el.RGBcolor_form._value;
			}
			top_el.color_form.color.value = top_el.RGBcolor_form._value;
			
		}
	}
	top_el.RGBcolor_form.appendChild(p_el);
	top_el.appendChild(top_el.RGBcolor_form);

	
	// ----------------------------- 전경색 배경색 시작
	top_el.color_set = document.createElement("ul");
	top_el.color_set.id = "now-color-set";
	top_el.color_set.className="front_color";
	top_el.color_set.button = new Array();
	var button_value = new Array;
	var front_color_onclick = function(){
		top_el.tools_mode = "front-color";
		this.parentNode.parentNode.className = "front_color";
		return false;
		}
	var back_color_onclick = function(){
		top_el.tools_mode = "back-color";
		this.parentNode.parentNode.className = "back-color";
		return false;
	}
	button_value[0] = {"className":"color","onclick":front_color_onclick,"img":"none"};
	button_value[1] = {"className":"backcolor","onclick":back_color_onclick,"img":"none"};
	for (i=0;i<button_value.length;i++){
		var li_el = document.createElement("li");
		li_el.className = button_value[i]["className"];
		top_el.color_set.button[i] = document.createElement("a");
		top_el.color_set.button[i].setAttribute("href","#");
		top_el.color_set.button[i].setAttribute("title",button_value[i]["className"]);
		top_el.color_set.button[i].setAttribute("style","background:"+button_value[i]["img"]);
		top_el.color_set.button[i].onclick = button_value[i]["onclick"];
		var text = document.createTextNode(button_value[i]["className"]);
		top_el.color_set.button[i].appendChild(text);
		li_el.appendChild(top_el.color_set.button[i]);
		top_el.color_set.appendChild(li_el);
	}
	top_el.appendChild(top_el.color_set);
	top_el.color_set.button[0].style.background="#000";
	top_el.color_form.color.value = "#000";

	// ----------------------------- 전경색 배경색 끝
	// ----------------------------- 브러시 크기 선택 시작
	top_el.brush_set = document.createElement("ul");
	top_el.brush_set.setAttribute("id","brush_set");
	top_el.brush_set.className="b1";
	top_el.brush_set.brush = new Array();
	for (i=0;i<10;i++){
		var li_el=document.createElement("li");
		li_el.className = "b"+(i+1);
		top_el.brush_set.brush[i] = document.createElement("a"); 
		var text = document.createTextNode(i+1);
		top_el.brush_set.brush[i].appendChild(text);
		top_el.brush_set.brush[i].setAttribute("href","#");
		top_el.brush_set.brush[i].setAttribute("title","brush size : "+(i+1));
		top_el.brush_set.brush[i].value = i+1;
		top_el.brush_set.brush[i].onclick = function(){
			top_el.brush_size = this.value;
			this.parentNode.parentNode.className = "b"+this.value;
			return false;
		}
		li_el.appendChild(top_el.brush_set.brush[i]);
		top_el.brush_set.appendChild(li_el);
	}
	top_el.appendChild(top_el.brush_set);
	// ----------------------------- 브러시 크기 선택 끝
	// ----------------------------- 툴바  시작 
		top_el.toolbar = document.createElement("ul");
		top_el.toolbar.id = "toolbar";
		top_el.toolbar.className = "point_draw";
		var button = new Array();

		var point_brush = function(){
			top_el.draw_mode = "point-draw";
			top_el.toolbar.className = "point_draw";
			return false
		}
		var spuit = function(){ 
			top_el.draw_mode = "spuit";
			top_el.toolbar.className = "spuit";
			return false
		}

		button[0] = {"name":"point_draw","onclick":point_brush}
		button[1] = {"name":"spuit","onclick":spuit}

		for (var i=0; i<button.length;i++){
			var li_el = document.createElement("li");
			var a_el = document.createElement("a");
			a_el.setAttribute("href","#");
			a_el.setAttribute("title",button[i]["name"]);
			a_el.onclick = button[i]["onclick"];
			a_el.className = button[i]["name"];
			insertTag(a_el,"text",button[i]["name"]);
			li_el.appendChild(a_el);
			top_el.toolbar.appendChild(li_el);
		}
		top_el.appendChild(top_el.toolbar);

		
	// ----------------------------- 툴바  끝
	// ----------------------------- 상태창 시작
		top_el.statusbar = document.createElement("form");
		top_el.statusbar.setAttribute("id","statusbar");
		top_el.statusbar.setAttribute("action","#");
		top_el.statusbar.onsubmit=function(){return false;}
		insertInput(top_el.statusbar,0,"text","bar");
		top_el.statusbar.bar.setAttribute("disabled","disabled");
		top_el.appendChild(top_el.statusbar);
		
    //------------------------------ 상태창 끝
	

	// ----------------------------- 완성버튼 시작 
	top_el.completeForm = document.createElement("form");
	top_el.completeForm.setAttribute("method","post");
	top_el.completeForm.setAttribute("action","#");
	top_el.completeForm.className = "complete";
	insertInput(top_el.completeForm,"clear","button","clear");
	insertInput(top_el.completeForm,"reset","button","reset");
	insertInput(top_el.completeForm,"다그렸다!","submit");
	top_el.completeForm.clear.onclick = function(){
		for (i=0;i<top_el.dot.length;i++){
			for (j=0;j<top_el.dot[i].length;j++){
				top_el.dot[i][j].bg = "none";
				top_el.dot[i][j].style.background = "none";
				top_el.preview[i][j].style.background = "none";
			}
		}
		return false;
	}
	top_el.completeForm.reset.onclick = function() {
		animateElementRemove(top_el.completeForm);
		animateElementRemove(top_el.work);
		animateElementRemove(top_el.preview);
		animateElementRemove(top_el.color_form);
		animateElementRemove(top_el.color1List);
		animateElementRemove(top_el.color_set);
		animateElementRemove(top_el.brush_set);
		animateElementRemove(top_el.toolbar);
		animateElementRemove(top_el.statusbar);
		animateElementRemove(top_el.RGBcolor_form);
		this.timeout2=setTimeout("JpaintForm();",1000);
	}
	top_el.appendChild(top_el.completeForm);
	top_el.completeForm.onsubmit=function(){
		Jpaint_complete_and_posting();
		return false;
	}
	animateElement(top_el.completeForm,0,100,"opacity",2,30);
	// ----------------------------- 완성버튼 끝
}
function Jpaint_complete_and_posting(){
	body_el = document.getElementsByTagName("body")[0];
	top_el = document.getElementById("javascript-paint");
	//top_el.xx, top_el.yy ->그림크기
	//top_el.dot[0][0].bg -> 그림 데이터 배열
	//top_el.bgcolor -> 배경.
	var data = "";
	for (i=0;i<top_el.dot.length;i++){
		for(j=0;j<top_el.dot[i].length;j++){
			data=data+top_el.dot[i][j].bg + "!!";
		}
		data=data+"##";
	}
	var form_el = document.createElement("form");
	form_el.className = "completeForm";
	form_el.setAttribute("method","post");
	form_el.setAttribute("action","http://kongbaguni.net/project/javascript-game/dotdot/");
	insertTag(form_el,"h2","완성한 그림을 저장합니다.");
	var ul_el = document.createElement("ul");
	ul_el.className = "completePicture";
	ul_el.setAttribute("style","background:"+top_el.bgcolor);
	for (i=0;i<top_el.dot.length;i++){
		var li_el = document.createElement("li");
		for(j=0;j<top_el.dot[i].length;j++){
			var span_el = document.createElement("span");
			span_el.style.background = top_el.dot[i][j].bg;
			li_el.appendChild(span_el);
		}
		ul_el.appendChild(li_el);
	}
	
	form_el.appendChild(ul_el);
	animateElement(form_el,0,100,"opacity",2,30);
	var p_el = document.createElement("p");
	var input = new Array();
	for (i=0;i<8;i++){input[i] = new Array()}
	input[0] = {"name":"pic_width", "value":top_el.xx, "type":"hidden"}
	input[1] = {"name":"pic_height", "value":top_el.yy, "type":"hidden"}
	input[2] = {"name":"pic_background", "value":top_el.bgcolor, "type":"hidden"}
	input[3] = {"name":"pic_data", "value":data, "type":"hidden"}
  	var Today = new Date();
    var year = Today.getFullYear();
    var mounth = Today.getMonth();
    if (mounth < 10) mounth = "0" + mounth;
    var date = Today.getDate();
    if (date < 10) date = "0"+ date;
    var hour = Today.getHours();
    if (hour < 10) houre = "0" + hour;
    var miniutes = Today.getMinutes();
    if (miniutes < 10) miniutes = "0"+miniutes;
    var second = Today.getSeconds();
    if (second < 10) second = "0"+second;
    var datetime = year+"-"+mounth+"-"+date+" "+hour+":"+miniutes+":"+second;
	input[4] = {"name":"datetime","value":datetime,"type":"hidden"}
	input[5] = {"name":"name", "value":"", "type":"text","desc":"이름"}
	input[6] = {"name":"homepage","value":"http://","type":"text","desc":"홈페이지"}
	input[7] = {"name":"site","value":location.href,"type":"hidden"}
	if (getCookie("kongbaguni-user-name")) input[5]["value"]=getCookie("kongbaguni-user-name");
	if (getCookie("kongbaguni-user-homepage")) input[6]["value"]=getCookie("kongbaguni-user-homepage")

	for (i=0;i<input.length;i++){
		var label_el = document.createElement("label");
		label_el.setAttribute("for",input[i]["name"]);
		label_el.className = input[i]["name"];
		if (input[i]["desc"])insertTag(label_el,"span",input[i]["desc"]);
		var input_el = document.createElement("input");
		input_el.setAttribute("name",input[i]["name"]);
		input_el.setAttribute("type",input[i]["type"]);
		if (input[i]["value"]) input_el.setAttribute("value",input[i]["value"]);
		label_el.appendChild(input_el);
		p_el.appendChild(label_el);
	}
	form_el.appendChild(p_el);
	
	var p_el = document.createElement("p");
	var textarea_el = document.createElement("textarea");
	textarea_el.setAttribute("name","comment");
	insertTag(p_el,"span","한마디")
	p_el.appendChild(textarea_el);
	form_el.appendChild(p_el);
	
	insertInput(form_el,"등록하기");
	var p_el = document.createElement("p");
	var input_el = document.createElement("input");
	input_el.setAttribute("type","button");
	input_el.setAttribute("value","취소");
	input_el.setAttribute("name","cancle");
	p_el.appendChild(input_el);
	form_el.appendChild(p_el);
	top_el.appendChild(form_el);
	form_el.onsubmit = function() {
		formTest(this);
		return false;
	}
	form_el.cancle.onclick = function() {
		var node = this.parentNode.parentNode;
		animateElement(node,100,0,"opacity",2,30);
		this.timeout = setTimeout(function(){node.parentNode.removeChild(node);},500);
		return false;
	}

}

function JpaintGwoShrink(node,value){
	if (parseInt(node[0][0].style.width)*node[0].length >460 && value > 0) value = 0;
	if (parseInt(node[0][0].style.width)<2 && value < 0) value = 0;
	for (i=0;i<node.length;i++){
		for (j=0; j<node[i].length;j++){
			node[i][j].style.width = parseInt(node[i][j].style.width)+value+"px";
			node[i][j].style.height = parseInt(node[i][j].style.height)+value+"px";
		}
	}
}

function formTest(node) {
	var pass = true;
	if (node.name) {
		if(node.name.value==""){
			alert ("이름적으세요");
			node.name.focus();
			pass = false;
			return false;
		}
	}
	if (node.password){
		if (node.password.value==""){
			alert ("비밀번호를 입력하셔야죠");
			node.password.focus();
			pass = false;
			return false;
		}
		else if(node.password.value != node.password2.value) {
			alert ("비밀번호가 잘못 입력되었습니다.");
			node.password.focus();
			pass = false;			
			return false;
		}
	}
	if (node.homepage) {
		var str = node.homepage.value;
		if (str.substring(0,7)!= "http://") {
			node.homepage.value = "http://"+ str;
				pass = false;			
				return false;
			}else if (str == "http://"){
				node.homepage.value = "";
			}
	}
	if (pass == true) {
		setCookie("kongbaguni-user-name",node.name.value);
		setCookie("kongbaguni-user-homepage",node.homepage.value);
		this.submit();
	}
	
}

function decRGB(node){
	var tmp = node.decRGB.substring(1,node.decRGB.length);
	node.decRGB=new Array();
	if (tmp.length==3){
		var red = tmp.substring(0,1);
		var green = tmp.substring(1,2);
		var blue = tmp.substring(2,3);
		node.decRGB["red"] = parseInt(red+red,16).toString(10);
		node.decRGB["green"] = parseInt(green+green,16).toString(10);
		node.decRGB["blue"] = parseInt(blue+blue,16).toString(10);
	}
	if (tmp.length==6){
        var red = tmp.substring(0,2);
        var green = tmp.substring(2,4);
        var blue = tmp.substring(4,6);
        node.decRGB["red"] = parseInt(red,16).toString(10);
        node.decRGB["green"] = parseInt(green,16).toString(10);
        node.decRGB["blue"] = parseInt(blue,16).toString(10);
	}
}

function colorChange(value){
    top_el = document.getElementById("javascript-paint");
	if (top_el.tools_mode=="front-color"){
    	top_el.color = value
        top_el.color_set.button[0].style.background = value
    } else if (top_el.tools_mode == "back-color"){
    	top_el.bgcolor = value;
		top_el.work.style.background = value;
        top_el.color_set.button[1].style.background = value;
        top_el.preview.style.background = value;
	}
	top_el.decRGB = value;
    decRGB(top_el);
	top_el.RGBcolor_form._value = value;
	top_el.RGBcolor_form.red.value = top_el.decRGB["red"];
	top_el.RGBcolor_form.red._value = parseInt(top_el.decRGB["red"]).toString(16);
	top_el.RGBcolor_form.green.value = top_el.decRGB["green"];
	top_el.RGBcolor_form.green._value = parseInt(top_el.decRGB["green"]).toString(16);
	top_el.RGBcolor_form.blue.value = top_el.decRGB["blue"];
	top_el.RGBcolor_form.blue._value = parseInt(top_el.decRGB["blue"]).toString(16);
    top_el.color_form.color.value = value;
    return false;
}