var dragObj = null;
var startObjPos = null;
var startMousePos = null;
var accZIndex = 1;
var baseObj = null;
function addEvent (obj, event, func, x)
{
	if (obj.addEventListener)
		obj.addEventListener(event, func, false);
	else
		obj.attachEvent('on' + event, func);
}

function getMousePos(ev) {
	if (ev.pageX) {
		return {x: ev.pageX, y: ev.pageY};
	}
	return {
		x: (event.clientX + document.body.scrollLeft), 
		y: (event.clientY + document.body.scrollTop)
		}
}  

function changeZIndex(obj)
{
	if(obj && obj.parentNode!=baseObj)obj=obj.parentNode;
	if(obj && obj.parentNode==baseObj){
		if (obj.style && obj.style.zIndex!=accZIndex){
			obj.style.zIndex = ++accZIndex;
		}
	}
}

function startDrag(ev)
{
	try {
		dragObj = ev.target;
		if (!dragObj) 
			dragObj = ev.srcElement;
		changeZIndex(dragObj);
		if(!dragObj || dragObj.nodeName.toLowerCase() != 'div' ||
		   !dragObj.parentNode || dragObj.parentNode.parentNode!=baseObj){
			dragObj = null;
			return false;
		}
		if(ev.preventDefault)ev.preventDefault();
		dragObj = dragObj.parentNode;
		startObjPos = {x: dragObj.offsetLeft, 
			y: dragObj.offsetTop};
		startMousePos = getMousePos(ev);
	} catch (e) {
		dumpError(e);
	}
	return false;
}

function stopDrag(ev)
{
	dragObj = null;
}

function mouseMoved(ev)
{
	try {
		var pos = getMousePos(ev);
		if (dragObj && startObjPos) {
			var newx = (pos.x - startMousePos.x) + startObjPos.x;
			var newy = (pos.y - startMousePos.y) + startObjPos.y;
			dragObj.style.top = newy + 'px';
			dragObj.style.left = newx + 'px';
		}
	} catch(e) {
		dumpError(e);
	}
}

function dumpError(e)
{
  //document.getElementById('errorconsole').innerHTML = "Error: " + e;
}

function placeItems(ev)
{
	baseObj = document.getElementById('board');
	var x=baseObj.childNodes;
	var i,item;
	var xp,yp;
	var xw;
	var maxy;
	if(navigator.userAgent.match(/MSIE/)) baseObj.style.width="95%";
	xp=0; yp=0;
	maxy=0;
	xw=baseObj.clientWidth;
	for(i=0;i<x.length;i++){
		item=x[i];
		if(item.nodeName.toLowerCase()=='div'){
			if(xp>0 && xp+item.clientWidth>=xw){
				xp=0;
				yp+=maxy+10;
				maxy=0;
			}
			item.style.top=yp+'px';
			item.style.left=xp+'px';
			xp+=item.clientWidth+10;
			if(maxy<item.clientHeight)maxy=item.clientHeight;
		}
	}
}

addEvent(document, 'mousemove', mouseMoved, false);
addEvent(document.getElementById('board'), 'mousedown', startDrag, true);
addEvent(document.getElementById('board'), 'mouseup', stopDrag, false);
addEvent(document,'load',placeItems,false);
placeItems();