var blocksize = 4;
var resizeobj = null;
var newwidth = 0;
var newheight = 0;
var i = 0;
var zindex = 0;
var ie = document.all;
var divdrag = null;
var divselect = null;
var proportion = 1;
var draggable = null;
var exec_save_drag = '';


function mouseout(ev, obj)
{
	if(ie)
		ev = event;

	resizeup(ev);
	divdrag = null;

	return true;
}

// Returns the coordenates of mouse
function mouseCoords(ev)
{
	if(ev.pageX || ev.pageY)
			return {x:ev.pageX, y:ev.pageY};
	
	return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,  y:ev.clientY + document.body.scrollTop  - document.body.clientTop };
}

function mouseover(ev)
{
	if(ie)
		ev = event;

	if(resizeobj!=null)
		resizemove(ev);
	else if(divdrag!=null && divdrag.drag==1 && divdrag.move==1)
		{
			divdrag.style.top = divdrag.oldTop + ( ev.screenY - divdrag.Y );
			divdrag.style.left = divdrag.oldLeft + ( ev.screenX - divdrag.X);
		}

	return false;
}
function mousedown( ev )
{
	if(ie)
		ev = event;

	//If clicking out of divdrag, clean Sides
	if(divdrag==null)
	{
		for(var j=0; j<i; j++)
			if($('drag'+j)!=null)
			{
				removeCorner( $('drag'+j) );
				divselect = null;
			}

		if(draggable==null)
			eraseDocument();
	}
	return true;
}

function eraseDocument()
{
	document.body.onmousemove = null;
	document.body.onmouseup = null;
	document.body.onmousedown = null;
	if(ie)
	{
		document.body.onkeydown = null;
		document.body.onkeyup = null;
	}
	else
	{
		document.onkeydown = null;
		document.onkeyup = null;
	}
}
function appendDocument()
{
	document.body.onmousemove = mouseover;
	document.body.onmouseup = mouseout;
	document.body.onmousedown = mousedown;
	if(ie)
	{
		document.body.onkeydown = keydown;
		document.body.onkeyup = keyup;
	}
	else
	{
		document.onkeydown = keydown;
		document.onkeyup = keyup;
	}
}

function dragClick(ev, obj)
{
	if(ie)
		ev = event;

	//if clicking into divdrag
	if(obj!=null)
		if(obj.drag==1)
		{
			obj.X = ev.screenX;
			obj.Y = ev.screenY;
			obj.oldLeft = obj.offsetLeft;
			obj.oldTop = obj.offsetTop;
			obj.move = 1;

			zindex++;
			obj.style.zIndex = zindex;

			cleanSides( obj );
			createCorner( obj );
			divdrag = obj;
			divselect = obj;
			
			stopDrag( ev );
			appendDocument();

			if(exec_save_drag>'')
				eval(exec_save_drag);
		}
}
function resizedown(ev)
{
	if(ie)
	{
		ev = event;
		obj= ev.srcElement;	
	}
	else
		obj= ev.target;

	obj.X =  ev.screenX;
	obj.Y =  ev.screenY 
	obj.action = 1;

	resizeobj = obj;
}
function resizeup(ev)
{
	if(ie)
	{
		ev = event;
		obj= ev.srcElement;	
	}
	else
		obj= ev.target;

	obj.action = 0;
	if(resizeobj!=null)
	{
		resizeobj.parentNode.style.top = $('divborder').offsetTop;
		resizeobj.parentNode.style.left = $('divborder').offsetLeft;
		resizeobj.parentNode.style.height = $('divborder').clientHeight;
		resizeobj.parentNode.style.width = $('divborder').clientWidth;

		relocate(resizeobj.parentNode); 
		if($('divborder')!=null)
			$('divborder').parentNode.removeChild($('divborder'));
	}

	divdrag = null;
	resizeobj = null;
	
	if(exec_save_drag>'')
		eval(exec_save_drag);
}
function resizemove(ev)
{
	 if(ie)
		ev = event;

	if(divdrag==null)
	{
		resizeup(ev);
		return;
	}

	if(resizeobj!=null)
		if(resizeobj.action)
		{ 
			//IF NOT EXISTS, CREATE DIVBORDER
			if($('divborder')==null)
			{
				div = ce('DIV');
				div.id= 'divborder';
				div.className = 'divborder';
				div.style.zIndex = zindex;
				resizeobj.parentNode.parentNode.appendChild(div);

				divselect = resizeobj.parentNode;
			}

			//MOVING CORNERS
			if( resizeobj.locate == 'top_left' )
			{
				newwidth =  resizeobj.X - ev.screenX;
				newheight = resizeobj.Y - ev.screenY;

				if(proportion)
				{
					newwidth = (newwidth+newheight)/2;
					newheight = newwidth*resizeobj.parentNode.clientHeight/resizeobj.parentNode.clientWidth;
				}
				
				resizeobj.style.top = - blocksize - newheight;
				resizeobj.style.left = -blocksize - newwidth;
			}
			else if( resizeobj.locate == 'top_right' )
			{
				newwidth =  -(resizeobj.X - ev.screenX);
				newheight = resizeobj.Y - ev.screenY;

				if(proportion)
				{
					newwidth = (newwidth+newheight)/2;
					newheight = newwidth*resizeobj.parentNode.clientHeight/resizeobj.parentNode.clientWidth;
				}
				
				resizeobj.style.top = -blocksize - newheight;
				resizeobj.style.left = resizeobj.parentNode.clientWidth-blocksize + newwidth;
			}
			else if( resizeobj.locate == 'bottom_left' )
			{
				newwidth =  resizeobj.X - ev.screenX;
				newheight = - (resizeobj.Y - ev.screenY);

				if(proportion)
				{
					newwidth = (newwidth+newheight)/2;
					newheight = newwidth*resizeobj.parentNode.clientHeight/resizeobj.parentNode.clientWidth;
				}

				resizeobj.style.top = resizeobj.parentNode.clientHeight-blocksize + newheight;
				resizeobj.style.left = -blocksize - newwidth;
			}
			else if( resizeobj.locate == 'bottom_right' )
			{
				newwidth =  - (resizeobj.X - ev.screenX);
				newheight = - (resizeobj.Y - ev.screenY);

				if(proportion)
				{
					newwidth = (newwidth+newheight)/2;
					newheight = newwidth*resizeobj.parentNode.clientHeight/resizeobj.parentNode.clientWidth;
				}
				
				resizeobj.style.top = resizeobj.parentNode.clientHeight-blocksize + newheight;
				resizeobj.style.left = resizeobj.parentNode.clientWidth-blocksize + newwidth;
			}
	
			//RESIZING DIVBORDER
			$('divborder').style.top = resizeobj.parentNode.offsetTop+ 'px';
			$('divborder').style.left = resizeobj.parentNode.offsetLeft+ 'px';
			if(resizeobj.locate=='top_right' || resizeobj.locate=='top_left')
			{
				$('divborder').style.top = resizeobj.parentNode.offsetTop - newheight+ 'px';
			}
			if(resizeobj.locate=='bottom_left' || resizeobj.locate=='top_left')
			{
				$('divborder').style.left = resizeobj.parentNode.offsetLeft - newwidth+ 'px';
			}  

			if(resizeobj.parentNode.clientWidth + newwidth-blocksize>0)
				$('divborder').style.width = resizeobj.parentNode.clientWidth + newwidth+'px';
			if(resizeobj.parentNode.clientHeight + newheight-blocksize>0)
				$('divborder').style.height = resizeobj.parentNode.clientHeight + newheight +'px';
		
			if(resizeobj.parentNode.clientWidth + newwidth < 0)
			{
				$('divborder').style.width = - newwidth - resizeobj.parentNode.clientWidth+ 'px';
				$('divborder').style.left = $('divborder').offsetLeft - $('divborder').clientWidth+ 'px';
			}

			if(resizeobj.parentNode.clientHeight + newheight < 0)
			{
				$('divborder').style.height = - newheight - resizeobj.parentNode.clientHeight+ 'px';
				$('divborder').style.top = $('divborder').offsetTop - $('divborder').clientHeight+ 'px';
			}  
		

			// RE-LOCATE CORNERS WHEN RESIZE
			obj_id = resizeobj.parentNode.id;
			if($(obj_id+'_bottom_right')!=null)
			{
				$(obj_id+'_bottom_right').style.top =  $('divborder').offsetTop - resizeobj.parentNode.offsetTop + $('divborder').clientHeight - (blocksize/2) + 'px';
				$(obj_id+'_bottom_right').style.left =  $('divborder').offsetLeft - resizeobj.parentNode.offsetLeft + $('divborder').clientWidth - (blocksize/2) + 'px';
			}
			if($(obj_id+'_bottom_left')!=null)
			{
				$(obj_id+'_bottom_left').style.top = $('divborder').offsetTop - resizeobj.parentNode.offsetTop + $('divborder').clientHeight + 'px';
				$(obj_id+'_bottom_left').style.left =  $('divborder').offsetLeft - resizeobj.parentNode.offsetLeft - blocksize+'px';
			}
			if($(obj_id+'_top_right')!=null)
			{
				$(obj_id+'_top_right').style.top = $('divborder').offsetTop - resizeobj.parentNode.offsetTop - blocksize+'px';
				$(obj_id+'_top_right').style.left = $('divborder').offsetLeft - resizeobj.parentNode.offsetLeft + $('divborder').clientWidth + 'px';
			}
			if($(obj_id+'_top_left')!=null)
			{
				$(obj_id+'_top_left').style.top =  $('divborder').offsetTop - resizeobj.parentNode.offsetTop - blocksize+'px';
				$(obj_id+'_top_left').style.left =   $('divborder').offsetLeft - resizeobj.parentNode.offsetLeft - blocksize+'px';
			} 		
		}
}

//Re-locate corners drom DIVDRAG
function relocate(obj)
{
	obj_id = obj.id;	
	if($(obj_id+'_bottom_right')!=null)
	{
		$(obj_id+'_bottom_right').style.top = obj.clientHeight - blocksize + 'px';
		$(obj_id+'_bottom_right').style.left = obj.clientWidth - blocksize + 'px';
	}
	if($(obj_id+'_bottom_left')!=null)
	{
		$(obj_id+'_bottom_left').style.top = obj.clientHeight - blocksize + 'px';
		$(obj_id+'_bottom_left').style.left = '-'+blocksize+'px';
	}
	if($(obj_id+'_top_right')!=null)
	{
		$(obj_id+'_top_right').style.top = '-'+blocksize+'px';
		$(obj_id+'_top_right').style.left = obj.clientWidth - blocksize + 'px';
	}
	if($(obj_id+'_top_left')!=null)
	{
		$(obj_id+'_top_left').style.top = '-'+blocksize+'px';
		$(obj_id+'_top_left').style.left = '-'+blocksize+'px';
	} 
	if($(obj_id+'_border')!=null)
	{
		if(ie)
		{
			$(obj_id+'_border').style.width = obj.clientWidth;
			$(obj_id+'_border').style.height = obj.clientHeight;
		}
		else
		{
			$(obj_id+'_border').style.width = obj.clientWidth - blocksize/2;
			$(obj_id+'_border').style.height = obj.clientHeight - blocksize/2;
		}
	}
}



//Create DIVDRAG
function createDrag( divbox, obj, x, y )
{
	//create a img for get your default width and height. after remove
	/*newimg = ce('IMG');
	newimg.src = img;
	document.body.appendChild(newimg);
	width = newimg.clientWidth;
	height = newimg.clientHeight;
	document.body.removeChild(newimg);*/
	
	img = obj.src;
	width = obj.clientWidth;
	height = obj.clientHeight;
	
	//create DIVADRAG
	div = ce('DIV');
	div.drag = 1;
	div.id= 'drag'+i;
	div.auxid = i;
	div.onmousedown = function( event, div ){ dragClick(event, this); };
	//div.onmouseup = function( event, div ){ mouseout(event, this); };
	divbox.appendChild(div);

	div.className = 'divdrag';
	div.style.height = height;
	div.style.width = width;
	div.idImg = obj.idImg;
	if(x > 0) div.style.left = x;
	if(y > 0) div.style.top = y;
	div.innerHTML="<img src='"+img+"' width='100%' height='100%'/>";
	
	zindex++;
	div.style.zIndex = zindex;

	cleanSides( div );
	createCorner( div );
	i++;
	
	appendDocument();
	if(exec_save_drag>'')
		eval(exec_save_drag);
}

function createDrag2( divbox, img, x, y, width, height, objImg)
{
	//create DIVADRAG
	div = ce('DIV');
	div.drag = 1;
	div.id= 'drag'+i;
	div.auxid = i;
	div.onmousedown = function( event, div ){ dragClick(event, this); };
	divbox.appendChild(div);

	div.className = 'divdrag';
	div.style.height = height;
	div.style.width = width;
	div.idImg = objImg;
	if(x > 0) div.style.left = x; else div.style.left = 0;
	if(y > 0) div.style.top = y; else div.style.top = 0;
	div.innerHTML="<img src='"+img+"' width='100%' height='100%'/>";

	zindex++;
	div.style.zIndex = zindex;

	cleanSides( div );
	i++;

	appendDocument();
}


//Create corners from DIVDRAG
function createCorner( div )
{
	id_div = div.auxid;

	if($('drag'+id_div+'_top_left')==null && $('drag'+id_div+'_top_right')==null && $('drag'+id_div+'_bottom_left')==null && $('drag'+id_div+'_bottom_right')==null)
	{
		var div_t1= ce('DIV');
		div_t1.id= 'drag'+id_div+'_top_left';
		div_t1.className = 'drag_resize';
		div_t1.style.cursor = 'nw-resize';
		div_t1.locate = 'top_left';
		div_t1.onmousedown = resizedown;
		div_t1.onmouseup =  resizeup;
		div.appendChild(div_t1);
	
		var div_t2= ce('DIV');
		div_t2.id= 'drag'+id_div+'_top_right';
		div_t2.className = 'drag_resize';
		div_t2.style.cursor = 'ne-resize';
		div_t2.locate = 'top_right';
		div_t2.onmousedown = resizedown;
		div_t2.onmouseup =  resizeup;
		div.appendChild(div_t2);

		var div_t3= ce('DIV');
		div_t3.id= 'drag'+id_div+'_bottom_left';
		div_t3.className = 'drag_resize';
		div_t3.style.cursor = 'ne-resize';
		div_t3.locate = 'bottom_left';
		div_t3.onmousedown = resizedown;
		div_t3.onmouseup =  resizeup;
		div.appendChild(div_t3);

		var div_t4= ce('DIV');
		div_t4.id= 'drag'+id_div+'_bottom_right';
		div_t4.className = 'drag_resize';
		div_t4.style.cursor = 'nw-resize';
		div_t4.locate = 'bottom_right';
		div_t4.onmousedown = resizedown;
		div_t4.onmouseup =  resizeup;
		div.appendChild(div_t4);

		var div_border= ce('DIV');
		div_border.id= 'drag'+id_div+'_border';
		div_border.className = 'drag_resize_border';
		if(ie)
		{
			div_border.style.width = div.clientWidth;
			div_border.style.height = div.clientHeight;
		}
		else
		{
			div_border.style.width = div.clientWidth - blocksize/2;
			div_border.style.height = div.clientHeight - blocksize/2;
		}
		div.appendChild(div_border);
		divselect = div;
	}
	relocate( div );
}
//Remove corners from DIVDRAG
function removeCorner( div )
{
	id_div = div.auxid;

	if($('drag'+id_div+'_top_left')!=null)
		$('drag'+id_div+'_top_left').parentNode.removeChild($('drag'+id_div+'_top_left'));
	if($('drag'+id_div+'_top_right')!=null)
		$('drag'+id_div+'_top_right').parentNode.removeChild($('drag'+id_div+'_top_right'));
	if($('drag'+id_div+'_bottom_left')!=null)
		$('drag'+id_div+'_bottom_left').parentNode.removeChild($('drag'+id_div+'_bottom_left'));
	if($('drag'+id_div+'_bottom_right')!=null)
		$('drag'+id_div+'_bottom_right').parentNode.removeChild($('drag'+id_div+'_bottom_right'));
	if($('drag'+id_div+'_border')!=null)
		$('drag'+id_div+'_border').parentNode.removeChild($('drag'+id_div+'_border'));
}
//Clean Sides from all divdrags excepts div parameter
function cleanSides( div )
{
	for(var j=0; j<i; j++)
		if($('drag'+j)!=null && j!=div.auxid)
		{
			removeCorner( $('drag'+j) );
			divselect = null;
		}	
}
//remove img drag from firefox
function stopDrag(ev)
{
	if(ie)
		ev.returnValue = false;
	else
	{
		ev.preventDefault();
		ev.stopPropagation();
	}
}
//return array with positions and src from images for php generate
function getPositions( div , url)
{
	list = div.childNodes;
	divlist = [];
	for( var i = 0 ; i < list.length ; i++ )
	{
		e = list[i];
		divlist[i] = [e.childNodes[0].src, e.offsetLeft, e.offsetTop, e.clientWidth, e.clientHeight, e.style.zIndex*1, e.idImg];
	}
	//window.open(url+serialize(divlist));
	return serialize(divlist);
}
function keyup( ev )
{
	proportion = 1;
	return true;
}
function keydown( ev )
{
	if(ie)
		ev = event;

	if(ev.keyCode==46 && divselect!=null)
	{
		divselect.parentNode.removeChild(divselect);
		divselect = null;
		eval(exec_save_drag);
	}
	if(ev.keyCode==16)
	{
		proportion = 0;
	}
	return true;
}
function clickDIV( ev, obj , target, content)
{
	var top = getTop(obj);
	var left = getLeft(obj);

	if(!obj.id)
	{
		rand = '';
		while(rand=='' || $(rand)!=null)
		{
			rand = Math.random()+'';
			rand = 'img_'+rand.substr(4, 10);
		}
		obj.id = rand;
	}

	var mouse = mouseCoords(ev);

	obj.clickX = mouse.x - left;
	obj.clickY = mouse.y - top;

	if($('dragimg')!=null)
		$('dragimg').parentNode.removeChild($('dragimg'));

	div = ce('DIV');
	div.id = 'dragimg';

	div.className = 'divdrag';
	div.style.zIndex = 10000;
	div.style.height = obj.clientHeight;
	div.style.width = obj.clientWidth;
	div.style.top = top;
	div.style.left = left;
	div.auxX = mouse.x - left;
	div.auxY = mouse.y - top;
	div.innerHTML="<img src='"+obj.src+"' width='100%' height='100%'/>";

	if(content!=null)
		content.appendChild(div);
	else
		obj.parentNode.appendChild(div);

	draggable = div;
	draggable.target = target.id;
	draggable.parent = obj.id;

	document.body.onmouseup = outDIV;
	document.body.onmousemove = moveDIV;
	stopDrag( ev );
}
function moveDIV( ev )
{
	if(ie)
		ev = event;

	var mouse = mouseCoords(ev);

	if(draggable!=null)
	{
		draggable.style.top = mouse.y - draggable.auxY;
		draggable.style.left = mouse.x - draggable.auxX;
	} 
	return false;
}
function outDIV( ev )
{
	if(ie)
		ev = event;

	var mouse = mouseCoords(ev);

	if(draggable!=null)
	{
		obj = $(draggable.parent);
		target = $(draggable.target);

		var top = getTop(target);
		var left = getLeft1(target);

		var width = target.clientWidth;
		var height = target.clientHeight;

		if( mouse.x>=left && mouse.x<=(left+width) && mouse.y>=top && mouse.y<=(top+height) )
		{
			var left = getLeft(target);
			createDrag( target, obj, mouse.x-left-obj.clickX, mouse.y-top-obj.clickY);
		}
		draggable.parentNode.removeChild(draggable);
		draggable = null;
	}
	document.body.onmousemove = null; 
	document.body.onmouseup = null;
 }

 function getLeft1(obj)
{
	var left = obj.offsetLeft + obj.clientLeft;
	while((obj = obj.offsetParent) != null && typeof( obj ) == 'object')
	{
		left += obj.offsetLeft - obj.scrollLeft + obj.clientLeft;
		
		if(obj.mrg>0 && !ie)
			left+= obj.mrg;
	}
	return left;
}