RedBull_Rarities

Here we go... a super-user-friendly code which looks zany but works in a snap. Note: Still in development!

by Zach DeBruine

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="header">
  <img src="images/logo.png" id="logo"/>
  <input type="text">
    <div id="searchIconBackground" onmousedown="searchDown()" onmouseup="search()"></div>
    <img src="images/searchIcon.png" id="searchIcon" onmousedown="searchDown()" onmouseup="search()"/>
  </input>

</div>

<div id="menu">
<table><tr><td class="selected">Twitch</td><td>Daytrip</td><td>Vacation</td><td>Big Day</td><td>Quick Stop</td></tr></table>

</div>
-->
<div id="contents">
<!-- <div id="processingTime"></div> -->
<table><tr><td>

<div id="pasteArea">
	<div id="loading"><img src="images/loading.gif" /></div>
</div>

</td><td style="vertical-align:top;">
<div id="sideBar">

<b>Location:</b><br />
<table><tr><td style="text-align:right;font-weight:bold;">*Country:</td><td>
<select id="countrySelect" onchange="updateCountrySelect()">
<option value='US'>United States</option>
<option value='CA'>Canada</option>
<option value='AU'>Australia</option>
<option value='GB'>United Kingdom</option>
<option value='MX'>Mexico</option>
<option disabled>------------------------------</option>
<option value='AC'>Ashmore and Cartier Islands</option>
<option value='AD'>Andorra</option>
<option value='AE'>United Arab Emirates</option>
<option value='AF'>Afghanistan</option>
<option value='AG'>Antigua and Barbuda</option>
<option value='AI'>Anguilla</option>
<option value='AL'>Albania</option>
<option value='AM'>Armenia</option>
<option value='AN'>Netherlands Antilles</option>
<option value='AO'>Angola</option>
<option value='AQ'>Antarctica</option>
<option value='AR'>Argentina</option>
<option value='AS'>American Samoa</option>
<option value='AT'>Austria</option>
<option value='AU'>Australia</option>
<option value='AW'>Aruba</option>
<option value='AX'>Åland Islands</option>
<option value='AZ'>Azerbaijan</option>
<option...

CSS

body{
	margin:0px;
	padding:0px;
	font-family:arial,sans serif;
}

#header{
	margin:0px;
	padding:0px;
	width:100%;
	background:rgb(241,241,241);
	height:55px;
	position:relative;
}

#logo{
	width:175px;
	margin-top:-5px;
	margin-left:-5px;
}

#header input{
	width:500px;
	background:white;
	border:rgb(200,200,200) 1px solid;
	position:absolute;
	left:225px;
	top:10px;
	height:33px;
	border-radius:0px 3px 3px 0px;
	color:rgb(45,45,45);
	padding:8px 15px 8px 8px;
	font-size:17px;
}

#searchIcon {
	height:15px;
	width:33px;
	position:absolute;
	top:18px;
	left:685px;

}

#searchIconBackground {
	width:47px;
	height:33px;
	background:rgb(70,132,237);
	position:absolute;
	left:678px;
	top:10px;
	border-radius:0px 3px 3px 0px;
}

#searchIcon:hover{
	cursor:pointer;
}

#searchIconBackground {
	cursor:pointer;
}

#myAccount {
	position:absolute;
	right:20px;
	top:10px;
	height:33px;
	font-size:15px;
	text-align:center;
	color:rgb(60,60,60);
}

#Trips {
	background:rgb(230,230,230);
	padding:8px;
	color:rgb(40,40,40);
	width:70px;
}

#Trips:hover {
	background:rgb(221,221,221);
	cursor:pointer;
}

#Username{
	margin-right:15px;
	position:absolute;
	right:120px;
	top:10px;
	width:200px;
	text-align:right;
}

#myAccount img{
	position:absolute;
	right:100px;
	top:15px;
	width:18px;
}


#menu{
	margin:0px;
	padding:0px;
	width:100%;
	border-bottom:rgb(200,200,200) 1px solid;
	height:55px;
	padding-left:125px;
}

#menu table {
	height:55px;
	padding:0px;
	margin:0px;
	color:rgb(75,75,75);
	font-size:15px;
}

#menu td {
	padding:0px 10px;
}

#menu td.selected {
	color:rgb(240,20,20);
	font-weight:bold;
}

#contents {
	margin-left:115px;
	padding:15px auto 15px 0px;
}

#contentsbutton {
	background:rgb(235,235,235);
	border:rgb(150,150,150) 1px solid;
	border-radius:2px;
}

#contentsbutton .selected {
	background:rgb(244,244,244);
}

.observations {
	width:700px;
	border:1px solid rgb(238,238,238);
	margin:0px 0px -1px...

JavaScript

var daysBack = getUrlParameter('back');
var homeLat = getUrlParameter('lat');
var homeLng = getUrlParameter('lng');
var rtype = getUrlParameter('rtype');
if(rtype=="country"){rtype="country";}
else if(rtype=="state"){rtype="subnational1";}
else if(rtype=="county"){rtype="subnational2";}
var rcode = getUrlParameter('rcode');
var parameters = getUrlParameter('p');
var hideProvisional = parameters.substring(0,1);
var sortBy = parameters.substring(1,2);
var mapType = parameters.substring(2,3);
var showDistance = parameters.substring (3,4);
if(sortBy==0){sortBy="recent";}
else if(sortBy==1){sortBy="popular";}
else if(sortBy==2){sortBy="trending";}
if(mapType==0){mapType="sattelite";}
else if(mapType==1){mapType="roadmap";}
else if(mapType==2){mapType="hybrid";}
var autoInvalidate = parameters.substring(4,5);

initialize();
// update select options in location chooser


function exploreArr(arr){
	var filterArr = [];
	for(var i=0;i<arr.length-1;i++){
		if(arr[i][1].indexOf("(")<1&&arr[i][1].indexOf(".")<1&&arr[i][1].indexOf("/")<1){
			filterArr.push(arr[i][1]);
		}
	}
	filterArr = removeDup(filterArr); // convert array length from total observations to total checklists
	
	speciesArr = speciesArr.filter(function(val) {
  		return filterArr.indexOf(val) == -1;
	});
	var d = [];
	var CR = condensedRarities;
	for(var i=0;i<speciesArr.length;i++){
		for(var j=0;j<CR.length;j++){
			if(CR[j].comName.indexOf("(")>0){
				var compareName = CR[j].comName.substring(0,CR[j].comName.indexOf("(")-1);
			}
			else{
				var compareName = CR[j].comName;
			}
			if(compareName==speciesArr[i]){
				d.push(condensedRarities[j]);
				CR.splice(j,1);
				j--;
			}
		}
	}

	d.sort(function(b,a) {return (a.uniqueObservers > b.uniqueObservers) ? 1 : ((b.uniqueObservers > a.uniqueObservers) ? -1 : 0);} );
	printSightings(d,50);
}

function printArr(arr){
	var html;
	for(var i=0;i<arr.length;i++){
		html+=arr[i] + "<br />";
	}
	document.getElementById("pasteArea").innerHTML = html;
}

function...