var map;
var overlay;
var maps          = [];
var savedMaps     = [];
var savedMarkers  = [];
var _markers      = [];
var mapID         = '';
var _categories   = [];
var _auxMarker    = null;
var infowindow    = null;

function saveMap(lat, lon, zoom, itemName, mapID){
 savedMaps.push(new Array(lat, lon, zoom, itemName, mapID));
}

function initializeMaps(){
  for(var i=0; i<savedMaps.length; i++){
    initializeMap(savedMaps[i][0], savedMaps[i][1], savedMaps[i][2], savedMaps[i][3], savedMaps[i][4]);
  }
}

function initializeMap(lat, lon, zoom, itemName, mapID) {
    if(lat == '') lat = 0;
    if(lon == '') lon = 0;
    var mapsIndex = maps.length;
    var auxMap    = {'recentered': false, 'name': itemName, 'mapID': mapID, 'map': null, 'pois': [], 'pos': {'lat': lat, 'lon': lon, 'zoom': zoom}, 'infowindow': null, 'latLngControl': null, 'markerCluster': null}
    
		var opts = {
			zoom: zoom,
			navigationControl: false,
      mapTypeControl: false,
      streetViewControl: false,
      scaleControl: false,
			center: new google.maps.LatLng(lat, lon),
			mapTypeId: google.maps.MapTypeId.ROADMAP
		}
    
		auxMap.map = new google.maps.Map(document.getElementById("map_canvas_"+itemName), opts);
    var zoomControlsDiv = document.createElement('DIV');
    var zoomControls = addzoomControls(zoomControlsDiv, auxMap.map);
    
    zoomControlsDiv.index = 1;
    auxMap.map.controls[google.maps.ControlPosition.TOP_LEFT].push(zoomControlsDiv);
    
    auxMap.infowindow = new google.maps.InfoWindow({
        content: ''
		});

   if (auxMap.name != 'header')
   {
    if(jQuery('#isEditMode').val() == 1){
      // Create new control to display latlng and coordinates under mouse.
      auxMap.latLngControl = new LatLngControl(auxMap);
      
      // Register event listeners
      google.maps.event.addListener(auxMap.map, 'mouseover', function(mEvent) {
        auxMap.latLngControl.set('visible', true);
      });
      google.maps.event.addListener(auxMap.map, 'mouseout', function(mEvent) {
        auxMap.latLngControl.set('visible', false);
      });
      google.maps.event.addListener(auxMap.map, 'mousemove', function(mEvent) {
        auxMap.latLngControl.updatePosition(mEvent.latLng);
      });
      google.maps.event.addListener(auxMap.map, 'click', function(mEvent) {
        openInsertPoiPanel(auxMap, mEvent.latLng);
      });
    }
	}
	else
	{
		if(jQuery('#isEditMode').val() == 1){
			google.maps.event.addListener(auxMap.map, 'click', function(mEvent) {
			openLargeMapPin();
			});
		}
	}
    
    maps[mapsIndex] = auxMap;
    renderMarkers(auxMap.name);
}

function openLargeMapPin(){
	alert("Operations on this map can be made from Address Book only ! Use Site Control Panel to add or edit pins on this map.");   
}

function addzoomControls(controlDiv, map){

  var controlUI = document.createElement('DIV');
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior
  var zoomIn = document.createElement('IMG');
  jQuery(zoomIn).attr('src','/images/map_icons/zoom_in_icon.jpg').css({'margin': '18px 0 0 15px', 'cursor': 'pointer', 'display': 'block'});
  controlUI.appendChild(zoomIn);
  
  google.maps.event.addDomListener(zoomIn, 'click', function() {
    map.setZoom(map.getZoom()+1)
  });
  
  var zoomOut = document.createElement('IMG');
  jQuery(zoomOut).attr('src','/images/map_icons/zoom_out_icon.jpg').css({'margin': '4px 0 0 15px', 'cursor': 'pointer'});
  controlUI.appendChild(zoomOut);
  
  google.maps.event.addDomListener(zoomOut, 'click', function() {
    map.setZoom(map.getZoom()-1)
  });
  
}

function addOverlay() {
  overlay.setMap(map);
}

function removeOverlay() {
  overlay.setMap(null);
}

function saveMarker(mapName, poiID, catID, poiCatName, poiCatImg, poiName, poiText, poiPos, linkOne, linkTwo, linkThree, importantPOI){
  savedMarkers.push(new Array(mapName, poiID, catID, poiCatName, poiCatImg, poiName, poiText, poiPos, linkOne, linkTwo, linkThree, importantPOI));
}

function renderMarkers(mapName){
  var nrMarkers = savedMarkers.length
  for (var i=0; i<nrMarkers; i++){
    if(mapName == savedMarkers[i][0])
        addMarker(savedMarkers[i][0], savedMarkers[i][1], savedMarkers[i][2], savedMarkers[i][3], savedMarkers[i][4], savedMarkers[i][5], savedMarkers[i][6], savedMarkers[i][7], savedMarkers[i][8], savedMarkers[i][9], savedMarkers[i][10], savedMarkers[i][11], savedMarkers[i][12]);
  }
  loadClusters(mapName);
}

function addMarker(mapName, poiID, catID, poiCatName, poiCatImg, poiName, poiText, poiPos, linkOne, linkTwo, linkThree, importantPOI){

  
  var mapIndex = -1;
  
  for(var i=0; i<maps.length; i++){
    if(maps[i].name == mapName)
      mapIndex = i;
  }
  
  var _markersIndex = maps[mapIndex].pois.length;
  if(!importantPOI)
    var icon = new google.maps.MarkerImage('/images/map_icons/point.png');
  else
    var icon = new google.maps.MarkerImage('/images/map_icons/poi_icon.png');
  var myLatlng = new google.maps.LatLng(poiPos.lat, poiPos.lon);
  
  var marker = new google.maps.Marker({
        position: myLatlng,
        POIID: poiID,
        MAPID: maps[mapIndex].mapID,
        map: maps[mapIndex].map,
        mapName: mapName,
        poiName: poiName,
        poiText: poiText,
        poiLinkOne: linkOne,
        poiLinkTwo: linkTwo,
        poiLinkThree:linkThree,
        important: importantPOI,
        icon: icon
  });
  maps[mapIndex].pois[_markersIndex] = marker;

  google.maps.event.addListener(maps[mapIndex].pois[_markersIndex], 'click', function () {
  
      var content = '';
      var auxALT = this.position.lat() + '_' + this.position.lng() + '_' + this.POIID;
      if (jQuery('#isEditMode').val() == 1) {
          if (this.mapName != 'header') {
              var auxChecked = '';
              if (this.important)
                  auxChecked = 'checked="checked"'
              content = '<div id="iwContainer"><div class="importantCheck">Important: <input type="checkbox" id="importantCheckBox" ' + auxChecked + '/></div><div style="height: 200px;" >Name: <br /><input id="poiName" type="text" value="' + this.poiName + '"/><br />Description: <textarea style="height: 100px;display: block;" id="poiDescr">' + this.poiText + '</textarea><input type="button" class="btnModel1" id="btnSavePOI" value="Save" alt="' + auxALT + '"  onclick="handleSavePoi(\'' + this.mapName + '\',\'' + this.MAPID + '\',this, \'edit\')"/></div></div>';
          } else {
              alert("Operations on this map can be made from Address Book only ! Use Site Control Panel to add or edit pins on this map.");
          }
      } else {
          content = '<div id="iwContainer">'
          if (this.poiName != '')
              content += '<div class="iwPoiName">' + this.poiName + '</div>';

          if (this.poiText != '')
              content += '<div class="iwPoiDescription">' + this.poiText + '</div>';

          //alert(this.poiLinkOne.link);
          
          // render link one
          if (this.poiLinkOne.link != '' && this.poiLinkOne.text != '') {

              var url1 = this.poiLinkOne.link;
              var internalOne = false;

              if (url1.indexOf('http') == -1) {
                  internalOne = true;
              }

              if (internalOne) {
                  content += '<div class="iwPoiLink"><a href="' + window.location.protocol + '//' + window.location.host + url1 + '" target="' + this.poiLinkOne.target + '">' + this.poiLinkOne.text + '</a></div>';
              } else
				  content += '<div class="iwPoiLink"><a onclick="window.open(\' ' + url1 + ' \',\'' + this.poiLinkOne.target + '\')" href="#">' + this.poiLinkOne.text + '</a></div>';
                  //content += '<div class="iwPoiLink"><a href="local_url?q=http://www.deja-vu.ro/" target="' + this.poiLinkOne.target + '">' + this.poiLinkOne.text + '</a></div>';

          }

          // render link two
          if (this.poiLinkTwo.link != '' && this.poiLinkTwo.text != '') {

              var url2 = this.poiLinkTwo.link;
              var internalTwo = false;

              if (url2.indexOf('http') == -1) {
                  internalTwo = true;
              }

              if (internalTwo) {
                  content += '<div class="iwPoiLink"><a href="' + window.location.protocol + '//' + window.location.host + url2 + '" target="' + this.poiLinkTwo.target + '">' + this.poiLinkTwo.text + '</a></div>';
              } else
				  content += '<div class="iwPoiLink"><a onclick="window.open(\' ' + url2+ ' \',\'' + this.poiLinkTwo.target + '\')" href="#">' + this.poiLinkTwo.text + '</a></div>';
                  //content += '<div class="iwPoiLink"><a href="' + url2 + '" target="' + this.poiLinkTwo.target + '">' + this.poiLinkTwo.text + '</a></div>';

          }


          // render link three
          if (this.poiLinkThree.link != '' && this.poiLinkThree.text != '') {

              var url3 = this.poiLinkThree.link;
              var internalThree = false;

              if (url3.indexOf('http') == -1) {
                  internalThree = true;
              }

              if (internalThree) {
                  content += '<div class="iwPoiLink"><a href="' + window.location.protocol + '//' + window.location.host + url3 + '" target="' + this.poiLinkThree.target + '">' + this.poiLinkThree.text + '</a></div>';
              } else
				  content += '<div class="iwPoiLink"><a onclick="window.open(\' ' + url3 + ' \',\'' + this.poiLinkThree.target + '\')" href="#">' + this.poiLinkThree.text + '</a></div>';
                  //content += '<div class="iwPoiLink"><a href="' + url3 + '" target="' + this.poiLinkThree.target + '">' + this.poiLinkThree.text + '</a></div>';

          }


          content += '</div>';
      }

      if (_auxMarker != null)
          _auxMarker.setMap(null);
      maps[mapIndex].infowindow.setContent(content)
      maps[mapIndex].infowindow.open(maps[mapIndex].map, this);
  });
  
}

/*
function addMarkers(markers){
  var _markersIndex = _markers.length;
  _markers[_markersIndex] = {'cat': markers.cat,'catImg': markers.catImg, 'catID': markers.catID, 'POIs': []};
  
  for (var i = 0; i < markers.POIs.length; i++){
  	if(typeof markers.POIs[i] != 'undefined'){
      var icon = new google.maps.MarkerImage(markers.catImg);
      var myLatlng = new google.maps.LatLng(markers.POIs[i].lat, markers.POIs[i].lon);
      
      var marker = new google.maps.Marker({
            position: myLatlng,
            POIID: markers.POIs[i].id,
            map: map,
            icon: icon
      }); 

      _markers[_markersIndex].POIs[i] = marker;
      
      google.maps.event.addListener(_markers[_markersIndex].POIs[i], 'click', function() {
        var refParent = this;
        
        jQuery.get('http://'+window.location.host+'/sitecore/content/Global/Modules/Google Maps/getPOI.aspx?poiID='+this.POIID, function(data){        
          infowindow.setContent(data)
          infowindow.open(map,refParent);
        });
      });
    }
  }
}

function removeMarkers(cat){
  var aux = 0;
  for (var i = 0; i < _markers.length; i++){
    if(_markers[i].cat == cat)
      aux = i;
  }
  for (var i = 0; i < _markers[aux].POIs.length; i++){
    _markers[aux].POIs[i].setMap(null);	
  }
  // close the info window
  infowindow.close();
}

function initializeCategoryFilter(mapID, names, ids, pics){

  _mapID = mapID;
  jQuery('#MainPanel').append('<div id="categoriesContainer" style="width: 400px; height: 100px;"></div>');
    
  var names = names.split('|');
  var ids   = ids.split('|');
  var pics  = pics.split('|');

  for (var i = 0; i<names.length; i++){
    _categories[i] = {'id': ids[i], 'name': names[i], 'pic': pics[i]};
    jQuery('#categoriesContainer').append('<div style="float: left; margin: 10px;"><input class="catCheckbox" type="checkbox" id="index_'+i+'" onclick="handleCheckBoxClick(\''+mapID+'\','+i+')"><img src="'+pics[i]+'" style="width: 20px; height: 20px;position: absolute;">'+'<span style="margin-left: 25px;display: inline;">'+names[i]+'</span></div>');
  }
}

function handleCheckBoxClick(mapID, index){

  if(jQuery('#index_'+index+':checked').val()  !== undefined){
    jQuery.getJSON('http://'+window.location.host+'/sitecore/content/Global/Modules/Google Maps/getCat.aspx?mapID='+mapID+'&categoryID='+_categories[index].id, function(data){
      var aux = {'cat': _categories[index].name,'catImg': _categories[index].pic,'catID': _categories[index].id, 'POIs': data}
      addMarkers(aux);
    });
  }else{
    removeMarkers(_categories[index].name);
  }
}
*/

function LatLngControl(auxMap) {

  this.ANCHOR_OFFSET_ = new google.maps.Point(8, 8);
  this.node_ = this.createHtmlNode_();
  auxMap.map.controls[google.maps.ControlPosition.TOP].push(this.node_);
  this.setMap(auxMap.map);
  this.set('visible', false);
}

LatLngControl.prototype = new google.maps.OverlayView();
LatLngControl.prototype.draw = function() {};

LatLngControl.prototype.createHtmlNode_ = function() {
  var divNode = document.createElement('div');
  jQuery(divNode).css({'background-color': '#F2DCB0', 'border':'1px solid #CCCCCC', 'font-size':'11px'});
  divNode.id = 'latlng-control';
  divNode.index = 100;
  return divNode;
};

LatLngControl.prototype.visible_changed = function() {
  this.node_.style.display = this.get('visible') ? '' : 'none';
};

LatLngControl.prototype.updatePosition = function(latLng) {
  var projection = this.getProjection();
  var point = projection.fromLatLngToContainerPixel(latLng);
  this.node_.style.left = point.x + this.ANCHOR_OFFSET_.x + 'px';
  this.node_.style.top = point.y + this.ANCHOR_OFFSET_.y + 'px';
  this.node_.innerHTML = [
    'lat: '+latLng.lat()+
    '<br />lon: '+latLng.lng()
  ].join('');
};

function openInsertPoiPanel(auxMap, coords){
  if(_auxMarker != null)
    _auxMarker.setMap(null);	
    
  var _markersIndex = auxMap.pois.length;
  var icon = new google.maps.MarkerImage('/images/map_icons/point.png');
  
  var marker = new google.maps.Marker({
            position: coords,
            map: auxMap.map,
            icon: icon
      });
  
   _auxMarker = marker;
   
   var infoWindowContent = document.createElement('DIV');
      
   jQuery(infoWindowContent).attr('id', 'iwContainer').addClass('Clearfix grid_12');
   content = '<div id="iwContainer"><div class="importantCheck">Important: <input type="checkbox" value="important" id="importantCheckBox"/></div><div style="height: 200px;" >Name: <br /><input id="poiName" type="text" value="Location Title"/><br />Description: <textarea style="height: 100px;display: block;" id="poiDescr">Description</textarea><input type="button" class="btnModel1" id="btnSavePOI" value="Save"  onclick="handleSavePoi(\''+auxMap.name+'\', \''+auxMap.mapID+'\',this, \'add\')"/></div>';
    
   jQuery(infoWindowContent).append(content);

   auxMap.infowindow.setContent(infoWindowContent)
   auxMap.infowindow.open(auxMap.map, marker);
   jQuery('#iwContainer #btnSavePOI').attr('alt',coords.lat()+'_'+coords.lng());   
}

function handleSavePoi(mapName, mapID, obj, action){
  var coords    = jQuery(obj).attr('alt');
  coords         = coords.split('_');
  var categ     = jQuery('#iwContainer #categorySelect').val();
  var name      = jQuery('#iwContainer #poiName').val();
  var descr     = jQuery('#iwContainer #poiDescr').val();
  var important = jQuery('#importantCheckBox:checked').length;
  
  if(coords[2] != null)
    poiID = coords[2];
  else
    poiID = -1;
  
  jQuery.post('http://'+window.location.host+'/layouts/google%20maps/savegmappin.aspx', 
  {action: action, mapName: mapName ,poiID: poiID, mapID: mapID, lat: coords[0], lon: coords[1], name: name, descr: descr, important: important},
   function(data){
    //mapID#poiID#lat#lon#name#descr#action#mapName#important
    //alert(data);
    var aux_      = data.split('$#');
    var mapID     = aux_[0];
    var poiID     = aux_[1];
    var lat       = aux_[2];
    var lon       = aux_[3];
    var name      = aux_[4];
    var descr     = aux_[5];
    var action    = aux_[6];
    var mapName   = aux_[7];
    
    if(aux_[8] == 1)
      var important = true;
    else
      var important = false;
    
    var mapsIndex = -1;
    for(var i=0; i<maps.length; i++){
      if(maps[i].name == mapName)
        mapsIndex = i;
    }
    
    if(action == 'add'){
        addMarker(mapName, poiID, 'catID', 'consulates', 'img', name, descr, {'lat': lat, 'lon': lon}, '', important);
        if(_auxMarker != null)
          _auxMarker.setMap(null);
         maps[mapsIndex].infowindow.close();
    }else{
      maps[mapsIndex].infowindow.close();
      var count = maps[mapsIndex].pois.length;
      for(k=0; k<count; k++)
        if(maps[mapsIndex].pois[k].POIID == poiID){
        
          if(!important)
            var icon = new google.maps.MarkerImage('/images/map_icons/point.png');
          else
            var icon = new google.maps.MarkerImage('/images/map_icons/poi_icon.png');

          maps[mapsIndex].pois[k].setMap(null);
          maps[mapsIndex].pois[k].poiName   = name;
          maps[mapsIndex].pois[k].poiText   = descr;
          maps[mapsIndex].pois[k].important = important;
          maps[mapsIndex].pois[k].icon      = icon;
          maps[mapsIndex].pois[k].setMap(maps[mapsIndex].map);
          break;
        }
     }
     loadClusters(mapName);
   });
   
}
function loadClusters(mapName){
  var mapsIndex = -1;
  for(var i=0; i<maps.length; i++){
    if(maps[i].name == mapName)
      mapsIndex = i;
  }
  
  if(mapsIndex == -1)
    return false;
  
  maps[mapsIndex].markerCluster = new MarkerClusterer(maps[mapsIndex].map, maps[mapsIndex].pois, {
    styles:  [{
                url: '/images/map_icons/cluster_icon.png',
                height: 40,
                width: 40,
                anchor: [10, 0],
                opt_anchor:[-20, 100],
                textColor: 'ffffff',
                opt_textSize: 13
              }, {
                url: '/images/map_icons/cluster_icon.png',
                height: 40,
                width: 40,
                opt_anchor: [6, 0],
                opt_textColor: 'ffffff',
                textColor: '#000000',
                opt_textSize: 13
              }, {
                url: '/images/map_icons/cluster_icon.png',
                width: 40,
                height: 40,
                opt_anchor: [8, 0],
                textColor: 'ffffff',
                opt_textSize: 13
              }]
  });
}

function resizeMaps(name){
  for(var rr=0; rr<maps.length; rr++){
    /*if((name == 'all' || name == maps[rr].name) && maps[rr].recentered == false){*/
	if((name == 'all' || name == maps[rr].name)){
      var auxCenter = new google.maps.LatLng(maps[rr].pos.lat, maps[rr].pos.lon);
      google.maps.event.trigger(maps[rr].map, 'resize');
      maps[rr].map.setCenter(auxCenter);
      maps[rr].recentered = true;
    }
  }
}

function handleOpenMainMap(){
  jQuery('#frontPageMapContainer').slideToggle('normal', function(){
    resizeMaps('header');
  });
}