google.load("maps", "2", {"base_domain" : "maps.google.co.kr"});

var map;
var markers = [];

var lq = '';

function fclick(obj) {
  google.maps.Event.trigger(markers[obj.id], 'click');
}

function liover(obj) {
  markers[obj.id].setImage('http://maps.google.com/mapfiles/kml/pal5/icon6.png');
  obj.style.cursor = 'pointer';
  obj.style.textDecoration = 'underline';
}

function liout(obj) {
  markers[obj.id].setImage(markers[obj.id].getIcon().image);
  obj.style.cursor = 'default';
  obj.style.textDecoration = 'none';
}

function sendMemo() {
  var frm = document.getElementById("addMemoForm");
  google.maps.DownloadUrl('/kb/map_memoadd?key=' + frm.key.value + '&txt=' + encodeURI(frm.txt.value), function(data, responseCode) {
    if (responseCode == 401) {
      var lbtn = document.getElementById("memobtn");
      //lbtn.style.display = "";
      lbtn.value = "인증이 필요합니다.";
      lbtn.onclick = function() {
        window.open(data, '_blank');
      };
    } else {
      google.maps.Event.trigger(markers[frm.hash.value], 'click');
    }
    return false;
  });
  return false;
}

function addMemo(key, hash) {
  var marker = markers[hash];
  if (marker == undefined) {
    return;
  }
  var memohtml = marker.name + '<br />' +
    '<form id="addMemoForm" onsubmit="return sendMemo()" method=post>' +
    '<input type="hidden" name="key" value="' + key + '">' +
    '<input type="hidden" name="hash" value= "' + hash + '">' +
    '<input name="txt">' +
    '<input class="btn" id="memobtn" type="button" onclick="sendMemo()" value="메모를  추가합니다.">' +
    '<br />' +
    '<input class="btn" id="loginbtn" type="button" style="display:none">' +
    '</form>';
  marker.openInfoWindowHtml(memohtml);
}

function initialize() {
  // initiate map
  map = new google.maps.Map2(document.getElementById("map"));
  map.setUIToDefault();
  //map.addControl(new google.maps.SmallMapControl());
  //map.addControl(new google.maps.MapTypeControl());
  map.addControl(new google.maps.OverviewMapControl());
  //map.enableScrollWheelZoom();
  var startx = 37.5502630;
  var starty = 126.9970831;
  // use default location of client, if it is in Korea
  var cloc = google.loader.ClientLocation;
  var saved_center = readCookie('saved_center');
  if (saved_center) {
    startx = saved_center.split(',')[0];
    starty = saved_center.split(',')[1];
  } else if (cloc && cloc.address.country_code == 'KR') {
    startx = cloc.latitude;
    starty = cloc.longitude;
  }
  map.setCenter(new google.maps.LatLng(startx, starty), 14);
  // ====== Restricting the range of Zoom Levels =====
  // Get the list of map types      
  var mt = map.getMapTypes();
  // Overwrite the getMinimumResolution() methods
  for (var i=0; i<mt.length; i++) {
    mt[i].getMinimumResolution = function() {return 7;}
  }
  //map.addControl(new ExtLargeMapControl());


  // prepare progress bar!
  //var progressBar = new ProgressbarControl(map, {width:150});

  // pause and resume
  function pausemap() {
    Mask.show();
    //map.disableDragging();
  }
  function resumemap() {
    Mask.hide();
    //map.enableDragging();
  }

  // append checkbox of codes
  for (var k in iconmap) {
    icons[k] = new google.maps.Icon();
    icons[k].image = 'http://maps.google.com/mapfiles/ms/icons/' + iconmap[k] + '.png';
    icons[k].shadow = icons[k].image.replace('.png', '.shadow.png');
    icons[k].iconAnchor = new google.maps.Point(16, 30);
    icons[k].infoWindowAnchor = new google.maps.Point(26, 6);
    // build css classes for li, in listbox
    createCSSClass('.' + k, 'background: url(http://maps.google.com/mapfiles/ms/micons/' + iconmap[k] + '.white.png) no-repeat 0 0;');
  }

  // help control
  function HelpControl() {}
  HelpControl.prototype = new google.maps.Control();
  HelpControl.prototype.initialize = function(map) {
    pausemap();
    var ulel = document.createElement('ul');
    google.maps.DownloadUrl("/kb/help.html", function(data, responseCode) {
      resumemap();
      ulel.innerHTML = data;
    });
    this.container = document.createElement('div');
    this.container.className = 'infobox';
    this.container.appendChild(ulel);
    var wrap = document.createElement('div');
    wrap.className = 'infowrap';
    wrap.style.width = '70%';
    wrap.style.margin = 'auto';
    wrap.appendChild(this.container);
    map.getContainer().appendChild(wrap);
    return wrap;
  }

  HelpControl.prototype.getDefaultPosition = function() {
    return new google.maps.ControlPosition(google.maps.ANCHOR_TOP_RIGHT, new google.maps.Size(30, 30));
  }


  function HelpCControl() {}
  HelpCControl.prototype = new google.maps.Control();
  HelpCControl.prototype.initialize = function(map) {
    var q = document.createElement('img');
    q.src = 'http://maps.google.com/mapfiles/ms/micons/info_circle.png';
    q.onclick = function () {
      var helpcontrol = new HelpControl();
      map.addControl(helpcontrol);
      helpcontrol.container.onclick = function () {
        map.removeControl(helpcontrol);
      }
    }
    var wrap = document.createElement('a');
    wrap.appendChild(q);
    map.getContainer().appendChild(wrap);
    return q;
  }

  HelpCControl.prototype.getDefaultPosition = function() {
    return new google.maps.ControlPosition(google.maps.ANCHOR_TOP_RIGHT, new google.maps.Size(30, 30));
  }

  map.addControl(new HelpCControl());

  // make select control
  function SelectControl() {}
  SelectControl.prototype = new google.maps.Control();

  SelectControl.prototype.initialize = function(map) {
    this.container = document.createElement("div");
    this.container.className = 'infobox';
    var sel = document.createElement('input');
    sel.type = 'checkbox';
    if (saved_center) {
      sel.checked = true;
    }
    sel.onclick = function () {
      if (this.checked) {
        createCookie('saved_center', map.getCenter().toUrlValue(), 30);
        alert('현재 위치가 저장되었습니다. 다른 위치를 저장하려면 체크박스를 해제했다가 다시 지정해주세요.');
        //map.savePosition();
      } else {
        eraseCookie('saved_center');
        //map.returnToSavedPosition();
      }
    };
    this.container.appendChild(sel);
    this.container.appendChild(document.createTextNode("현재 위치 저장"));
    this.container.appendChild(document.createElement('hr'));

    for (var k in iconmap) {
      var el = document.createElement('input');
      el.type = 'checkbox';
      el.value = k.substring(2);
      el.onclick = function () {
        if (!this.checked) {
          for (var m in markers) {
            if (markers[m].code == this.value) {
              markers[m].hide();
            }
          }
        }
        refreshFrans();
      };
      this.container.appendChild(el);
      this.container.appendChild(document.createTextNode(namemap[k]));
      this.container.appendChild(document.createElement('br'));
    }
    var wrap = document.createElement('div');
    wrap.className = 'infowrap';
    wrap.appendChild(this.container);
    map.getContainer().appendChild(wrap);
    return wrap;
  }

  SelectControl.prototype.getDefaultPosition = function() {
    return new google.maps.ControlPosition(google.maps._ANCHOR_TOP_LEFT, new google.maps.Size(70, 15));
  }

  SelectControl.prototype.getSelected = function() {
    cbs = this.container.getElementsByTagName('input');
    var res = ''
    for (var i=0; i < cbs.length; i++) {
      if (cbs[i].checked) {
        res += cbs[i].value + ',';
      }
    }
    return res;
  }

  var selcontrol = new SelectControl();
  map.addControl(selcontrol);


  // prepare marker controls
  //var mgr = new google.maps.MarkerManager(map);

  function addMarker(one) {
    if (markers[one.hash] != undefined) {
      if (markers[one.hash].isHidden()) markers[one.hash].show();
      return;
    }
    var marker = new google.maps.Marker(new google.maps.LatLng(one.lat, one.lng),
      {icon: icons['kb' + one.code], title: one.name});
    marker.code = one.code;
    marker.name = one.name;
    markers[one.hash] = marker;
    google.maps.Event.addListener(marker, "click", function() {
      pausemap();
      google.maps.DownloadUrl('/kb/map_getshopinfo?inc=' + selcontrol.getSelected() + '&hash=' + one.hash, function(data, responseCode) {
        resumemap();
        var json = eval("("+data+")");
        var infohtml = '';
        var memohtml = '';
        if (json.r == true) {
          var frs = json.p;
          for (var i=0; i < frs.length; i++) {
            infohtml += "<b>" +
              frs[i].name + "</b><br />" +
              frs[i].phone + "<br />" +
              frs[i].address + "<br />" +
              "(" + frs[i].resaddr + ")<br />";
            infohtml += '<input class="btn" type="button" onclick="addMemo(\'' + one.key + '\', \'' + one.hash + '\')" value="메모 추가하기">';
            infohtml += '<input class="btn" type="button" onclick="map.setZoom(17)" value="확대"><br />';
            // add html for memo
            if (frs[i].memo) {
              var memo = frs[i].memo;
              for (var j=0; j < memo.length; j++) {
              memohtml += "<b>" +
                memo[j].author + ": </b>" +
                memo[j].content + "<br />";
              }
            }
          }
        } else {
          document.getElementById('messagebox').innerHTML = json.m;
        }
        if (memohtml) {
          marker.openInfoWindowTabsHtml([new google.maps.InfoWindowTab("정보", infohtml), new google.maps.InfoWindowTab("메모", memohtml)]);
        } else {
          marker.openInfoWindowHtml(infohtml);
        }
      });
    });
    //mgr.addMarker(marker, 14);
    map.addOverlay(marker);
  }

  function addlist(json) {
    //progressBar.start(frs.length);
    var lsthtml = '';
    if (json.r == true) {
      var frs = json.p;
      document.getElementById('messagebox').innerHTML = '검색 결과: ' + frs.length + '개<br />';
      for (var i=0; i < frs.length; i++) {
        addMarker(frs[i]);
        //progressBar.updateLoader(1);
        lsthtml += '<li id="' + frs[i].hash + '"class="kb' + frs[i].code + '" onclick="fclick(this)" onmouseover="liover(this)" onmouseout="liout(this)">' + frs[i].name + '</li>';
      }
      //mgr.refresh();
      //progressBar.remove();
      if (json.b && json.p.length) {
        map.setZoom(map.getBoundsZoomLevel(json.b));
        map.setCenter(json.b.getCenter());
      }
    } else {
      document.getElementById('messagebox').innerHTML = json.m;
    }
    document.getElementById("shoplist").innerHTML = lsthtml;
  }

  function refreshFrans() {

    var inc = selcontrol.getSelected();
    var qstr = document.getElementById('qstr').value;

    // without any code, no search
    if (!inc) {
      document.getElementById('messagebox').innerHTML = '업종을 선택하세요';
      return false;
    }

    if (qstr) {
      var uri = "/kb/map_name?inc=" + inc + "&q=" + encodeURI(qstr);
      if (qstr == lq) return false;
      lq = qstr;
      // hide all markers before search
      for (var m in markers) {
        markers[m].hide();
      }
    } else {
      // do not display on zoom level less than 14
      if (map.getZoom() < 14) {
        document.getElementById("messagebox").innerHTML = '범위가 넓어 검색하지 않습니다. 조금 더 확대하세요.';
        document.getElementById("shoplist").innerHTML = '';
        return false;
      }

      var uri = "/kb/map_bound?inc=" + inc + "&b=" + map.getBounds().toString().replace(/[( )]/g, '');
    }

    pausemap();
    google.maps.DownloadUrl(uri, function(data, responseCode) {
      resumemap();
      if (data) {
        var json = eval("("+data+")");
        addlist(json);
      }
      return false;
    });
    return false;
  }

  document.getElementById('searchform').onsubmit = refreshFrans;
  document.getElementById('searchbtn').onclick = refreshFrans;
  google.maps.Event.addListener(map, "moveend", refreshFrans);
  refreshFrans();
}
google.setOnLoadCallback(initialize);