function defPosition(event) {
		
		var x = 0;
		var y = 0; 
		if (document.attachEvent != null) {
			x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft; 
			y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop; 
		} 
		if (!document.attachEvent && document.addEventListener) { // Gecko 
			x = event.clientX + window.scrollX; 
			y = event.clientY + window.scrollY; 
		} 
		return {x:x, y:y}; 
	}

function absPosition(obj) {
		var x = 0;
		var y = 0; 
    	while(obj) {
    	    if (obj.style.position !="absolute")
    	    { 
	            x += obj.offsetLeft; 
    	        y += obj.offsetTop; 
    	    }
			obj = obj.offsetParent; 
		} 
		return {x:x, y:y}; 
	}
	
var Croper = {
        // вспомогательные
	X0:0,
	Y0:0,
	// статусы кропера
	cropMoveState:false,
	resizeMoveState:false,
	// геометрия кропа
	cropLeft:0,
	cropTop:0,
	cropLeftR:0,
	cropTopR:0,
	cropWidth:150,
	cropHeight:150,

	resLeft:0,
	resTop:0,
	resLeftR:0,
	resTopR:0,

	// див с кропом
	crop:null,
	// тягаемый уголок
	cropresize:null,
	// кантейнер - бирём извне
	conteiner:null,

	// калбек на изменение
	onResize:null,

	// двиганье кропа
	cropMoveHandler : function(evt){
		if (!this.cropMoveState) return;

		this.cropLeft = this.cropLeft + defPosition(evt).x-this.X0;
		this.X0 = defPosition(evt).x;

		this.cropTop = this.cropTop + defPosition(evt).y-this.Y0;
		this.Y0 = defPosition(evt).y;

		if (this.cropLeft<absPosition(this.srcImage).x) this.cropLeftR = absPosition(this.srcImage).x;
		else if (this.cropLeft>absPosition(this.srcImage).x - this.cropWidth + this.srcImage.clientWidth) this.cropLeftR = absPosition(this.srcImage).x - this.cropWidth + this.srcImage.clientWidth;
		else this.cropLeftR = this.cropLeft;

		if (this.cropTop<absPosition(this.srcImage).y) this.cropTopR = absPosition(this.srcImage).y;
		else if (this.cropTop>absPosition(this.srcImage).y - this.cropHeight + this.srcImage.clientHeight) this.cropTopR = absPosition(this.srcImage).y - this.cropHeight +this.srcImage.clientHeight;
		else this.cropTopR = this.cropTop;

		this.update();
	},
	// изменение размера кропа
	resizeMoveHandler : function(evt){
		if (!this.resizeMoveState) return;
		// вычисляем желаемые размеры
		this.resYblock=false;
		this.resXblock=false;

    	this.resLeft = this.resLeft + defPosition(evt).x-this.X0;
		this.X0 = defPosition(evt).x;

		this.resTop = this.resTop + defPosition(evt).y-this.Y0;
		this.Y0 = defPosition(evt).y;


		if (this.resTop<absPosition(this.crop).y) this.resTopR = absPosition(this.crop).y;
		else if (this.resTop+20>absPosition(this.srcImage).y + this.srcImage.clientHeight) this.resTopR = absPosition(this.srcImage).y + this.srcImage.clientHeight - 20;
		else this.resTopR = this.resTop;


		if (this.resLeft<absPosition(this.crop).x) this.resLeftR = absPosition(this.crop).x;
		else if (this.resLeft+20>absPosition(this.srcImage).x + this.srcImage.clientWidth) this.resLeftR = absPosition(this.srcImage).x + this.srcImage.clientWidth -20;
		else this.resLeftR = this.resLeft;

		this.cropWidth = this.resLeftR - this.cropLeftR + 20;

		this.cropHeight = this.resTopR - this.cropTopR + 20;

		
		if (this.cropWidth > this.cropHeight)  this.cropHeight = this.cropWidth;
			else ;//this.cropWidth = this.cropHeight;

		if (absPosition(this.crop).x + this.cropWidth > absPosition(this.srcImage).x + this.srcImage.clientWidth)
			{this.resXblock = true; this.cropWidth = absPosition(this.srcImage).x + this.srcImage.clientWidth - absPosition(this.crop).x;}

		if (absPosition(this.crop).y + this.cropHeight > absPosition(this.srcImage).y + this.srcImage.clientHeight)
			{this.resYblock = true; this.cropHeight = absPosition(this.srcImage).y + this.srcImage.clientHeight - absPosition(this.crop).y;}

		if ( this.resXblock &&  this.resYblock )
			if (this.cropWidth < this.cropHeight)  ;//this.cropHeight = this.cropWidth;
				else ;//this.cropWidth = this.cropHeight;
		else if (this.resXblock && !this.resYblock );
			//this.cropHeight = this.cropWidth;
		else if (!this.resXblock && this.resYblock );
			//this.cropWidth = this.cropHeight;
		else if (this.cropWidth > this.cropHeight)  this.cropHeight = this.cropWidth;
				else ;//this.cropWidth = this.cropHeight;

		//this.resTopR = absPosition(this.crop).y + this.cropHeight;
		//this.resLeftR = absPosition(this.crop).x + this.cropWidth;                
                /*
		if (absPosition(this.srcImage).x+this.srcImage.clientWidth<=this.resLeftR+1)
			this.cropWidth = this.cropHeight = absPosition(this.srcImage).x+this.srcImage.clientWidth - this.cropLeftR;
		if (absPosition(this.srcImage).y+this.srcImage.clientHeight<=this.resTopR+1)
			this.cropWidth = this.cropHeight = absPosition(this.srcImage).y+this.srcImage.clientHeight - this.cropTopR;
                */
		this.update();
	},
	// обновляем елементы
	update : function(){

		$("#resizeMe").css("left",this.cropLeftR+"px");
		$("#resizeMe").css("top",this.cropTopR+"px");


		$("#resizeMe").width(this.cropWidth);
		$("#resizeMe").height(this.cropHeight);
		$("#resizeMe").css("background-position", "-" + (this.cropLeftR-absPosition(this.srcImage).x)+"px " + "-" + (this.cropTopR-absPosition(this.srcImage).y) + "px")
		if (this.onResize) this.onResize({x:this.cropLeftR - absPosition(this.srcImage).x, y:this.cropTopR - absPosition(this.srcImage).y, width:this.cropWidth, height:this.cropHeight});

	},

	initImage : function(){
		var sw = this.srcImage.width/100*this.ss;
		var sh = this.srcImage.height/100*this.ss;
		
		if (sw>sh) sw=sh;
		
		this.cropLeft = this.cropLeftR = absPosition(this.srcImage).x + (this.srcImage.width-sw)/2;
		this.cropTop = this.cropTopR = absPosition(this.srcImage).y + (this.srcImage.height-sw)/2;

		this.resLeft = this.resLeftR = absPosition(this.srcImage).x + (this.srcImage.width-sw)/2 + sw - 20;
		this.resTop = this.resTopR = absPosition(this.srcImage).y + (this.srcImage.height-sw)/2 + sh - 20;
		
		this.cropHeight = this.resTopR - this.cropTopR + 20;
		this.cropWidth = this.resLeftR - this.cropLeftR + 20;
		this.update();
	},

	init:function(elem,img,onres,ss){
        this.onResize = onres;
		this.ss = ss;
		this.conteiner = $("#"+elem).get(0);
		_this = this;
		$("#"+elem).append("<img id='srcImage' src='" + img +"' onload='_this.initImage();'/>"); //.ready(function() { this.update(); });
		//$("#srcImage").onload(function(){alert(123);});
		$("#"+elem).append("<div id='resizeMe' style='background-position: -100px -72px; background-image: url("+ img +"); left: 20px; top: 120px; width: 20px; height: 20px;'><div id='resizeSE'/></div>");
		this.crop = $("#resizeMe").get(0);
//		$("#resizeMe").css("background-image", img);

        this.cropresize = $("#resizeSE").get(0);
		this.srcImage = $("#srcImage").get(0);
		
		_this = this;
		$("#"+elem).bind("mousemove", function (evt) {
			evt = evt || window.event; 
			_this.cropMoveHandler(evt);
			_this.resizeMoveHandler(evt);
		});
		
		$("#"+elem).bind("mouseup", function () {
			//debugger;
			_this.cropMoveState = false;
			_this.resizeMoveState = false;
			_this.cropLeft = absPosition(_this.crop).x;
			_this.cropTop = absPosition(_this.crop).y;
			_this.resLeft = absPosition(_this.cropresize).x;
			_this.resTop = absPosition(_this.cropresize).y;
		});
		$("#resizeMe").bind("mousedown", function (evt) {
			//debugger;
			if (_this.resizeMoveState) return;
			_this.cropMoveState = true;
			_this.resizeMoveState = false;
			evt = evt || window.event;
			_this.X0 = defPosition(evt).x;
			_this.Y0 = defPosition(evt).y;

		});
		$("#resizeSE").bind("mousedown", function (evt) {
			_this.cropMoveState = false;
			_this.resizeMoveState = true;
			evt = evt || window.event; 
			_this.X0 = defPosition(evt).x;
			_this.Y0 = defPosition(evt).y;

		});
	}
}
	
function CroperStart(cont, file){
	$(document).ready(
		function()
		{       	
			Croper.init(cont, file, function(par){
							$("#cropleft").val(par.x);
							$("#croptop").val(par.y);
							$("#cropwidth").val(par.width);
							$("#cropheight").val(par.height); 
						},65);
		}
	);
}