window.addEvent("domready",function(){

		// WebBoxes shared vars
		var draggables = $$('.webBox');
        var webBoxMarker = new Element('div').addClass('webBoxMarker').setStyles({'display': 'none'}).injectInside($E('body'));
        var webBoxCols = $('webBoxContainer').getChildren().getChildren()[0];

		draggables.getElements('.openclose').each(function(item){
			item.addEvent("mousedown",function(event){
				new Event(event).stop()
			}).addEvent("click",function(event){
				var p = item.getParent().getParent().getNext();
				p.setStyle('display',p.getStyle('display')=="none"?"block":"none");
			})
		});

        // WebBoxes drag behavior for each
		draggables.each(function(el){
			// Make each webBox draggable using the handle
			el.makeDraggable({
				handle: el.getElementsBySelector('.handle')[0],
				'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
					webBoxMarker.injectAfter(el).setStyles({'display': 'block', 'height': el.getStyle('height')});
					el.setStyles({'opacity': '0.55', 'z-index': '3', 'width': el.getStyle('width'), 'position': 'absolute'});
					el.injectInside($E('body'));
					el.setStyles({'top': webBoxMarker.getCoordinates().top + "px", 'left': webBoxMarker.getCoordinates().left + "px"});
				},
				'onComplete': function() {
					// Replace the draging webBox
					el.injectBefore(webBoxMarker).setStyles({'opacity': '1', 'z-index': '1', 'margin': '0 0 10px 0', 'position': 'relative', 'top': '0', 'left': '0'});

					// Remove the marking box
					webBoxMarker.injectInside($E('body')).setStyles({'display': 'none'});
					
					var qs = "";$('webBoxContainer').getChildren()[0].getChildren().each(function(col,cindex){col.getChildren().each(function(gadget, rindex){qs+="&g["+gadget.getAttribute("gid")+"]="+cindex+":"+rindex;});});
					new Image().src = "./?u"+qs+"&t="+new Date().getTime();
				},
				'onDrag': function() {
				    var mouseX = this.mouse.now.x; var mouseY = this.mouse.now.y;

				     // Work from first column out and top down
				    webBoxTargetCol = webBoxCols[0];
				    webBoxTargetDiv = null;

					// X - Which column?
				    webBoxCols.each(function(el, i){
				        if (mouseX > el.getCoordinates().left) webBoxTargetCol = el;
				    });

				    // Y - If we're half way or more past this webBox then insert it after this one
				    webBoxTargetCol.getChildren().each(function(el, i){
			            if (mouseY > (el.getCoordinates().top + Math.round(el.getCoordinates().height / 2))) webBoxTargetDiv = el;
				    });

					// Place the marker
				    if (webBoxTargetDiv == null)
				    {
						// On top
						if (webBoxTargetCol.getChildren()[0] != webBoxMarker) webBoxMarker.injectTop(webBoxTargetCol);
					}
					else
					{
						// Or after a webBox
						if ((webBoxTargetDiv != webBoxMarker) && (webBoxTargetDiv != webBoxMarker.getPrevious())) webBoxMarker.injectAfter(webBoxTargetDiv);
					}
				}
			});
		});
	});