﻿function $(o) {
    return document.getElementById(o);
}
function animation(o, a, s, e) {
    var sTime = +new Date(), p, speed = 400;
    var iTimer = setInterval(function() {
        p = (+new Date() - sTime) / speed;
        if (p >= 1) {
            o[a] = e;
            return clearInterval(iTimer);
        }
        o[a] = s + (e - s) * ((-Math.cos(p * Math.PI) / 2) + 0.5);
    }, 1);
}
function Show(o) {
    var lis = o.getElementsByTagName('span');
    var oi = o.getElementsByTagName('div')[0];
    var k = 0, f = true, Timer;
    lis[0].className = 'over';
    for (var i = 0; i < lis.length; i++) {
        (function(i) {
            lis[i].onmouseover = function() {
                lis[k].className = '';
                this.className = 'over';
                clearInterval(Timer);
                k = i;
                animation(oi, 'scrollLeft', oi['scrollLeft'], i * oi.offsetWidth);
            }
        })(i);
        lis[i].onmouseout = Auto;
    }
    function Auto() {
        Timer = setInterval(function() {
            k == lis.length - 1 && [f = false];
            k == 0 && [f = true];
            lis[k].className = '';
            f ? k++ : k--;
            lis[k].className = 'over';
            animation(oi, 'scrollLeft', oi['scrollLeft'], k * oi.offsetWidth);
        }, 6000);
    }
    Auto();
}
