// reference: http://forum.mootools.net/viewtopic.php?pid=49283#p49283
window.onload=function(){
	// boxes shared vars
	var draggables = $('boxContainer').getElements('.box');
	
	var boxMarker = new Element('div', {
		'class': 'boxMarker',
		'styles': {
			'display': 'none'
		}
	}).inject($E('body'));
	var boxCols = $('boxContainer').getFirst().getChildren().getChildren()[0];

	// boxes drag behavior for each
	draggables.each(function(el){		
		var minimizeFx = new Fx.Slide(el.getElement('.boxContent'));
		
		var boxnum = el.getElement('.boxname').innerHTML;
		
		if(Cookie.get(boxnum+'X') == '' && Cookie.get(boxnum+'Y') == ''){
			Cookie.set(boxnum+"X",el.getLeft(),{duration:7});
			Cookie.set(boxnum+"Y",el.getTop(),{duration:7});
			//alert(el.getTop());
		}else{
			Cookie.set(boxnum+"X",el.getCoordinates().left,{duration:7});
			Cookie.set(boxnum+"Y",el.getCoordinates().top,{duration:7});
		}
		
		// Create left span
		var title = el.getElement('.boxHandle').innerHTML;
		el.getElement('.boxHandle').empty();
		var el2 = new Element('span', {
			'class': 'boxHandleLeft',
			'styles': {
				'float': 'left',
				'position': 'relative'
			}
		}).inject(el.getElement('.boxHandle'));
		//el2.innerHTML = title+ ' ' + Cookie.get(boxnum+'Y');
		el2.innerHTML = title;
		
		el2.ondblclick = function(e) {
			new Event(e).stop();
			minimizeFx.toggle();
		};
		
		// Create right span
		var el2 = new Element('span', {
			'class': 'boxHandleRight',
			'styles': {
				'float': 'right',
				'display':'inline',
				'position': 'relative'
			}
		}).inject(el.getElement('.boxHandle'));
		
		// Create clear
		var el2 = new Element('br', {
			'styles': {
				'clear': 'both'
			}
		}).inject(el.getElement('.boxHandle'));
		
		// Create minimize button
		var el2 = new Element('a', {
			'title': 'Minimize',
			'styles': {
				'z-index': 1, 
				'cursor': 'pointer'
			}
		}).inject(el.getElement('.boxHandleRight'));
		el2.innerHTML = '^';
		
		el2.onclick = function(e) {
			new Event(e).stop();
			minimizeFx.toggle();
		};

		// Create delete button
		/*var e2 = new Element('a', {
			'title': 'Delete',
			'styles': {
				'z-index': 1, 
				'cursor': 'pointer'
			}
		}).inject(el.getElement('.boxHandleRight'));
		e2.innerHTML = 'x';
		e2.onclick = function(e) {
			new Event(e).stop();
			var fx = el.effects({duration: 500, transition: Fx.Transitions.Quart.easeOut});
			fx.start({
				'opacity': 0
			}).chain(function() {
				el.remove();
			});
		};
*/
		// Make each box draggable using the boxHandle
		el.makeDraggable({
			handle: el.getElement('.boxHandleLeft'),
			'onBeforeStart': function() {
				// Introduce the marking box, change the draging box to absolute
				// The order the next 4 lines seems to be important for it to work right in Firefox
				boxMarker.injectAfter(el).setStyles({'display': 'block', 'height': el.getStyle('height')});
				el.setStyles({'opacity': '0.55', 'z-index': '3', 'width': el.getStyle('width'), 'position': 'absolute'});
				el.inject($E('body'));
				el.setStyles({'top': boxMarker.getCoordinates().top, 'left': boxMarker.getCoordinates().left});
			},
			'onComplete': function() {
				// Replace the draging box
				if (window.gecko) {
					el.injectBefore(boxMarker).setStyles({'opacity': '1', 'z-index': '1', 'margin': '0 -5px 10px 0', 'position': 'relative', 'top': '0', 'left': '0'});
				} else {
					el.injectBefore(boxMarker).setStyles({'opacity': '1', 'z-index': '1', 'margin': '0 0 10px 0', 'position': 'relative', 'top': '0', 'left': '0'});
				}
				
				
				Cookie.set(boxnum+"X",el.getLeft(),{duration:7});
				Cookie.set(boxnum+"Y",el.getCoordinates().top,{duration:7});
				// Remove the marking box
			  //  alert(el.getPrevious().getTop()+' = '+el.getCoordinates().top+' = '+el.getNext().getTop());
				boxMarker.inject($E('body')).setStyles({'display': 'none'});
			},
			'onDrag': function() {
				var mouseX = this.mouse.now.x; var mouseY = this.mouse.now.y;
				
				// Work from first column out and top down
				boxTargetCol = boxCols[0];
				boxTargetDiv = null;
				
				// X - Which column?
				boxCols.each(function(el, i){
					if (mouseX > el.getCoordinates().left) 
						boxTargetCol = el;
					/*if (boxCols[0] == null)
						$('debug').innerHTML += el.getChildren() + '\n';*/
				});
				
				// Y - If we're half way or more past this box then insert it after this one
				boxTargetCol.getChildren().each(function(el, i){
					if (mouseY > (el.getCoordinates().top + Math.round(el.getCoordinates().height / 2))) 
						boxTargetDiv = el;
				});

				// Place the marker
				if (boxTargetDiv == null) {
					// On top
					if (boxTargetCol.getFirst() != boxMarker) { 
						// make sure a child element exists within the column
						if (boxTargetCol.getFirst() != null) {
							boxMarker.injectBefore(boxTargetCol.getFirst());
						// otherwise we'll inject it as the only element.
						} else {
							boxMarker.inject(boxTargetCol);
						}
					}
				} else {
					// Or after a box
					if ((boxTargetDiv != boxMarker) && (boxTargetDiv != boxMarker.getPrevious())) 
						boxMarker.inject(boxTargetDiv, 'after');
				}
			}
		});
	});
}