         @div =>
           @button "Choose Local Image", outlet: "openImg", class: "btn"
           @label outlet: "message", class: "side-label"
-        @label "Title", class: "message"
+        @label "Title (Alt)", class: "message"
         @subview "titleEditor", new EditorView(mini: true)
         @label "Width", class: "message"
         @subview "widthEditor", new EditorView(mini: true)
         @label "Height", class: "message"
         @subview "heightEditor", new EditorView(mini: true)
       @div class: "image-container", =>
-        @img outlet: 'image'
+        @img outlet: 'imagePreview'
 
   initialize: ->
     @handleEvents()

    @on "core:cancel", => @detach()

  handleEvents: ->
    @imgEditor.hiddenInput.on "focusout", => @setImage(@imgEditor.getText())
    @openImg.on "click", => @openImageDialog()

  onConfirm: ->
    imgPath = @imgEditor.getText()
    imgTitle = @titleEditor.getText()
    if @isValidImageFile(imgPath)
      @editor.insertText("![#{imgTitle}][#{imgPath}]")
    @detach()

  detach: ->

    @previouslyFocusedElement = $(':focus')
    @editor = atom.workspace.getActiveEditor()
    atom.workspaceView.append(this)
    @titleEditor.setText(@editor.getSelectedText())
    @imgEditor.focus()

  displayImagePreview: (file) ->
    return unless file and file.trim()
    return if @imageOnPreview == file

    if @isValidImageFile(file)
      @imageOnPreview = file
      @message.text("Open Preview ...")
      @imagePreview.attr("src", file)
      @imagePreview.load =>
        @message.text("")
        @widthEditor.setText("" + @imagePreview.context.naturalWidth)
        @heightEditor.setText("" + @imagePreview.context.naturalHeight)
    else
      @message.text("Error: Invalid Image File.")
      @imagePreview.attr("src", "")
      @widthEditor.setText("")
      @heightEditor.setText("")

  openImageDialog: ->
    files = dialog.showOpenDialog(properties: ['openFile'])
    return unless files
    file = files[0]
    @imgEditor.setText(file)
    @displayImagePreview(file)

  isValidImageFile: (file) ->
    path.extname(file).toLowerCase() in imageExtensions

  generateImageTag: (data) ->
    template = atom.config.get("markdown-writer.imageTag") || "![<alt>](<src>)"
    return utils.template(template, data)
