(function(win, $, doc){
	var islteie7 /*@cc_on = (document.documentMode || 7) < 8 @*/,
		cropmask = '<div class="mask_right"></div>';
	cropmask = '<div class="cropmask"><div class="mask_top"></div><div class="mask_middle"><div class="mask_left"></div>' + ( islteie7 ? cropmask : "" ) + '<div class="mask_center"><div class="viewport"><div class="resize resize_n"><div class="point"></div></div><div class="resize resize_e"><div class="point"></div></div><div class="resize resize_s"><div class="point"></div></div><div class="resize resize_w"><div class="point"></div></div><div class="point point_ne"></div><div class="point point_nw"></div><div class="point point_se"></div><div class="point point_sw"></div></div></div>' + ( islteie7 ? "" : cropmask ) + '</div><div class="mask_bottom"></div></div>';

	$.fn.crop = function(onChange, thumb){

		var aera = $("<div>").addClass("cropaera").css("position", "relative"),
			image = $(this).css("margin", "auto"),
			parent = image.parent();

		if(thumb){
			thumb = $(thumb);
			setTimeout(function(){
				thumb.html("");
				thumb.append(image.clone().removeAttr("id").css({
					position: "relative"
				}));
				setThumb();
			}, 300);
		}

		if(parent.hasClass("cropaera")){
			parent.find(".mask_top, .mask_middle, .mask_left, .mask_right").attr("style", "");
			return this;
		}

		aera.insertBefore(image);
		aera.append(image);
		aera.append(cropmask);

		aera.bind("selectstart", function(e){
			e.stopPropagation();
			e.preventDefault();
			return false;
		});

		var drag,
			size,
			maskbox = aera.find(".cropmask");
		mask = {
			bottom: maskbox.find(".mask_bottom"),
			middle: maskbox.find(".mask_middle"),
			viewport: maskbox.find(".viewport"),
			right: maskbox.find(".mask_right"),
			left: maskbox.find(".mask_left"),
			top: maskbox.find(".mask_top"),
			mask: maskbox
		};

		function posint(n){
			return Math.max(n, 0);
		}

		function prec(n){
			return Math.round(n * 100) + "%";
		}

		function getSize(){
			return {
				aeraHeight: mask.mask.height(),
				aeraWidth: mask.mask.width(),
				height: mask.middle.height(),
				width: mask.viewport.width(),
				right: mask.right.width(),
				left: mask.left.width(),
				top: mask.top.height()
			};
		}

		function setThumb(){
			var cropSize = getSize(),
				rx = cropSize.aeraWidth / cropSize.width * thumb.width(),
				ry = cropSize.aeraHeight / cropSize.height * thumb.height();
			$(thumb.children()).css({
				width: rx,
				height: ry,
				left: cropSize.left / cropSize.aeraWidth * -rx,
				top: cropSize.top / cropSize.aeraHeight * -ry
			});
		};

		var setSize = {
			height: function(o) {
				mask.middle.height(Math.min(mask.mask.height() - mask.top.height(), posint(size.height + o.y)));
			},
			right: function(o) {
				mask.right.width(Math.min(mask.mask.width() - mask.left.width(), posint(size.right - o.x)));
			},
			left: function(o) {
				mask.left.width(Math.min(mask.mask.width() - mask.right.width(), posint(size.left + o.x)));
			},
			top: function(o) {
				return posint(size.top + o.y);
			}
		};

		aera.mousedown(function(e) {
			var cursor = $(e.target).css("cursor");
			drag = {
				x: e.pageX,
				y: e.pageY,
				type: cursor.replace(/-resize$/, "")
			};
			size = getSize();
			aera.css("cursor", cursor)
			mask.mask.addClass("ondrag");
		})
		$(document).bind("mouseup blur",function(e) {
			if(drag){
				onChange(getSize());
			}
			aera.css("cursor", "")
			mask.mask.removeClass("ondrag");
			drag = null;
		}).mousemove(function(e) {
			if(drag){
				if(thumb){
					setThumb();
				}
				var type = drag.type,
					offset = {
						x: e.pageX - drag.x,
						y: e.pageY - drag.y
					};
				if(type == "move"){
					if(mask.left.width()){
						setSize.right(offset);
					}
					if(mask.right.width()){
						setSize.left(offset);
					}

					mask.top.height(Math.min(mask.mask.height() - mask.middle.height(), setSize.top(offset)));
				} else {
					if(/n/.test(type)){
						var top = Math.min(mask.bottom.position().top, setSize.top(offset));
						mask.top.height(top);
						mask.middle.height(size.height + size.top - top);
					}
					if(/w/.test(type)){
						setSize.left(offset);
					}
					if(/e/.test(type)){
						setSize.right(offset);
					}
					if(/s/.test(type)){
						setSize.height(offset);
					}
				}
			}
		});
		
		return this;
	};
})(this, this.jQuery, this.document);