diff --git a/css/style.css b/css/style.css
index 31c744b..80e969d 100644
--- a/css/style.css
+++ b/css/style.css
@@ -9,7 +9,6 @@ body{
 #ui-page-start, #ui-page-start > .ui-content { height: 100% }
 
 #home .ui-header, #home .ui-content, #home .ui-footer, #credits .ui-header, #credits .ui-content, #credits .ui-footer{
-  max-width:600px;
   margin:0 auto;
   border-left-width: 1px;
   border-right-width: 1px;
@@ -23,6 +22,10 @@ body{
   padding:0 10px;
 }
 
+.tagline{
+  padding-bottom:5px
+}
+
 #map{
   overflow-y:hidden;
 }  
@@ -96,7 +99,7 @@ body{
   margin-bottom:4px;
 }
 
-#startbox{
+#startBox{
   clear:both;
 }
 
@@ -121,8 +124,10 @@ label{
   width:100%;
 }
 
-#directions .title{
+#directions .waypoint{
   clear:both;
+  margin-top:7px;
+  overflow:hidden;
 }
 
 #directions h2{
@@ -149,23 +154,106 @@ label{
   margin-left:90px;
 }
 
-#directions .streetview{
-  font-size:12px;
-  color:#666;
-  padding:2px 3px;
-  border-radius:2px;
+#directions .btn{
+  display:inline-block;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
   background-color:white;
   text-shadow:none;
+  text-decoration:none;
+  -moz-box-shadow:    3px 3px 5px #333;
+  -webkit-box-shadow: 3px 3px 5px #333;
+  box-shadow:         3px 3px 5px #333;
+  border:2px #666 solid;
+  color: #333;
+  font-weight:bold;
+}
+
+#directions .actions{
+  margin-bottom:10px;
+  overflow:hidden;
+  padding-bottom:5px;
+}
+
+#directions .streetview{
+  font-size:12px;
+  padding:7px 8px;
 }
 
 #directions .rating{
-  display:inline-block;
-  margin-left:15px;
-  margin-bottom:5px;
-  padding:1px 3px;
-  border-radius:2px;
-  background-color:white;
+  margin-left:20px;
+  padding:5px 8px;
   font-size: 12px;
-  color: #666;
-  text-shadow: none;
-}
\ No newline at end of file
+  margin-top:5px;
+}
+
+.summary{
+  margin:5px 0;
+}
+
+.additionalInfo,
+#headerUpdate{
+  display:none;
+}
+
+@media screen and (min-width: 800px) {
+  #inputs{
+    max-width:600px;
+    margin:auto;
+  }
+  .logo{
+    margin:0 15px 5px 15px;
+  }
+  .additionalInfo{
+    display:block;
+    margin:0 auto 15px auto;
+    overflow:hidden;
+  }
+  
+  .additionalInfo h2{
+    font-size:30px;
+  }
+  
+  .additionalInfo p{
+    line-height:24px;
+    width:500px;
+  }
+  
+  .additionalInfo .screenshot{
+    width:199px;
+    height:250px;
+    float:left;
+    margin:0 20px 10px 0;
+    border:3px solid #666;
+    -moz-box-shadow:    3px 3px 5px #aaa;
+    -webkit-box-shadow: 3px 3px 5px #aaa;
+    box-shadow:         3px 3px 5px #aaa;
+  }
+  
+  .ui-footer .ui-btn{
+    margin:5px 15px 5px 15px !important;
+  }
+  
+  .ui-footer{
+    position:absolute !important;
+    bottom:0;
+  }
+  
+  .ui-header .edit{
+    display:none !important;
+  }
+  
+  .ui-header h1{
+    display:inline-block !important;
+  }
+  
+  .ui-header #headerUpdate{
+    display:inline !important;
+  }
+  
+  .ui-header #headerInput{
+    display:inline-block !important;
+    width:40%;
+  }
+}
diff --git a/images/walksy-screenshot.jpg b/images/walksy-screenshot.jpg
new file mode 100644
index 0000000..27fa87c
Binary files /dev/null and b/images/walksy-screenshot.jpg differ
diff --git a/index.html b/index.html
index 6483e56..97a74b9 100644
--- a/index.html
+++ b/index.html
@@ -3,9 +3,14 @@
 <head>
   <meta charset="utf-8">
   <title>Walksy.com - Walking tours on the Fly</title>
-  <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
   <link href='http://fonts.googleapis.com/css?family=PT+Sans+Caption:regular,bold&amp;subset=latin' rel='stylesheet' type='text/css'>
   <meta name="description" content="Walksy.com leads you on great walking trips around your city" />
+  
+  <meta name="HandheldFriendly" content="True">
+  <meta name="MobileOptimized" content="320">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="cleartype" content="on">
+  
   <link rel="stylesheet" href="css/style.css" media="screen" />
   <link rel="stylesheet" href="css/jquery.mobile-1.0.min.css" media="screen" />
 </head>
@@ -14,13 +19,18 @@
   
   <div data-role="page" data-theme="b" id="home"> 
     <div data-role="header" data-backbtn="false">
-      <div class="logo"><img src="images/walksy.png" alt="Walksy.com"> <div style="clear:both">Walking Tours on the Fly</div></div>
+      <div class="logo"><img src="images/walksy.png" alt="Walksy.com"> <div class="tagline">Walking Tours on the Fly</div></div>
     </div> 
 
     <div data-role="content"> 
       <form id="inputs" method="post" action="">
-        <label for="startbox">Where should your walking tour start?</label>
-        <input id="startbox" name="startbox" type="text" class="textbox" placeholder="Moscone Center, SF"  title="Enter your starting address, intersection or landmark" tabindex="1"><br>
+        <div class="additionalInfo">
+          <img src="images/walksy-screenshot.jpg" class="screenshot">
+          <h2>Walk with Walksy</h2>
+          <p>Generate a walking tour of any neighborhood in the United States with up to 8 points of interest.  Walksy gives you directions, elevation and photos.</p>
+        </div>
+        <label for="startBox">Where should your walking tour start?</label>
+        <input id="startBox" name="startBox" type="text" class="textbox" placeholder="Moscone Center, SF"  title="Enter your starting address, intersection or landmark" tabindex="1"><br>
         <!--<div data-role="fieldcontain">
           <label for="slider">How far would you like to walk:</label>
           <input type="range" name="slider" id="slider" value="5" min="1" max="40"  />
@@ -59,7 +69,11 @@
   
   <div data-role="page" data-theme="a" id="map">
     <div data-role="header">
-      <a href="#home" data-role="button" data-icon="gear" data-transition="slide" data-direction="reverse">Edit</a>
+      <a href="#home" data-role="button" data-icon="gear" data-transition="slide" data-direction="reverse" class="edit">Edit</a>
+      <form id="headerUpdate">
+        <input type="text" id="headerInput"></input>
+        <button type="submit">Update</button>
+      </form>
       <h1>Map</h1>
       <a href="#directions" data-role="button" data-icon="arrow-d" data-iconpos="right" data-transition="slidedown">Directions</a>
     </div>
@@ -92,6 +106,7 @@ <h1>Directions</h1>
   
   <div data-role="page" data-theme="b" id="credits">
     <div data-role="header">
+      <a href="#home" data-role="button" data-icon="arrow-l" data-direction="reverse">Back</a>
       <h1>Credits</h1>
     </div>
     <div data-role="content">
@@ -120,18 +135,23 @@ <h1>Credits</h1>
   
   <script src="js/jquery.mobile-1.0.min.js"></script>
   
-  <script src="js/main.js" charset="utf-8"></script>
+  <script src="js/helper.js"></script>
+  
+  <script src="js/main.js"></script>
+  
   <script>
-    var _gaq = _gaq || [];
-    _gaq.push(['_setAccount', 'UA-306190-17']);
-    _gaq.push(['_trackPageview']);
-
-    (function() {
-      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-    })();
-
+    // iPhone Scale Bug Fix, read this when using http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/
+    window.onload = function() {
+        MBP.scaleFix();
+        MBP.hideUrlBar();
+    }
+  </script>
+  
+  <script>
+    var _gaq=[["_setAccount","UA-306190-17"],["_trackPageview"]];
+    (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
+    g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
+    s.parentNode.insertBefore(g,s)}(document,"script"));
   </script>
   
 </body>
diff --git a/js/helper.js b/js/helper.js
new file mode 100644
index 0000000..244b0fc
--- /dev/null
+++ b/js/helper.js
@@ -0,0 +1,272 @@
+// usage: log('inside coolFunc', this, arguments);
+// paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
+window.log = function(){
+  log.history = log.history || [];   // store logs to an array for reference
+  log.history.push(arguments);
+  if(this.console) {
+    arguments.callee = arguments.callee.caller;
+    var newarr = [].slice.call(arguments);
+    (typeof console.log === 'object' ? log.apply.call(console.log, console, newarr) : console.log.apply(console, newarr));
+  }
+};
+
+// make it safe to use console.log always
+(function(b){function c(){}for(var d="assert,clear,count,debug,dir,dirxml,error,exception,firebug,group,groupCollapsed,groupEnd,info,log,memoryProfile,memoryProfileEnd,profile,profileEnd,table,time,timeEnd,timeStamp,trace,warn".split(","),a;a=d.pop();){b[a]=b[a]||c}})((function(){try
+{console.log();return window.console;}catch(err){return window.console={};}})());
+
+
+/*
+ * MBP - Mobile boilerplate helper functions
+ */
+(function(document){
+
+window.MBP = window.MBP || {}; 
+
+// Fix for iPhone viewport scale bug 
+// http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/
+
+MBP.viewportmeta = document.querySelector && document.querySelector('meta[name="viewport"]');
+MBP.ua = navigator.userAgent;
+
+MBP.scaleFix = function () {
+  if (MBP.viewportmeta && /iPhone|iPad|iPod/.test(MBP.ua) && !/Opera Mini/.test(MBP.ua)) {
+    MBP.viewportmeta.content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
+    document.addEventListener("gesturestart", MBP.gestureStart, false);
+  }
+};
+MBP.gestureStart = function () {
+    MBP.viewportmeta.content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
+};
+
+
+// Hide URL Bar for iOS and Android by Scott Jehl
+// https://gist.github.com/1183357
+
+MBP.hideUrlBar = function () {
+	var win = window,
+		doc = win.document;
+
+	// If there's a hash, or addEventListener is undefined, stop here
+	if( !location.hash && win.addEventListener ){
+
+		//scroll to 1
+		window.scrollTo( 0, 1 );
+		var scrollTop = 1,
+
+		//reset to 0 on bodyready, if needed
+		bodycheck = setInterval(function(){
+			if( doc.body ){
+				clearInterval( bodycheck );
+				scrollTop = "scrollTop" in doc.body ? doc.body.scrollTop : 1;
+				win.scrollTo( 0, scrollTop === 1 ? 0 : 1 );
+			}	
+		}, 15 );
+
+		win.addEventListener( "load", function(){
+			setTimeout(function(){
+				//reset to hide addr bar at onload
+				win.scrollTo( 0, scrollTop === 1 ? 0 : 1 );
+			}, 0);
+		}, false );
+	}
+};
+
+
+// Fast Buttons - read wiki below before using
+// https://github.com/h5bp/mobile-boilerplate/wiki/JavaScript-Helper
+MBP.fastButton = function (element, handler) {
+    this.element = element;
+    this.handler = handler;
+
+	addEvt(element, "touchstart", this, false);
+	addEvt(element, "click", this, false);
+
+    /*if (element.addEventListener) {
+		try {
+		  element.addEventListener('touchstart', this, false);
+		  element.addEventListener('click', this, false);
+		} catch (e) {
+			element.addEventListener('click', handler, false);
+		}
+	} else if ("attachEvent" in element) {
+		if(typeof this == "object" && this.handleEvent) {
+			element.attachEvent("onclick", function(){
+                // Bind fn as this
+                this.handleEvent.call(this);
+            });
+		} else {
+			element.attachEvent("onclick", handler);
+		}
+	}*/
+};
+
+MBP.fastButton.prototype.handleEvent = function(event) {
+	event = event || window.event;
+    switch (event.type) {
+        case 'touchstart': this.onTouchStart(event); break;
+        case 'touchmove': this.onTouchMove(event); break;
+        case 'touchend': this.onClick(event); break;
+        case 'click': this.onClick(event); break;
+    }
+};
+
+MBP.fastButton.prototype.onTouchStart = function(event) {
+    event.stopPropagation();
+    this.element.addEventListener('touchend', this, false);
+    document.body.addEventListener('touchmove', this, false);
+    this.startX = event.touches[0].clientX;
+    this.startY = event.touches[0].clientY;
+    this.element.style.backgroundColor = "rgba(0,0,0,.7)";
+};
+
+MBP.fastButton.prototype.onTouchMove = function(event) {
+    if(Math.abs(event.touches[0].clientX - this.startX) > 10 || 
+       Math.abs(event.touches[0].clientY - this.startY) > 10    ) {
+        this.reset();
+    }
+};
+
+MBP.fastButton.prototype.onClick = function(event) {
+	event = event || window.event;
+    if (event.stopPropagation) { event.stopPropagation(); }
+    this.reset();
+    this.handler(event);
+    if(event.type == 'touchend') {
+        MBP.preventGhostClick(this.startX, this.startY);
+    }
+    this.element.style.backgroundColor = "";
+};
+
+MBP.fastButton.prototype.reset = function() {
+	rmEvt(this.element, "touchend", this, false);
+	rmEvt(document.body, "touchmove", this, false);
+    this.element.style.backgroundColor = "";
+};
+
+MBP.preventGhostClick = function (x, y) {
+    MBP.coords.push(x, y);
+    window.setTimeout(function (){
+        MBP.coords.splice(0, 2);
+    }, 2500);
+};
+
+MBP.ghostClickHandler = function (event) {
+    for(var i = 0, len = MBP.coords.length; i < len; i += 2) {
+        var x = MBP.coords[i];
+        var y = MBP.coords[i + 1];
+        if(Math.abs(event.clientX - x) < 25 && Math.abs(event.clientY - y) < 25) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+    }
+};
+
+if (document.addEventListener) {
+    document.addEventListener('click', MBP.ghostClickHandler, true);
+}
+                            
+MBP.coords = [];
+
+// fn arg can be an object or a function, thanks to handleEvent
+// read more about the explanation at: http://www.thecssninja.com/javascript/handleevent
+function addEvt(el, evt, fn, bubble) {
+    if("addEventListener" in el) {
+        // BBOS6 doesn't support handleEvent, catch and polyfill
+        try {
+            el.addEventListener(evt, fn, bubble);
+        } catch(e) {
+            if(typeof fn == "object" && fn.handleEvent) {
+                el.addEventListener(evt, function(e){
+                    // Bind fn as this and set first arg as event object
+                    fn.handleEvent.call(fn,e);
+                }, bubble);
+            } else {
+                throw e;
+            }
+        }
+    } else if("attachEvent" in el) {
+        // check if the callback is an object and contains handleEvent
+        if(typeof fn == "object" && fn.handleEvent) {
+            el.attachEvent("on" + evt, function(){
+                // Bind fn as this
+                fn.handleEvent.call(fn);
+            });
+        } else {
+            el.attachEvent("on" + evt, fn);
+        }
+    }
+}
+
+function rmEvt(el, evt, fn, bubble) {
+    if("removeEventListener" in el) {
+        // BBOS6 doesn't support handleEvent, catch and polyfill
+        try {
+            el.removeEventListener(evt, fn, bubble);
+        } catch(e) {
+            if(typeof fn == "object" && fn.handleEvent) {
+                el.removeEventListener(evt, function(e){
+                    // Bind fn as this and set first arg as event object
+                    fn.handleEvent.call(fn,e);
+                }, bubble);
+            } else {
+                throw e;
+            }
+        }
+    } else if("detachEvent" in el) {
+        // check if the callback is an object and contains handleEvent
+        if(typeof fn == "object" && fn.handleEvent) {
+            el.detachEvent("on" + evt, function(){
+                // Bind fn as this
+                fn.handleEvent.call(fn);
+            });
+        } else {
+            el.detachEvent("on" + evt, fn);
+        }
+    }
+}
+
+
+// iOS Startup Image
+// https://github.com/h5bp/mobile-boilerplate/issues#issue/2
+
+MBP.splash = function () {
+    var filename = navigator.platform === 'iPad' ? 'h/' : 'l/';
+    document.write('<link rel="apple-touch-startup-image" href="/img/' + filename + 'splash.png" />' );
+};
+
+
+// Autogrow
+// http://googlecode.blogspot.com/2009/07/gmail-for-mobile-html5-series.html
+
+MBP.autogrow = function (element, lh) {
+
+    function handler(e){
+        var newHeight = this.scrollHeight,
+            currentHeight = this.clientHeight;
+        if (newHeight > currentHeight) {
+            this.style.height = newHeight + 3 * textLineHeight + "px";
+        }
+    }
+
+    var setLineHeight = (lh) ? lh : 12,
+        textLineHeight = element.currentStyle ? element.currentStyle.lineHeight : 
+                         getComputedStyle(element, null).lineHeight;
+
+    textLineHeight = (textLineHeight.indexOf("px") == -1) ? setLineHeight :
+                     parseInt(textLineHeight, 10);
+
+    element.style.overflow = "hidden";
+    element.addEventListener ? element.addEventListener('keyup', handler, false) :
+                               element.attachEvent('onkeyup', handler);
+};
+
+})(document);
+
+
+// Prevent iOS from zooming onfocus
+// http://nerd.vasilis.nl/prevent-ios-from-zooming-onfocus/
+
+var $viewportMeta = $('meta[name="viewport"]');
+$('input, select, textarea').bind('focus blur', function(event) {
+  $viewportMeta.attr('content', 'width=device-width,initial-scale=1,maximum-scale=' + (event.type == 'blur' ? 10 : 1));
+});
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
index 7455fe8..3d620d8 100644
--- a/js/main.js
+++ b/js/main.js
@@ -8,48 +8,6 @@ var tagList = ["traditional", "architecture", "history", "museum", "neighborhood
 var tags =[];
 var categories = ['Shopping Mall','UNESCO World Heritage Site', 'Tourist Attraction', 'Scenic View', 'Ruins', 'Plaza', 'Palace', 'Monument', 'Historic', 'Fountain', 'Fort', 'City Walls', 'Castle', 'Battlefield', 'Archeological Site', 'Lake', 'Canyon', 'Beach', 'Vineyard', 'Distillery', 'Brewery', 'Theme Park', 'Go Karts', 'Circus', 'Miniature Golf', 'Museum', 'Bull Ring'];
 
-(function(){
-  var small = "(a|an|and|as|at|but|by|en|for|if|in|of|on|or|the|to|v[.]?|via|vs[.]?)";
-  var punct = "([!\"#$%&'()*+,./:;<=>?@[\\\\\\]^_`{|}~-]*)";
-  
-  this.titleCaps = function(title){
-    var parts = [], split = /[:.;?!] |(?: |^)["Ò]/g, index = 0;
-    
-    while (true) {
-      var m = split.exec(title);
-
-      parts.push( title.substring(index, m ? m.index : title.length)
-        .replace(/\b([A-Za-z][a-z.'Õ]*)\b/g, function(all){
-          return /[A-Za-z]\.[A-Za-z]/.test(all) ? all : upper(all);
-        })
-        .replace(RegExp("\\b" + small + "\\b", "ig"), lower)
-        .replace(RegExp("^" + punct + small + "\\b", "ig"), function(all, punct, word){
-          return punct + upper(word);
-        })
-        .replace(RegExp("\\b" + small + punct + "$", "ig"), upper));
-      
-      index = split.lastIndex;
-      
-      if ( m ) parts.push( m[0] );
-      else break;
-    }
-    
-    return parts.join("").replace(/ V(s?)\. /ig, " v$1. ")
-      .replace(/(['Õ])S\b/ig, "$1s")
-      .replace(/\b(AT&T|Q&A)\b/ig, function(all){
-        return all.toUpperCase();
-      });
-  };
-    
-  function lower(word){
-    return word.toLowerCase();
-  }
-    
-  function upper(word){
-    return word.substr(0,1).toUpperCase() + word.substr(1);
-  }
-})();
-
 function shuffle(array) {
   var tmp, current, top = array.length;
 
@@ -84,8 +42,9 @@ $.extend({
 function detectRouteFromURL(){
   //Detect saved route from URL
   if($.getUrlVar('start')!=undefined){
-    $('#startbox').val(decodeURIComponent($.getUrlVar('start').replace(/\+/g,' ')));
-    submitForm();
+    var start = decodeURIComponent($.getUrlVar('start').replace(/\+/g,' '))
+    $('#startBox').val(start);
+    getWalkingTour(start);
   } else {
     //Show Homepage
     $.mobile.changePage($('#home'),"slide");
@@ -108,7 +67,7 @@ function getGeoLocator(position) {
   var geocoder = new google.maps.Geocoder();
   geocoder.geocode({'latLng': coords}, function(results, status) {
     if (status == google.maps.GeocoderStatus.OK) {
-      $('#startbox').val(results[0].formatted_address.replace(/, CA, USA/g, ""));
+      $('#startBox').val(results[0].formatted_address.replace(/, CA, USA/g, ""));
     }
   });
 }
@@ -330,47 +289,27 @@ function launchMap(){
 }
 
 
-function submitForm() {
-  // Redraws map based on info in the form
-  $('#inputs input').blur();
-  $.mobile.showPageLoadingMsg();	
-  
-  var start = $('#startbox').val();
-  tags = []; 
-  $('#tags :checked').each(function(){
-    tags.push($(this).attr('id'));
-  });
-  
-  //Validate inputs
-  if(start==''){
-    $('#startbox').addClass('error');
-    $('#startbox').focus();
-    $.mobile.hidePageLoadingMsg();	
-    return false;
-  } else {$('#startbox').removeClass('error');}
-
-  geocoder.geocode({address:start}, function(results, status){
+function getWalkingTour(start) {
+  geocoder.geocode({address:start}, function(data, status){
+    console.log(data);
     if(status == google.maps.GeocoderStatus.OK) {
+      //put start location in headerbox
+      $('#headerInput').val(data[0].formatted_address.replace(', USA',''))
       
       $.mobile.changePage($('#map'),"slide");
       
-      //Show loading
-      $.mobile.showPageLoadingMsg();
-      
-      map.setCenter(results[0].geometry.location);
+      map.panTo(data[0].geometry.location);
       
       //Assign position to start marker
-      trip.startMarker.setPosition(results[0].geometry.location);
+      trip.startMarker.setPosition(data[0].geometry.location);
       
-      trip.start = results[0].geometry.location;
+      trip.start = data[0].geometry.location;
       displayRoute();
 
     } else {
       alert(trip.start + " not found");
-      return false;
     }
   });
-return false;
 }
 
 function resizeMobile(){
@@ -434,9 +373,9 @@ function clearMap(){
 }
 
 function generateLinks(){
-  $('#permalink a').attr('href','http://walksy.com/?start='+encodeURIComponent($('#startbox').val().replace(/\+/g, " ").replace(/&/g, "and")));
+  $('#permalink a').attr('href','http://walksy.com/?start='+encodeURIComponent($('#startBox').val().replace(/\+/g, " ").replace(/&/g, "and")));
 
-  $("#twitter a").attr("href","http://www.addtoany.com/add_to/twitter?linkurl=" + encodeURIComponent("http://walksy.com/"+$('#startbox').val().replace(/\+/g, " ").replace(/&/g, "and")) + "&linkname=" + encodeURIComponent("Walking Tour of San Francisco starting at " + $('#startbox').val().replace(/\+/g, " ").replace(/&/g, "and")));
+  $("#twitter a").attr("href","http://www.addtoany.com/add_to/twitter?linkurl=" + encodeURIComponent("http://walksy.com/"+$('#startBox').val().replace(/\+/g, " ").replace(/&/g, "and")) + "&linkname=" + encodeURIComponent("Walking Tour of San Francisco starting at " + $('#startBox').val().replace(/\+/g, " ").replace(/&/g, "and")));
 }
 
 function sfPoints(){
@@ -596,18 +535,24 @@ function getDirections(){
           
          //Assign coordinate from directions to waypoint
          trip.waypoints[waypointID].coordinate = leg.end_location;
-         $('#directions .content').append('<div id="stop' + index + '"></div>');
-         $('#stop'+index).append('<div class="title">');
-         $('#stop'+index).append('<h2>' + (index+1) + '. ' + trip.waypoints[waypointID].name + '</h2>');
-         $('#stop'+index).append('<a href="#streetview" onClick="streetView(new google.maps.LatLng('+leg.end_location.lat()+','+leg.end_location.lng()+'))" class="streetview">StreetView</a>');
-         $('#stop'+index).append('<div class="rating"></div>');
-         $('#stop'+index).append('</div>');
-         $('#stop'+index).append('<div class="image"></div>');
-         $('#stop'+index).append('<div class="distance">Walk ' + leg.distance.text + '</div>');
-         $('#stop'+index).append('<ul class="directions"></ul>');
-         $.each(leg.steps, function(i, step){
-           $('#stop'+index+' .directions').append('<li>'+step.instructions+'</li>');
-         })
+         
+         var directionDiv = '<div id="stop' + index + '" class="waypoint">' +
+           '<h2>' + (index+1) + '. ' + trip.waypoints[waypointID].name + '</h2>' +
+           '<div class="actions">' +
+           '<a href="#streetview" onClick="streetView(new google.maps.LatLng('+leg.end_location.lat()+','+leg.end_location.lng()+'))" class="streetview btn" title="View on Google Streetview">StreetView</a>' +
+           '<a class="rating btn" title="View Reviews on Yelp.com"></a>' +
+           '</div>' +
+           '<div class="image"></div>' +
+           '<div class="distance">Walk ' + leg.distance.text + '</div>' +
+           '<ul class="directions">';
+           
+           $.each(leg.steps, function(i, step){
+             directionDiv += '<li>'+step.instructions+'</li>';
+           });
+           
+           directionDiv += '</ul></div>';
+         
+         $('#directions .content').append(directionDiv);
        }
      });
      
@@ -615,7 +560,7 @@ function getDirections(){
      trip.distance = Math.round(totalDistance/1609.344*10)/10 + " miles";
      trip.duration = Math.floor(totalDuration/60) + " minutes";
      $('#directions .summary').html(trip.distance + ", " + trip.duration + ", " + (response.routes[0].legs.length-1) + " stops");
-     $('#map h1').html(trip.distance + ' Tour');
+     $('#map h1').html(trip.distance + ', ' + trip.waypoints.length + ' stops');
      
      //Create Points
      for (var i in trip.waypoints){
@@ -652,7 +597,9 @@ function createPoint(waypoint){
       infoWindowContent = '<div id="marker' + waypoint.index + '" class="marker"><a href="' + yelp.url + '" title="View reviews on Yelp"><img src="' + yelp.photo_url +'" class="thumb"></a><strong>' + waypoint.name + '</strong><br>' + waypoint.address + '<br>Tags: ' + waypoint.tags.join(', ') + '<br><a href="' + yelp.url + '" title="View on Yelp"><img src="' + yelp.rating_img_url_small + '" alt="View reviews on Yelp"></a> <em>' + yelp.review_count + ' reviews on</em> <a href="' + yelp.url + '" title="View reviews on Yelp"><img src="images/yelp_logo.png" alt="View reviews on Yelp" style="vertical-align:bottom;"></a><br><a href="#streetview" onClick="streetView(new google.maps.LatLng(' + waypoint.coordinate.lat() + ',' + waypoint.coordinate.lng() + '))">StreetView</a></div>';
       
       $('#stop'+waypoint.index+' .image').html('<a href="' + yelp.url + '" title="View reviews on Yelp"><img src="' + yelp.photo_url +'" class="thumb"></a>');
-      $('#stop'+waypoint.index+' .rating').html('<a href="' + yelp.url + '" title="View on Yelp"><img src="' + yelp.rating_img_url_small + '" alt="View reviews on Yelp"></a> <em>' + yelp.review_count + ' reviews on</em> <a href="' + yelp.url + '" title="View reviews on Yelp"><img src="images/yelp_logo.png" alt="View reviews on Yelp" style="vertical-align:bottom;"></a>');
+      $('#stop'+waypoint.index+' .rating')
+        .html('<img src="' + yelp.rating_img_url_small + '" alt="Yelp Rating""> <em>' + yelp.review_count + ' reviews on</em> <img src="images/yelp_logo.png" alt="Yelp" style="vertical-align:bottom;">')
+        .attr('href', yelp.url);
     } else {
       //Couldn't find on yelp
       infoWindowContent = '<div id="marker' + waypoint.index + '" class="marker"><strong>' + waypoint.name + '</strong><br>' + waypoint.address + '<br>Tags: ' + waypoint.tags.join(', ') + '<br><a href="#streetview" onClick="streetView(new google.maps.LatLng(' + waypoint.coordinate.lat() + ',' + waypoint.coordinate.lng() + '))">StreetView</a></div>';
@@ -766,8 +713,83 @@ google.setOnLoadCallback(function(){
 
   detectRouteFromURL();
   
-  $('#inputs').submit(submitForm)
+  $('#inputs').submit(function(){
+    //Show loading
+    $.mobile.showPageLoadingMsg();
+    $('#inputs input').blur();
+  
+    var start = $('#startBox').val();
+    tags = []; 
+    $('#tags :checked').each(function(){
+      tags.push($(this).attr('id'));
+    });
+  
+    //Validate inputs
+    if(start==''){
+      $('#startBox').addClass('error');
+      $('#startBox').focus();
+      $.mobile.hidePageLoadingMsg();	
+      return false;
+    } else {
+      $('#startBox').removeClass('error');
+    }
+    
+    getWalkingTour(start);
+    return false;
+  });
+  $('#headerUpdate').submit(function() {
+    //Show loading
+    $.mobile.showPageLoadingMsg();
+    
+    var start = $('#headerInput').val();
+    $('#startBox').val(start);
+    getWalkingTour(start);
+    return false;
+  });
   
   $('body').show();
 
 });
+
+(function(){
+  var small = "(a|an|and|as|at|but|by|en|for|if|in|of|on|or|the|to|v[.]?|via|vs[.]?)";
+  var punct = "([!\"#$%&'()*+,./:;<=>?@[\\\\\\]^_`{|}~-]*)";
+  
+  this.titleCaps = function(title){
+    var parts = [], split = /[:.;?!] |(?: |^)["Ò]/g, index = 0;
+    
+    while (true) {
+      var m = split.exec(title);
+
+      parts.push( title.substring(index, m ? m.index : title.length)
+        .replace(/\b([A-Za-z][a-z.'Õ]*)\b/g, function(all){
+          return /[A-Za-z]\.[A-Za-z]/.test(all) ? all : upper(all);
+        })
+        .replace(RegExp("\\b" + small + "\\b", "ig"), lower)
+        .replace(RegExp("^" + punct + small + "\\b", "ig"), function(all, punct, word){
+          return punct + upper(word);
+        })
+        .replace(RegExp("\\b" + small + punct + "$", "ig"), upper));
+      
+      index = split.lastIndex;
+      
+      if ( m ) parts.push( m[0] );
+      else break;
+    }
+    
+    return parts.join("").replace(/ V(s?)\. /ig, " v$1. ")
+      .replace(/(['Õ])S\b/ig, "$1s")
+      .replace(/\b(AT&T|Q&A)\b/ig, function(all){
+        return all.toUpperCase();
+      });
+  };
+    
+  function lower(word){
+    return word.toLowerCase();
+  }
+    
+  function upper(word){
+    return word.substr(0,1).toUpperCase() + word.substr(1);
+  }
+})();
+
