var videopageVideos = document.querySelectorAll('article .video'), videopageCurrentVideoIndex = 0, videopageNewVideoIndex = 0, videopageMaxVideoIndex = videopageVideos.length - 1, videopageAnimating = false, videopageThumbnails = document.querySelectorAll('article .thumbnails .thumbnail') ; function videopageInit() { document.querySelector('article .previous').addEventListener('click', function(event) { videopageNavigateVideo(-1); event.preventDefault(); event.stopPropagation(); return false; }); document.querySelector('article .next').addEventListener('click', function(event) { videopageNavigateVideo(1); event.preventDefault(); event.stopPropagation(); return false; }); for(var i = 0, n = videopageMaxVideoIndex; i <= n; i++) { videopageVideos[i].querySelector('.play').addEventListener('click', function(event) { this.parentNode.querySelector('.embed').innerHTML = ''; event.preventDefault(); event.stopPropagation(); return false; }); (function(i) { videopageThumbnails[i].addEventListener('click', function(event) { if(windowWidth > 700) { videopageNavigateVideo(i - videopageCurrentVideoIndex); //videopageVideos[i].querySelector('.play').click(); event.preventDefault(); event.stopPropagation(); return false; }else { var videoId = videopageVideos[i].querySelector('.play').href.match(/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/ ]{11})/); window.open('http://youtube.com/watch?v=' + videoId[1], '_blank'); } }); })(i) } } function videopageNavigateVideo(videpageVideoOffset) { if(videpageVideoOffset == 0) return; if(videopageAnimating) return; videopageAnimating = true; videopageNewVideoIndex = videopageCurrentVideoIndex + videpageVideoOffset; if(videopageNewVideoIndex < 0) videopageNewVideoIndex = videopageMaxVideoIndex; if(videopageNewVideoIndex > videopageMaxVideoIndex) videopageNewVideoIndex = 0; if(videpageVideoOffset > 0) { videopageVideos[videopageNewVideoIndex].className += ' right'; }else { videopageVideos[videopageNewVideoIndex].className += ' left'; } videopageThumbnails[videopageCurrentVideoIndex].className = 'thumbnail'; videopageThumbnails[videopageNewVideoIndex].className = 'thumbnail current'; setTimeout(function() { videopageVideos[videopageNewVideoIndex].className = videopageVideos[videopageNewVideoIndex].className.replace(/( ?right| ?left)/g, ''); videopageVideos[videopageNewVideoIndex].className += ' current animate'; videopageVideos[videopageCurrentVideoIndex].className = videopageVideos[videopageCurrentVideoIndex].className.replace(/ ?current/, ''); if(videpageVideoOffset < 0) { videopageVideos[videopageCurrentVideoIndex].className += ' right animate'; }else { videopageVideos[videopageCurrentVideoIndex].className += ' left animate'; } setTimeout(function() { videopageVideos[videopageCurrentVideoIndex].querySelector('.embed').innerHTML = ''; videopageVideos[videopageCurrentVideoIndex].className = videopageVideos[videopageCurrentVideoIndex].className.replace(/( ?right| ?left| ?animate)/g, ''); videopageVideos[videopageNewVideoIndex].className = videopageVideos[videopageNewVideoIndex].className.replace(/( ?right| ?left| ?animate)/g, ''); videopageCurrentVideoIndex = videopageNewVideoIndex; videopageAnimating = false; }, 500); }, 50); } videopageInit();