// 	=====================================================
// 	use a closure to protect your namespace and your `$`
// 	=====================================================
(function($){

	// 	=====================================================
	// 	FIRE IT UP
	// 	=====================================================
		$(function() {
	
			// 	=====================================================
			// 	oembed
			// 	=====================================================
/*
				$("#offscreen_films a.oembed").oembed(
					null,
					{
						maxWidth: 354
					}
				);
*/


			// 	=====================================================
			// 	Twitter
			// 	=====================================================
				$("#twitter").getTwitter({
					userName: "offscreened",
					numTweets: 3,
					loaderText: "Loading tweets...",
					slideIn: true,
					slideDuration: 750,
					showHeading: false,
					showProfileLink: false,
					showTimestamp: true
				});
	
	
	
			// 	=====================================================
			// 	Validate & submit newsletter subscription form via ajax
			// 	=====================================================
	
				// grab form object
				$my.cmForm = $('#cm');
				
				// prevent submitting multiple times				
				$my.cmSubmitted = false;
	
				// submitHandler form
				$my.cmFormSubmitHandler = function(form) {
					if($my.cmSubmitted == false) {
						$(form).ajaxSubmit({
							success: function(responseText) {
							
								if($(responseText).find("Code").text()) {
									$my.cmForm.html('<p><strong>Thank you for subscribing!</strong></p>');
								} else {
									$my.cmForm.html($(responseText).find("Message").text());
								}
							
								return false;
							},
							type: 'post'
						});
					}
					$my.cmSubmitted = true;
				}
				
				$my.cmForm.validate({ submitHandler: $my.cmFormSubmitHandler });
	
	
	
			// 	=====================================================
			// 	Let's gather up some objects to minipulate
			// 	=====================================================
				$my.slideshow = $("#latest_projects.slideshow .slides");
		
	
	
			// 	=====================================================
			// 	Restores control positioning
			// 	=====================================================
				$my.resetControls = function(theplayer) {
					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.homeFlowplayerParams = {
					clip: {
						autoPlay: false,
						autoBuffering: true
					},
					canvas: { 
						// customize player background, i.e. the canvas 
					    backgroundGradient: 'none'
					},
					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).flowplayer($my.flowplayerConfiguration, $my.homeFlowplayerParams);
				
				$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.customSlide = function(i, done) {
	
					var $direction = (this.getIndex() > i) ? 'ltr' : 'rtl';
					var $animationSpeed = 1200;
					var $animationEffect = 'easeInOutExpo';
				
					// on first run, getIndex() returns undefined, so place all panes off stage
					if( this.getIndex() == undefined ) {
						this.getPanes().css({
							'top' : '0px',
							'left' : '900px',
							'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();
							}
						}
	
						// get rid of current pane
						switch($direction) {
							case 'ltr' :
								this.getCurrentPane()
									.stop()
									.animate({'left' : '900px'}, $animationSpeed, $animationEffect, function() {
										$(this).css({'left' : '900px', 'display' : 'none'});
									});
								break;
	
							default:
								this.getCurrentPane()
									.stop()
									.animate({'left' : '-900px'}, $animationSpeed, $animationEffect, function() {
										$(this).css({'left' : '900px', 'display' : 'none'});
									});
								break;
						}
					}
					
					// bring in new pane
					var $paneHeight = this.getPanes().eq(i).height();
					switch($direction) {
						case 'ltr' :
							$my.slideshow
								.stop()
								.animate({'height' : $paneHeight}, $animationSpeed, $animationEffect);
							this.getPanes().eq(i)
								.stop()
								.css({'display' : 'block', 'left' : '-900px'})
								.animate({'left' : '0px'}, $animationSpeed, $animationEffect);
							break;
						default :
							$my.slideshow
								.stop()
								.animate({'height' : $paneHeight}, $animationSpeed, $animationEffect);
							this.getPanes().eq(i)
								.stop()
								.css('display', 'block')
								.animate({'left' : '0px'}, $animationSpeed, $animationEffect);
							break;
					}
	
					// required by flowplayer to be called once finished
					done.call();
				}
				
				$.tools.tabs.addEffect('customSlide',$my.customSlide);
	
	
	
			// 	=====================================================
			// 	Tabbing slideshow
			// 	=====================================================
				$(".tabs").tabs("#latest_projects.slideshow .slide", { 
					effect: 'customSlide', 
					rotate: true
				// use the slideshow plugin. It accepts its own configuration 
				}).slideshow({
					clickable: false
				});


			
		});
})(jQuery);