// Copyright (c) 2013, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

library collapsible_content_element;

import 'dart:html';
import 'package:polymer/polymer.dart';
import 'observatory_element.dart';

/// An element which conditionally displays its children elements.
@CustomTag('collapsible-content')
class CollapsibleContentElement extends ObservatoryElement {
  static const String _openIconClass = 'glyphicon glyphicon-chevron-down';
  static const String _closeIconClass = 'glyphicon glyphicon-chevron-up';

  @observable String iconClass = _openIconClass;
  @observable String displayValue = 'none';

  bool _collapsed = true;
  bool get collapsed => _collapsed;
  set collapsed(bool r) {
    _collapsed = r;
    _refresh();
  }

  CollapsibleContentElement.created() : super.created();

  void enteredView() {
    super.enteredView();
    _refresh();
  }

  void toggleDisplay(Event e, var detail, Node target) {
    collapsed = !collapsed;
    _refresh();
  }


  void _refresh() {
    if (_collapsed) {
      iconClass = _openIconClass;
      displayValue = 'none';
    } else {
      iconClass = _closeIconClass;
      displayValue = 'block';
    }
  }
}