alchemy_cms 2.9.1 → 3.0.0.rc5

data/app/assets/images/alchemy/alchemy-logo.svg

@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="240.5px" height="70.575px" viewBox="0 0 240.5 70.575" enable-background="new 0 0 240.5 70.575" xml:space="preserve">
+<g>
+	<path fill="#33393F" d="M10.283,20.956h9.441l10.115,36.975h-8.26l-1.686-6.406H9.552l-1.685,6.406H0L10.283,20.956z M10.733,46.13
+		h7.979c-1.405-6.406-3.203-14.048-3.933-18.038C13.992,32.082,12.194,39.724,10.733,46.13z"/>
+	<path fill="#33393F" d="M40.796,57.931h-7.586V17.528l7.586-1.123V57.931z"/>
+	<path fill="#33393F" d="M65.07,56.021c-1.068,0.449-3.878,2.585-8.26,2.585c-7.53,0-11.688-4.72-11.688-14.667
+		c0-10.452,4.327-15.509,12.194-15.509c3.147,0,5.732,0.786,6.743,1.18l-0.899,5.563c-0.73-0.281-2.753-0.899-4.776-0.899
+		c-3.709,0-5.451,2.866-5.451,9.384c0,6.631,1.911,9.047,5.226,9.047c2.304,0,4.383-1.236,5.17-1.517L65.07,56.021z"/>
+	<path fill="#33393F" d="M67.992,17.528l7.586-1.123v16.352h0.112c0.787-0.731,3.372-4.327,7.98-4.327
+		c5.282,0,7.361,3.259,7.361,10.058v19.443h-7.586V40.343c0-4.159-0.674-5.339-2.978-5.339c-2.304,0-4.215,2.361-4.889,3.147v19.78
+		h-7.586V17.528z"/>
+	<path fill="#33393F" d="M116.936,55.852c-0.843,0.561-4.327,2.754-9.89,2.754c-6.519,0-11.8-4.215-11.8-14.33
+		c0-10.733,5.225-15.846,11.632-15.846c6.406,0,10.901,3.99,10.901,13.43c0,2.023-0.281,3.652-0.337,3.934h-14.666
+		c0.056,5.001,2.529,7.08,5.732,7.08c3.034,0,5.563-1.348,6.911-1.967L116.936,55.852z M102.775,41.073h7.698
+		c0-5.732-1.573-7.249-3.653-7.249C104.854,33.824,102.831,35.622,102.775,41.073z"/>
+	<path fill="#33393F" d="M122.273,29.048h6.687l0.337,3.878c0.844-1.012,2.979-4.495,7.25-4.495c3.259,0,5.282,1.124,6.125,4.439
+		c0.955-1.293,3.315-4.439,7.361-4.439c4.889,0,6.968,2.754,6.968,10.002v19.499h-7.53V39.05c0-2.529-0.394-4.046-2.361-4.046
+		c-1.967,0-3.484,2.248-3.877,3.147v19.78h-7.25V39.05c0-2.529-0.393-4.046-2.36-4.046c-1.967,0-3.428,2.192-3.878,3.147v19.78
+		h-7.474V29.048z"/>
+	<path fill="#33393F" d="M184.367,29.048l-9.496,30.513c-2.361,7.587-6.8,9.722-9.16,11.014c-0.787-1.011-2.641-3.596-3.372-4.608
+		c0.843-0.731,4.889-2.81,6.069-7.418l-9.103-29.501h7.923c0.843,3.428,3.878,16.071,4.72,20.792
+		c0.9-4.833,3.878-17.364,4.776-20.792H184.367z"/>
+</g>
+<g>
+	<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#C7E4F5" points="196.981,19.066 186.023,22.016 177.996,13.958 
+		180.937,2.95 191.893,0 199.911,8.058 	"/>
+	<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#33393F" points="201.487,31.458 195.325,33.114 190.819,28.588 
+		192.476,22.407 198.627,20.752 203.132,25.277 	"/>
+	<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#88AD59" points="214.803,22.347 206.133,24.685 199.781,18.303 
+		202.098,9.593 210.778,7.255 217.13,13.637 	"/>
+</g>
+<g>
+	<path fill="#33393F" stroke="#33393F" d="M195.908,43.146c-0.337,0-0.755-0.264-1.253-0.792c-0.498-0.527-0.997-0.791-1.494-0.791
+		c-1.802,0-3.641,1.663-5.517,4.99c-1.656,2.945-2.484,5.246-2.484,6.902c0,1.846,0.777,2.769,2.33,2.769
+		c1.538,0,3.062-0.506,4.572-1.517c1.391-0.937,2.586-2.175,3.583-3.714c0.087-0.162,0.205-0.242,0.352-0.242
+		c0.175,0,0.344,0.118,0.506,0.352c0.161,0.234,0.219,0.425,0.175,0.571c-0.118,0.469-0.938,1.45-2.462,2.946
+		c-1.392,1.362-2.242,2.125-2.55,2.285c-1.451,0.792-2.36,1.188-2.726,1.188c-0.043,0-0.234,0.018-0.571,0.055
+		c-0.337,0.036-0.52,0.055-0.55,0.055c-1.524,0-2.674-0.55-3.45-1.648c-0.645-0.909-0.967-2.045-0.967-3.407
+		c0-2.154,0.967-4.777,2.902-7.869c2.227-3.561,4.586-5.348,7.077-5.363c0.425,0,1.048,0.183,1.869,0.549
+		c1.069,0.469,1.627,1.041,1.671,1.715c0.028,0.293-0.085,0.527-0.341,0.704C196.322,43.058,196.098,43.146,195.908,43.146z"/>
+	<path fill="#33393F" stroke="#33393F" d="M224.306,56.796c-1.261,0-2.294-0.915-3.1-2.748c-0.63-1.421-0.946-2.717-0.946-3.89
+		c0,0.278,0-0.432,0-2.132c0.029-1.113,0.015-1.977-0.043-2.593c-0.074-0.85-0.22-1.275-0.438-1.275
+		c-0.044,0-0.416,0.557-1.117,1.67c-2.38,3.723-3.665,5.715-3.854,5.98c-1.986,2.755-3.541,4.131-4.665,4.131
+		c-1.124,0-1.737-1.223-1.839-3.67c-0.029-0.674,0.036-2.807,0.198-6.397c0.029-0.806-0.036-1.208-0.198-1.208
+		c-0.469,0-1.7,1.81-3.692,5.429c-2.037,3.679-3.121,6.191-3.253,7.54c-0.044,0.542-0.381,0.813-1.011,0.813
+		c-0.293,0-0.557-0.469-0.791-1.407c-0.162-0.718-0.242-1.253-0.242-1.604c0-2.682,0.066-4.99,0.198-6.924
+		c0.117-1.787,0.342-3.304,0.676-4.55c0.35-1.348,0.75-2.023,1.2-2.023c0.32,0,0.615,0.118,0.884,0.352
+		c0.269,0.234,0.375,0.461,0.316,0.681c-0.864,3.122-1.311,6.33-1.34,9.628c1.579-2.843,2.675-4.74,3.29-5.692
+		c1.783-2.741,3.179-4.111,4.188-4.111c1.213,0,1.79,1.443,1.732,4.33c-0.012,0.308-0.048,1.003-0.108,2.088
+		c-0.06,0.997-0.089,1.787-0.089,2.373c0,1.129,0.109,1.986,0.328,2.572c0.527-0.162,1.441-1.114,2.743-2.858
+		c1.067-1.466,1.974-2.828,2.72-4.088c1.931-3.342,3.335-5.012,4.213-5.012c0.878,0,1.434,0.843,1.668,2.528
+		c0.073,1.041,0.182,2.638,0.329,4.792c0.264,3.912,0.951,5.884,2.066,5.913c0.425,0.015,0.803-0.202,1.132-0.649
+		c0.33-0.447,0.597-0.67,0.803-0.67c0.41,0,0.615,0.22,0.615,0.66c0,0.601-0.367,1.113-1.099,1.538
+		C225.207,56.635,224.716,56.796,224.306,56.796z"/>
+	<path fill="#33393F" stroke="#33393F" d="M239.23,42.421c-0.087,0-0.377-0.132-0.868-0.396c-0.491-0.264-0.86-0.403-1.109-0.417
+		c-0.997-0.088-2.389,0.637-4.176,2.175c-1.846,1.583-2.769,2.939-2.769,4.067c0,0.601,1.069,0.901,3.209,0.901
+		c4.131,0,6.198,1.15,6.198,3.45c0,1.627-0.914,3.085-2.742,4.374c-1.667,1.172-3.327,1.758-4.979,1.758
+		c-0.732,0-1.412-0.227-2.04-0.681c-0.732-0.513-1.097-1.18-1.097-2c0-0.337,0.145-0.733,0.435-1.187
+		c0.332-0.528,0.687-0.792,1.063-0.792c0.101,0,0.203,0.023,0.305,0.066c-0.053,0.513-0.137,0.909-0.255,1.188
+		c-0.065,0.161-0.097,0.329-0.097,0.506c0,0.658,0.394,0.989,1.183,0.989c1.213,0,2.602-0.396,4.166-1.187
+		c1.738-0.88,2.609-1.803,2.609-2.77c0-0.601-0.302-1.099-0.904-1.494c-0.5-0.322-1.051-0.498-1.652-0.527l-4.229-0.154
+		c-0.705-0.029-1.388-0.176-2.049-0.44c-0.896-0.352-1.343-0.82-1.343-1.406c0-1.451,1.14-3.287,3.418-5.506
+		c2.278-2.221,4.202-3.33,5.77-3.33c0.44,0,0.974,0.169,1.605,0.506c0.747,0.41,1.121,0.864,1.121,1.362
+		C240,42.106,239.743,42.421,239.23,42.421z"/>
+</g>
+</svg>

data/app/assets/images/alchemy/icon.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="28px" height="28px" viewBox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve">
+<g>
+	<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#C7E4F5" points="13.584,15.795 5.744,17.906 0,12.141 2.104,4.265 
+		9.943,2.154 15.68,7.919 	"/>
+	<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#33393F" points="16.807,24.662 12.399,25.846 9.175,22.608 10.36,18.186 
+		14.761,17.001 17.984,20.239 	"/>
+	<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#88AD59" points="26.335,18.143 20.131,19.815 15.587,15.249 17.245,9.018 
+		23.455,7.345 28,11.911 	"/>
+</g>
+</svg>

data/app/assets/javascripts/alchemy/alchemy.autocomplete.js.coffee

@@ -0,0 +1,30 @@
+window.Alchemy = {} if typeof(window.Alchemy) is 'undefined'
+
+Alchemy.Autocomplete =
+
+  tags: (scope) ->
+    field = $('[data-autocomplete]', scope)
+    url = field.data('autocomplete')
+    field.select2
+      tags: true
+      tokenSeparators: [","]
+      minimumInputLength: 1
+      openOnEnter: false
+      createSearchChoice: @_createResultItem
+      ajax:
+        url: url
+        dataType: 'json'
+        data: (term, page) -> term: term
+        results: (data, page) -> results: data
+      initSelection: @_initializeSelection
+
+  _createResultItem: (term, data) ->
+    if $(data).filter(-> @text.localeCompare(term) is 0).length is 0
+      id: term
+      text: term
+
+  _initializeSelection: (element, callback) ->
+    data = []
+    $(element.val().split(",")).each ->
+      data.push id: this, text: this
+    callback(data)

data/app/assets/javascripts/alchemy/alchemy.base.js.coffee

@@ -24,22 +24,22 @@ $.extend Alchemy,
     $("a#edit_multiple_pictures").on "click", (e) ->
       $this = $(this)
       picture_ids = $("input:checkbox", "#picture_archive").serialize()
-      e.preventDefault()
-      Alchemy.openWindow $this.attr("href") + "?" + picture_ids, {title: $this.attr("title"), height: 230, overflow: false}
+      url = $this.attr("href") + "?" + picture_ids
+      Alchemy.openDialog url, {title: $this.attr("title"), size: '400x295'}
       false
     return
 
   # To show the "Please wait" overlay.
   # Pass false to hide it.
   pleaseWaitOverlay: (show = true) ->
-    $overlay = $("#overlay")
-    spinner = Alchemy.Spinner.medium()
+    $overlay = $('#overlay')
     if show
-      spinner.spin($("#overlay")[0])
-      $overlay.css "visibility", "visible"
+      spinner = Alchemy.Spinner.medium()
+      $overlay.append(spinner.spin().el)
+      $overlay.show()
     else
-      spinner.stop()
-      $overlay.css "visibility", "hidden"
+      $overlay.find('.spinner').remove()
+      $overlay.hide()
     return
 
   # Shows spinner while loading images and
@@ -47,15 +47,15 @@ $.extend Alchemy,
   ImageLoader: (scope = document, options = {color: '#fff'}) ->
     $('img', scope).each ->
       image = $(this).hide()
-      parent = image.parent()
+      $parent = image.parent()
       spinner = Alchemy.Spinner.small options
-      spinner.spin parent[0]
+      spinner.spin $parent[0]
       image.on 'load', ->
-        image.fadeIn 600
         spinner.stop()
+        image.fadeIn 400
       image.on 'error', ->
         spinner.stop()
-        image.parent().html('<span class="icon warn"/>')
+        $parent.html('<span class="icon warn"/>')
 
   removePicture: (selector) ->
     $form_field = $(selector)
@@ -77,7 +77,9 @@ $.extend Alchemy,
   # Initializes all select tag with .alchemy_selectbox class as selectBoxIt instance
   # Pass a jQuery scope to only init a subset of selectboxes.
   SelectBox: (scope) ->
-    $("select.alchemy_selectbox", scope).selectBoxIt()
+    $("select.alchemy_selectbox", scope).select2
+      minimumResultsForSearch: 7
+      dropdownAutoWidth: true
     return
 
   Buttons: (options) ->
@@ -87,18 +89,23 @@ $.extend Alchemy,
   # Selects cell tab for given name.
   # Creates it if it's not present yet.
   selectOrCreateCellTab: (cell_name, label) ->
-    if $("#cell_" + cell_name).size() is 0
-      $("#cells").tabs "add", "#cell_" + cell_name, label
-      $("#cell_" + cell_name).addClass "sortable_cell"
-    $("#cells").tabs "select", "cell_" + cell_name
+    $cells = $('#cells')
+    $tab = $("#cell_#{cell_name}")
+    if $tab.length == 0
+      $("<li><a href=\"#cell_#{cell_name}\">#{label}</a></li>")
+        .appendTo('#cells .ui-tabs-nav')
+      $tab = $("<div id=\"cell_#{cell_name}\" class=\"sortable_cell\"/>")
+      $cells.append($tab)
+      $cells.tabs().tabs('refresh')
+    $cells.tabs().tabs('option', 'active', $('#cells > div').index($tab))
     return
 
   # Inits the cell tabs
   buildTabbedCells: (label) ->
-    $cells = $("<div id=\"cells\"/>")
-    $("#cell_for_other_elements").wrap $cells
-    $("#cells").prepend "<ul><li><a href=\"#cell_for_other_elements\">" + label + "</a></li></ul>"
-    $("#cells").tabs().tabs "paging",
+    $cells = $('<div id="cells"/>')
+    $('#cell_for_other_elements').wrap($cells)
+    $('#cells').prepend("<ul><li><a href=\"#cell_for_other_elements\">#{label}</a></li></ul>")
+    .tabs 'paging',
       follow: true
       followOnSelect: true
     return
@@ -110,15 +117,6 @@ $.extend Alchemy,
       console.trace()
     return
 
-  # Translates given string
-  #
-  _t: (id) ->
-    translation = Alchemy.translations[id]
-    if (translation)
-      translation[Alchemy.locale]
-    else
-      id
-
   getUrlParam: (name) ->
     results = new RegExp("[\\?&]" + name + "=([^&#]*)").exec(window.location.href)
     results[1] or 0  if results

data/app/assets/javascripts/alchemy/alchemy.browser.js.coffee

@@ -1,28 +1,22 @@
-window.Alchemy = {} if typeof (Alchemy) is "undefined"
-run = ($) ->
-  Alchemy.Browser =
-    isiPhone: navigator.userAgent.match(/iPhone/i) isnt null
-    isiPad: navigator.userAgent.match(/iPad/i) isnt null
-    isiPod: navigator.userAgent.match(/iPod/i) isnt null
-    isiOS: navigator.userAgent.match(/iPad|iPhone|iPod/i) isnt null
-    isFirefox: navigator.userAgent.match(/Firefox/i) isnt null
-    isChrome: navigator.userAgent.match(/Chrome/i) isnt null
-    isSafari: navigator.userAgent.match(/AppleWebKit/) and not navigator.userAgent.match(/Chrome/)
-    isIE: navigator.userAgent.match(/MSIE/i) isnt null
-    getVersion: (browser) ->
-      if Alchemy.Browser["is" + browser]
-        parseInt(navigator.userAgent.match(new RegExp(browser + ".[0-9]+", "i"))[0].replace(new RegExp(browser + "."), ""), 10)
-      else
-        null
+window.Alchemy = {} if typeof(Alchemy) is "undefined"
 
-  Alchemy.Browser.ChromeVersion = Alchemy.Browser.getVersion("Chrome")
-  Alchemy.Browser.FirefoxVersion = Alchemy.Browser.getVersion("Firefox")
-  Alchemy.Browser.SafariVersion = Alchemy.Browser.getVersion("Safari")
-  Alchemy.Browser.IEVersion = Alchemy.Browser.getVersion("MSIE")
-  Alchemy.Browser.isWebKit = Alchemy.Browser.isChrome || Alchemy.Browser.isSafari
-  return
+Alchemy.Browser =
+  isiPhone: navigator.userAgent.match(/iPhone/i) isnt null
+  isiPad: navigator.userAgent.match(/iPad/i) isnt null
+  isiPod: navigator.userAgent.match(/iPod/i) isnt null
+  isiOS: navigator.userAgent.match(/iPad|iPhone|iPod/i) isnt null
+  isFirefox: navigator.userAgent.match(/Firefox/i) isnt null
+  isChrome: navigator.userAgent.match(/Chrome/i) isnt null
+  isSafari: navigator.userAgent.match(/AppleWebKit/) and not navigator.userAgent.match(/Chrome/)
+  isIE: navigator.userAgent.match(/MSIE/i) isnt null
+  getVersion: (browser) ->
+    if Alchemy.Browser["is" + browser]
+      parseInt(navigator.userAgent.match(new RegExp(browser + ".[0-9]+", "i"))[0].replace(new RegExp(browser + "."), ""), 10)
+    else
+      null
 
-if typeof (jQuery) is "undefined"
-  Alchemy.loadjQuery(run)
-else
-  run(jQuery)
+Alchemy.Browser.ChromeVersion = Alchemy.Browser.getVersion("Chrome")
+Alchemy.Browser.FirefoxVersion = Alchemy.Browser.getVersion("Firefox")
+Alchemy.Browser.SafariVersion = Alchemy.Browser.getVersion("Safari")
+Alchemy.Browser.IEVersion = Alchemy.Browser.getVersion("MSIE")
+Alchemy.Browser.isWebKit = Alchemy.Browser.isChrome || Alchemy.Browser.isSafari

data/app/assets/javascripts/alchemy/alchemy.confirm_dialog.js.coffee

@@ -0,0 +1,80 @@
+class window.Alchemy.ConfirmDialog extends Alchemy.Dialog
+
+  DEFAULTS:
+    header_height: 36
+    size: '300x100'
+    padding: true
+    modal: true
+    title: 'Please confirm'
+    ok_label: 'Yes'
+    cancel_label: 'No'
+    on_ok: ->
+
+  constructor: (@message, @options = {}) ->
+    super('', @options)
+
+  load: ->
+    @dialog_title.text @options.title
+    @dialog_body.html "<p>#{@message}</p>"
+    @dialog_body.append @build_buttons()
+    @bind_buttons()
+
+  build_buttons: ->
+    $btn_container = $('<div class="alchemy-dialog-buttons" />')
+    @cancel_button = $("<button class=\"cancel\">#{@options.cancel_label}</button>")
+    @ok_button = $("<button class=\"confirm\">#{@options.ok_label}</button>")
+    $btn_container.append(@cancel_button)
+    $btn_container.append(@ok_button)
+    $btn_container
+
+  bind_buttons: ->
+    @cancel_button.focus()
+    @cancel_button.click =>
+      @close()
+      Alchemy.Buttons.enable()
+      false
+    @ok_button.click =>
+      @close()
+      @options.on_ok()
+      false
+
+# Opens a confirm dialog
+#
+# Arguments:
+#
+# message - The message that will be displayed to the user (String)
+#
+# Options:
+#
+#   title: ''         - The title of the overlay window (String)
+#   cancel_label: ''   - The label of the cancel button (String)
+#   ok_label: ''       - The label of the ok button (String)
+#   on_ok: null  - The function to invoke on confirmation (Function)
+#
+window.Alchemy.openConfirmDialog = (message, options = {}) ->
+  dialog = new Alchemy.ConfirmDialog(message, options)
+  dialog.open()
+
+# Opens a confirm to delete dialog
+#
+# Arguments:
+#
+#   url  - The url to the server delete action. Uses DELETE as HTTP method. (String)
+#   opts - An options object (Object)
+#
+# Options:
+#
+#   title: ''        - The title of the confirmation window (String)
+#   message: ''      - The message that will be displayed to the user (String)
+#   ok_label: ''      - The label for the ok button (String)
+#   cancel_label: ''  - The label for the cancel button (String)
+#
+window.Alchemy.confirmToDeleteDialog = (url, opts) ->
+  options =
+    on_ok: ->
+      Alchemy.pleaseWaitOverlay()
+      $.ajax
+        url: url
+        type: "DELETE"
+  $.extend(options, opts)
+  Alchemy.openConfirmDialog options.message, options

data/app/assets/javascripts/alchemy/alchemy.dialog.js.coffee

@@ -0,0 +1,261 @@
+# Dialog windows
+#
+class window.Alchemy.Dialog
+
+  DEFAULTS:
+    header_height: 36
+    size: '400x300'
+    padding: true
+    title: ''
+    modal: true
+    overflow: 'visible'
+    ready: ->
+    closed: ->
+
+  # Arguments:
+  #  - url: The url to load the content from via ajax
+  #  - options: A object holding options
+  #    - size: The maximum size of the Dialog
+  #    - title: The title of the Dialog
+  constructor: (@url, @options = {}) ->
+    @options = $.extend({}, @DEFAULTS, @options)
+    @$document = $(document)
+    @$window = $(window)
+    @$body = $('body')
+    size = @options.size.split('x')
+    @width = parseInt(size[0], 10)
+    @height = parseInt(size[1], 10)
+    @build()
+
+  # Opens the Dialog and loads the content via ajax.
+  open: ->
+    @dialog.trigger 'Alchemy.DialogOpen'
+    @bind_close_events()
+    window.requestAnimationFrame =>
+      @dialog_container.addClass('open')
+    unless @options.modal
+      @dialog.draggable
+        iframeFix: true
+        handle: '.alchemy-dialog-title'
+        containment: 'parent'
+    Alchemy.currentDialogs.push(this)
+    @load()
+    true
+
+  # Closes the Dialog and removes it from the DOM
+  close: ->
+    @$document.off 'keydown'
+    @dialog_container.removeClass('open')
+    @$document.on 'webkitTransitionEnd transitionend oTransitionEnd', =>
+      @$document.off 'webkitTransitionEnd transitionend oTransitionEnd'
+      @dialog_container.remove()
+      Alchemy.currentDialogs.pop(this)
+      if @options.closed?
+        @options.closed()
+    true
+
+  # Loads the content via ajax and replaces the Dialog body with server response.
+  load: ->
+    @show_spinner()
+    $.get @url, (data) =>
+      @replace(data)
+    .fail (xhr) =>
+      @show_error(xhr)
+    true
+
+  # Reloads the Dialog content
+  reload: ->
+    @dialog_body.empty()
+    @load()
+
+  # Replaces the dialog body with given content and initializes it.
+  replace: (data) ->
+    @remove_spinner()
+    @dialog_body.hide()
+    @dialog_body.html(data)
+    @init()
+    if @options.ready?
+      @options.ready(@dialog_body)
+    @dialog_body.show('fade', 200)
+    true
+
+  # Adds a spinner into Dialog body
+  show_spinner: ->
+    @spinner = Alchemy.Spinner.medium()
+    @spinner.spin(@dialog_body[0])
+
+  # Removes the spinner from Dialog body
+  remove_spinner: ->
+    @spinner.stop()
+
+  # Initializes the Dialog body
+  init: ->
+    Alchemy.GUI.init(@dialog_body)
+    $('#overlay_tabs', @dialog_body).tabs()
+    @watch_remote_forms()
+
+  # Watches ajax requests inside of dialog body and replaces the content accordingly
+  watch_remote_forms: ->
+    form = $('[data-remote="true"]', @dialog_body)
+    form.bind "ajax:complete", (e, xhr, status) =>
+      content_type = xhr.getResponseHeader('Content-Type')
+      if status == 'success'
+        if content_type.match(/javascript/)
+          @close()
+        else
+          @dialog_body.html(xhr.responseText)
+          @init()
+      else
+        @show_error(xhr, status)
+
+  # Displays an error message
+  show_error: (xhr, status_message) ->
+    error_type = "warning"
+    switch xhr.status
+      when 0
+        error_header = "The server does not respond."
+        error_body = "Please check server and try again."
+      when 403
+        error_header = "You are not authorized!"
+        error_body = "Please close this window."
+      else
+        error_type = "error"
+        if status_message
+          error_header = status_message
+          console.error eval(xhr.responseText)
+        else
+          error_header = "#{xhr.statusText} (#{xhr.status})"
+        error_body = "Please check log and try again."
+    $errorDiv = $("<div class=\"message #{error_type}\" />")
+    $errorDiv.append '<span class="icon warning"></span>'
+    $errorDiv.append "<h1>#{error_header}</h1>"
+    $errorDiv.append "<p>#{error_body}</p>"
+    @dialog_body.html $errorDiv
+
+  # Binds close events on:
+  # - Close button
+  # - Overlay (if the Dialog is a modal)
+  # - ESC Key
+  bind_close_events: ->
+    @close_button.click =>
+      @close()
+      false
+    if @overlay
+      @overlay.addClass('closable').click =>
+        @close()
+        false
+    @$document.keydown (e) =>
+      if e.which == 27
+        @close()
+        false
+      else
+        true
+
+  # Builds the html structure of the Dialog
+  build: ->
+    @dialog_container = $('<div class="alchemy-dialog-container" />')
+    @dialog = $('<div class="alchemy-dialog" />')
+    @dialog_body = $('<div class="alchemy-dialog-body" />')
+    @dialog_header = $('<div class="alchemy-dialog-header" />')
+    @dialog_title = $('<div class="alchemy-dialog-title" />')
+    @close_button = $('<a class="alchemy-dialog-close"><span class="icon close small"></span></a>')
+    @dialog_title.text(@options.title)
+    @dialog_header.append(@dialog_title)
+    @dialog_header.append(@close_button)
+    @dialog.append(@dialog_header)
+    @dialog.append(@dialog_body)
+    if @options.modal
+      @overlay = $('<div class="alchemy-dialog-overlay" />')
+      @dialog_container.append(@overlay)
+    @dialog_container.append(@dialog)
+    @dialog.addClass('modal') if @options.modal
+    @dialog_body.addClass('padded') if @options.padding
+    @$body.append(@dialog_container)
+    @resize()
+    @dialog
+
+  # Sets the correct size of the dialog
+  # It normalizes the given size, so that it never acceeds the window size.
+  resize: ->
+    padding = 16
+    $doc_width = @$window.width()
+    $doc_height = @$window.height()
+    if @options.size == 'fullscreen'
+      [@width, @height] = [$doc_width, $doc_height]
+    if @width >= $doc_width
+      @width = $doc_width - padding
+    if @height >= $doc_height
+      @height = $doc_height - padding - @DEFAULTS.header_height
+    @dialog.css
+      'width': @width
+      'min-height': @height
+      overflow: @options.overflow
+    if @options.overflow == 'hidden'
+      @dialog_body.css
+        height: @height
+        overflow: 'auto'
+    else
+      @dialog_body.css
+        'min-height': @height
+        overflow: 'visible'
+    return
+
+# Collection of all current dialog instances
+window.Alchemy.currentDialogs = []
+
+# Gets the last dialog instantiated, which is the current one.
+window.Alchemy.currentDialog = ->
+  length = Alchemy.currentDialogs.length
+  return if length == 0
+  Alchemy.currentDialogs[length - 1]
+
+# Utility function to close the current Dialog
+#
+# You can pass a callback function, that gets triggered after the Dialog gets closed.
+#
+window.Alchemy.closeCurrentDialog = (callback) ->
+  dialog = Alchemy.currentDialog()
+  if dialog?
+    dialog.options.closed = callback
+    dialog.close()
+
+# Utility function to open a new Dialog
+window.Alchemy.openDialog = (url, options) ->
+  if !url
+    throw('No url given! Please provide an url.')
+  dialog = new Alchemy.Dialog(url, options)
+  dialog.open()
+
+# Watches elements for Alchemy Dialogs
+#
+# Links having a data-alchemy-dialog or data-alchemy-confirm-delete
+# and input/buttons having a data-alchemy-confirm attribute get watched.
+#
+# You can pass a scope so that only elements inside this scope are queried.
+#
+# The href attribute of the link is the url for the overlay window.
+#
+# See Alchemy.Dialog for further options you can add to the data attribute
+#
+window.Alchemy.watchForDialogs = (scope) ->
+  $('a[data-alchemy-dialog]', scope).click (e) ->
+    $this = $(this)
+    url = $this.attr('href')
+    options = $this.data('alchemy-dialog')
+    Alchemy.openDialog(url, options)
+    false
+  $('a[data-alchemy-confirm-delete]', scope).click (event) ->
+    $this = $(this)
+    options = $this.data('alchemy-confirm-delete')
+    Alchemy.confirmToDeleteDialog($this.attr('href'), options)
+    false
+  $('input[data-alchemy-confirm], button[data-alchemy-confirm]', scope).click (event) ->
+    options = $(this).data('alchemy-confirm')
+    Alchemy.openConfirmDialog options.message, $.extend options,
+      ok_label: options.ok_label
+      cancel_label: options.cancel_label
+      on_ok: =>
+        Alchemy.pleaseWaitOverlay()
+        @form.submit()
+        return
+    false