function $$(id) { return document.getElementById(id); }
document.getElementById("focus_change_list").style.width = $$('focus_change_btn').getElementsByTagName('li').length * 810;
function moveElement(elementID, final_x, final_y, interval) {
    if (!document.getElementById) return false;
    if (!document.getElementById(elementID)) return false;
    var elem = document.getElementById(elementID);
    if (elem.movement) {
        clearTimeout(elem.movement);
    }
    if (!elem.style.left) {
        elem.style.left = "0px";
    }
    if (!elem.style.top) {
        elem.style.top = "0px";
    }
    var xpos = parseInt(elem.style.left);
    var ypos = parseInt(elem.style.top);
    if (xpos == final_x && ypos == final_y) {
        return true;
    }
    if (xpos < final_x) {
        var dist = Math.ceil((final_x - xpos) / 10);
        xpos = xpos + dist;
    }
    if (xpos > final_x) {
        var dist = Math.ceil((xpos - final_x) / 10);
        xpos = xpos - dist;
    }
    if (ypos < final_y) {
        var dist = Math.ceil((final_y - ypos) / 10);
        ypos = ypos + dist;
    }
    if (ypos > final_y) {
        var dist = Math.ceil((ypos - final_y) / 10);
        ypos = ypos - dist;
    }
    elem.style.left = xpos + "px";
    elem.style.top = ypos + "px";
    var repeat = "moveElement('" + elementID + "'," + final_x + "," + final_y + "," + interval + ")";
    elem.movement = setTimeout(repeat, interval);
}
function classNormal() {
    var focusBtnList = $$('focus_change_btn').getElementsByTagName('li');
    for (var i = 0; i < focusBtnList.length; i++) {
        focusBtnList[i].className = '';
    }
}
function focusChange() {
    var focusBtnList = $$('focus_change_btn').getElementsByTagName('li');
    for (var j = 0; j < focusBtnList.length; j++) {
        focusBtnList[j].onmouseover = function() {
            var temp = $("li").index(this) - $$('focus_change_btn').getElementsByTagName('li').length + 1;
            moveElement('focus_change_list', (temp - 1) * -810, 0, 5);
            classNormal();
            focusBtnList[temp - 1].className = 'current';
            clearInterval(timeid);
        }


        focusBtnList[j].onmouseout = function() {
            timeid = setInterval('autoFocusChange()', 6000);
        }

    }
}

timeid = setInterval('autoFocusChange()', 10000);
function autoFocusChange() {
    var focusBtnList = $$('focus_change_btn').getElementsByTagName('li');
    for (var i = 0; i < focusBtnList.length; i++) {
        if (focusBtnList[i].className == 'current') {
            var currentNum = i;
        }
    }

    for (var i = 0; i < focusBtnList.length; i++) {
        if (currentNum == i) {
            if (focusBtnList.length > i + 1) {
                moveElement('focus_change_list', -810 - i * 810, 0, 5);
                classNormal();
                focusBtnList[i + 1].className = 'current';
            }
            else {
                moveElement('focus_change_list', 0, 0, 5);
                classNormal();
                focusBtnList[0].className = 'current';
            }
        }
    }
//      if (currentNum == focusBtnList.length-1)
//          {
//            clearInterval(timeid);
//            timeid = setInterval('autoFocusChange()', 10000);
//          }
//          else
//          {             
                clearInterval(timeid);
                timeid = setInterval('autoFocusChange()', 6000);
//          }
}
window.onload = function() {
    focusChange();
}