<script>
mp3Url = "http://egis.kr/zz/audio/josumi.mp3";
topUrl = "http://egis.kr/zz/number/";
eqColor = "#ffffff";
timerColor = "#ffffff";
eqYes = "start";
function eqHtml() {
    document.write("<audio id=eqPlayer src=" + mp3Url + " style=display:none loop></audio>");
    document.write("<table style=width:79px cellpadding=0 cellspacing=0><td id=tdEq_1></td>");
    for (eq2 = 2; eq2 <= 16; eq2++) document.write("<td style=width:1px></td><td id=tdEq_" + eq2 +"></td>");
    document.write("</table>");
    document.write("<table style=width:79px;margin-top:5px cellpadding=0 cellspacing=0><td align=left><table cellpadding=0 cellspacing=0><td id=current_1 style=display:none></td><td style=width:1px;display:none></td><td id=current_2></td><td style=width:5px;height:8px;background-color:" + timerColor + ";-webkit-mask:url(" + topUrl + "bar.png);mask:url(" + topUrl + "/bar.png)></td><td id=current_3></td><td style=width:1px></td><td id=current_4></td></table></td>");
    document.write("<td align=right><table cellpadding=0 cellspacing=0><td id=total_1 style=display:none></td><td style=width:1px;display:none></td><td id=total_2></td><td style=width:5px;height:8px;background-color:" + timerColor + ";-webkit-mask:url(" + topUrl + "/bar.png);mask:url(" + topUrl + "/bar.png)></td><td id=total_3></td><td style=width:1px></td><td id=total_4></td></table></td></table>");
}
function eqDraw(eq) {
    this["_" + eq] = this["eq_" + eq].getContext("2d");
    this["_" + eq].fillStyle = eqColor;
    this["_" + eq].beginPath();
    if (this["_eq_" + eq] == 1) { this["_"+eq].moveTo(0,0),this["_"+eq].lineTo(4,0),this["_"+eq].lineTo(4,1),this["_"+eq].lineTo(0,1); this["_"+eq].moveTo(0,2),this["_"+eq].lineTo(4,2),this["_"+eq].lineTo(4,3),this["_"+eq].lineTo(0,3); this["_"+eq].moveTo(0,4),this["_"+eq].lineTo(4,4),this["_"+eq].lineTo(4,5),this["_"+eq].lineTo(0,5); this["_"+eq].moveTo(0,6),this["_"+eq].lineTo(4,6),this["_"+eq].lineTo(4,7),this["_"+eq].lineTo(0,7); this["_"+eq].moveTo(0,8),this["_"+eq].lineTo(4,8),this["_"+eq].lineTo(4,9),this["_"+eq].lineTo(0,9); this["_"+eq].moveTo(0,10),this["_"+eq].lineTo(4,10),this["_"+eq].lineTo(4,11),this["_"+eq].lineTo(0,11); this["_"+eq].moveTo(0,12),this["_"+eq].lineTo(4,12),this["_"+eq].lineTo(4,13),this["_"+eq].lineTo(0,13); this["_"+eq].moveTo(0,14),this["_"+eq].lineTo(4,14),this["_"+eq].lineTo(4,15),this["_"+eq].lineTo(0,15); }
    else if (this["_eq_" + eq] == 2) { this["_"+eq].moveTo(0,2),this["_"+eq].lineTo(4,2),this["_"+eq].lineTo(4,3),this["_"+eq].lineTo(0,3); this["_"+eq].moveTo(0,4),this["_"+eq].lineTo(4,4),this["_"+eq].lineTo(4,5),this["_"+eq].lineTo(0,5); this["_"+eq].moveTo(0,6),this["_"+eq].lineTo(4,6),this["_"+eq].lineTo(4,7),this["_"+eq].lineTo(0,7); this["_"+eq].moveTo(0,8),this["_"+eq].lineTo(4,8),this["_"+eq].lineTo(4,9),this["_"+eq].lineTo(0,9); this["_"+eq].moveTo(0,10),this["_"+eq].lineTo(4,10),this["_"+eq].lineTo(4,11),this["_"+eq].lineTo(0,11); this["_"+eq].moveTo(0,12),this["_"+eq].lineTo(4,12),this["_"+eq].lineTo(4,13),this["_"+eq].lineTo(0,13); this["_"+eq].moveTo(0,14),this["_"+eq].lineTo(4,14),this["_"+eq].lineTo(4,15),this["_"+eq].lineTo(0,15); }
    else if (this["_eq_" + eq] == 3) { this["_"+eq].moveTo(0,4),this["_"+eq].lineTo(4,4),this["_"+eq].lineTo(4,5),this["_"+eq].lineTo(0,5); this["_"+eq].moveTo(0,6),this["_"+eq].lineTo(4,6),this["_"+eq].lineTo(4,7),this["_"+eq].lineTo(0,7); this["_"+eq].moveTo(0,8),this["_"+eq].lineTo(4,8),this["_"+eq].lineTo(4,9),this["_"+eq].lineTo(0,9); this["_"+eq].moveTo(0,10),this["_"+eq].lineTo(4,10),this["_"+eq].lineTo(4,11),this["_"+eq].lineTo(0,11); this["_"+eq].moveTo(0,12),this["_"+eq].lineTo(4,12),this["_"+eq].lineTo(4,13),this["_"+eq].lineTo(0,13); this["_"+eq].moveTo(0,14),this["_"+eq].lineTo(4,14),this["_"+eq].lineTo(4,15),this["_"+eq].lineTo(0,15); }
    else if (this["_eq_" + eq] == 4) { this["_"+eq].moveTo(0,6),this["_"+eq].lineTo(4,6),this["_"+eq].lineTo(4,7),this["_"+eq].lineTo(0,7); this["_"+eq].moveTo(0,8),this["_"+eq].lineTo(4,8),this["_"+eq].lineTo(4,9),this["_"+eq].lineTo(0,9); this["_"+eq].moveTo(0,10),this["_"+eq].lineTo(4,10),this["_"+eq].lineTo(4,11),this["_"+eq].lineTo(0,11); this["_"+eq].moveTo(0,12),this["_"+eq].lineTo(4,12),this["_"+eq].lineTo(4,13),this["_"+eq].lineTo(0,13); this["_"+eq].moveTo(0,14),this["_"+eq].lineTo(4,14),this["_"+eq].lineTo(4,15),this["_"+eq].lineTo(0,15); }
    else if (this["_eq_" + eq] == 5) { this["_"+eq].moveTo(0,8),this["_"+eq].lineTo(4,8),this["_"+eq].lineTo(4,9),this["_"+eq].lineTo(0,9); this["_"+eq].moveTo(0,10),this["_"+eq].lineTo(4,10),this["_"+eq].lineTo(4,11),this["_"+eq].lineTo(0,11); this["_"+eq].moveTo(0,12),this["_"+eq].lineTo(4,12),this["_"+eq].lineTo(4,13),this["_"+eq].lineTo(0,13); this["_"+eq].moveTo(0,14),this["_"+eq].lineTo(4,14),this["_"+eq].lineTo(4,15),this["_"+eq].lineTo(0,15); }
    else if (this["_eq_" + eq] == 6) { this["_"+eq].moveTo(0,10),this["_"+eq].lineTo(4,10),this["_"+eq].lineTo(4,11),this["_"+eq].lineTo(0,11); this["_"+eq].moveTo(0,12),this["_"+eq].lineTo(4,12),this["_"+eq].lineTo(4,13),this["_"+eq].lineTo(0,13); this["_"+eq].moveTo(0,14),this["_"+eq].lineTo(4,14),this["_"+eq].lineTo(4,15),this["_"+eq].lineTo(0,15); }
    else if (this["_eq_" + eq] == 7) { this["_"+eq].moveTo(0,12),this["_"+eq].lineTo(4,12),this["_"+eq].lineTo(4,13),this["_"+eq].lineTo(0,13); this["_"+eq].moveTo(0,14),this["_"+eq].lineTo(4,14),this["_"+eq].lineTo(4,15),this["_"+eq].lineTo(0,15); }
    else if (this["_eq_" + eq] == 8) { this["_"+eq].moveTo(0,14),this["_"+eq].lineTo(4,14),this["_"+eq].lineTo(4,15),this["_"+eq].lineTo(0,15); }
    this["_" + eq].fill();
}
 
function timerMode() {
    currentString = (("0" + Math.floor(eqPlayer.currentTime / 60)).slice(-2) + ("0" + Math.floor(eqPlayer.currentTime % 60)).slice(-2)).split("");
    totalString = (("0" + Math.floor(eqPlayer.duration / 60)).slice(-2) + ("0" + Math.floor(eqPlayer.duration % 60)).slice(-2)).split("");
    for (time = 1; time <= 4; time++) {
        this["current_" + time].innerHTML = "<div style=background-color:" + timerColor + ";width:7px;height:8px;-webkit-mask:url(" + topUrl + currentString[time - 1] + ".png);mask:url(" + topUrl + currentString[time - 1] + ".png)></div>";
        this["total_" + time].innerHTML = "<div style=background-color:" + timerColor + ";width:7px;;height:8px;-webkit-mask:url(" + topUrl + totalString[time - 1] + ".png);mask:url(" + topUrl + totalString[time - 1] + ".png)></div>";
    }
}
 
function trackMode() {
    for (eq16 = 1; eq16 <= 16; eq16++) {
        this["tdEq_" + eq16].innerHTML = "<canvas id=eq_" + eq16 + " style=display:block width=4 height=15></canvas>";
        if (eqYes == "start") this["_eq_" + eq16] = 8;
        else if (eqYes == "no") this["_eq_" + eq16] = this["_eq_" + eq16] >= 8 ? 8 : this["_eq_" + eq16] + 1;
        else this["_eq_" + eq16] = Math.floor(Math.random() * 8 + 1);       
        eqDraw(eq16);
        timerMode();
    }
}
 
setInterval(trackMode, 100);
 
function eqMode() {
    if (eqYes == "yes") eqPlayer.pause(), eqYes = "no";
    else eqPlayer.play(), eqYes = "yes";
}
</script>
 
<div id=backDiv style=width:100%;overflow:hidden;background-image:url(http://egis.kr/zz/images/suzy/1.png);background-size:contain>
    <div id=eqDiv onmousedown=eqMode() style='margin-top:45%;margin-left:10%;width:79px;height:28px;cursor:pointer border:solid 3px blue'><script>eqHtml()</script></div>
</div>
 
<script>
onresize = function() {
    backDiv.style.height = backDiv.offsetWidth * 540 / 960 + "px";
}
onresize();
</script>
<!--  -->
<h1 id="kims" style="color:blue;font-size:30px;">kimchulyong is the best man</h2>

kimchulyong is the best man