var Demos       = null;

// Demo variables
// iMouseDown represents the current mouse button state: up or down
/*
lMouseState represents the previous mouse button state so that we can
check for button clicks and button releases:

if(iMouseDown && !lMouseState) // button just clicked!
if(!iMouseDown && lMouseState) // button just released!
*/
var mouseOffset = null;
var iMouseDown  = false;
var lMouseState = false;
var dragObject  = null;

var ws		= [110,140,115,140];
var hs		= [166,330,508,690];
var imglist = ['DragImage1','DragImage2','DragImage3','DragImage4']


Number.prototype.NaN0=function(){return isNaN(this)?0:this;}

function getDistance(e){
	var d = [];
	var small = 4000;
	var number = 0;
	for(var i=0;i<4;i++)
	{
		d[i] = parseInt(Math.sqrt((e.x-hs[i]-20)*(e.x-hs[i]-20)+(e.y-ws[i])*(e.y-ws[i])));
		if(d[i]<small)
		{
			small = d[i];
			number = i;
		}
	}
	return number;
}

function swapId(i,j) {
	var temp;
	temp = imglist[i];
	imglist[i] = imglist[j];
	imglist[j] = temp;
}

function getNumberForId(obj) {
	var number = -1;
	for(var i=0;i<4;i++)
	{
	    if(obj==null)
	        return -1;
		if(obj.id == imglist[i])
		{
			number = i;
			break;
		}
	}
	
	return number;
}

function getPosition(e){
	var left = 0;
	var top  = 0;
	while (e.offsetParent){
		left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
		top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
		e     = e.offsetParent;
	}


	left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
	top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);

	return {x:left, y:top};

}

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 getMouseOffset(target, ev){
	ev = ev || window.event;

	var docPos    = getPosition(target);
	var mousePos  = mouseCoords(ev);
	return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}

function mouseMove(ev){
	ev         = ev || window.event;
    
	/*
	We are setting target to whatever item the mouse is currently on
	Firefox uses event.target here, MSIE uses event.srcElement
	*/
	var target   = ev.target || ev.srcElement;
	var mousePos = mouseCoords(ev);	
	/*
	
	if(Demos){
		document.getElementById('MouseXPosition').value = mousePos.x;
		document.getElementById('MouseYPosition').value = mousePos.y;
	} */

	if(dragObject){
		//dragObject.style.position = 'absolute';
		dragObject.style.top      = (mousePos.y - mouseOffset.y) + 'px'  ;
		dragObject.style.left     = (mousePos.x - mouseOffset.x -20) + 'px';
	}

	// track the current mouse state so we can compare against it next time
	lMouseState = iMouseDown;

	// this prevents items on the page from being highlighted while dragging
	if(dragObject) return false;
}

function mouseUp(ev){

	if(Demos) {
	    ev           = ev || window.event;
	    var mousePos = mouseCoords(ev);
	    var number = getDistance(mousePos);
	    var objnumber = getNumberForId(dragObject);
	    //alert(objnumber);
	    if(objnumber==-1) return false;
	    if(number != objnumber ) {
		    dragObject.style.top      =  ws[number] + 'px';
		    dragObject.style.left     =  hs[number] + 'px' ;
		    document.getElementById(imglist[number]).style.top = ws[objnumber] + 'px';
		    document.getElementById(imglist[number]).style.left = hs[objnumber] + 'px';
		    swapId(number,objnumber)
	    }		
	    else
	    {
		    dragObject.style.top      =  ws[number] ;
		    dragObject.style.left     =  hs[number] ;
	    }
	}
	
	dragObject = null;
	iMouseDown = false;
}

function mouseDown(ev){
	ev         = ev || window.event;
	var target = ev.target || ev.srcElement;

	iMouseDown = true;
	//alert("fdd");
	if(target.onmousedown || target.getAttribute('DragObj')){
		return false;
	}
}

function makeDraggable(item){
	if(!item) return;
	
	item.onmousedown = function(ev){
	    //alert("");
		dragObject  = this;
		mouseOffset = getMouseOffset(this, ev);
		return false;
	}
}

function makeClickable(item){
	if(!item) return;
	item.onmousedown = function(ev){
		document.getElementById('ClickImage').value = this.name;
	}
}

function addDropTarget(item, target){
	item.setAttribute('droptarget', target);
}

document.onmousemove = mouseMove;
document.onmousedown = mouseDown;
document.onmouseup   = mouseUp;

window.onload = function(){
		Demos = document.getElementById('mainbar');

	if(Demos){
		var DragImage1 = document.getElementById('DragImage1');
		DragImage1.style.top = ws[0] + 'px';
		DragImage1.style.left = hs[0] + 'px';
		makeDraggable(DragImage1);

		var DragImage2 = document.getElementById('DragImage2');
		DragImage2.style.top = ws[1] + 'px';
		DragImage2.style.left = hs[1] + 'px';
		makeDraggable(DragImage2);

		var DragImage3 = document.getElementById('DragImage3');
		DragImage3.style.top = ws[2] + 'px';
		DragImage3.style.left = hs[2] + 'px';
		makeDraggable(DragImage3);

		var DragImage4 = document.getElementById('DragImage4');
		DragImage4.style.top = ws[3] + 'px';
		DragImage4.style.left = hs[3] + 'px';
		makeDraggable(DragImage4);
	}
}