Fix two bugs

* Make sure no elements of the markdown section are displayed when
  they shouldn't be by taking advantage of the jQuery animation
  queue
* Don't crash when the user cancels selecting a file

src/coffee/controllers/markdown_image_controller.coffee

@@ -35,6 +35,7 @@ module.exports = class MarkdownImageController extends BaseController
         if @_reader? then @_reader.abort = true
 
         file = @$input.prop('files')[0]
+        return unless file?
 
         if file.size > MAX_FILE_SIZE
             logger.warning "The choosen file, #{file.name}, is too large: #{file.size}"
@@ -123,20 +124,20 @@ module.exports = class MarkdownImageController extends BaseController
             @$button.html 'Choose'
 
         if @model.status is MarkdownImage.Status.checking
-            @$loaded.hide duration:Duration.normal
+            @$loaded.fadeOut duration:Duration.normal
-            @$loading.show duration:Duration.normal, queue:true
+            @$loading.fadeIn duration:Duration.normal, queue:true
         else
-            @$loading.hide duration:Duration.normal
+            @$loading.fadeOut duration:Duration.normal
-            @$loaded.show duration:Duration.normal, queue:true
+            @$loaded.fadeIn duration:Duration.normal, queue:true
 
         if @model.status is MarkdownImage.Status.empty
             @$errorMessage.html 'please choose an image'
-            @$errorContainer.show duration:Duration.normal
+            @$errorContainer.fadeIn duration:Duration.normal
         else if @errorMessage?
             @$errorMessage.html @errorMessage
-            @$errorContainer.show duration:Duration.normal
+            @$errorContainer.fadeIn duration:Duration.normal
         else
-            @$errorContainer.hide duration:Duration.normal
+            @$errorContainer.fadeOut duration:Duration.normal
 
         super
 

src/coffee/controllers/markdown_section_controller.coffee

@@ -8,6 +8,7 @@ All rights reserved.
 _                           = require 'underscore'
 BaseController              = require './base_controller'
 convertMarkdown             = require 'marked'
+{Duration}                  = require '../constants'
 {Event}                     = require '../constants'
 MarkdownImageListController = require './markdown_image_list_controller'
 {Url}                       = require '../constants'
@@ -244,6 +245,8 @@ module.exports = class MarkdownSectionController extends BaseController
         return if @_lastUpdatedState is @state
         @_lastUpdatedState = @state
 
+        logger.verbose => "Updating markdown section visibility for state: #{@state}"
+
         elements =
             appologizingPanel: @$('.appologizing')
             buttonPanel:       @$('.buttons')
@@ -283,13 +286,13 @@ module.exports = class MarkdownSectionController extends BaseController
         toHide = ($el for name, $el of elements when not visible[name])
         toShow = ($el for name, $el of elements when visible[name])
 
+        $el.clearQueue() for name, $el of elements
+
         if toHide.length > 0
-            @hide $el for $el in toHide
+            $el.fadeOut(duration:Duration.normal) for $el in toHide
-            if toShow.length > 0
+            $el.delay(Duration.normal) for $el in toShow
-                @once Event.animate.hide.finish, =>
+
-                    @show $el for $el in toShow
+        $el.fadeIn(duration:Duration.normal) for $el in toShow
-        else if toShow.length > 0
-            @show $el for $el in toShow
 
         if @state is State.editing
             @once Event.animate.show.finish, =>

src/jade/templates/markdown_section.jade

@@ -8,11 +8,11 @@
 .view__markdown_section.section
     h2
     .panel
-        .waiting.hideable: img(src='/images/wait.gif')
+        .waiting: img(src='/images/wait.gif')
-        .markdown.hideable.hidden
+        .markdown
-        .creating.hideable.hidden
+        .creating
             p Please help by adding a description!
-        .editor.hideable.hidden
+        .editor
             .instructions
                 p.
                     Edit using <a href="https://help.github.com/articles/github-flavored-markdown/" target="new">GitHub
@@ -21,16 +21,16 @@
             textarea
             .sizer
         .image_list
-        .buttons.hideable.hidden
+        .buttons
-            .error.hideable.hidden: p
+            .error: p
-            button.return.hideable.hidden return
+            button.return return
-            button.cancel.hideable.hidden cancel
+            button.cancel cancel
-            button.preview.hideable.hidden preview
+            button.preview preview
-            button.save.hideable.hidden save
+            button.save save
-            button.edit.hideable edit
+            button.edit edit
-        .confirming.hideable.hidden
+        .confirming
             p Thanks for your help!
             p Your changes will appear on the site in a few minutes.
-        .appologizing.hideable.hidden
+        .appologizing
             p Sorry, but something went wrong.
             p Please try again after a few moments.