/**
 * Defines a slow motion control for zPlayer.
 * 
 * @author Joey Line <joey.line@skiclubz.com>
 */
(function($) {
	zPlayer.prototype.slowMotion = function() {
		var player = this,
			speeds = [2, 1, 1/2, 1/4],
			font = this.config.fontSize + 'px/' + (this.skin.controlbar.elements.background.height + 1) + 'px Arial,sans-serif';
		
		if(this.domelement.playbackRate) {
			this.plugins.slowMotion.rate = this.domelement.playbackRate;
		} else if (this.domelement.defaultPlaybackRate) {
			this.plugins.slowMotion.rate = this.domelement.defaultPlaybackRate;
		} else {
			return false;
		}

		// the menu of speeds
		var menu = $('<ul></ul>');
		
		// now add the buttons to the controlbar...
		var button = this.controlbar.buildElement(this, 'speedButton', 'right', true);
		button.css('font', font)
			.css('text-align', 'center')
			.css('font-weight', 'bold')
			.css('cursor', 'pointer')
			.css('color', this.skin.settings.frontcolor)
			.click(function() {
				menu.slideToggle('fast');
			})
			.html(this.plugins.slowMotion.rate + 'x speed');
		
		menu.css('list-style', 'none')
			.css('font', font)
			.css('font-weight', 'bold')
			.css('cursor', 'pointer')
			.css('color', this.skin.settings.frontcolor)
			.css('z-index', 100)
			.css('position', 'absolute')
			.css('right', button.css('right'))
			.css('bottom', this.skin.controlbar.elements.background.height + 'px')
			.css('display', 'none')
			.appendTo('#' + this.id + '_controlbar .controls')
			.click(function(e) {
				zPlayer.utils.log('playbackRate changed to', $(e.target).text());
				
				// you would think this should work to make the video ALWAYS play at a given rate,
				// even when the video is paused and then played again. However, it doesn't [at
				// least in Safari], so use the event listener at the bottom of this script instead
				// player.domelement.playbackRate = player.domelement.defaultPlaybackRate = player.plugins.slowMotion.rate = $(e.target).attr('data-speed');
				
				player.domelement.playbackRate = player.plugins.slowMotion.rate = $(e.target).attr('data-speed');
				
				button.html($(e.target).text());
				menu.slideToggle();
			});
		
		// add each speed to the menu
		for(var i=0;i<speeds.length;i++) {
			// if speed is less than 1, turn it into a fraction for display
			// FIXME: We'll want a better solution if we want to use fractions that don't have a 1
			// in the numerator.
			var speed = speeds[i];
			if(speed < 1) {
				speed = '1/' + Math.round(1 / speed);
			}
			
			$('<li></li>')
				.html(speed + 'x speed')
				.attr('data-speed', speeds[i])
				.css('text-align', 'center')
				.css('width', this.skin.controlbar.elements.speedButton.width)
				.css('height', this.skin.controlbar.elements.speedButton.height)
				.css('background', 'url(' + this.skin.controlbar.elements.speedButton.src + ') repeat-x center left')
				.appendTo(menu);
		}
		
		this.domelement.addEventListener('play', function() {
			this.playbackRate = player.plugins.slowMotion.rate;
			zPlayer.utils.log(this.playbackRate, this.defaultPlaybackRate);
		}, false);
	};
})(jQuery);