google.load("maps", "2");
var map;
var city;
var cities;
var sidebar;
var marker = [];
var newIcon;
var about;
function load(){
	map = new GMap2(document.getElementById("map")); 
	map.setCenter(new GLatLng(38.523875,-95.670399), 4); 
	map.setUIToDefault();
	map.openInfoWindowHtml(map.getCenter(),"<div id='trend'></div>");
	map.closeInfoWindow();
	newIcon = MapIconMaker.createMarkerIcon({width: 38, height: 38, primaryColor: "#cbed52"});
	getHappninApi('http://api.happn.in/cities','showHappninCities');
	getTwitterApi('http://search.twitter.com/trends.json?callback=','showTwitterTrends');
	document.getElementById("searchBox").value = '';
	about = document.getElementById("tweets").innerHTML;
	var adsOptions = {maxAdsOnMap:1, channel:"8157042634", style:'adunit'};
	var ads = new GAdsManager(map,"ca-pub-2773616400896769", adsOptions);
	ads.enable();
}
function getTwitterApi(api, callback) {
	var script = document.createElement('script');
	script.setAttribute('src', api+callback);
	script.setAttribute('type', 'text/javascript');
	document.documentElement.firstChild.appendChild(script);
}
function showTwitterTrends(data) {
	var searchUrl, searchApi;
	var trends = '';
	var trendsBar = '<span class="bottomLink">Trending on Twitter: </span>';
	document.getElementById("twittertrends").innerHTML = '<div align="left"><div class="title">Trending on Twitter</div><div class="time_stamp">' + data.as_of + '</div>';
	for(var i=0; i<data.trends.length; i++) {
		searchUrl = data.trends[i].url;
		searchApi = searchUrl.replace('search?','search.json?');
		trends += '<div class="trendingtweets" align="left" onmouseover="this.className=\'trendingtweets-hover\'" onmouseout="this.className=\'trendingtweets\'" onclick="getTwitterApi(\''+searchApi+'&callback=\',\'showTwitterTweets\')">' + data.trends[i].name + '</div>';
		trendsBar += '<div class="phrase" onmouseover="this.className=\'phrase-hover\'" onmouseout="this.className=\'phrase\'" onclick="getTwitterApi(\''+searchApi+'&callback=\',\'showTwitterTweets\')">' + data.trends[i].name + '</div>&nbsp';
	}
	document.getElementById("twittertrends").innerHTML += trends + '</div>';
	document.getElementById("trendsBar").innerHTML = trendsBar;
}
function showTwitterTweets(data) {
	var query = unescape(data.query).replace(/\+/g," ");
	var tweets = '<div class="title">'+query+'</div><div class="time_stamp">Trending on Twitter</div>';
	for(var i=0;i<data.results.length;i++){
		tweets += '<div class="tweet"><a href="http://twitter.com/'+data.results[i].from_user+'"  target="_blank">@'+data.results[i].from_user+'</a>: ' + replaceURLWithHTMLLinks(data.results[i].text) + '</div>';
	}
	document.getElementById("tweets").innerHTML = tweets + '<br><div align="center"><a href="#" onclick="document.getElementById(\'tweets\').innerHTML=about;getTwitterApi(\'http://search.twitter.com/trends.json?callback=\',\'showTwitterTrends\');">Back</a> | <a href="http://search.twitter.com/search?q='+data.query+'" target="_blank">Show More</a></div><br>';
}
function getHappninApi(api, callback) {
	var script = document.createElement('script');
	script.setAttribute('src', 'http://www.mapmash.in/jsonp?callback='+callback+'&url='+api);
	script.setAttribute('type', 'text/javascript');
	document.documentElement.firstChild.appendChild(script);	
}
function showHappninCities(data){
	cities = data;
	sidebar = '';
	var state = '';
	for(var i=0; i<data.length; i++) {
		state = '';
		if(data[i].state != '') state = ', '+data[i].state;
		addCityPin(i,data[i].city, state, data[i].country, data[i].lat, data[i].lon, data[i].slug, data[i].username);
		sidebar += '<div id="city" class="city" onmouseover="this.className=\'city-hover\'" onmouseout="this.className=\'city\'" onclick="showInfoWin('+i+',\''+data[i].city+'\',\''+state+'\',\''+data[i].country+'\',\''+data[i].slug+'\',\''+data[i].username+'\')">'+data[i].city+state+'</div>';
	}
	document.getElementById("cities").innerHTML = sidebar;
}
function addCityPin(i, city, state, country, lat, lng, slug, twitter ) {
	marker[i] = new GMarker(new GLatLng(lat, lng), {icon: newIcon, title: city});
	map.addOverlay(marker[i]);
	GEvent.addListener(marker[i], "click", function() {
		showInfoWin(i, city, state, country, slug, twitter );
	});
}
function showInfoWin(i, city, state, country, slug, twitter ) {
	marker[i].openInfoWindowHtml('<div class="infowin">Twitter Trends in <b>'+city+state+' ('+country+')</b><br><br><div id="trend" style="height:80px;width:300px"><img src="20_loading_icon.gif">loading...</div><br><div class="footer">Follow on Twitter: <a href="http://twitter.com/'+twitter+'">@'+twitter+'</a><br>Powered by <a href="http://happn.in">Happn.in</a></div></div>');
	getHappninApi('http://api.happn.in/'+slug+'/phrases','showHappninTrends');
}
function showHappninTrends(data) {
	city = data;
	var trends = '';
	for(var i=0;i<data[0].phrases.length;i++){
		trends += '<div class="phrase" onmouseover="this.className=\'phrase-hover\'" onmouseout="this.className=\'phrase\'" onclick="showHappninTweets('+i+')">' +data[0].phrases[i].phrase + '</div>&nbsp ';
	}
	document.getElementById("trend").innerHTML = trends;
}
function showHappninTweets(id) {
	var tweets = '<div class="title">'+city[0].phrases[id].phrase+'</div><div class="time_stamp">'+ city[0].generated_at+'</div>';
	for(var i=0;i<city[0].phrases[id].tweets.length;i++){
		tweets += '<div class="tweet"><a href="http://twitter.com/'+city[0].phrases[id].tweets[i].user+'"  target="_blank">@'+city[0].phrases[id].tweets[i].user+'</a>: ' + replaceURLWithHTMLLinks(city[0].phrases[id].tweets[i].text) + '</div>';
	}
	document.getElementById("tweets").innerHTML = tweets + '<br><div align="center"><a href="http://search.twitter.com/search?q='+city[0].phrases[id].phrase+'" target="_blank">More on Twitter...</a></div><br>';
}
function findMatch(str) {
	if(str.length == 0) {
		document.getElementById("cities").innerHTML = sidebar;
	} else {
		document.getElementById("cities").innerHTML = '';
		for(var i=0; i<cities.length; i++) {
			var match = '';
			for(var j=0; j<cities[i].city.length; j++){
				match += cities[i].city[j];
				state = '';	
				if(str.toLowerCase() == match.toLowerCase()) {
					if(cities[i].state != '') state = ', '+cities[i].state;
					document.getElementById("cities").innerHTML += '<div id="city" class="city" onmouseover="this.className=\'city-hover\'" onmouseout="this.className=\'city\'" onclick="showInfoWin('+i+',\''+cities[i].city+'\',\''+state+'\',\''+cities[i].country+'\',\''+cities[i].slug+'\',\''+cities[i].username+'\')">'+cities[i].city+state+'</div>';
				}
			}
		}
	}
}
function replaceURLWithHTMLLinks(text) {
    var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/i;
    return text.replace(exp,"<a href='$1' target='_blank'>$1</a>"); 
}