<!DOCTYPE html>
<!--
Copyright (c) 2013 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.
-->

<link rel="stylesheet" href="/extras/cc/layer_view.css">

<link rel="import" href="/extras/cc/constants.html">
<link rel="import" href="/extras/cc/layer_tree_quad_stack_view.html">
<link rel="import" href="/extras/cc/picture.html">
<link rel="import" href="/base/raf.html">
<link rel="import" href="/base/settings.html">
<link rel="import" href="/base/ui/drag_handle.html">
<link rel="import" href="/core/analysis/util.html">

<script>
'use strict';

/**
 * @fileoverview LayerView coordinates graphical and analysis views of layers.
 */

tv.exportTo('tv.e.cc', function() {
  var constants = tv.e.cc.constants;

  /**
   * @constructor
   */
  var LayerView = tv.b.ui.define('layer-view');

  LayerView.prototype = {
    __proto__: HTMLUnknownElement.prototype,

    decorate: function() {
      this.layerTreeQuadStackView_ = new tv.e.cc.LayerTreeQuadStackView();
      this.dragBar_ = new tv.b.ui.DragHandle();
      this.analysisEl_ = document.createElement('layer-view-analysis');
      this.analysisEl_.addEventListener('requestSelectionChange',
          this.onRequestSelectionChangeFromAnalysisEl_.bind(this));

      this.dragBar_.target = this.analysisEl_;

      this.appendChild(this.layerTreeQuadStackView_);
      this.appendChild(this.dragBar_);
      this.appendChild(this.analysisEl_);

      this.layerTreeQuadStackView_.addEventListener('selection-change',
          function() {
            this.layerTreeQuadStackViewSelectionChanged_();
          }.bind(this));
      this.layerTreeQuadStackViewSelectionChanged_();
    },

    get layerTreeImpl() {
      return this.layerTreeQuadStackView_.layerTreeImpl;
    },

    set layerTreeImpl(newValue) {
      return this.layerTreeQuadStackView_.layerTreeImpl = newValue;
    },

    set isRenderPassQuads(newValue) {
      return this.layerTreeQuadStackView_.isRenderPassQuads = newValue;
    },

    get selection() {
      return this.layerTreeQuadStackView_.selection;
    },

    set selection(newValue) {
      this.layerTreeQuadStackView_.selection = newValue;
    },

    regenerateContent: function() {
      this.layerTreeQuadStackView_.regenerateContent();
    },

    layerTreeQuadStackViewSelectionChanged_: function() {
      var selection = this.layerTreeQuadStackView_.selection;
      if (selection) {
        this.dragBar_.style.display = '';
        this.analysisEl_.style.display = '';
        this.analysisEl_.textContent = '';

        var layer = selection.layer;
        if (layer && layer.args && layer.args.pictures) {
          this.analysisEl_.appendChild(
              this.createPictureBtn_(layer.args.pictures));
        }

        var analysis = selection.createAnalysis();
        this.analysisEl_.appendChild(analysis);
      } else {
        this.dragBar_.style.display = 'none';
        this.analysisEl_.style.display = 'none';
        var analysis = this.analysisEl_.firstChild;
        if (analysis)
          this.analysisEl_.removeChild(analysis);
        this.layerTreeQuadStackView_.style.height =
            window.getComputedStyle(this).height;
      }
      tv.b.dispatchSimpleEvent(this, 'selection-change');
    },

    createPictureBtn_: function(pictures) {
      if (!(pictures instanceof Array))
        pictures = [pictures];

      var link = new tv.c.analysis.AnalysisLink();
      link.innerText = 'View in Picture Debugger';
      link.selectionGenerator = function() {
        var layeredPicture = new tv.e.cc.LayeredPicture(pictures);
        var snapshot = new tv.e.cc.PictureSnapshot(layeredPicture);
        snapshot.picture = layeredPicture;

        var selection = new tv.c.Selection();
        selection.push(snapshot);
        return selection;
      };
      return link;
    },

    onRequestSelectionChangeFromAnalysisEl_: function(e) {
      if (!(e.selection instanceof tv.e.cc.Selection))
        return;

      e.stopPropagation();
      this.selection = e.selection;
    },

    get extraHighlightsByLayerId() {
      return this.layerTreeQuadStackView_.extraHighlightsByLayerId;
    },

    set extraHighlightsByLayerId(extraHighlightsByLayerId) {
      this.layerTreeQuadStackView_.extraHighlightsByLayerId =
          extraHighlightsByLayerId;
    }
  };

  return {
    LayerView: LayerView
  };
});
</script>