/*
 *
 * ZEN - HTML5-CSS3 Audio Player
 * by @simurai (simurai.com)
 *
 * Most of this code by: @maboa (happyworm.com)
 * and: @quinnirill (niiden.com/jussi/)
 *
 */


	// init
	
	//var player = $(".zen .player");
	/*
	player.jPlayer({
			ready: function () {
      		$(this).jPlayer("setMedia", {
    			m4a: "audio/song.m4a",
				mp3: "audio/song.mp3",
        		oga: "audio/song.ogg"
      		});
    	},
    	swfPath: "",
		supplied: "m4a, mp3, oga"         
  	});  
*/

var dragging = false;

function onClick(player) {
        var status = player.parent().hasClass('play');

        if(!status) {
            status = "play";
            player.parent().addClass( "play" );
            player.jPlayer("play");
        } else {
            player.parent().find('.circle').removeClass( "rotate" );
            player.parent().removeClass( "play" );
            status = "pause";
            player.jPlayer("pause");
        }
    }

function jpl(player, path)
{
    $(player).jPlayer({
        ready:function () {
            $(this).jPlayer("setMedia", {
                mp3:path
            });
        },
        play: function() { // To avoid both jPlayers playing together.
        			$(this).jPlayer("pauseOthers");
        },
        pause: function() {
            player.parent().find('.circle').removeClass( "rotate" );
            player.parent().removeClass( "play" );
            status = "pause";
        },
        swfPath:"/js",
        supplied:"mp3",
        wmode:"window"
    });

    player.jPlayer({
            ready: function () {
            $(this).jPlayer("setMedia", {
                mp3: path
            });
        },
        swfPath: "Jplayer.swf",
        supplied: "mp3"
    });

    // preload, update, end

    player.bind($.jPlayer.event.progress, function(event) {
        var audio = player.parent().find('audio').get(0);
        var pc = 0;

        if ((audio.buffered != undefined) && (audio.buffered.length != 0)) {
            pc = parseInt(((audio.buffered.end(0) / audio.duration) * 100), 10);
            displayBuffered(pc);
            if(pc >= 100) {
                console.log("loaded");
                player.parent().find('.buffer').addClass("loaded");
            }
        }
    });

    player.bind($.jPlayer.event.timeupdate, function(event) {
        var pc = event.jPlayer.status.currentPercentAbsolute;
        if (!dragging) {
            displayProgress(pc);
        }
    });

    player.bind($.jPlayer.event.ended, function(event) {
        player.parent().find('.circle').removeClass( "rotate" );
        player.removeClass( "play" );
        player.parent().find('.progress').css({rotate: '0deg'});
        status = "stop";
    });

    // play/pause

    player.parent().find(".button").bind('mousedown', function() {
        // not sure if this can be done in a simpler way.
        // when you click on the edge of the play button, but button scales down and doesn't drigger the click,
        // so mouseleave is added to still catch it.

        $(this).bind('mouseleave', function() {
            $(this).unbind('mouseleave');
            onClick(player);
        });
    });

    player.parent().find(".button").bind('mouseup', function() {
        $(this).unbind('mouseleave');
        onClick(player);
    });



    // draggin

    var clickControl = player.parent().find('.drag');

    clickControl.grab({
        onstart: function(){
            dragging = true;
            player.parent().find('.button').css( "pointer-events", "none" );

        }, onmove: function(event){
            var pc = getArcPc(event.position.x, event.position.y);
            player.jPlayer("playHead", pc).jPlayer("play");
            displayProgress(pc);

        }, onfinish: function(event){
            dragging = false;
            var pc = getArcPc(event.position.x, event.position.y);
            player.jPlayer("playHead", pc).jPlayer("play");
            player.parent().find('.button').css( "pointer-events", "auto" );
        }
    });

    function displayProgress(pc) {
    		var degs = pc * 3.6+"deg";
        player.parent().find('.progress').css({rotate: degs});
    }
    function displayBuffered(pc) {
        var degs = pc * 3.6+"deg";
        player.parent().find('.buffer').css({rotate: degs});
    }

    function getArcPc(pageX, pageY) {
        var	self	= clickControl,
            offset	= self.offset(),
            x	= pageX - offset.left - self.width()/2,
            y	= pageY - offset.top - self.height()/2,
            a	= Math.atan2(y,x);

            if (a > -1*Math.PI && a < -0.5*Math.PI) {
           a = 2*Math.PI+a;
        }

        // a is now value between -0.5PI and 1.5PI
        // ready to be normalized and applied
        var pc = (a + Math.PI/2) / 2*Math.PI * 10;

        return pc;
    }
}