//This code is based on original copyright code at http://luke.breuer.com but has been considerably modified.
//
//The original version made items with the class 'drag' draggable, but this modification by Mike Scarlett at www.lynchat.eu
//considerably extends this by allowing for 200px-wide percentage sliders to be created using the class 'slideinput' or
// 'slidediv' - 'slideinput' puts the slider value into the control value property, 'slidediv' puts it into the innerHTML.
//The sliders control the percentage size of an image such that controlN adjusts imageN.
//It also allows imageN and sizerN pairs to operate where sizerN is the sizing handle for imageN.  An optional borderN imitates
//the imageN position and size and can be placed in the foreground so that a masked imageN can be identified and the other
//items interleaved with it.
//
//The class 'drag' and 'sizer' are identical except for the cursor shape which is displayed when dragging.
//
//For this application, the element ID is read to control the settings of other elements.
//
//Set a transparent 1x1 gif as a background image in border elements to make an empty div clickable in IE.
//
//Note that Javascript only reads inline styles, not class styles, so the elements need to have the size set in the element and not the stylesheet.
//
//This version has line 154 set to give symmetrical resizing.

var minleft=0;		//coordinates to limit movement range
var maxleft=600;
var mintop=0;
var maxtop=1000;

var minwidth=100;	//make sure the item doesn't zoom to nothing
var minheight=100;

var _startX = 0;
var _startY = 0;

var _image;
var _border;
var _sizer;
var _frame;
var _control;
var _slider;

var _imageX;
var _imageY;
var _imageW;
var _imageH;

var _sliderL;

var _imageZ;
var _borderZ;
var _sizerZ;
var _frameZ;

var _i;

var _prevX=0;
var _prevY=0;

document.onmousedown = OnMouseDown;
document.onmouseup = OnMouseUp;

function OnMouseDown(e){
	if (e == null){e = window.event;} // IE doesn't pass the event object
	var target = e.target != null ? e.target : e.srcElement;// IE uses srcElement, others use target
	
	// for IE, left click == 1, for Firefox, left click == 0
	if ((e.button == 1 && window.event != null || e.button == 0) &&	(target.className == 'drag' || target.className =='slider' || target.className =='sizer' || target.className =='slidediv' || target.className =='slideinput')){

		// grab the mouse position
		_startX = e.clientX;
		_startY = e.clientY;
		
		
		document.onmousemove = OnMouseMove;
		
		document.body.focus();// cancel out any text selections
		
		document.onselectstart = function () { return false; };// prevent text selection in IE
		
		target.ondragstart = function() { return false; };// prevent IE from trying to drag an image
		
		//find the ref number in case there are dependent items
		_i=target.id.slice(-1);
		
		//get the image element starting position (dependent items will be generated from this)
		if(document.getElementById('image' + _i)){
			_image=document.getElementById('image' + _i);
			_imageX=ExtractNumber(_image.style.left);
			_imageY=ExtractNumber(_image.style.top);
			_imageW=ExtractNumber(_image.style.width);
			_imageH=ExtractNumber(_image.style.height);
			_imageZ=_image.style.zIndex;
			_image.style.zIndex=10002;
		}
		
		if(document.getElementById('border' + _i)){
			_border=document.getElementById('border' + _i);
			_borderZ=_border.style.zIndex;
			_border.style.zIndex=10000;
		}
		if(document.getElementById('frame')){
			_frame=document.getElementById('frame');
			_frameZ=_frame.style.zIndex;
			_frame.style.zIndex=10001;
		}
		if(document.getElementById('sizer' + _i)){
			_sizer=document.getElementById('sizer' + _i);
			_sizerZ=_sizer.style.zIndex;
			_sizer.style.zIndex=10003;
		}
		if(document.getElementById('control' + _i)){
			_control=document.getElementById('control' + _i);
		}
		if(document.getElementById('slider' + _i)){
			_slider=document.getElementById('slider' + _i);
			_sliderL=ExtractNumber(_slider.style.left);
		}
		
		return false;
	}
}

function ExtractNumber(value){
	var n = parseInt(value);
	return n == null || isNaN(n) ? 0 : n;
}

function OnMouseMove(e){
	if(e == null){var e = window.event;}
	var target = e.target != null ? e.target : e.srcElement;// IE uses srcElement, others use target
	
	target.style.cursor="move";
	
	//measure the mouse position change
	var _changeX=e.clientX - _startX;
	var _changeY=e.clientY - _startY;
	var _newX = _imageX+_changeX;
	var _newY = _imageY+_changeY;
	
	//limit movement area
	if(_newX<=minleft){_newX=minleft;}
	if((_newX+_imageW)>=maxleft){_newX=maxleft-_imageW;}
	if(_newY<=mintop){_newY=mintop;}
	if((_newY+_imageH)>=maxtop){_newY=maxtop-_imageH;}
	
	if(target.id == 'image' + _i){	//move the image	
		_image.style.left=_newX + 'px';
		_image.style.top=_newY + 'px';
	}
	
	if((target.id == 'sizer' + _i) && _image!=null){	
	
		_sizer.style.cursor="nw-resize";	
	
		_imageW=_imageW + _changeX - _prevX;
		//_imageH=_imageH + _changeY - _prevY;
		_imageH=_imageH + _changeX - _prevX;//MAKE THE RESIZE SYMMETRICAL
		
		//ensure that only the position differences are used, rather than the absolute position
		_prevX=_changeX;
		_prevY=_changeY;
	
		//limit minimum size
		if(_imageW<=minwidth){_imageW=minwidth;}
		if(_imageH<=minheight){_imageH=minheight;}
		
		//limit maximum size
		if(_imageW  > maxleft - ExtractNumber(_image.style.left)){_imageW = _image.style.width;}
		if(_imageH > maxtop - ExtractNumber(_image.style.top)){_imageH = _image.style.height;}
		
		//resize the image
		_image.style.width=_imageW + 'px';
		_image.style.height=_imageH + 'px';
	}

	//make sure that the dependent sizer, if it exists, stays attached to the image
	if(_sizer!=null){
		_sizer.style.left=ExtractNumber(_image.style.left) + ExtractNumber(_image.style.width) + 'px';
		_sizer.style.top=ExtractNumber(_image.style.top) + ExtractNumber(_image.style.height) + 'px';
	}
	
	//make sure that the dependent border, if it exists, always tracks the image
	if(_border!=null){
		_border.style.width=_image.style.width;
		_border.style.height=_image.style.height;
		_border.style.left=_image.style.left;
		_border.style.top=_image.style.top;
	}
	
	if(target.className == 'slideinput'){
		_control.style.cursor="e-resize";
		if(_image!=null && _changeX >=0 && _changeX <=100){
			_control.style.width = (30  + _changeX * 2) + "px";
			if(_image!=null){
				_image.style.width=_changeX + "%";
				_image.style.height=_changeX + "%";
				_control.value=_changeX + "%";
			}else{
				_control.value="No image " + _i;
			}
		}
	}
			
	if(target.className == 'slidediv'){
		_control.style.cursor="e-resize";
		if(_changeX >=0 && _changeX <=100){
			_control.style.width = (30 + _changeX * 2 ) + "px";
			if(_image!=null){
				_image.style.width=_changeX + "%";
				_image.style.height=_changeX + "%";
				_control.innerHTML=_changeX + "%";
			}else{
				_control.innerHTML="No image " + _i;
			}
		}
	}
	
	if(target.className == 'slider'){
		_slider.style.cursor="e-resize";
		if(_changeX >=0 && _changeX <=200){
			_slider.style.left = (_sliderL + _changeX) + "px";
			_control.style.width = _changeX + "px";
			if(_image!=null){
				_image.style.width=_changeX + "%";
				_image.style.height=_changeX + "%";
				_control.innerHTML=_changeX + "%";
			}else{
				_control.innerHTML="No image " + _i;
			}
		}
	}
	
	//update external fields with new values
	var _image_top=document.getElementById("image_top" + _i);
	_image_top.value=_image.style.top;
	var _image_left=document.getElementById("image_left" + _i);
	_image_left.value=_image.style.left;
	var _image_width=document.getElementById("image_width" + _i);
	_image_width.value=_image.style.width;
	var _image_height=document.getElementById("image_height" + _i);
	_image_height.value=_image.style.height;
}

function OnMouseUp(e){
	document.onmousemove = null;
	document.onselectstart = null;
	_prevX=0;
	_prevY=0;
	
	//reset the z-indices to the originals
	if(_image!=null){
		_image.style.zIndex=_imageZ;
	}
	if(_border!=null){
		_border.style.zIndex=_borderZ;
	}
	if(_sizer!=null){
		_sizer.style.zIndex=_sizerZ;
	}
	if(_frame!=null){
		_frame.style.zIndex=_frameZ;
	}
	
	//e.style.cursor="default";
	
	_image=null;
	_border=null;
	_sizer=null;
	_frame=null;
	_control=null;
}