// JavaScript Document

function init() {

    function $ID(id) {
        return document.getElementById(id)
    }

    var naviArr = $ID("tc_btn").getElementsByTagName("span")
    var itemArr = [$ID('tctitle0'), $ID('tctitle1'), $ID('tctitle2')];
    var itemArr1 = [$ID('tcimg0'), $ID('tcimg1'), $ID('tcimg2')];

    var length = $ID("tc_btn").getElementsByTagName("span").length

    for (var i = 0; i < length; i++) {

        naviArr[i].onmouseover = function(event) {
            event = window.event ? window.event : event
            var target = event.target ? event.target : event.srcElement
            
            turnnavioff()
            target.className = "btn_on"
            
            turnitemoff()
            itemArr[target.innerHTML - 1].className = 'hottitleon';
            turnitemoff1()
            itemArr1[target.innerHTML - 1].className = 'hoteyeon';
            curIndex = target.innerHTML - 1
        }

    }
    function turnnavioff() {
        for (var i = 0; i < naviArr.length; i++) {
            naviArr[i].className = "btn_off"
        }
    }
    function turnitemoff() {
        for (var i = 0; i < itemArr.length; i++) {
            itemArr[i].className = "hottitleoff"
        }
    }
    function turnitemoff1() {
        for (var i = 0; i < itemArr1.length; i++) {
            itemArr1[i].className = "hoteyeoff"
        }
    }
    var curIndex = 0
    setInterval(
				function setCurrent() {
				    curIndex %= itemArr.length
				    turnitemoff()
				    itemArr[curIndex].className = 'hottitleon';
				    turnitemoff1()
				    itemArr1[curIndex].className = 'hoteyeon';
				    turnnavioff()
				    naviArr[curIndex].className = "btn_on"

				    //alert(curIndex)
				    curIndex++


				}, 1000)
}
if (window.addEventListener) { window.addEventListener("load", init, false); }
else { window.attachEvent("onload", init); }
//if(!window.attachEvent("onload", init)){alert('p');window.addEventListener("onload", init, false);}