var dragtime = function(){
            this.video =
                    document.querySelectorAll('.js-dt-video');

            this.label =
                    document.querySelectorAll('.js-dt-label');

            this.tabs =
                    document.querySelectorAll('.switch');

            this.init();
        };

        dragtime.prototype.init = function() {
            this.attachEvent();
        };

        dragtime.prototype.attachEvent = function() {
            var t = this;

            for (var i = 0; i < this.tabs.length; i++) {
                this.tabs[i].onclick = function() {
                    setTimeout(t.scrollHandler.bind(t), 1000);
                };
            }

            window.addEventListener('scroll', function(){
                window.requestAnimationFrame(t.scrollHandler.bind(t));
            });
        };

        dragtime.prototype.scrollHandler = function(){
            for(var i = 0; i < this.video.length; i++){
                if(this.video[i].offsetParent !== null) {
                    this.checkPosition(this.video[i], i);
                }
            }
        };

        dragtime.prototype.checkPosition = function(video_item, i){
            var t = this;
            var rectBody = document.body.getBoundingClientRect();
            var rect = video_item.getBoundingClientRect();
            var offsetTop = rect.top - rectBody.top;
            var topHeight = offsetTop + video_item.clientHeight;

            if (topHeight >= window.scrollY &&
                    offsetTop <= window.scrollY + window.innerHeight - video_item.clientHeight/1.5) {

                if(video_item.currentTime === 0)
                    video_item.play();

                video_item.onended = function(){
                    t.label[i].style.opacity = 1;
                }

            }
        };

        new dragtime();