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()
			{
				$(".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;
					$("#app-overlay-content-html").html('')
				});
			},

			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,
					cache: false
				});
				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,
					cache: false
				});
				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 && response.errors.length > 0 ) {
						// 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.highlightAsInvalid( document.body, response.elements);
					}
					App.showBoxMessage( response.responseType, response.responseHeader, response.responseBody );
				}
			},

			highlightAsInvalid: function( parent, elements )
			{
				parent = typeof(parent) != 'undefined' ? parent : document.body;
				// Remove previous highlights
				App.removeHighlight(parent);
				// Add highlights
				$.each(
					elements,
					function( key, val) {
						// fetch by id or name
						$(parent).find('#'+val+',[name='+val+']').addClass('app-invalid');
					}
				);
			},

			// Remove previous highlights
			removeHighlight: function( parent )
			{
				parent = typeof(parent) != 'undefined' ? parent : document.body;
				$(parent).find(".app-invalid").removeClass('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
				);
			},

			showOverlayPublishByDogtag: function ( dogtag, width, height )
			{
				if ( typeof(width) == 'undefined' ) width = 560;
				if ( typeof(height) == 'undefined' ) height = 500;
				App.showOverlay();
				App.request('/_ajax/mod/publish/?publish_dogtag=' + dogtag,
					{
						success: function(response){
							if ( response.status == 'ok' ) {
								heading = response.data.article.heading;
								content	= response.data.article.html;
								App.showOverlayBox(heading, content, width, height);
							} else {
								App.showOverlayBox('Fejl', '<p>Der opstod en fejl!</p>', 300, 150);
							}
						},
						error: function(){
							App.showOverlayBox('Fejl', '<p>Der opstod en fejl!</p>', 300, 150);
						}
					}
				);
			},

			showOverlayIframe: function (url, heading, width, height)
			{ 
				App.showOverlay();
				App.showOverlayBox(heading, '<iframe src="'+url+'" height="'+(height+10)+'px" width="100%" frameborder="0"></iframe>', width, (height+55));
			},			
			
			showOverlayBox: function(heading, content, width, height)
			{
				if ( typeof(width) == 'undefined' ) width = 560;
				if ( typeof(height) == 'undefined' ) height = 300;
				var html =
					'<div class="c-rowbox">'+
					'	<div class="c-rowbox-content">'+
					'		<div class="c-row-large">'+
					'			<span class="c-font-large left loud">'+heading+'</span>'+
					'			<a class="right" onClick="App.hideOverlay()">luk vindue</a>'+
					'		</div>'+
					'	</div>'+
					'</div>'+
					content;
				App.showOverlay(html, width, height);
			},

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

			disableButton: function ( selector )
			{
				$(selector).attr('disabled', 'disabled');
				$(selector).addClass('button-white');
			},
			
			// Leave page uncachable on browserback button ref: http://stackoverflow.com/questions/158319/cross-browser-onload-event-and-the-back-button/170478#170478
			setPageUncacheable: function()
			{
				$(window).bind("unload", function() {});
			},

			/**
			 * DEPRECATED use App.highlightAsInvalid(...)
			 */
			highligtFormFields: function( elements )
			{
				// Remove previous highlights
				$(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');
					}
				);
			}	

		};
	}();
	
	$(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 )
		}
	);