var App = function(){

		return {
			formId: '',

			showBoxMessage: function ( type, header, message )
			{
				$("#app").html('\
					<div class="app-box hidden">\
							<div class="app-box-'+type+'">\
								<h2>'+header+'</h2>\
								<p>'+message.join('</p><p>')+'</p>\
								<div class="app-box-cmd"><a class="app-box-close">Luk besked</a></div>\
							</div>\
						</div>\
				');
				$(".app-box").stop().fadeIn('fast');
				$(".app-box-close").click( App.hideBoxMessage )
				App.hideOverlay()
				$.scrollTo("#app", {duration: 400, axis:"y"});
			},

			hideBoxMessage: function()
			{
				$(this).closest(".app-box").fadeOut('fast')
			},

			showOverlay: function( html, width, height )
			{
				width = typeof(width) == 'undefined' ? 270 : width;
				height = typeof(height) == 'undefined' ? 270 : height;

				$("#app-overlay-content").hide()
				$("#app-overlay-loader").hide()
				if ( typeof(html) == 'undefined' ) {
					$("#app-overlay-loader").show()
				} else {
					$("#app-overlay-content-html").css('height',height)
					$("#app-overlay-content-html").css('width',width)
					$("#app-overlay-content-html").html(html)
					$("#app-overlay-content").show()
				}
				t	= ($(window).height() - height) / 2;
				if ( t < 0 ) t = 1;
				$("#app-overlay-container").css('top', t ).css('left', ($(window).width() - width) / 2 );
				$("#app-overlay").show()
				$("#app-overlay-background").stop().fadeTo(0,0.6);
			},

			hideOverlay: function( callback )
			{
				$("#app-overlay").fadeOut('fast', function(){ callback });
			},

			post: function( form )
			{
				App.formId = form;
				App.hideBoxMessage()
				App.showOverlay()
				$.ajax({
					type: 'POST',
					url: $(form).attr('action'),
					dataType: 'json',
					data: $(form).serialize(),
					success: App.postSuccess,
					error: App.postFailure
				});
				return false
			},

			request: function( urlWithParams, config )
			{
				if ( typeof(config) == 'undefined' ) {
					config = {success: function(){}, error: function(){} }
				} else {
					if ( typeof(config.success) == 'undefined' ) config.success = function(){}
					if ( typeof(config.error) == 'undefined' ) config.error = function(){}
				}
				App.hideBoxMessage()
				App.showOverlay()
				$.ajax({
					url: urlWithParams,
					dataType: 'json',
					success: config.success,
					error: config.error
				});
				return false
			},

			postSuccess: function (response)
			{
				if ( response.redirect != '' ) {
					location.href = response.redirect
				} else {
					App.showBoxMessageFromAjax(response)
				}
			},

			postFailure: function (response, text)
			{
				App.showBoxCriticalError('Serveren siger: "<i>'+text+'</i>"')
			},

			showBoxCriticalError: function( extra ){
				message = ['Noget gik galt med svaret fra serveren. Dette kan skyldes at du ikke har forbindelse til internettet eller ikke er logget ind på Amio.dk. Prøv venligst igen!']
				if ( extra ) message.push(extra)
				App.showBoxMessage( 'error', 'IT systemfejl', message )
			},

			showBoxMessageFromAjax: function ( response ) {
				if ( typeof(response.responseType) == 'undefined' ) {
					App.showBoxCriticalError()
				} else {
					if ( response.errors ) {
						// Append formerrors to boxmessag
						list = []
						$.each(
							response.errors,
							function( key, val) {
								list.push(val)
							}
						);
						list = '<ul class="bullet"><li>' + list.join('</li><li>') + '</li></ul>'
						response.responseBody.push(list)
					}
					// highlight fields
					if ( response.elements ) {
						App.highligtFormFields(response.elements)
					}
					App.showBoxMessage( response.responseType, response.responseHeader, response.responseBody )
				}
			},

			highligtFormFields: function( elements )
			{
				// Remove previous highlights
				formElements = $(App.formId).find(".app-invalid").removeClass('app-invalid')
				// Add highlights
				$.each(
					elements,
					function( key, val) {
						// fetch by id or name
						$(App.formId).find('#'+val+',[name='+val+']').addClass('app-invalid')
					}
				);
			},

			showOverlayImage: function (src, height, width)
			{
				App.showOverlay(
					'<p class="center">' +
						'<button class="button-orange" onClick="App.hideOverlay();">Tryk her for at lukke vinduet</button>' +
					'</p>' +
					'<img src="'+src+'">',
					height,
					width
				);
			},

			enableButton: function ( selector )
			{
				$(selector).removeAttr('disabled');
				$(selector).removeClass('button-white');
			},

			disableButton: function ( selector )
			{
				$(selector).attr('disabled', 'disabled');
				$(selector).addClass('button-white');
			}

		}
	}();

	$(document).ready(
		function(){
			var overlay =
				'<div id="app-overlay">'+
					'<div id="app-overlay-background"></div>'+
					'<div id="app-overlay-container">'+
						'<div id="app-overlay-loader">' +
							'<h1>Vent</h1>'+
							'<img src="/_framework/files/graphics/animation/128x128_thinspinner.gif" height="128px" width="128px" align="absmiddle">'+
							'<p>Systemet knokler...</p>'+
						'</div>'+
						'<div id="app-overlay-content">' +
							'<div id="app-overlay-content-html"></div>' +
						'</div>'+
					'</div>'+
				'</div>';
			$(overlay).appendTo("body");
			$(".app-box-close").click( App.hideBoxMessage )
		}
	);

/*
							'<hr>'+
							'<div class="controls center">'+
								'<button class="button-orange" onClick="App.hideOverlay()">Ok</button>' +
							'</div>'
*/