<script type="text/javascript">

var col="43"//가로
var row="12"//세로


//문서 로드후 표기
function dot_write(dot_img){
var dot="";

for(j=0;j<row;j++){

for(i=1;i<=col;i++){
if(i<col){
dot = dot +"<a onclick=\"change("+parseInt(col*j+i)+")\" style=\"cursor: pointer;\"><span id=\"" +parseInt(col*j+i)+ "\">"+dot_img+"</span></a>";
}
else
if(i==col){
dot = dot +"<a onclick=\"change("+parseInt(col*j+i)+")\" style=\"cursor: pointer;\"><span id=\"" +parseInt(col*j+i)+ "\">"+dot_img+"</span><br /></a>";
}
}
}
m = document.getElementById('memo');
m.innerHTML =dot;
}

//도트 하나당 반전
function change(i){
main = document.getElementById(i);
var f=document.getElementById('ch');
var sindex=f.selectedIndex;
var fir= f.options[sindex].value.split("|")[0];
var sec= f.options[sindex].value.split("|")[1];
if(main.innerHTML ==fir){
main.innerHTML =sec;
}
else
if(main.innerHTML ==sec){
main.innerHTML =fir;
}
}


//전체 반전
function turns(){
var f=document.getElementById('ch');
var sindex=f.selectedIndex;
var fir= f.options[sindex].value.split("|")[0];
var sec= f.options[sindex].value.split("|")[1];
for(j=1;j<=row*col;j++){
main = document.getElementById(j);
if(main.innerHTML ==fir){
main.innerHTML =sec;
}
else
if(main.innerHTML ==sec){
main.innerHTML =fir;
}
}
}


// 셀렉트 박스의 도트로 체인지
function select(){
var f=document.getElementById('ch');
var sindex=f.selectedIndex;
var fir= f.options[sindex].value.split("|")[0];
var sec= f.options[sindex].value.split("|")[1];
dot_img= document.getElementById('ch').value;
dot_write(fir)
}




// 카피
function copyit() {
document.dfd.memo2.value= document.getElementById('memo').innerText;
var tempval=eval("document.dfd.memo2");
tempval.select();
therange=tempval.createTextRange();
therange.execCommand("Copy");
alert('토트가 복사되었습니다 \n 입력창에 붙여 넣기 하세요 !');
}

</script>


</head>

<body onload="dot_write('□')">
<center>

<select id="ch" onChange="select();">
<option value="□|■">사용할 도트를 선택하세요!</option>
<option value="□|■">□</option>
<option value="☆|★">☆</option>
<option value="○|●">○</option>
<option value="◇|◆">◇</option>
<option value="■|□">■</option>
<option value="★|☆">★</option>
<option value="●|○">●</option>
<option value="◆|◇">◆</option>
</select>
<a onclick="turns()"; style="cursor:pointer">전체 반전</a>

<form name="dfd">
<textarea name="memo2" style="visibility:hidden;"></textarea>
<div id="memo"></div>
</form>
<input type=submit value="복사" onclick="copyit()">

</center>