// ==UserScript==
// @name           YouTube - Detailed Thumbnails
// @namespace      iampradip
// @license        BSD License; http://www.opensource.org/licenses/bsd-license.php
// @copyright      2011, iampradip (http://userscripts.org/users/iampradip1)
// @description    Hover over youtube video thumbnails and find rating, description and more details without opening watch page.
// @include        http://www.youtube.com/*
// @include        https://www.youtube.com/*
// @version        1.0.3
// ==/UserScript==

var showDetailTimeout=null;
var intTimeout=1000; // details will be loaded only after this number of milliseconds
function $(id){
    return document.getElementById(id);
}
function $$(tag){
    return document.getElementsByTagName(tag);
}
function $$$(className){
    return document.getElementsByClassName(className);
}
function isGreasemonkey(){
    try{
        if(typeof GM_getValue!="undefined" && GM_getValue("test","test")){
            return true;
        } else {
            return false;
        }
    }catch(e){
        return false;
    }
}
function addCSS(css){
    if (typeof GM_addStyle != "undefined") {
        GM_addStyle(css);
    } else if (typeof PRO_addStyle != "undefined") {
        PRO_addStyle(css);
    } else if (typeof addStyle != "undefined") {
        addStyle(css);
    } else {
        var heads = $$("head");
        if (heads.length > 0) {
            var node = document.createElement("style");
            node.type = "text/css";
            try{
                node.appendChild(document.createTextNode(css));
            }catch(e){}
            heads[0].appendChild(node); 
        }
    }
}
function getVidId(strUrl){
    if(strUrl.indexOf("?")==-1)
        return "";
    var strSearch=strUrl.substring(strUrl.indexOf("?"));
    if(strUrl.indexOf("/verify_age")!=-1){
        strSearch=unescape(strSearch.substring(1));
    }
    if(strSearch.indexOf("v=")==-1)
        return "";
    var strVidId=strSearch.substring(strSearch.indexOf("v=")+2);
    if(strVidId.indexOf("&")!=-1)
        strVidId=strVidId.substring(0,strVidId.indexOf("&"));
    if(strVidId.indexOf("#")!=-1)
        strVidId=strVidId.substring(0,strVidId.indexOf("#"));
    return strVidId;
}
function loadDetail(event){
    var this_el=this;
    abortDetail(event, this);
    if(!isDetailLoaded(this_el)){
        showDetailTimeout=setTimeout(function (){
            this_el.getElementsByClassName("ytd-detail")[0].style.opacity="1";
            this_el.getElementsByClassName("ytd-detail")[0].style.height="auto";
            loadDetailNow(this_el);
        },intTimeout);
    } else {
        this_el.getElementsByClassName("ytd-detail")[0].style.opacity="1";
        this_el.getElementsByClassName("ytd-detail")[0].style.height="auto";
    }
}
function isDetailLoaded(videoListItem){
    return videoListItem.getElementsByClassName("ytd-loading").length==0;
}
function abortDetail(event, this_el){
    if(showDetailTimeout)
        clearTimeout(showDetailTimeout);
    if(!this_el)
        this_el=this;
    this_el.getElementsByClassName("ytd-detail")[0].style.opacity="0";
    this_el.getElementsByClassName("ytd-detail")[0].style.height="0";
}
function loadDetailNow(videoListItem){
    if(isDetailLoaded(videoListItem))
        return;
    var aLinks=videoListItem.getElementsByTagName("a");
    var strVidId="";
    for(var i=0;i<aLinks.length;i++){
        if(getVidId(aLinks[i].href)!=""){
            strVidId=getVidId(aLinks[i].href);
            break;
        }
    }
    if(strVidId=="")
        return;
    GM_xmlhttpRequest({
        url: "http://gdata.youtube.com/feeds/api/videos/"+strVidId,
        method: "GET",
        onload: function (res){
            if(isDetailLoaded(videoListItem))
                return;
            processResponse(videoListItem, res.responseText);
        },
        onerror: function (res){
            if(isDetailLoaded(videoListItem))
                return;
            showDetail(videoListItem, "<span class=ytd-error><img class=ytd-error-icon src=\"//s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif\"> Error loading</span>");
        }
    });
}
var YTVideo=function (feedData){
    var xmlDiv=document.createElement("div");
    xmlDiv.innerHTML=feedData.substr(feedData.indexOf("<entry"));
    currencyStyle=function (strAmount){ // need to work on this, but later
        var strOutput=strAmount;
        if(strOutput.length>9){
            strOutput=strOutput.substring(0,strOutput.length-9)+","+strOutput.substring(strOutput.length-9,strOutput.length-6)+","+strOutput.substring(strOutput.length-6,strOutput.length-3)+","+strOutput.substring(strOutput.length-3);
        } else if(strOutput.length>6){
            strOutput=strOutput.substring(0,strOutput.length-6)+","+strOutput.substring(strOutput.length-6,strOutput.length-3)+","+strOutput.substring(strOutput.length-3);
        } else if(strOutput.length>3){
            strOutput=strOutput.substring(0,strOutput.length-3)+","+strOutput.substring(strOutput.length-3);
        }
        return strOutput;
    }
    this.getPublishDate=function (){
        try{
            return new Date(xmlDiv.getElementsByTagName("published")[0].textContent);
        }catch(e){ // try catch can be avoided, but it saves time
            return "?";
        }
    };
    this.getCommentCount=function (){
        var gdComments=xmlDiv.getElementsByTagName("gd:comments");
        if(gdComments.length!=0){
            var gdFeedLink=gdComments[0].getElementsByTagName("gd:feedLink");
            if(gdFeedLink.length!=0){
                return currencyStyle(gdFeedLink[0].getAttribute("countHint"));
            }
        }
        return "?";
    };
    this.getDescription=function (){
        try{
            return xmlDiv.getElementsByTagName("media:description")[0].textContent;
        }catch(e){
            return "";
        }
    };
    this.getRating=function (){
        try{
            var fltRating=parseFloat(xmlDiv.getElementsByTagName("gd:rating")[0].getAttribute("average"));
            return fltRating*100/5;
        }catch(e){
            return 100;
        }
    };
    this.getFavorites=function (){
        try{
            return currencyStyle(xmlDiv.getElementsByTagName("yt:statistics")[0].getAttribute("favoriteCount"));
        }catch(e){
            return "?";
        }
    };
    this.getRaters=function (){
        try{
            return currencyStyle(xmlDiv.getElementsByTagName("gd:rating")[0].getAttribute("numRaters"));
        }catch(e){
            return "?";
        }
    }
    return this;
};
function processResponse(videoListItem, strResp){
    var vid=new YTVideo(strResp);
    var dt=vid.getPublishDate();
    var strDescription=vid.getDescription();
    var strLongDescription="";    
    if(strDescription.length>100){
        strLongDescription=strDescription.substr(100);
        strDescription=strDescription.substr(0,100);
    }
    strDescription=strDescription.replace(/\n/g,"<br>");
    strLongDescription=strLongDescription.replace(/\n/g,"<br>");
    showDetail(videoListItem, ""+
        "<div class=ytd-details>"+
            "<div class=ytd-rating-bar>"+
                "<div style=\"width: "+vid.getRating()+"%\" class=\"watch-sparkbar-likes\"></div>"+
                "<div style=\"width: "+(100-vid.getRating())+"%\" class=\"watch-sparkbar-dislikes\"></div>"+
            "</div>"+
            "<div class=ytd-comments>"+
                vid.getCommentCount()+
                "<span class=ytd-field-label>comments</span>"+
            "</div>"+
            "<div class=ytd-raters>"+
                vid.getRaters()+
                "<span class=ytd-field-label>ratings</span>"+
            "</div>"+
            "<div class=ytd-favorites>"+
                vid.getFavorites()+
                "<span class=ytd-field-label>favorites</span>"+
            "</div>"+
            "<div class=ytd-publish-date>"+
                "<span class=ytd-field-label-before-content>Uploaded on</span>"+
                (dt.getUTCMonth()+1)+"/"+dt.getUTCDate()+"/"+dt.getUTCFullYear()+
            "</div>"+
            "<div class=ytd-description>"+
                "<span class=ytd-field-label-before-content>Description</span>"+
                strDescription+
                (strLongDescription!=""?"<span class=long-description><span class=ytd-more-desc>...</span><span class=ytd-long-desc>"+strLongDescription+"</span></span>":"")+
            "</div>"+
        "</div>"+
    "");
}
function showDetail(videoListItem, strHTML){
    var divDetail=videoListItem.getElementsByClassName("ytd-detail");
    if(divDetail.length>0){
        divDetail[0].innerHTML=strHTML;
    }
}
function addEvents(){
    addEventsTo($$$("video-list-item"));
    addEventsTo($$$("watch-related-video-item"));
    addEventsTo($$$("video-entry"));
    addEventsTo($$$("result-item"));
}
function addEventsTo(videoListItems){
    var strDefaultDetailHTML="<center class=ytd-loading><img src=\"http://www.google.com/images/vsli1.gif\"></center>";
    for(var i=0;i<videoListItems.length;i++){
        var aLinks=videoListItems[i].getElementsByTagName("a");
        if(aLinks.length>0 && getVidId(aLinks[0].href)!=""){
            var divDetail=document.createElement("div");
            divDetail.className="ytd-detail";
            divDetail.innerHTML=strDefaultDetailHTML;
            videoListItems[i].appendChild(divDetail);
            videoListItems[i].addEventListener("mouseover", loadDetail, false);
            videoListItems[i].addEventListener("mouseout", abortDetail, false);
        }
    }
}
function init(){
    if(!document.body.innerHTML)
        return;
    if(!isGreasemonkey()){
        alert("YouTube - Detailed Thumbnails script is not supported. Uninstall script or use Firefox.")
        return;
    }
    addCSS("@-moz-keyframes fadeUp {from {opacity: 0} to {opacity: 1}}"+
        "@-moz-keyframes showDetails {0% {opacity:0;height:0;} 99%{height:0;opacity:0} 100%{opacity:1;height:auto}}"+
        ".ytd-detail{border:0;width:100%;background-color:#FFFFFF;height:0;overflow:hidden;opacity:0;-moz-transition:opacity "+intTimeout+"ms, height "+intTimeout+"ms}"+
        ".watch-related-video-item:hover .ytd-detail{background-color:transparent}"+
        //".video-list-item:hover .ytd-detail, .video-entry:hover .ytd-detail, .result-item:hover .ytd-detail, .watch-related-video-item:hover .ytd-detail{-moz-animation:showDetails "+intTimeout+"}"+
        ".ytd-detail .ytd-loading{padding:15px}"+
        ".watch-related-video-item .ytd-detail .ytd-loading img{display:none}"+
        ".watch-related-video-item .ytd-detail .ytd-loading:after{content:\"Loading...\"}"+
        ".ytd-detail .ytd-error, .ytd-detail .ytd-details{-moz-animation: fadeUp 500ms;margin-top:2px;font-size:90%;}"+
        ".video-list-item .ytd-error:after, .result-item:hover .ytd-error:after{content: \" details\"}"+
        ".video-entry .ytd-detail .ytd-details .ytd-rating-bar{width:99%}"+
        ".video-list-item .ytd-detail .ytd-details .ytd-rating-bar{width:62%;float:right}"+
        ".result-item .ytd-detail .ytd-details .ytd-rating-bar{width:76%;float:right}"+
        ".ytd-detail .ytd-details .ytd-field-label,.ytd-detail .ytd-details .ytd-field-label-before-content{color:#808080}"+
        ".ytd-detail .ytd-details .ytd-field-label:before{content:\" \"}"+
        ".ytd-detail .ytd-details .ytd-field-label-before-content:after{content:\": \"}"+
        ".ytd-detail .ytd-details .ytd-description .long-description .ytd-long-desc{display:none}"+
        ".ytd-detail .ytd-details .ytd-description:hover .long-description .ytd-long-desc{display:inline}"+
        ".ytd-detail .ytd-details .ytd-description:hover .long-description .ytd-more-desc{display:none}"+
        ".ytd-detail .ytd-error .ytd-error-icon{background:url(\"//s.ytimg.com/yt/imgbin/www-master-vfl8ZHa_q.png\") no-repeat scroll -68px -165px transparent;background-position:-245px -106px;height:19px;width:19px;margin-top:1px;position:relative;top:4px}");
    addEvents();
}
init();