/**
 * @fileoverview This demo is used for MarkerClusterer. It will show 100 markers
 * using MarkerClusterer and count the time to show the difference between using
 * MarkerClusterer and without MarkerClusterer.
 * @author Xiaoxi Wu
 */
 //var sMarker = '/commons/g_map-small.png';
 var sMarker = '/commons/gmap-big.png';
 var map;
 var MapControl;
 var bottomRight;
 var MarkerCounter;
 var markers = [];
 var pics;
 var data = new Object();
 var starArray = new Array();
var aHtlIndex = new Array();
 var bFixedMap = false;
(function() {
   var markerClusterer = null;
   markers = [];

   function $(element) {
     return document.getElementById(element);
   }

   var AMC = {
     init: function(zoomlevel) {
       if(GBrowserIsCompatible()) {
         map = new GMap2($('map'));
        var myCounter = new Counter();
		 MapControl = new GLargeMapControl3D();
		// bottomRight = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,10));
		//to block map's dragging and zoom functionality
		 if(bFixedMap)
		 {
			 map.disableDoubleClickZoom();
			 map.disableDragging()
		 }
		 else
			 map.addControl(MapControl); // Handle zoom control
		 //End methods
         try
         {
	         pics = data.photos;
	         map.setCenter(new GLatLng(pics[0].latitude, pics[0].longitude), 2);
			 var myEventListener = GEvent.bind(map, "click", myCounter, myCounter.increment);
			if(this.counter > 3){
			  GEvent.removeListener(myEventListener);
			 }
	       }
         catch(e)
         {
        	 
         }
		 if(zoomlevel!='')
			map.setZoom(zoomlevel); 
		 try
		 {
			 showMarkers(true);
		 }
		 catch(e){}
       }
     },
     showMarkers: function(isInit) {
       showMarkers(isInit);
     },
     changeType: function() {
      // $("tcounts").innerHTML = "cleaning...";
       setTimeout("AMC.showMarkers()", 0);
     },
     changeNums: function() {
       //$("tcounts").innerHTML = "cleaning...";
       //$('markerlist').innerHTML = "";
       setTimeout("AMC.showMarkers(true)", 0);
     },
     timing: function() {
       var start = new Date();
       // make false for non-cluster map
       var bCluster = false;
       if (bCluster) {
		var styles = [[{
        url: '/commons/gmap-med.png',
        height: 36,
        width: 21,
        opt_anchor: [4, 0],
        opt_textColor: '#FF00FF'
      },
      {
        url: '/commons/gmap-big.png', 
        height: 56,
        width: 38,
        opt_anchor: [8, 0],
        opt_textColor: '#FF0000'
      },
      {
        url: '/commons/g_map-bigger.png',
        width: 56,
        height: 38,
        opt_anchor: [12, 0]
      }]];

         markerClusterer = new MarkerClusterer(map, markers, {styles: styles[0]});
		 //alert('map=>'+map+' markers=>'+markers+' markerClusterer=>'+markerClusterer);
       } else {
         for (var i = 0; i < markers.length; i++) {
           map.addOverlay(markers[i]);
         }
       }
       var end = new Date();
       //$("tcounts").innerHTML = end - start;
     }
   };
	function Counter() {
	  this.counter = 0;
	}

	Counter.prototype.increment = function() {
	  this.counter++;
	  if(this.counter == 3)
		{ // explore to the deep level
		  map.setZoom(16);
		}
	//  alert("You have clicked the map " + this.counter + (this.counter == 1 ?" time":" times") + map.getZoom());
	}

   function showMarkers(init) {
     map.clearOverlays();
     markers = [];
     var icon = new GIcon(G_DEFAULT_ICON);
     
	 if(sMarker == '')
		icon.image = "http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=FFFFFF,008CFF,000000&ext=.png";
	else 
		icon.image = sMarker;
	 var type = 1;
     var bCluster = true;

     if(bCluster) {
       type = 0;
     }

     if(markerClusterer != null) {
       markerClusterer.clearMarkers();
     }

     //var panel = document.getElementById('markerlist');
     //var lg = $("mcounts").value;
     var lg = data.photos.length;
      MarkerCounter = 0;
	   for (var i = 0; i < lg; i++) {
		MarkerCounter++;// Will be used if More than one marker
        var title = pics[i].title;
       if (title == "") {
         title = "No title";
       }
       if (init) {
         var item = document.createElement("div");
         var tit = document.createElement("div");
         tit.innerHTML = title;
         item.style.cssText = 'padding:2px 0;width:265px;border-bottom:1px solid #E0ECFF;cursor:pointer;overflow:hidden;';
         //panel.appendChild(item);
         item.appendChild(tit);
         GEvent.addDomListener(item, "mouseover", function() {
                                 this.style.backgroundColor = "#E0ECFF";
                               });
         GEvent.addDomListener(item, "mouseout", function() {
                                 this.style.backgroundColor = "white";
                               });
       }
       var latlng = new GLatLng(pics[i].latitude, pics[i].longitude);
       if(pics[i].latitude!='' && pics[i].longitude!='')
       {	   
	       var marker = new GMarker(latlng, {icon: icon});
	       //var fn = markerClickFn(pics[i], latlng);
	       //GEvent.addListener(marker, "click", fn);
	       //if (init) {
	         //GEvent.addDomListener(tit, "click", fn);
	       //}
	       		
				if(starArray[pics[i].starImg]==undefined)
					strImg = '';
				else
					strImg = starArray[pics[i].starImg];
				
				if(IsValidObject(pics[i].FirstPrice))
						sFirstPriceHTML = words[41]+' : '+pics[i].FirstPrice;
				else
					sFirstPriceHTML='';

				if(IsValidObject(pics[i].GRecom) && pics[i].GRecom > 0)
				   {
						sGRecomHTML = words[42]+' : '+pics[i].GRecom+'%';
				   }
				else
					sGRecomHTML='';

				//alert('sFirstPrice=>'+sFirstPrice+' sGRecom=>'+sGRecom);
	 			var html1 = '<div class="bubble" style="font-size: 11px; font-family: Arial,Helvetica,sans-serif;"><table border="0" width="250" height="100"><tr height="110" valign="top"><td ><span style="font-size: 13px; color:#fe776b; font-weight:bold; font-family: Arial,Helvetica,sans-serif;">'+pics[i].title+'</span><br>'+strImg+'<br><br>'+pics[i].address+'<br>'+pics[i].city+' '+pics[i].country+'<br><br>'+sFirstPriceHTML+' <br>'+sGRecomHTML+'</td></tr><tr><td ><img src="'+data.path+pics[i].welcomeimg+'" width="89" height="50" align="bottom">&nbsp;&nbsp;&nbsp;&nbsp;<a style="text-decoration:underline" href="javascript:mapG_results(\''+pics[i].hotellink+'\',\'900\',\'700\');">'+words[40]+'</a></td></div>'
	    	   marker = createTabbedMarker(latlng, pics[i].title, words[30], html1, words[31], '<div style="font-size: 11px; font-family: Arial,Helvetica,sans-serif;"><table border="0" width="300" height="100"><tr height="110" valign="top"><td><textarea cols="49" rows="6" style="font-size: 11px; font-family: Arial,Helvetica,sans-serif;border:0px;">'+pics[i].hoteldetail+'</textarea></td></tr><tr><td><img src="'+data.path+pics[i].hinfoimg+'" width="89" height="50" align="bottom">&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:mapG_results(\''+pics[i].hotellink+'\',\'900\',\'700\');">'+words[26]+'</a></td></tr></div>', words[32], '<div style="font-size: 11px; font-family: Arial,Helvetica,sans-serif;"><table border="0" width="300" height="100"><tr height="110" valign="top"><td><img src="'+data.path+pics[i].more2+'" width="140" height="103" align="bottom"> <img src="'+data.path+pics[i].more3+'" width="140" height="103" align="bottom"></td></tr><tr><td><img src="'+data.path+pics[i].more1+'" width="89" height="50" align="bottom">&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:mapG_results(\''+pics[i].hotellink+'\',\'900\',\'700\');">'+words[26]+'</a></td></tr></div>');
	    	  // marker = createTabbedMarker(latlng, pics[i].title, words[30], '<div class="bubble" style="font-size: 11px; font-family: Arial,Helvetica,sans-serif;"><table border="0" width="300" height="100"><tr height="110" valign="top"><td><span style="font-size: 13px; color:#fe776b; font-weight:bold; font-family: Arial,Helvetica,sans-serif;">'+pics[i].title+'</span><br>'+strImg+'<br><br>'+pics[i].address+'<br>'+pics[i].city+' '+pics[i].country+'</td></tr><tr><td><img src="'+data.path+pics[i].welcomeimg+'" width="89" height="50" align="bottom">&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:mapG_results(\''+pics[i].hotellink+'\',\'900\',\'700\');">'+words[40]+'</a></td></div>', words[31], '<div style="font-size: 11px; font-family: Arial,Helvetica,sans-serif;"><table border="0" width="300" height="100"><tr height="110" valign="top"><td><textarea cols="49" rows="6" style="font-size: 11px; font-family: Arial,Helvetica,sans-serif;border:0px;">'+pics[i].hoteldetail+'</textarea></td></tr><tr><td><img src="'+data.path+pics[i].hinfoimg+'" width="89" height="50" align="bottom">&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:mapG_results(\''+pics[i].hotellink+'\',\'900\',\'700\');">'+words[26]+'</a></td></tr></div>', words[32], '<div style="font-size: 11px; font-family: Arial,Helvetica,sans-serif;"><table border="0" width="300" height="100"><tr height="110" valign="top"><td><img src="'+data.path+pics[i].more2+'" width="140" height="103" align="bottom"> <img src="'+data.path+pics[i].more3+'" width="140" height="103" align="bottom"></td></tr><tr><td><img src="'+data.path+pics[i].more1+'" width="89" height="50" align="bottom">&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:mapG_results(\''+pics[i].hotellink+'\',\'900\',\'700\');">'+words[26]+'</a></td></tr></div>');
     		
				//alert('latlng=>'+latlng+' pictitle=>'+pics[i].title+' marker=>'+marker);

	       markers.push(marker);
	    }
      
     }
    // $("tcounts").innerHTML = "timing...";
     setTimeout("AMC.timing()", 0);
   }
 function IsValidObject(objToTest) 
{
  if (null == objToTest) 
	  return false;
  if ("undefined" == typeof(objToTest)) 
	  return false;

  return true;
}
/*
   function markerClickFn(pic, latlng) {
     return function() {
       var title = pic.photo_title;
       var url = pic.photo_url;
       var fileurl = pic.photo_file_url;
       var infoHtml = '<div style="width:210px;"><h3>' + title
         + '</h3><div style="width:200px;height:200px;line-height:200px;margin:2px 0;text-align:center;">'
         + '<a id="infoimg" href="' + url + '" target="_blank">Loading...</a></div>'
         + '<a href="http://www.panoramio.com/" target="_blank">'
         + '<img src="http://maps.google.com/intl/en_ALL/mapfiles/iw_panoramio.png"></img></a><br/>'
         + '<a href="' + pic.owner_url + '" target="_blank">' + pic.owner_name + '</a>';
       var img = document.createElement("img");
       GEvent.addDomListener(img, "load", function() {
                               if ($("infoimg") == null) {
                                 return;
                               }
                               img = adjustImage(img, 200, 200);
                               img.style.cssText = "vertical-align:middle;padding:1px;border:1px solid #EAEAEA;";
                               $("infoimg").innerHTML = "";
                               $("infoimg").appendChild(img);
                             });
       img.src = fileurl;
       if(img.readyState == "complete" || img.readyState == "loaded") {
         img = adjustImage(img, 280, 200);
         infoHtml += '<img width=' + img.width + ' height=' + img.height
           + ' style="vertical-align:middle;padding:1px;border:1px solid #aAaAaA"></img>';
       }
       infoHtml += '</div></div>';
            
       map.openInfoWindowHtml(latlng, infoHtml);
     };
   }*/
   function createTabbedMarker(point, labelmarker, label1, html1, label2, html2, label3, html3) {
	   var icon = new GIcon(G_DEFAULT_ICON);
	 if(sMarker == 'mark')
		 sMarkerUsed = '/commons/gmap-'+MarkerCounter+'.png';
	 else
		sMarkerUsed = sMarker;

	//icon.iconSize = new GSize(18, 19);
	//icon.shadowSize = new GSize(18, 19); 
	icon.image = sMarkerUsed;
	//icon.shadow = "http://chart.apis.google.com/chart?chst=d_map_pin_shadow";
	   var marker = new GMarker(point, {icon:icon});
	   // No click on bubble for fixed map case
		if(!bFixedMap)
		{
			GEvent.addListener(marker, "click", function() {
			marker.openInfoWindowTabsHtml([
				new GInfoWindowTab(label1,html1)
				//new GInfoWindowTab(label2,html2), // blocked seconf tab
				//new GInfoWindowTab(label3,html3) // blocked third tab
				]);
			});
		}
		// ENd condition
		return marker;
	}

   function adjustImage(img, maxwidth, maxheight) {
     var wid = img.width;
     var hei = img.height;
     var newwid = wid;
     var newhei = hei;
     if(wid / maxwidth > hei / maxheight){
       if(wid > maxwidth){
         newwid = maxwidth;
         newhei = parseInt(hei * newwid / wid);
       }
     } else {
       if(hei > maxheight) {
         newhei = maxheight;
         newwid = parseInt(wid * newhei / hei);
       }
     }
     var src = img.src;
     img = document.createElement("img");
     img.src = src;
     img.width = newwid;
     img.height = newhei;
     return img;
   }
   window.AMC = AMC || window.AMC;
 })();


function showInfoJS(k)
{
	if(k!='' || k=='0')
	{
		document.getElementById('openid').value=k;
	}

	if(!IsValidObject(map))
	{
		initLoader();
	}
	else
	{
		window.location.hash='top_gmap';
		jQuery('#map').animate({height:400},"slow");
		jQuery('#show_map').html(words[29]);
		var i = document.getElementById('openid').value;
		if(i=='-1')
			i='';
		//alert('i=>'+i);
		map.addControl(MapControl, bottomRight);
		map.setCenter(new GLatLng(pics[i].latitude, pics[i].longitude), 2);
		map.setZoom(17); 
		GEvent.trigger(markers[i],"click");
	}
}
function showInfo(sDistnum)
{
	if(sDistnum!='')
	{
		document.getElementById('hdnDistnum').value=sDistnum;
	}
	if(!IsValidObject(map))
	{
		initLoader();
	}
	else
	{

		window.location.hash='top_gmap';
		jQuery('#map').animate({height:400},"slow");
		jQuery('#show_map').html(words[29]);
		map.addControl(MapControl, bottomRight);
		sDistnum = document.getElementById('hdnDistnum').value;
		var i =  aHtlIndex.indexOf(sDistnum);
		map.setCenter(new GLatLng(pics[i].latitude, pics[i].longitude), 2);
		map.setZoom(17); 
		GEvent.trigger(markers[i],"click");
	}
}
function IsValidObject(objToTest) 
{
  if (null == objToTest) 
	  return false;
  if ("undefined" == typeof(objToTest)) 
	  return false;

  return true;
}