window.addEvent('domready', function() {
	
	$$('.kalendarz').each(function(kal){
		var opis_bt = kal.getElement('.opis_bt');
		var opis = kal.getElement('.opis');
		var okladki_bt = kal.getElement('.okladki_bt');
		var okladki = kal.getElement('.okladki');
		var id = kal.getProperty('id');
		
		opis.set('slide',{overflow: 'auto'});
		opis.slide('hide');
		opis_bt.addEvent('click', function(e) {
			//e.stop();
			opis.slide('toggle');
		});
		okladki.set('slide',{overflow: 'auto'});
		okladki.slide('hide');
		
		okladki_bt.addEvent('click', function(e) {
			e.stop();
			if (okladki.getElement('img') == null) {
				var jsonRequest = new Request.JSON({
					url: "/remote/okladki",
					onComplete: function(dane){
						dane.each(function(okladka){
							var zdjecie = new Element('img', {
								'src': '/kalendarze/okladki/kalendarze-2012-' + okladka['zdjecie'] + '_min.jpg',
								'class': 'okladka_min',
                                                                'alt': 'kalendarze książkowe'
							});
							var info = new Element('img', {
								'src': '/img/bt_info.gif',
								'class': 'bt_info'
							});
							var box = new Element('div', {
								'class': 'okladka_box'
							});
							var nazwa = new Element('div', {
								'class': 'okladka_nazwa'
							});
							
							info.addEvents({
								'mouseenter': function(e){
									e = new Event(e).stop();

									var tool_middle = showTooltip(this);
									var big_image = new Element('img', {
										'src': '/kalendarze/okladki/kalendarze-2012-' + okladka['zdjecie'] + '.jpg',
										'class': 'big_image'
									});
									var tp_nazwa = new Element('div', {
										'class': 'tp_okladka_nazwa'
									});
									tp_nazwa.appendText(okladka['nazwa']);
									if (!Browser.Engine.trident) {  //IE nie obsługuje onload i nie korzystaj z tego jeżeli klientem jest IE
										var loader = new Element('img', {
											'class': 'loader',
											'src': '/img/ajax-loader2.gif'
										}).inject(tool_middle);
										
										big_image.addEvent('load', function(){
											tool_middle.empty();
											big_image.inject(tool_middle);
											tp_nazwa.inject(tool_middle);
										});
									} else {
										big_image.inject(tool_middle);
										tp_nazwa.inject(tool_middle);
									};
								},
								'mouseleave': function(e){
//									e = new Event(e).stop();
//									var tooltip = $$('.tooltip');
//									tooltip.set('morph', {duration: 100, transition: Fx.Transitions.Sine.easeOut});
//									tooltip.morph({'opacity': 0}).chain(function(){
//										tooltip.destroy();
//									});
									$$('.tooltip').destroy();
								}
							});
							nazwa.appendText(okladka['nazwa']);
							box.grab(zdjecie);
							box.grab(nazwa);
							box.grab(info);
							box.inject(okladki); // insert new image
						});
						var clear = new Element('div', {
						    'styles': {
						        'clear': 'both'
						    }
						});
						clear.inject(okladki); // insert new image
						okladki.slide('toggle');
					}
				}).get({'id': id});
			} else {
				okladki.slide('toggle').chain(function(){
					okladki.empty();
				});
			}
		});

	});
	
	function showTooltip(element){
		var x_offset = 30;
		var y_offset = -30;

		var tooltip = new Element('div', {'class': 'tooltip'});
		var tool_top = new Element('div', {'class': 'tool-top'});
		var tool_middle = new Element('div', {'class': 'tool-middle'});
		var tool_bottom = new Element('div', {'class': 'tool-bottom'});
		
		//tooltip.adopt([tool_top, tool-middle, tool-bottom]);
		tooltip.grab(tool_top);
		tooltip.grab(tool_middle);
		tooltip.grab(tool_bottom);
		
		var tp_width = tooltip.getStyle('width').toInt();
		var tp_height = tooltip.getStyle('height').toInt();
		
		var pos = element.getPosition();
		var tp_left = pos.x + x_offset;
		var tp_top = pos.y + y_offset - tp_height;
		
		//sprawdzenie czy cały tooltip mieści się na ekranie
		extend_x = tp_left + tp_width - posRight();
		if(extend_x > 0) {
			//alert('nie mieści się z prawej');
			tp_left -= extend_x + 30;
		};
		extend_y = posTop() - tp_top;
		if(extend_y > 0) {
			//alert('nie mieści się z prawej');
			tp_top += extend_y + 10;
		};
		if(tp_top + tp_height > pos.y){
			//alert('przysłania');
			tp_top = pos.y + 30;			
		}
		
		tooltip.setStyle('left', tp_left + 'px');
		tooltip.setStyle('top', tp_top + 'px');
		
		var fx = new Fx.Morph(tooltip, {duration: 150, transition: Fx.Transitions.Sine.easeOut});
		fx.set({'opacity': 0});
		
		tooltip.injectInside(document.body);
		fx.start({'opacity': 1});
				
		return tool_middle;
	};
});