/*
 * Title  :jQuery ScrollPane Plugin
 * Version: 1.0.0 (2010/04/23)
 * Author : Emanuele Tortolone @ FillStudio - http://www.fillstudio.com
 * License: No public license
 */
 
 /*
	Usage Note:
	--------------------------------------
	
	$('#scrollpane_container').ScrollPane(
	{
		fadeInTime:1200,
		centerImage:false,
		hideDragIcon:false,
		movingSpeed:1100
	}
);
*/ 

;(function($) {
	$.fn.ScrollPane = function(attr)
	{
		if(!attr) attr = new Object();
 
		var _fadeInTime = attr.fadeInTime ? attr.fadeInTime : 800;
		var _centerImage = attr.centerImage ? attr.centerImage : true;
		var _hideDragIcon = attr.hideDragIcon ? attr.hideDragIcon : true;
		var _movingSpeed = attr.movingSpeed ? attr.movingSpeed : 1200;
		
		var _containerWidth;
		var _containerHeight;
		var _container;
		var _imageWrapper;
		var _dragIcon;
		var _loadingIcon;
		var _imageToLoad;
		var _image;
		var _counterList = new Array();
		
		this.each(function() {
		     counter = Math.floor(Math.random()*999999);
		     _instance = $(this);
		     init();
			return _instance;
		 });

		
		function init()
		{
			createContainers();
			setDefaultStyle();
			grabImageUrl();
			loadImage();
			initMouseHandlers();
		}
		
		function createContainers()
		{
			_instance.parent().append("<div class='scrollpane_container' id='__scrollPane__"+counter+"'></div>");
			_container = $("#__scrollPane__"+counter);
			_containerWidth = _container.css('width') ? _container.css('width') : 320;
			_containerHeight = _container.css('height') ? _container.css('height') : 240;
			_container.css({
				 'overflow':'hidden'
			 })
			
			_container.append("<div class='scrollpane_image_wrapper' id='w_"+counter+"'></div>");
			_container.append("<div class='scrollpane_drag_icon' id='d_"+counter+"'></div>");
			_container.append("<div class='scrollpane_loading_icon' id='l_"+counter+"'></div>");	
			
			_imageWrapper = $(".scrollpane_image_wrapper",_instance.parent());
			_dragIcon = $(".scrollpane_drag_icon",_instance.parent());
			_loadingIcon = $(".scrollpane_loading_icon",_instance.parent());
		}
		
		function setDefaultStyle()
		{
			_instance.css({
			'position': 'relative',
			'overflow':'hidden'
			});
			
			_loadingIcon.html('<span>Loading...</span>');
			_loadingIcon.css({
			'z-index':'30',
			'position':'absolute'
			});
			
			_dragIcon.html('<span>Scroll this image</span>');
			_dragIcon.css({
			'z-index':'20',
			'position':'absolute',
			'display':'none'
			});
			
			_imageWrapper.css({
				'position':'absolute',
				'left':'0px',
				'top':'0px',
				'z-index':'10'
			});
			
		}
		
		function grabImageUrl()
		{
			_imageToLoad = _instance.attr('src');
			_counterList[_imageToLoad] = counter;
			$('img.scrollpane',_instance.parent()).replaceWith('');
		}
		
		function showLoading()
		{
			_loadingIcon.stop(true, true).fadeIn();
		}
		
		function hideLoading(id)
		{
			icon = _counterList[id];
			$('#l_'+icon).stop(true, true).fadeOut();
		}
		
		function showDragIcon(id)
		{
			drag = _counterList[id];
			$('#d_'+drag).stop(true, true).fadeIn();
		}
		
		function hideDragIcon(id)
		{
			drag = _counterList[id];
			$('#d_'+drag).stop(true, true).fadeOut();
		}

		function loadImage()
		{
			showLoading();
			
			if(_image != null) _image = null;
			_image = new Image();
			$(_image).attr('src', _imageToLoad);
			$(_image).load(onImageLoaded);
		};
		
		function onImageLoaded(e)
		{

			hideLoading($(this).attr('src'));
			showDragIcon($(this).attr('src'));
			initNewImage(this);
			showImage(this);
			if(_centerImage) 
			{
				centerImage(this);
			}
		};
		
		function initNewImage(img)
		{
			imgUrl = $(img).attr('src');
			cont = _counterList[imgUrl];
			$('#w_'+cont).append(img);
			$('#__scrollPane__'+cont).css({
				'height':$(img).height()
			});
		}
		
		function showImage(img)
		{
			$(img).hide();
			$(img).stop(true,true).fadeIn(_fadeInTime, onFadeInComplete);
		};
		
		function centerImage(img)
		{
			code = _counterList[$(img).attr('src')];
			var posX = Math.round(($('#__scrollPane__'+code).width() - $(img).width())/2);
			var posY = Math.round(($('#__scrollPane__'+code).height() - $(img).height())/2);
			$('#w_'+code).css({
				"left":(String(posX)+"px"),
				"top": (String(posY)+"px")
			});
		}
		
		function onFadeInComplete()
		{
			
		}

		function initMouseHandlers()
		{
			_container.bind('mouseenter', onContainerMouseEnter);
			_container.bind('mouseleave', onContainerMouseLeave);
			_container.mousemove(
					function(e)
					{
						controlMouse(e);
					}
			);
		}
		
		function onContainerMouseEnter(event)
		{
			if(_hideDragIcon) hideDragIcon($(event.target).attr('src'));
		}
		
		function onContainerMouseLeave(event)
		{
			if(_hideDragIcon) showDragIcon($(event.target).attr('src'));
		}
		
		function controlMouse(event)
		{
			img = $(event.target);
			
			var relativeCoords = _container.offset();
			var relativeX = event.pageX - relativeCoords.left;
			var relativeY = event.pageY - relativeCoords.top;
			
			var deltaX = Math.round(img.width() - _container.width());
			var endX = (relativeX * (deltaX /  _container.width()));
			
			var deltaY = Math.round(img.height() - _container.height());
			var endY = (relativeY * (deltaY /  _container.height()));
			
			moveImage(String(-1 * getLimitX(endX,img))+'px', String(-1 * getLimitY(endY))+'px',event);
		}
		
		
		function moveImage(endX, endY,event )
		{
			code = _counterList[$(event.target).attr('src')];
			//alert(code);
			
			//	EASING
			//$('#w_'+code).stop(true,false).animate({"left":endX, "top":endY}, _movingSpeed);
			
			//	NO EASING
			$('#w_'+code).css({
				"left":endX, 
				"top":endY
			});
		}
		
		function getLimitX(endX,img)
		{
			var finalX;
			
			if (endX > $(img).width())
			{
				finalX = $(img).width();
			}
			else if (endX < 0)
			{
				finalX = 0;
			}
			
			else
			{
				finalX = endX
			}
				
			return Math.round(finalX);
		}
		
		function getLimitY(endY)
		{
			var finalY;

			if (endY > $(_image).height())
			{
				finalY = $(_image).height();
			}
			else if (endY < 0)
			{
				finalY = 0;
			}
			
			else
			{
				finalY = endY
			}
			
			return Math.round(finalY);
		}
		
		//	END
		
	}
})(jQuery);