<script type="text/javascript">
	gekkoBlockPlacer = new Object();
	gekkoBlockPlacer.positions = new Array();
	gekkoBlockPlacer.compile = function(form) {
		var buff = new Array();
		for (var i = 0; i < gekkoBlockPlacer.positions.length; i++) {
			var container = gekkoBlockPlacer.positions[i];
			container.items = new Array();
			for (var j = 0; j < container.childNodes.length; j++) {
				var block = container.childNodes[j];
				if (block.className == 'gekkoBlockPlacer')
					container.items.push(block.blockId);
			}
			buff.push(container.id.substr(5)+':'+container.items.join(','));
		}
		form.positions.value = buff.join('|');
		return true;
	}
	gekkoBlockPlacer.addShields = function () {
		var divs = document.getElementsByTagName('DIV');

		for (var i = 0; i < divs.length; i++) {
			if (divs[i].className == 'gekkoBlockPlacer')
				this.createShield(divs[i]);
		}
	}
	gekkoBlockPlacer.createShield = function (object) {

		if (!object.shield) {
			var shield = document.createElement('DIV');
			shield.className = 'shield';
			//shield.style.border = '1px solid red';
			object.appendChild(shield);
			object.shield = shield;
		} else {
			var shield = object.shield;
		}

		var geom = document.getElementGeometry(object);

		shield.style.display = 'block';
		shield.style.position = 'absolute';
		shield.style.top = geom.top+'px';
		shield.style.left = geom.left+'px';
		shield.style.width = geom.width+'px';
		shield.style.height = ((geom.height > 35) ? geom.height : 35)+'px';
	}
	gekkoBlockPlacer.init = function() {

		var divs = document.getElementsByTagName('DIV');

		var control = gekkoDragAndDrop.newControl();

		gekkoDragAndDrop.setOption(control, 'showContainerId', true);
		gekkoDragAndDrop.setOption(control, 'dragOnly', false);

		for (var i = 0; i < divs.length; i++) {
			if (divs[i].id.substr(0, 5) == 'block' && divs[i].id != 'blockC') {
				for (j = 0; j < divs[i].childNodes.length; j++) {
					var child = divs[i].childNodes[j];
					if (child.nodeName.toLowerCase() == 'div') {
						// drag and drop
						var container = document.createElement('DIV');

						container.className = 'gekkoBlockPlacer';
						container.blockId = child.id.replace(/^[^_]*_/, '');

						if (container.blockId) {

							divs[i].insertBefore(container, child);
							container.appendChild(child);

							container.ondragstart = function (object) {
								var container = object;
								var shield = container.shield;
								shield.style.width = shield.style.height = shield.style.top = shield.style.left = '0px';
								shield.style.position = 'relative';
							}

							container.ondragstop = function () {
								gekkoBlockPlacer.addShields();
							}

							gekkoDragAndDrop.makeDraggable(control, container);

							// contexmenu
							var menu = gekkoContextMenu.create(container);
							gekkoContextMenu.appendContent(menu, new String(unescape('{V_EDIT}')).replace('__id__', container.blockId));
							gekkoContextMenu.appendContent(menu, new String(unescape('{V_DELETE}')).replace('__id__', container.blockId));
						}
					}
				}
				gekkoBlockPlacer.positions.push(divs[i]);
				gekkoDragAndDrop.addContainer(control, divs[i]);
				var menu = gekkoContextMenu.create(divs[i]);
				gekkoContextMenu.appendContent(menu, new String(unescape('{V_CREATE}')).replace('__position__', divs[i].id.replace('block', '')));
			}
		}
		this.addShields();
	};

	document.setEventListener(window, "load", function() { gekkoBlockPlacer.init(); });
</script>

{=mkMessageBox("info", "{L_BLOCKS_POSITIONING_MODE}")=}
<form action="{C_SITE.URL}modules/blocks/main.act.php" onsubmit="return gekkoBlockPlacer.compile(this);" method="post">
	<input type="hidden" name="action" value="block_placer" />
	<input type="hidden" name="positions" value="" />
	<input type="hidden" name="return" value="{V_RETURN}" />
	<label>
		{L_ACT_AS_MODULE}:
		<select onchange="location.href='{=urlevalprototype("index.php/module=admin/base=blocks/action=block_placer?test_module=")=}'+escape(this.value)">
		{=mkselect(unserialize("{V_TEST_MODULES}"), "{V_TEST_MODULE}")=}
		</select>
	</label>
	<div class="buttons">
		<button type="button" onclick="history.back(1)">{=mkIcon("back.png", 16)=} {L_GO_BACK}</button>
		<button type="submit">{=mkIcon("backup.png", 16)=} {L_SAVE_POSITIONS}</button>
	</div>
</form>