function DragZoomControl(opts_boxStyle, opts_other, opts_callbacks) {
this.globals = {
draggingOn: false,
cornerTopDiv: null,
cornerRightDiv: null,
cornerBottomDiv: null,
cornerLeftDiv: null,
mapPosition: null,
outlineDiv: null,
mapWidth: 0,
mapHeight: 0,
mapRatio: 0,
startX: 0,
startY: 0,
borderCorrection: 0
};
this.globals.style = {
opacity: .2,
fillColor: "#000",
border: "2px solid blue"
};
var style = this.globals.style;
for (var s in opts_boxStyle) {
style[s]=opts_boxStyle[s];
}
var borderStyleArray = style.border.split(' ');
style.outlineWidth = parseInt(borderStyleArray[0].replace(/\D/g,''));
style.outlineColor = borderStyleArray[2];
style.alphaIE = 'alpha(opacity=' + (style.opacity * 100) + ')';
this.globals.backStack = [];
this.globals.options={
buttonHTML: 'zoom ...',
buttonStartingStyle: 
{width: '52px', border: '1px solid black', padding: '2px'},
buttonStyle: {background: '#FFF'},
backButtonHTML: 'zoom back',
backButtonStyle: {background: '#FFF', display: 'none'},
buttonZoomingHTML: 'Drag a region on the map',
buttonZoomingStyle: {background: '#FF0'},
overlayRemoveTime: 6000,
backButtonEnabled: false,
stickyZoomEnabled: false
};
for (var s in opts_other) {
this.globals.options[s] = opts_other[s]
}
if (opts_callbacks == null) {
opts_callbacks = {}
}
this.globals.callbacks = opts_callbacks;
}
DragZoomControl.prototype = new GControl();
DragZoomControl.prototype.saveMapContext = function(text) {
if (this.globals.options.backButtonEnabled) {
this.saveBackContext_(text,true);
this.globals.backButtonDiv.style.display = 'block';
}	
};
DragZoomControl.prototype.initiateZoom = function() {this.buttonclick_()};
DragZoomControl.prototype.initiateZoomBack = function() {if (this.globals.options.backButtonEnabled) this.backbuttonclick_()};	
DragZoomControl.prototype.initButton_ = function(buttonContainerDiv) {
var G = this.globals;
var buttonDiv = document.createElement('div');
buttonDiv.innerHTML = G.options.buttonHTML;
buttonDiv.id = 'gzoom-control';
DragZoomUtil.style([buttonDiv], {cursor: 'pointer', zIndex:200});
DragZoomUtil.style([buttonDiv], G.options.buttonStartingStyle);
DragZoomUtil.style([buttonDiv], G.options.buttonStyle);
buttonContainerDiv.appendChild(buttonDiv);
return buttonDiv;
};
DragZoomControl.prototype.initBackButton_ = function(buttonContainerDiv) {
var G = this.globals;
var backButtonDiv = document.createElement('div');
backButtonDiv.innerHTML = G.options.backButtonHTML;
backButtonDiv.id = 'gzoom-back';
DragZoomUtil.style([backButtonDiv], {cursor: 'pointer', zIndex:200});
DragZoomUtil.style([backButtonDiv], G.options.buttonStartingStyle);
DragZoomUtil.style([backButtonDiv], G.options.backButtonStyle);
buttonContainerDiv.appendChild(backButtonDiv);
return backButtonDiv;
};
DragZoomControl.prototype.setButtonMode_ = function(mode){
var G = this.globals;
if (mode == 'zooming') {
G.buttonDiv.innerHTML = G.options.buttonZoomingHTML;
DragZoomUtil.style([G.buttonDiv], G.options.buttonStartingStyle);
DragZoomUtil.style([G.buttonDiv], G.options.buttonZoomingStyle);
} else {
G.buttonDiv.innerHTML = G.options.buttonHTML;
DragZoomUtil.style([G.buttonDiv], G.options.buttonStartingStyle);
DragZoomUtil.style([G.buttonDiv], G.options.buttonStyle);
}
};
DragZoomControl.prototype.initialize = function(map) {
var G = this.globals;
var me = this;
var mapDiv = map.getContainer();	
var buttonContainerDiv = document.createElement("div");	
DragZoomUtil.style([buttonContainerDiv], {cursor: 'pointer', zIndex: 150});
var buttonDiv = this.initButton_(buttonContainerDiv);
var backButtonDiv = this.initBackButton_(buttonContainerDiv);					
mapDiv.appendChild(buttonContainerDiv);
var zoomDiv = document.createElement("div");
zoomDiv.id ='gzoom-map-cover';
zoomDiv.innerHTML ='<div id="gzoom-outline" style="position:absolute;display:none;"></div><div id="gzoom-cornerTopDiv" style="position:absolute;display:none;"></div><div id="gzoom-cornerLeftDiv" style="position:absolute;display:none;"></div><div id="gzoom-cornerRightDiv" style="position:absolute;display:none;"></div><div id="gzoom-cornerBottomDiv" style="position:absolute;display:none;"></div>';
DragZoomUtil.style([zoomDiv], {position: 'absolute', display: 'none', overflow: 'hidden', cursor: 'crosshair', zIndex: 101});
mapDiv.appendChild(zoomDiv);
GEvent.addDomListener(buttonDiv, 'click', function(e) {
me.buttonclick_(e);
});
GEvent.addDomListener(backButtonDiv, 'click', function(e) {
me.backbuttonclick_(e);
});
GEvent.addDomListener(zoomDiv, 'mousedown', function(e) {
me.coverMousedown_(e);
});
GEvent.addDomListener(document, 'mousemove', function(e) {
me.drag_(e);
});
GEvent.addDomListener(document, 'mouseup', function(e) {
me.mouseup_(e);
});
G.mapPosition = DragZoomUtil.getElementPosition(mapDiv);
G.outlineDiv = DragZoomUtil.gE("gzoom-outline");	
G.buttonDiv = DragZoomUtil.gE("gzoom-control");
G.backButtonDiv = DragZoomUtil.gE("gzoom-back");
G.mapCover = DragZoomUtil.gE("gzoom-map-cover");
G.cornerTopDiv = DragZoomUtil.gE("gzoom-cornerTopDiv");
G.cornerRightDiv = DragZoomUtil.gE("gzoom-cornerRightDiv");
G.cornerBottomDiv = DragZoomUtil.gE("gzoom-cornerBottomDiv");
G.cornerLeftDiv = DragZoomUtil.gE("gzoom-cornerLeftDiv");
G.map = map;
G.borderCorrection = G.style.outlineWidth * 2;	
this.setDimensions_();
this.initStyles_();
G.mapCover.onselectstart = function() {return false}; 
return buttonContainerDiv;
};
DragZoomControl.prototype.getDefaultPosition = function() {
return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(3, 120));
};
DragZoomControl.prototype.coverMousedown_ = function(e){
var G = this.globals;
var pos = this.getRelPos_(e);
G.startX = pos.left;
G.startY = pos.top;
DragZoomUtil.style([G.mapCover], {background: 'transparent', opacity: 1, filter: 'alpha(opacity=100)'});
DragZoomUtil.style([G.outlineDiv], {left: G.startX + 'px', top: G.startY + 'px', display: 'block', width: '1px', height: '1px'});
G.draggingOn = true;
G.cornerTopDiv.style.top = (G.startY - G.mapHeight) + 'px';
G.cornerTopDiv.style.display ='block';
G.cornerLeftDiv.style.left = (G.startX - G.mapWidth) +'px';
G.cornerLeftDiv.style.top = G.startY + 'px';
G.cornerLeftDiv.style.display = 'block';
G.cornerRightDiv.style.left = G.startX + 'px';
G.cornerRightDiv.style.top = G.startY + 'px';
G.cornerRightDiv.style.display = 'block';
G.cornerBottomDiv.style.left = G.startX + 'px';
G.cornerBottomDiv.style.top = G.startY + 'px';
G.cornerBottomDiv.style.width = '0px';
G.cornerBottomDiv.style.display = 'block';
if (G.callbacks.dragstart != null) {
G.callbacks.dragstart(G.startX, G.startY);
}
return false;
};
DragZoomControl.prototype.drag_ = function(e){
var G = this.globals;
if(G.draggingOn) {
var pos = this.getRelPos_(e);
rect = this.getRectangle_(G.startX, G.startY, pos, G.mapRatio);
if (rect.left) {
addX = -rect.width;			
} else { 
addX = 0;
}
if (rect.top) {
addY = -rect.height;
} else {
addY = 0;
}
DragZoomUtil.style([G.outlineDiv], {left: G.startX + addX + 'px', top: G.startY + addY + 'px', display: 'block', width: '1px', height: '1px'});	
G.outlineDiv.style.width = rect.width + "px";
G.outlineDiv.style.height = rect.height + "px";
G.cornerTopDiv.style.height = ((G.startY + addY) - (G.startY - G.mapHeight)) + 'px';
G.cornerLeftDiv.style.top = (G.startY + addY) + 'px';
G.cornerLeftDiv.style.width = ((G.startX + addX) - (G.startX - G.mapWidth)) + 'px';
G.cornerRightDiv.style.top = G.cornerLeftDiv.style.top;
G.cornerRightDiv.style.left = (G.startX + addX + rect.width + G.borderCorrection) + 'px';
G.cornerBottomDiv.style.top = (G.startY + addY + rect.height + G.borderCorrection) + 'px';
G.cornerBottomDiv.style.left = (G.startX - G.mapWidth + ((G.startX + addX) - (G.startX - G.mapWidth))) + 'px';
G.cornerBottomDiv.style.width = (rect.width + G.borderCorrection) + 'px';
if (G.callbacks.dragging != null) {
G.callbacks.dragging(G.startX, G.startY, rect.endX, rect.endY)
}	
return false;
}
};
DragZoomControl.prototype.mouseup_ = function(e){
var G = this.globals;
if (G.draggingOn) {
var pos = this.getRelPos_(e);
G.draggingOn = false;
var rect = this.getRectangle_(G.startX, G.startY, pos, G.mapRatio);
if (rect.left) rect.endX = rect.startX - rect.width;
if (rect.top) rect.endY = rect.startY - rect.height;
this.resetDragZoom_();
var nwpx = new GPoint(rect.startX, rect.startY);
var nepx = new GPoint(rect.endX, rect.startY);
var sepx = new GPoint(rect.endX, rect.endY);
var swpx = new GPoint(rect.startX, rect.endY);
var nw = G.map.fromContainerPixelToLatLng(nwpx); 
var ne = G.map.fromContainerPixelToLatLng(nepx); 
var se = G.map.fromContainerPixelToLatLng(sepx); 
var sw = G.map.fromContainerPixelToLatLng(swpx); 
var zoomAreaPoly = new GPolyline([nw, ne, se, sw, nw], G.style.outlineColor, G.style.outlineWidth + 1,.4);
try{
G.map.addOverlay(zoomAreaPoly);
setTimeout (function() {G.map.removeOverlay(zoomAreaPoly)}, G.options.overlayRemoveTime);
}catch(e) {}
polyBounds = zoomAreaPoly.getBounds();
var ne = polyBounds.getNorthEast();
var sw = polyBounds.getSouthWest();
var se = new GLatLng(sw.lat(), ne.lng());
var nw = new GLatLng(ne.lat(), sw.lng());
zoomLevel = G.map.getBoundsZoomLevel(polyBounds);
center = polyBounds.getCenter();
G.map.setCenter(center, zoomLevel);
if (G.callbacks.dragend != null) {
G.callbacks.dragend(nw, ne, se, sw, nwpx, nepx, sepx, swpx);
}
if (G.options.stickyZoomEnabled) {
this.initCover_();
if (G.options.backButtonEnabled) this.saveBackContext_(G.options.backButtonHTML,false); 
G.backButtonDiv.style.display='none';
}
}
};
DragZoomControl.prototype.setDimensions_ = function() {
var G = this.globals;
var mapSize = G.map.getSize();
G.mapWidth = mapSize.width;
G.mapHeight = mapSize.height;
G.mapRatio = G.mapHeight / G.mapWidth;
DragZoomUtil.style([G.mapCover, G.cornerTopDiv, G.cornerRightDiv, G.cornerBottomDiv, G.cornerLeftDiv], 
{left: '0px',width: G.mapWidth + 'px', height: G.mapHeight +'px'});
};
DragZoomControl.prototype.initStyles_ = function(){
var G = this.globals;
DragZoomUtil.style([G.mapCover, G.cornerTopDiv, G.cornerRightDiv, G.cornerBottomDiv, G.cornerLeftDiv], 
{filter: G.style.alphaIE, opacity: G.style.opacity, background:G.style.fillColor});
G.outlineDiv.style.border = G.style.border;
};
DragZoomControl.prototype.buttonclick_ = function(){
var G = this.globals;	
G.backButtonDiv.style.display='none';
if (G.mapCover.style.display == 'block') { 
this.resetDragZoom_();
if (G.options.backButtonEnabled) {
this.restoreBackContext_();
if (G.backStack.length==0) G.backButtonDiv.style.display='none';
}
} else {
this.initCover_();
if ( G.options.backButtonEnabled ) this.saveBackContext_(G.options.backButtonHTML,false);
}
};
DragZoomControl.prototype.backbuttonclick_ = function(){
var G = this.globals;	
if (G.options.backButtonEnabled && G.backStack.length > 0) {
this.restoreBackContext_();
if (G.callbacks['backbuttonclick'] != null) {
G.callbacks.backbuttonclick(G.methodCall);
}
}
};
DragZoomControl.prototype.saveBackContext_ = function(text,methodCall) {
var G = this.globals;
var backFrame = {};
backFrame["center"] = G.map.getCenter();
backFrame["zoom"] = G.map.getZoom();
backFrame["maptype"] = G.map.getCurrentMapType();
backFrame["text"] = G.backButtonDiv.innerHTML;
backFrame["methodCall"] = methodCall;
G.backStack.push(backFrame);
G.backButtonDiv.innerHTML = text;
};
DragZoomControl.prototype.restoreBackContext_ = function() {
var G = this.globals;
var backFrame = G.backStack.pop();
G.map.setCenter(backFrame["center"],backFrame["zoom"],backFrame["maptype"]);
G.backButtonDiv.innerHTML = backFrame["text"];
G.methodCall = backFrame["methodCall"];
if (G.backStack.length==0) G.backButtonDiv.style.display = 'none';
};
DragZoomControl.prototype.initCover_ = function(){
var G = this.globals;
G.mapPosition = DragZoomUtil.getElementPosition(G.map.getContainer());
this.setDimensions_();
this.setButtonMode_('zooming');
DragZoomUtil.style([G.mapCover], {display: 'block', background: G.style.fillColor});
DragZoomUtil.style([G.outlineDiv], {width: '0px', height: '0px'});
if(G.callbacks['buttonclick'] != null){
G.callbacks.buttonclick();
}
};
DragZoomControl.prototype.getRelPos_ = function(e) {
var pos = DragZoomUtil.getMousePosition(e);
var G = this.globals;
return {top: (pos.top - G.mapPosition.top), 
left: (pos.left - G.mapPosition.left)};
};
DragZoomControl.prototype.getRectangle_ = function(startX, startY, pos, ratio){
var left = false;
var top = false;
var dX = pos.left - startX;
var dY = pos.top - startY;	
if (dX < 0) {
dX = dX * -1;
left = true;
}
if (dY < 0) {
dY = dY * -1;
top = true;
}
delta = dX > dY ? dX : dY;
return {
startX: startX,
startY: startY,
endX: startX + delta,
endY: startY + parseInt(delta * ratio),
width: delta,
height: parseInt(delta * ratio),
left:left,
top:top
}
};
DragZoomControl.prototype.resetDragZoom_ = function() {
var G = this.globals;
DragZoomUtil.style([G.mapCover, G.cornerTopDiv, G.cornerRightDiv, G.cornerBottomDiv, G.cornerLeftDiv], 
{display: 'none', opacity: G.style.opacity, filter: G.style.alphaIE});
G.outlineDiv.style.display = 'none';	
this.setButtonMode_('normal');
if (G.options.backButtonEnabled  && (G.backStack.length > 0)) G.backButtonDiv.style.display = 'block';
};
var DragZoomUtil={};
DragZoomUtil.gE = function(sId) {
return document.getElementById(sId);
}
DragZoomUtil.getMousePosition = function(e) {
var posX = 0;
var posY = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posX = e.pageX;
posY = e.pageY;
} else if (e.clientX || e.clientY){
posX = e.clientX + 
(document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
posY = e.clientY + 
(document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
}	
return {left: posX, top: posY};
};
DragZoomUtil.getElementPosition = function(element) {
var leftPos = element.offsetLeft;
var topPos = element.offsetTop; 
var parElement = element.offsetParent;
while (parElement != null ) {
leftPos += parElement.offsetLeft;
topPos += parElement.offsetTop;
parElement = parElement.offsetParent;
}
return {left: leftPos, top: topPos};
};
DragZoomUtil.style = function(elements, styles){
if (typeof(elements) == 'string') {
elements = DragZoomUtil.getManyElements(elements);
}
for (var i = 0; i < elements.length; i++){
for (var s in styles) { 
elements[i].style[s] = styles[s];
}
}
};
DragZoomUtil.getManyElements = function(idsString){		
var idsArray = idsString.split(',');
var elements = [];
for (var i = 0; i < idsArray.length; i++){
elements[elements.length] = DragZoomUtil.gE(idsArray[i])
};
return elements;
};