<!--
// Copyright 2015 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.
-->
<import src="sky-element.sky" />

<sky-element attributes="type:string, size:number">
<template>
  <img />
</template>
<script>
import "dart:sky";

const String kAssetBase = '/sky/assets/material-design-icons';

@Tagname('sky-icon')
class SkyIcon extends SkyElement {
  Element _img;

  void _setSize(int size) {
    _img.style['height'] = '${size}px';
    _img.style['width'] = '${size}px';
  }

  void _setSrc(String type, int size) {
    List<String> parts = type.split('/');
    if (parts.length < 2)
      return;
    String category = parts[0];
    String subtype = parts[1];
    _img.src = '${kAssetBase}/${category}/2x_web/ic_${subtype}_${size}dp.png';
  }

  void shadowRootReady() {
    _img = shadowRoot.firstElementChild;
    int size = this.size.floor();
    _setSize(size);
    _setSrc(type, size);
  }

  void typeChanged(String oldValue, String newValue) {
    if (_img != null)
      _setSrc(newValue, size.floor());
  }

  void sizeChanged(double oldValue, double newValue) {
    if (_img != null)
      _setSize(newValue.floor());
  }
}

_init(script) => register(script, SkyIcon);
</script>
</sky-element>