var RnVintageClock = (function () {
    'use strict';

    var timers = {};

    function init(id) {
        var container = document.getElementById(id);
        if (!container) return;

        var showSeconds = container.getAttribute('data-show-seconds') === '1';
        var playSound   = container.getAttribute('data-play-sound') === '1';
        var soundUrl    = container.getAttribute('data-sound-url') || '';
        var soundVolume = parseFloat(container.getAttribute('data-sound-volume') || '50') / 100;

        var hourHand   = document.getElementById(id + '-hour');
        var minuteHand = document.getElementById(id + '-minute');
        var secondHand = showSeconds ? document.getElementById(id + '-second') : null;

        if (!hourHand || !minuteHand) return;

        hourHand.style.transition   = 'none';
        minuteHand.style.transition = 'none';

        tick(hourHand, minuteHand, secondHand);

        container.style.opacity    = '1';
        container.style.transition = 'opacity 0.3s ease';

        requestAnimationFrame(function () {
            requestAnimationFrame(function () {
                hourHand.style.transition   = '';
                minuteHand.style.transition = '';
            });
        });

        if (playSound && soundUrl) {
            var audio   = new Audio(soundUrl);
            audio.loop    = true;
            audio.volume  = soundVolume;
            audio.preload = 'auto';

            var playing = false;

            var tryPlay = function () {
                audio.play().then(function () {
                    playing = true;
                }).catch(function () {
                    playing = false;
                });
            };

            var autoStart = function () {
                tryPlay();
                document.removeEventListener('click',      autoStart);
                document.removeEventListener('touchstart', autoStart);
                document.removeEventListener('keydown',    autoStart);
            };
            document.addEventListener('click',      autoStart);
            document.addEventListener('touchstart', autoStart);
            document.addEventListener('keydown',    autoStart);
        }

        timers[id] = setInterval(function () {
            tick(hourHand, minuteHand, secondHand);
        }, 1000);
    }

    function tick(hourHand, minuteHand, secondHand) {
        var now     = new Date();
        var hours   = now.getHours() % 12;
        var minutes = now.getMinutes();
        var seconds = now.getSeconds();

        setRotation(hourHand,  (hours * 30) + (minutes * 0.5));
        setRotation(minuteHand, (minutes * 6) + (seconds * 0.1));

        if (secondHand) {
            setRotation(secondHand, seconds * 6);
        }
    }

    function setRotation(el, deg) {
        el.style.transform = 'translateX(-50%) rotate(' + deg + 'deg) translateZ(0)';
    }

    function destroy(id) {
        if (timers[id]) {
            clearInterval(timers[id]);
            delete timers[id];
        }
    }

    return { init: init, destroy: destroy };

})();
