Prompt:
Convert this JavaScript to CoffeeScript.
```javascript
/*global define*/
define(['controllers/controllers', 'services/people'], function(controllers) {
  'use strict';
  return controllers.controller('people', [
    '$scope',
    'people',
    function($scope,
    service) {
      $scope.error = '';
      $scope.name = '';
      $scope.people = service.people;
      $scope.insertPerson = function(name) {
        return service.post(name,
    function(Resource,
    getResponseHeaders) {
          $scope.error = '';
          return $scope.name = '';
        },
    function(obj) {
          if (obj.status === 403) {
            return $scope.error = obj.data;
          }
        });
      };
      return service.get();
    }
  ]);
});
```

Response:
###global define###

define ['controllers/controllers', 'services/people'], (controllers) ->
	'use strict'

	controllers.controller 'people', ['$scope', 'people', ($scope, service) ->
		$scope.error = ''
		$scope.name = ''
		$scope.people = service.people

		$scope.insertPerson = (name) ->
			service.post name
			, (Resource, getResponseHeaders) ->
				$scope.error = ''
				$scope.name = ''
			, (obj) ->
				($scope.error = obj.data) if obj.status is 403

		service.get()
	]


Prompt:
###global define###

define ['controllers/controllers', 'services/people'], (controllers) ->
	'use strict'

	controllers.controller 'people', ['$scope', 'people', ($scope, service) ->
		$scope.error = ''
		$scope.name = ''
		$scope.people = service.people

Response:
$scope.insertPerson = (name) ->
			service.post name
			, (Resource, getResponseHeaders) ->
				$scope.error = ''
				$scope.name = ''
			, (obj) ->
				($scope.error = obj.data) if obj.status is 403

		service.get()
	]


Response:
###global define###

define ['controllers/controllers', 'services/people'], (controllers) ->
	'use strict'

	controllers.controller 'people', ['$scope', 'people', ($scope, service) ->
		$scope.people = service.people

		$scope.insertPerson = ->
			service.post()

		service.get()
	]


Prompt:
Convert this CoffeeScript to JavaScript.
```coffeescript
###global define###

define ['controllers/controllers', 'services/people'], (controllers) ->
	'use strict'

	controllers.controller 'people', ['$scope', 'people', ($scope, service) ->
		$scope.people = service.people

		$scope.insertPerson = ->
			service.post()

		service.get()
	]
```

Response:
/*global define*/
define(['controllers/controllers', 'services/people'], function(controllers) {
  'use strict';
  return controllers.controller('people', [
    '$scope',
    'people',
    function($scope,
    service) {
      $scope.people = service.people;
      $scope.insertPerson = function() {
        return service.post();
      };
      return service.get();
    }
  ]);
});


Prompt:
Convert this JavaScript to CoffeeScript.
```javascript
/*global define*/
define(['controllers/controllers', 'services/people'], function(controllers) {
  'use strict';
  return controllers.controller('people', [
    '$scope',
    'people',
    function($scope,
    service) {
      $scope.people = service.people;
      $scope.insertPerson = function() {
        return service.post();
      };
      return service.get();
    }
  ]);
});
```

Response:
###global define###

define ['controllers/controllers', 'services/people'], (controllers) ->
	'use strict'

	controllers.controller 'people', ['$scope', 'people', ($scope, service) ->
		$scope.people = service.people

		$scope.insertPerson = ->
			service.post()

		service.get()
	]


Prompt:
###global define###

define ['controllers/controllers', 'services/people'], (controllers) ->
	'use strict'

	controllers.controller 'people', ['$scope', 'people', ($scope, service) ->

Response:
$scope.people = service.people

		$scope.insertPerson = ->
			service.post()

		service.get()
	]


Response:
###global define###

define ['controllers/controllers', 'services/people'], (controllers) ->
	'use strict'

	controllers.controller 'people', ['$scope', 'people', '$log', ($scope, service, $log) ->
		$scope.people = service.people

		$scope.insertPerson = ->
			service.post()

		service.get (Resource, getResponseHeaders) ->
			return
			#$log.info 'people.get success', Resource, getResponseHeaders()
		, (obj) ->
			return
			#$log.error 'people.get error', obj.config, obj.headers(), obj.status, obj.data
	]


Prompt:
Convert this CoffeeScript to JavaScript.
```coffeescript
###global define###

define ['controllers/controllers', 'services/people'], (controllers) ->
	'use strict'

	controllers.controller 'people', ['$scope', 'people', '$log', ($scope, service, $log) ->
		$scope.people = service.people

		$scope.insertPerson = ->
			service.post()

		service.get (Resource, getResponseHeaders) ->
			return
			#$log.info 'people.get success', Resource, getResponseHeaders()
		, (obj) ->
			return
			#$log.error 'people.get error', obj.config, obj.headers(), obj.status, obj.data
	]
```

Response:
/*global define*/
define(['controllers/controllers', 'services/people'], function(controllers) {
  'use strict';
  return controllers.controller('people', [
    '$scope',
    'people',
    '$log',
    function($scope,
    service,
    $log) {
      $scope.people = service.people;
      $scope.insertPerson = function() {
        return service.post();
      };
      return service.get(function(Resource,
    getResponseHeaders) {},
    //$log.info 'people.get success', Resource, getResponseHeaders()
    function(obj) {});
    }
  ]);
});

//$log.error 'people.get error', obj.config, obj.headers(), obj.status, obj.data


Prompt:
Convert this JavaScript to CoffeeScript.
```javascript
/*global define*/
define(['controllers/controllers', 'services/people'], function(controllers) {
  'use strict';
  return controllers.controller('people', [
    '$scope',
    'people',
    '$log',
    function($scope,
    service,
    $log) {
      $scope.people = service.people;
      $scope.insertPerson = function() {
        return service.post();
      };
      return service.get(function(Resource,
    getResponseHeaders) {},
    //$log.info 'people.get success', Resource, getResponseHeaders()
    function(obj) {});
    }
  ]);
});

//$log.error 'people.get error', obj.config, obj.headers(), obj.status, obj.data
```

Response:
###global define###

define ['controllers/controllers', 'services/people'], (controllers) ->
	'use strict'

	controllers.controller 'people', ['$scope', 'people', '$log', ($scope, service, $log) ->
		$scope.people = service.people

		$scope.insertPerson = ->
			service.post()

		service.get (Resource, getResponseHeaders) ->
			return
			#$log.info 'people.get success', Resource, getResponseHeaders()
		, (obj) ->
			return
			#$log.error 'people.get error', obj.config, obj.headers(), obj.status, obj.data
	]


Prompt:
###global define###

define ['controllers/controllers', 'services/people'], (controllers) ->
	'use strict'

	controllers.controller 'people', ['$scope', 'people', '$log', ($scope, service, $log) ->
		$scope.people = service.people

		$scope.insertPerson = ->

Response:
service.post()

		service.get (Resource, getResponseHeaders) ->
			return
			#$log.info 'people.get success', Resource, getResponseHeaders()
		, (obj) ->
			return
			#$log.error 'people.get error', obj.config, obj.headers(), obj.status, obj.data
	]


Response:
getCurrentTabUrl = (callback) ->
  # Query filter to be passed to chrome.tabs.query - see
  # https://developer.chrome.com/extensions/tabs#method-query
  chrome.tabs.query {active: true, currentWindow: true}, (tabs) ->
    url = tabs[0].url
    console.assert(typeof url == 'string', 'tab.url should be a string')
    callback(url)

document.addEventListener 'DOMContentLoaded', ->
  # make page DEFAULT_PAGE_WIDTH wide
  chrome.windows.update(chrome.windows.WINDOW_ID_CURRENT, {width: 970})

  # load scripts into page
  chrome.tabs.executeScript null, { file: "vendor/jquery-2.1.4.js" }, ->
    chrome.tabs.executeScript null, { file: "vendor/underscore-min.js" }, ->
      chrome.tabs.executeScript null, { file: "reader.js" }

$('.output').text("loading...")

chrome.extension.onMessage.addListener (request, sender, response) ->
  $('#url').val(request.url)
  $('.output').text(JSON.stringify(request, null, 2))
  $.ajax {
    method: "POST",
    url: "http://localhost:9000/pages",
    data: JSON.stringify(request),
    contentType: "application/json"
  }


Prompt:
Convert this CoffeeScript to JavaScript.
```coffeescript
getCurrentTabUrl = (callback) ->
  # Query filter to be passed to chrome.tabs.query - see
  # https://developer.chrome.com/extensions/tabs#method-query
  chrome.tabs.query {active: true, currentWindow: true}, (tabs) ->
    url = tabs[0].url
    console.assert(typeof url == 'string', 'tab.url should be a string')
    callback(url)

document.addEventListener 'DOMContentLoaded', ->
  # make page DEFAULT_PAGE_WIDTH wide
  chrome.windows.update(chrome.windows.WINDOW_ID_CURRENT, {width: 970})

  # load scripts into page
  chrome.tabs.executeScript null, { file: "vendor/jquery-2.1.4.js" }, ->
    chrome.tabs.executeScript null, { file: "vendor/underscore-min.js" }, ->
      chrome.tabs.executeScript null, { file: "reader.js" }

$('.output').text("loading...")

chrome.extension.onMessage.addListener (request, sender, response) ->
  $('#url').val(request.url)
  $('.output').text(JSON.stringify(request, null, 2))
  $.ajax {
    method: "POST",
    url: "http://localhost:9000/pages",
    data: JSON.stringify(request),
    contentType: "application/json"
  }
```

Response:
var getCurrentTabUrl;

getCurrentTabUrl = function(callback) {
  // Query filter to be passed to chrome.tabs.query - see
  // https://developer.chrome.com/extensions/tabs#method-query
  return chrome.tabs.query({
    active: true,
    currentWindow: true
  }, function(tabs) {
    var url;
    url = tabs[0].url;
    console.assert(typeof url === 'string', 'tab.url should be a string');
    return callback(url);
  });
};

document.addEventListener('DOMContentLoaded', function() {
  // make page DEFAULT_PAGE_WIDTH wide
  chrome.windows.update(chrome.windows.WINDOW_ID_CURRENT, {
    width: 970
  });
  // load scripts into page
  return chrome.tabs.executeScript(null, {
    file: "vendor/jquery-2.1.4.js"
  }, function() {
    return chrome.tabs.executeScript(null, {
      file: "vendor/underscore-min.js"
    }, function() {
      return chrome.tabs.executeScript(null, {
        file: "reader.js"
      });
    });
  });
});

$('.output').text("loading...");

chrome.extension.onMessage.addListener(function(request, sender, response) {
  $('#url').val(request.url);
  $('.output').text(JSON.stringify(request, null, 2));
  return $.ajax({
    method: "POST",
    url: "http://localhost:9000/pages",
    data: JSON.stringify(request),
    contentType: "application/json"
  });
});


Prompt:
Convert this JavaScript to CoffeeScript.
```javascript
var getCurrentTabUrl;

getCurrentTabUrl = function(callback) {
  // Query filter to be passed to chrome.tabs.query - see
  // https://developer.chrome.com/extensions/tabs#method-query
  return chrome.tabs.query({
    active: true,
    currentWindow: true
  }, function(tabs) {
    var url;
    url = tabs[0].url;
    console.assert(typeof url === 'string', 'tab.url should be a string');
    return callback(url);
  });
};

document.addEventListener('DOMContentLoaded', function() {
  // make page DEFAULT_PAGE_WIDTH wide
  chrome.windows.update(chrome.windows.WINDOW_ID_CURRENT, {
    width: 970
  });
  // load scripts into page
  return chrome.tabs.executeScript(null, {
    file: "vendor/jquery-2.1.4.js"
  }, function() {
    return chrome.tabs.executeScript(null, {
      file: "vendor/underscore-min.js"
    }, function() {
      return chrome.tabs.executeScript(null, {
        file: "reader.js"
      });
    });
  });
});

$('.output').text("loading...");

chrome.extension.onMessage.addListener(function(request, sender, response) {
  $('#url').val(request.url);
  $('.output').text(JSON.stringify(request, null, 2));
  return $.ajax({
    method: "POST",
    url: "http://localhost:9000/pages",
    data: JSON.stringify(request),
    contentType: "application/json"
  });
});
```

Response:
getCurrentTabUrl = (callback) ->
  # Query filter to be passed to chrome.tabs.query - see
  # https://developer.chrome.com/extensions/tabs#method-query
  chrome.tabs.query {active: true, currentWindow: true}, (tabs) ->
    url = tabs[0].url
    console.assert(typeof url == 'string', 'tab.url should be a string')
    callback(url)

document.addEventListener 'DOMContentLoaded', ->
  # make page DEFAULT_PAGE_WIDTH wide
  chrome.windows.update(chrome.windows.WINDOW_ID_CURRENT, {width: 970})

  # load scripts into page
  chrome.tabs.executeScript null, { file: "vendor/jquery-2.1.4.js" }, ->
    chrome.tabs.executeScript null, { file: "vendor/underscore-min.js" }, ->
      chrome.tabs.executeScript null, { file: "reader.js" }

$('.output').text("loading...")

chrome.extension.onMessage.addListener (request, sender, response) ->
  $('#url').val(request.url)
  $('.output').text(JSON.stringify(request, null, 2))
  $.ajax {
    method: "POST",
    url: "http://localhost:9000/pages",
    data: JSON.stringify(request),
    contentType: "application/json"
  }


Prompt:
getCurrentTabUrl = (callback) ->
  # Query filter to be passed to chrome.tabs.query - see
  # https://developer.chrome.com/extensions/tabs#method-query
  chrome.tabs.query {active: true, currentWindow: true}, (tabs) ->
    url = tabs[0].url
    console.assert(typeof url == 'string', 'tab.url should be a string')
    callback(url)

document.addEventListener 'DOMContentLoaded', ->
  # make page DEFAULT_PAGE_WIDTH wide
  chrome.windows.update(chrome.windows.WINDOW_ID_CURRENT, {width: 970})

  # load scripts into page
  chrome.tabs.executeScript null, { file: "vendor/jquery-2.1.4.js" }, ->

Response:
chrome.tabs.executeScript null, { file: "vendor/underscore-min.js" }, ->
      chrome.tabs.executeScript null, { file: "reader.js" }

$('.output').text("loading...")

chrome.extension.onMessage.addListener (request, sender, response) ->
  $('#url').val(request.url)
  $('.output').text(JSON.stringify(request, null, 2))
  $.ajax {
    method: "POST",
    url: "http://localhost:9000/pages",
    data: JSON.stringify(request),
    contentType: "application/json"
  }


Response:
"use strict"
Beautifier = require('./beautifier')

Checker = null
cliConfig = null
checker = null

module.exports = class JSCSFixer extends Beautifier
  name: "JSCS Fixer"
  link: "https://github.com/jscs-dev/node-jscs/"

  options: {
    JavaScript: false
  }

  beautify: (text, language, options) ->
    @verbose("JSCS Fixer language #{language}")
    return new @Promise((resolve, reject) =>
      try
        if !checker?
          cliConfig = require 'jscs/lib/cli-config'
          Checker = require 'jscs'
          checker = new Checker()
          checker.registerDefaultRules()
        editor = atom.workspace.getActiveTextEditor()
        path = if editor? then editor.getPath() else undefined
        config = if path? then cliConfig.load(undefined, atom.project.relativizePath(path)[0]) else undefined
        if !config?
          throw new Error("No JSCS config found.")
        checker.configure(config)
        result = checker.fixString(text, path)
        if result.errors.getErrorCount() > 0
          @error(result.errors.getErrorList().reduce((res, err) ->
            "#{res}<br> Line #{err.line}: #{err.message}"
          , "JSCS Fixer error:"))

        resolve result.output

      catch err
        @error("JSCS Fixer error: #{err}")
        reject(err)

    )


Prompt:
Convert this CoffeeScript to JavaScript.
```coffeescript
"use strict"
Beautifier = require('./beautifier')

Checker = null
cliConfig = null
checker = null

module.exports = class JSCSFixer extends Beautifier
  name: "JSCS Fixer"
  link: "https://github.com/jscs-dev/node-jscs/"

  options: {
    JavaScript: false
  }

  beautify: (text, language, options) ->
    @verbose("JSCS Fixer language #{language}")
    return new @Promise((resolve, reject) =>
      try
        if !checker?
          cliConfig = require 'jscs/lib/cli-config'
          Checker = require 'jscs'
          checker = new Checker()
          checker.registerDefaultRules()
        editor = atom.workspace.getActiveTextEditor()
        path = if editor? then editor.getPath() else undefined
        config = if path? then cliConfig.load(undefined, atom.project.relativizePath(path)[0]) else undefined
        if !config?
          throw new Error("No JSCS config found.")
        checker.configure(config)
        result = checker.fixString(text, path)
        if result.errors.getErrorCount() > 0
          @error(result.errors.getErrorList().reduce((res, err) ->
            "#{res}<br> Line #{err.line}: #{err.message}"
          , "JSCS Fixer error:"))

        resolve result.output

      catch err
        @error("JSCS Fixer error: #{err}")
        reject(err)

    )
```

Response:
"use strict";
var Beautifier, Checker, JSCSFixer, checker, cliConfig;

Beautifier = require('./beautifier');

Checker = null;

cliConfig = null;

checker = null;

module.exports = JSCSFixer = (function() {
  class JSCSFixer extends Beautifier {
    beautify(text, language, options) {
      this.verbose(`JSCS Fixer language ${language}`);
      return new this.Promise((resolve, reject) => {
        var config, editor, err, path, result;
        try {
          if (checker == null) {
            cliConfig = require('jscs/lib/cli-config');
            Checker = require('jscs');
            checker = new Checker();
            checker.registerDefaultRules();
          }
          editor = atom.workspace.getActiveTextEditor();
          path = editor != null ? editor.getPath() : void 0;
          config = path != null ? cliConfig.load(void 0, atom.project.relativizePath(path)[0]) : void 0;
          if (config == null) {
            throw new Error("No JSCS config found.");
          }
          checker.configure(config);
          result = checker.fixString(text, path);
          if (result.errors.getErrorCount() > 0) {
            this.error(result.errors.getErrorList().reduce(function(res, err) {
              return `${res}<br> Line ${err.line}: ${err.message}`;
            }, "JSCS Fixer error:"));
          }
          return resolve(result.output);
        } catch (error) {
          err = error;
          this.error(`JSCS Fixer error: ${err}`);
          return reject(err);
        }
      });
    }

  };

  JSCSFixer.prototype.name = "JSCS Fixer";

  JSCSFixer.prototype.link = "https://github.com/jscs-dev/node-jscs/";

  JSCSFixer.prototype.options = {
    JavaScript: false
  };

  return JSCSFixer;

}).call(this);


Prompt:
Convert this JavaScript to CoffeeScript.
```javascript
"use strict";
var Beautifier, Checker, JSCSFixer, checker, cliConfig;

Beautifier = require('./beautifier');

Checker = null;

cliConfig = null;

checker = null;

module.exports = JSCSFixer = (function() {
  class JSCSFixer extends Beautifier {
    beautify(text, language, options) {
      this.verbose(`JSCS Fixer language ${language}`);
      return new this.Promise((resolve, reject) => {
        var config, editor, err, path, result;
        try {
          if (checker == null) {
            cliConfig = require('jscs/lib/cli-config');
            Checker = require('jscs');
            checker = new Checker();
            checker.registerDefaultRules();
          }
          editor = atom.workspace.getActiveTextEditor();
          path = editor != null ? editor.getPath() : void 0;
          config = path != null ? cliConfig.load(void 0, atom.project.relativizePath(path)[0]) : void 0;
          if (config == null) {
            throw new Error("No JSCS config found.");
          }
          checker.configure(config);
          result = checker.fixString(text, path);
          if (result.errors.getErrorCount() > 0) {
            this.error(result.errors.getErrorList().reduce(function(res, err) {
              return `${res}<br> Line ${err.line}: ${err.message}`;
            }, "JSCS Fixer error:"));
          }
          return resolve(result.output);
        } catch (error) {
          err = error;
          this.error(`JSCS Fixer error: ${err}`);
          return reject(err);
        }
      });
    }

  };

  JSCSFixer.prototype.name = "JSCS Fixer";

  JSCSFixer.prototype.link = "https://github.com/jscs-dev/node-jscs/";

  JSCSFixer.prototype.options = {
    JavaScript: false
  };

  return JSCSFixer;

}).call(this);
```

Response:
"use strict"
Beautifier = require('./beautifier')

Checker = null
cliConfig = null
checker = null

module.exports = class JSCSFixer extends Beautifier
  name: "JSCS Fixer"
  link: "https://github.com/jscs-dev/node-jscs/"

  options: {
    JavaScript: false
  }

  beautify: (text, language, options) ->
    @verbose("JSCS Fixer language #{language}")
    return new @Promise((resolve, reject) =>
      try
        if !checker?
          cliConfig = require 'jscs/lib/cli-config'
          Checker = require 'jscs'
          checker = new Checker()
          checker.registerDefaultRules()
        editor = atom.workspace.getActiveTextEditor()
        path = if editor? then editor.getPath() else undefined
        config = if path? then cliConfig.load(undefined, atom.project.relativizePath(path)[0]) else undefined
        if !config?
          throw new Error("No JSCS config found.")
        checker.configure(config)
        result = checker.fixString(text, path)
        if result.errors.getErrorCount() > 0
          @error(result.errors.getErrorList().reduce((res, err) ->
            "#{res}<br> Line #{err.line}: #{err.message}"
          , "JSCS Fixer error:"))

        resolve result.output

      catch err
        @error("JSCS Fixer error: #{err}")
        reject(err)

    )


Prompt:
"use strict"
Beautifier = require('./beautifier')

Checker = null
cliConfig = null
checker = null

module.exports = class JSCSFixer extends Beautifier
  name: "JSCS Fixer"
  link: "https://github.com/jscs-dev/node-jscs/"

  options: {
    JavaScript: false
  }

  beautify: (text, language, options) ->
    @verbose("JSCS Fixer language #{language}")
    return new @Promise((resolve, reject) =>
      try
        if !checker?
          cliConfig = require 'jscs/lib/cli-config'

Response:
Checker = require 'jscs'
          checker = new Checker()
          checker.registerDefaultRules()
        editor = atom.workspace.getActiveTextEditor()
        path = if editor? then editor.getPath() else undefined
        config = if path? then cliConfig.load(undefined, atom.project.relativizePath(path)[0]) else undefined
        if !config?
          throw new Error("No JSCS config found.")
        checker.configure(config)
        result = checker.fixString(text, path)
        if result.errors.getErrorCount() > 0
          @error(result.errors.getErrorList().reduce((res, err) ->
            "#{res}<br> Line #{err.line}: #{err.message}"
          , "JSCS Fixer error:"))

        resolve result.output

      catch err
        @error("JSCS Fixer error: #{err}")
        reject(err)

    )


Response:
((root, factory) ->
  if typeof exports is "object"
    # CommonJS
    factory exports
  else if typeof define is "function" and define.amd
    # AMD. Register as an anonymous module.
    define ["exports"], factory
  else
    # Browser globals
    factory root
  return
) this, (exports) ->
  getTransitionEvent = ->
    el = document.createElement('fakeelement')
    transitions =
      'WebkitAnimation': 'webkitAnimationEnd',
      'OAnimation': 'oAnimationEnd',
      'msAnimation': 'MSAnimationEnd',
      'MozAnimation': 'mozAnimationEnd'
      'animation' : 'animationend'

    for key, val of transitions
      return val if el.style[key]?

  transitionEvent = getTransitionEvent()

  class PleaseWait
    @_defaultOptions:
      backgroundColor: null
      logo: null
      loadingHtml: null
      template: """

      """


Prompt:
Convert this CoffeeScript to JavaScript.
```coffeescript
((root, factory) ->
  if typeof exports is "object"
    # CommonJS
    factory exports
  else if typeof define is "function" and define.amd
    # AMD. Register as an anonymous module.
    define ["exports"], factory
  else
    # Browser globals
    factory root
  return
) this, (exports) ->
  getTransitionEvent = ->
    el = document.createElement('fakeelement')
    transitions =
      'WebkitAnimation': 'webkitAnimationEnd',
      'OAnimation': 'oAnimationEnd',
      'msAnimation': 'MSAnimationEnd',
      'MozAnimation': 'mozAnimationEnd'
      'animation' : 'animationend'

    for key, val of transitions
      return val if el.style[key]?

  transitionEvent = getTransitionEvent()

  class PleaseWait
    @_defaultOptions:
      backgroundColor: null
      logo: null
      loadingHtml: null
      template: """
        <div class='pg-loading-inner'>
          <div class='pg-loading-center-outer'>
            <div class='pg-loading-center-middle'>
              <h1 class='pg-loading-logo-header'>
                <img class='pg-loading-logo'></img>
              </h1>
              <div class='pg-loading-html'>
              </div>
            </div>
          </div>
        </div>
      """
```

Response:
(function(root, factory) {
  if (typeof exports === "object") {
    // CommonJS
    factory(exports);
  } else if (typeof define === "function" && define.amd) {
    // AMD. Register as an anonymous module.
    define(["exports"], factory);
  } else {
    // Browser globals
    factory(root);
  }
})(this, function(exports) {
  var PleaseWait, getTransitionEvent, transitionEvent;
  getTransitionEvent = function() {
    var el, key, transitions, val;
    el = document.createElement('fakeelement');
    transitions = {
      'WebkitAnimation': 'webkitAnimationEnd',
      'OAnimation': 'oAnimationEnd',
      'msAnimation': 'MSAnimationEnd',
      'MozAnimation': 'mozAnimationEnd',
      'animation': 'animationend'
    };
    for (key in transitions) {
      val = transitions[key];
      if (el.style[key] != null) {
        return val;
      }
    }
  };
  transitionEvent = getTransitionEvent();
  return PleaseWait = (function() {
    class PleaseWait {};

    PleaseWait._defaultOptions = {
      backgroundColor: null,
      logo: null,
      loadingHtml: null,
      template: `

`
    };

    return PleaseWait;

  }).call(this);
});


Prompt:
Convert this JavaScript to CoffeeScript.
```javascript
(function(root, factory) {
  if (typeof exports === "object") {
    // CommonJS
    factory(exports);
  } else if (typeof define === "function" && define.amd) {
    // AMD. Register as an anonymous module.
    define(["exports"], factory);
  } else {
    // Browser globals
    factory(root);
  }
})(this, function(exports) {
  var PleaseWait, getTransitionEvent, transitionEvent;
  getTransitionEvent = function() {
    var el, key, transitions, val;
    el = document.createElement('fakeelement');
    transitions = {
      'WebkitAnimation': 'webkitAnimationEnd',
      'OAnimation': 'oAnimationEnd',
      'msAnimation': 'MSAnimationEnd',
      'MozAnimation': 'mozAnimationEnd',
      'animation': 'animationend'
    };
    for (key in transitions) {
      val = transitions[key];
      if (el.style[key] != null) {
        return val;
      }
    }
  };
  transitionEvent = getTransitionEvent();
  return PleaseWait = (function() {
    class PleaseWait {};

    PleaseWait._defaultOptions = {
      backgroundColor: null,
      logo: null,
      loadingHtml: null,
      template: `<div class='pg-loading-inner'>
  <div class='pg-loading-center-outer'>
    <div class='pg-loading-center-middle'>
      <h1 class='pg-loading-logo-header'>
        <img class='pg-loading-logo'></img>
      </h1>
      <div class='pg-loading-html'>
      </div>
    </div>
  </div>
</div>`
    };

    return PleaseWait;

  }).call(this);
});
```

Response:
((root, factory) ->
  if typeof exports is "object"
    # CommonJS
    factory exports
  else if typeof define is "function" and define.amd
    # AMD. Register as an anonymous module.
    define ["exports"], factory
  else
    # Browser globals
    factory root
  return
) this, (exports) ->
  getTransitionEvent = ->
    el = document.createElement('fakeelement')
    transitions =
      'WebkitAnimation': 'webkitAnimationEnd',
      'OAnimation': 'oAnimationEnd',
      'msAnimation': 'MSAnimationEnd',
      'MozAnimation': 'mozAnimationEnd'
      'animation' : 'animationend'

    for key, val of transitions
      return val if el.style[key]?

  transitionEvent = getTransitionEvent()

  class PleaseWait
    @_defaultOptions:
      backgroundColor: null
      logo: null
      loadingHtml: null
      template: """

      """


Prompt:
((root, factory) ->
  if typeof exports is "object"
    # CommonJS
    factory exports
  else if typeof define is "function" and define.amd
    # AMD. Register as an anonymous module.
    define ["exports"], factory
  else
    # Browser globals
    factory root
  return
) this, (exports) ->
  getTransitionEvent = ->
    el = document.createElement('fakeelement')
    transitions =
      'WebkitAnimation': 'webkitAnimationEnd',
      'OAnimation': 'oAnimationEnd',
      'msAnimation': 'MSAnimationEnd',
      'MozAnimation': 'mozAnimationEnd'
      'animation' : 'animationend'

    for key, val of transitions

Response:
return val if el.style[key]?

  transitionEvent = getTransitionEvent()

  class PleaseWait
    @_defaultOptions:
      backgroundColor: null
      logo: null
      loadingHtml: null
      template: """

      """


Response:
constructor: (options) ->
      defaultOptions = @constructor._defaultOptions
      @options = {}

      # Set initial options, merging given options with the defaults
      for k, v of defaultOptions
        @options[k] = if options[k]? then options[k] else v

      # Create the loading screen element
      @_loadingElem = document.createElement("div")
      # Create an empty array to store the potential list of loading HTML (messages, spinners, etc)
      # we'll be displaying to the screen
      @_loadingHtmlToDisplay = []
      # Add a global class for easy styling
      @_loadingElem.className = "pg-loading-screen"
      # Set the background color of the loading screen, if supplied
      @_loadingElem.style.backgroundColor = @options.backgroundColor if @options.backgroundColor?
      # Initialize the loading screen's HTML with the defined template. The default can be overwritten via options
      @_loadingElem.innerHTML = @options.template
      # Find the element that will contain the loading HTML displayed to the user (typically a spinner/message)
      # This can be changed via updateLoadingHtml
      @_loadingHtmlElem = @_loadingElem.getElementsByClassName("pg-loading-html")[0]
      # Set the initial loading HTML, if supplied
      @_loadingHtmlElem.innerHTML = @options.loadingHtml if @_loadingHtmlElem?
      # Set a flag that lets us know if the transitioning between loading HTML elements is finished.
      # If true, we can transition immediately to a new message/HTML
      @_readyToShowLoadingHtml = false
      # Find the element that displays the loading logo and set the src if supplied
      logoElem = @_loadingElem.getElementsByClassName("pg-loading-logo")[0]
      logoElem.src = @options.logo if logoElem?
      # Add the loading screen to the body
      document.body.appendChild(@_loadingElem)
      # Add the CSS class that will trigger the initial transitions of the logo/loading HTML
      @_loadingElem.className += " pg-loading"

      # Define a listener to look for any new loading HTML that needs to be displayed after the intiial transition finishes
      listener = =>
        @_readyToShowLoadingHtml = true
        if transitionEvent? then @_loadingHtmlElem.removeEventListener(transitionEvent, listener)
        if @_loadingHtmlToDisplay.length > 0 then @_changeLoadingHtml()


Prompt:
Convert this CoffeeScript to JavaScript.
```coffeescript
constructor: (options) ->
      defaultOptions = @constructor._defaultOptions
      @options = {}

      # Set initial options, merging given options with the defaults
      for k, v of defaultOptions
        @options[k] = if options[k]? then options[k] else v

      # Create the loading screen element
      @_loadingElem = document.createElement("div")
      # Create an empty array to store the potential list of loading HTML (messages, spinners, etc)
      # we'll be displaying to the screen
      @_loadingHtmlToDisplay = []
      # Add a global class for easy styling
      @_loadingElem.className = "pg-loading-screen"
      # Set the background color of the loading screen, if supplied
      @_loadingElem.style.backgroundColor = @options.backgroundColor if @options.backgroundColor?
      # Initialize the loading screen's HTML with the defined template. The default can be overwritten via options
      @_loadingElem.innerHTML = @options.template
      # Find the element that will contain the loading HTML displayed to the user (typically a spinner/message)
      # This can be changed via updateLoadingHtml
      @_loadingHtmlElem = @_loadingElem.getElementsByClassName("pg-loading-html")[0]
      # Set the initial loading HTML, if supplied
      @_loadingHtmlElem.innerHTML = @options.loadingHtml if @_loadingHtmlElem?
      # Set a flag that lets us know if the transitioning between loading HTML elements is finished.
      # If true, we can transition immediately to a new message/HTML
      @_readyToShowLoadingHtml = false
      # Find the element that displays the loading logo and set the src if supplied
      logoElem = @_loadingElem.getElementsByClassName("pg-loading-logo")[0]
      logoElem.src = @options.logo if logoElem?
      # Add the loading screen to the body
      document.body.appendChild(@_loadingElem)
      # Add the CSS class that will trigger the initial transitions of the logo/loading HTML
      @_loadingElem.className += " pg-loading"

      # Define a listener to look for any new loading HTML that needs to be displayed after the intiial transition finishes
      listener = =>
        @_readyToShowLoadingHtml = true
        if transitionEvent? then @_loadingHtmlElem.removeEventListener(transitionEvent, listener)
        if @_loadingHtmlToDisplay.length > 0 then @_changeLoadingHtml()
```

Response:
({
  constructor: function(options) {
    var defaultOptions, k, listener, logoElem, v;
    defaultOptions = this.constructor._defaultOptions;
    this.options = {};
// Set initial options, merging given options with the defaults
    for (k in defaultOptions) {
      v = defaultOptions[k];
      this.options[k] = options[k] != null ? options[k] : v;
    }
    // Create the loading screen element
    this._loadingElem = document.createElement("div");
    // Create an empty array to store the potential list of loading HTML (messages, spinners, etc)
    // we'll be displaying to the screen
    this._loadingHtmlToDisplay = [];
    // Add a global class for easy styling
    this._loadingElem.className = "pg-loading-screen";
    if (this.options.backgroundColor != null) {
      // Set the background color of the loading screen, if supplied
      this._loadingElem.style.backgroundColor = this.options.backgroundColor;
    }
    // Initialize the loading screen's HTML with the defined template. The default can be overwritten via options
    this._loadingElem.innerHTML = this.options.template;
    // Find the element that will contain the loading HTML displayed to the user (typically a spinner/message)
    // This can be changed via updateLoadingHtml
    this._loadingHtmlElem = this._loadingElem.getElementsByClassName("pg-loading-html")[0];
    if (this._loadingHtmlElem != null) {
      // Set the initial loading HTML, if supplied
      this._loadingHtmlElem.innerHTML = this.options.loadingHtml;
    }
    // Set a flag that lets us know if the transitioning between loading HTML elements is finished.
    // If true, we can transition immediately to a new message/HTML
    this._readyToShowLoadingHtml = false;
    // Find the element that displays the loading logo and set the src if supplied
    logoElem = this._loadingElem.getElementsByClassName("pg-loading-logo")[0];
    if (logoElem != null) {
      logoElem.src = this.options.logo;
    }
    // Add the loading screen to the body
    document.body.appendChild(this._loadingElem);
    // Add the CSS class that will trigger the initial transitions of the logo/loading HTML
    this._loadingElem.className += " pg-loading";
    // Define a listener to look for any new loading HTML that needs to be displayed after the intiial transition finishes
    return listener = () => {
      this._readyToShowLoadingHtml = true;
      if (typeof transitionEvent !== "undefined" && transitionEvent !== null) {
        this._loadingHtmlElem.removeEventListener(transitionEvent, listener);
      }
      if (this._loadingHtmlToDisplay.length > 0) {
        return this._changeLoadingHtml();
      }
    };
  }
});


Prompt:
Convert this JavaScript to CoffeeScript.
```javascript
({
  constructor: function(options) {
    var defaultOptions, k, listener, logoElem, v;
    defaultOptions = this.constructor._defaultOptions;
    this.options = {};
// Set initial options, merging given options with the defaults
    for (k in defaultOptions) {
      v = defaultOptions[k];
      this.options[k] = options[k] != null ? options[k] : v;
    }
    // Create the loading screen element
    this._loadingElem = document.createElement("div");
    // Create an empty array to store the potential list of loading HTML (messages, spinners, etc)
    // we'll be displaying to the screen
    this._loadingHtmlToDisplay = [];
    // Add a global class for easy styling
    this._loadingElem.className = "pg-loading-screen";
    if (this.options.backgroundColor != null) {
      // Set the background color of the loading screen, if supplied
      this._loadingElem.style.backgroundColor = this.options.backgroundColor;
    }
    // Initialize the loading screen's HTML with the defined template. The default can be overwritten via options
    this._loadingElem.innerHTML = this.options.template;
    // Find the element that will contain the loading HTML displayed to the user (typically a spinner/message)
    // This can be changed via updateLoadingHtml
    this._loadingHtmlElem = this._loadingElem.getElementsByClassName("pg-loading-html")[0];
    if (this._loadingHtmlElem != null) {
      // Set the initial loading HTML, if supplied
      this._loadingHtmlElem.innerHTML = this.options.loadingHtml;
    }
    // Set a flag that lets us know if the transitioning between loading HTML elements is finished.
    // If true, we can transition immediately to a new message/HTML
    this._readyToShowLoadingHtml = false;
    // Find the element that displays the loading logo and set the src if supplied
    logoElem = this._loadingElem.getElementsByClassName("pg-loading-logo")[0];
    if (logoElem != null) {
      logoElem.src = this.options.logo;
    }
    // Add the loading screen to the body
    document.body.appendChild(this._loadingElem);
    // Add the CSS class that will trigger the initial transitions of the logo/loading HTML
    this._loadingElem.className += " pg-loading";
    // Define a listener to look for any new loading HTML that needs to be displayed after the intiial transition finishes
    return listener = () => {
      this._readyToShowLoadingHtml = true;
      if (typeof transitionEvent !== "undefined" && transitionEvent !== null) {
        this._loadingHtmlElem.removeEventListener(transitionEvent, listener);
      }
      if (this._loadingHtmlToDisplay.length > 0) {
        return this._changeLoadingHtml();
      }
    };
  }
});
```

Response:
constructor: (options) ->
      defaultOptions = @constructor._defaultOptions
      @options = {}

      # Set initial options, merging given options with the defaults
      for k, v of defaultOptions
        @options[k] = if options[k]? then options[k] else v

      # Create the loading screen element
      @_loadingElem = document.createElement("div")
      # Create an empty array to store the potential list of loading HTML (messages, spinners, etc)
      # we'll be displaying to the screen
      @_loadingHtmlToDisplay = []
      # Add a global class for easy styling
      @_loadingElem.className = "pg-loading-screen"
      # Set the background color of the loading screen, if supplied
      @_loadingElem.style.backgroundColor = @options.backgroundColor if @options.backgroundColor?
      # Initialize the loading screen's HTML with the defined template. The default can be overwritten via options
      @_loadingElem.innerHTML = @options.template
      # Find the element that will contain the loading HTML displayed to the user (typically a spinner/message)
      # This can be changed via updateLoadingHtml
      @_loadingHtmlElem = @_loadingElem.getElementsByClassName("pg-loading-html")[0]
      # Set the initial loading HTML, if supplied
      @_loadingHtmlElem.innerHTML = @options.loadingHtml if @_loadingHtmlElem?
      # Set a flag that lets us know if the transitioning between loading HTML elements is finished.
      # If true, we can transition immediately to a new message/HTML
      @_readyToShowLoadingHtml = false
      # Find the element that displays the loading logo and set the src if supplied
      logoElem = @_loadingElem.getElementsByClassName("pg-loading-logo")[0]
      logoElem.src = @options.logo if logoElem?
      # Add the loading screen to the body
      document.body.appendChild(@_loadingElem)
      # Add the CSS class that will trigger the initial transitions of the logo/loading HTML
      @_loadingElem.className += " pg-loading"

      # Define a listener to look for any new loading HTML that needs to be displayed after the intiial transition finishes
      listener = =>
        @_readyToShowLoadingHtml = true
        if transitionEvent? then @_loadingHtmlElem.removeEventListener(transitionEvent, listener)
        if @_loadingHtmlToDisplay.length > 0 then @_changeLoadingHtml()


Prompt:
constructor: (options) ->
      defaultOptions = @constructor._defaultOptions
      @options = {}

      # Set initial options, merging given options with the defaults
      for k, v of defaultOptions
        @options[k] = if options[k]? then options[k] else v

      # Create the loading screen element
      @_loadingElem = document.createElement("div")
      # Create an empty array to store the potential list of loading HTML (messages, spinners, etc)
      # we'll be displaying to the screen
      @_loadingHtmlToDisplay = []
      # Add a global class for easy styling
      @_loadingElem.className = "pg-loading-screen"
      # Set the background color of the loading screen, if supplied
      @_loadingElem.style.backgroundColor = @options.backgroundColor if @options.backgroundColor?
      # Initialize the loading screen's HTML with the defined template. The default can be overwritten via options
      @_loadingElem.innerHTML = @options.template
      # Find the element that will contain the loading HTML displayed to the user (typically a spinner/message)

Response:
# This can be changed via updateLoadingHtml
      @_loadingHtmlElem = @_loadingElem.getElementsByClassName("pg-loading-html")[0]
      # Set the initial loading HTML, if supplied
      @_loadingHtmlElem.innerHTML = @options.loadingHtml if @_loadingHtmlElem?
      # Set a flag that lets us know if the transitioning between loading HTML elements is finished.
      # If true, we can transition immediately to a new message/HTML
      @_readyToShowLoadingHtml = false
      # Find the element that displays the loading logo and set the src if supplied
      logoElem = @_loadingElem.getElementsByClassName("pg-loading-logo")[0]
      logoElem.src = @options.logo if logoElem?
      # Add the loading screen to the body
      document.body.appendChild(@_loadingElem)
      # Add the CSS class that will trigger the initial transitions of the logo/loading HTML
      @_loadingElem.className += " pg-loading"

      # Define a listener to look for any new loading HTML that needs to be displayed after the intiial transition finishes
      listener = =>
        @_readyToShowLoadingHtml = true
        if transitionEvent? then @_loadingHtmlElem.removeEventListener(transitionEvent, listener)
        if @_loadingHtmlToDisplay.length > 0 then @_changeLoadingHtml()


Response:
if @_loadingHtmlElem?
        # Detect CSS animation support. If not found, we'll call the listener immediately. Otherwise, we'll wait
        if transitionEvent?
          @_loadingHtmlElem.addEventListener(transitionEvent, listener)
        else
          listener()

        # Define listeners for the transtioning out and in of new loading HTML/messages
        @_loadingHtmlListener = =>
          # New loading HTML has fully transitioned in. We're now ready to show a new message/HTML
          @_readyToShowLoadingHtml = true
          # Remove the CSS class that triggered the fade in animation
          @_loadingHtmlElem.className = @_loadingHtmlElem.className.replace(" pg-loading ", "")
          if transitionEvent? then @_loadingHtmlElem.removeEventListener(transitionEvent, @_loadingHtmlListener)
          # Check if there's still HTML left in the queue to display. If so, let's show it
          if @_loadingHtmlToDisplay.length > 0 then @_changeLoadingHtml()

        @_removingHtmlListener = =>
          # Last loading HTML to display has fully transitioned out. Time to transition the new in
          @_loadingHtmlElem.innerHTML = @_loadingHtmlToDisplay.shift()
          # Add the CSS class to trigger the fade in animation
          @_loadingHtmlElem.className = @_loadingHtmlElem.className.replace(" pg-removing ", " pg-loading ")
          if transitionEvent?
            @_loadingHtmlElem.removeEventListener(transitionEvent, @_removingHtmlListener)
            @_loadingHtmlElem.addEventListener(transitionEvent, @_loadingHtmlListener)
          else
            @_loadingHtmlListener()

    finish: ->
      return unless @_loadingElem?
      # Again, define a listener to run once the loading screen has fully transitioned out
      listener = =>
        # Remove the loading screen from the body
        document.body.removeChild(@_loadingElem)
        # Add a class to the body to signal that the loading screen has finished and the app is ready
        document.body.className += " pg-loaded"
        if transitionEvent? then @_loadingElem.removeEventListener(transitionEvent, listener)
        # Reset the loading screen element since it's no longer attached to the DOM
        @_loadingElem = null


Prompt:
Convert this CoffeeScript to JavaScript.
```coffeescript
if @_loadingHtmlElem?
        # Detect CSS animation support. If not found, we'll call the listener immediately. Otherwise, we'll wait
        if transitionEvent?
          @_loadingHtmlElem.addEventListener(transitionEvent, listener)
        else
          listener()

        # Define listeners for the transtioning out and in of new loading HTML/messages
        @_loadingHtmlListener = =>
          # New loading HTML has fully transitioned in. We're now ready to show a new message/HTML
          @_readyToShowLoadingHtml = true
          # Remove the CSS class that triggered the fade in animation
          @_loadingHtmlElem.className = @_loadingHtmlElem.className.replace(" pg-loading ", "")
          if transitionEvent? then @_loadingHtmlElem.removeEventListener(transitionEvent, @_loadingHtmlListener)
          # Check if there's still HTML left in the queue to display. If so, let's show it
          if @_loadingHtmlToDisplay.length > 0 then @_changeLoadingHtml()

        @_removingHtmlListener = =>
          # Last loading HTML to display has fully transitioned out. Time to transition the new in
          @_loadingHtmlElem.innerHTML = @_loadingHtmlToDisplay.shift()
          # Add the CSS class to trigger the fade in animation
          @_loadingHtmlElem.className = @_loadingHtmlElem.className.replace(" pg-removing ", " pg-loading ")
          if transitionEvent?
            @_loadingHtmlElem.removeEventListener(transitionEvent, @_removingHtmlListener)
            @_loadingHtmlElem.addEventListener(transitionEvent, @_loadingHtmlListener)
          else
            @_loadingHtmlListener()

    finish: ->
      return unless @_loadingElem?
      # Again, define a listener to run once the loading screen has fully transitioned out
      listener = =>
        # Remove the loading screen from the body
        document.body.removeChild(@_loadingElem)
        # Add a class to the body to signal that the loading screen has finished and the app is ready
        document.body.className += " pg-loaded"
        if transitionEvent? then @_loadingElem.removeEventListener(transitionEvent, listener)
        # Reset the loading screen element since it's no longer attached to the DOM
        @_loadingElem = null
```

Response:
if (this._loadingHtmlElem != null) {
  // Detect CSS animation support. If not found, we'll call the listener immediately. Otherwise, we'll wait
  if (typeof transitionEvent !== "undefined" && transitionEvent !== null) {
    this._loadingHtmlElem.addEventListener(transitionEvent, listener);
  } else {
    listener();
  }
  // Define listeners for the transtioning out and in of new loading HTML/messages
  this._loadingHtmlListener = () => {
    // New loading HTML has fully transitioned in. We're now ready to show a new message/HTML
    this._readyToShowLoadingHtml = true;
    // Remove the CSS class that triggered the fade in animation
    this._loadingHtmlElem.className = this._loadingHtmlElem.className.replace(" pg-loading ", "");
    if (typeof transitionEvent !== "undefined" && transitionEvent !== null) {
      this._loadingHtmlElem.removeEventListener(transitionEvent, this._loadingHtmlListener);
    }
    // Check if there's still HTML left in the queue to display. If so, let's show it
    if (this._loadingHtmlToDisplay.length > 0) {
      return this._changeLoadingHtml();
    }
  };
  this._removingHtmlListener = () => {
    // Last loading HTML to display has fully transitioned out. Time to transition the new in
    this._loadingHtmlElem.innerHTML = this._loadingHtmlToDisplay.shift();
    // Add the CSS class to trigger the fade in animation
    this._loadingHtmlElem.className = this._loadingHtmlElem.className.replace(" pg-removing ", " pg-loading ");
    if (typeof transitionEvent !== "undefined" && transitionEvent !== null) {
      this._loadingHtmlElem.removeEventListener(transitionEvent, this._removingHtmlListener);
      return this._loadingHtmlElem.addEventListener(transitionEvent, this._loadingHtmlListener);
    } else {
      return this._loadingHtmlListener();
    }
  };
}

({
  finish: function() {
    var listener;
    if (this._loadingElem == null) {
      return;
    }
    // Again, define a listener to run once the loading screen has fully transitioned out
    return listener = () => {
      // Remove the loading screen from the body
      document.body.removeChild(this._loadingElem);
      // Add a class to the body to signal that the loading screen has finished and the app is ready
      document.body.className += " pg-loaded";
      if (typeof transitionEvent !== "undefined" && transitionEvent !== null) {
        this._loadingElem.removeEventListener(transitionEvent, listener);
      }
      // Reset the loading screen element since it's no longer attached to the DOM
      return this._loadingElem = null;
    };
  }
});


Prompt:
Convert this JavaScript to CoffeeScript.
```javascript
if (this._loadingHtmlElem != null) {
  // Detect CSS animation support. If not found, we'll call the listener immediately. Otherwise, we'll wait
  if (typeof transitionEvent !== "undefined" && transitionEvent !== null) {
    this._loadingHtmlElem.addEventListener(transitionEvent, listener);
  } else {
    listener();
  }
  // Define listeners for the transtioning out and in of new loading HTML/messages
  this._loadingHtmlListener = () => {
    // New loading HTML has fully transitioned in. We're now ready to show a new message/HTML
    this._readyToShowLoadingHtml = true;
    // Remove the CSS class that triggered the fade in animation
    this._loadingHtmlElem.className = this._loadingHtmlElem.className.replace(" pg-loading ", "");
    if (typeof transitionEvent !== "undefined" && transitionEvent !== null) {
      this._loadingHtmlElem.removeEventListener(transitionEvent, this._loadingHtmlListener);
    }
    // Check if there's still HTML left in the queue to display. If so, let's show it
    if (this._loadingHtmlToDisplay.length > 0) {
      return this._changeLoadingHtml();
    }
  };
  this._removingHtmlListener = () => {
    // Last loading HTML to display has fully transitioned out. Time to transition the new in
    this._loadingHtmlElem.innerHTML = this._loadingHtmlToDisplay.shift();
    // Add the CSS class to trigger the fade in animation
    this._loadingHtmlElem.className = this._loadingHtmlElem.className.replace(" pg-removing ", " pg-loading ");
    if (typeof transitionEvent !== "undefined" && transitionEvent !== null) {
      this._loadingHtmlElem.removeEventListener(transitionEvent, this._removingHtmlListener);
      return this._loadingHtmlElem.addEventListener(transitionEvent, this._loadingHtmlListener);
    } else {
      return this._loadingHtmlListener();
    }
  };
}

({
  finish: function() {
    var listener;
    if (this._loadingElem == null) {
      return;
    }
    // Again, define a listener to run once the loading screen has fully transitioned out
    return listener = () => {
      // Remove the loading screen from the body
      document.body.removeChild(this._loadingElem);
      // Add a class to the body to signal that the loading screen has finished and the app is ready
      document.body.className += " pg-loaded";
      if (typeof transitionEvent !== "undefined" && transitionEvent !== null) {
        this._loadingElem.removeEventListener(transitionEvent, listener);
      }
      // Reset the loading screen element since it's no longer attached to the DOM
      return this._loadingElem = null;
    };
  }
});
```

Response:
if @_loadingHtmlElem?
        # Detect CSS animation support. If not found, we'll call the listener immediately. Otherwise, we'll wait
        if transitionEvent?
          @_loadingHtmlElem.addEventListener(transitionEvent, listener)
        else
          listener()

        # Define listeners for the transtioning out and in of new loading HTML/messages
        @_loadingHtmlListener = =>
          # New loading HTML has fully transitioned in. We're now ready to show a new message/HTML
          @_readyToShowLoadingHtml = true
          # Remove the CSS class that triggered the fade in animation
          @_loadingHtmlElem.className = @_loadingHtmlElem.className.replace(" pg-loading ", "")
          if transitionEvent? then @_loadingHtmlElem.removeEventListener(transitionEvent, @_loadingHtmlListener)
          # Check if there's still HTML left in the queue to display. If so, let's show it
          if @_loadingHtmlToDisplay.length > 0 then @_changeLoadingHtml()

        @_removingHtmlListener = =>
          # Last loading HTML to display has fully transitioned out. Time to transition the new in
          @_loadingHtmlElem.innerHTML = @_loadingHtmlToDisplay.shift()
          # Add the CSS class to trigger the fade in animation
          @_loadingHtmlElem.className = @_loadingHtmlElem.className.replace(" pg-removing ", " pg-loading ")
          if transitionEvent?
            @_loadingHtmlElem.removeEventListener(transitionEvent, @_removingHtmlListener)
            @_loadingHtmlElem.addEventListener(transitionEvent, @_loadingHtmlListener)
          else
            @_loadingHtmlListener()

    finish: ->
      return unless @_loadingElem?
      # Again, define a listener to run once the loading screen has fully transitioned out
      listener = =>
        # Remove the loading screen from the body
        document.body.removeChild(@_loadingElem)
        # Add a class to the body to signal that the loading screen has finished and the app is ready
        document.body.className += " pg-loaded"
        if transitionEvent? then @_loadingElem.removeEventListener(transitionEvent, listener)
        # Reset the loading screen element since it's no longer attached to the DOM
        @_loadingElem = null


Prompt:
if @_loadingHtmlElem?
        # Detect CSS animation support. If not found, we'll call the listener immediately. Otherwise, we'll wait
        if transitionEvent?
          @_loadingHtmlElem.addEventListener(transitionEvent, listener)
        else
          listener()

        # Define listeners for the transtioning out and in of new loading HTML/messages
        @_loadingHtmlListener = =>
          # New loading HTML has fully transitioned in. We're now ready to show a new message/HTML
          @_readyToShowLoadingHtml = true
          # Remove the CSS class that triggered the fade in animation
          @_loadingHtmlElem.className = @_loadingHtmlElem.className.replace(" pg-loading ", "")
          if transitionEvent? then @_loadingHtmlElem.removeEventListener(transitionEvent, @_loadingHtmlListener)
          # Check if there's still HTML left in the queue to display. If so, let's show it
          if @_loadingHtmlToDisplay.length > 0 then @_changeLoadingHtml()

        @_removingHtmlListener = =>
          # Last loading HTML to display has fully transitioned out. Time to transition the new in

Response:
@_loadingHtmlElem.innerHTML = @_loadingHtmlToDisplay.shift()
          # Add the CSS class to trigger the fade in animation
          @_loadingHtmlElem.className = @_loadingHtmlElem.className.replace(" pg-removing ", " pg-loading ")
          if transitionEvent?
            @_loadingHtmlElem.removeEventListener(transitionEvent, @_removingHtmlListener)
            @_loadingHtmlElem.addEventListener(transitionEvent, @_loadingHtmlListener)
          else
            @_loadingHtmlListener()

    finish: ->
      return unless @_loadingElem?
      # Again, define a listener to run once the loading screen has fully transitioned out
      listener = =>
        # Remove the loading screen from the body
        document.body.removeChild(@_loadingElem)
        # Add a class to the body to signal that the loading screen has finished and the app is ready
        document.body.className += " pg-loaded"
        if transitionEvent? then @_loadingElem.removeEventListener(transitionEvent, listener)
        # Reset the loading screen element since it's no longer attached to the DOM
        @_loadingElem = null


Response:
# Detect CSS animation support. If not found, we'll call the listener immediately. Otherwise, we'll wait
      if transitionEvent?
        # Set a class on the loading screen to trigger a fadeout animation
        @_loadingElem.className += " pg-loaded"
        # When the loading screen is finished fading out, we'll remove it from the DOM
        @_loadingElem.addEventListener(transitionEvent, listener)
      else
        listener()

    updateLoadingHtml: (loadingHtml, immediately=false) ->
      unless @_loadingHtmlElem? then throw new Error("The loading template does not have an element of class 'pg-loading-html'")
      if immediately
        # Ignore any loading HTML that may be queued up. Show this immediately
        @_loadingHtmlToDisplay = [loadingHtml]
        @_readyToShowLoadingHtml = true
      else
        # Add to an array of HTML to display to the user
        @_loadingHtmlToDisplay.push(loadingHtml)
      # If ready, let's display the new loading HTML
      if @_readyToShowLoadingHtml then @_changeLoadingHtml()

    # Private method to immediately change the loading HTML displayed
    _changeLoadingHtml: ->
      @_readyToShowLoadingHtml = false
      # Remove any old event listeners that may still be attached to the DOM
      @_loadingHtmlElem.removeEventListener(transitionEvent, @_loadingHtmlListener)
      @_loadingHtmlElem.removeEventListener(transitionEvent, @_removingHtmlListener)
      # Remove any old CSS transition classes that may still be on the element
      @_loadingHtmlElem.className = @_loadingHtmlElem.className.replace(" pg-loading ", "").replace( " pg-removing ", "")

      if transitionEvent?
        # Add the CSS class that will cause the HTML to fade out
        @_loadingHtmlElem.className += " pg-removing "
        @_loadingHtmlElem.addEventListener(transitionEvent, @_removingHtmlListener)
      else
        @_removingHtmlListener()

  pleaseWait = (options = {}) ->
    new PleaseWait(options)


Prompt:
# Detect CSS animation support. If not found, we'll call the listener immediately. Otherwise, we'll wait
      if transitionEvent?
        # Set a class on the loading screen to trigger a fadeout animation
        @_loadingElem.className += " pg-loaded"
        # When the loading screen is finished fading out, we'll remove it from the DOM
        @_loadingElem.addEventListener(transitionEvent, listener)
      else
        listener()

    updateLoadingHtml: (loadingHtml, immediately=false) ->
      unless @_loadingHtmlElem? then throw new Error("The loading template does not have an element of class 'pg-loading-html'")
      if immediately
        # Ignore any loading HTML that may be queued up. Show this immediately
        @_loadingHtmlToDisplay = [loadingHtml]
        @_readyToShowLoadingHtml = true
      else
        # Add to an array of HTML to display to the user
        @_loadingHtmlToDisplay.push(loadingHtml)
      # If ready, let's display the new loading HTML

Response:
if @_readyToShowLoadingHtml then @_changeLoadingHtml()

    # Private method to immediately change the loading HTML displayed
    _changeLoadingHtml: ->
      @_readyToShowLoadingHtml = false
      # Remove any old event listeners that may still be attached to the DOM
      @_loadingHtmlElem.removeEventListener(transitionEvent, @_loadingHtmlListener)
      @_loadingHtmlElem.removeEventListener(transitionEvent, @_removingHtmlListener)
      # Remove any old CSS transition classes that may still be on the element
      @_loadingHtmlElem.className = @_loadingHtmlElem.className.replace(" pg-loading ", "").replace( " pg-removing ", "")

      if transitionEvent?
        # Add the CSS class that will cause the HTML to fade out
        @_loadingHtmlElem.className += " pg-removing "
        @_loadingHtmlElem.addEventListener(transitionEvent, @_removingHtmlListener)
      else
        @_removingHtmlListener()

  pleaseWait = (options = {}) ->
    new PleaseWait(options)


Response:
# Detect CSS animation support. If not found, we'll call the listener immediately. Otherwise, we'll wait
      if transitionEvent?
        @_loadingHtmlElem.addEventListener(transitionEvent, listener)
      else
        listener()

      # Define listeners for the transtioning out and in of new loading HTML/messages
      @_loadingHtmlListener = =>
        # New loading HTML has fully transitioned in. We're now ready to show a new message/HTML
        @_readyToShowLoadingHtml = true
        # Remove the CSS class that triggered the fade in animation
        @_loadingHtmlElem.className = @_loadingHtmlElem.className.replace(" pg-loading ", "")
        if transitionEvent? then @_loadingHtmlElem.removeEventListener(transitionEvent, @_loadingHtmlListener)
        # Check if there's still HTML left in the queue to display. If so, let's show it
        if @_loadingHtmlToDisplay.length > 0 then @_changeLoadingHtml()

      @_removingHtmlListener = =>
        # Last loading HTML to display has fully transitioned out. Time to transition the new in
        @_loadingHtmlElem.innerHTML = @_loadingHtmlToDisplay.shift()
        # Add the CSS class to trigger the fade in animation
        @_loadingHtmlElem.className = @_loadingHtmlElem.className.replace(" pg-removing ", " pg-loading ")
        if transitionEvent?
          @_loadingHtmlElem.removeEventListener(transitionEvent, @_removingHtmlListener)
          @_loadingHtmlElem.addEventListener(transitionEvent, @_loadingHtmlListener)
        else
          @_loadingHtmlListener()

    finish: ->
      return unless @_loadingElem?
      # Again, define a listener to run once the loading screen has fully transitioned out
      listener = =>
        # Remove the loading screen from the body
        document.body.removeChild(@_loadingElem)
        # Add a class to the body to signal that the loading screen has finished and the app is ready
        document.body.className += " pg-loaded"
        if transitionEvent? then @_loadingElem.removeEventListener(transitionEvent, listener)
        # Reset the loading screen element since it's no longer attached to the DOM
        @_loadingElem = null

      # Detect CSS animation support. If not found, we'll call the listener immediately. Otherwise, we'll wait
      if transitionEvent?
        # Set a class on the loading screen to trigger a fadeout animation
        @_loadingElem.className += " pg-loaded"
        # When the loading screen is finished fading out, we'll remove it from the DOM
        @_loadingElem.addEventListener(transitionEvent, listener)
      else
        listener()


Prompt:
# Detect CSS animation support. If not found, we'll call the listener immediately. Otherwise, we'll wait
      if transitionEvent?
        @_loadingHtmlElem.addEventListener(transitionEvent, listener)
      else
        listener()

      # Define listeners for the transtioning out and in of new loading HTML/messages
      @_loadingHtmlListener = =>
        # New loading HTML has fully transitioned in. We're now ready to show a new message/HTML
        @_readyToShowLoadingHtml = true
        # Remove the CSS class that triggered the fade in animation
        @_loadingHtmlElem.className = @_loadingHtmlElem.className.replace(" pg-loading ", "")
        if transitionEvent? then @_loadingHtmlElem.removeEventListener(transitionEvent, @_loadingHtmlListener)
        # Check if there's still HTML left in the queue to display. If so, let's show it
        if @_loadingHtmlToDisplay.length > 0 then @_changeLoadingHtml()

      @_removingHtmlListener = =>
        # Last loading HTML to display has fully transitioned out. Time to transition the new in
        @_loadingHtmlElem.innerHTML = @_loadingHtmlToDisplay.shift()
        # Add the CSS class to trigger the fade in animation
        @_loadingHtmlElem.className = @_loadingHtmlElem.className.replace(" pg-removing ", " pg-loading ")
        if transitionEvent?
          @_loadingHtmlElem.removeEventListener(transitionEvent, @_removingHtmlListener)

Response:
@_loadingHtmlElem.addEventListener(transitionEvent, @_loadingHtmlListener)
        else
          @_loadingHtmlListener()

    finish: ->
      return unless @_loadingElem?
      # Again, define a listener to run once the loading screen has fully transitioned out
      listener = =>
        # Remove the loading screen from the body
        document.body.removeChild(@_loadingElem)
        # Add a class to the body to signal that the loading screen has finished and the app is ready
        document.body.className += " pg-loaded"
        if transitionEvent? then @_loadingElem.removeEventListener(transitionEvent, listener)
        # Reset the loading screen element since it's no longer attached to the DOM
        @_loadingElem = null

      # Detect CSS animation support. If not found, we'll call the listener immediately. Otherwise, we'll wait
      if transitionEvent?
        # Set a class on the loading screen to trigger a fadeout animation
        @_loadingElem.className += " pg-loaded"
        # When the loading screen is finished fading out, we'll remove it from the DOM
        @_loadingElem.addEventListener(transitionEvent, listener)
      else
        listener()


Response:
updateLoadingHtml: (loadingHtml, immediately=false) ->
      if immediately
        # Ignore any loading HTML that may be queued up. Show this immediately
        @_loadingHtmlToDisplay = [loadingHtml]
        @_readyToShowLoadingHtml = true
      else
        # Add to an array of HTML to display to the user
        @_loadingHtmlToDisplay.push(loadingHtml)
      # If ready, let's display the new loading HTML
      if @_readyToShowLoadingHtml then @_changeLoadingHtml()

    # Private method to immediately change the loading HTML displayed
    _changeLoadingHtml: ->
      @_readyToShowLoadingHtml = false
      # Remove any old event listeners that may still be attached to the DOM
      @_loadingHtmlElem.removeEventListener(transitionEvent, @_loadingHtmlListener)
      @_loadingHtmlElem.removeEventListener(transitionEvent, @_removingHtmlListener)
      # Remove any old CSS transition classes that may still be on the element
      @_loadingHtmlElem.className = @_loadingHtmlElem.className.replace(" pg-loading ", "").replace( " pg-removing ", "")

      if transitionEvent?
        # Add the CSS class that will cause the HTML to fade out
        @_loadingHtmlElem.className += " pg-removing "
        @_loadingHtmlElem.addEventListener(transitionEvent, @_removingHtmlListener)
      else
        @_removingHtmlListener()

  pleaseWait = (options = {}) ->
    new PleaseWait(options)

  exports.pleaseWait = pleaseWait
  return pleaseWait


Prompt:
Convert this CoffeeScript to JavaScript.
```coffeescript
updateLoadingHtml: (loadingHtml, immediately=false) ->
      if immediately
        # Ignore any loading HTML that may be queued up. Show this immediately
        @_loadingHtmlToDisplay = [loadingHtml]
        @_readyToShowLoadingHtml = true
      else
        # Add to an array of HTML to display to the user
        @_loadingHtmlToDisplay.push(loadingHtml)
      # If ready, let's display the new loading HTML
      if @_readyToShowLoadingHtml then @_changeLoadingHtml()

    # Private method to immediately change the loading HTML displayed
    _changeLoadingHtml: ->
      @_readyToShowLoadingHtml = false
      # Remove any old event listeners that may still be attached to the DOM
      @_loadingHtmlElem.removeEventListener(transitionEvent, @_loadingHtmlListener)
      @_loadingHtmlElem.removeEventListener(transitionEvent, @_removingHtmlListener)
      # Remove any old CSS transition classes that may still be on the element
      @_loadingHtmlElem.className = @_loadingHtmlElem.className.replace(" pg-loading ", "").replace( " pg-removing ", "")

      if transitionEvent?
        # Add the CSS class that will cause the HTML to fade out
        @_loadingHtmlElem.className += " pg-removing "
        @_loadingHtmlElem.addEventListener(transitionEvent, @_removingHtmlListener)
      else
        @_removingHtmlListener()

  pleaseWait = (options = {}) ->
    new PleaseWait(options)

  exports.pleaseWait = pleaseWait
  return pleaseWait
```

Response:
var pleaseWait;

({
  updateLoadingHtml: function(loadingHtml, immediately = false) {
    if (immediately) {
      // Ignore any loading HTML that may be queued up. Show this immediately
      this._loadingHtmlToDisplay = [loadingHtml];
      this._readyToShowLoadingHtml = true;
    } else {
      // Add to an array of HTML to display to the user
      this._loadingHtmlToDisplay.push(loadingHtml);
    }
    // If ready, let's display the new loading HTML
    if (this._readyToShowLoadingHtml) {
      return this._changeLoadingHtml();
    }
  },
  // Private method to immediately change the loading HTML displayed
  _changeLoadingHtml: function() {
    this._readyToShowLoadingHtml = false;
    // Remove any old event listeners that may still be attached to the DOM
    this._loadingHtmlElem.removeEventListener(transitionEvent, this._loadingHtmlListener);
    this._loadingHtmlElem.removeEventListener(transitionEvent, this._removingHtmlListener);
    // Remove any old CSS transition classes that may still be on the element
    this._loadingHtmlElem.className = this._loadingHtmlElem.className.replace(" pg-loading ", "").replace(" pg-removing ", "");
    if (typeof transitionEvent !== "undefined" && transitionEvent !== null) {
      // Add the CSS class that will cause the HTML to fade out
      this._loadingHtmlElem.className += " pg-removing ";
      return this._loadingHtmlElem.addEventListener(transitionEvent, this._removingHtmlListener);
    } else {
      return this._removingHtmlListener();
    }
  }
});

pleaseWait = function(options = {}) {
  return new PleaseWait(options);
};

exports.pleaseWait = pleaseWait;

return pleaseWait;


Prompt:
Convert this JavaScript to CoffeeScript.
```javascript
var pleaseWait;

({
  updateLoadingHtml: function(loadingHtml, immediately = false) {
    if (immediately) {
      // Ignore any loading HTML that may be queued up. Show this immediately
      this._loadingHtmlToDisplay = [loadingHtml];
      this._readyToShowLoadingHtml = true;
    } else {
      // Add to an array of HTML to display to the user
      this._loadingHtmlToDisplay.push(loadingHtml);
    }
    // If ready, let's display the new loading HTML
    if (this._readyToShowLoadingHtml) {
      return this._changeLoadingHtml();
    }
  },
  // Private method to immediately change the loading HTML displayed
  _changeLoadingHtml: function() {
    this._readyToShowLoadingHtml = false;
    // Remove any old event listeners that may still be attached to the DOM
    this._loadingHtmlElem.removeEventListener(transitionEvent, this._loadingHtmlListener);
    this._loadingHtmlElem.removeEventListener(transitionEvent, this._removingHtmlListener);
    // Remove any old CSS transition classes that may still be on the element
    this._loadingHtmlElem.className = this._loadingHtmlElem.className.replace(" pg-loading ", "").replace(" pg-removing ", "");
    if (typeof transitionEvent !== "undefined" && transitionEvent !== null) {
      // Add the CSS class that will cause the HTML to fade out
      this._loadingHtmlElem.className += " pg-removing ";
      return this._loadingHtmlElem.addEventListener(transitionEvent, this._removingHtmlListener);
    } else {
      return this._removingHtmlListener();
    }
  }
});

pleaseWait = function(options = {}) {
  return new PleaseWait(options);
};

exports.pleaseWait = pleaseWait;

return pleaseWait;
```

Response:
updateLoadingHtml: (loadingHtml, immediately=false) ->
      if immediately
        # Ignore any loading HTML that may be queued up. Show this immediately
        @_loadingHtmlToDisplay = [loadingHtml]
        @_readyToShowLoadingHtml = true
      else
        # Add to an array of HTML to display to the user
        @_loadingHtmlToDisplay.push(loadingHtml)
      # If ready, let's display the new loading HTML
      if @_readyToShowLoadingHtml then @_changeLoadingHtml()

    # Private method to immediately change the loading HTML displayed
    _changeLoadingHtml: ->
      @_readyToShowLoadingHtml = false
      # Remove any old event listeners that may still be attached to the DOM
      @_loadingHtmlElem.removeEventListener(transitionEvent, @_loadingHtmlListener)
      @_loadingHtmlElem.removeEventListener(transitionEvent, @_removingHtmlListener)
      # Remove any old CSS transition classes that may still be on the element
      @_loadingHtmlElem.className = @_loadingHtmlElem.className.replace(" pg-loading ", "").replace( " pg-removing ", "")

      if transitionEvent?
        # Add the CSS class that will cause the HTML to fade out
        @_loadingHtmlElem.className += " pg-removing "
        @_loadingHtmlElem.addEventListener(transitionEvent, @_removingHtmlListener)
      else
        @_removingHtmlListener()

  pleaseWait = (options = {}) ->
    new PleaseWait(options)

  exports.pleaseWait = pleaseWait
  return pleaseWait


Prompt:
updateLoadingHtml: (loadingHtml, immediately=false) ->
      if immediately
        # Ignore any loading HTML that may be queued up. Show this immediately
        @_loadingHtmlToDisplay = [loadingHtml]
        @_readyToShowLoadingHtml = true
      else
        # Add to an array of HTML to display to the user
        @_loadingHtmlToDisplay.push(loadingHtml)
      # If ready, let's display the new loading HTML
      if @_readyToShowLoadingHtml then @_changeLoadingHtml()

    # Private method to immediately change the loading HTML displayed
    _changeLoadingHtml: ->
      @_readyToShowLoadingHtml = false
      # Remove any old event listeners that may still be attached to the DOM
      @_loadingHtmlElem.removeEventListener(transitionEvent, @_loadingHtmlListener)

Response:
@_loadingHtmlElem.removeEventListener(transitionEvent, @_removingHtmlListener)
      # Remove any old CSS transition classes that may still be on the element
      @_loadingHtmlElem.className = @_loadingHtmlElem.className.replace(" pg-loading ", "").replace( " pg-removing ", "")

      if transitionEvent?
        # Add the CSS class that will cause the HTML to fade out
        @_loadingHtmlElem.className += " pg-removing "
        @_loadingHtmlElem.addEventListener(transitionEvent, @_removingHtmlListener)
      else
        @_removingHtmlListener()

  pleaseWait = (options = {}) ->
    new PleaseWait(options)

  exports.pleaseWait = pleaseWait
  return pleaseWait


Response:
constructor: (options) ->
      defaultOptions = @constructor._defaultOptions
      @options = {}

      # Set initial options, merging given options with the defaults
      for k, v of defaultOptions
        @options[k] = if options[k]? then options[k] else v

      # Create the loading screen element
      @_loadingElem = document.createElement("div")
      # Create an empty array to store the potential list of loading HTML (messages, spinners, etc)
      # we'll be displaying to the screen
      @_loadingHtmlToDisplay = []
      # Add a global class for easy styling
      @_loadingElem.className = "pg-loading-screen"
      # Set the background color of the loading screen, if supplied
      @_loadingElem.style.backgroundColor = @options.backgroundColor if @options.backgroundColor?
      # Initialize the loading screen's HTML with the defined template. The default can be overwritten via options
      @_loadingElem.innerHTML = @options.template
      # Find the element that will contain the loading HTML displayed to the user (typically a spinner/message)
      # This can be changed via updateLoadingHtml
      @_loadingHtmlElem = @_loadingElem.getElementsByClassName("pg-loading-html")[0]
      # Set the initial loading HTML, if supplied
      @_loadingHtmlElem.innerHTML = @options.loadingHtml if @_loadingHtmlElem?
      # Set a flag that lets us know if the transitioning between loading HTML elements is finished.
      # If true, we can transition immediately to a new message/HTML
      @_readyToShowLoadingHtml = false
      # Find the element that displays the loading logo and set the src if supplied
      logoElem = @_loadingElem.getElementsByClassName("pg-loading-logo")[0]
      logoElem.src = @options.logo if logoElem?
      # Add the loading screen to the body
      document.body.appendChild(@_loadingElem)
      # Add the CSS class that will trigger the initial transitions of the logo/loading HTML
      @_loadingElem.className += " pg-loading"
      # Define a listener to look for any new loading HTML that needs to be displayed after the intiial transition finishes
      listener = =>
        @_readyToShowLoadingHtml = true
        if transitionEvent? then @_loadingHtmlElem.removeEventListener(transitionEvent, listener)
        if @_loadingHtmlToDisplay.length > 0 then @_changeLoadingHtml()
      # Detect CSS animation support. If not found, we'll call the listener immediately. Otherwise, we'll wait
      if transitionEvent?
        @_loadingHtmlElem.addEventListener(transitionEvent, listener)
      else
        listener()


Prompt:
Convert this CoffeeScript to JavaScript.
```coffeescript
constructor: (options) ->
      defaultOptions = @constructor._defaultOptions
      @options = {}

      # Set initial options, merging given options with the defaults
      for k, v of defaultOptions
        @options[k] = if options[k]? then options[k] else v

      # Create the loading screen element
      @_loadingElem = document.createElement("div")
      # Create an empty array to store the potential list of loading HTML (messages, spinners, etc)
      # we'll be displaying to the screen
      @_loadingHtmlToDisplay = []
      # Add a global class for easy styling
      @_loadingElem.className = "pg-loading-screen"
      # Set the background color of the loading screen, if supplied
      @_loadingElem.style.backgroundColor = @options.backgroundColor if @options.backgroundColor?
      # Initialize the loading screen's HTML with the defined template. The default can be overwritten via options
      @_loadingElem.innerHTML = @options.template
      # Find the element that will contain the loading HTML displayed to the user (typically a spinner/message)
      # This can be changed via updateLoadingHtml
      @_loadingHtmlElem = @_loadingElem.getElementsByClassName("pg-loading-html")[0]
      # Set the initial loading HTML, if supplied
      @_loadingHtmlElem.innerHTML = @options.loadingHtml if @_loadingHtmlElem?
      # Set a flag that lets us know if the transitioning between loading HTML elements is finished.
      # If true, we can transition immediately to a new message/HTML
      @_readyToShowLoadingHtml = false
      # Find the element that displays the loading logo and set the src if supplied
      logoElem = @_loadingElem.getElementsByClassName("pg-loading-logo")[0]
      logoElem.src = @options.logo if logoElem?
      # Add the loading screen to the body
      document.body.appendChild(@_loadingElem)
      # Add the CSS class that will trigger the initial transitions of the logo/loading HTML
      @_loadingElem.className += " pg-loading"
      # Define a listener to look for any new loading HTML that needs to be displayed after the intiial transition finishes
      listener = =>
        @_readyToShowLoadingHtml = true
        if transitionEvent? then @_loadingHtmlElem.removeEventListener(transitionEvent, listener)
        if @_loadingHtmlToDisplay.length > 0 then @_changeLoadingHtml()
      # Detect CSS animation support. If not found, we'll call the listener immediately. Otherwise, we'll wait
      if transitionEvent?
        @_loadingHtmlElem.addEventListener(transitionEvent, listener)
      else
        listener()
```

Response:
({
  constructor: function(options) {
    var defaultOptions, k, listener, logoElem, v;
    defaultOptions = this.constructor._defaultOptions;
    this.options = {};
// Set initial options, merging given options with the defaults
    for (k in defaultOptions) {
      v = defaultOptions[k];
      this.options[k] = options[k] != null ? options[k] : v;
    }
    // Create the loading screen element
    this._loadingElem = document.createElement("div");
    // Create an empty array to store the potential list of loading HTML (messages, spinners, etc)
    // we'll be displaying to the screen
    this._loadingHtmlToDisplay = [];
    // Add a global class for easy styling
    this._loadingElem.className = "pg-loading-screen";
    if (this.options.backgroundColor != null) {
      // Set the background color of the loading screen, if supplied
      this._loadingElem.style.backgroundColor = this.options.backgroundColor;
    }
    // Initialize the loading screen's HTML with the defined template. The default can be overwritten via options
    this._loadingElem.innerHTML = this.options.template;
    // Find the element that will contain the loading HTML displayed to the user (typically a spinner/message)
    // This can be changed via updateLoadingHtml
    this._loadingHtmlElem = this._loadingElem.getElementsByClassName("pg-loading-html")[0];
    if (this._loadingHtmlElem != null) {
      // Set the initial loading HTML, if supplied
      this._loadingHtmlElem.innerHTML = this.options.loadingHtml;
    }
    // Set a flag that lets us know if the transitioning between loading HTML elements is finished.
    // If true, we can transition immediately to a new message/HTML
    this._readyToShowLoadingHtml = false;
    // Find the element that displays the loading logo and set the src if supplied
    logoElem = this._loadingElem.getElementsByClassName("pg-loading-logo")[0];
    if (logoElem != null) {
      logoElem.src = this.options.logo;
    }
    // Add the loading screen to the body
    document.body.appendChild(this._loadingElem);
    // Add the CSS class that will trigger the initial transitions of the logo/loading HTML
    this._loadingElem.className += " pg-loading";
    // Define a listener to look for any new loading HTML that needs to be displayed after the intiial transition finishes
    listener = () => {
      this._readyToShowLoadingHtml = true;
      if (typeof transitionEvent !== "undefined" && transitionEvent !== null) {
        this._loadingHtmlElem.removeEventListener(transitionEvent, listener);
      }
      if (this._loadingHtmlToDisplay.length > 0) {
        return this._changeLoadingHtml();
      }
    };
    // Detect CSS animation support. If not found, we'll call the listener immediately. Otherwise, we'll wait
    if (typeof transitionEvent !== "undefined" && transitionEvent !== null) {
      return this._loadingHtmlElem.addEventListener(transitionEvent, listener);
    } else {
      return listener();
    }
  }
});


Prompt:
Convert this JavaScript to CoffeeScript.
```javascript
({
  constructor: function(options) {
    var defaultOptions, k, listener, logoElem, v;
    defaultOptions = this.constructor._defaultOptions;
    this.options = {};
// Set initial options, merging given options with the defaults
    for (k in defaultOptions) {
      v = defaultOptions[k];
      this.options[k] = options[k] != null ? options[k] : v;
    }
    // Create the loading screen element
    this._loadingElem = document.createElement("div");
    // Create an empty array to store the potential list of loading HTML (messages, spinners, etc)
    // we'll be displaying to the screen
    this._loadingHtmlToDisplay = [];
    // Add a global class for easy styling
    this._loadingElem.className = "pg-loading-screen";
    if (this.options.backgroundColor != null) {
      // Set the background color of the loading screen, if supplied
      this._loadingElem.style.backgroundColor = this.options.backgroundColor;
    }
    // Initialize the loading screen's HTML with the defined template. The default can be overwritten via options
    this._loadingElem.innerHTML = this.options.template;
    // Find the element that will contain the loading HTML displayed to the user (typically a spinner/message)
    // This can be changed via updateLoadingHtml
    this._loadingHtmlElem = this._loadingElem.getElementsByClassName("pg-loading-html")[0];
    if (this._loadingHtmlElem != null) {
      // Set the initial loading HTML, if supplied
      this._loadingHtmlElem.innerHTML = this.options.loadingHtml;
    }
    // Set a flag that lets us know if the transitioning between loading HTML elements is finished.
    // If true, we can transition immediately to a new message/HTML
    this._readyToShowLoadingHtml = false;
    // Find the element that displays the loading logo and set the src if supplied
    logoElem = this._loadingElem.getElementsByClassName("pg-loading-logo")[0];
    if (logoElem != null) {
      logoElem.src = this.options.logo;
    }
    // Add the loading screen to the body
    document.body.appendChild(this._loadingElem);
    // Add the CSS class that will trigger the initial transitions of the logo/loading HTML
    this._loadingElem.className += " pg-loading";
    // Define a listener to look for any new loading HTML that needs to be displayed after the intiial transition finishes
    listener = () => {
      this._readyToShowLoadingHtml = true;
      if (typeof transitionEvent !== "undefined" && transitionEvent !== null) {
        this._loadingHtmlElem.removeEventListener(transitionEvent, listener);
      }
      if (this._loadingHtmlToDisplay.length > 0) {
        return this._changeLoadingHtml();
      }
    };
    // Detect CSS animation support. If not found, we'll call the listener immediately. Otherwise, we'll wait
    if (typeof transitionEvent !== "undefined" && transitionEvent !== null) {
      return this._loadingHtmlElem.addEventListener(transitionEvent, listener);
    } else {
      return listener();
    }
  }
});
```

Response:
constructor: (options) ->
      defaultOptions = @constructor._defaultOptions
      @options = {}

      # Set initial options, merging given options with the defaults
      for k, v of defaultOptions
        @options[k] = if options[k]? then options[k] else v

      # Create the loading screen element
      @_loadingElem = document.createElement("div")
      # Create an empty array to store the potential list of loading HTML (messages, spinners, etc)
      # we'll be displaying to the screen
      @_loadingHtmlToDisplay = []
      # Add a global class for easy styling
      @_loadingElem.className = "pg-loading-screen"
      # Set the background color of the loading screen, if supplied
      @_loadingElem.style.backgroundColor = @options.backgroundColor if @options.backgroundColor?
      # Initialize the loading screen's HTML with the defined template. The default can be overwritten via options
      @_loadingElem.innerHTML = @options.template
      # Find the element that will contain the loading HTML displayed to the user (typically a spinner/message)
      # This can be changed via updateLoadingHtml
      @_loadingHtmlElem = @_loadingElem.getElementsByClassName("pg-loading-html")[0]
      # Set the initial loading HTML, if supplied
      @_loadingHtmlElem.innerHTML = @options.loadingHtml if @_loadingHtmlElem?
      # Set a flag that lets us know if the transitioning between loading HTML elements is finished.
      # If true, we can transition immediately to a new message/HTML
      @_readyToShowLoadingHtml = false
      # Find the element that displays the loading logo and set the src if supplied
      logoElem = @_loadingElem.getElementsByClassName("pg-loading-logo")[0]
      logoElem.src = @options.logo if logoElem?
      # Add the loading screen to the body
      document.body.appendChild(@_loadingElem)
      # Add the CSS class that will trigger the initial transitions of the logo/loading HTML
      @_loadingElem.className += " pg-loading"
      # Define a listener to look for any new loading HTML that needs to be displayed after the intiial transition finishes
      listener = =>
        @_readyToShowLoadingHtml = true
        if transitionEvent? then @_loadingHtmlElem.removeEventListener(transitionEvent, listener)
        if @_loadingHtmlToDisplay.length > 0 then @_changeLoadingHtml()
      # Detect CSS animation support. If not found, we'll call the listener immediately. Otherwise, we'll wait
      if transitionEvent?
        @_loadingHtmlElem.addEventListener(transitionEvent, listener)
      else
        listener()


Prompt:
constructor: (options) ->
      defaultOptions = @constructor._defaultOptions
      @options = {}

      # Set initial options, merging given options with the defaults
      for k, v of defaultOptions
        @options[k] = if options[k]? then options[k] else v

      # Create the loading screen element
      @_loadingElem = document.createElement("div")
      # Create an empty array to store the potential list of loading HTML (messages, spinners, etc)
      # we'll be displaying to the screen
      @_loadingHtmlToDisplay = []
      # Add a global class for easy styling
      @_loadingElem.className = "pg-loading-screen"
      # Set the background color of the loading screen, if supplied
      @_loadingElem.style.backgroundColor = @options.backgroundColor if @options.backgroundColor?
      # Initialize the loading screen's HTML with the defined template. The default can be overwritten via options
      @_loadingElem.innerHTML = @options.template
      # Find the element that will contain the loading HTML displayed to the user (typically a spinner/message)
      # This can be changed via updateLoadingHtml
      @_loadingHtmlElem = @_loadingElem.getElementsByClassName("pg-loading-html")[0]

Response:
# Set the initial loading HTML, if supplied
      @_loadingHtmlElem.innerHTML = @options.loadingHtml if @_loadingHtmlElem?
      # Set a flag that lets us know if the transitioning between loading HTML elements is finished.
      # If true, we can transition immediately to a new message/HTML
      @_readyToShowLoadingHtml = false
      # Find the element that displays the loading logo and set the src if supplied
      logoElem = @_loadingElem.getElementsByClassName("pg-loading-logo")[0]
      logoElem.src = @options.logo if logoElem?
      # Add the loading screen to the body
      document.body.appendChild(@_loadingElem)
      # Add the CSS class that will trigger the initial transitions of the logo/loading HTML
      @_loadingElem.className += " pg-loading"
      # Define a listener to look for any new loading HTML that needs to be displayed after the intiial transition finishes
      listener = =>
        @_readyToShowLoadingHtml = true
        if transitionEvent? then @_loadingHtmlElem.removeEventListener(transitionEvent, listener)
        if @_loadingHtmlToDisplay.length > 0 then @_changeLoadingHtml()
      # Detect CSS animation support. If not found, we'll call the listener immediately. Otherwise, we'll wait
      if transitionEvent?
        @_loadingHtmlElem.addEventListener(transitionEvent, listener)
      else
        listener()


Response:
finish: ->
      return unless @_loadingElem?
      # Again, define a listener to run once the loading screen has fully transitioned out
      listener = =>
        # Remove the loading screen from the body
        document.body.removeChild(@_loadingElem)
        # Add a class to the body to signal that the loading screen has finished and the app is ready
        document.body.className += " pg-loaded"
        if transitionEvent? then @_loadingElem.removeEventListener(transitionEvent, listener)
        # Reset the loading screen element since it's no longer attached to the DOM
        @_loadingElem = null

      # Detect CSS animation support. If not found, we'll call the listener immediately. Otherwise, we'll wait
      if transitionEvent?
        # Set a class on the loading screen to trigger a fadeout animation
        @_loadingElem.className += " pg-loaded"
        # When the loading screen is finished fading out, we'll remove it from the DOM
        @_loadingElem.addEventListener(transitionEvent, listener)
      else
        listener()

    updateLoadingHtml: (loadingHtml, immediately=false) ->
      if immediately
        # Ignore any loading HTML that may be queued up. Show this immediately
        @_loadingHtmlToDisplay = [loadingHtml]
        @_readyToShowLoadingHtml = true
      else
        # Add to an array of HTML to display to the user
        @_loadingHtmlToDisplay.push(loadingHtml)
      # If ready, let's display the new loading HTML
      if @_readyToShowLoadingHtml then @_changeLoadingHtml()

    _changeLoadingHtml: ->
      @_readyToShowLoadingHtml = false

      loadingListener = =>
        # New loading HTML has fully transitioned in. We're now ready to show a new message/HTML
        @_readyToShowLoadingHtml = true
        # Remove the CSS class that triggered the fade in animation
        @_loadingHtmlElem.className = @_loadingHtmlElem.className.replace(" pg-loading ", "")
        if transitionEvent? then @_loadingHtmlElem.removeEventListener(transitionEvent, loadingListener)
        # Check if there's still HTML left in the queue to display. If so, let's show it
        if @_loadingHtmlToDisplay.length > 0 then @_changeLoadingHtml()