window.addEvent('domready', function(){
	marker = new Element('div', {'class': 'marker'}).setStyles({'opacity': 0.7}).inject(document.getElement('body'));
	$$('div.draggable').each(function(d){
		d.makeDraggable({
			droppables: $$('td.droppable'), 
			handle: d.getElement('div.title'), 
			onBeforeStart: function(){
				marker.setStyles({'display': 'block', 'height': d.getCoordinates().height, 'width': d.getCoordinates().width}).inject(d, 'after');
				d.setStyles({'position': 'absolute', 'top': (d.getCoordinates().top - d.getStyle('margin-top').toFloat()), 'left': (d.getCoordinates().left - d.getStyle('margin-left').toFloat()), 'width': d.getCoordinates().width, 'opacity': 0.7, 'z-index': 3});
				if (window.console) console.log('Before Start');
			}, 
			onStart: function(){
				if (window.console) console.log('Start');
			}, 
			onEnter: function(el, drop){
				drop.adopt(marker.setStyles({'display': 'block', 'height': el.getCoordinates().height, 'width': el.getCoordinates().width}));
				if (window.console) console.log('Entering');
			}, 
			onLeave: function(el, drop){
				marker.dispose();
				if (window.console) console.log('Leaving');
			}, 
			onDrag: function(el){
				target = null;
				drop = marker.getParent();
				if (drop && drop.getChildren().length > 1){
					kids = drop.getChildren();
					mouseY = this.mouse.now.y;
					kids.each(function(k){
						if (mouseY > (k.getCoordinates().top + Math.round(k.getCoordinates().height / 2))) target = k;
					});
					if (target == null){
						if (kids[0] != marker) marker.inject(drop, 'top');
						if (window.console) console.log('TOP');
					} else {
						if ((target != marker) && (target != marker.getPrevious())) marker.inject(target, 'after');
						if (window.console) console.log('AFTER');
					}
				}
				if (window.console) console.log('Dragging');
			}, 
			onDrop: function(el, drop){
				if (drop) el.setStyles({'position': 'relative', 'top': '0', 'left': '0', 'width': null, 'opacity': 1, 'z-index': 1}).replaces(marker);
				else el.setStyles({'position': 'relative', 'top': '0', 'left': '0', 'opacity': 1, 'z-index': 1});
				if (window.console) console.log('Dropping');
			}, 
			onComplete: function(el){

				if (window.console) console.log('Done');
			}, 
			onCancel: function(el){
				marker.dispose();
				el.setStyles({'position': 'relative', 'top': '0', 'left': '0', 'width': null, 'opacity': 1, 'z-index': 1});
				if (window.console) console.log('Cancel');
			}
		});
	});
});