<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script>

var vectors;
var box;
var transform;


function endDrag(bbox) {
	var bounds = bbox.getBounds();
	setBounds(bounds);
	drawBox(bounds);
	box.deactivate();

	document.getElementById("bbox_drag_instruction").style.display = 'none';
	document.getElementById("bbox_adjust_instruction").style.display = 'block';
}

function moveMap() {
	box.deactivate();
}

function dragNewBox() {
	box.activate();
	transform.deactivate(); //The remove the box with handles
	vectors.destroyFeatures();

	document.getElementById("bbox_drag_instruction").style.display = 'block';
	document.getElementById("bbox_adjust_instruction").style.display = 'none';

	setBounds(null);
}

function boxResize(event) {
	setBounds(event.feature.geometry.bounds);
}

function drawBox(bounds) {
	var feature = new OpenLayers.Feature.Vector(bounds.toGeometry());

	vectors.addFeatures(feature);
	transform.setFeature(feature);
}

function toPrecision(zoom, value) {
	var decimals = Math.pow(10, Math.floor(zoom/3));
	return Math.round(value * decimals) / decimals;
}

function setBounds(bounds) {
	if (bounds == null) {
		document.getElementById("bbox_result").innerHTML = "";
		document.getElementsByName('latitudeFrom')[0].value="";
		document.getElementsByName('latitudeTo')[0].value="";
		document.getElementsByName('longitudeFrom')[0].value="";
		document.getElementsByName('longitudeTo')[0].value="";
		 
	} else {
		b = bounds.clone().transform(map.getProjectionObject(), new OpenLayers.Projection("EPSG:4326"))
		minlon = toPrecision(map.getZoom(), b.left);
		minlat = toPrecision(map.getZoom(), b.bottom);
		maxlon = toPrecision(map.getZoom(), b.right);
		maxlat = toPrecision(map.getZoom(), b.top);
		 
		document.getElementsByName('latitudeFrom')[0].value=minlat;
		document.getElementsByName('latitudeTo')[0].value=maxlat;
		document.getElementsByName('longitudeFrom')[0].value=minlon;
		document.getElementsByName('longitudeTo')[0].value=maxlon;
	}
}

function init() {
	map = new OpenLayers.Map("mapdiv");
	var openstreetmap = new OpenLayers.Layer.OSM();
	map.addLayer(openstreetmap);


	var lonlat = new OpenLayers.LonLat(13.3057215,52.4543191).transform(
			new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
			new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator
	);

	var zoom = 3.5;


	vectors = new OpenLayers.Layer.Vector("Vector Layer", {
		displayInLayerSwitcher: false
	});
	map.addLayer(vectors);
	 
	box = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.RegularPolygon, {
		handlerOptions: {
			sides: 4,
			snapAngle: 90,
			irregular: true,
			persist: true
		}
	});
	box.handler.callbacks.done = endDrag;
	map.addControl(box);
	 
	transform = new OpenLayers.Control.TransformFeature(vectors, {
		rotate: false,
		irregular: true
	});
	transform.events.register("transformcomplete", transform, boxResize);
	map.addControl(transform);

	map.addControl(box);

//	box.activate();

	map.setCenter(lonlat, zoom);

}

</script>


<div id="mapdialog">
<div id="bbox_drag_instruction">
<input type="button" value="Create a box" onclick="dragNewBox();"/>
<input type="button" value="move map" onclick="moveMap();"/>
</div>
<div id="bbox_adjust_instruction">Adjust the box ...or 
<input type="button" value="drag a new box" onclick="dragNewBox();"/>
<input type="button" value="move map" onclick="moveMap();"/>
</div>
<div id="mapdiv"></div>
<p id="bbox_result"> </p>
</div>