var movingObject = -1;
var movingSquare  = new Square();
var DNDContainers = new Array();

function getTarget(event) {
	if (event.srcElement) return event.srcElement;
	else {
		if (event.target) return event.target;
		else return null;
	}
}
function Square(x,y,width,height) {
	this.top = parseInt(y);
	this.bottom = parseInt(y+height);
	this.right = parseInt(x+width);
	this.left = parseInt(x);
	this.horizonMid = parseInt(this.top+(height/2));
	this.vertMid = parseInt(this.left+(width/2));
	
	this.set = function(x,y,width,height) {
		this.top = parseInt(y);
		this.bottom = parseInt(y+height);
		this.right=parseInt(x+width);
		this.left = parseInt(x);
		this.horizonMid = parseInt(this.top+(height/2));
		this.vertMid = parseInt(this.left+(width/2));
	}

	this.horizonOverLap = function(square) {
		if (this.horizonMid > square.top && this.horizonMid < square.bottom) { return true; } 
		else false;
	}
	this.vertOverLap = function(square) {
		if (this.left < square.vertMid && this.right > square.horizonMid) return true;
		else false;
	}
	this.toString = function() {
		return "Top: "+this.top +", Right :"+this.right+", Bottom: "+ this.bottom+", Left: "+this.left+", Midden Horizon: "+ this.horizonMid+", Midden Vert: "+this.vertMid;	
	}
	
}

var DNDObjects = new Array();

var ghost = document.createElement('div');
ghost.className= 'dock dockghost';
//ghost.setAttribute('class','dock dockghost');
ghost.innerHTML="&nbsp;";
/*ghost.beforeElement = null;
ghost.getBeforeElement = function() {
	if (this.beforeElement) return this.beforeElement;
	else return this.parentNode.childNodes[this.parentNode.childNodes.length-1];
}*/


DNDObjects.indexOf=function(obj) {
		var object;
			
		if (typeof(obj)=="object") {
			object=obj.getID();

		}
		else {object=obj;}

		for (var i=0;i<this.length;i++) {
			
			if(this[i].getID()==object) {
				
				return i;
			}
		}
		return -1;
}

DNDObjects.getByClickArea = function(id) 
{
	if (id=="")return -1;
	for (var i=0;i<this.length;i++) {
	
			if(this[i].clickArea==id) {
				return i;
			}
	} return -1;
}

DNDObjects.overLap = function() {
	movingSquare = this[movingObject].getSquare();
	//statusObj.innerHTML = movingSquare.toString();
	for (var i=0;i<this.length;i++) {
		if (i!=movingObject) {
			if (ghost.parentNode==this[i].container()) {
				var overlappingSquare = this[i].getSquare();
				if (overlappingSquare.horizonOverLap(movingSquare)) {
					statusObj.innerHTML = 'Moving Square:' +movingSquare.toString()+'<br>'+'Overlapping Square ('+this[i].getID()+'): '+overlappingSquare.toString();
					//if (parseInt(overlappingSquare.horizonMid-this[movingObject].currenty)>movingSquare.bottom-overlappingSquare.horizonMid) {			
						statusObj.innerHTML = this[i].getObj().id +" horizonmid - movingsquare y; "+overlappingSquare.horizonMid + "-" +this[movingObject].currenty +"="+parseInt(overlappingSquare.horizonMid-this[movingObject].currenty)+"<br>movingsquare bottom - "+this[i].getObj().id +" horizonmid; "+movingSquare.bottom+"-"+overlappingSquare.horizonMid+"="+parseInt(movingSquare.bottom-overlappingSquare.horizonMid);
						this.moveGhost(i);
						
					/*	
						} //if 
					else {
						
						} *///else
				}//if overlappingSquare.horizonOverlap()
			} // if ghost.parentNode == this.container
			else {
				var overlappingSquare = this[i].getSquare();
				if (overlappingSquare.vertOverLap(movingSquare)) {
					this.moveGhost(i);
				}
			} //else
		}
	}
	//document.getElementById('status').innerHTML = this[movingObject].startx + " "+this[movingObject].starty + " "+this[movingObject].width +" "+ //this[movingObject].height //movingSquare.getSquare(); 

}
DNDObjects.moveGhost = function(i) {
	//this[i].container.removeChild(ghost);
	statusObj.innerHTML = "overlappend met: "+this[i].getObj().id;
	//this[i].resetPos();
	this[i].container().insertBefore(ghost,this[i].getObj().nextSibling); 
}

var DNDColumn = new Array();

/********* MOVEMENT *********/
function grab(e) {
	if (!e) e=window.event;
	var target;
	target=getTarget(e);
	
	var index;
	index=DNDObjects.getByClickArea(target.id);
	
	if (index>=0)
	{
		movingObject=index;
		DNDObjects[index].setStart();
		DNDObjects[index].setMouse(e.clientX,e.clientY);
		DNDObjects[index].absolute();
		DNDObjects[index].container().insertBefore(ghost,DNDObjects[index].getObj());
		return true;
	}
	else return false;
}

function move(e) {

	if (!e) e=window.event;
	if (movingObject>=0) {
		 DNDObjects[movingObject].go(e);
		 DNDObjects.overLap();
		return false;
	}
}

function drop() {
	if (movingObject>=0) {
		DNDObjects[movingObject].snapToGhost();
		
		DNDObjects[movingObject].static();
		movingObject=-1;
	}
	else return null;
}
/**************************************/	
		
function DNDObject(obj) {
	var htmlElementObject=obj;
	
	this.width = obj.offsetWidth;
	this.height = obj.offsetHeight;
	this.startx=obj.offsetLeft;
	this.starty=obj.offsetTop;

	this.clickArea = null;
	this.container = function() { return this.getObj().parentNode;};
	this.moving=false;
	
	this.currentx=obj.offsetLeft;
	this.currenty=obj.offsetTop;
	this.mousex;
	this.mousey;
	this.virtualx=this.startx;
	this.virtualy=this.starty;
	
	this.classCSS=obj.className;
	/*****************************
	obj.style.position='';*/
	htmlElementObject.style.top=this.starty + 'px';
	htmlElementObject.style.left=this.startx + 'px';
	
	/******************************
	Methods-----------------------*/
	
	this.setStart = function() {
		var obj = htmlElementObject;
		var curleft = 0;
		var curtop = 0;
		do {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
		}
		while(obj=obj.offsetParent);
		this.starty=curtop;
		this.startx=curleft;
		htmlElementObject.style.top=this.starty + 'px';
		htmlElementObject.style.left=this.startx + 'px';

	}

	this.setCurrent = function(x,y) {

		this.currentx=this.startx+(x-this.mousex);
		this.currenty=this.starty+(y-this.mousey);

	}
	
	this.resetSquare = function() {
		this.currentx=this.getObj().offsetLeft;
		this.currenty=this.getObj().offsetTop;
		this.width = this.getObj().offsetWidth;
		this.height = this.getObj().offsetHeight;
	}
	
	this.getSquare = function() {
		this.resetSquare(); //tijdelijk: kijken of dit niet te veel overhead creëert;
		return new Square(this.currentx,this.currenty,this.width,this.height);
	}

	this.setMouse = function(x,y) {
		(x)?this.mousex=x:this.mousex=0;
		(y)?this.mousey=y:this.mousey=0;
	}
	
	this.go = function(e) {
		this.setCurrent(e.clientX,e.clientY);
		htmlElementObject.style.top=this.currenty + 'px';
		htmlElementObject.style.left=this.currentx + 'px';
		
	}
	
	this.snapToGhost=function() {
		var obj = htmlElementObject;
		ghost.parentNode.replaceChild(obj,ghost);
	}
	
	this.getID=function() {return htmlElementObject.id;}
	this.getObj = function() {return htmlElementObject;}

	this.static = function(string) {
		
		htmlElementObject.style.zIndex = 1;
		htmlElementObject.style.width='auto';
		htmlElementObject.style.opacity = 1;
		htmlElementObject.style.filter = 'alpha(opacity=100)';
		htmlElementObject.style.position = 'static';
		
		
	}
	this.absolute = function(string) {
		
		ghost.style.left=htmlElementObject.style.width;
		ghost.style.height=htmlElementObject.offsetHeight+'px';
		

		
		htmlElementObject.style.position = 'absolute';
		
		htmlElementObject.style.zIndex = 1000;
		htmlElementObject.style.width = this.width + 'px';
		htmlElementObject.style.opacity = 0.5;
		htmlElementObject.style.filter = 'alpha(opacity=50)';
		
		
	}
}