$(function(){
    var count = $('.timecont').length;
    for(var i=0; i<count; i++){
        $('.timeline').append('<em></em>');
    }

    var timeboxTop = $('.timebox').offset().top
    $(window).scroll(function () {
        if ($(window).scrollTop()>timeboxTop-$(window).height() && !timebegin){
            showyears(0);
        }
    })

    $(document).on('click', '.timeline em', function () {
        if (!$(this).hasClass('on') && !timeing) {
            var idx = $(this).index();
            showyears(idx);
        }
    })
})

var brandtime;
var timeing = false;
var timebegin = false;

function showyears(idx){
    timeing = true;
    timebegin = true;
    if (brandtime) { clearTimeout(brandtime); }
    var outIdx = $('.timeline em.on').index();
    var inIdx = idx;
    $('.timeline em.on').removeClass('on');
    $('.timeline em').eq(idx).addClass('on');
    var movey = '-=100%'
    var y = '100%'
    if (inIdx < outIdx) {
        movey = '+=100%'
        y = '-100%'
    }
    var ds = $('.timeline em:eq(0)').css('margin-bottom');
    var linetop = -1 * idx * (parseInt(ds.replace('px',''))+7);
    $('.timeline').animate({'margin-top': linetop },600,function(){
        if (outIdx >= 0) {
            $('.timecont').eq(outIdx).animate({ top: movey }, 1000, 'easeInOutExpo',function(){
                $('.timepic').eq(outIdx).animate({ top: movey })
            })
        }
        $('.timecont').eq(inIdx).css({ top: y }).animate({ top: movey }, 1000, 'easeInOutExpo', function () {
            $('.timepic').eq(inIdx).css({ top: y }).animate({ top: movey })
            timeing = false;
        })
        idx++;
        if (idx == $('.timecont').length) {
            idx = 0
        }
        if ($('.timecont').length>1){
            brandtime = setTimeout(function () { showyears(idx) }, 6000);
        }
    })
}