$( document ).ready( function()
{
	Modals.Initialize();

	if( $( "#did-it" ).length > 0 )
	{
		Panels.Initialize();
	}
	
	if( $( "form" ).length > 0 )
	{
		Tooltip.Initialize();
	}

	if( $( "a#twitter" ).length > 0 )
	{
		var videoID = window.location.search.split( "id=" )[ 1 ];
		$( "a#twitter" ).attr( "href", $( "a#twitter" ).attr( "href" ) + videoID );
		$( "a#facebook" ).attr( "href", $( "a#facebook" ).attr( "href" ) + videoID );
	}
});

var Modals = new function()
{
	this.uploadURL = null;

	this.Initialize = function()
	{
		this.BindGenericOverlay();
	};

	this.BindGenericOverlay = function()
	{
		$( "body" ).append( "<div id='modal-generic-box' class='modal-box'><iframe frameborder='0' /></div>" );

		$( ".modal-generic" ).overlay(
		{
			target: "#modal-generic-box",
			api: true,
			onBeforeLoad: function( e )
			{
				e.stopPropagation();
				document.modalAPI = this;
				var wrap = this.getContent().find( "iframe" );
				wrap.attr( "src", this.getTrigger().attr( "href" ) );
			}
		});
	};

	this.BindSubmitToUploadWindow = function( uploadURL )
	{
		this.uploadURL = uploadURL;

		$( "body" ).append( "<div id='modal-upload-box' class='modal-box'><iframe frameborder='0' /></div>" );
		$( "body" ).append( "<input type='hidden' id='upload-success' value='0' />" );

		$( "#submit-entry" ).click( function()
		{
			Constraints.AskServer( $( "form" ), Modals.OnSubmitClicked );
		});
	};

	this.OnSubmitClicked = function( success )
	{
		if( success )
		{
			$( "#modal-upload-box" ).overlay(
			{
				api: true,
				closeOnClick: false,
				onBeforeLoad: function()
				{
					document.modalAPI = this;
					var wrap = this.getContent().find( "iframe" );
					wrap.attr( "src", Modals.uploadURL );
				},
				onBeforeClose: function()
				{
					if( $( "#upload-success" ).val() == "1" )
					{
						document.location = $( "form" ).attr( "action" );
						return( false );
					}
					
					return( true );
				}
			}).load();
		}
	};
}

var Panels = new function()
{
	this.speed = 350;
	
	this.Initialize = function()
	{
		this.BindEvents();
	};

	this.BindEvents = function()
	{
		$( "#did-it" ).click( function()
		{
			$( "li:animated" ).stop();
			
			if( $( this ).hasClass( "idle" ) || $( this ).hasClass( "closed" ) )
			{
				Panels.OpenPanel( $( this ) );
				
				$( "#doc-it" ).animate({ left: 820 }, Panels.speed, function() { Panels.ClosePanel( $( "#doc-it" ) ) } );
				$( "#win-it" ).animate({ left: 845 }, Panels.speed, function() { Panels.ClosePanel( $( "#win-it" ) ) } );
				
				$( "a.more" ).hide();
			}
			else
			{
				Panels.IdlePanel( $( "#doc-it" ) );
				Panels.IdlePanel( $( "#win-it" ) );
				
				$( "#did-it" ).animate({ left: 0 }, Panels.speed );
				$( "#doc-it" ).animate({ left: 290 }, Panels.speed, function() { Panels.IdlePanel( $( "#did-it" ) ) } );
				$( "#win-it" ).animate({ left: 580 }, Panels.speed );	
				
				$( "a.more" ).show();
			}
		});
		
		$( "#doc-it" ).click( function()
		{
			$( "li:animated" ).stop();
			
			if( $( this ).hasClass( "idle" ) || $( this ).hasClass( "closed" ) )
			{
				Panels.OpenPanel( $( this ) );
				
				$( "#did-it" ).animate({ left: 0 }, Panels.speed, function() { Panels.ClosePanel( $( "#did-it" ) ) } );
				$( this ).animate({ left: 25 }, Panels.speed );
				$( "#win-it" ).animate({ left: 845 }, Panels.speed, function() { Panels.ClosePanel( $( "#win-it" ) ) } );
				
				$( "a.more" ).hide();
			}
			else
			{
				Panels.IdlePanel( $( "#did-it" ) );
				Panels.IdlePanel( $( "#win-it" ) );
				
				$( "#did-it" ).animate({ left: 0 }, Panels.speed );
				$( "#doc-it" ).animate({ left: 290 }, Panels.speed, function() { Panels.IdlePanel( $( "#doc-it" ) ) } );
				$( "#win-it" ).animate({ left: 580 }, Panels.speed );
				
				$( "a.more" ).show();
			}
		});
		
		$( "#win-it" ).click( function()
		{
			$( "li:animated" ).stop();
			
			if( $( this ).hasClass( "idle" ) || $( this ).hasClass( "closed" ) )
			{
				Panels.OpenPanel( $( this ) );
				
				$( "#did-it" ).animate({ left: 0 }, Panels.speed, function() { Panels.ClosePanel( $( "#did-it" ) ) } );
				$( "#doc-it" ).animate({ left: 25 }, Panels.speed, function() { Panels.ClosePanel( $( "#doc-it" ) ) } );
				$( this ).animate({ left: 50 }, Panels.speed );
				
				$( "a.more" ).hide();
			}
			else
			{
				Panels.IdlePanel( $( "#did-it" ) );
				Panels.IdlePanel( $( "#doc-it" ) );
				
				$( "#did-it" ).animate({ left: 0 }, Panels.speed );
				$( "#doc-it" ).animate({ left: 290 }, Panels.speed );
				$( "#win-it" ).animate({ left: 580 }, Panels.speed, function() { Panels.IdlePanel( $( "#win-it" ) ) } );	
				
				$( "a.more" ).show();
			}
		});
	};

	this.OpenPanel = function( panel )
	{
		panel.removeClass( "idle closed" ).addClass( "open" );
	};

	this.ClosePanel = function( panel )
	{
		panel.removeClass( "idle open" ).addClass( "closed" );
	};

	this.IdlePanel = function( panel )
	{
		panel.removeClass( "closed open" ).addClass( "idle" );
	};
}

var Tooltip = new function()
{
	this.input = null;

	this.Initialize = function()
	{
		$( "body" ).append( "<div id='tooltip'><div class='tooltip' /></div>" );

		this.BindInputEvents();
		this.BindConstraintEvents();
	};

	this.BindInputEvents = function()
	{
		$( "form :input" ).focus( function() { Tooltip.OnFormInputFocus( this ) } );
		$( "form :input" ).blur( function() { Tooltip.OnFormInputBlur( this ) } );
	};

	this.BindConstraintEvents = function()
	{
		$( "form :input" ).each( function()
		{
			$( this ).bind( "loadstart.constraints", Tooltip.OnConstraintLoadStart );
			$( this ).bind( "loadcomplete.constraints", Tooltip.OnConstraintLoadComplete );
			$( this ).bind( "pass.constraints", Tooltip.OnConstraintPass );
			$( this ).bind( "fail.constraints", Tooltip.OnConstraintFail );
			$( this ).bind( "reset.constraints", Tooltip.OnConstraintReset );
		});
	};

	this.OnFormInputFocus = function( input )
	{
		this.input = input;
		this.ShowTooltip();
	};

	this.OnFormInputBlur = function( input )
	{
		if( $( "#tooltip:animated" ).length == 0 )
		{
			this.input = input;
			this.HideTooltip();
		}
	};

	this.ShowTooltip = function()
	{
		var infoMessages = $( this.input ).closest( "label" ).find( "input[ class='info' ]" ).map( function() { return( $( this ).val() ); } ).get();
		var failMessages = $( this.input ).closest( "label" ).find( "input[ class='fail' ]" ).map( function() { return( $( this ).val() ); } ).get();
		var passMessages = $( this.input ).closest( "label" ).find( "input[ class='pass' ]" ).map( function() { return( $( this ).val() ); } ).get();
		
		if( passMessages.length > 0 && failMessages.length == 0 )
		{
			// Pass on all constraints, no reaction
			var messages = [];
			$( "#tooltip" ).removeClass( "angry" );
		}
		else if( failMessages.length > 0 )
		{
			// One or more failed constraints, get angry
			var messages = failMessages;
			$( "#tooltip" ).addClass( "angry" );
		}
		else if( infoMessages.length > 0 )
		{
			// Haven't communicated with server for messages or we've been reset, show info
			var messages = infoMessages;
			$( "#tooltip" ).removeClass( "angry" );
		}
		else
		{
			// Same as above, except there was no info available, so hide tooltip
			var messages = [];
			this.HideTooltip();
		}
			
		if( messages.length > 0 )
		{
			$( "#tooltip .tooltip" ).html( this.GetHTMLMessage( messages ) );
			$( "#tooltip" ).stop();
			$( "#tooltip" ).show();
			$( "#tooltip" ).fadeTo( "fast", 1.0 );
			$( "#tooltip" ).offset( this.DetermineTooltipPosition() );
		}
	};

	this.GetHTMLMessage = function( messages )
	{
		if( messages.length == 1 )
		{
			var htmlMessage = $( "<p />" ).html( messages[ 0 ] );
		}
		else if( messages.length > 1 )
		{
			var htmlMessage = $( "<ul />" );

			for( var key in messages )
			{
				htmlMessage.append( $( "<li />" ).html( messages[ key ] ) );
			}
		}

		return( htmlMessage );
	};

	this.DetermineTooltipPosition = function()
	{
		var inputPos = $( this.input ).offset();
		inputPos.left += ( $( this.input ).width() - $( "#tooltip" ).width() + 55 );
		inputPos.top -= ( $( "#tooltip" ).height() );

		return( inputPos );
	};

	this.HideTooltip = function()
	{
		$( "#tooltip" ).fadeOut();
	};

	this.OnConstraintLoadStart = function( data )
	{
	};

	this.OnConstraintLoadComplete = function( data )
	{
	};

	this.OnConstraintPass = function( data )
	{
		if( $( Tooltip.input )[ 0 ] == $( data.target )[ 0 ] )
		{
			Tooltip.HideTooltip();
		}
	};

	this.OnConstraintFail = function( data )
	{
		if( $( Tooltip.input )[ 0 ] == $( data.target )[ 0 ] )
		{
			Tooltip.ShowTooltip();
		}
	};

	this.OnConstraintReset = function( data )
	{
		Tooltip.ShowTooltip();
	};
}

var YouTubeUpload = new function()
{
	this.youTubeAccount = null;
	this.youTubePassword = null;
	this.videoTitle = null;
	this.videoDescription = null;
	this.videoID = null;
	this.ajaxTokenURL = null;
	this.ajaxFormURL = null;

	this.Initialize = function( ajaxTokenURL, ajaxFormURL )
	{
		this.ajaxTokenURL = ajaxTokenURL;
		this.ajaxFormURL = ajaxFormURL;
		
		this.FetchYouTubeInputs();
		this.BindFormEvents();

		$( "form" ).append( $( "<input type='hidden' name='token' />" ) );

		var uploadComplete = window.location.search.indexOf( "status=200" ) > 0;
		var uploadError = window.location.search.indexOf( "status=4" ) > 0 || window.location.search.indexOf( "status=5" ) > 0;

		if( uploadError )
		{
			this.UploadError();
		}
		else if( uploadComplete )
		{
			this.UploadSuccess();
		}
		else
		{
			this.StartFromScratch();
		}
	};

	this.BindFormEvents = function()
	{
		$( "form" ).submit( function()
		{
			$( "#upload-button" ).attr( "disabled", "true" );	//#file
			$( "#upload-text" ).addClass( "loading" );

			return( true );
		});
	
		$( "#try-button" ).click( function()
		{
			YouTubeUpload.StartFromScratch();
		});
	};

	this.FetchYouTubeInputs = function()
	{
		this.youTubeAccount = $( "#account", window.parent.document ).val();
		this.youTubePassword = $( "#password", window.parent.document ).val();
		this.videoTitle = $( "#title", window.parent.document ).val();
		this.videoDescription = $( "#description", window.parent.document ).val();
	};

	this.UploadError = function()
	{
		$( "#authenticating-text" ).addClass( "pass" );
		$( "#upload-text" ).addClass( "fail" );
		$( "#upload-error, #try-button" ).show();
		$( "#transfer-complete, #video-upload-success, #authenticating-error, #file, #upload-button, #close-area" ).hide();
	};

	this.UploadSuccess = function()
	{
		this.videoID = window.location.search.split( "id=" )[ 1 ];

		$( "#transfer-complete, #video-upload-success, #close-area" ).show();
		$( "#video-transferring, #video-uploading, #authenticating-text, #authenticating-error, #upload-text, #upload-error, #file, #upload-button, #try-button" ).hide();
		$( "#upload-success", window.parent.document ).val( "1" );
		$( "form", window.parent.document ).attr( "action", $( "form", window.parent.document ).attr( "action" ) + "?id=" + this.videoID );

		this.SubmitFormBehindUs();
	};

	this.StartFromScratch = function()
	{
		$( "#transfer-complete, #video-upload-success, #authenticating-error, #upload-error, #try-button, #close-area" ).hide();
		$( "#video-transferring, #video-uploading, #authenticating-text, #upload-text, #file, #upload-button" ).show();
		$( "#upload-button" ).attr( "disabled", "true" );	//#file
		$( "#authenticating-text" ).removeClass( "fail pass loading" );
		$( "#upload-text" ).removeClass( "fail pass loading" );

		this.ObtainToken();
	};

	this.ObtainToken = function()
	{
		$( "#authenticating-text" ).addClass( "loading" );

		$.ajax( {
			url: this.ajaxTokenURL,
			type: "POST",
			async: true,
			data: { username: this.youTubeAccount, password: this.youTubePassword, title: this.videoTitle, description: this.videoDescription },
			dataType: "json",
			success: function( data, textStatus ) { YouTubeUpload.OnTokenResponse( data, textStatus ) }
		});
	};

	this.OnTokenResponse = function( data, textStatus )
	{
		$( "#authenticating-text" ).removeClass( "loading" );

		if( data.success )
		{
			$( "#authenticating-text" ).addClass( "pass" );
			$( "#upload-button" ).removeAttr( "disabled" );	//#file

			var nextURL = encodeURIComponent( window.location.protocol + "//" + window.location.hostname + window.location.pathname );

			$( "form" ).attr( "action", data.postURL + "?nexturl=" + nextURL );
			$( "form input[ name='token' ]" ).val( data.token );
		}
		else
		{
			$( "#authenticating-text" ).addClass( "fail" );
			$( "#upload-text, #file, #upload-button" ).hide();
			$( "#authenticating-error, #close-area" ).show();
		}
	};

	this.SubmitFormBehindUs = function()
	{
		var firstName = $( "#first-name", window.parent.document ).val();
		var lastName = $( "#last-name", window.parent.document ).val();
		var email = $( "#email", window.parent.document ).val();
		var address = $( "#address", window.parent.document ).val();
		var city = $( "#city", window.parent.document ).val();
		var province = $( "#province", window.parent.document ).val();
		var postal = $( "#postal", window.parent.document ).val();
		var phone = $( "#phone", window.parent.document ).val();

		$.ajax( {
			url: this.ajaxFormURL,
			type: "POST",
			async: true,
			data: { firstname: firstName, lastname: lastName, email: email, address: address, city: city, province: province, postal: postal, phone: phone, title: this.videoTitle, description: this.videoDescription, videoid: this.videoID },
			dataType: "json",
			success: function( data, textStatus ) { YouTubeUpload.OnSubmitFormResponse( data, textStatus ) }
		});
	};

	this.OnSubmitFormResponse = function( data, textStatus )
	{
		// Doesn't matter what happens, we tried, move on
	};
}