JF.Modal = function(params) {
	try{
	var container = document.createElement('div');
	$(container).addClass('popstd');
	this.container = container;
	
	/*
	 * set default params
	 */
	params = params || {};
	params.content = params.content || {};
	params.content.title = params.content.title || ''; 
	params.content.subtitle = params.content.subtitle || ''; 
	params.content.content = params.content.content || ''; 
	
	var instance = this;
	this.width = params.width || 450;
	this.height = params.height || 400;
	this.buttons = params.buttons ||
	{
		'Wyślij': function(){
			
			var name  = $('#name');
			var email = $('#email');
			var text  = $('#textareaForm');
			var regEmail = /^([a-zA-Z0-9._-]{1,})@([a-zA-Z0-9._-]{1,})\.([a-zA-Z]{1,4})$/;
			var regTresc = /(.*)+/;
			
			var error = 0;
			if( !regEmail.test( email[0].value ) ) {
				error++;
				email.css({ border : '1px solid red' });
			} else {
				email.css({ border : '1px solid #aaa' });
			}
			
			if( !regTresc.test( text[0].value ) ) {
				error++;
				text.css({ border : '1px solid red' });
			} else {
				text.css({ border : '1px solid #aaa' });
			}
			
			if( error > 0 )
				return;
				
			var layer = $( '<div id="layer"></div>' );
			layer.css({
				position : 'absolute',
				width : '450px',
				height : '400px',
				background : '#fff',
				opacity : 0,
				top: '2px',
				left: '2px'
			});
			
			layer.append( '<div id="ines_wait" style="position: absolute;top: 35%;left:30%;"><img src="/layout/inesita_wait.gif" alt="inesita" /></div>' );
			
			var popover = $( instance.container ).parent();
			popover.append( layer );
			layer.animate({
				opacity : 0.7
			});
			
			$.post('/index/send', {
				name : name[0].value,
				email: email[0].value,
				text : text[0].value
			}, function( response ){
				layer.animate({
					opacity : 1
				});
				var info = layer.find('#ines_wait');
				info.css({color:'black',left: '32%'});
				info[0].innerHTML = 'Wysłano wiadomość...';
				window.setTimeout(function(){
					popover.animate({
						opacity : 0
					},500, function(){
						instance.kill();
					});
				}, 1000);
			}, 'json');
		},
		'Anuluj': function(){
			instance.kill();
		}
	};

	this.setContent( params.content );
	}catch(e){console.error(e);}
};

JF.Modal.prototype.setContent = function( params ) {
	var title = document.createElement('div');
	var subtitle = document.createElement('div');
	var content = document.createElement('div');

	/*
	 * subtitle
	 */
	$(subtitle).addClass('pop-std-subtitle');
	$(subtitle).text(params.subtitle);
	/*
	 * content
	 */
	 
	var form = '<label>Imie i Nazwisko:</label><input id="name" type="text" name="imienazwisko" />';
	form    += '<label>Adres e-mail:</label><input id="email" type="text" name="email" />';
	form    += '<label>Treść wiadomości</label><textarea id="textareaForm" name="tresc"></textarea>';
	
	$(content).addClass('pop-std-content').append( form );
	
	this.container.appendChild(title);
	this.container.appendChild(subtitle);
	this.container.appendChild(content);
};

JF.Modal.prototype.show = function( txt ) {
	document.body.appendChild(this.container);
	var instance = this;
	var txt = txt || '';

	$(document).ready(function(){
	
		$( '#textareaForm' ).val( txt );
		
		$(instance.container).dialog({
			width: instance.width,
			height: instance.height,
			minHeight : instance.height,
			modal: true,
			resizable: false,
			overlay: {"background-color": "#333","opacity": "0.5","-moz-opacity": "0.5"},
			buttons: instance.buttons,
			close: function(){
				instance.kill();
			}
	   });
  
		//ustawienie kolorów dla buttonów
		$(".ui-dialog-buttonpane button").each(function(){$(this).addClass("buttonA")});
		$(".ui-dialog-buttonpane button:last").addClass("buttonB");
		
		$('span#ui-dialog-title-1').text('Formularz kontaktowy');
	});

};

JF.Modal.prototype.kill = function() {
	$(this.container).dialog('destroy').remove();	
};

var $JFPOP = new JF.Modal({
	content : {
		title : 'Kontakt',
		subtitle : 'Wypełnij poniższe pola i kliknij "wyślij"'
	}
});