// 	=====================================================
// 	FIRE IT UP
// 	=====================================================
jQuery(function($){

		// 	=====================================================
		// 	Let's gather up some objects to minipulate
		// 	=====================================================
			$my.slideshow_simple = $("#slideshow_simple .slides");
	

		// 	=====================================================
		// 	Restores control positioning
		// 	=====================================================
			$my.resetControls = function(theplayer) {
				$(theplayer.getParent()).parent('.video').find('.caption').fadeIn(400);
				var $videoId = $(theplayer.getParent()).parent('.video').attr('rel');
				$('#projector_controls_bg_' + $videoId).stop().animate({'opacity' : 1.0}, 400);
				$('#projector_controls_' + $videoId)
					.stop()
					.animate({'opacity' : 1.0}, 400)
					.find('.pause')
						.addClass('play')
						.toggleClass('pause')
					.end()
					.find('.playhead')
						.css('left', '-4px')
					.end()
					.find('.progress')
						.css('width', '0px');
			}


		// 	=====================================================
		// 	setup the flowplayer instances
		// 	=====================================================
			$my.simpleFlowplayerParams = {
				clip: {
					autoPlay: false,
					autoBuffering: true
				},
				canvas: { 
					// customize player background, i.e. the canvas 
				    backgroundGradient: 'none'
				},
				onLoad: function() {
					$(this.getParent()).parent('.video').find('.caption').fadeOut(400);
				},
				onUnload: function() {
					$my.resetControls(this);
				},
				onFinish: function() {
					$my.resetControls(this);
				},
				// disable play button
				play: null,
				// disable default controls
				plugins: {controls: null}
			};

			// create all flowplayer instances
			$('a.video', $my.slideshow_simple).flowplayer($my.flowplayerConfiguration, $my.simpleFlowplayerParams);
			
			$f('*').each(function() {
				var $videoPlayer = this;
				var $videoId = $(this.getParent()).parent('.video').attr('rel');
				var $videoController = $('#projector_controls_' + $videoId);
				var $videoControllerBg = $('#projector_controls_bg_' + $videoId);
				this.controls('projector_controls_' + $videoId);
				
				$($videoPlayer.getParent()).parent('.video').hover(
					function(e) {
						if($videoPlayer.getState() > -1) {
							$videoController.stop().animate({'opacity' : 1.0 }, 400);
							$videoControllerBg.stop().animate({'opacity' : 1.0 }, 400);
						}
					},
					function(e) {
						// only hide it if the player is playing
						if($videoPlayer.getState() == 0 || $videoPlayer.getState() == 2 || $videoPlayer.getState() == 3) {
							$videoController.stop().animate({'opacity' : 0.0}, 400);
							$videoControllerBg.stop().animate({'opacity' : 0.0 }, 400);
						}
					}
				);
			});


		// 	=====================================================
		// 	Custom tabbing effect "customSlide"
		// 	=====================================================
			$my.customFade = function(i, done) {

				var $animationSpeed = 600;
			
				// on first run, getIndex() returns undefined, so just hide all slides
				if( this.getIndex() == undefined ) {
					this.getPanes().css({
						'display' : 'none'
					});
				} else {
					// if we're playing a video, unload it
					var $playing = this.getCurrentPane().find('a.video').flowplayer(0);
					if($playing != undefined) {
						if($playing.getState() > -1) {
							$playing.stop().unload();
						}
					}

					// fade out current one
					this.getCurrentPane().fadeOut($animationSpeed);
				}

				// fade in new one					
				this.getPanes().eq(i).fadeIn($animationSpeed)

				// required by flowplayer to be called once finished
				done.call();
			}
			
			$.tools.tabs.addEffect('customFade',$my.customFade);


		// 	=====================================================
		// 	Tabbing slideshow
		// 	=====================================================
			$(".tabs").tabs("#slideshow_simple .slide", { 
				rotate: true,
				effect: 'customFade'
			// use the slideshow plugin. It accepts its own configuration 
			}).slideshow({
				clickable: false
			});

});