Backbone notifications

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">
  <script data-main="main" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js"></script>
  <meta charset="utf-8">
  <title>Backbone notification system</title>
</head>
<body>
  <div id="notification-center"></div>
  <form id="create-form">
    <fieldset>
      <div class="form-group">
        <label for="#type">Type: </label>
        <select id="type" class="form-control">
          <option value="default" selected>default</option>
          <option value="success">success</option>
          <option value="info">info</option>
          <option value="warning">warning</option>
          <option value="danger">danger</option>
        </select>
      </div>
      <div class="form-group">
        <label for="#message">Message: </label>
        <input id="message" class="form-control" type="text" placeholder="ping" value="Hey dude!"/>
      </div>
      <div class="form-group">
        <label for="#timeout">Speed: </label>
        <select id="timeout" class="form-control">
          <option value="10000">slow</option>
          <option value="3000">medium</option>
          <option value="1000" selected>fast</option>
        </select>
      </div>
      <div class="checkbox">
        <label>
          <input id="closeable" type="checkbox" checked> Closable
        </label>
      </div>
      <button id="create" class="btn btn-success">Show Notification</button>
    </fieldset>
  </form>
</body>
</html>

#notification-center {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

#create-form {
  padding: 20px;
}

.alert {
  border: 0;
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  font-family: Ubuntu;
  font-size: 12px;
  margin: 0;
  padding: 10px 30px;
  line-height: 14px;
}

.alert .close,
.alert .close:hover {
  color: #fff;
  font-size: 12px;
  opacity: 1;
}

.alert.alert-default {
  background-color: #9fb6bf;
}

.alert.alert-success {
  background-color: #4fae33;
}

.alert.alert-warning {
  background-color: #ff7f00;
}

.alert.alert-info {
  background-color: #00b0ed;
}

.alert.alert-danger {
   background-color: #d00000;
}

require.config
  paths:
    'jquery': '//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min'
    'lodash': '//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.7.0/lodash.min'
    'backbone': '//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min'
    'text': '//cdnjs.cloudflare.com/ajax/libs/require-text/2.0.12/text'
  shim:
    'jquery':
      exports: '$'
    'lodash':
      exports: '_'
    'backbone':
      deps: ['underscore', 'jquery']
      exports: 'Backbone'
  map:
    '*':
      'underscore': 'lodash'

define ['jquery', './NotificationView'], ($, NotificationView) ->
  showNotification = (message, type, timeout, closeable) ->
    notification = new NotificationView
      container: '#notification-center'
      className: 'alert alert-' + type
      message: message
      closeable: closeable
      timeout: timeout
    
    notification.show()
  
  $(document).ready () ->
    timeout = 10000
    closeable = yes
    message = 'This is a test notification'
    
    for type in ['default', 'success', 'info', 'warning', 'danger']
      showNotification message, type, timeout, closeable
  
  $(document).on 'click', '#create-form #create', (e) ->
    type = $('#create-form #type').val()
    message = $('#create-form #message').val()
    closeable = $('#create-form #closeable').prop('checked')
    timeout = parseInt $('#create-form #timeout').val(), 10
    
    showNotification message, type, timeout, closeable
    
    e.preventDefault()

define [
  'jquery'
  'lodash'
  'backbone'
  'text!./NotificationTemplate.jst'
], (
  $
  _
  Backbone
  NotificationTemplate
) ->
  class NotificationView extends Backbone.View
    tagName: 'div'
    
    className: 'alert'

    template: _.template(NotificationTemplate, { variable: 'data' })

    options:
      container: 'body'
      message: undefined
      type: 'info'
      closeable: no
      timeout: 1000
    
    events:
      'mouseenter': 'onHover'
      'mouseleave': 'onBlur'
      'click .close': 'hide'
    
    initialize: (options) ->
      @options = _.extend {}, @options, options

    render: () ->
      @el.className = @className
      
      if _.isFunction @template
        html = @template @options
      else
        html = _.result @, 'template', @options.message
        
      @el.innerHTML = html
        
    
    onHover: () ->
      clearTimeout @hideTimeout
      
      @
      
    onBlur: () ->
      @hideTimeout = setTimeout () =>
        clearTimeout @hideTimeout
        @hide()
      , @options.timeout
      
      @
    
    show: () ->
      if not @isVisible
        @render()
        $(@options.container)[0].appendChild @el
        @onBlur()
        @isVisible = yes
      
    hide: () ->
      if @isVisible
        @$el.fadeOut () =>
          $(@options.container)[0].removeChild @el
        @isVisible = no

<% if (data.closeable) { %>
  <div class="glyphicon glyphicon-remove-sign close"></div>
<% } %>
<%- data.message %>