function ImageCopper(el,option,complete)
{
    this.Target = el;
    this.Init(option);
    if(complete && typeof(complete) == "function")
    {
        this.OnComplete = complete;
    }
}

ImageCopper.prototype = {
    Init : function(option)
    {
        //初始化一些参数
        this.Offset = {x : 0, y : 0};
        this.Draging = this.Moving = false;
        var x = this.GetPosition(this.Target);
        this.Position = {X : x.Left, Y : x.Top};
        this.Size = {Width : this.Target.offsetWidth, Height : this.Target.offsetHeight};
        this.DragElement = null;
        this.DragIndex = 0;
        var opt = this.Option = {Width : 120, Height : 120, Left : 30, Top : 30, Locked : false, LockRate : false, Rate : 0};
     	this._view = null;//预览图片对象
		
		this.intZommScale = 1;
		this.blnZoomFlag = false;
		this.intObjBGWidth=0;
		this.intObjBGHeight=0;
		
	   if(option)
        {
            for(var c in option)
            {
                this.Option[c] = option[c];
            }
        }
        if(!this.Option.Rate && this.Option.LockRate)
        {
            this.Option.Rate = this.Option.Height / this.Option.Width;
        }
        this.Option.Left += this.Position.X;
        this.Option.Top += this.Position.Y;
        
        //创建遮罩层
        var master = this.Master = document.createElement("div");
        master.style.position = "absolute";
        master.style.width = this.Size.Width + "px";
        master.style.height = this.Size.Height + "px";
        master.style.left = x.Left + "px";
        master.style.top = x.Top + "px";
       // master.style.backgroundColor = "#FFFFFF";
        //master.filters[0].Style = 1;
       // master.filters[0].Opacity = 50;
       // master.filters[0].FinishOpacity = 60;
      //  master.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=1,opacity=90,finishOpacity=90);";
        //master.style.opacity = "0.5";
        document.body.appendChild(master);
		
		var p = master.appendChild(document.createElement("div"));
		p.style.position = "absolute";
        p.style.width =  "12px";
        p.style.height = "10px";	
		p.style.textAlign ="center";
		p.style.backgroundColor = "#ff0000";
        p.style.left ="0px";
        p.style.top ="0px";
		p.style.cursor = "hand";
		p.innerHTML = "+";
		p.onclick = this.GetFunction(this, "btn_Plus");
		
		
		
		var m = master.appendChild(document.createElement("div"));
		m.style.position = "absolute";
        m.style.width =  "12px";
        m.style.height = "10px";
		m.style.textAlign ="center";
		m.style.backgroundColor = "#ff0000";
        m.style.left =  "16px";
        m.style.top = "0px";
		m.style.cursor = "hand";
		m.innerHTML="-";
		m.onclick = this.GetFunction(this, "btn_Minus");
	
        //创建拖动显示层.
        var c = this.Content = document.createElement("div");
        c.style.position = "absolute";
        c.style.zIndex = 100;
        c.style.width = opt.Width + "px";
        c.style.height = opt.Height + "px";
        c.style.top = opt.Top + "px";
        c.style.left = opt.Left + "px";
       // c.style.top = x.Top + "px";
        //c.style.left = x.Left + "px";
		c.style.overflow = "hidden";
		//c.style.borderWidth = "1px";
		//c.style.borderStyle = "dotted";		
	    //c.style.borderColor = "red";
	    c.style.backgroundImage = "url(" + this.Target.src + ")";
        c.style.backgroundRepeat = "no-repeat";
        c.style.backgroundPosition = (-(this.Option.Left - this.Position.X) + "px") + " " + (-(this.Option.Top - this.Position.Y) + "px");
        document.body.appendChild(c);
		
	
       // c.style.clip = "rect("+0+"px "+(0+120)+"px "+(0+120)+"px "+0+"px )";
		
		
        //创建拖动大小的div.
        var DragStyle = [
		{top : "0%", left : "0%", marginLeft : "0", marginTop : "0", cursor : "nw-resize"},
		{top : "0%", left : "50%", marginLeft : "-4", marginTop : "0", cursor : "s-resize"},
		{top : "0%", left : "100%", marginLeft : "-8", marginTop : "1", cursor : "sw-resize"},
		{top : "50%", left : "0%", marginLeft : "0", marginTop : "-4", cursor : "w-resize"},
		{top : "50%", left : "100%", marginLeft : "-8", marginTop : "-4", cursor : "w-resize"},
		{top : "100%", left : "0%", marginLeft : "0" , marginTop : "-8", cursor : "sw-resize"},
		{top : "100%", left : "50%", marginLeft : "-4", marginTop : "-8", cursor : "s-resize"},
		{top : "100%", left : "100%", marginLeft : "-8", marginTop : "-8", cursor : "nw-resize"}];
        for(var x = 0; x < DragStyle.length; x++)
        {
            var drag = document.createElement("input");
            drag.style.height = "0px";
            drag.style.width = "0px";
            drag.style.top = DragStyle[x].top;
            drag.style.left = DragStyle[x].left;
            drag.style.position = "absolute";
            drag.style.marginLeft = DragStyle[x].marginLeft + "px";
            drag.style.marginTop = DragStyle[x].marginTop + "px";
            drag.style.border = "solid 1px #888888";
            drag.style.backgroundColor = "#FFFFFF";
            drag.style.cursor = DragStyle[x].cursor;
            drag.onmousedown = this.GetFunctionWithEvent(this, "Drag_Begin",{Element : drag, Index : x + 1});
            drag.onmousemove = this.GetFunctionWithEvent(this, "OnDrag");
            drag.onmouseup = this.GetFunction(this, "Drag_End");
          // c.appendChild(drag);
        }
      	
       
        //创建触发拖动的层
        var d = this.DragDiv = document.createElement("div");
        d.style.left = "0px";
        d.style.top = "0px";
		d.style.zIndex = 200;
		d.style.borderWidth = "1px";
		d.style.borderStyle = "dashed";
        d.style.height = this.Option.Height - 2 + "px";
        d.style.width = this.Option.Width - 2 + "px";
        d.style.position = "absolute";
        d.style.cursor = "move";
				
        c.appendChild(d);
        

		

        d.onmousedown = this.GetFunctionWithEvent(this, "Move_Begin");
        c.onmousemove = this.GetFunctionWithEvent(this, "OnMove");
        c.onmouseup = this.GetFunction(this, "Move_End");
    },
	btn_Plus: function (e)
	{
		
		var intScaleWidth = 0;
		var intScaleHeight = 0;
		
		
		if(!this.blnZoomFlag)
		{
			this.blnZoomFlag = true;
			this.intObjBGWidth = parseInt(this.Target.clientWidth+0);
			this.intObjBGHeight = parseInt(this.Target.clientHeight+0);
		}
	
		this.intZommScale +=0.1
		this.intZommScale = this.intZommScale>=2?2:this.intZommScale;
		
		
		intScaleWidth = (this.intObjBGWidth * this.intZommScale) + "px";
   		intScaleHeight = (this.intObjBGHeight * this.intZommScale) + "px";
		
		
		this.Target.style.width = intScaleWidth;
		this.Target.style.height = intScaleHeight;
		this.OnResize();
		this.Complete();
	},
	btn_Minus: function (e)
	{
		var intScaleWidth = 0;
		var intScaleHeight = 0;
		
		
		if(!this.blnZoomFlag)
		{
			this.blnZoomFlag = true;
			this.intObjBGWidth = parseInt(this.Target.clientWidth+0);
			this.intObjBGHeight = parseInt(this.Target.clientHeight+0);
		}
	
		this.intZommScale -= 0.1;
		this.intZommScale = this.intZommScale<=0.1?0.1:this.intZommScale;
		
		
		intScaleWidth = (this.intObjBGWidth * this.intZommScale) + "px";
   		intScaleHeight = (this.intObjBGHeight * this.intZommScale) + "px";
		
		
		this.Target.style.width = intScaleWidth;
		this.Target.style.height = intScaleHeight;	
		this.OnResize();
		this.Complete();
	},	
	
    Move_Begin : function(e)//拖动位置开始.
    {		
        this.Moving = true;
        var offset = this.GetPosition(this.Content);
        if(offset)
        {
            this.Offset.x = (e ? e.pageX : event.clientX + document.body.scrollLeft) - offset.Left;
            this.Offset.y = (e ? e.pageY : event.clientY + document.body.scrollTop) - offset.Top;
        }
        if(this.Content.setCapture)
        {
            this.Content.setCapture();
        }
        else
        {
            this.Content.onmouseout = this.GetFunction(this, "Move_End");
        }
    },
    OnMove : function(e)//拖动改变显示层位置.
    {
        if(!this.Moving)
        {
            return;
        }
        var NewX = (e ? e.pageX : event.clientX + document.body.scrollLeft) - this.Offset.x;
        var NewY = (e ? e.pageY : event.clientY + document.body.scrollTop) - this.Offset.y;
        var x = this.Position.X, y = this.Position.Y, h = this.Size.Height, w = this.Size.Width;
        NewX = NewX > (w + x - this.Option.Width) ? (w + x - this.Option.Width) : NewX;
        NewY = NewY > (h + y - this.Option.Height) ? (h + y - this.Option.Height) : NewY;
        NewX = NewX < x ? x : NewX;
        NewY = NewY < y ? y : NewY;
        this.Option.Left = NewX;
        this.Option.Top = NewY;
        this.OnResize();
    },
    Move_End : function()//拖动位置结束.
    {
        if(!this.Moving)
        {
            return;
        }
        this.Moving = false;
        if(this.Content.releaseCapture)
        {
            this.Content.releaseCapture();
        }
        this.Complete();
    },
    
    Drag_Begin : function(e,param)//拖动尺寸开始,初始化一些数据.
    {
        if(this.Option.Locked)
        {
            return;
        }
        this.Draging = true;
        this.DragElement = param.Element;
        this.DragIndex = param.Index;
        var offset = this.GetPosition(this.DragElement);
        if(offset)
        {
            this.Offset.x = (e ? e.pageX : event.clientX + document.body.scrollLeft) - offset.Left;
            this.Offset.y = (e ? e.pageY : event.clientY + document.body.scrollTop) - offset.Top;
        }
        if(this.DragElement.setCapture)
        {
            this.DragElement.setCapture();
        }
        else
        {
            this.DragElement.onmouseout = this.GetFunction(this, "Drag_End");
        }
    },
    Drag_End : function()//拖动尺寸结束.
    {
        if(!this.Draging)
        {
            return;
        }
        this.Draging = false;
        if(this.DragElement.releaseCapture)
        {
            this.DragElement.releaseCapture();
        }
        this.Complete();
    },
    OnResize : function()//设置拖动时产生的尺寸和位置到dom元素上.
    {
        this.Content.style.left = this.Option.Left + "px";
        this.Content.style.top = this.Option.Top + "px";
        this.Content.style.width = this.Option.Width + "px";
        this.Content.style.height = this.Option.Height + "px";
        this.DragDiv.style.width = this.Option.Width - 2 + "px";
        this.DragDiv.style.height = this.Option.Height - 2 + "px";
		
	    
		//window.status=this.DragDiv.style.left +" | "+ this.DragDiv.style.width +"|" +this.Option.Left +"|" + this.Position.X;
		
		//this.DragDiv.style.clip = "rect("+(this.Option.Top-this.Position.Y)+"px "+(this.Option.Left - this.Position.X+120)+"px "+(this.Option.Top-this.Position.Y+120)+"px "+(this.Option.Left - this.Position.X)+"px )";
		if(this.intZommScale!=1)
		{ 
		    if(this.Content.style.backgroundImage != "url(cut.gif)")
		    {
			    this.Master.style.filter = "alpha(opacity=10)";
			    this.Content.style.backgroundImage = "url(/friends/set/cut.gif)";
			}
		}
		else
		{
			this.Master.style.filter = "alpha(opacity=20)";
			if(this.Content.style.backgroundImage != "url(" + this.Target.src + ")")
			{
			    this.Content.style.backgroundImage = "url(" + this.Target.src + ")";			   
			}
			this.Content.style.backgroundPosition = (-(this.Option.Left - this.Position.X) + "px") + " " + (-(this.Option.Top - this.Position.Y) + "px");
		}
		
       //window.status = this.Content.style.backgroundImage;
    },
    OnDrag : function(e)//拖动改变显示层尺寸.
    {
		
        if(!this.Draging || this.Option.Locked)
        {
            return;
        }
        switch(this.DragIndex)
        {
            case 1:
            {
                var Original = this.GetPosition(this.DragElement);
                var NewPoint = {Left : (e ? e.pageX : event.clientX + document.body.scrollLeft), Top : (e ? e.pageY : event.clientY + document.body.scrollTop)};
                var StepX = Original.Left - NewPoint.Left + this.Offset.x;
                var StepY = Original.Top - NewPoint.Top + this.Offset.y;
                if(this.Option.LockRate)
                {
                    StepY = (this.Option.Width + StepX) * this.Option.Rate - this.Option.Height;
                }
                if(this.Option.Left - StepX < this.Position.X || this.Option.Top - StepY < this.Position.Y || this.Option.Width + StepX < 40 || this.Option.Height + StepY < 40)
                {
                    return;
                }
                this.Option.Left -= StepX;
                this.Option.Top -= StepY;
                this.Option.Width += StepX;
                this.Option.Height += StepY;
                this.OnResize();
                break;
            }
            case 2:
            {
                var Original = this.GetPosition(this.DragElement);
                var NewPoint = {Left : (e ? e.pageX : event.clientX + document.body.scrollLeft), Top : (e ? e.pageY : event.clientY + document.body.scrollTop)};
                var StepY = Original.Top - NewPoint.Top + this.Offset.y;
                if(this.Option.Top - StepY < this.Position.Y)
                {
                    return;
                }
                if(this.Option.LockRate)
                {
                    var StepX = this.Option.Height / this.Option.Rate - this.Option.Width;
                    if(this.Option.Left - StepX / 2 < this.Position.X || this.Option.Left + StepX / 2 + this.Option.Width > this.Position.X + this.Size.Width || this.Option.Width + StepX < 40)
                    {
                        return;
                    }
                    this.Option.Width += StepX;
                    this.Option.Left -= StepX / 2;
                }
                if(this.Option.Height + StepY < 40)
                {
                    return;
                }
                this.Option.Top -= StepY;
                this.Option.Height += StepY;
                this.OnResize();
                break;
            }
            case 3:
            {
                var Original = this.GetPosition(this.DragElement);
                var NewPoint = {Left : (e ? e.pageX : event.clientX + document.body.scrollLeft), Top : (e ? e.pageY : event.clientY + document.body.scrollTop)};
                var StepY = Original.Top - NewPoint.Top + this.Offset.y;
                var StepX = NewPoint.Left - Original.Left - this.Offset.x;
                if(this.Option.Top - StepY < this.Position.Y)
                {
                    return;
                }
                if(this.Option.LockRate)
                {
                    StepX = (this.Option.Height + StepY) / this.Option.Rate - this.Option.Width;
                }
                if(this.Option.Left + StepX + this.Option.Width > this.Position.X + this.Size.Width || this.Option.Width + StepX < 40 || this.Option.Height + StepY < 40)
                {
                    return;
                }
                this.Option.Width += StepX;
                this.Option.Top -= StepY;
                this.Option.Height += StepY;
                this.OnResize();
                break;
            }
            case 4:
            {
                var Original = this.GetPosition(this.DragElement);
                var NewPoint = {Left : (e ? e.pageX : event.clientX + document.body.scrollLeft), Top : (e ? e.pageY : event.clientY + document.body.scrollTop)};
                var StepX = Original.Left - NewPoint.Left + this.Offset.x;
                if(this.Option.Left - StepX < this.Position.X)
                {
                    return;
                }
                if(this.Option.LockRate)
                {
                    var StepY = this.Option.Width * this.Option.Rate - this.Option.Height;
                    if(this.Option.Top - StepY / 2 < this.Position.Y || this.Option.Height + this.Option.Top - StepY / 2 > this.Size.Height + this.Position.Y || this.Option.Height + StepY < 40)
                    {
                        return;
                    }
                    this.Option.Height += StepY;
                    this.Option.Top -= StepY / 2;
                }
                if( this.Option.Width + StepX < 40)
                {
                    return;
                }
                this.Option.Left -= StepX;
                this.Option.Width += StepX;
                this.OnResize();
                break;
            }
            case 5:
            {
                var Original = this.GetPosition(this.DragElement);
                var NewPoint = {Left : (e ? e.pageX : event.clientX + document.body.scrollLeft), Top : (e ? e.pageY : event.clientY + document.body.scrollTop)};
                var StepX = NewPoint.Left - Original.Left - this.Offset.x;
                if(this.Option.Left + this.Option.Width + StepX > this.Position.X + this.Size.Width)
                {
                    return;
                }
                if(this.Option.LockRate)
                {
                    var StepY = (this.Option.Width + StepX) * this.Option.Rate - this.Option.Height;
                    if(this.Option.Top - StepY / 2 < this.Position.Y || this.Option.Height + this.Option.Top + StepY / 2 > this.Position.Y + this.Size.Height || this.Option.Height + StepY < 40)
                    {
                        return;
                    }
                    this.Option.Height += StepY;
                    this.Option.Top -= StepY / 2;
                }
                if( this.Option.Width + StepX < 40)
                {
                    return;
                }
                this.Option.Width += StepX;
                this.OnResize();
                break;
            }
            case 6:
            {
                var Original = this.GetPosition(this.DragElement);
                var NewPoint = {Left : (e ? e.pageX : event.clientX + document.body.scrollLeft), Top : (e ? e.pageY : event.clientY + document.body.scrollTop)};
                var StepX = Original.Left - NewPoint.Left + this.Offset.x;
                var StepY = NewPoint.Top - Original.Top - this.Offset.y;
                if(this.Option.LockRate)
                {
                    StepY = (this.Option.Width + StepX) * this.Option.Rate - this.Option.Height;
                }
                if(this.Option.Left - StepX < this.Position.X || this.Option.Top + StepY + this.Option.Height > this.Position.Y + this.Size.Height || this.Option.Width + StepX < 40 || this.Option.Height + StepY < 40)
                {
                    return;
                }
                this.Option.Left -= StepX;
                this.Option.Width += StepX;
                this.Option.Height += StepY;
                this.OnResize();
                break;
            }
            case 7:
            {
                var Original = this.GetPosition(this.DragElement);
                var NewPoint = {Left : (e ? e.pageX : event.clientX + document.body.scrollLeft), Top : (e ? e.pageY : event.clientY + document.body.scrollTop)};
                var StepY = NewPoint.Top - Original.Top - this.Offset.y;
                if(this.Option.Top + StepY + this.Option.Height > this.Position.Y + this.Size.Height)
                {
                    return;
                }
                if(this.Option.LockRate)
                {
                    var StepX = (this.Option.Height + StepY) / this.Option.Rate - this.Option.Width;
                    if(this.Option.Left - StepX / 2 < this.Position.X || this.Option.Left + StepX + this.Option.Width > this.Position.X + this.Size.Width || this.Option.Width + StepX < 40)
                    {
                        return;
                    }
                    this.Option.Width += StepX;
                    this.Option.Left -= StepX / 2;
                }
                if(this.Option.Height + StepY < 40)
                {
                    return;
                }
                this.Option.Height += StepY;
                this.OnResize();
                break;
            }
            case 8:
            {
                var Original = this.GetPosition(this.DragElement);
                var NewPoint = {Left : (e ? e.pageX : event.clientX + document.body.scrollLeft), Top : (e ? e.pageY : event.clientY + document.body.scrollTop)};
                var StepX = NewPoint.Left - Original.Left - this.Offset.x;
                var StepY = NewPoint.Top - Original.Top - this.Offset.y;
                if(this.Option.LockRate)
                {
                    StepY = (this.Option.Width + StepX) * this.Option.Rate - this.Option.Height;
                }
                if(this.Option.Left + StepX + this.Option.Width > this.Position.X + this.Size.Width || this.Option.Top + StepY + this.Option.Height > this.Position.Y + this.Size.Height || this.Option.Width + StepX < 40 || this.Option.Height + StepY < 40)
                {
                    return;
                }
                this.Option.Width += StepX;
                this.Option.Height += StepY;
                this.OnResize();
                break;
            }
        }
    },
    GetPosition : function(el)//取得指定元素的绝对位置.
    {
        var result = {Top : 0, Left : 0};
        result.Left = el.offsetLeft;
        result.Top = el.offsetTop;
        while(el = el.offsetParent)
        {
            result.Top += el.offsetTop;
            result.Left += el.offsetLeft;
        }
        return result;
    },
    GetFunction : function(Variable, Method, Parameter)//取得指定对象的指定方法
    {
        return function()
        {
            if(Method.indexOf("|") > -1)
            {
                var MethodArray = Method.split("|");
                for(var x = 0; x < MethodArray.length; x++)
                {
                    Variable[MethodArray[x]](Parameter);
                }
            }
            else
            {
                Variable[Method](Parameter);
            }
        }
    },
    GetFunctionWithEvent : function(Variable, Method, Parameter)//取得指定对象的指定方法,并传递Window.Event事件参数.
    {
        return function(e)
        {
            if(Method.indexOf("|") > -1)
            {
                var MethodArray = Method.split("|");
                for(var x = 0; x < MethodArray.length; x++)
                {
                    Variable[MethodArray[x]](e, Parameter);
                }
            }
            else
            {
                Variable[Method](e, Parameter);
            }
        }
    },
    Complete : function()
    {
        //触发拖动完成的事件,传出当前的状态数据.
		
        this.OnComplete(this.Option.Left - this.Position.X,this.Option.Top - this.Position.Y,this.Option.Width,this.Option.Height,this.intZommScale);
    },
    OnComplete : function(Left, Top, Width, Height)
    {
        //接收当前状态数据的方法.
    }
}