// ---------------------------------------------------------------
// GLOBAL VAR DECLARATIONS
// ---------------------------------------------------------------
	// objects
	var objDrag = null;													// run time drag area <div>
	
	// temporary holder for box id
	var box_id = '';													// run time box id (box that is currently moving)
	var box_index = '';													// run time box index (box that is currently moving)
	
	// top position holder (each row has a new top position which is determined by the highest box in the previous row)
	var top_position = 0;												// top position for current row of boxes

	// strings, integers & booleans
	var intMouseStartX 	= 0;											// starting mouse X-pos before draging the drag area (area that displays the crop)
	var intMouseStartY 	= 0;											// starting mouse Y-pos before draging the drag area (area that displays the crop)
	var intPosTop		= 0;											// the top-position (in pixels) of the drag area
	var intPosLeft		= 0;											// the left-position (in pixels) of the drag area
	
// ---------------------------------------------------------------
// FUNCTONS
// ---------------------------------------------------------------
	function dragStart(event, id)
	{
		// set the box id globally
		box_id 		= id;
		box_index 	= id.replace(/[a-zA-Z_]/g, '');
		
		// get drag area
		objDrag = document.getElementById(box_id);
		
			// set transparency and z-index on element that will be moved now [filter:alpha(opacity=50);z-index:10;]
			//document.getElementById(box_id).className = 'boxSelected';
			
			// disable selection of text in box
			document.getElementById(box_id).onselectstart = function() { return false; };
					
		// get mouse coordinates
		var x = GetMouseX(event);
		var y = GetMouseY(event);
		
		// store starting position
		intMouseStartX 	= x;
		intMouseStartY 	= y;
		
		// get top/left positions of the drag area
		intPosTop 	= parseInt(objDrag.style.top, 10);
		intPosLeft 	= parseInt(objDrag.style.left, 10);
		
		// fix NaN values (null)
		intPosTop 	= isNaN(intPosTop)  ? 0 : intPosTop;
		intPosLeft 	= isNaN(intPosLeft) ? 0 : intPosLeft;
		
		// attach mousemove/mouseup events
		if(is_ie())
		{
			document.attachEvent("onmousemove", dragAction);
			document.attachEvent("onmouseup",   dragStop);
			window.event.cancelBubble = true;
			window.event.returnValue = false;
		}
		else
		{
			document.addEventListener("mousemove", dragAction, true);
			document.addEventListener("mouseup",   dragStop, true);
			event.preventDefault();
		}
	}

	
	function dragStop(event)
	{
		// remove transparency and all that
		//if(document.getElementById(box_id)) document.getElementById(box_id).className = 'boxUnselected';
			
		if(is_ie())
		{
			document.detachEvent( "onmousemove", dragAction );
			document.detachEvent( "onmouseup", dragStop );
		}
		else
		{
			document.removeEventListener("mousemove", dragAction, true);
			document.removeEventListener("mouseup", dragStop, true);
		}
	}
	
	function dragAction(event)
	{
		// get mouse coordinates
		var x = GetMouseX(event);
		var y = GetMouseY(event);
		
		// get relative mouse positions
		var intRelMouseX 	= (x - intMouseStartX);
		var intRelMouseY 	= (y - intMouseStartY);
		
		// get current mouse top/left position
		var currentPosTop	= (intPosTop + intRelMouseY);
		var currentPosLeft	= (intPosLeft + intRelMouseX);
		
		// fix negative values in current position
		currentPosTop 	= currentPosTop  < 0 ? 0 : currentPosTop;
		currentPosLeft 	= currentPosLeft < 0 ? 0 : currentPosLeft;
		
		// get current width/height of the drag area
		var currentDragAreaWidth 	= parseInt(objDrag.style.width, 10);
		var currentDragAreaHeight 	= parseInt(objDrag.style.height, 10);
		
		// do not move picture for every pixel, delay it by X-number of pixels
		if(currentPosLeft > (currentDragAreaWidth + 2))  currentPosLeft = (currentDragAreaWidth + 2);
		if(currentPosTop > (currentDragAreaHeight + 2)) currentPosTop = (currentDragAreaHeight + 2);
		
		// set new position on: drag area, image
		objDrag.style.left 	= currentPosLeft + "px";
		objDrag.style.top 	= currentPosTop + "px";
		
		if(is_ie())
		{
			window.event.cancelBubble = true;
			window.event.returnValue = false;
		}
		else
		{
			event.preventDefault();
		}
	}
			
			
// ---------------------------------------------------------------
// RUN TIME FUNCTIONS
// ---------------------------------------------------------------
	function GetMouseX( event )
	{
		if(is_ie())
		{
			return ( window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft );
		}
		else
		{
			return ( event.clientX + window.scrollX );
		}
	}
	
	function GetMouseY( event )
	{
		if(is_ie())
		{
			return ( window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop );
		}
		else
		{
			return ( event.clientY + window.scrollY );
		}
	}
	
	function findPosX(obj)
	{
		var curleft = 0;
		if (obj.offsetParent)
		{
			while (obj.offsetParent)
			{
				curleft += obj.offsetLeft
				obj = obj.offsetParent;
			}
		}
		else if (obj.x)
			curleft += obj.x;
		return curleft;
	}
	
	function findPosY(obj)
	{
		var curtop = 0;
		if (obj.offsetParent)
		{
			while (obj.offsetParent)
			{
				curtop += obj.offsetTop
				obj = obj.offsetParent;
			}
		}
		else if (obj.y)
			curtop += obj.y;
		return curtop;
	}
				
	function is_ie()
	{
		var user_agent 	= navigator.userAgent.toLowerCase();
		var is_msie 	= user_agent.indexOf('msie');
		return is_msie <= 0 ? 0 : 1;
	}