// anamate product hot-spots
(function(jQuery) {
	jQuery.fn.hotSpot = function() {
		return jQuery(this).each(function(){
			jQuery(this).attr('title','');
			var strSpotContainerSelector = "span.spot-container";
			var strHandleSelector = "span.handle";
			
			var currRight = jQuery(this).find(strSpotContainerSelector).css('right');
			var currWidth = jQuery(this).find(strSpotContainerSelector).width();
			var currHeight = jQuery(this).find(strSpotContainerSelector).height();
			var currHandleBackgroundPosition;
			//currHandleBackgroundPosition = jQuery(this).find(strSpotContainerSelector).find(strHandleSelector).css("background-position");	//	This is not working for IE.
			currHandleBackgroundPosition = "3px -31px";
			
			var offset = 10;
			var newPos = '-'+(parseInt(jQuery(this).css('right').replace(/\D/g,'')) - parseInt(currRight.replace(/\D/g,''))+offset)+'px';
//alert("currRight = " + currRight + "\ncurrWidth = " + currWidth + "\ncurrHeight = " + currHeight + "\ncurrHandleBackgroundPosition = " + currHandleBackgroundPosition + "\n");
			jQuery(this).bind('mouseenter', function () {
			  jQuery(this).find(strSpotContainerSelector).stop(true,true)
			  .find(strHandleSelector).stop(true,true);
			  jQuery(this).find(strSpotContainerSelector).animate({
				  right: newPos
			  }, { duration: 200, queue: true })
			  .animate({ // pause
				  right: newPos
			  }, { duration: 100, queue: true })
			  .animate({
				  height: '73px'
			  }, { duration: 300, queue: true })
			  .animate({ // pause
				  height: '73px'
			  }, { duration: 200, queue: true })
			  .animate({
				  width: '215px'
			  }, { duration: 500, queue: true })
			  .find(strHandleSelector).animate({
				backgroundPosition: '3px 50%'
			  }, { duration: 500, queue: true })
			  .animate({
				backgroundPosition: '0px 50%',
				opacity: 1
			  }, { duration: 500, queue: true });
			}).bind('mouseleave', function () {
			  jQuery(this).animate({opacity: 1}, { duration: 5000, queue: true }, function(){
				jQuery(this).find(strSpotContainerSelector).stop(true,true)
				 .find(strHandleSelector).stop(true,true);
			  })
			  .find(strSpotContainerSelector).animate({
				  width: '11px'
			  }, { duration: 500, queue: true })
			  .animate({ // pause
				  width: '11px'
			  }, { duration: 200, queue: true })
			  .animate({
				  height: '11px'
			  }, { duration: 300, queue: true })
			  .animate({ // pause
				  height: '11px'
			  }, { duration: 100, queue: true })
			  .animate({
				  right: currRight
			  }, { duration: 200, queue: true })
			  .find(strHandleSelector).animate({  // pause
				opacity: 1
			  }, { duration: 500, queue: true })
			  .animate({
				opacity: 0
			  }, { duration: 500, queue: true })
			  .animate({ // pause
				opacity: 0
			  }, { duration: 500, queue: true })
			  .animate({
				backgroundPosition: currHandleBackgroundPosition
			  }, { duration: 500, queue: true })
			  .animate({
				opacity: 1
			  }, { duration: 500, queue: true });
			  
			  /*.css("background-position", "3px -31px")*/
			  	
//currHandleBackgroundPosition = jQuery(this).find(strSpotContainerSelector).find(strHandleSelector).css("background-position");
//setTimeout("alert('currHandleBackgroundPosition = \"" + currHandleBackgroundPosition + "\"');", 5000);
			});
		});
	}
})(jQuery);