function Browser() {
	var ua, s, i;

	this.isIE    = false;
	this.isNS    = false;
	this.version = null;

	ua = navigator.userAgent;

	s = "MSIE";
	if ((i = ua.indexOf(s)) >= 0) {
		this.isIE = true;
		this.version = parseFloat(ua.substr(i + s.length));
		return;
	}

	s = "Netscape6/";
	if ((i = ua.indexOf(s)) >= 0) {
		this.isNS = true;
		this.version = parseFloat(ua.substr(i + s.length));
		return;
	}

	// Treat any other "Gecko" browser as NS 6.1.

	s = "Gecko";
	if ((i = ua.indexOf(s)) >= 0) {
		this.isNS = true;
		this.version = 6.1;
		return;
	}
}

var browser = new Browser();

// Global object to hold drag information.

var dragObj = new Object();
dragObj.zIndex = 0;

function dragStart(event, id) {
	checkinit();

	dragid=getDragIndex(id);
	insertid=-999;

	var el;
	var x, y;

	if(gapsfilled==false) {
		fillGaps();
	}

	dragObj.elNode = document.getElementById(id);

	// Get cursor position with respect to the page.

	if (browser.isIE) {
		x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
		y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
	}
	if (browser.isNS) {
		x = event.clientX + window.scrollX;
		y = event.clientY + window.scrollY;
	}

	// Save starting positions of cursor and element.

	dragObj.cursorStartX = dragObj.elNode.style.left;
	dragObj.cursorStartY = dragObj.elNode.style.top;
	dragObj.elStartLeft  = parseInt(dragObj.elNode.style.left, 10);
	dragObj.elStartTop   = parseInt(dragObj.elNode.style.top,  10);
	dragObj.zIndex	     = dragObj.elNode.style.zIndex;

	if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0;
	if (isNaN(dragObj.elStartTop))  dragObj.elStartTop  = 0;

	// Update element's z-index.

	dragObj.elNode.style.zIndex = dragObj.zIndex+1;

	// Capture mousemove and mouseup events on the page.

	if (browser.isIE) {
		document.attachEvent("onmousemove", dragGo);
		document.attachEvent("onmouseup",   dragStop);
		window.event.cancelBubble = true;
		window.event.returnValue = false;
	}
	if (browser.isNS) {
		document.addEventListener("mousemove", dragGo,   true);
		document.addEventListener("mouseup",   dragStop, true);
		event.preventDefault();
	}
}

function dragGo(event) {
	var x, y;
	// Get cursor position with respect to the page.

	if (browser.isIE) {
		x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
		y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
	}
	if (browser.isNS) {
		x = event.clientX + window.scrollX;
		y = event.clientY + window.scrollY;
	}

	// Move drag element by the same amount the cursor has moved.

	dragObj.elNode.style.left = (x - 12) + 'px';
	dragObj.elNode.style.top  = (y - 12) + 'px';

	if (browser.isIE) {
		window.event.cancelBubble = true;
		window.event.returnValue = false;
	}
	if (browser.isNS)
		event.preventDefault();

	dragOver(x,y);
}

function dragOver(x,y) {
	var dbar = document.getElementById('dropbar');
	dbar.style.visibility = 'hidden';
	insertid = -999;
	for(var i=0; i<dropobjects.length; i++) {
		var test = dropobjects[i].inArea(x,y);
		if(test==1) {
			if(dragObj.elNode.id==dropobjects[i].id || (i>0 && dragObj.elNode.id==dropobjects[i-1].id)) {
				return;
			}
			insertid=i-1;
			dbar.style.left = dropobjects[i].left+'px';
			dbar.style.top = ((i>0)?(dropobjects[i].top+dropobjects[i-1].top+dropobjects[i-1].height)/2:dropobjects[i].top)+'px';
			dbar.style.width = dropobjects[i].width+'px';
			dbar.style.visibility = 'visible';

			break;
		} else if(test==2) {
			if(dragObj.elNode.id==dropobjects[i].id || (i<dropobjects.length-1 && dragObj.elNode.id==dropobjects[i+1].id)) {
				return;
			}
			insertid=i;
			dbar.style.left = dropobjects[i].left+'px';
			dbar.style.top = ((i<dropobjects.length-1)?(dropobjects[i].top+dropobjects[i].height+dropobjects[i+1].top)/2:dropobjects[i].top+dropobjects[i].height)+'px';
			dbar.style.width = dropobjects[i].width+'px';
			dbar.style.visibility = 'visible';

			break;
		}
	}
}

function dragStop(event) {
	// Stop capturing mousemove and mouseup events.

	if (browser.isIE) {
		document.detachEvent("onmousemove", dragGo);
		document.detachEvent("onmouseup",   dragStop);
	}
	if (browser.isNS) {
		document.removeEventListener("mousemove", dragGo,   true);
		document.removeEventListener("mouseup",   dragStop, true);
	}

	var dbar = document.getElementById('dropbar');
	dbar.style.visibility = 'hidden';

	// altijd left en zindex herstellen
	dragObj.elNode.style.left = dragObj.cursorStartX;
	dragObj.elNode.style.zIndex = dragObj.zIndex;

	if(insertid!=-999) {
		if(dragid>insertid) {
			insertid++;
			var tmpobj = dropobjects[dragid];
			var tmptop = dropobjects[insertid].top;
			// eerst de nieuwe top's zetten
			for(var i=insertid; i<dragid; i++) {
				dropobjects[i].setTop(dropobjects[i+1].top);
			}
			for(var i=dragid; i>insertid; i--) {
				dropobjects[i] = dropobjects[i-1];
			}
			tmpobj.setTop(tmptop);
			dropobjects[insertid]=tmpobj;
		} else {
			var tmpobj = dropobjects[dragid];
			var tmptop = dropobjects[insertid].top;
			// eerst de nieuwe top's zetten
			for(var i=insertid; i>dragid; i--) {
				dropobjects[i].setTop(dropobjects[i-1].top);
			}
			for(var i=dragid; i<insertid; i++) {
				dropobjects[i] = dropobjects[i+1];
			}
			tmpobj.setTop(tmptop);
			dropobjects[insertid]=tmpobj;
		}

		changeOrder(dragid,insertid);
	} else {
		dragObj.elNode.style.top  = dragObj.cursorStartY;
	}
}

function getDragIndex(id) {
	for(var i=0; i<dropobjects.length; i++) {
		if(dropobjects[i].id==id) {
			return i;
		}
	}
	return -1;
}

function DropObject(id) {
	this.id = id;
	this.left = 0;
	this.top = 0;
	this.width = 0;
	this.height = 0;
}

DropObject.prototype.initPositions = function() {
	var pos = getElementPosition(this.id);
	this.left = pos.left;
	this.top = pos.top;
	this.width = pos.width;
	this.height = pos.height;
}

DropObject.prototype.setTop = function(top) {
	var myobj = document.getElementById(this.id);
	this.top = top;
	myobj.style.top = top+'px';
}

DropObject.prototype.inArea = function(x,y) {
	if(x > this.left && x < (this.left + this.width)) {
		if(y > this.top) {
			if( y <= (this.top + this.height/2)) {
				return 1;
			} else if( y <= (this.top + this.height) ) {
				return 2;
			}
		}
	}
	return 0;
}

function addDrop(id) {
	dropobjects.push(new DropObject(id));
}

function fillGaps() {
	if(dropobjects.length>2) {
		for(var i=0; i<dropobjects.length-1; i++) {
			dropobjects[i].height = dropobjects[i+1].top-dropobjects[i].top;
		}
		dropobjects[dropobjects.length-1].height = dropobjects[dropobjects.length-2].height;
	}	
	gapsfilled = true;
}

function checkinit() {
	if(dropinit==false) {
		for(var i=0; i<dropobjects.length; i++) {
			dropobjects[i].initPositions();
		}
		dropinit = true;
	}
}

function initDrag() {
	/*
	 * als pagina niet opnieuw wordt geladen moeten we wel opnieuw kunnen initialiseren...
	 */
	dropobjects = new Array();
	gapsfilled = false;
	dragid = -1;
	insertid = -999;
	dropinit = false;
}

var dropobjects = new Array();
var gapsfilled = false;
var dragid = -1;
var insertid = -999;
var dropinit = false;