var myapp={};
myapp.data={};
myapp.map={} ;
myapp.markers=[];
myapp.markers.content;
myapp.smallmarkers=[];
myapp.data.spots;
myapp.data.results;
myapp.data.columns;
myapp.arg={};
myapp.arg.toCenter=true;
myapp.arg.toZoom = 1;
myapp.arg.toBounds = false;
myapp.arg.toSingle = false;
myapp.arg.toimage = true;
myapp.arg.done = true;
myapp.MapTypeId = 'SATELLITE';
myapp.infoboxoptions ={};
myapp.infowindow = new InfoBox();
myapp.markerBounds = new google.maps.LatLngBounds();

myapp.latlng = new google.maps.LatLng(15.62303684759789,30.2343755);	

// custom controllers styles
//custom controllers
myapp.controllers = document.createElement('div');
                  myapp.controllers.style.width = '16px'; 
                  myapp.controllers.style.position = 'absolute';
                  myapp.controllers.style.zIndex = '110'; 
                  myapp.controllers.style.top = '5px'; 
                  myapp.controllers.style.left = '5px';


 myapp.terrain =     document.createElement('div');
                  myapp.terrain.style.width = '40px'; 
                  myapp.terrain.style.height = '69px'; 
                  myapp.terrain.style.position = 'absolute';
                  myapp.terrain.style.zIndex = '110'; 
                  myapp.terrain.style.top = '5px'; 
                  myapp.terrain.style.right = '5px';
                 // myapp.terrain.style.border= "1px solid #fff"
				  
 myapp.zoomIn = document.createElement('div');
             myapp.zoomIn.style.width= '16px';
	         myapp.zoomIn.style.height='16px';
	         myapp.zoomIn.style.zindex='110';
			 myapp.zoomIn.style.color='#ffffff';
			 myapp.zoomIn.style.textAlign='center';
 			 myapp.zoomIn.style.cursor='pointer';
			 myapp.zoomIn.innerHTML = '+'; 
			 myapp.zoomIn.style.backgroundColor='#000000';
			// myapp.zoomIn.style.border= "1px solid #fff"


 myapp.zoomOut = document.createElement('div');
             myapp.zoomOut.style.width= '16px';
	         myapp.zoomOut.style.height='16px';
	         myapp.zoomOut.style.zindex='110';
	         myapp.zoomOut.style.marginTop='2px';	
	         myapp.zoomOut.style.color='#ffffff';
			 myapp.zoomOut.style.textAlign='center';
 			 myapp.zoomOut.style.cursor='pointer';
			 myapp.zoomOut.innerHTML = '-';
			 myapp.zoomOut.style.backgroundColor='#000000';
			// myapp.zoomOut.style.border= "1px solid #fff"
			 
 myapp.Reset = document.createElement('div');
             myapp.Reset.style.width= '16px';
	         myapp.Reset.style.height='16px';
	         myapp.Reset.style.zindex='110';
	         myapp.Reset.style.marginTop='2px';	
	         myapp.Reset.style.color='#ffffff';
			 myapp.Reset.style.textAlign='center';
 			 myapp.Reset.style.cursor='pointer';
			 myapp.Reset.innerHTML = '•';
			 myapp.Reset.style.backgroundColor='#000000';
			// myapp.Reset.style.border= "1px solid #fff"
			                     
		 
 myapp.roadmap = document.createElement('div');
             myapp.roadmap.style.width= '40px';
	         myapp.roadmap.style.height='18px';
	         myapp.roadmap.style.zindex='110';
			 myapp.roadmap.style.color='#ffffff';
			 myapp.roadmap.style.textAlign='center';
 			 myapp.roadmap.style.cursor='pointer';
			 myapp.roadmap.innerHTML = 'Road';
			 myapp.roadmap.style.backgroundColor='#000000';

			 //myapp.roadmap.style.borderBottom= "1px solid #fff"
			 
			 
 myapp.hybrid = document.createElement('div');
             myapp.hybrid.style.width= '40px';
	         myapp.hybrid.style.height='18px';
	         myapp.hybrid.style.zindex='110';
			 myapp.hybrid.style.color='#ffffff';
			 myapp.hybrid.style.textAlign='center';
 			 myapp.hybrid.style.cursor='pointer';
			 myapp.hybrid.innerHTML = 'Hybr';
	     	 myapp.hybrid.style.backgroundColor='#000000';
			 myapp.hybrid.style.marginTop = '5px'; 

			  //myapp.hybrid.style.borderBottom= "1px solid #fff"



 myapp.satellite = document.createElement('div');
             myapp.satellite.style.width= '40px';
	         myapp.satellite.style.height='18px';
	         myapp.satellite.style.zindex='110';
			 myapp.satellite.style.color='#ffffff';
			 myapp.satellite.style.textAlign='center';
 			 myapp.satellite.style.cursor='pointer';
			 myapp.satellite.innerHTML = 'sat';
	     	 myapp.satellite.style.backgroundColor='#000000';
			 myapp.satellite.style.marginTop = '5px'; 



 myapp.releif = document.createElement('div');
             myapp.releif.style.width= '40px';
	         myapp.releif.style.height='18px';
	         myapp.releif.style.zindex='110';
			 myapp.releif.style.color='#ffffff';
			 myapp.releif.style.textAlign='center';
 			 myapp.releif.style.cursor='pointer';
			 myapp.releif.innerHTML = 'Relief';
	     	 myapp.releif.style.backgroundColor='#000000';
			 myapp.releif.style.marginTop = '5px'; 


// end custom controllers+

	var boxText = document.createElement("div");
        boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
		
   myapp.infoboxoptions ={
        	    content: myapp.markers.content
                ,disableAutoPan: true
                ,maxWidth: 0
                ,pixelOffset: new google.maps.Size(-30, 0)                     
                ,zIndex: null
                ,boxStyle: { 
                 background:' url(http://whc.unesco.org/p_dynamic/maps/maps/tipbox.gif) 24px 0 no-repeat'
                  ,width: "280px"
                 }
				,closeBoxURL: ' http://whc.unesco.org/p_dynamic/maps/maps/close.png'
                ,closeBoxMargin: "2px 2px 2px 2px"
                ,infoBoxClearance: new google.maps.Size(1, 1)
                ,isHidden: false
                ,pane: "floatPane"
                ,enableEventPropagation: false
	   }
	




 myapp.initialize = function(e) {
	
	
if(myapp.MapTypeId=='SATELLITE'){
//  myapp.map.setCenter(myapp.markerBounds.getCenter());
  myapp.MapTypeId=google.maps.MapTypeId.SATELLITE;
 }

if(myapp.MapTypeId=='ROADMAP'){
//  myapp.map.setCenter(myapp.markerBounds.getCenter());
  myapp.MapTypeId=google.maps.MapTypeId.ROADMAP;

 }

if(myapp.MapTypeId=='HYBRID'){
//  myapp.map.setCenter(myapp.markerBounds.getCenter());

	  myapp.MapTypeId=google.maps.MapTypeId.HYBRID;
 }
 
 if(myapp.MapTypeId=='RELEIF'){
//  myapp.map.setCenter(myapp.markerBounds.getCenter());
  myapp.MapTypeId=google.maps.MapTypeId.TERRAIN;

 }
 
 	  if(e.street){ myapp.arg.toStreet = e.street}

	 
 var myOptions = {
      zoom: myapp.arg.toZoom,
      center: myapp.latlng,
	  disableDefaultUI: true, 
      scaleControl: false,
	  scrollwheel: false,
      mapTypeId: myapp.MapTypeId,
	  streetViewControl: myapp.arg.toStreet
   				 };
		
		
	  if(e.MapTypeId){ myapp.MapTypeId = e.MapTypeId};
	  if(e.center){ myapp.arg.toCenter = e.center};
	  if(e.zoom){ myapp.arg.toZoom = e.zoom};
	  if(e.bounds){ myapp.arg.toBounds = e.bounds};
	  if(e.single){ myapp.arg.toSingle = e.single};


 


	  
	  
 myapp.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 myapp.setMarkers(myapp.map);
 
 if(myapp.arg.toBounds==true){
//  myapp.map.setCenter(myapp.markerBounds.getCenter());
 myapp.map.fitBounds(myapp.markerBounds);
myapp.map.setZoom(myapp.map.getZoom()- 1)																	 
Ext.get("cont1").setStyle({display:"none"});
 }


 if(e.zoom){

// myapp.map.setZoom(myapp.arg.toZoom)
}

 google.maps.event.addDomListener(myapp.map,"tilesloaded",function(){
																   
																	   Ext.onReady(function() {						
															
																// to solve france display with far points
																if(myapp.map.getZoom()>3 & myapp.arg.done){myapp.map.setZoom(3);}
																myapp.arg.done = false;
																Ext.get("cont1").setStyle({display:"none"});
                    											//console.log('test');
					                                                   })
															  });

// custom controllers functions

google.maps.event.addDomListener(myapp.zoomIn, 'click', function() {
                      myapp.map.setZoom(myapp.map.getZoom() + 1);
					   myapp.infowindow.close()
                 });

google.maps.event.addDomListener(myapp.Reset, 'click', function() {
                             myapp.map.setZoom(1);
   					  myapp.infowindow.close()
                 });

google.maps.event.addDomListener(myapp.zoomOut, 'click', function() {
                       myapp.map.setZoom(myapp.map.getZoom() - 1);
					   myapp.infowindow.close()
                 });

google.maps.event.addDomListener(myapp.roadmap, 'click', function() {
				    myapp.map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
                 });

google.maps.event.addDomListener(myapp.satellite, 'click', function() {
				    myapp.map.setMapTypeId(google.maps.MapTypeId.SATELLITE);
                 });

google.maps.event.addDomListener(myapp.hybrid, 'click', function() {
				    myapp.map.setMapTypeId(google.maps.MapTypeId.HYBRID);
                 });

google.maps.event.addDomListener(myapp.releif, 'click', function() {
				    myapp.map.setMapTypeId(google.maps.MapTypeId.TERRAIN);
                 });
				 
				 

//attaches the custom terrain controllers divs to the map div 
                myapp.controllers.appendChild(myapp.zoomIn);
                myapp.controllers.appendChild(myapp.Reset);
				myapp.controllers.appendChild(myapp.zoomOut);
                document.getElementById("map").appendChild(myapp.controllers);
/*				myapp.terrain.appendChild(myapp.roadmap);
*/				myapp.terrain.appendChild(myapp.hybrid);
                myapp.terrain.appendChild(myapp.satellite);
				myapp.terrain.appendChild(myapp.releif)
				document.getElementById("map").appendChild(myapp.terrain);
//end custom controllers functions



	                          }

							  
//erases markers from the map
myapp.deletetMarkers = function(amarker) {
	  for (var i = 0; i < amarker.length; i++) {
		  amarker[i].setMap();
		  }	
	      								 }
// pans to a region latlng
myapp.pantospot = function (alat,along){
    myapp.map.panTo(alat,along);
									    };
										
// From zoom=1 (small markers are visible) the function zooms to 3 and pan to the marker latlng
myapp.pantolatlng = function(alatlng){	
		return function(e){	
   		   myapp.deletetMarkers(myapp.smallmarkers);
          // if(myapp.map.getZoom() < 16){  myapp.map.setZoom(myapp.map.getZoom() + 1); }
	       myapp.map.panTo(alatlng);
// console.log(myapp.map.getZoom());
						  }
										  }

// functionto display the window when user clic on a marker
	myapp.getWindow = function(acontent,amarker){	
    return function(e){

			myapp.infowindow.setOptions({content:acontent, maxWidth: 170});
            myapp.infowindow.open(myapp.map,amarker);
//console.log(acontent);
					  }
	                                      }
										  
// functionto display the window when user clic on a marker
	
	myapp.getwindownopan= function(acontent,amarker){	
    return function(e){

			myapp.infowindow.setOptions(myapp.infoboxoptions);
            myapp.infowindow.open(myapp.map,amarker);
//console.log(acontent);
					  }
	                                      }

myapp.setMarkers= function(amap) {
// get field colums position
var pLatitude, pLongitude, pCat_ID, pDanger, pID_NO, pName ;

for (i=0;i<myapp.data.columns.length;i++){
if (myapp.data.columns[i]=="DANGER"){pDanger = i} ;
if (myapp.data.columns[i]=="LATITUDE") {pLatitude = i };
if (myapp.data.columns[i]=="LONGITUDE"){pLongitude = i} ;
if (myapp.data.columns[i]=="CAT_ID"){pCat_ID = i} ;
if (myapp.data.columns[i]=="ID_NO"){pID_NO= i} ;
if (myapp.data.columns[i]=="NAME"){pName= i} ;

}



//Loop begins 
  for (var i = 0; i < myapp.data.results.length; i++) {
	var image = new google.maps.MarkerImage('http://whc.unesco.org/graphics/' + myapp.data.results[i][pCat_ID]+"-"+ myapp.data.results[i][pDanger]+ '.gif',new google.maps.Size(12, 12));
    var spot = myapp.data.results[i];
    var myLatLng = new google.maps.LatLng(spot[pLatitude], spot[pLongitude]);
	
	if( myapp.arg.toSingle==false){
	var label = '<a href="http://whc.unesco.org/'+myapp.lang+'/list/'+ spot[pID_NO] +'">'+ spot[pName] + '</a>';
	
	var content = '<div class="infocontenttop"><div class="infocontent">'+'<div class="smallimage">'+'<a href="http://whc.unesco.org/'+myapp.lang+'/list/'+ spot[pID_NO] +'">' +'<img src="http://whc.unesco.org/uploads/sites/site_'+spot[pID_NO]+'-80-80.jpg" />' + '</a>'+'</div>'+'<div class="Site">'+'<a href="http://whc.unesco.org/'+myapp.lang+'/list/'+ spot[pID_NO] +'">'+ spot[pName] + '</a></div></div></div>';	
	}
	
	if( myapp.arg.toSingle==true) {
	var label = '<a href="http://whc.unesco.org/'+myapp.lang+'/list/'+ spot[pID_NO] +'">'+ spot[pName] + '</a>';
	
	var content = '<div class="infocontenttop"><div class="infocontent">'+'<div class="Site" style="color:#fff">'+ spot[pName] + '</div></div></div>';	
	}
	
	myapp.markers[i] = new google.maps.Marker({
        position: myLatLng,		
        map: amap,
        icon: image,
		flat: true,
        title: spot[pName]
	
    }
	);
		if( myapp.arg.toSingle==false){
		    boxText.innerHTML = content[i];
		}
//click event handler for higher elevation
google.maps.event.addListener(myapp.markers[i], 'click', myapp.pantolatlng(myLatLng)								 );

// add the getWindow function to click event of each marker
google.maps.event.addListener(myapp.markers[i], 'click',myapp.getWindow(content,myapp.markers[i]));

// add the getSmallWindow function to click event of each marker
google.maps.event.addListener(myapp.markers[i], 'click', myapp.getwindownopan(content,myapp.markers[i]));

// add the getWindow function to click event of each marker
google.maps.event.addListener(myapp.markers[i], 'mouseover',myapp.getWindow(content,myapp.markers[i]));

// add the getSmallWindow function to click event of each marker
google.maps.event.addListener(myapp.markers[i], 'mouseover', myapp.getwindownopan(content,myapp.markers[i]));

 


if( myapp.arg.toBounds==true){
		
myapp.markerBounds.extend(myapp.markers[i].position);
}
  }//loop ends

  
  }// myapp.setMarkers ends