Added loading screen, fixed some minor CSS issues

guide.coffee

@@ -71,6 +71,7 @@ ChannelList = Backbone.Collection.extend(
             @findWhere(id: id)?.set(visible: false)
 
     fetchPrograms: (day) ->
+        $('#loading-screen').show()
         $.getJSON(
             FETCH_URL
             channels: @pluck('id').join(','), day: day
@@ -88,6 +89,7 @@ ChannelList = Backbone.Collection.extend(
                             article_title: p.artikel_titel
                         ) for p in programs
                     ))
+                $('#loading-screen').hide()
         )
 )
 
@@ -156,7 +158,7 @@ ProgramView = Backbone.View.extend(
                 @$el.addClass('current')
 )
 
-ChannelLabelView = Backbone.View.extend(
+ChannelLabelsView = Backbone.View.extend(
     el: $('.channel-labels')
 
     initialize: (options) ->
@@ -200,11 +202,11 @@ AppView = Backbone.View.extend(
         @listenTo(Channels, 'reset', @addChannels)
         @listenTo(Settings, 'change:day', @fetchPrograms)
 
-        @labelview = new ChannelLabelView(app: @)
+        @labelview = new ChannelLabelsView(app: @)
 
-        @updateIndicator()
-        @centerIndicator()
         Channels.fetch()
+        @centerIndicator()
+        @updateIndicator()
         setInterval((=> @updateIndicator()), 3600000 / HOUR_WIDTH)
 
     addChannels: ->
@@ -214,7 +216,7 @@ AppView = Backbone.View.extend(
             view.render()
             @$('.channels').append(view.el)
         , @)
-        @$('.indicator').height(@$('.channels').height())
+        @updateIndicator()
         @fetchPrograms()
 
     loadDay: (day) ->
@@ -224,7 +226,9 @@ AppView = Backbone.View.extend(
 
     updateIndicator: ->
         left = time2px(seconds_today(Date.now())) + CHANNEL_LABEL_WIDTH - 1
-        @$('.indicator').css('left', left + 'px')
+        @$('.indicator')
+            .css('left', left + 'px')
+            .height(@$('.channels').height() - 2)
 
     centerIndicator: ->
         @$el.scrollLeft(@$('.indicator').position().left - @$el.width() / 2)

index.html

@@ -39,6 +39,12 @@
                 <div class="hour">23:00</div>
             </div>
         </div>
+
+        <div id="loading-screen" class="loading-screen">
+            <div class="bg"></div>
+            <div class="loader"></div>
+        </div>
+
         <div class="navbar">
             <a href="javascript:void(0);" id="yesterday" class="navitem">Gisteren</a>
             <a href="javascript:void(0);" id="today" class="navitem active">Vandaag</a>
@@ -47,10 +53,8 @@
         </div>
 
         <script src="lib/jquery-1.10.2.min.js" type="text/javascript"></script>
-        <script src="lib/jquery.mousewheel.js" type="text/javascript"></script>
         <script src="lib/underscore-min.js" type="text/javascript"></script>
         <script src="lib/backbone-min.js" type="text/javascript"></script>
-        <script src="lib/json2.js" type="text/javascript"></script>
 
         <script src="channels.js" type="text/javascript"></script>
         <script src="guide.js" type="text/javascript"></script>

style.sass

@@ -37,7 +37,7 @@ html, body
 
 .guide
     width: 100%
-    height: 100%
+    //height: 100%
     overflow-x: scroll
     position: relative
 
@@ -116,7 +116,6 @@ html, body
         &:hover .favlink
             visibility: visible
 
-
 .indicator
     position: absolute
     width: 1px
@@ -156,3 +155,28 @@ html, body
 
     button
         margin: 6px 0 6px 6px
+
+$loader-size: 66px
+
+.loading-screen
+    display: none
+    position: fixed
+    width: 100%
+    height: 100%
+    top: 0
+    left: 0
+
+    .bg
+        width: 100%
+        height: 100%
+        background-color: #000
+        opacity: 0.8
+
+    .loader
+        position: absolute
+        width: $loader-size
+        height: $loader-size
+        top: 50%
+        left: 50%
+        margin: (-$loader-size / 2) 0 0 (-$loader-size / 2)
+        background: url("loading.gif") no-repeat left top