var dd_class_div = 'dragbox';
var dd_class_dragbar = 'dragbar';
var dd_storekey = 'dd_';
var dd_opacity_idle = 90;
var dd_opacity_drag = 50;

addUnLoadEvent(function () {
	var divs = $$('div.'+dd_class_div);
	for (var i = 0; i < divs.length; i ++) {
		if (!divs[i].dd_moved || !divs[i].id) continue;
		with (divs[i].style) {
			x = isNaN(parseInt(left)) ? divs[i].offsetLeft : parseInt(left);
			y = isNaN(parseInt(top)) ? divs[i].offsetTop : parseInt(top);
			z = zIndex ? zIndex : 1000;
		}
		storeValue(dd_storekey + divs[i].id, x+','+y+','+z);
	}
});

document.observe('dom:loaded', function (){
	var divs = $$('div.'+dd_class_div);
	if (divs.length == 0) return;

	var dd_dragelement = null;
	var dd_down = false;
	var dd_left = 0;
	var dd_top = 0;
	var dd_zindex = 1000;

	divs.reverse().each(function (div){
		if (div.getStyle('position') != 'absolute') {
			var left = div.cumulativeOffset()[0];
			var top = div.cumulativeOffset()[1];
			div.up('body').insert(div);
			div.setStyle({
					left: left + 'px',
					top: top + 'px',
					position: 'absolute'
				});
		}

		div.writeAttribute('dd_fadeout', null);
		div.writeAttribute('dd_moved', false);

		var db = new Element('span');
		db.addClassName(dd_class_dragbar);
		db.observe('mousedown', function (e) {
				dd_down = true;
				dd_dragelement = e.element().up();
				dd_left = e.pointerX();
				dd_top = e.pointerY();
				dd_dragelement.setOpacity(dd_opacity_drag / 100);
				dd_dragelement.setStyle({zIndex: dd_zindex ++});
			});

		div.insert({'top':db});

		div.observe('mousedown', function (e) {
				div.setStyle({zIndex: dd_zindex ++});
			});

		div.observe('mouseover', function (e){
				if (div == dd_dragelement) return;
				window.clearTimeout(div.dd_fadeout);
				div.setOpacity(1);
			});

		div.observe('mouseout', function (e){
				if (div == dd_dragelement) return;
				div.dd_fadeout = window.setTimeout(function () {
					div.setOpacity(dd_opacity_idle / 100);
				}, 100);
			});

		div.setOpacity(dd_opacity_idle / 100);

		if (div.id) {
			var pos = loadValue(dd_storekey + div.id);
			if (pos) {
				pos = pos.split(',');
				div.setStyle({
						left: pos[0] + 'px',
						top: pos[1] + 'px',
						zIndex: pos[2]
					});
				if (pos[2] >= dd_zindex) dd_zindex = Number(pos[2]) + 1;
			}
		}
	});

	document.observe('mousemove', function (e) {
			if (!dd_down || !dd_dragelement) return;
			e.stop();
			var x = e.pointerX();
			var y = e.pointerY();
			var l = dd_dragelement.cumulativeOffset()[0];
			var t = dd_dragelement.cumulativeOffset()[1];
			dd_dragelement.setStyle({left: (l + x - dd_left) + 'px',
				top: (t + y - dd_top) + 'px'});
			dd_dragelement.dd_moved = true;

			dd_left = x;
			dd_top = y;
		});

	document.observe('mouseup', function () {
			if (dd_down && dd_dragelement) {
				dd_down = false;
				dd_dragelement.setOpacity(1);
				dd_dragelement = null;
				document.body.focus();
			}
		});
});