/**
 * React Static Boilerplate
 * https://github.com/kriasoft/react-static-boilerplate
 *
 * Copyright © 2015-present Kriasoft, LLC. All rights reserved.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE.txt file in the root directory of this source tree.
 */

import React, { PropTypes } from 'react';
import Layout from '../../components/Layout';
import s from './styles.css';
import { title, html } from './index.md';

class HomePage extends React.Component {
  constructor() {
    super();

    this.state = {
      scale: 1
    }
  }

  handleResize(e) {
    var w = window,
    d = document,
    documentElement = d.documentElement,
    body = d.getElementsByTagName('body')[0],
    width = w.innerWidth || documentElement.clientWidth || body.clientWidth,
    height = w.innerHeight|| documentElement.clientHeight|| body.clientHeight;

    this.setState({width: width, height: height});
    var scale = height/950;
    scale = scale > 1 ? 1 : scale;
    this.setState({scale});
  }

  componentDidMount() {
    this.handleResize();
    window.addEventListener('resize', this.handleResize.bind(this));
    document.title = title;

  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize);
  }



  render() {
    var css = {transform: `scale(${this.state.scale})`};
      css = {transform: `matrix(${this.state.scale}, 0, 0, ${this.state.scale}, 0, 0)`};
    console.log(css);
    return (
      <Layout>
        <div className={s.content}>
            <div className={s.cards}>
              <div className={`clearfix ${s.cards__container}`} style={css}>
                <div className={`${s.card} ${s.card_fade_left}`}></div>
                <div className={s.card}></div>
                <div className={`${s.card} ${s.card_active}`}></div>
                <div className={s.card}></div>
                <div className={`${s.card} ${s.card_fade_right}`}></div>
              </div>
            </div>
        </div>
      </Layout>
    );
  }

}

export default HomePage;

@@ -1,297 +1,4 @@
-/**%0A * React Static Boilerplate%0A * https://github.com/kriasoft/react-static-boilerplate%0A *%0A * Copyright %C2%A9 2015-present Kriasoft, LLC. All rights reserved.%0A *%0A * This source code is licensed under the MIT license found in the%0A * LICENSE.txt file in the root directory of this source tree.%0A */%0A%0A
 impo
@@ -111,16 +111,43 @@
 s.css';%0A
+import Card from './card';%0A
 import %7B
@@ -901,773 +901,935 @@
 %0A%0A  
-%7D%0A%0A  componentWillUnmount() %7B%0A    window.removeEventListener('resize', this.handleResize);%0A  %7D%0A%0A%0A%0A  render() %7B%0A    var css = %7Btransform: %60scale($%7Bthis.state.scale%7D)%60%7D;%0A      css = %7Btransform: %60matrix($%7Bthis.state.scale%7D, 0, 0, $%7Bthis.state.scale%7D, 0, 0)%60%7D;%0A    console.log(css);%0A    return (%0A      %3CLayout%3E%0A        %3Cdiv className=%7Bs.content%7D%3E%0A            %3Cdiv className=%7Bs.cards%7D%3E%0A              %3Cdiv className=%7B%60clearfix $%7Bs.cards__container%7D%60%7D style=%7Bcss%7D%3E%0A                %3Cdiv className=%7B%60$%7Bs.card%7D $%7Bs.card_fade_left%7D%60%7D%3E%3C/div%3E%0A                %3Cdiv className=%7Bs.card%7D%3E%3C/div%3E%0A                %3Cdiv className=%7B%60$%7Bs.card%7D $%7Bs.card_active%7D%60%7D%3E%3C/div%3E%0A                %3Cdiv className=%7Bs.card%7D%3E%3C/div%3E%0A                %3Cdiv className=%7B%60$%7Bs.card%7D $%7Bs.card_fade_right%7D%60%7D%3E%3C/div%3E
+  fetch('http://api.steampowered.com/IDOTA2Match_570/GetTeamInfoByTeamID/v1?key=40A813A042277C3DA67DC3ACFCB40103&format=json',%7B%0A      credentials: 'same-origin',%0A      mode: 'no-cors',%0A      method: 'get'%0A    %7D).then(function(response) %7B%0A      return response.json();%0A    %7D).then(function(json) %7B%0A      console.log('parsed json', json)%0A    %7D).catch(function(ex) %7B%0A      console.log('parsing failed', ex)%0A    %7D)%0A  %7D%0A%0A  onMouseEnter() %7B%0A%0A  %7D%0A%0A  componentWillUnmount() %7B%0A    window.removeEventListener('resize', this.handleResize);%0A  %7D%0A%0A%0A%0A  render() %7B%0A    let css = %7Btransform: %60scale($%7Bthis.state.scale%7D)%60%7D;%0A    return (%0A      %3CLayout%3E%0A        %3Cdiv className=%7Bs.content%7D%3E%0A            %3Cdiv className=%7Bs.cards%7D%3E%0A              %3Cdiv className=%7B%60clearfix $%7Bs.cards__container%7D%60%7D style=%7Bcss%7D%3E%0A                %0A                %3CCard /%3E%0A                %3CCard /%3E%0A                %3CCard /%3E%0A                %3CCard /%3E%0A                %3CCard /%3E%0A
 %0A   

use card class