var overlay = function(){
	/**
	 *	Skrypt umożliwia wyświetlanie różnych informacji ( html, obrazki )  na warstwie.
	 *	@require	jQuery >= 1.3 
	 *				flib.js
	 *	@example
	 *		<a href="obrazek.jpg" class="overlay"> link do obrazka </a>
	 *			- obrazek zostanie wyświetlony po kliknieciu na link na warstwie z przyciskiem 'zamknij'
	 *		<a href="#tabelka" class="overlay">Pokaż</a>
	 *			- po kliknięciu na link, na warstwie zostanie wyświetlony element html o ID = "#tabelka" (może to być np <div> lub <table>)
	 * 	@todo 
	 *		przy przesuwaniu scrolla - przesuwac elementem wysrodkowany - o ile nie jest wiekszy od obszaru roboczego.
	 *		dodac ramke do obrazkow / tresci... 
	 *		przetestowac jesli content.width > window (zakladam na razie ze takiego contentu nie bedziemy wyswietlac)
	 */

	/* private */
	var overlayOpacity 			= 1;
	var contentType				= 'html'; 		// rodzaj tresci do pokazania : img / html  - sa troche inaczej wyswietlane
	var contentBackground		= 'none';
	
	var preCallback				= null; 
	var postCallback			= null;
	
	var overlayMargin			= 50;			//	marginesy gorny i dolny dla overlaya przy duzych zawartościach do wyświetlenia
	
	var isSubOverlay 			= false;		// 	czy overaly jest juz pokazany, - obsluga overlayi na overlayu
	/* public */
	return {
		showOverlay : function( options ) {
		/**
		 *		Metoda pokazuje tło overlaya i przygotowuje strukturę html do wyświetlenia zawartości.
		 *		Metoda może być używana oddzielnie, niezwiązanie z jakąś treścią do pokazania za pomocą overlaya (można samemu dodać ręcznie).
		 *		@param	options 	obiekt z opcjami :
		 *			backgroundOpacity		- przezroczystosc tla, jesli zostanie podana, domyslna jest ignorowana.
		 *			width, height			- rozmiar fBoxContent (jesli nie zostanie podana, stworzona jest domyslnie, 
		 *								   a nastepnie dynamicznie dopasowana do rozmiarow wyswietlanej tresci)
		 *			closeButton				możliwe wartości: top, bottom, both  - w zależności od tego gdzie umieścić przycisk zamknij.
		 */
			var backgroundOpacity =  ( options && options.backgroundOpacity )  ?
				parseFloat( options.backgroundOpacity ) : overlayOpacity;
			overlayOpacity = backgroundOpacity;
			
			//	ukrywanie selectow i flashy - 
			f.objects.hide();
			//$('object:visible, select:visible').hide().data('ukryty', true);
			
			//	tworzenie dwoch glownych elementow, tla oraz kontenera na content.
			var foBackground = $('<div/>').attr('id','fboxBackground').css({
					'opacity' : backgroundOpacity , 'filter' : 'alpha(opacity='+backgroundOpacity*100+')',
					'filter': 'progid:DXImageTransform.Microsoft.Alpha(opacity='+backgroundOpacity*100+')',
					'background':'#000', 'text-align':'center',
					'position':'fixed','top':'0', 'left':'0',
					'width':'100%', 'height':'100%',
					'display':'none', 'z-index':'500'
				});
			var foContent = $('<div/>').attr('id','fboxContent').css({
				'position':'absolute', 'top':'0', 'left':'0', 'background':contentBackground,'z-index':'501', 'text-align':'left', 'margin':'0 auto'
				});
			if ( options ) {
				if ( options.width ) {
					foContent.width( options.width );
				}
				if ( options.height ) {
					foContent.height( options.height );
				}
			}
				
			$('body').append(foBackground).append(foContent);
			foBackground.fadeIn();
			//	generowanie standardowych linków do zamykania overlaya (top)
			var navbars = $('<div/>');
			if ( options ) {
				if ( options.closeButton == 'both' || options.closeButton == 'top' ) {
					navbars.append($('<p class="navbar"><a href="#" class="overlayClose">zamknij X</a></p>'));
				}
			}
			//	dodajemy container dla zawartosci overlaya
			navbars.append( $('<div id="fboxContentContainer"></div>') );
			//	generowanie standardowych linków do zamykania overlaya (bottom)
			if ( options ) {
				if ( options && options.closeButton == 'both' || options.closeButton == 'bottom' ) {
					navbars.append($('<p class="footbar"><a href="#" class="overlayClose">zamknij X</a></p>'));
				}
			}
			foContent.show().append(navbars);
			this.addCSSforIE();
			
			//	zamykanie escapem
			$(document).keyup(function(e) {
				if ( e.keyCode == 27 ) {
					overlay.close();
				}
			});
			
		},
		append : function (obj, objToShow, options ) {
		/**
		 *		Metoda dodaje obsługę zdarzeń dla overlaya. 
		 *		Możemy za jej pomocą dodawać zdarzenia do konkretnych elementów, interakcje itp
		 *		@param	obj 		obiekty, po kliknięciu na które ma się pojawia overlay
		 *		@param	obToShow 	obiekty, który mają się pojawić po kliknięciu na obj
		 *		@param	options 	obiekt z dodatkowymi opcjami :
		 *					preCallback		funkcja, która zostanie wywołana przed pokazaniem overlaya 
		 *									(przed pokazaniem tła)
		 *					postCallback	funkcja, która zostanie wywołana w momencie zamykania danego overlaya
		 *									(przed schowaniem zawartości)
		 *					subOverlay 		true/false - wykorzystywana wewnetrzenie do oznaczenia contentu 
		 *									ładowanego po kliknięciu na już pokazany overlay, 
		 *									aby nie ładować dwa razy tła overlaya
		 *		@see 	options dla showOverlay (options są przekazywane do tamtej metody)
		 *	
		 */
			_self = this;
			if ( options ) {
				preCallback = options.preCallback || null;
				postCallback = options.postCallback || null;
			}
			$(obj).click(function() {
				preCallback ? preCallback.call(this) : null ; 
				if ( options && options.subOverlay ) {
					isSubOverlay = true;
				} else {
					isSubOverlay = false;
					_self.showOverlay(options);		
				}
				var fboxContent = $('#fboxContent');
				var output = fboxContent.find('#fboxContentContainer');
				var id = '';
				var href = '';
				if ( typeof objToShow == 'undefined' || objToShow == 'default' || objToShow === null ) {
					//	sprawdzamy czy href nie prowadzi do obrazka
					href = this.href;
					if ( href.test('.jpg', 'last') || href.test('.gif', 'last') || href.test('.jpeg', 'last') ) {
						contentType = 'img';
					} else {
						id = href.slice( href.indexOf('#') );
						contentType = 'html';
					}
				} else if ( objToShow == 'ajax' ) {
					href = this.href;
					contentType = 'ajax';
				} else {
					id = objToShow;
					contentType = 'html';
				}
				
				//	ustawienia tla według contentu 
				if ( contentType == 'html' || contentType == 'ajax' ) {
					contentBackground = 'none';
				} else if ( contentType == 'img' ) {
					contentBackground = '#ffffff';
				}
				
				//alert('id = '+id);
				//alert('contentType = '+contentType);
				
				if ( contentType == 'img' ) {
					_self.showLoading();
					var img = new Image();
					$(img).load(function(){
						var p = $('<p class="image"></p>');
						p.append( $(this) );
						output.empty().append(p);			//	podmieniamy content, bo bylo wczesniej pokazane ladowanie
						_self.showContent();
					}).attr('src', href);
				} else if ( contentType == 'html' ) {
					//alert( id+' , znaleziono : '+$(id).length);
					$(id).clone().addClass('fboxID_'+id.slice(1)).appendTo(output).show();
					_self.showContent();
				} else if ( contentType == 'ajax' ) {
					_self.showLoading();
					$.ajax({
						type: "GET",
						url: href,
						dataType: 'html',
						async: true,
						success: function(data) {
							output.empty().append(data);		//	podmieniamy content, bo bylo wczesniej pokazane ladowanie
							_self.showContent();
						}, 
						error: function(XMLHttpRequest, textStatus, errorThrown) {
							_self.close();
							throw new Error('Błąd ładowania overlay Ajax. URL = "'+href+'", \nXMLHttpRequest = '+XMLHttpRequest+'\ntextStatus = '+textStatus+'\nerrorThrown = '+errorThrown);
						}
					});
				}
				
				return false;
			});
		},
		showContent : function() {
		/**
		 *		Metoda pokazuje konkretną zawartoście na warstwie overlaya.
		 *		Używana wewnętrznie.
		 */
			var fboxContent = $('#fboxContent');
			var output = fboxContent.find('#fboxContentContainer');

			var scrollTop = 0;
			if ( typeof $(window).scrollTop == "function" ) {
				scrollTop = $(window).scrollTop();
			}
			var scrollLeft = 0;
			if ( typeof $(window).scrollLeft == "function" ) {
				scrollLeft = $(window).scrollLeft();
			}
			var width = fboxContent.width();
			var height = fboxContent.height() + overlayMargin*2;
				
			//alert(' width : '+width+'\n height : '+height);
			var posLeft = parseInt(parseInt( Math.floor(($(window).width() - width)/2) + scrollLeft));
			var posTop = 0;
			
			var widthVisibleArea = ( $(window).width() > $('body').width() ) ? $(window).width() : $('body').width();
			$('#fboxBackground').width(widthVisibleArea);
			
			if ( height >  $(window).height() ) {
				//	jesli content jest wiekszy niz wysokosc okna
				//	zmieniamy wysokosc tla, aby caly content byl nad tlem.
				$('#fboxBackground').height(parseInt(height+scrollTop));
				//	pozycja pionowa contentu ustawiana jest z marginesem gornym od gornej krawedzi okna
				posTop = parseInt(parseInt( overlayMargin + scrollTop));
			} else {
				//	jesli content jest mniejszy niz okno
				//	ustaw wysokosc tla -> wysokosc okna/body, aby pokrylo cala wyswietlana strone 
				$('#fboxBackground').height( ( $(window).height() > $('body').height() ) ? $(window).height() : $('body').height() );
				//	jesli zawartosc overlaya jest mniejsza od wielkkosci okna -> pozycja pionowa ustawiona na srodku okna
				posTop = Math.floor(($(window).height() - height) /2 )+ scrollTop+overlayMargin;
			}
			//alert('position : top = '+posTop+' left = '+posLeft );
			var top = posTop +'px';
			var left = posLeft +'px';
			fboxContent.css( { 'top':top, 'left':left } );
			this.addCSSforIE();
			
/*
			//	TUTAJ NIE DZIALA PO ID, bo to jest kopiowane clone()   i wtedy w DOMie sa dwa id, nie jeden... 
			//	sprobowac dopisac zdarzenia do sklonowanego elementu
			//	sprobowac dopisac zdarzenia do sklonowanego elementu lub nadac mu inne id na podstawie pierwowzoru, np time()

			if ( typeof events != 'undefined' && events ) {
				var ileEventow = events.length;
				for (var i=0; i<ileEventow; i++) {
					if ( events[i][0] && events[i][1] ) {
						fboxContent.find(events[i][0]).click( function(num, ev){		// przetestowac wyszukiwanie w fboxContent po ID i innych tez.
							return function() {
								ev[num][1].call(externalLink);
							};
						}(i, events));
					}
				}
			}
			
*/
			/*	'lapanie' przycisk zamknij	*/
			$('.fboxZamknij, .overlayClose').click( function() {
				_self.close();
				return false;
			});
			
			_self.append( output.find('.overlay') , 'default', { subOverlay: true });
			_self.append( output.find('.overlayAjax'), 'ajax', { subOverlay: true } );
			_self.append( output.find('.overlay_ajax'), 'ajax', { subOverlay: true } );
		},
		showLoading: function() {
			$('#fboxContentContainer').append( $('<p class="overlayLoading">Ładowanie...</p>') );
		},
		addCSSforIE : function() {
		/**
		 *		Metoda dodaje style dla IE.
		 *		Używana wewnętrznie.
		 */
			if (jQuery.browser.msie) {
				if ( parseInt(jQuery.browser.version) == 6 ) {
					$('body').css({'height':'auto'});
					$('#fboxBackground').css({
						'position' : 'absolute', 'top': '0', 'left': '0'
					});
				}
				if ( parseInt(jQuery.browser.version) == 7 ) {
					//alert('7');
					var fboxBackground = $('#fboxBackground').get(0);
					$('#fboxBackground').css({
						'background':'none',
						'-ieh:' : fboxBackground.parsed ? 0 : (
							objTmp = document.createElement('div'),
							objTmp.id = 'ov',
							fboxBackground.parentNode.insertBefore(objTmp, fboxBackground),
							fboxBackground.parsed = 1

						)
					});
					$('#ov').css({
						'position':'fixed','left': '0','top':'0',
						'width':'100%','height':'100%',
						'background-color':'#000',
						'filter': 'progid:DXImageTransform.Microsoft.Alpha(opacity='+overlayOpacity*100+')'
					});
			
				}
			}
		},
		close : function() {
		/**
		 *		Metoda zamykająca warstwę i chowająca jej zawartość.
		 *		Używana wewnętrznie.
		 */
			$('#fboxContent').remove();
			//	#ov tylko dla IE7
			$('#fboxBackground, #ov').fadeOut( function() {
				$('#fboxBackground').css('background','#fff');		// zeby w operze nie zostawał ślad tła    
							//	TODO  nie wystarczy background: none, lub ponizsze usuniecie elementu?
				$('#fboxBackground, #ov').height('0').remove();
				// pokaz ukryte wczesniej elementy
				f.objects.show();
			});
			postCallback ? postCallback.call() : null;
			//alert('end');
		}
	}
}();



$( function () {
	overlay.append('.overlay', 'default');
	overlay.append('.screen', 'default', { closeButton: 'bottom' });
	//overlay.append('.overlay', 'default', { closeButton: 'bottom' });
	//overlay.append('.overlay', 'default', {preCallback: function(){ alert('pre'); }, postCallback: function(){ alert('post'); } });
	//overlay.showOverlay( { backgroundOpacity: 0.9, width:400, height:30} );
});