var bounds = new google.maps.LatLngBounds();
var infowindow = null;
var map;
var borderColor = "Red";
var captionColor = "White";
var titleName = " ";
var polyCoordinates = [];
var polyPath;
var offset = {};
var myLatlng = new google.maps.LatLng(36.121984, -115.171393);

function getMarker(url) {
	return new google.maps.MarkerImage('http://88d7ba627ed950559363-30e28468b1509b2df5dcc8eb3b617e7c.r8.cf2.rackcdn.com/pins/' + url,
		new google.maps.Size(31, 47),
		new google.maps.Point(0, 0),
		new google.maps.Point(16, 47)
		);
}

function addPin(data) {

	var myLatlng = new google.maps.LatLng(data.lat, data.long);
	polyCoordinates.push(new google.maps.LatLng(data.lat, data.long));

	bounds.extend(myLatlng);
	
	var icon = getMarker(data.pin);

	var marker = new google.maps.Marker({
			position : myLatlng,
			map : map,
			icon : icon,
			title : data.title
		});	
		

	google.maps.event.addListener(marker, 'click', function () {
		hookBalloon(map, marker, data);
	});
	return marker;
}

function toOrdinal (value) {
    var s = String(value),
      len = s.length,
      end  = s.substr(len - 1, 1),
      teen = len > 1 && s.substr(len - 2, 1) === "1",
      ord = "th";
    if (end === "1" && !teen) {
      ord = "st";
    } else if (end === "2" && !teen) {
      ord = "nd";
    } else if (end === "3" && !teen) {
      ord = "rd";
    }
    return value + '' + ord;
 }

function hookBalloon(map, marker, jData) {

	if (infowindow != null)
		infowindow.close();

	var background = "gradient_blue";
	var bgColor = "#1B44F2";
	
	if (jData.rank <= 3) {
		background = "gradient_red";
		bgColor = "#D40B0B"
	}
	
	var borderColor = "#ffffff";
	var captionColor = "#ffffff";
	var stndrdth = "th";

	contentString = '<div class="' + background + '" style="width: 250px; padding: 10px; padding-bottom: 10px;" ><h1 style="color: white; font-size: 12pt; text-align:left;">#' + jData.rank + ': ' + jData.title + '</h1>' +
				'<div style="padding: 5px 5px 5px 5px; color: white; font-size: 10pt; font-weight: normal; text-align:left; width: 220px;">It takes ' + jData.avg + ' seconds to upload a selfie from here. This ranks ' + toOrdinal(jData.rank) + 
				' out of the top 21 Las vegas hot spots. <br /></div>' +
				'<div style="text-align:center;"><a onclick="fakeLightbox(\'' + jData.fb + '\'); return false;" href="#"><img border="0" style="cursor: pointer; padding: 5px 5px 5px 5px;" src="' + jData.image + '" width="240" /></a></div>' +
				'<a target="_blank" href="' + jData.image + '" style="text-decoration: none; font-size: 8pt; font-weight: normal; font-style: italic; color: #e1e1e1;">Click for photo source</a>' +
				'</div>';

	infowindow = new InfoBubble({
			map : map,
			content : contentString,
			shadowStyle : 1,
			padding : 0,
			backgroundColor : bgColor,
			borderRadius : 10,
			arrowSize : 10,
			borderWidth : 2,
			borderColor : borderColor,
			disableAutoPan : false,
			hideCloseButton : false,
			arrowPosition : 50,
			backgroundClassName : background,
			arrowStyle : 0
		});

	infowindow.open(map, marker);
}

function closePopup() {
	if (infowindow != null)
		infowindow.close();
}

function fakeLightbox(id) {
	
	$("#" + id).click();
}

function initialize() {
	

	var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
	var ua = navigator.userAgent.toLowerCase();
	var isAndroid = ua.indexOf("android") > -1;
	var disablePoi = [
	   {
		 featureType: "poi",
		 stylers: [
		  { visibility: "off" }
		 ]   
		}
	];
	
	var myOptions = {
		zoom : 13,
		center : myLatlng,
		mapTypeId : google.maps.MapTypeId.ROADMAP,
		mapTypeControl : false,
		panControl: false,
		zoomControl: false,
		scaleControl: false,
		streetViewControl: false,
		styles: disablePoi
	}

	if (isAndroid || isiPhone) {
		myOptions = {
			zoom : 12,
			center : myLatlng,
			mapTypeId : google.maps.MapTypeId.ROADMAP,
			streetViewControl : false,
			mapTypeControl : false
		}
	}
	
	$(".fb").fancybox();
	
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

	doResize();
	
	google.maps.event.addListener(map, "click", function (e) {
		closePopup();
	});

	//AddToMap();
	for (var i = 0, length = jsonData.length; i < length; i++) {
		addPin(jsonData[i]);
	}

	//To Add Path and Animation Motion
	//addPath();
}

function getWidth() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  //window.alert( 'Width = ' + myWidth );
  
  if (myWidth == 0) myWidth = 620;
  
  return myWidth;
  //window.alert( 'Height = ' + myHeight );
}

function getHeight() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  //window.alert( 'Width = ' + myWidth );
  
  if (myWidth == 0) myWidth = 620;
  if (myHeight == 0) myHeight = 500;
  return myHeight;
  //window.alert( 'Height = ' + myHeight );
}


window.onresize = function (event) {
    doResize();
}

function doResize() {
	var width = getWidth();
	var height = getHeight();
	var poweredL = width - 105;
	var poweredT = height - 50;
	$("#map_canvas").width(width + 'px');
	$("#map_canvas").height(height + 'px');
	$("#powered-by1").css('left',poweredL + 'px');
	$("#powered-by1").css('top',poweredT + 'px');
}

function addPath() {

	var lineSymbol = {
		path : 'M 0,-1 0,1',
		strokeOpacity : 1,
		scale : 4
	};

	polyPath = new google.maps.Polyline({
			path : polyCoordinates,
			geodesic : true,
			strokeColor : '#FF0000',
			strokeOpacity : 0,
			icons : [{
					icon : {
						path : 'M 0,0 0,1',
						strokeOpacity : 1,
						scale : 2
					},
					offset : '0',
					repeat : '10px'
				}, {
					icon : {
						path : google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
						strokeOpacity : 0.5,
						stokeWeight : 1.0,
						fillColor : 'Red',
						fillOpacity : 1.0
					},
					offset : '50%'
				}
			],
		});

	polyPath.setMap(map);

	offset = {
		'tracks' : 0
	}
	setInterval(function () {
		animatePoly();
	}, 200);
}

function animatePoly() {
	if (offset['tracks'] > 100) {
		offset['tracks'] = 0;
	} else {
		offset['tracks']++;
	}

	var icons = polyPath.get('icons');
	icons[1].offset = offset['tracks'] + '%';
	polyPath.set('icons', icons);
}

function recenter() {
        map.setCenter(myLatlng);
        map.setZoom(13);
        if (infowindow != null)
               infowindow.close();
}

$(document).ready(function () {
	initialize();
});

var jsonData = [{"pin":"pin-1.png","rank":1,"lat":36.155171,"long":-115.149264,"title":"The Little White Wedding Chapel","fb":"wedding","avg":3.3,"image":"http://upload.wikimedia.org/wikipedia/commons/b/bb/Little_white_chapel_drive_thru_2007.jpg"},
{"pin":"pin-2a.png","rank":2,"lat":36.147247,"long":-115.156031,"title":"The Stratosphere Tower","fb":"stratosphere","avg":3.5,"image":"https://c1.staticflickr.com/1/180/468808374_49cb3b2cbd_z.jpg?zz=1"},
{"pin":"pin-3.png","rank":3,"lat":36.106224,"long":-115.17458,"title":"Mandarin Bar","fb":"mandarin","avg":4.0,"image":"http://upload.wikimedia.org/wikipedia/commons/3/38/Mandarin_Oriental_-_East_-_2011-06-04.jpg"},
{"pin":"pin-4.png","rank":4,"lat":36.114539,"long":-115.195684,"title":"Ghost Bar","fb":"ghost","avg":4.3,"image":"http://fast.swide.com/wp-content/uploads/20-best-rooftop-bars-relax-on-top-of-the-world/best-rooftop-bars-worldwide-from-new-york-to-rome-ghostbar-las-vegas.jpg"},
{"pin":"pin-5.png","rank":5,"lat":36.082017,"long":-115.172805,"title":"Welcome to Vegas Sign","fb":"welcome","avg":4.4,"image":"http://upload.wikimedia.org/wikipedia/commons/1/1d/Welcome_to_fabulous_las_vegas_sign.jpg"},
{"pin":"pin-6.png","rank":6,"lat":36.103001,"long":-115.173516,"title":"The Roller Coaster","fb":"roller","avg":4.4,"image":"http://upload.wikimedia.org/wikipedia/commons/a/af/NYNY-rollercoaster.jpg"},
{"pin":"pin-7.png","rank":7,"lat":36.170978,"long":-115.145468,"title":"Vegas Vic","fb":"vic","avg":4.6,"image":"http://upload.wikimedia.org/wikipedia/commons/3/3a/Vegas_Vic.jpg"},
{"pin":"pin-8.png","rank":8,"lat":36.112186,"long":-115.172515,"title":"The Eiffel Tower Experience","fb":"eiffel","avg":5.0,"image":"http://upload.wikimedia.org/wikipedia/commons/f/fd/Torre_Eiffel_(Las_Vegas).jpg"},
{"pin":"pin-9.png","rank":9,"lat":36.112012,"long":-115.171657,"title":"Bellagio Fountains","fb":"fountains","avg":5.5,"image":"http://pixabay.com/static/uploads/photo/2013/04/18/05/47/bellagio-105509_640.jpg"},
{"pin":"pin-10.png","rank":10,"lat":36.170788,"long":-115.144271,"title":"Fremont Street Experience","fb":"fremont","avg":5.5,"image":"http://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Fremont_Street_Experience_canopy_of_lights.jpg/1280px-Fremont_Street_Experience_canopy_of_lights.jpg"},
{"pin":"pin-11.png","rank":11,"lat":36.12269,"long":-115.170194,"title":"Tao Beach","fb":"tao","avg":5.9,"image":"https://c1.staticflickr.com/5/4042/4549645169_f6f53ec1b1_z.jpg"},
{"pin":"pin-12.png","rank":12,"lat":36.136924,"long":-115.163492,"title":"Adventure Theme Park","fb":"adventure","avg":6.3,"image":"http://upload.wikimedia.org/wikipedia/commons/2/2e/Adventuredome_Chaos_ride_(3).JPG"},
{"pin":"pin-13.png","rank":13,"lat":36.11766,"long":-115.172788,"title":"The High Roller","fb":"high","avg":6.4,"image":"http://upload.wikimedia.org/wikipedia/commons/d/d7/The_High_Roller_-_View_From_The_Linq_2.jpg"},
{"pin":"pin-14.png","rank":14,"lat":36.12395,"long":-115.169473,"title":"Lavo Lounge","fb":"lavo","avg":7.0,"image":"http://api.ning.com/files/8j0zyKqK8XC7e45YjB8IB3Qc9QHuyWMXciSVdBqvSeN1pe21iSIvXgNzVz-hjpTokoTiFSxaD7Q1URmGnFWYP4R31LDZLCR9/lavodiningbeg.jpg"},
{"pin":"pin-15.png","rank":15,"lat":36.111579,"long":-115.170799,"title":"Hyde Bellagio","fb":"bellagio","avg":7.5,"image":"http://upload.wikimedia.org/wikipedia/commons/2/2a/Bellagio_Las_Vegas.jpg"},
{"pin":"pin-16.png","rank":16,"lat":36.111913,"long":-115.17127,"title":"Chateau Nightclub","fb":"chateau","avg":7.7,"image":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSuGb9N2FRkuOq6Osyp09KBC85q-gL2C-kLc4m4IliiUCh7NXg7"},
{"pin":"pin-17.png","rank":17,"lat":36.109754,"long":-115.173873,"title":"The Boulevard Pool","fb":"boulevard","avg":8.1,"image":"http://upload.wikimedia.org/wikipedia/commons/a/ab/Cosmopolitan_-_Pool_Deck_01_-_2011-06-05.jpg"},
{"pin":"pin-18.png","rank":18,"lat":36.091864,"long":-115.175161,"title":"Shark Reef at Mandalay Bay","fb":"shark","avg":8.6,"image":"http://farm5.staticflickr.com/4137/4771613046_257a0ca2a4_b.jpg"},
{"pin":"pin-19.png","rank":19,"lat":36.081558,"long":-115.180828,"title":"Mix Lounge","fb":"mix","avg":9.7,"image":"https://c2.staticflickr.com/4/3262/3207088375_581838248f_z.jpg?zz=1"},
{"pin":"pin-20.png","rank":20,"lat":36.091864,"long":-115.175161,"title":"House Of Blues","fb":"blues","avg":10.7,"image":"http://upload.wikimedia.org/wikipedia/commons/f/fe/House_of_Blues.JPG"},
{"pin":"pin-21.png","rank":21,"lat":36.118698,"long":-115.186485,"title":"Voodoo Nightclub","fb":"voodoo","avg":12.4,"image":"http://www.stylestarlounge.com/wp-content/uploads/2012/05/voodoo-lounge-rooftop.gif"}];