/*
Apple Dock simulation in JavaScript
By Herman van der Maas
www.waywayway.nl 
18-9-2010
This script works on a <div id="dock"> 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 file
*/



// Execute functions after DOM has loaded
$(document).ready(function(){
	// zoomFactor is a percentage of magnification e.g. 1.00 is no zooming, 2.00 = 200%
	// zoomWidth is the width of the magnification of the <img>'s
	// timeOut is the time (in milliseconds) that elapses between the mouseout and the sliding back of the <div id="dock">
	zoomFactor = 2.00;
	zoomWidth = 90;
	timeOut = 700;
	// Put <div id="dock"> in a jQuery object, let the variable name start with a "$" to indicate a jQuery object
	$dock = $('#dock');
	// Put original <img>'s margin-top property in variable
	originalMargintop = $('#dock img').eq(0).css('margin-top');
	// Put original <img>'s width in variable
	originalImgwidth = $('#dock img').eq(0).css('width').replace(/[^\d\.]/g, '');
	// put all <img>'s in a jQuery object for future calculations
	$images = $('#dock img');
	//
	initDockslide();
});



// Create slide in / slide out of Dock <div>
var initDockslide = function(){
	// the variable below must be available to other functions (it must be in the global scope), so don't use the "var" keyword to declare it
	originalBottomposition = $('#dock').css('bottom');
	originalDivwidth = $('#dock').width();
	originalDivposition = - parseInt($('#dock').css('margin-left').replace(/[^\d\.]/g, ''));
	t = '';
	$dock.hover(slideDockin, slideDockout);
};

var slideDockin = function() {
	if(t) {
		clearTimeout(t);
	};
	// the keyword "this" refers to the "hovered" element (the <div id="dock">)
	$(this).animate({bottom : "0px"}, 500, initZoom);
};

var slideDockout = function() {
	exitZoom();
	var timerCallback = function() {
		// don't use $(this), but use $dock in this callback function, otherwise the element will not be recognised
		$dock.animate({bottom : originalBottomposition}, 400);
	};
	t = setTimeout(timerCallback, timeOut);
};



// Start zooming in on images in <div id="dock"> when mouse moves
var initZoom = function(){
	// if mouse moves over <div "dock">, zoom in on images
	$dock.bind('mousemove', zoom);
};

var zoom = function(e){
	// zoom in on images
	$images.each(function() {
		// .replace(/[^\d\.]/g, '') deletes the css unit (e.g. '20px' becomes 20)
		var currentImgWidth = $(this).css('width').replace(/[^\d\.]/g, '');
		var currentImgX = $(this).offset().left + (currentImgWidth / 2);
		var differenceX = currentImgX - e.pageX;
		var zoomMultiplier = 1 + (zoomFactor - 1) * Math.pow(10, (-0.5 * Math.pow((differenceX / zoomWidth) ,2)));
		var newWidth = Math.round(zoomMultiplier * originalImgwidth);
		var newHeight = newWidth;
		// calculate new "margin-top" css property
		var newMargintop = - Math.round(newWidth - originalImgwidth) + parseInt(originalMargintop.replace(/[^\d\.]/g, ''));
		if (newWidth != currentImgWidth) {
			$(this).css({
				"margin-top" : newMargintop + 'px',
				width : newWidth + 'px',
				height : newHeight + 'px'
			});
		}
	});
	// adjust position of <div id="dock">
	newMarginleft = originalDivposition + (originalDivwidth - $dock.width()) / 2;
	if (Math.abs(originalDivwidth - $dock.width()) > 5) {
		$dock.css({'margin-left' : newMarginleft + 'px'});
	};
};



// Stop zooming in when mouse moves
var exitZoom = function(){
	// unbind "mousemove" event from <div id="dock">
	$dock.unbind('mousemove');
	$dock.animate({
		'margin-left' : originalDivposition
	}, 150);
	$images.each(function() {
		$(this).animate({
			width : originalImgwidth,
			height : originalImgwidth,
			'margin-top' : originalMargintop
		}, 150);
	});
};