<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="js/jquery-1.10.1.min.js"> </script>
<script src="js/jsonp.js"></script>
<script src="js/jquery.cycle.all.js"></script>
<script src="js/moment.min.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css">
<script>
$(document).ready(function(e) {
	clock()
	
	var departAirport;
	var oldFlightNum;
	
	getmenu(departAirport, oldFlightNum);
	
});

	
	function getmenu(departureLocation, oldFlightNum){
				
		if (departureLocation == null)
			departureLocation='LHR'; 
		
		 if (departureLocation=="LHR")
			{
				$('#destination-display').empty();
				$("#destination-display").append("Departures from Heathrow");
				$('#heathrow').css("background-position", "bottom");
				$('#gatwick').css("background-position", "top");
			}
		else
			{	
				$('#destination-display').empty();
				$('#destination-display').append("Departures from Gatwick");
				$('#heathrow').css("background-position", "top");
				$('#gatwick').css("background-position", "bottom");
			}
				
 	  $.getJSON("https://api.flightstats.com/flex/fids/rest/v1/json/"+departureLocation+"/departures?appId=583f07db&appKey=e9bc2c2cd98136f5060a5d50a1a7c8d2&requestedFields=airlineCode%2CflightNumber%2Ccity%2CcurrentTime%2Cgate%2Cremarks&lateMinutes=15&useRunwayTimes=false&excludeCargoOnlyFlights=true",function(result){  /*gets info and puts it in Result */		  	
	  
	  $.each(result, function(){					/* cycles through result */
		$.each(this, function(i, fids){				/* for each result, parse info */
		  var flightnumber = this.flightNumber;
		  var airline = this.airlineCode;
		  var destination = this.city;
		  var remarks = this.remarks;
		  var gate = this.gate;
		  var time = this.currentTime;
		  var index = result;
		  var items = []
			  
			  if(gate == undefined){
					 gate = "na"
				 }
				 		
					if ((oldFlightNum != flightnumber) && (checkAirline(airline) == true))
					{
			items.push('<div id="' + flightnumber + '" class="item"><div id="'+flightnumber+'" class="air">'+airline+'&nbsp;&nbsp;'+flightnumber+'</div><div class="remarks">'+remarks+'</div><div id="gate" class="details">Gate: &nbsp;'+gate+'</div><div id="time" class="time">'+time+'</div><div class="destination" >'+destination+'</div></div>')
			$("#main").append(items); 
					}

			 oldFlightNum = flightnumber;
	
   			 });	/* end pull each field */
			 
		});			/* end for each */
		
 	 }); 			/* end get json */
	
	 setTimeout(function hidediv(){ //cycle.js http://jquery.malsup.com/  jQuery Plugins (by malsup)
				var items = $("#main > div.item");
				var blockCount = 25;
			for (var i = 0; i < items.length; i+= blockCount) {
    			var slice = items.slice(i,i + blockCount);      
		        slice.wrapAll("<div class=\"block\"></div>");
				}
				$('#main').cycle({ 
				fx: 'none',
				timeout: 8000
					});	}, 10000) 
	 
	 
	cycle = setTimeout(getmenu(departAirport, oldFlightNum), 3600000);
					
	}; 				/* end getmenu */


					
function checkAirline(airBrand) {
	
		var marker = false;
	
	switch (airBrand) {
		case 'AA':
			marker = true;
		break
		case 'BA':
			marker = true;
		break
		case 'UA':
			marker = true;
		break
		case 'VS':
			marker = true;
		break
		case 'DL':
			marker = true;
		break	
		case 'U2':  /* Easy Jet */
			marker = true;
		break	
		case 'MT':  /* Thomas Cook Airlines */
			marker = true;
		break
	}
		
		return marker;
}
					

function clock() { //Moment.js is freely distributable under the terms of the MIT license. www.momentjs.com

   var outStr = moment().format('ddd MMM Do h:mm a ');
   $("#day").html(outStr);
   setTimeout('clock()',1000);
} 
</script>
</head>
<body style="-webkit-transform:rotate(-90deg);">
<img src="images/departure2.png" style="position:absolute;top:-920px; left:-165px; width:1200px;" />
<div id="day" class="clockfont" ></div>
<div id="destination-display"></div>
<div id="schedule-container">
  <div class="air-title">FLIGHT</div>
  <div class="remarks-title">REMARKS</div>
  <div class="details-title">GATE</div>
  <div class="time-title">TIME</div>
  <div class="destination-title">CITY</div>
  <div id="main" style="position:relative; top: 50px; width:1040px; height:1600px; class:block" ></div>
  <div class="clear"></div>
</div>
<div id="bottom-menu">
  <div id="heathrow" onMouseDown="$('#main').empty(); getmenu('LHR');"></div>
  <div id="gatwick" onMouseDown="$('#main').empty(); getmenu('LGW');"></div> 
</div>
<blockquote>&nbsp;</blockquote>
</body>
</html>
