diff --git a/.bowerrc b/.bowerrc
new file mode 100644
index 0000000..7c70bbc
--- /dev/null
+++ b/.bowerrc
@@ -0,0 +1,4 @@
+{
+	"directory": "testproject/comp",
+	"json": "bower.json"
+}
diff --git a/bower.json b/bower.json
new file mode 100644
index 0000000..b3eb19e
--- /dev/null
+++ b/bower.json
@@ -0,0 +1,4 @@
+{
+	"name": "dave-checking-app",
+	"version": "0.0.0"
+}
diff --git a/metadata/classes/CheckInController.cls b/metadata/classes/CheckInController.cls
index c2fcf80..3bdfd08 100644
--- a/metadata/classes/CheckInController.cls
+++ b/metadata/classes/CheckInController.cls
@@ -7,7 +7,7 @@ global class CheckInController{
 
         // SOQL query to get the nearest accounts
         String queryString =
-        'SELECT Id, Name, ' +
+        'SELECT Id, Name, Location__Latitude__s, Location__Longitude__s, ' +
         'Phone, BillingStreet ' +
         'FROM Account ' +
         'WHERE DISTANCE(Location__c, GEOLOCATION('+lat+','+lon+'), \'mi\') < 20 ' +
@@ -33,10 +33,10 @@ global class CheckInController{
             
             FeedItem post = new FeedItem();
             post.ParentId = acctId;
-            post.Body = UserInfo.getName() + ' just checked in for an on-site meeting.';
+            post.Body = UserInfo.getName() + ' just checked in for an on-site meeting.\n' + comments;
             post.type = 'LinkPost'; 
             post.LinkUrl = '/' + myTask.Id;
-            post.Title = myTask.subject;
+            post.Title = 'Checked In: ' + myTask.subject;
             insert post; 
         } catch(System.Exception ex) {
             system.debug(ex.getMessage());
@@ -44,4 +44,13 @@ global class CheckInController{
         
         return true;
     }
+    
+    global String getTaskStatuses() {
+        Schema.DescribeFieldResult statusField = Task.Status.getDescribe();
+        List<String> plValues = new List<String>();
+        for (Schema.PicklistEntry pe : statusField.getPicklistValues()) {
+            plValues.add(pe.getValue());
+        }
+        return JSON.serialize(plValues);
+    }
 }
\ No newline at end of file
diff --git a/metadata/pages/CheckInPage.page b/metadata/pages/CheckInPage.page
index fcfcb9d..2c0cbb2 100644
--- a/metadata/pages/CheckInPage.page
+++ b/metadata/pages/CheckInPage.page
@@ -1,90 +1,109 @@
-<apex:page sidebar="false" showheader="false" controller="CheckInController">
-    <apex:includeScript value="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js" />
+<apex:page sidebar="false" standardStylesheets="false" showheader="false" controller="CheckInController">
+    <apex:includeScript value="//cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js" />
     
     <!--Include Stylsheets for the Mobile look and feel -->
     <apex:stylesheet value="{!URLFOR($Resource.Mobile_Design_Templates, 
                 'Mobile-Design-Templates-master/common/css/app.min.css')}"/>
     <apex:includeScript value="{!URLFOR($Resource.Mobile_Design_Templates, 
                 'Mobile-Design-Templates-master/common/js/jQuery2.0.2.min.js')}"/>
+    
+    <apex:stylesheet value="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css"/>
     <apex:includeScript value="{!URLFOR($Resource.Mobile_Design_Templates, 
                 'Mobile-Design-Templates-master/common/js/jquery.touchwipe.min.js')}"/>
+    <apex:includeScript value="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"/>
     <apex:includeScript value="{!URLFOR($Resource.Mobile_Design_Templates, 
                 'Mobile-Design-Templates-master/common/js/main.min.js')}"/>
     <apex:stylesheet value="{!URLFOR($Resource.CheckInCSS)}" />
                 
     <apex:includeScript value="/canvas/sdk/js/publisher.js" />
-     
+     <style>
+        ul li, ol li {
+            margin-left: 0em;
+        }
+         h2 {
+	         font-size: 115%;
+         }
+         section>.content {
+         	padding-top: 0px;
+         	padding-bottom: 0px;
+         }
+    </style>
     <div class="app-content" id="startPage" data-bind="ifnot: selectedAccount">
-    <div class="list-view-header">Nearby Accounts</div>
+        <div class="list-view-header">Nearby Accounts</div>
         <ul class="list-view with-swipe right-one-icons" data-bind="foreach: accountArray">
-          <li>
-            <a href="#" class="content" data-bind="click: toggleSelect">
-              <h2 data-bind="text: Name"></h2>
-              <p data-bind="text: BillingStreet"></p>
-              <div class="list-view-icons">
-                <span class="icon-right-arrow">&nbsp;</span>
-              </div>
-            </a>
-          </li>
+            <li>
+                <a href="#" class="content" data-bind="click: toggleSelect" data-transition="slide">
+                    <h2 data-bind="text: Name"></h2>
+                    <p data-bind="text: BillingStreet"></p>
+                    (<span data-bind="text: distance"></span>)
+                    <div class="list-view-icons">
+                        <span class="icon-right-arrow">&nbsp;</span>
+                    </div>
+                </a>
+            </li>
         </ul>
     </div>
-    <div class="result-page" id="resultPage" data-bind="if: selectedAccount">
-    	<div class="list-view-header">Check In Information</div>
-        <div data-bind="with: selectedAccount">
-            <section class="border-bottom">
-               <div class="content">
-                  <h3>Account Name</h3>
-                  <div class="form-control-group">
-                    <div class="form-control form-control-text">
-                      <h1 data-bind="text: Name"></h1>
-                      <h2 data-bind="text: Id" id="input_acctId" style="display:none;"></h2>
-                    </div>
-                  </div>
-               </div>
-            </section>
+    <div class="result-page" id="resultPage" data-bind="if: selectedAccount" data-transition="slide">
+<!--        <apex:pageBlock >
+            <apex:pageBlockSection title="Stuff in a page block section"> -->
+                <div class="list-view-header">Check In Information</div>
+                <div data-bind="with: selectedAccount">
+                    <section class="border-bottom">
+                        <div class="content">
+                            <h3>Account Name</h3>
+                            <div class="form-control-group">
+                                <div class="form-control form-control-text">
+                                    <h1 data-bind="text: Name" style="line-height: 40px;"></h1>
+                                    <h2 data-bind="text: Id" id="input_acctId" style="display:none;"></h2>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
                     
-            <section class="border-bottom">
-               <div class="content">
-                  <h3>Subject</h3>
-                  <div class="form-control-group">
-                    <div class="form-control form-control-text">
-                        <h2>On-Site</h2>
-                    </div>
-                  </div>
-               </div>
-            </section>
+                    <section class="border-bottom">
+                        <div class="content">
+                            <h3>Subject</h3>
+                            <div class="form-control-group">
+                                <div class="form-control form-control-text">
+                                    <h2 style="line-height: 30px;">On-Site</h2>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
                     
-          	<section class="border-bottom">
-                <div class="content">
-                  <h3>Status</h3>
-                  <div class="form-control-group">
-                    <div class="form-control form-control-text">
-                      <select id="input_status" data-bind="options: Task.availableStatus, value: Task.Status"></select>
-                    </div>
-                  </div>
-                </div>
-          	</section>
-      
-            <section class="border-bottom">
-              <div class="content">
-                  <h3>Comments</h3>
-                  <div class="form-control-group">
-                    <div class="form-control form-control-text">
-                      <input type="textarea" id="input_comments" value="Check In: On-Site Meeting"/>
-                    </div>
-                  </div>
-              </div>
-            </section>
-      
-            <section class="data-capture-buttons one-buttons">
-                <div class="content">
-                  <section class="data-capture-buttons one-buttons">
-                    <a href="#" data-bind="click: toggleSelect" >Back</a>
-                  </section>
-                </div>
-            </section>
-    	</div> 
-  	</div>
+                    <section class="border-bottom">
+                        <div class="content">
+                            <h3>Status</h3>
+                            <div class="form-control-group" style="margin-top: 10px;">
+                                <div class="form-control form-control-text">
+                                    <select id="input_status" data-bind="options: Task.availableStatus, value: Task.Status"></select>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+                    
+                    <section class="border-bottom">
+                        <div class="content">
+                            <h3>Comments</h3>
+                            <div class="form-control-group" style="margin-top: 10px;">
+                                <div class="form-control form-control-text">
+                                    <input type="textarea" id="input_comments" value="Check In: On-Site Meeting"/>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+                    
+                    <section class="data-capture-buttons one-buttons">
+                        <div class="content">
+                            <section class="data-capture-buttons one-buttons">
+                                <a href="#" data-bind="click: toggleSelect" >Back</a>
+                            </section>
+                        </div>
+                    </section>
+                </div> 
+<!--            </apex:pageBlockSection>
+        </apex:pageBlock> -->
+    </div>
 <script>
   
   $(document).ready(function(){
@@ -98,16 +117,18 @@
 
     function Task(json){
         json = json || {};
-        this.availableStatus = ko.observableArray(['Completed', 'Not Started', 'Waiting on Someone Else', 'Deferred']);
-
+        this.availableStatus = ko.observableArray({!taskStatuses}); //['Completed', 'Not Started', 'Waiting on Someone Else', 'Deferred']);
     }
   
   function Account(json) {
     console.log(json);
     this.Id = json.Id || null;
-    this.Name = json.Name || '';
+    var d = document.createElement("div");
+    d.innerHTML = json.Name || '';
+    this.Name = d.firstChild.nodeValue;
     this.BillingStreet = json.BillingStreet || '';
-    
+    this.distance = '';
+      
     this.Task = new Task();
     
     this.isSelected = ko.computed(function() {
@@ -120,12 +141,11 @@
         ViewModel.selectedAccount(null);
         $("#startPage").show();
         $("#resultPage").hide();
-        
+        Sfdc.canvas.publisher.publish({name: "publisher.setValidForSubmit", payload:"false"});        
       } else {
         ViewModel.selectedAccount(account);
         //This method will activate the publish button so the form can be submitted 
         Sfdc.canvas.publisher.publish({name: "publisher.setValidForSubmit", payload:"true"});
-        
         $("#startPage").hide();
         $("#resultPage").show();
       }
@@ -134,36 +154,63 @@
   
   ko.applyBindings(ViewModel);
   
-  function initialize(){
-      var lat = 0;
-      var lon = 0;
-      
-      if (navigator.geolocation) {
-          navigator.geolocation.getCurrentPosition(function(position){
+    if (typeof(Number.prototype.toRadians) === "undefined") {
+  		Number.prototype.toRadians = function() {
+    		return this * Math.PI / 180;
+  		}	
+    }
+    
+    var dist = function(lat1, lon1, lat2, lon2) {
+	    var R = 6371; // km
+        var φ1 = lat1.toRadians();
+        var φ2 = lat2.toRadians();
+        var Δφ = (lat2-lat1).toRadians();
+        var Δλ = (lon2-lon1).toRadians();
+        
+        var a = Math.sin(Δφ/2) * Math.sin(Δφ/2) +
+                Math.cos(φ1) * Math.cos(φ2) *
+                Math.sin(Δλ/2) * Math.sin(Δλ/2);
+        var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
+        
+        var d = (R * c) / 1.609344 ;
+        
+    	return parseFloat(d).toFixed(2) + " mi.";
+    }
+    
+    function initialize(){
+        var lat = 0;
+        var lon = 0;
+        
+        if (navigator.geolocation) {
+            console.log("Hmm... I guess the navigator has a geolocation function");
+            navigator.geolocation.getCurrentPosition(function(position){
                 lat = position.coords.latitude;
                 lon = position.coords.longitude;
-                
+                console.log("Returned from getCurrentPosition...\n" + lat + "\n" + lon);
                 getNearby();
-          });
-          
-          function getNearby(){ 
-             Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.CheckInController.getNearby}', lat, lon,
-                 function(result, event){
-                     if(event.status){
-                            ViewModel.accountArray(ko.utils.arrayMap(result, function(account) {
-                                return new Account(account);
-                            }));
-                        } else if (event.type === 'exception'){
-                            console.log(result);
-                        } else {
-                                                        
-                        }
-                });
-          }
-      } else {
-          // display can't get location
-      }
-     }
+            });
+            
+            function getNearby(){ 
+                Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.CheckInController.getNearby}', lat, lon,
+					function(result, event){
+						if(event.status){
+							ViewModel.accountArray(ko.utils.arrayMap(result, function(account) {
+                                var d = dist(lat, lon, account.Location__Latitude__s, account.Location__Longitude__s);
+								var a = new Account(account);
+                                a.distance = d;
+                                return a;
+							}));
+						} else if (event.type === 'exception'){
+							console.log(result);
+						} else {
+					}
+				});
+            }
+        } else {
+            // display can't get location
+            console.log("No geolocation function available in this browser!");
+        }
+    }
 
         Sfdc.canvas.publisher.subscribe({name: "publisher.post", onData:function(e) {
             // This subscribe fires when the user hits 'Submit' in the publisher
diff --git a/metadata/pages/CheckInPage.page-meta.xml b/metadata/pages/CheckInPage.page-meta.xml
index 32c6272..8863c47 100644
--- a/metadata/pages/CheckInPage.page-meta.xml
+++ b/metadata/pages/CheckInPage.page-meta.xml
@@ -8,4 +8,9 @@
         <minorNumber>6</minorNumber>
         <namespace>sf_chttr_apps</namespace>
     </packageVersions>
+    <packageVersions>
+        <majorNumber>1</majorNumber>
+        <minorNumber>5</minorNumber>
+        <namespace>sf_com_apps</namespace>
+    </packageVersions>
 </ApexPage>