
function DragZoomOutControl(opts_boxStyle, opts_other, opts_callbacks) {
  // Holds all information needed globally
  // Not all globals2 are initialized here
  this.globals2 = {
    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
  };

  //box style options
  this.globals2.style = {
    opacity: 0,
    fillColor: "#ffffff",
    border: "2px solid blue"
  };

  var style = this.globals2.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=0)';
 
  // Other options
  this.globals2.options={
    buttonHTML: 'zoom ...',
    buttonStartingStyle: 
      {width: '52px', border: '1px solid black', padding: '2px'},
    buttonStyle: {background: '#FFF'},
    buttonZoomingHTML: 'Drag a region on the map',
    buttonZoomingStyle: {background: '#000000'},
    overlayRemoveTime: 10,
    stickyZoomEnabled: true
  };
	
  for (var s in opts_other) {
    this.globals2.options[s] = opts_other[s]
  }

  // callbacks: buttonclick, dragstart, dragging, dragend
  if (opts_callbacks == null) {
    opts_callbacks = {}
  }
  this.globals2.callbacks = opts_callbacks;
}
try
{
    DragZoomOutControl.prototype = new GControl();
}
catch (ex)
{
}
/**
 * Method called to initiate a dragZoomOut as if the user had clicked the dragZoomOut button.
 */
DragZoomOutControl.prototype.initiateZoom = function() {this.buttonclick_()};

DragZoomOutControl.prototype.resetZoom = function() {this.resetDragZoomOut_()};

/**
 * Is called by GMap2's addOverlay method. Creates the zoom control
 * divs and appends to the map div.
 * @param {GMap2} map The map that has had this DragZoomOutControl added to it.
 * @return {DOM Object} Div that holds the gzoomcontrol button
 */ 
DragZoomOutControl.prototype.initialize = function(map) {
  var G = this.globals2;
  var me = this;
  var mapDiv = map.getContainer();
 
  // Create div for navigation buttons
    var navDiv = document.createElement("div");
    navDiv.id ='gNav';
    
    navDiv.innerHTML = '<table><tr><td>&nbsp;</td><td><img src="images/uparrow.gif" width="19" height="19" alt="Pan Up" onclick="map.panDirection(0,1);" /></td><td>&nbsp;</td></tr><tr><td><img src="images/leftarrow.gif" width="19" height="19" alt="Pan Left" onclick="map.panDirection(1,0);" /></td><td>&nbsp;</td><td><img src="images/rightarrow.gif" width="19" height="19" alt="Pan Right" onclick="map.panDirection(-1,0);" /></td></tr><tr><td>&nbsp;</td><td><img src="images/downarrow.gif" width="19" height="19" alt="Pan Down" onclick="map.panDirection(0,-1);" /></td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td><img src="images/plussign.gif" width="19" height="19" alt="Zoom In" onclick="map.zoomIn();" /></td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td><img src="images/negsign.gif" width="19" height="19" alt="Zoom Out" onclick="map.zoomOut();" /></td><td>&nbsp;</td></tr></table>';
    DragZoomOutUtil.style([navDiv], {position: 'absolute', display: 'block', overflow: 'hidden', cursor: 'hand', zIndex: 102, top: '10px', right: '10px'});
    mapDiv.appendChild(navDiv);
    
//    var contentsDiv = document.createElement("div");
//    contentsDiv.id = 'gContents';
//    contentsDiv.setAttribute("dojoType", "dijit.TitlePane");
//    contentsDiv.setAttribute("title", "Map Contents");
//    contentsDiv.setAttribute("open", "true");
//    contentsDiv.setAttribute("style", "filter:alpha(opacity=90);-moz-opacity: 0.9; opacity: 0.9; width:300px; font-family:Arial, Helvetica, sans-serif");
//    contentsDiv.innerHTML = '<div style="overflow: auto; height: 300px;"><div id="basic-accordian" ><div id="test-header" class="accordion_headings header_highlight" >Home</div><div id="test-content"><div class="accordion_child">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ligula nisl, egestas non, pharetra vel, scelerisque accumsan, lacus. Proin nibh. Aenean dapibus. Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.<br /><br /> Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.</div></div><div id="test1-header" class="accordion_headings" >About Us</div><div id="test1-content"><div class="accordion_child">Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.</div></div><div id="test2-header" class="accordion_headings" >Downloads</div><div id="test2-content"><div class="accordion_child">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ligula nisl, egestas non, pharetra vel, scelerisque accumsan, lacus. Proin nibh. Aenean dapibus. Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.<br /></div></div></div></div>';

//    var contentsDiv = document.createElement("div");
//    contentsDiv.id = 'gContents';
//    contentsDiv.innerHTML = '<div dojoType="dijit.TitlePane" title="Layers" id="layers_panel" open="false"  style="filter:alpha(opacity=90);-moz-opacity: 0.9; opacity: 0.9; font-family:Arial, Helvetica, sans-serif">Stuff Here 1</div><div dojoType="dijit.TitlePane" title="Measure" id="measure_frame" open="false"  style="filter:alpha(opacity=90);-moz-opacity: 0.9; opacity: 0.9; font-family:Arial, Helvetica, sans-serif">Stuff Here 2</div><div dojoType="dijit.TitlePane" title="Results" id="results_panel" open="false"  style="filter:alpha(opacity=90);-moz-opacity: 0.9; opacity: 0.9; font-family:Arial, Helvetica, sans-serif">Stuff Here 3</div>';
//    DragZoomOutUtil.style([contentsDiv], {position: 'absolute', display: 'block', overflow: 'hidden', cursor: 'hand', zIndex: 102, top: '5px', right: '10px', opacity: 90, width: '200px' });
//    mapDiv.appendChild(contentsDiv);


    var buttonContainerDiv = document.createElement("div");	
    DragZoomOutUtil.style([buttonContainerDiv], {cursor: 'pointer', zIndex: 150});


//


  // create and init the zoom button
    //DOM:button
//    var buttonDiv = this.initButton_(buttonContainerDiv);
  
  // Add the two buttons to the map 					
    //mapDiv.appendChild(buttonContainerDiv);
 
  //DOM:map covers
    var zoomDiv = document.createElement("div");
    zoomDiv.id ='gzoomout-map-cover';
    zoomDiv.innerHTML ='<div id="gzoomout-outline" style="position:absolute;display:none;"></div><div id="gzoomout-cornerTopDiv" style="position:absolute;display:none;"></div><div id="gzoomout-cornerLeftDiv" style="position:absolute;display:none;"></div><div id="gzoomout-cornerRightDiv" style="position:absolute;display:none;"></div><div id="gzoomout-cornerBottomDiv" style="position:absolute;display:none;"></div>';
    DragZoomOutUtil.style([zoomDiv], {position: 'absolute', display: 'none', overflow: 'hidden', cursor: 'crosshair', zIndex: 101});
    mapDiv.appendChild(zoomDiv);
  
  // add event listeners
//    GEvent.addDomListener(buttonDiv, 'click', function(e) {
//      me.buttonclick_(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);
    });
  
  // get globals2
    G.mapPosition = DragZoomOutUtil.getElementPosition(mapDiv);
    G.outlineDiv = DragZoomOutUtil.gE("gzoomout-outline");	
//    G.buttonDiv = DragZoomOutUtil.gE("gzoomout-control");
    G.mapCover = DragZoomOutUtil.gE("gzoomout-map-cover");
    G.cornerTopDiv = DragZoomOutUtil.gE("gzoomout-cornerTopDiv");
    G.cornerRightDiv = DragZoomOutUtil.gE("gzoomout-cornerRightDiv");
    G.cornerBottomDiv = DragZoomOutUtil.gE("gzoomout-cornerBottomDiv");
    G.cornerLeftDiv = DragZoomOutUtil.gE("gzoomout-cornerLeftDiv");
    G.map = map;
  
    G.borderCorrection = G.style.outlineWidth * 2;	
    this.setDimensions_();
  
  //styles
    this.initStyles_();

  // disable text selection on map cover
    G.mapCover.onselectstart = function() {return false}; 
    
  return buttonContainerDiv;
};

/**
 * Required by GMaps API for controls. 
 * @return {GControlPosition} Default location for control
 */
DragZoomOutControl.prototype.getDefaultPosition = function() {
  return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(3, 120));
};

/**
 * Function called when mousedown event is captured.
 * @param {Object} e 
 */
DragZoomOutControl.prototype.coverMousedown_ = function(e){
  var G = this.globals2;
  var pos = this.getRelPos_(e);
  G.startX = pos.left;
  G.startY = pos.top;
  
  DragZoomOutUtil.style([G.mapCover], {background: 'transparent', opacity: 1, filter: 'alpha(opacity=100)'});
  DragZoomOutUtil.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';

  // invoke the callback if provided
  if (G.callbacks.dragstart != null) {
    G.callbacks.dragstart(G.startX, G.startY);
  }

  return false;
};

/**
 * Function called when drag event is captured
 * @param {Object} e 
 */
DragZoomOutControl.prototype.drag_ = function(e){
  var G = this.globals2;
  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;
    }

    DragZoomOutUtil.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';
		
    // invoke callback if provided
    if (G.callbacks.dragging != null) {
      G.callbacks.dragging(G.startX, G.startY, rect.endX, rect.endY)
    }
		
    return false;
  }  
};

/** 
 * Function called when mouseup event is captured
 * @param {Event} e
 */
DragZoomOutControl.prototype.mouseup_ = function(e){
  var G = this.globals2;
  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.resetDragZoomOut_();

    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) {}
    
    mapBounds = G.map.getBounds();
    var mapne = mapBounds.getNorthEast();
    var mapsw = mapBounds.getSouthWest();
    var mapHeight = mapne.lat() - mapsw.lat();
    var mapWidth = mapne.lng() - mapsw.lng();


    polyBounds = zoomAreaPoly.getBounds();
    var ne = polyBounds.getNorthEast();
    var sw = polyBounds.getSouthWest();
    var polyHeight = ne.lat() - sw.lat();
    var polyWidth = ne.lng() - sw.lng();

    var heightPerc = 1 - (polyHeight / mapHeight);
    var widthPerc = 1 - (polyWidth / mapWidth);    
    var newHeight = ((mapHeight * heightPerc) + mapHeight) / 2;
    var newWidth = ((mapWidth * widthPerc) + mapWidth) / 2;
    
    var newNE = new GLatLng(mapne.lat()+newHeight, mapne.lng()+newWidth);
    var newSW = new GLatLng(mapsw.lat()-newHeight, mapsw.lng()-newWidth);
    var measurePoly = new GLatLngBounds(newSW, newNE);
    
    
    var se = new GLatLng(sw.lat(), ne.lng());
    var nw = new GLatLng(ne.lat(), sw.lng());
    zoomLevel = G.map.getBoundsZoomLevel(measurePoly);
    center = polyBounds.getCenter();
    if (sw.lat() != ne.lat() || sw.lng() != ne.lng())
        G.map.setCenter(center, zoomLevel);

    // invoke callback if provided
    if (G.callbacks.dragend != null) {
      G.callbacks.dragend(nw, ne, se, sw, nwpx, nepx, sepx, swpx);
    }

    //re-init if sticky
    if (G.options.stickyZoomEnabled) {
      this.initCover_();
    }
  }
};

/**
 * Set the cover sizes according to the size of the map
 */
DragZoomOutControl.prototype.setDimensions_ = function() {
  var G = this.globals2;
  var mapSize = G.map.getSize();
  G.mapWidth  = mapSize.width;
  G.mapHeight = mapSize.height;
  G.mapRatio  = G.mapHeight / G.mapWidth;
  // set left:0px in next <div>s in case we inherit text-align:center from map <div> in IE.
  DragZoomOutUtil.style([G.mapCover, G.cornerTopDiv, G.cornerRightDiv, G.cornerBottomDiv, G.cornerLeftDiv], 
    {left: '0px',width: G.mapWidth + 'px', height: G.mapHeight +'px'});
};

/**
 * Initializes styles based on global parameters
 */
DragZoomOutControl.prototype.initStyles_ = function(){
  var G = this.globals2;
  DragZoomOutUtil.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;  
};

/**
 * Function called when the zoom button's click event is captured.
 */
DragZoomOutControl.prototype.buttonclick_ = function(){
  var G = this.globals2;	
  if (G.mapCover.style.display == 'block') { // reset if clicked before dragging 
    this.resetDragZoomOut_();
  } else {
    this.initCover_();
  }
};

/**
 * Shows the cover over the map
 */
DragZoomOutControl.prototype.initCover_ = function(){
  var G = this.globals2;
  G.mapPosition = DragZoomOutUtil.getElementPosition(G.map.getContainer());
  this.setDimensions_();
//  this.setButtonMode_('zooming');
  DragZoomOutUtil.style([G.mapCover], {display: 'block', background: G.style.fillColor});
  DragZoomOutUtil.style([G.outlineDiv], {width: '0px', height: '0px'});

  //invoke callback if provided
  if(G.callbacks['buttonclick'] != null){
    G.callbacks.buttonclick();
  }
};

/**
 * Gets position of the mouse relative to the map
 * @param {Object} e
 */
DragZoomOutControl.prototype.getRelPos_ = function(e) {
  var pos = DragZoomOutUtil.getMousePosition(e);
  var G = this.globals2;
  return {top: (pos.top - G.mapPosition.top), 
          left: (pos.left - G.mapPosition.left)};
};

/**
 * Figures out the rectangle the user's trying to draw
 * @param {Number} startX 
 * @param {Number} startY
 * @param {Object} pos
 * @param {Number} ratio
 * @return {Object} Describes the rectangle
 */
DragZoomOutControl.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;

	//alper aşağıdaki değerleri değiştirdi.
  return {
    startX: startX,
    startY: startY,
    endX: startX + dX,
	endY: startY + dY,
    width: dX,
	height: dY,
    left:left,
    top:top
  }
};

/** 
 * Resets CSS and button display when drag zoom done
 */
DragZoomOutControl.prototype.resetDragZoomOut_ = function() {
  var G = this.globals2;
  DragZoomOutUtil.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');
};

/* utility functions in DragZoomOutUtil.namespace */
var DragZoomOutUtil={};

/**
 * Alias function for getting element by id
 * @param {String} sId
 * @return {Object} DOM object with sId id
 */
DragZoomOutUtil.gE = function(sId) {
  return document.getElementById(sId);
}

/**
 * A general-purpose function to get the absolute position
 * of the mouse.
 * @param {Object} e  Mouse event
 * @return {Object} Describes position
 */
DragZoomOutUtil.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};  
};

/**
 * Gets position of element
 * @param {Object} element
 * @return {Object} Describes position
 */
DragZoomOutUtil.getElementPosition = function(element) {
  var leftPos = element.offsetLeft;          // initialize var to store calculations
  var topPos = element.offsetTop;            // initialize var to store calculations
  var parElement = element.offsetParent;     // identify first offset parent element  
  while (parElement != null ) {                // move up through element hierarchy
    leftPos += parElement.offsetLeft;      // appending left offset of each parent
    topPos += parElement.offsetTop;  
    parElement = parElement.offsetParent;  // until no more offset parents exist
  }
  return {left: leftPos, top: topPos};
};

/**
 * Applies styles to DOM objects 
 * @param {String/Object} elements Either comma-delimited list of ids 
 *   or an array of DOM objects
 * @param {Object} styles Hash of styles to be applied
 */
DragZoomOutUtil.style = function(elements, styles){
  if (typeof(elements) == 'string') {
    elements = DragZoomOutUtil.getManyElements(elements);
  }
  for (var i = 0; i < elements.length; i++){
    for (var s in styles) { 
      elements[i].style[s] = styles[s];
    }
  }
};

/**
 * Gets DOM elements array according to list of IDs
 * @param {String} elementsString Comma-delimited list of IDs
 * @return {Array} Array of DOM elements corresponding to s
 */
DragZoomOutUtil.getManyElements = function(idsString){		
  var idsArray = idsString.split(',');
  var elements = [];
  for (var i = 0; i < idsArray.length; i++){
    elements[elements.length] = DragZoomOutUtil.gE(idsArray[i])
  };
  return elements;
};
