/**
 * Overlays a video on top of another video.
 * 
 * @author Joey Line <joey.line@skiclubz.com>
 */
(function($) {
	// these are kind of like static variables, in that they will be available to all instances of 
	// zPlayer/zPlayer.overlay.
	var players = [],
		controlCreated = false,
		enabled = false;
	
	var clickHandler = function(e) {
		var i, player,
			length = players.length;
		
		if(!enabled) {
			var height = getHeight(players[0]);
			for(i = 0; i<length; i++) {
				player = players[i];
				
				// save the css properties we're about to overwrite
				player.plugins.overlay.savedCss = {
					position: player.container.css('position'),
					left: player.container.css('left'),
					top: player.container.css('top'),
					opacity: player.container.css('opacity'),
					width: player.config.width,
					height: player.config.height
				};
				
				// hide controlbars
				player.display.controlbar.element.css('display', 'none');

				$(player.domelement).css({
					height: '100%',
					width: '100%'
				});
				
				var newCss = {
					position: 'relative',
					left: 0,
					top: 0,
					right: 0,
					bottom: 0,
					width: '100%',
					height: height,
					zIndex: i
				};
				
				if(i!==0) {
					newCss.opacity = 0.5;
					newCss.position = 'absolute';
				}

				// position players over each other
				player.container.css(newCss);
				
				// NOTE: .animate cannot animate position.
				// player.container.animate(newCss);
			}
			
			enabled = true;
		} else {
			for(i = 0; i<length; i++) {
				player = players[i];
				
				$(player.domelement).css({
					height: 'auto',
					width: '100%'
				});
				
				// set css properties back to the saved values
				player.container.css(player.plugins.overlay.savedCss);
				
				// show controlbars and update the timeslider
				player.display.controlbar.element.css('display', 'block');
				(player.controlbar.bufferHandler(player))({});
				(player.controlbar.timeHandler(player))({});
			}
			
			enabled = false;
		}
		
		if(e.target.checked != enabled)
			e.target.checked = enabled;
	};
	
	var resizeHandler = function() {
		if(enabled) {
			var i = 0,
				length = players.length,
				height = getHeight(players[0]);
			for(; i<length; i++) {
				players[i].container.height(height);
			}
		}
	};
	
	// this is done here and not just in resizeHandler so we can use it in an animation if desired
	var getHeight = function(player) {
		return $(window).height()
			- player.container.offset().top
			- $(player.config.overlay.container).outerHeight(true)
			- (player.container.outerHeight(true) - player.container.height())
			- 20; // FIXME: Figure this out automatically. This represents the bottom margin/padding
	};
	
	// constructor
	zPlayer.prototype.overlay = function() {
		// save the current player instance
		players[players.length] = this;
		
		// when overlay is enabled and one video is clicked on, make sure they play/pause together.
		$(this.domelement).click(function(e) {
			if(enabled) {
				var i = 0,
					length = players.length,
					method = 'play';
				if(this.paused) {
					// this may seem backwards, but the normal display click replacement gets
					// called first.
					method = 'pause';
				}
				
				for(; i<length; i++) {
					if(players[i].domelement != this) {
						players[i].domelement[method]();
					}
				}
			}
		});
		
		if(!controlCreated) {
			controlCreated = true;
			
			// <div id="overlayControl">
				// <input type="checkbox" value="1" id="1" name="1" autocomplete="off" />
				// <label class="check" for="1"></label>
				
				// <label class="info" for="1">Overlay</label>
			// </div>
			
			var container = $('<div id="overlayControl"><label class="check" for="overlayCheck"></label><label class="info" for="overlayCheck">Overlay</label></div>')
				.appendTo(this.config.overlay.container);
			
			this.plugins.overlay.control = $('<input type="checkbox" id="overlayCheck" name="overlayCheck" class="tracked" />')
				.change(clickHandler)
				.prependTo(container);
			
			if($.browser.msie) {
				container.css('background', 'url(' + $.skiclubz.baseUrl + '/images/splitscreen/overlay.png)');
			}
			
			// this should work, but the clickHandler gets called twice every time in IE9
			// if($.browser.msie) {
				// container.click(clickHandler);
			// }
			
			$(window).resize(resizeHandler);
		}
	};
	
	zPlayer.overlay = {
		isEnabled: function() {
			return enabled;
		}
	};
})(jQuery);