/*
protoype dynamic HTML5 video player
author: Joe Maddalone
date: 03/08/2010
NOTES:
1. I decided not to use any other framework (i.e. jQuery, prototype, etc)
   because the overhead is just not needed
   
2. at this time the page actually reloads on video selection,
   however when I get around to it I'll add a clear function 
   <scratch that - I removed the playlist for now>
   
3. there are some really ugle hacks for Firefox/Opera/Safar/Chrome compatibility

4. the video scrubber and volume scrubber are so similar that I
   need to make a universal scrubber function for them both

5. video/volume scrubbers have a global length bug

6. while in fullscreen Esc key will also return to original size

This code is FREE and a bit of a mess.  Do with it whatever you like and if you make it better send it back my way
http://www.twitter.com/joemaddalone

*/


var unscrubbedColor = "#fff";
var scrubbedColor = "#f00";
var scrubberColor = "#000";
var fullscreen = false;

function makePlayer(videoID,src) {
    /*
	this is  the html structure we are rendering below
	
	container
		video
		play/pause button
		scubber canvas
		current time
		duration
		volume canvas
	*/

    var player = document.getElementById(videoID);
	player.innerHTML = '<source src="../video/' + src + '.ogv" type="video/ogg" />';
	player.innerHTML += '<source src="../video/' +  src +  '.mp4" />';
	trace('video element= ' + videoID);
	if (!document.getElementById('container')){
	var container = document.createElement('div');
    container.id = "container";
    container.style.position = 'relative'
	player.parentNode.insertBefore(container, player);
    player.parentNode.removeChild(player);
    container.appendChild(player);
	}

	trace('video is now inside container');

    var controller = document.createElement('div');
    controller.id = "controls";
    player.parentNode.appendChild(controller);
	trace('controller created');

    var playpause = document.createElement('span');
    playpause.id = "playpause";
    controller.appendChild(playpause);
    playpause.innerHTML = '<button class="play"></button>'
	trace('play/pause created');

    var scrubber = document.createElement('canvas');
    scrubber.id = "scrubber";
    controller.appendChild(scrubber);
	trace('scrubber canvas created');

    var display = document.createElement('span');
    display.id = "display";
    controller.appendChild(display);
    display.innerHTML = '0:00:00&nbsp;/&nbsp;'

    var duration = document.createElement('span');
    duration.id = "duration";
    controller.appendChild(duration);
    duration.innerHTML = '--:--:--'
	trace('timers created');
	
    var vol = document.createElement('canvas');
    vol.id = "volume";
    controller.appendChild(vol);
	trace('volume canvas created');
    
    
    var fscr = document.createElement('span');
    fscr.id = "fscr";
    controller.appendChild(fscr);
    fscr.innerHTML = '<button class="fs"></button>'
	trace('play/pause created');
    
    
    
    loadvideo();
    }

function loadvideo() {
    console.log("loading video");
    var player = document.getElementById('player');
    var controller = document.getElementById('controls');
    var playbutton = document.getElementById('playpause');
    var container = document.getElementById('container');
    var scrubber = document.getElementById('scrubber');
    var vol = document.getElementById('volume');
    var fscr = document.getElementById('fscr');
    var volVal = 0.5;
    player.volume = volVal;
    

    

    if (!navigator.geolocation) {
        /*Really ugly hack because FF does not like loadedmetadata for some reason*/
        player.addEventListener('loadedmetadata', function() {
		scrubber.width = (player.videoWidth * 0.4) + 8;
		//vol.width = player.videoWidth*0.05;
		scrubber.height = 24;
		vol.width = 50;
		vol.height = 24;
		document.getElementById('controls').style.width = player.videoWidth - 3 + "px";
            document.getElementById('duration').innerHTML = fixtime(player.duration);
            console.log("in loadedmetadata");
        }, true);
    }
	else
	{
	scrubber.width = (player.videoWidth * 0.4) + 8;
	//vol.width = player.videoWidth*0.05;
	scrubber.height = 24;
	vol.width = 50;
	vol.height = 24;
        document.getElementById('controls').style.width = player.videoWidth - 3 + "px";
        document.getElementById('duration').innerHTML = fixtime(player.duration);
        console.log("this is FF");
    }

    player.addEventListener('timeupdate', function(e) {
        document.getElementById('display').innerHTML = fixtime(player.currentTime) + "&nbsp;/&nbsp;";
    }, false);

    /* start */
    player.addEventListener('play', function(e) {
        playbutton.innerHTML = '<button class="pause"></button>';
    }, false);

    /* paused */
    player.addEventListener('pause', function(e) {
        playbutton.innerHTML = '<button class="play"></button>';
    }, false);

    /* end */
    player.addEventListener('ended', function(e) {
        playbutton.innerHTML = '<button class="pause"></button>';
        player.play()
        }, false);

    /* fullscreen clicked */
    fscr.addEventListener('click', function() {
    if(!fullscreen){
    player.width=document.width-10;player.height=document.height-60;fullscreen=true;
    document.getElementById('controls').style.width =player.width + "px";
    alert("not really working yet");
    }
    else
    {
    player.width=player.videoWidth;player.height=player.videoHeight;fullscreen=false;
    document.getElementById('controls').style.width = player.videoWidth - 3 + "px";
    }
    
    }, false);
    
    
	/* playbutton clicked */
    playbutton.addEventListener('click', function() {
        if (player.paused) {
            player.play();
        } else {
            if (player.ended) {
                player.currentTime = 0;
                player.innerHTML = '<div class="pause"></div>';
                player.play();
            } else {
                player.pause();
            }
        }
    }, false);    
    

   
  
    
    
    drawScrubber();
    drawVolScrubber();

    /*Scrubber Stuffs*/

    var stopper = 0;
    function drawScrubber() {

        if (scrubber.getContext) {

            scrubber.addEventListener("mousedown", function(e) {
                //player.pause();
                stopper = 0;
                setScrubber(e);
                scrubber.addEventListener("mousemove", function(e) {
                    setScrubber(e);
                }, false);
            }, false);
            scrubber.addEventListener("mouseup", function(e) {
                stopper = 1;
                //player.play()
                }, false);
            //canvas.addEventListener("mouseout",function(e) {stopper=1;player.play()},false);
            ctx = scrubber.getContext('2d');
            
            
			scrubbedColor= ctx.createLinearGradient(0, 0, 0, 16);
			scrubbedColor.addColorStop(0, '#FF0000');
			scrubbedColor.addColorStop(1, '#660000');
            
			scrubberColor= ctx.createLinearGradient(0, 0, 0, 16);
			scrubberColor.addColorStop(0, '#000000');
			scrubberColor.addColorStop(0.5, '#222222');
			scrubberColor.addColorStop(1, '#444444');
            
            
            
			unscrubbedColor= ctx.createLinearGradient(0, 0, 0, 16);
			unscrubbedColor.addColorStop(0, '#FFFFFF');
			unscrubbedColor.addColorStop(1, '#666666');            
            
            setInterval(makeScrubber, 25);
        }
    }

    function setScrubber(e) {
        if (stopper == 0) {
            var ox = e.pageX;
            //x pos on the page itself
            var barPos = ox - findX(scrubber);
            //x position relative to canvas
            //determine percentage of x across the canvas
            var xPer = (barPos / scrubber.width)
                player.currentTime = player.duration * xPer;
        }
    }

    function makeScrubber() {
        var xpos = scrubber.width * (player.currentTime / player.duration);
        
 
            
        
        
		//trace("xpos = " + xpos);
        //drawing scrubber before current position
        for (i = 0; i <= xpos; i += 8) {
            ctx.fillStyle = scrubbedColor;
            ctx.fillRect(i, 8, 8, 8);
        }
        //current position
        ctx.fillStyle = scrubberColor;
        ctx.fillRect(xpos, 8, 8, 8);

        //after current position
        for (i = xpos + 8; i <= scrubber.width; i += 8) {
            ctx.fillStyle = unscrubbedColor;
            ctx.fillRect(i, 8, 8, 8);
        }

    }

    /* Volume Scrubber */
    var vstopper = 0;
    function drawVolScrubber() {
        volVal = player.volume;

        if (vol.getContext) {

            vol.addEventListener("mousedown", function(e) {
                vstopper = 0;
                //alert(player.volume);
                setVolScrubber(e);
                vol.addEventListener("mousemove", function(e) {
                    setVolScrubber(e);
                }, false);
            }, false);
            vol.addEventListener("mouseup", function(e) {
                vstopper = 1;
            }, false);
            vctx = vol.getContext('2d');
			scrubbedColor= vctx.createLinearGradient(0, 0, 0, 16);
			scrubbedColor.addColorStop(0, '#FF0000');
			scrubbedColor.addColorStop(1, '#660000');

			scrubberColor= vctx.createLinearGradient(0, 0, 0, 16);
			scrubberColor.addColorStop(0, '#000000');
			scrubberColor.addColorStop(0.5, '#222222');
			scrubberColor.addColorStop(1, '#444444');



			unscrubbedColor= vctx.createLinearGradient(0, 0, 0, 16);
			unscrubbedColor.addColorStop(0, '#FFFFFF');
			unscrubbedColor.addColorStop(1, '#666666');   
            setInterval(makeVolScrubber, 25);
        }
    }

    function makeVolScrubber() {
        //var xpos = scrubber.width * (player.currentTime / player.duration);
        vpos = vol.width * volVal;

        //drawing scrubber before current position
        for (i = 0; i <= vpos; i += 8) {
            vctx.fillStyle = scrubbedColor;
            vctx.fillRect(i, 8, 8, 8);
        }
        //current position
        vctx.fillStyle = scrubberColor;
        vctx.fillRect(vpos, 8, 8, 8);

        //after current position
        for (i = vpos + 8; i <= vol.width; i += 8) {
            vctx.fillStyle = unscrubbedColor;
            vctx.fillRect(i, 8, 8, 8);
        }

    }

    function setVolScrubber(e) {
        if (vstopper == 0) {
            var vx = e.pageX;
            //x pos on the page itself
            var vbarPos = vx - findX(vol);
            //x position relative to canvas
            //determine percentage of x across the canvas
            var vxPer = (vbarPos / vol.width)
                player.volume = 1 * vxPer;
            volVal = 1 * vxPer
			trace('volume = ' + player.volume);
        }
    }
}

function findX(el) {
    var left = 0;
    if (el.offsetParent) {
        do {
            left += el.offsetLeft;
        }
        while (el = el.offsetParent);
        return left;
    }
}

function fixtime(t) {
    var s = t
    var h = Math.floor(s / 3600);
    s = s % 3600;
    var m = Math.floor(s / 60);
    s = Math.floor(s % 60);
    if (s.toString().length < 2)
        s = "0" + s;
    if (m.toString().length < 2)
        m = "0" + m;
    return h + ":" + m + ":" + s;
}

function trace(txt){//console.log(txt)
}

 
    
	document.onkeydown = function(event) {
	  var keyCode;
	  if(event == null)
	  {
		keyCode = window.event.keyCode;
	  }
	  else
	  {
		keyCode = event.keyCode;
	  }
	if(fullscreen){if(keyCode==27){
	player.width=player.videoWidth;player.height=player.videoHeight;fullscreen=false;
    document.getElementById('controls').style.width = player.videoWidth - 3 + "px";
	}}

	}