// newTube; standalone JS to create a html5-video-capable embedded YouTube-player
//
// version: 201002030725
//
// author: frank "futtta" goossens
// License: CreativeCommons Attribution-Share Alike (http://creativecommons.org/licenses/by-sa/3.0/) or GNU LGPL (http://www.gnu.org/licenses/lgpl-3.0.txt) 
// more info: http://blog.futtta.be/2010/02/04/embedding-youtube-html5-video-with-newtube/
//
// usage: 
//      * include this script in the head of your document like this: <script type="text/javascript" src="http://futtta.be/newTube/newTube.js"></script>
//	* OR download this script ant the  2 image-files and change imgBaseUrl below on your (an empty string will do)
//      * put a link to a youtube-videopage inside a div with id=newTube
//      * this script will read the link and insert "something" that at least looks like an embedded player
//	* example on http://futtta.be/newTube/
//
// bugs & issues:
//      * the embedded player is bigger then the normal version
//      * the html5-version is only shown if browser is a recent version of chrome or safari and if user enrolled in html5-beta (http://youtube.com/html5)
//	* the image in the 'still' is fetched from YT, a large version isn't always available
//	* if the title is too long, this breaks a bit
//      * when google changes the layout of their video-page, this might break a bit more
//      * if google decides to implement x-frame-options=sameorigin, this will break completely

var imgBaseUrl="http://futtta.be/newTube/";

var pl;
var ytId;
var linkTXT;

window.onload=initNewTube;

function qs_extract(yturl) {
    var queryString = new Array();
    var qM=yturl.indexOf('?');
    search = yturl.substring(qM);
    var parameters=search.substring(1).split('&');
    for (var i=0; i<parameters.length; i++) {
        var pos = parameters[i].indexOf('=');
        if (pos > 0) {
            var paramname = parameters[i].substring(0,pos);
            var paramval = parameters[i].substring(pos+1);
            queryString[paramname] = unescape(paramval.replace(/\+/g,' '));
        } else {
            queryString[parameters[i]]="" 
        }
     return queryString;
    }
} 

function initNewTube() {
    p=document.getElementById('newTube');
    p.style.width="650px";
    p.style.margin="20px";

    linkTXT=p.innerHTML;
    yturl=p.getElementsByTagName('a')[0].href;
    qs=qs_extract(yturl);
    ytId=qs["v"];
    p.innerHTML="";
    
    pl=document.createElement('div');
    p.appendChild(pl);
    pl.style.textAlign="center";
    pl.style.overflow="hidden";
    pl.style.height="390px";
    pl.style.width="650px";
    pl.style.position="relative";
    pl.style.margin="0 auto";
    pl.style.border="0px solid #F00";
    pl.innerHTML="<img src=\""+imgBaseUrl+"yt_play_btn.png\" style=\"margin-top: 165px; \" /><img src=\""+imgBaseUrl+"yt_controls.png\" width=\"100%\" style=\"position:absolute; left:0px; bottom:0px;\"/>";
    pl.style.background="#000 url(http://img.youtube.com/vi/"+ytId+"/0.jpg) no-repeat top center";
     
    linkDiv=document.createElement('div');
    p.appendChild(linkDiv);
    linkDiv.style.position="relative";
    linkDiv.style.width="650px";
    linkDiv.style.textAlign="center";
    linkDiv.innerHTML=linkTXT;
    
    if (pl.addEventListener) pl.addEventListener('click', showNewTube, false); 
    else if (pl.attachEvent) pl.attachEvent('onclick', showNewTube);
}

function showNewTube() {
    if (pl.removeEventListener) pl.removeEventListener('click', showNewTube, false);
    else if (pl.detachEvent) pl.detachEvent('onclick', showNewTube);

    if ( navigator.userAgent.indexOf('MSIE 6') != -1 ) { topV = "-172px"; } 
    else { topV = "-112px"; }
    
    vid_pl="<iframe style=\"overflow: hidden; height: 1600px; width: 1024px; position: absolute; top:"+topV+"; left: -25px;\"   src=\"http://www.youtube.com/watch?v="+ytId+"\"></iframe><br/>";
    pl.innerHTML=vid_pl;
    }