$(document).ready(function() {

    // Start slideshow
	//$('.slideshow').slideshow();
	setTimeout(buildSpinner({ x : 50, y : 50, size : 20, degrees : 30 }),2000);
		
    function buildSpinner(options) {
        var width = 32, height = 32, lineOuterWidth = 8, lineInnerWidth = 4;
        var canvas = document.createElement('canvas')
        $(canvas).css({'position': 'relative', 'top':'25px', 'left':'25px', 'opacity': '.75'});
        canvas.height = height;
        canvas.width = width;
        $('.slideshow').append(canvas);
        var ctx = canvas.getContext("2d")
        var degrees = 0;
        var lastDegrees = 0;
        var animationTime = 2000;
        var startTime, currentTime, elapsedTime;
        
       
        
        setInterval(draw, 1000/30);
        
        function draw() {
            currentTime = new Date().getTime();
            if (startTime == null) {
                startTime = currentTime;
            }

            elapsedTime = currentTime - startTime;

            var percentage = elapsedTime / animationTime

            // incriment degrees
            lastDegrees = degrees;
            degrees = parseInt(360 * percentage);
            
            
            
            // We have made it all the way around
            if (elapsedTime >= animationTime) {
                startTime = currentTime
            }
            
            ctx.clearRect(0,0,width,height); // clear canvas
            drawBackground();
            drawPercentage();
            
            function drawPercentage () {
                ctx.beginPath();
                ctx.strokeStyle = 'rgb(255,255,255)';
                ctx.lineWidth = parseInt(lineInnerWidth);
                ctx.beginPath();
                var s = (Math.PI/180)*(0);
                var e = (Math.PI/180)*(degrees);
                ctx.arc(width/2, height/2, (width/2)-(lineOuterWidth/2)-1, s, e, false);
                ctx.stroke();
            }
            
            function drawBackground() {
                ctx.beginPath();
                ctx.strokeStyle = 'rgb(0,0,0)';
                ctx.lineWidth = lineOuterWidth;
                ctx.beginPath();
                var s = (Math.PI/180)*(0);
                var e = (Math.PI/180)*(360);
                ctx.arc(width/2, height/2, (width/2)-(lineOuterWidth/2)-1, s, e, false);
                ctx.stroke();
            }
        }
    }

});