// Copyright 2014 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

/**
 * @fileoverview Deferred resource loader for OOBE/Login screens.
 */

cr.define('cr.ui.login.ResourceLoader', function() {
  'use strict';

  // Deferred assets.
  var ASSETS = {};

  /**
   * Register assets for deferred loading.  When the bundle is loaded
   * assets will be added to the current page's DOM: <link> and <script>
   * tags pointing to the CSS and JavaScript will be added to the
   * <head>, and HTML will be appended to a specified element.
   *
   * @param {Object} desc Descriptor for the asset bundle
   * @param {string} desc.id Unique identifier for the asset bundle.
   * @param {Array=} desc.js URLs containing JavaScript sources.
   * @param {Array=} desc.css URLs containing CSS rules.
   * @param {Array.<Object>=} desc.html Descriptors for HTML fragments,
   * each of which has a 'url' property and a 'targetID' property that
   * specifies the node under which the HTML should be appended.
   *
   * Example:
   *   ResourceLoader.registerAssets({
   *     id: 'bundle123',
   *     js: ['//foo.com/src.js', '//bar.com/lib.js'],
   *     css: ['//foo.com/style.css'],
   *     html: [{ url: '//foo.com/tmpls.html' targetID: 'tmpls'}]
   *   });
   *
   * Note: to avoid cross-site requests, all HTML assets must be served
   * from the same host as the rendered page.  For example, if the
   * rendered page is served as chrome://oobe, then all the HTML assets
   * must be served as chrome://oobe/path/to/something.html.
   */
  function registerAssets(desc) {
    var html = desc.html || [];
    var css = desc.css || [];
    var js = desc.js || [];
    ASSETS[desc.id] = {
      html: html, css: css, js: js,
      loaded: false,
      count: html.length + css.length + js.length
    };
  }

  /**
   * Determines whether an asset bundle is defined for a specified id.
   * @param {string} id The possible identifier.
   */
  function hasDeferredAssets(id) {
    return id in ASSETS;
  }

  /**
   * Determines whether an asset bundle has already been loaded.
   * @param {string} id The identifier of the asset bundle.
   */
  function alreadyLoadedAssets(id) {
    return hasDeferredAssets(id) && ASSETS[id].loaded;
  }

  /**
   * Load a stylesheet into the current document.
   * @param {string} id Identifier of the stylesheet's asset bundle.
   * @param {string} url The URL resolving to a stylesheet.
   */
  function loadCSS(id, url) {
    var link = document.createElement('link');
    link.setAttribute('rel', 'stylesheet');
    link.setAttribute('href', url);
    link.onload = resourceLoaded.bind(null, id);
    document.head.appendChild(link);
  }

  /**
   * Load a script into the current document.
   * @param {string} id Identifier of the script's asset bundle.
   * @param {string} url The URL resolving to a script.
   */
  function loadJS(id, url) {
    var script = document.createElement('script');
    script.src = url;
    script.onload = resourceLoaded.bind(null, id);
    document.head.appendChild(script);
  }

  /**
   * Move DOM nodes from one parent element to another.
   * @param {HTMLElement} from Element whose children should be moved.
   * @param {HTMLElement} to Element to which nodes should be appended.
   */
  function moveNodes(from, to) {
    Array.prototype.forEach.call(from.children, to.appendChild, to);
  }

  /**
   * Tests whether an XMLHttpRequest has successfully finished loading.
   * @param {string} url The requested URL.
   * @param {XMLHttpRequest} xhr The XHR object.
   */
  function isSuccessful(url, xhr) {
    var fileURL = /^file:\/\//;
    return xhr.readyState == 4 &&
        (xhr.status == 200 || fileURL.test(url) && xhr.status == 0);
  }

  /*
   * Load a chunk of HTML into the current document.
   * @param {string} id Identifier of the page's asset bundle.
   * @param {Object} html Descriptor of the HTML to fetch.
   * @param {string} html.url The URL resolving to some HTML.
   * @param {string} html.targetID The element ID to which the retrieved
   * HTML nodes should be appended.
   */
  function loadHTML(id, html) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', html.url);
    xhr.onreadystatechange = function() {
      if (isSuccessful(html.url, xhr)) {
        moveNodes(this.responseXML.body, $(html.targetID));
        resourceLoaded(id);
      }
    };
    xhr.responseType = 'document';
    xhr.send();
  }

  /**
   * Record that a resource has been loaded for an asset bundle.  When
   * all the resources have been loaded the callback that was specified
   * in the loadAssets call is invoked.
   * @param {string} id Identifier of the asset bundle.
   */
  function resourceLoaded(id) {
    var assets = ASSETS[id];
    assets.count--;
    if (assets.count == 0)
      finishedLoading(id);
  }

  /**
   * Finishes loading an asset bundle.
   * @param {string} id Identifier of the asset bundle.
   */
  function finishedLoading(id) {
    var assets = ASSETS[id];
    console.log('Finished loading asset bundle', id);
    assets.loaded = true;
    window.setTimeout(function() {
      assets.callback();
      chrome.send('screenAssetsLoaded', [id]);
    }, 0);
  }

  /**
   * Load an asset bundle, invoking the callback when finished.
   * @param {string} id Identifier for the asset bundle to load.
   * @param {function()=} callback Function to invoke when done loading.
   */
  function loadAssets(id, callback) {
    var assets = ASSETS[id];
    assets.callback = callback || function() {};
    console.log('Loading asset bundle', id);
    if (alreadyLoadedAssets(id))
      console.warn('asset bundle', id, 'already loaded!');
    if (assets.count == 0) {
      finishedLoading(id);
    } else {
      assets.css.forEach(loadCSS.bind(null, id));
      assets.js.forEach(loadJS.bind(null, id));
      assets.html.forEach(loadHTML.bind(null, id));
    }
  }

  return {
    alreadyLoadedAssets: alreadyLoadedAssets,
    hasDeferredAssets: hasDeferredAssets,
    loadAssets: loadAssets,
    registerAssets: registerAssets
  };
});