// ==UserScript==
// @name         Doushio image hover
// @namespace    http://your.homepage/
// @version      0.1
// @description  enter something useful
// @author       You
// @match        http://*.doushio.com/*
// @grant        none
// ==/UserScript==

(function(){
    $('head').append('<style>#hover_overlay{width:100%;height:100%;top:0;right:0;position:fixed;pointer-events:none;display:flex;z-index:300}#hover_overlay_image{max-height:100%;max-width:100%;margin:auto;display:none}</style>');
    $('body').append('<div id="hover_overlay"></div>');
    
    var mouseoverTarget;
    
    function imageHoverPreview(e){
        // Check if hovering over image or image is expanded by clicking
        var $target = $(mouseoverTarget);
        if (!$target.is('img') || $target.data('thumbSrc'))
            return fadeOutHoverOverlay();
        var src = $target.closest('a').attr('href');
        var isWebm = /\.webm/i.test(src);
        var $img  = $(isWebm ? '<video />' : '<img />', {
            id: 'hover_overlay_image',
            'src': src,
            autoplay: true,
            loop: true,
        });
        // Gracefully fade out previous image
        var $old = $('#hover_overlay_image');
        if ($old.length){
            fadeOutHoverOverlay(function(){
                fadeInHoverOverlay($img);
            });
        }
        else
            fadeInHoverOverlay($img);
    }
    
    function fadeInHoverOverlay($img){
        $('#hover_overlay').append($img);
        $('#hover_overlay_image').fadeIn({duration: 200});
    }
    
    function fadeOutHoverOverlay(cb){
        // Do nothing, if image is already removed
        var $img = $('#hover_overlay_image');
        if (!$img.length)
            return;
        $img.fadeOut({duration: 200, complete: function(){
            $img.remove();
            // More responsive transition with fast pointer movements
            imageHoverPreview();
        }});
        if (typeof cb === 'function')
            cb();
    }
    
    $DOC.on('mouseover', function(e){
		mouseoverTarget = e.target;
	});
    $DOC.on('mouseover', imageHoverPreview).on('click', 'img, video', fadeOutHoverOverlay);
})();