/* Apple Dock jQuery plugin
By Herman van der Maas, 28-09-2010, waywayway.nl
Dedicated to Benjamin Paap, benjaminpaap.de
This plugin works on a <div> containing <img>'s that are optionally wrapped in <a>'s.
All <img>'s must have the same size, if not they will be resized to the size of the first <img>.
In the html document, first include the .js file of jQuery 1.4.2, then this .js plugin file, 
then a .js script attaching the dock method to your <div>. */

(function($) {
	$.fn.dock = function(settings) {
		
		//Default settings
		var config = {
			// gdzie 1 = 100%, 2 = 200% itd.
			zoomFactor : 2.00, 
			// im większa wartość, tym większa reakcja img sąsiadujących
			zoomWidth : 90,
			// czas powrotu na miejsce
			timeOut : 700			
		};
		
		// łączy ustawienia użytkownika z ustawieniami obiektu
		if (settings) $.extend(config, settings);
		// Wrzuca <div id="dock"> do obiektu jQuery, co umożlwia
		// rozpoczynanie nazwy od "$" w celu wskazania obiektu jQuery.
		$dock = $(this);
		// Wrzuca wszystkie <img>'s do obiektu jQuery do dalszych obliczeń.
		$images = $(this).find('img');

		// Stosuje funkcje i zwraca każdy element, aby zachować chainability.
		return this.each(function() {

			originalImgWidth = $images.eq(0).width();
			originalImgHeight = $images.eq(0).height();
			
			initDockSlide();
			
			function initDockSlide() {
				// Zmienne muszą mieć zasięg globalny, stąd pominiecie słowa kluczowego "var".
				originalDivWidth = $dock.width();
				originalDivPosition = - parseInt($dock.css('margin-left').replace(/[^\d\.]/g, ''));
				t = '';
				$dock.hover(slideDockIn, slideDockOut);
			};

			function slideDockIn() {
				if(t) {
					clearTimeout(t);
				};
				initZoom();
			};

			function slideDockOut() {
				exitZoom();
				var timerCallback = function() {
					$dock.unbind('mousemove');
				};
				t = setTimeout(timerCallback, config.timeOut);
			};

			
			function initZoom(){
				// Zaczyna animację obrazków, gdy kursor porusza się nad <div id="dock">.
				$dock.bind('mousemove', zoom);
			};

			function zoom(e){
				// zoom in on images
				$images.each(function() {
					// .replace(/[^\d\.]/g, '') usuwa css'owe jednostki (np. '20px' przekształca w 20)
					var currentImgWidth = $(this).css('width').replace(/[^\d\.]/g, '');
					var currentImgHeight = $(this).css('height').replace(/[^\d\.]/g, '');
					var currentImgX = $(this).offset().left + (currentImgWidth / 2);
					var differenceX = currentImgX - e.pageX;
					var zoomMultiplier = 1 + (config.zoomFactor - 1) * Math.pow(10, (-0.5 * Math.pow((differenceX / config.zoomWidth) ,2)));
					var newWidth = Math.round(zoomMultiplier * originalImgWidth);
					var newHeight = Math.round(zoomMultiplier * originalImgHeight);
					if (newWidth != currentImgWidth) {
						$(this).css({
							width : newWidth + 'px',
							height : newHeight + 'px'
						});
					}
				});
				
				// Uaktualnia położenie <div id="dock">.
				newMarginleft = (originalDivPosition + (originalDivWidth - $dock.width()) / 2);
				if (Math.abs(originalDivWidth - $dock.width()) > 5) {
					$dock.css({'margin-left' : newMarginleft + 'px'});
				};
			};

			function exitZoom(){
				$dock.animate({
					'margin-left' : originalDivPosition
				}, 150);
				$images.each(function() {
					$(this).animate({
						width : originalImgWidth,
						height : originalImgHeight,
					}, 150);
				});
			};
		});
	};
})(jQuery);