html

<title>Bootstrap, from Twitter</title>

<!-- Le styles -->
<link href="libs/bootstrap/css/bootstrap.css" rel="stylesheet">
<style>
  body {
    padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
  }
  
  #tip{
	 position : absolute;
	 border : 1px solid gray;
	 background-color : #efefef;
	 padding : 3px;
	 z-index: 1000;
	 /* set this to create word wrap */
	 max-width: 200px;
	 white-space:pre;
	}​
</style>
<link href="libs/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="libs/bootstrap/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="libs/bootstrap/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="libs/bootstrap/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="libs/bootstrap/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="libs/bootstrap/ico/apple-touch-icon-57-precomposed.png">

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">SEPTA Sim</a>

    </div>
  </div>
</div>

<div class="container">

  <div class="row">
    <div class="span8">
    	<div class="row controls-row">
    	
	      	<div class="span1">
	      		<span id="septa-time-display">3:00</span>
	      	</div>

	      	<div class="span6">
		      	<input id="septa-time-slider" type="range" min="0" max="1440" value="0"" step="1"
		      	  style="width: 100%">
		      </div>
		      
	      	<div class="span1">
		      	<button type="button" id="septa-play-button">Play</button>
		      </div>

		    </div> <!-- controls-row -->

				<div class="septa-canvas-wrapper well" style="overflow: scroll; height: 600px;">
        	<div id="septa-canvas" style="width: 100%; height: 900px"></div>
        </div>
    </div>

    <div class="span4">
    	<div>
    		<form action="../save_to_file.php" method="POST">
    			Service Type:
    			<select name="service_id" class="input-small" style="margin-bottom: 0px;">
    				<options value="S1" selected="selected">Weekdays</options>
    				<options value="S2">Saturday</options>
    				<options value="S3">Sunday/Holiday</options>
    				<options value="S4">Friday Night</options>
    			</select>
    			<input type="hidden" name="deltas" value="[[], []]">
    			<button type="submit" class="btn">Save Changes to File</button>
    		</form>
    	</div>
    	
      <div class="">
		<div id="train-schedule">
			
		</div>
	  </div>
    </div>
  </div>
  
  <div id="tip"></div>​

</div> <!-- /container -->

<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->

<script src="libs/jquery.js"></script> <script src="libs/underscore.js"></script> <script src="libs/backbone.js"></script> <script src="libs/raphael.js"></script> <script src="js/models/station.js"></script> <script src="js/models/train.js"></script> <script src="js/models/util.js"></script> <script src="js/views/schedulelist.js"></script> <script src="js/views/septamap.js"></script> <script src="js/views/activeTripsGridView.js"></script> <script src="js/views/timeslider.js"></script> <script src="data/schedule_S1.js"></script> <script src="data/station_locations.js"></script> <script src="data/stations_by_route.js"></script> <script> $(function(){ trainCollection = new SeptaSim.TrainCollection(SCHEDULE_S1); // // var allSchedulesView = new SeptaSim.AllSchedulesView({ // collection: trainCollection // }); // allSchedulesView.render(); stationCollection = new SeptaSim.StationCollection(STATION_LOCATIONS); septaMapView = new SeptaSim.SeptaMapView({ trainCollection: trainCollection, stationCollection: stationCollection }); timeSliderView = new SeptaSim.TimeSliderView({ trainCollection: trainCollection, stationCollection: stationCollection }); allTripsView = new SeptaSim.AllTripsView({ trainCollection: trainCollection }); septaMapView.render(); allTripsView.render(); }); var tip = $("#tip").hide(); var tipText = ""; var over = false; var nodeMap = {}; $(document).mousemove(function(e){ if (over){ tip.css("left", e.clientX+20).css("top", e.clientY+20); tip.text(tipText); } }); function addTip(node, txt){ $(node).mouseenter(function(){ tipText = txt; tip.fadeIn(); over = true; }).mouseleave(function(){ tip.fadeOut(200); over = false; }); } </script>