var map, box;
var draggable = false, resizable = false;
var mouseX, mouseY, drawnX, drawnY;
var resizedX, resizedY;


window.onload = function() {

 // Make the variable box global
 box = document.getElementById("drag");
 // Register mouse move listener
 document.onmousemove= watchMouse;
}


window.onunload = function() {

 // Make sure that GUnload() is called when necessary on unload
 if(box.style.visibility == "visible")
  GUnload();
}


 // Mouse move listener
function watchMouse(e) {

  // Include possible scroll values
  var sx = window.scrollX || document.documentElement.scrollLeft|| 0;
  var sy = window.scrollY || document.documentElement.scrollTop|| 0;

  if(!e) e = window.event; // IEs event definition
  mouseX = e.clientX + sx;
  mouseY = e.clientY + sy;

  // How far has the box been resized?
  var deltaX = mouseX - resizedX;
  var deltaY = mouseY - resizedY;
  // Store the difference in global variables
  resizedX = mouseX;
  resizedY = mouseY;

 if(resizable == true) { // The resize button is being held

  changeMapSize(deltaX, deltaY);
  }

 if(draggable == true) { // The box is being dragged

  box.style.left= (mouseX - drawnX) + "px";
  box.style.top = (mouseY - drawnY) + "px";
 }
}


function dragstart(e) { // Calculate mouse position for dragging

 draggable = true;

 /* Stop selecting the content
  * of the box while dragging
 */
 if(e.cancelable) { e.preventDefault(); }
 if(window.event) { box.onselectstart = new Function("return false"); }

 drawnX = mouseX - parseInt(box.style.left);
 drawnY = mouseY - parseInt(box.style.top);

 // The box is being dropped
 box.onmouseup = function() { draggable = false; }
}


function loadMap(lat, lng, name) {

 if(GBrowserIsCompatible()) {

 var mapOptions = {
    googleBarOptions : {
      style : "new",
      adsOptions: {
        client: "8160334565061760",
        channel: "1289202842",
        adsafe: "high",
        language: "en"

      }
    }
  }


  var point = new GLatLng(lat, lng);
  map = new GMap2(document.getElementById("map2"), mapOptions);
  map.setCenter(point, 8, G_NORMAL_MAP);
//  map.addControl(new GSmallZoomControl());
map.setUIToDefault();
map.enableGoogleBar();

  var marker = new GMarker(point);
  map.addOverlay(marker);
  GEvent.addListener(marker, "click", function() {
   marker.openInfoWindowHtml(name);
  });
  // Add the self created ResizeControl
  map.addControl(new ResizeControl());
  box.style.visibility = "visible";
 }
}


function hideMap() {

 box.style.visibility = "hidden";
 GUnload();
}


function ResizeControl(){}
ResizeControl.prototype= new GControl();

ResizeControl.prototype.initialize=function(map) {

 var resizeButton = document.createElement("div");
 resizeButton.style.width = "20px";
 resizeButton.style.height = "20px";
 resizeButton.style.backgroundImage = "url(/images/resize.gif)";
 resizeButton.onmousedown = function() { resizable = true; }
 resizeButton.onmouseup = function() { resizable = false; }
 var container = map.getContainer();
 container.appendChild(resizeButton);

 /* Move the Copyright 25px to the left
  * to make sure that it's fully readable
 */
 var copyrightdiv = container.firstChild.nextSibling;
 copyrightdiv.style.marginRight = "25px";

 return resizeButton;
}


ResizeControl.prototype.getDefaultPosition=function() {
 return new GControlPosition(G_ANCHOR_BOTTOM_RIGHT,new GSize(0,0));
}

var typecontrol = new GMapTypeControl(true);

 // Resizes the map's width and height by the given increment
 function changeMapSize(dx, dy) {

  var mapdiv = map.getContainer();
  var width = parseInt(mapdiv.style.width);
  var height =  parseInt(mapdiv.style.height);

 /* Take care that the map's width or height do not get
  * a negative value. Unexpected things will happen.
 */
  if(width < 50) { width = 50; resizable = false; }
  if(height < 50) { height = 50; resizable = false; }
 
 if(width > 400) map.addControl(typecontrol); // Switch map types

 if(width < 400) map.removeControl(typecontrol);

  mapdiv.style.width = (width + dx) + "px";
  mapdiv.style.height= (height + dy) + "px";
  map.checkResize();
 }