Element.addMethods('IMG', {      
	actionZoomImage: function(objSender, localConfig)
	{	
		objSender.onmouseover = null;
		var divObj = new Element("div");
		divObj.setStyle({
			border: 'solid 4px #FF72A3',
			width: '150px',
			height: '150px',
			overflow: 'hidden',
			background: "url('image/template/loader.gif') no-repeat center center #ffffff"	
		});				
		document.body.appendChild(divObj);
		var tooltip = new Tooltip(objSender.identify(), divObj);
		objSender.simulate("mouseover");		
		
		var imgObj = new Element("img");
		imgObj.writeAttribute("alt", "trwa pobieranie pliku");
		imgObj.writeAttribute("src", localConfig.image);
		divObj.appendChild(imgObj);
		
		if (localConfig.description)
		{
			var divDescription = new Element("div");
			divDescription.update(localConfig.description);				
		}
		
		
		new PeriodicalExecuter(function(pe){
			if (imgObj.complete)
			{
				var imgW = parseInt(imgObj.width) + "px";
				var imgH = parseInt(imgObj.height) + "px";
				
				if (parseInt(imgW) <= 0)
				{
				  imgW = 'auto';
					imgH = 'auto';
				}
				
				
				divObj.setStyle({
					width: imgW,
					height: imgH
				});
				
				divDescription.setStyle({
					position: "relative",
					marginTop: "-40px",
					//width: imgObj.width + "px",
					height: "40px",					
					padding: "5px",
					background: 'black',
					opacity: 0.3,
					color: "white"
				});
				
				divObj.appendChild(divDescription);
				pe.stop();
			}
						
			
		},0.1);
	}
});




var Tooltip = Class.create();

Tooltip.prototype = {
	initialize: function(element, tool_tip) 
	{
		var options = Object.extend({
										default_css: false,
										margin: "0px",
										padding: "5px",
										backgroundColor: "#d6d6fc",
										min_distance_x: 15,
										min_distance_y: 15,
										delta_x: 0,
										delta_y: 0,
										zindex: 1000
										}, arguments[2] || {});
		
		this.element = $(element);
		
		this.options = options;
		
		// use the supplied tooltip element or create our own div
		if($(tool_tip)) {
			this.tool_tip = $(tool_tip);
		} 
		else 
		{
			this.tool_tip = $(document.createElement("div")); 
			document.body.appendChild(this.tool_tip);
			this.tool_tip.addClassName("tooltip");
			this.tool_tip.appendChild(document.createTextNode(tool_tip));
		}
		
		// hide the tool-tip by default
		this.tool_tip.hide();
		
		this.eventMouseOver  = this.showTooltip.bindAsEventListener(this);
		this.eventMouseOut   = this.hideTooltip.bindAsEventListener(this);
		this.eventMouseMove  = this.moveTooltip.bindAsEventListener(this);		
		
		this.registerEvents();
	},
	
	destroy: function() 
	{
		Event.stopObserving(this.element, "mouseover", this.eventMouseOver);
		Event.stopObserving(this.element, "mouseout", this.eventMouseOut);
		Event.stopObserving(this.element, "mousemove", this.eventMouseMove);
	},
	
	registerEvents: function() 
	{
		Event.observe(this.element, "mouseover", this.eventMouseOver);
		Event.observe(this.element, "mouseout", this.eventMouseOut);
		Event.observe(this.element, "mousemove", this.eventMouseMove);
	},
	
	moveTooltip: function(event)
	{
		Event.stop(event);		
		// absolutne pooenie myszki
		var mouse_x = Event.pointerX(event);
		var mouse_y = Event.pointerY(event);
				
		var dimensions = Element.getDimensions( this.tool_tip ); // rozmiar ramki z powiekszonym obrazkiem		
		var element_width = dimensions.width;
		var element_height = dimensions.height;
		
		// polozenie elementu wyzwalajacego na ekranie
		var senderPlace = event.target.cumulativeOffset();
		
		// przesuniecia offsetowe wzgledem poczatku ekranu
		var offsets = document.viewport.getScrollOffsets();  
				
						
		if ( (element_width + mouse_x) >= ( this.getWindowWidth() - this.options.min_distance_x ) )
		{ 
			// too big for X
			mouse_x = mouse_x - element_width;
			// apply min_distance to make sure that the mouse is not on the tool-tip
			mouse_x = mouse_x - this.options.min_distance_x;
		} 
		else
		{
			mouse_x = mouse_x + this.options.min_distance_x;
		}
				

		
		// przypadek - tooltip wychodzi poza dolna granice ekranu	
		if ((mouse_y - offsets[1]) + element_height >= this.getWindowHeight() - this.options.min_distance_y  )
		{
			var offset = ((mouse_y - offsets[1]) + element_height) - (this.getWindowHeight() );
			
			mouse_y = mouse_y - offset;			
		}		
		else
		{
			mouse_y = mouse_y + this.options.min_distance_y;
		}
		
		
		// now set the right styles
		this.setStyles(mouse_x, mouse_y);
	},
	
	
	showTooltip: function(event) 
	{
		Event.stop(event);
		this.moveTooltip(event);
		Element.show(this.tool_tip);
	},
	
	setStyles: function(x, y)
	{
		// set the right styles to position the tool tip
		Element.setStyle(this.tool_tip, { 
											position:'absolute',
											top:y + this.options.delta_y + "px",
											left:x + this.options.delta_x + "px",
											zindex:this.options.zindex
										});
	
	// apply default theme if wanted
		if (this.options.default_css)
		{
			Element.setStyle(this.tool_tip, {
												margin:this.options.margin,
												padding:this.options.padding,
												backgroundColor:this.options.backgroundColor,
												zindex:this.options.zindex
											});	
		}	
	},
	
	hideTooltip: function(event)
	{
		new Element.hide(this.tool_tip);
	},
	
	getWindowHeight: function()
	{
		var innerHeight;
		if (navigator.appVersion.indexOf('MSIE')>0) 
		{
			innerHeight = document.body.clientHeight;
		} 
		else 
		{
			innerHeight = window.innerHeight;
		}
		return innerHeight;	
	},
	
	getWindowWidth: function()
	{
		var innerWidth;
		if (navigator.appVersion.indexOf('MSIE')>0) 
		{
			innerWidth = document.body.clientWidth;
		} 
		else 
		{
			innerWidth = window.innerWidth;
		}
		return innerWidth;	
	}

}