Weblabor

		var jAAPTT = Class.create();
			
				jAAPTT.prototype = {
					
					initialize : function(options){	
										
						this.images = [];						
						this.imgPreLoader = {
							// start loading
							startLoad :	function(img_src){
								this.img = new Image();
								this.img.src = img_src;
								this.img.onload = this.imgPreLoader.onFinished.bind(this,img_src);
							},
							// if finished
							onFinished : function(img_src){
								this.images.push(img_src);
								// show updated toolbox
								var tooltip = t_tooltip.process( { tooltip_img_src : img_src } );
								// update toolbox								
								Element.update('tooltip_wrapper',tooltip);
								// refresh dimension datas
								setTimeout (function(){ this.refreshToolBox()}.bind(this),100);															
							}
						}
						
						// default values, or inic params
						this.options = Object.extend({
							bigImgPath 		: 'img/big/',
							thumbImgPath 	: 'img/thumb/',
							loaderImg		: 'img/loading.gif',
							offsetX			: 15,
							offsetY			: 15						
						}, options || {}); 	
						
						var preloader = new Image();
						preloader.src = this.options.loaderImg;
							
						// add tooltip wrapper to body
						new Insertion.Bottom(document.body,'<div id="tooltip_wrapper" style="display:none;position:absolute;"></div>');					
						
						// parse template of the tooltip
						t_tooltip = TrimPath.parseDOMTemplate("t_tooltip");					
						
						// put the event handlers to class="tooltip_link" links 
						document.getElementsByClassName('tooltip_link').each(function(tooltip_link){							
							// and show the tooltip
							Event.observe(tooltip_link,'mousemove',this.onShowToolTip.bindAsEventListener(this));
							Event.observe(tooltip_link,'mouseout',this.onHideToolTip.bindAsEventListener(this));							
						}.bind(this));
						
					},
					
					onShowToolTip : function(e){
						this.event = e;	
						
						// calculate the init, and modified positions
						this.initX = Event.pointerX(this.event) + this.options.offsetX;
						this.initY = Event.pointerY(this.event) + this.options.offsetY;	
						
						// get the dimensions of the viewport
						this.viewport = {
							width  : document.documentElement.clientWidth || document.body.clientWidth,
							height : document.documentElement.clientHeight || document.body.clientHeight
						}
						var scrollOffset = Position.realOffset(document.body);
						this.viewport.height = this.viewport.height + scrollOffset[1];
						this.viewport.width  = this.viewport.width  + scrollOffset[0];						
						
						// put image to toolbox, first the preloader img
						var act_link = Event.element(e);						
												
						// if need call the preload method
						if (this.images.indexOf( this.options.thumbImgPath+act_link.rel)!=-1)
						{
							var tooltip = t_tooltip.process( 
								{ tooltip_img_src : this.options.thumbImgPath + act_link.rel 
							} );	
						}
						else			
						{	
							this.imgPreLoader.startLoad.bind(this)(this.options.thumbImgPath + act_link.rel);
							var tooltip = t_tooltip.process( { tooltip_img_src : this.options.loaderImg } );
						}
						// show toolbox
						Element.update('tooltip_wrapper',tooltip);	
						
						this.refreshToolBox();					
				},
				
				refreshToolBox : function(){						
																	
						// get toolbox_dimensions 
						var t_dim = $('tooltip_wrapper').getDimensions();
						// bigger than the vieport, modified them						
						var finalX = this.initX + t_dim.width > this.viewport.width ? this.initX - ( t_dim.width + this.options.offsetX) : this.initX;
						var finalY = this.initY + t_dim.height > this.viewport.height ?  this.initY - ( t_dim.height + this.options.offsetY) : this.initY;
						// set final positions
						Element.setStyle('tooltip_wrapper',{
								top  : finalY+'px',
								left : finalX+'px'
						});
						
						Element.show('tooltip_wrapper');						
													
					},
					// hide toolbox if we dont need it
					onHideToolTip : function(e){
						Element.hide('tooltip_wrapper');
					}				
										
			}	
			
			var t_tooltip = {};
			Event.observe(window,'load',function(){
									
			// just create test links, for testing purpose
				for(var i=1;i<100;i++)
				{
					var tempLink = '<span class="tooltip_link_wrapper"><a class="tooltip_link" href="#" rel="'+i%10+'.jpg">'+i+'. teszt link</a></span>';					
					
					new Insertion.Bottom ('left',tempLink); 
					new Insertion.Bottom ('center',tempLink);						
					new Insertion.Bottom ('right',tempLink);						
				}
				// inic our new beauty tool ^^)
				new jAAPTT({
					thumbImgPath : 	'img/big/'				
				});		
				
			})