function getXY(obj){
	var ret={x:obj.offsetLeft,y:obj.offsetTop,w:obj.offsetWidth,h:obj.offsetHeight}
	while(obj=obj.offsetParent){
		ret.x+=obj.offsetLeft
		ret.y+=obj.offsetTop
	}
	return ret
}

var xdragobj = null
function xdragstart(obj, e) {
	xdragobj = obj
	if (xdragobj.dragstart) {
		xdragobj.cnt = 0
		var state={x:e.x||e.clientX,y:e.y||e.clientY}
		var objpos=getXY(xdragobj)
		xdragobj.dragcorectTL = {x: objpos.x - state.x, y: objpos.y - state.y}
		xdragobj.dragcorectRB = {x: objpos.x + objpos.w - state.x, y: objpos.y + objpos.h - state.y}
		xdragobj.dragstart(state)
	}
	document.body.onmousemove=function(e){
		if(xdragobj){
			xdragobj.cnt ++
			if (xdragobj.drag) {
				var e=e||event
				var state={x:e.x||e.clientX,y:e.y||e.clientY}
				xdragobj.drag(state)
			}
			this.obj=null
		}
	}
	document.body.onmouseup=function(e){
		document.body.onmouseup=function(){}
		document.body.onmousemove=function(){}
		document.body.ondragstart=function(){}
		document.body.onselectstart=function(){}
		document.body.ondragend=function(){}
		document.body.ondrag=function(){}
		if(xdragobj){
			status = xdragobj.cnt
			if (xdragobj.dragend) {
				var e=e||event
				var state={x:e.x||e.clientX,y:e.y||e.clientY}
				xdragobj.dragend(state)
			}
			xdragobj=null
		}
	}
	document.body.ondragstart=function(){return false}
	document.body.onselectstart=function(){return false}
	document.body.ondragend=document.body.onmouseup
	document.body.ondrag=document.body.onmousemove
}

var crop={
	nc1:{'w':8,'h':8},
	nc2:{'w':8,'h':8},
	active:false,
	draged:null,
	na:null,
	ncell:[3,6,9,12,1,2,4,8]
}
function getCrop() {
	getNa()
	return {
		x1 : crop.nc1.w - 8,
		y1 : crop.nc1.h - 8,
		x2 : crop.na.w - 16 - (crop.nc2.w - 8),
		y2 : crop.na.h - 16 - (crop.nc2.h - 8)
	}
}
var grid={
	active:false,
	obj:null
}
function getNa(){
	var o=mainpic
	crop.na={'l':o.offsetLeft-8 + (o.clientLeft||0),'t':o.offsetTop-8 + (o.clientTop||0),'w':o.offsetWidth+16,'h':o.offsetHeight+16}
	while(o=o.offsetParent){
		crop.na.l += o.offsetLeft + (o.tagName != 'BODY' && o.clientLeft||0)
		crop.na.t += o.offsetTop + (o.tagName != 'BODY' && o.clientTop||0)
	}
}
function reposition(){
	getNa()
	for(var i=0;i<crop.ncell.length;i++){
		document.getElementById('t'+crop.ncell[i]).pos(crop.ncell[i])
	}
	grid.obj.pos()
}

function turnCrop(){
	crop.active=!crop.active
	reposition()
	return crop.active
}

function waitObj(id,evFunc){
	var obj=document.getElementById(id)
	if(obj)window[evFunc]()
	else setTimeout("waitObj('"+id+"','"+evFunc+"')",100)
}

if(document.getElementById){
	waitObj('mainpic','init')
}else{
	onload=init
}

var mainpic
function init(){
	mainpic=document.getElementById('mainpic')
	window.onresize=function(){reposition()}
	prepareGrid()
	prepareCrop()
}
function prepareGrid(){
	grid.obj=document.createElement('DIV')
	grid.obj.id = 'grid'
	grid.obj.style.display=crop.active?'':'none'
	grid.obj.style.position='absolute'
	grid.obj.innerHTML='&nbsp;'
	grid.obj.pos=function(){
		if (crop.active) {
			this.style.display='block'
			this.style.left=crop.na.l+crop.nc1.w
			this.style.top=crop.na.t+crop.nc1.h
			this.style.width=crop.na.w-(crop.nc1.w+crop.nc2.w)
			this.style.height=crop.na.h-(crop.nc1.h+crop.nc2.h)
		} else {
			this.style.display='none'
		}
	}
	grid.obj.onmousedown = function(e) {
		xdragstart(this, e||event)
		return false
	}
	grid.obj.dragstart = function(state) {
	}
	grid.obj.drag = function(state) {
		status = (state.x+this.dragcorectTL.x-crop.na.l) + '/' + (state.y+this.dragcorectTL.y-crop.na.t)
		crop.nc1.h=(state.y+this.dragcorectTL.y-crop.na.t).between(8,crop.na.h-crop.nc2.h-8)
		crop.nc2.h=(crop.na.t+crop.na.h-(state.y+this.dragcorectRB.y)).between(8,crop.na.h-crop.nc1.h-8)
		crop.nc1.w=(state.x+this.dragcorectTL.x-crop.na.l).between(8,crop.na.w-crop.nc2.w-8)
		crop.nc2.w=(crop.na.l+crop.na.w-(state.x+this.dragcorectRB.x)).between(8,crop.na.w-crop.nc1.w-8)
		reposition()
	}
	grid.obj.dragend = function(state) {
	}

	document.body.appendChild(grid.obj)
}
function prepareCrop(){ //Создать полупрозрачные слои
	for(var i=0;i<crop.ncell.length;i++){
		var dg=crop.ncell[i]
		var t=document.createElement('table')
		t.cellSpacing=t.cellPadding=0
		t.id='t'+dg
		t.className='matt'
		t.pos=function(dg){
			if(crop.active){
				this.style.display=''
				this.style.left=(dg&2)?crop.na.l:(dg&8)?crop.na.l+crop.na.w-crop.nc2.w:crop.na.l+crop.nc1.w
				this.style.top=(dg&1)?crop.na.t:(dg&4)?crop.na.t+crop.na.h-crop.nc2.h:crop.na.t+crop.nc1.h
				this.style.width=(dg&2)?crop.nc1.w:(dg&8)?crop.nc2.w:crop.na.w-crop.nc1.w-crop.nc2.w
				this.style.height=(dg&1)?crop.nc1.h:(dg&4)?crop.nc2.h:crop.na.h-crop.nc1.h-crop.nc2.h
			}else{
				this.style.display='none'
			}
		}
		var c=t.insertRow(0).insertCell(0)
		c.style.textAlign=(dg&2)?'right':(dg&8)?'left':'center'
		c.style.verticalAlign=(dg&1)?'bottom':(dg&4)?'top':'middle'
		c.appendChild(createMarker(dg))
		document.body.appendChild(t)
	}
	reposition()
}
function createMarker(side){
	var m=document.createElement('img')
	m.side=side
	m.className = 'marker'
//	m.onmousedown=function(){crop.draged=this}
	m.height=m.width=8
	m.src='images/crop.gif'

	m.onmousedown = function(e) {
		xdragstart(this, e||event)
		return false
	}
	m.dragstart = function(state) {
	}
	m.drag = function(state) {
		var side=this.side
		if(side&1) crop.nc1.h=(state.y-crop.na.t).between(8,crop.na.h-crop.nc2.h-8)
		if(side&4) crop.nc2.h=(crop.na.t+crop.na.h-state.y).between(8,crop.na.h-crop.nc1.h-8)
		if(side&2) crop.nc1.w=(state.x-crop.na.l).between(8,crop.na.w-crop.nc2.w-8)
		if(side&8) crop.nc2.w=(crop.na.l+crop.na.w-state.x).between(8,crop.na.w-crop.nc1.w-8)
		reposition()
	}
	m.dragend = function(state) {
	}

	return m
}
Number.prototype.between=function(vmin,vmax){
	try{
		return (this<vmin ? vmin : (this>vmax ? vmax : this))
	}catch(e){return this}
}