// ==UserScript==
// @name           Animated YouTube Thumbnails with Fade Effect
// @namespace      iampradip
// @license        BSD License; http://www.opensource.org/licenses/bsd-license.php
// @copyright      2011, iampradip (http://userscripts.org/users/iampradip1)
// @include        http://*.youtube.com/*
// @include        http://*.youtube.com
// @include        http://www.youtube.com/*
// @include        http://www.youtube.com
// @include        http://youtube.com/*
// @include        http://youtube.com
// ==/UserScript==

var imgVideoThumb=null;
var astrImageFilters=new Array('/hqdefault.jpg','/default.jpg','/1.jpg','/2.jpg','/3.jpg');
var intIntervalAnimate=1000;
var intIntervalFade=10;
var intTotalFadeDuration=250;
var strIntervalAnimate="IntervalAnimate";
var strTotalFadeDuration="TotalFadeDuration";


var mouseOverVideoThumbnail=function (){
    if(this.src && this.src.indexOf("ytimg.com/vi/")!=-1){
        for(var i=0;i<astrImageFilters.length;i++){
            if(this.src.indexOf(astrImageFilters[i])!=-1){
                imgVideoThumb=this;
                if(imgVideoThumb.className && imgVideoThumb.className=="animated-youtube-thumbnail"){
                } else {
                    createHelperImage(imgVideoThumb);
                }
            }
        }
    }
};

var createHelperImage=function (brother){
    if(brother.previousSibling && brother.previousSibling.className && brother.previousSibling.className=="animated-youtube-thumbnail"){
        return;
    }
    var img=document.createElement("img");
    img.className="animated-youtube-thumbnail"; //no use in css, only to check on above condition
    img.src=brother.src;
    // Update 1 - Makes compatible with http://userscripts.org/scripts/show/107000
    // To-Do : Make compatible with m.youtube.com
    try{
        img.style.position="absolute";
        img.style.top=brother.offsetTop+"px";
        img.style.left=brother.offsetLeft+"px";
        img.width=brother.clientWidth;
        img.height=brother.clientHeight;
        img.addEventListener("mouseover",mouseOverVideoThumbnail,false);
        img.addEventListener("mouseout",mouseOutVideoThumbnail,false);
    }catch(e){}
    // Update 1 ends here
    brother.parentNode.insertBefore(img,brother);
};

var mouseOutVideoThumbnail=function (){
    imgVideoThumb=null;
};

var changeVideoThumbnail=function (){
    if(imgVideoThumb && imgVideoThumb.src){
        if(imgVideoThumb.previousSibling){
            imgVideoThumb.previousSibling.src=imgVideoThumb.src;
        } else if(imgVideoThumb.nextSibling){
            imgVideoThumb.nextSibling.src=imgVideoThumb.src;
        }
        imgVideoThumb.src=nextImageSrc(imgVideoThumb.src);
        imgVideoThumb.style.opacity="0.001";
    }
    setTimeout(changeVideoThumbnail,intIntervalAnimate);
};

var fadeVideoThumbnail=function (){
    if(imgVideoThumb && imgVideoThumb.style.opacity && imgVideoThumb.style.opacity!="1.0"){
        var flDestOpacity=parseFloat(imgVideoThumb.style.opacity)+(intIntervalFade/intTotalFadeDuration);
        if(flDestOpacity<1.0)
            imgVideoThumb.style.opacity=flDestOpacity;
        else
            imgVideoThumb.style.opacity="1.0";
    }
    setTimeout(fadeVideoThumbnail,intIntervalFade);
};

var nextImageSrc=function (src){
    var strSuffix=src;
    if(strSuffix.indexOf("?")!=-1){
        strSuffix=strSuffix.substring(0,strSuffix.indexOf("?"));
    }
    strSuffix=strSuffix.substring(strSuffix.lastIndexOf("/"));
    for(var i=0;i<astrImageFilters.length;i++){
        if(strSuffix==astrImageFilters[i]){
            if(i==astrImageFilters.length-1){
                return src.substring(0,src.lastIndexOf("/"))+astrImageFilters[1]; //no hq thumbs on animation
            } else {
                return src.substring(0,src.lastIndexOf("/"))+astrImageFilters[i+1];
            }
        }
    }
    return "";
};

var gmChangeIntervalAnimate=function (){
    var value=prompt("Enter image-switching duration (milliseconds) :",intIntervalAnimate);
    if(value==null)
        return;
    value=parseInt(value);
    if(value<100){
        alert("Invalid duration.\n\n* Must be greater than 100ms.\n* Must be valid number.");
        return;
    }
    intIntervalAnimate=value;
    GM_setValue(strIntervalAnimate,value);
};

var gmChangeTotalFadeDuration=function (){
    var value=prompt("Enter fade animation duration (milliseconds) :\nFading animation may take more time based on execution time taken by browser.",intTotalFadeDuration);
    if(value==null)
        return;
    value=parseInt(value);
    if(value<20 || value>intIntervalAnimate){
        alert("Invalid duration.\n\n* Must be greater than 20ms.\n* Must be valid number.\n* Must be smaller than image-switching duration.");
        return;
    }
    intTotalFadeDuration=value;
    GM_setValue(strTotalFadeDuration,value);
};

var addEvents=function (){
    for(var i=0;i<document.images.length;i++){
        try{
            var img=document.images[i];
            img.removeEventListener("mouseover",mouseOverVideoThumbnail,false);
            img.removeEventListener("mouseout",mouseOutVideoThumbnail,false);
            img.addEventListener("mouseover",mouseOverVideoThumbnail,false);
            img.addEventListener("mouseout",mouseOutVideoThumbnail,false);
        }catch(e){}
    }
};

var monitorDynEls=function (){
    document.body.addEventListener("DOMNodeInserted",addEvents,false);
};

addEvents();
monitorDynEls();

setTimeout(changeVideoThumbnail,intIntervalAnimate);
setTimeout(fadeVideoThumbnail,intIntervalFade);

try{
    // Only for Greasemonkey
    if(GM_getValue){
        intIntervalAnimate=GM_getValue(strIntervalAnimate,1000);
        intTotalFadeDuration=GM_getValue(strTotalFadeDuration,250);
    }
} catch(e){}

try{
    if(GM_registerMenuCommand){
        GM_registerMenuCommand("Animated YouTube Thumbnails with Fade Effect -> Change image-switching duration...",gmChangeIntervalAnimate);
        GM_registerMenuCommand("Animated YouTube Thumbnails with Fade Effect -> Change fade animation duration...",gmChangeTotalFadeDuration);
    }
}catch(e){}