UI: implemented Jon's suggestions.

app/assets/javascripts/oauth.js.coffee

@@ -63,25 +63,31 @@ optionsScrollChart =
         textPosition: 'none'
 ###
 
+foo = (->
+    i = 0
+
+    return (n) ->
+        i += 1
+        console.debug(i + ' >>> ' + n)
+        console.debug($('#main-chart')[0])
+)()
 
 this.createScrolledChart = (data, variable) ->
+    debugger
     cols = data.cols
     rows = data.rows
-
     createCheckin = (n, callback) -> () ->
         n -= 1
         callback() if n is 0
 
     prettyTime = (t) -> "#{t.toLocaleTimeString()} #{t.getMonth()+1}/#{t.getDate()}"
 
     scrollLabelDate = (t) -> t.toLocaleDateString()
-
     dates = {}
     spawnDates = () ->
         dates.all = rows.map((r) -> r.c[0].v)
         dates.first = +dates.all[0]
         dates.span = dates.all[dates.all.length - 1] - dates.first
-
     dateOnScroll = (x) -> 
         return new Date(dates.first + dates.span * (x / elem.film.offsetParent().width()))
 
@@ -91,11 +97,9 @@ this.createScrolledChart = (data, variable) ->
         google.visualization.events.addListener(chart, 'ready', layerFilm)
         chart.draw(dataTable, variable.optionsScrollChart)
         return chart
-
     initMainChart = () ->
         chart = new google.visualization[variable.chartType]($('#main-chart')[0])
         return chart
-
     redrawMainChart = (startDate, finishDate) ->
         start = Math.max(0, indexOfDateAfter(startDate) - 1)
         finish = indexOfDateAfter(finishDate) + 1
@@ -105,16 +109,13 @@ this.createScrolledChart = (data, variable) ->
     redrawMainChartFromScrolled = () ->
         redrawMainChart(dateOnScroll(elem.film.position().left),
                 dateOnScroll(elem.film.position().left + elem.film.width()))
-
     indexOfDateAfter = (date) ->
             for d, i in dates.all                       #optimize this by using a binary search
                 if date < d
                     return i
             return dates.all.length - 1
 
-
     drawCharts = createCheckin((if google.visualization then 1 else 2), () ->
-
         spawnDates()
         elem.scrollChart = createScrollChart()
         elem.mainChart = initMainChart()
@@ -123,12 +124,10 @@ this.createScrolledChart = (data, variable) ->
     )
 
 
-
     filmHandleLeftDraggable = false
     filmHandleRightDraggable = false
     filmDraggable = false
     filmPressedAt = false
-
     elem =
         filmBackdrop: $("<div id='film-backdrop'></div>"),
         film: $("<div id='film'></div>"),
@@ -138,32 +137,27 @@ this.createScrolledChart = (data, variable) ->
         filmLabelRight: $("<span class='film-label right'></span>")
         filmLabelContainerLeft: $("<span class='film-label-container left'></span>")
         filmLabelContainerRight: $("<span class='film-label-container right'></span>")
-
     elem.filmBackdrop.append(elem.film.append(elem.filmHandleLeft.append(elem.filmLabelContainerLeft.append(elem.filmLabelLeft)))
                                       .append(elem.filmHandleRight.append(elem.filmLabelContainerRight.append(elem.filmLabelRight))))
-
     elem.filmHandleLeft.mousedown((event) ->
         event.preventDefault()
         filmHandleLeftDraggable = true
         elem.filmLabelLeft.css('visibility', 'visible')
         $('body').css('cursor', 'col-resize')
         false
     )
-
     elem.filmHandleRight.mousedown((event) ->
         event.preventDefault()
         filmHandleRightDraggable = true
         elem.filmLabelRight.css('visibility', 'visible')
         $('body').css('cursor', 'col-resize')
         false
     )
-
     elem.film.mousedown((event) ->
         event.preventDefault()
         filmDraggable = true
         filmPressedAt = event.pageX - $(this).offset().left
     )
-
     $(document).mouseup(() ->
         if filmHandleLeftDraggable or filmHandleRightDraggable or filmDraggable
             filmHandleLeftDraggable = false
@@ -174,14 +168,20 @@ this.createScrolledChart = (data, variable) ->
             $('body').css('cursor', 'default')
             redrawMainChartFromScrolled()
     )
-
+    
     onMouseMove = (event) ->
         minHandleDistance = 10
         newX = event.pageX - elem.film.offsetParent().offset().left
-        if filmHandleLeftDraggable and newX < -minHandleDistance + elem.film.position().left + elem.film.outerWidth() - elem.filmHandleLeft.width() - elem.filmHandleRight.width()
+        if filmHandleLeftDraggable and minHandleDistance + elem.filmHandleRight.width() + elem.filmHandleLeft.width() < elem.film.width() - (newX - parseFloat(elem.film.css('left'), 10))
             newX = Math.max(newX, 0)
-            elem.film.css('width', elem.film.outerWidth() - newX + parseInt(elem.film.css('left')), 10)
+            elem.film.css('width', elem.film.width() - (newX - parseFloat(elem.film.css('left'), 10)))
             elem.film.css('left', newX)
+            console.debug(elem.film.width())
+            console.debug(newX)
+            console.debug(parseFloat(elem.film.css('left'), 10))
+            console.debug(newX - parseFloat(elem.film.css('left'), 10))
+            console.debug(elem.film.width() - newX + parseFloat(elem.film.css('left'), 10))
+            console.debug(elem.film.width() - (newX - parseFloat(elem.film.css('left'), 10)))
             elem.filmLabelLeft.html(scrollLabelDate(dateOnScroll(newX)))
         else if filmHandleRightDraggable and minHandleDistance + elem.film.position().left + elem.filmHandleLeft.width() + elem.filmHandleRight.width() < newX
             newX = Math.min(newX, elem.film.offsetParent().width())
@@ -192,7 +192,6 @@ this.createScrolledChart = (data, variable) ->
             newX = Math.min(Math.max(newX, 0), 
                             elem.film.offsetParent().width() - elem.film.width())
             elem.film.css('left', newX)
-
     $(document).mousemove(onMouseMove)
 
     layerFilm = () ->
@@ -203,11 +202,9 @@ this.createScrolledChart = (data, variable) ->
         elem.filmBackdrop.height(rect.attr('height'))
         $('#scroll-chart').append(elem.filmBackdrop)
 
-
-
     google.setOnLoadCallback(drawCharts)
     unless google.visualization
-        google.load('visualization', '1', {packages: ['corechart']})
+        google.load('visualization', '1', {packages: ['corechart']}) unless google.visualization
 
     ###
     rows = undefined

app/assets/javascripts/oauth_balance.js.coffee

@@ -7,7 +7,7 @@ prettyTime = (t) -> "#{t.toLocaleTimeString()} #{t.getMonth()+1}/#{t.getDate()}"
 
 
 options = 
-    chartType: 'AreaChart'
+    chartType: 'LineChart'
 
     optionsMainChart:
         colors: ['#0088CC']
@@ -18,9 +18,11 @@ options =
         hAxis:
             textStyle: 
                 fontName: 'Lato, Lucida Grande'
+            slantedText: true
         vAxis:  
             textStyle:
                 fontName: 'Lato, Lucida Grande'
+            format: '$###,###.##'
 
     optionsScrollChart:
         colors: ['#0088CC']

app/assets/javascripts/oauth_balances_over_time_with_friends.coffee

@@ -5,7 +5,7 @@ prettyTime = (t) -> "#{t.toLocaleTimeString()} #{t.getMonth()+1}/#{t.getDate()}"
 prettyFriendName = (f) -> "#{f.first_name} #{f.last_name}"
 
 options = 
-    chartType: 'AreaChart'
+    chartType: 'LineChart'
 
     optionsMainChart:
         legend:
@@ -14,9 +14,11 @@ options =
         hAxis:
             textStyle: 
                 fontName: 'Lato, Lucida Grande'
+            slantedText: true
         vAxis:
             textStyle:
                 fontName: 'Lato, Lucida Grande'
+            format: '$###,###.##'
 
     optionsScrollChart:
         backgroundColor: '#F5F5F5'

app/assets/javascripts/oauth_expenses.js.coffee

@@ -7,7 +7,7 @@ prettyTime = (t) -> "#{t.toLocaleTimeString()} #{t.getMonth()+1}/#{t.getDate()}"
 
 
 options = 
-    chartType: 'AreaChart'
+    chartType: 'ColumnChart'
 
     optionsMainChart:
         colors: ['#0088CC']
@@ -18,9 +18,11 @@ options =
         hAxis:
             textStyle: 
                 fontName: 'Lato, Lucida Grande'
+            slantedText: true
         vAxis:
             textStyle:
                 fontName: 'Lato, Lucida Grande'
+            format: '$###,###.##'
 
     optionsScrollChart:
         colors: ['#0088CC']

app/assets/javascripts/oauth_expenses_by_category_over_time.js.coffee

@@ -8,7 +8,7 @@ prettyTime = (t) -> "#{t.toLocaleTimeString()} #{t.getMonth()+1}/#{t.getDate()}"
 prettyFriendName = (f) -> "#{f.first_name} #{f.last_name}"
 
 options = 
-    chartType: 'AreaChart'
+    chartType: 'LineChart'
 
     optionsMainChart:
         legend:
@@ -17,9 +17,11 @@ options =
         hAxis:
             textStyle: 
                 fontName: 'Lato, Lucida Grande'
+            slantedText: true
         vAxis:
             textStyle:
                 fontName: 'Lato, Lucida Grande'
+            format: '$###,###.##'
 
     optionsScrollChart:
         backgroundColor: '#F5F5F5'

app/assets/javascripts/oauth_expenses_matching.js.coffee

@@ -28,7 +28,7 @@ prettyTime = (t) -> "#{t.toLocaleTimeString()} #{t.getMonth()+1}/#{t.getDate()}"
 
 
 options = 
-    chartType: 'AreaChart'
+    chartType: 'LineChart'
 
     optionsMainChart:
         legend:
@@ -37,9 +37,11 @@ options =
         hAxis:
             textStyle: 
                 fontName: 'Lato, Lucida Grande'
+            slantedText: true
         vAxis:
             textStyle:
                 fontName: 'Lato, Lucida Grande'
+            format: '$###,###.##'
 
     optionsScrollChart:
         backgroundColor: '#F5F5F5'
@@ -151,22 +153,24 @@ chartData = () ->
     cols = aggregatedCols()
     return {cols: cols, rows: rows}
 
-
+google.load('visualization', '1', {packages: ['corechart']}) unless google.visualization
 
 elem = {}
 
-$(() ->
-    elem.prototypeOfSearchStackItem = $($('.search-stack-item')[0]).clone() #jQuery should find only one search-stack-item.
-)
+elem.prototypeOfSearchStackItem = $("<li class='search-stack-item'>
+                                         <div class='search-stack-item-content'>
+                                             <span class='search-name'></span>
+                                             <span class='delete-search'>x</span>
+                                         </div>
+                                     </li>")
 
-this.primeCharts = (data) ->
-
-
-    searches.push({search: urlParams.query, rows: data})
 
+this.primeCharts = (data) ->
 
+    #I removed this when limiting the search interface to one matchbox.
+    #searches.push({search: urlParams.query, rows: data})
 
-    createScrolledChart(chartData(), options)
+    #createScrolledChart(chartData(), options)
 
 
 chartLoading = (() ->
@@ -203,13 +207,13 @@ addSearchItem = () ->
     search = $('#search-stack .matchbox .input').val()
     if search isnt ''
         $('#search-stack .matchbox .input').val('')
-
         chartLoading.start()
         slideInSearchStackItem(SearchStackItem(search))
         $.ajax({url: "/user/get_expenses_matching?query=#{search}"}).done((data) ->
             searches.push({search: search, rows: JSON.parse(data)})
             $('#main-chart').empty()
             $('#scroll-chart').empty()
+            console.debug(createScrolledChart);
             createScrolledChart(chartData(), options)
             chartLoading.stop()
         )
@@ -234,12 +238,14 @@ removeSearchItem = (item) ->
 
 $(() ->
     first = $('.search-stack-item:first-child')
-    first.find('.search-name').html(urlParams.query)
+    #first.find('.search-name').html(urlParams.query)
     sliding.searchItemHeight = $('.search-stack-item').outerHeight()
+    ###
     $('.search-stack-item:first-child').find('.delete-search').click(() -> 
         if searches.length > 1
             removeSearchItem($(this).closest('.search-stack-item')) 
     )
+    ###
     $('#search-stack .matchbox .submit').click(addSearchItem)
     $('#search-stack .matchbox .input').keypress((event) ->
         if event.which is 13
@@ -280,7 +286,7 @@ slideInSearchStackItem = (newItem) ->
     newItemInner.css('display', 'none')
     console.log($('#search-stack').offset())
     if not $('.search-stack-item:nth-last-child(2)')[0]
-        newItem.css('top', $('#search-stack').offset().top + 'px')
+        newItem.css('top', '0px')
     newItem.insertBefore($('.search-stack-item:last-child'))
 
     afterFadeIn = () ->
@@ -289,14 +295,18 @@ slideInSearchStackItem = (newItem) ->
         newItem.css('position', 'static')
         newItem.css('z-index', '1')
 
+    newItemInner.fadeIn(sliding.insertDuration, afterFadeIn)
+
+    sliding.searchItemHeight = $('.search-stack-item:first-child').outerHeight()
+
     moveLastItem = setInterval((() -> 
         start = new Date()
         return () -> 
             lastItem.css('margin-top', 
                          lastItemHeightFunc((new Date() - start) / sliding.insertDuration))
     )(), sliding.insertDuration / sliding.searchItemHeight / sliding.framesPerHeight)
 
-    newItemInner.fadeIn(sliding.insertDuration, afterFadeIn)
+
 
 
 slideOutSearchStackItem = (item) ->

app/assets/stylesheets/oauth.css.scss

@@ -335,16 +335,20 @@ div#film {
             z-index: 100;
 
             .input {
-                width: 9em;
+                width: 5em;
+                font-size: 1em;
 
             }
 
             .submit {
                 float: right;
+                margin-top: 3px;
                 padding: 0.05em 0.5em;
                 border-radius: 1em;
                 background-color: #fff;
                 color: #000; 
+                font-size: 1em;
+                height: 21px; /* for safari */
 
             }
         }

app/controllers/user_controller.rb

@@ -77,7 +77,7 @@ def expenses_by_category_over_time
 
   def expenses_matching
     @title = "Search an expense"
-    @data = JSON.unparse(current_user.get_expenses_matching_cumulative(params[:query]))
+    #@data = JSON.unparse(current_user.get_expenses_matching_cumulative(params[:query]))
   end
 
   def get_expenses_matching