jQueryJCropTec.js

/*!
* @author Gustavo Carmo
*/
(function ($) {
	
	var finalInfo = {};

	$.fn.jCropTec = function(options)
	{	
		var $this = $(this);

		if (options == 'info') {
			return finalInfo;
		}

		options = $.extend({
			width: 582.984,
			height: 472,
			zoomLevel: 20
		}, options)

		var init = function()
		{
			setSize();
			
			finalInfo = {
				left: 0,
				top: 0,
				width: $this.width(),
				height: $this.height(),
				originalWidth: $this.find('img').width(),
				originalHeight: $this.find('img').height()
			}

			makeZoom();
			makeDraggable();
		}

		var setSize = function()
		{
			$this.css({
				width: options.width,
				height: options.height,
				position: 'relative',
				overflow: 'hidden'
			}).find('img').css({
				position: 'absolute'
			})
		}

		var fixPosition = function(ui)
		{
			var position = (typeof(ui.helper) == 'undefined') ? ui.position() : ui.position;

			if (position.left >= 0) {
				position.left = 0;
			}

			if (position.top >= 0) {
				position.top = 0;
			}

			var maxHorizontal = 0;
			var maxVertical = 0;

			if (typeof(ui.helper) == 'undefined') {

				maxHorizontal = ui.width() - ui.parent().width();
				maxVertical = ui.height() - ui.parent().height();
			} else {

				maxHorizontal = ui.helper.width() - ui.helper.parent().width();
				maxVertical = ui.helper.height() - ui.helper.parent().height();
			}

			if (maxHorizontal <= (-position.left)) {
				if (typeof(ui.helper) == 'undefined') {
					ui.css({left: - maxHorizontal});
				} else {
					ui.position.left = - maxHorizontal;
				}
			}


			if (maxVertical <= (-position.top)) {
				if (typeof(ui.helper) == 'undefined') {
					ui.css({top: - maxVertical});
				} else {
					ui.position.top = - maxVertical;
				}
			}

			finalInfo.left = position.left;
			finalInfo.top = position.top;
			finalInfo.width = $this.width();
			finalInfo.height = $this.height();

			if (typeof(ui.helper) == 'undefined') {
				finalInfo.originalWidth = ui.width();
				finalInfo.originalHeight = ui.height();
			} else {
				finalInfo.originalWidth = ui.helper.width();
				finalInfo.originalHeight = ui.helper.height();
			}
		}

		var makeZoom = function()
		{
			var w = false;

			$this.bind('mousewheel', function(e,ui)
			{
				e.preventDefault();

				var $img = $(this).find('img');

				if (!w) {
					w = $img.prop('naturalWidth');
				}
				
				var imgLeft = parseFloat($img.css('left').replace('px'));
			    var imgTop = parseFloat($img.css('top').replace('px'));

				if (e.originalEvent.wheelDelta > 0) {
			        w += options.zoomLevel;
		        } else {
		            if ($img.outerHeight() - options.zoomLevel >= $(this).outerHeight() && $img.outerWidth() - options.zoomLevel >= $(this).outerWidth()) {
			            w -= options.zoomLevel;
			        }
		        }

		        $img.css({
		        	width: w
		        })

		        fixPosition($img);

			})
		}

		var makeDraggable = function()
		{
			$this.find('img').draggable({
				drag: function(event, ui) {
        			
        			$(this).css({
        				cursor: 'move'
        			})
        			fixPosition(ui);
			    },
			    stop: function()
			    {
			    	$(this).css({
			    		cursor: 'default'
			    	})
			    }
			})
		}

		init();

		return $this;

	}

})(jQuery);