Reveal.addEventListener('slidechanged', function(event) {
    if($(event.currentSlide).attr('data-background-iframe') && $(event.currentSlide).hasClass('front')) {
        $('.reveal > .backgrounds').css('z-index', 1);
    }
    else {
        $('.reveal > .backgrounds').css('z-index', 0);
    }

    if ($(event.currentSlide).attr('data-background-opacity')) {
        $('.reveal > .backgrounds').css('opacity', $(event.currentSlide).attr('data-background-opacity'));
    }
    else {
        $('.reveal > .backgrounds').css('opacity', 1);
    }
});


var $timer = document.createElement('div');
$timer.id = 'timer';
$timer.style.cssText = 'position:absolute;right:10px;top:10px;z-index;1000;width:100px;height:50px;';
var timerChart = echarts.init($timer);
document.body.appendChild($timer);

timerChart.setOption({
    series: [{
        name:'Timer',
        type:'gauge',
        startAngle: 180,
        endAngle: 0,
        radius: '160%',
        center: ['50%', '80%'],
        splitNumber: 5,
        axisLine: {
            lineStyle: {
                color: [[0.5, '#dd0000'],[0.8, '#dddd00'],[1, '#00dd00']],
                width: 2
            }
        },
        axisTick: {
            splitNumber: 5,
            length :5,
            lineStyle: {
                color: 'auto',
                width: 1
            }
        },
        axisLabel: {
            show: false
        },
        splitLine: {
            show: true,
            length: 5,
            lineStyle: {
                color: 'auto'
            }
        },
        pointer : {
            width : 3
        },
        title : {
            show : false
        },
        detail : {
            formatter:function () { return '';},
            textStyle: {
                color: 'auto',
                fontWeight: 'bolder'
            }
        },
        data:[{value: 0, name: 'current'}]
    }]
});

var timeAll = 30 * 60 * 1000;
var elapsedTime = 0;
var timeInterval = 1000 * 30;
setInterval(function () {
    elapsedTime += timeInterval;
    timerChart.setOption({
        series: [{
            name: 'Timer',
            data: [{
                name: 'current',
                value: elapsedTime / timeAll * 100
            }]
        }]
    })
}, timeInterval);