var bojeIspitivanja=["FFFFFF","0000FF","00FF00","FFFF00","FF0000","808080"];
var textIspitivanja=["Ispitivanje u tijeku","More visoke kakvoće","More dobre kakvoće","More zadovoljavajuće kakvoće","More nezadovoljavajuće kakvoće ","Nema podataka"];


var map;
var mgr;
var markers = [];
var groups = [];

    function initialize() {
      if (GBrowserIsCompatible()) {
				map = new GMap2(document.getElementById("map_canvas"));
				// ====== Restricting the range of Zoom Levels =====
     		// Get the list of map types      
     		var mt = map.getMapTypes();
     		// Overwrite the getMinimumResolution() and getMaximumResolution() methods
    		for (var i=0; i<mt.length; i++) {
       	 mt[i].getMinimumResolution = function() {return 9;}
       	 mt[i].getMaximumResolution = function() {return 16;}
    	  }

				//centriranje na pgz
				map.setCenter(new GLatLng(44.951970575039, 14.43328857421875), 9);
				map.setMapType(G_HYBRID_MAP)
				map.setUIToDefault();
				setupClusterMarkers();
      
      // Add a move listener to restrict the bounds range
      // The allowed region which the whole map must be within
      //var allowedBounds = new GLatLngBounds(new GLatLng(44.66,13.60), new GLatLng(45.40,15.40));

    }

	
}

function setupClusterMarkers(){
		for (var i in plazeLayer){
			var grupa=plazeLayer[i]["grupa"];
			groups.push(grupa);

			//////////////////////////
			//	Create list holder
			//////////////////////////			
			var grupaList = document.createElement('ul');
			grupaList.id=grupa;
			grupaList.style.display="none";
			document.getElementById('sideBarList').appendChild(grupaList);
			
      for (var j in plazeLayer[i]["lokacije"]) {
          var lokacije = plazeLayer[i]["lokacije"];
          var title = lokacije[j]["name"];
          var id	= lokacije[j]["id"];
          var posn = new GLatLng(lokacije[j]["posn"][0], lokacije[j]["posn"][1]);
          
 					//////////////////////////////
 					//	Ispitivanja
 					//////////////////////////////
 					var ispArr=lokacije[j]["isp"];
 					var ispZadnje=lokacije[j]["zisp"];
 					var ispHTML='<h3>'+ title + '</h3><p>';
 					for (var k in ispArr){
 						ispHTML += '<br><strong>' + ispArr[k][0] + ': </strong><img class="ispTocka" src="' + ispArr[k][1] + '.gif">' + textIspitivanja[ispArr[k][1]];
 					}
 					ispHTML +='</p>';
          var ocjena=ispZadnje[1];
          
          // setup icons
					var iconOptions = {};
					iconOptions.width = 12;
					iconOptions.height = 12;
					iconOptions.primaryColor = bojeIspitivanja[ocjena];
					iconOptions.label = '';//new String(ocjena);
					iconOptions.labelSize = 0;
					iconOptions.labelColor = "#000000";
					iconOptions.shape = "circle";
          
          var ispitivanjeIcon = MapIconMaker.createFlatIcon(iconOptions);
          var marker=new GMarker(posn,{icon:ispitivanjeIcon});
          var handler = createMarkerClickHandler(marker, title, id);

          //GEvent.addListener(marker, "click", handler);
          var idn=markers.length;
          marker.myID=id;
          marker.myTitle=title;
          marker.myIspHTML=ispHTML;
          marker.myZisp=ispZadnje;
          marker.myGroup=grupa;  
          marker.myIdn=idn;
          marker.myInfoWin='<strong>' + marker.myTitle + '</strong>' +
      '<p><img src="foto/' + marker.myID + '.jpg" width="250px" height="188px"><br><strong>' + marker.myZisp[0] +':</strong><img class="ispTocka" src="' + marker.myZisp[1] + '.gif">' + textIspitivanja[marker.myZisp[1]] + '</p>';
          GEvent.addListener(marker, "click", handler);
          markers.push(marker);

          //////////////////////////
          //	list POIs in sidebar
          //////////////////////////

            var listItem = document.createElement('li');
  					listItem.innerHTML = '<a href="#'+title+'" onclick="javascript:showMarker('+idn+');">' + title + '</a>';
  					//listItem.getElementsByTagName('a')[0].onclick = showMarker(idn);
  					document.getElementById(grupa).appendChild(listItem);

      }
      ////////////////////////////
			//	setup cluster options
			////////////////////////////


	}
	createGroupOptions(groups);
	    var mClusterOpts={};
      mClusterOpts.gridSize=30;
      mClusterOpts.maxZoom=12;
      var markerCluster = new MarkerClusterer(map, markers,mClusterOpts);
}

function createGroupOptions(groupOpt){
	groupOpt.sort();
	for (var l in groupOpt){
			//////////////////////////
			//	Create dropdown menu
			//////////////////////////
			var grupaOption=document.createElement('option');
			grupaOption.text=groups[l];
			grupaOption.value=groups[l];
			appendOption(document.getElementById('sideBarMenu'),grupaOption);
	}
}

function showMarker(idn){
	//alert(markers[idn].myTitle);
	showInfo(idn);
	var iwAnchor = markers[idn].getIcon().infoWindowAnchor;
  var iconAnchor = markers[idn].getIcon().iconAnchor;
  var offset = new GSize(iwAnchor.x-iconAnchor.x,iwAnchor.y-iconAnchor.y);
	var html=markers[idn].myInfoWin;
  map.panTo(markers[idn].getLatLng());
  map.setZoom(14);
  map.openInfoWindow(markers[idn].getLatLng(), html, {pixelOffset:offset});
}
	
function createMarkerClickHandler(marker, text, id) {

  return function() {
  	//map.panTo(marker.getLatLng());
  	//alert(text);
  	changeGroup(marker.myGroup)
  	showInfo(marker.myIdn);
  	document.getElementById('infoBox').innerHTML=marker.myIspHTML;
    marker.openInfoWindowHtml(marker.myInfoWin);
    return false;
  };
}
function showInfo(idn){
	//var infohtml=markers[idn].myIspHTML;
	document.getElementById('infoBox').innerHTML=markers[idn].myIspHTML;
}

function changeGroup(group){
	var oList = document.getElementById("sideBarMenu");
	var oOption = oList.options[0]; 
	if (oOption.value == "prazno"){
		oList.removeChild(oOption);
}
 	var sblist=document.getElementById("sideBarList").getElementsByTagName('ul');
 	for (var k=0; k<sblist.length;k++){
 			sblist[k].style.display="none";
 		}
 	document.getElementById(group).style.display='';	
}

function appendOption(select,option) {
      try {
        select.add(option,null); // Standards compliant.
      } catch (e) {
        select.add(option);      // IE only version.
      }
    }
