<!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='http://fonts.googleapis.com/css?family=Exo+2:400,700,900' rel='stylesheet' type='text/css'> -->
<link href="styles.css" rel="stylesheet" type="text/css">
<script>
$(document).ready(function(e) {
	clock()
	
	var arrivalCity;
	var oldFlightNum;
	
	setTimeout(getmenu(arrivalCity, oldFlightNum), 360000);
});

	
	function getmenu(arrivalCity){
		if (arrivalCity == null)
			arrivalCity='SF'; 
		
		 if (arrivalCity=="SF")
			{
				$('#destination-display').empty();
				$("#destination-display").append("O'Hare to SFO");
				$('#heathrow').css("background-position", "bottom");
				$('#gatwick').css("background-position", "top");
				$('#dallas').css("background-position", "top");
			}
		else if (arrivalCity=="NY")
			{	
				$('#destination-display').empty();
				$('#destination-display').append("O'Hare to JFK");
				$('#heathrow').css("background-position", "top");
				$('#gatwick').css("background-position", "bottom");
				$('#dallas').css("background-position", "top");	 
			}
		
		else if (arrivalCity=="DL")
			{
				$('#destination-display').empty();
				$('#destination-display').append("O'Hare to DFW");
				$('#sanFrancisco').css("background-position", "top");
				$('#newYork').css("background-position", "top");
				$('#dallas').css("background-position", "bottom");
			}
			
				
 	  $.getJSON("https://api.flightstats.com/flex/fids/rest/v1/json/ORD/departures?appId=583f07db&appKey=e9bc2c2cd98136f5060a5d50a1a7c8d2&requestedFields=airlineCode%2CflightNumber%2Ccity%2CcurrentTime%2Cgate%2Cremarks&lateMinutes=15&useRunwayTimes=false&excludeCargoOnlyFlights=false",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"
				 }	
				 
				 console.log ("Current Flight num: " + flightnumber);
				 		
					if ((destination == "San Francisco") && (arrivalCity=="SF") && (oldFlightNum != flightnumber))
					{
			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); 
					}
		
		 if ((destination == "New York") && (arrivalCity=="NY") && (oldFlightNum != flightnumber))
		 {
		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); 
		 }
			
			 if ((destination == "Dallas") && (arrivalCity=="DL") && (oldFlightNum != flightnumber))
			{
			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;
			 console.log ("old Flight Num = " + oldFlightNum);
	
   			 });	/* end pull each field */
			 
		});			/* end for each */
		
 	 }); 			/* end get json */
	}; 				/* end getmenu */

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'
					});	}, 10000) 
					

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('SF');"></div>
  <div id="gatwick" onMouseDown="$('#main').empty(); getmenu('NY');"></div>
  <div id="dallas" onMouseDown="$('#main').empty(); getmenu('DL');"></div>
</div>
<blockquote>&nbsp;</blockquote>
</body>
</html>
