function handleThumb( targetElement, url, settings ) {

	// add the image tag within the target elemnt
	var $targetElement = $('#' + targetElement);  
	var $thumb = $("<img src='" + rootUrl + "thumbs.php?size=" + settings.sSizeIdx + "&url=" + url + "'>");
	$targetElement.append($thumb);
	// wrap image into a div
	var $thisThumb = $thumb;
	if (!$thisThumb.parent().hasClass('thumbWrapper')) {
		$thumb.wrap("<div class='thumbWrapper'/>");
	}
	var $thumbDiv = $thisThumb.parent(); // $(".thumbWrapper");
	// initial css for image and the wrapper div
	$thumbDiv.css({width: settings.sW, 
				   height: settings.sH, 
				   border: settings.frameWidth+"px solid "+settings.frameColor,
				   overflow: 'hidden'})
	$thisThumb.css({width: settings.sW, 
					height: settings.sH, 
					position: 'relative',
					border:'none'})

	$thumbDiv.bind("mouseover", function (e) {
		$thisThumb.stop()
		// load hi res image
		regExp = new RegExp('\\?size=' + settings.sSizeIdx + '&');  // regex pattern string
		newVal = '?size=' + settings.lSizeIdx + '&';
		var hiSrc = $thisThumb.attr("src").replace(regExp, newVal);
		$thisThumb.attr('src', hiSrc);
		// 'zoom out' - reset css for wrapper div - only if 'small image' has actually larger size than 'large image' - NOTE: this is no longer allowed - tested before function call
		/*if (settings.sW > settings.lW) {
			$thumbDiv.css({width: settings.lW, 
				   height: settings.lH})
		}*/
		// calculate position in the large image
		var dOs = $thumbDiv.offset();
		var leftPan = (e.pageX - dOs.left) * (settings.sW - settings.lW) / (settings.sW+settings.frameWidth*2);
		var topPan = (e.pageY - dOs.top) * (settings.sH - settings.lH) / (settings.sH+settings.frameWidth*2);
		$thisThumb.css({left: leftPan, top: topPan});
		// apply effects to image
		$thisThumb.animate({opacity: ['0.5', 'swing'],
							width: [settings.lW, 'easeOutBounce'],
							height: [settings.lH, 'easeOutBounce'],
							left: [leftPan, 'linear'],
							top: [topPan, 'linear']}, 
							200, 'easeInElastic',
							function() {
								$thisThumb.animate({opacity: '1'}, 
													200, 'easeOutElastic',
													function() {
															$thisThumb.stop()
															// bind pan event handler
															$thisThumb.bind('mousemove', {settings: settings, thumbDiv:$thumbDiv, thisThumb:$thisThumb}, fnPanHandler);
													});
							});
	}); // end $thisThumb.bind("mouseover", function (e) 
			
	$thumbDiv.bind('mouseout', function (e) {
		$thisThumb.stop()
		// unbind pan event handler
		$thumbDiv.unbind('mousemove');
		// restore low res image
		regExp = new RegExp('\\?size=' + settings.lSizeIdx + '&');  // regex pattern string
		newVal = '?size=' + settings.sSizeIdx + '&';
		var loSrc = $thisThumb.attr("src").replace(regExp, newVal);
		$thisThumb.attr('src', loSrc);
		// apply effects on the image
		$thisThumb.animate({ width: [settings.sW, 'swing'],
						     height: [settings.sH, 'swing'],
							 left: [0, 'swing'],
							 top: [0, 'swing'],
							 opacity: '1'
							}, 300, 'easeInElastic');
	}); // end $thisThumb.bind("mouseout", function (e) 
		
} // end function handleThumb

var fnPanHandler = function(e) {
	if (e != 'undefined' && e.data != 'undefined') {
		var settings = e.data.settings;
		var thumbDiv = e.data.thumbDiv;
		var thisThumb = e.data.thisThumb;
		var divWidth = thumbDiv.width();
		var divHeight = thumbDiv.height();
		var igW = thisThumb.width();
		var igH = thisThumb.height();
		var dOs = thumbDiv.offset();
		var leftPan = (e.pageX - dOs.left) * (divWidth - igW) / (divWidth+settings.frameWidth*2);
		var topPan = (e.pageY - dOs.top) * (divHeight - igH) / (divHeight+settings.frameWidth*2);
		thisThumb.css({left: leftPan, top: topPan});	
	}
}