content: 'use strict';
  
  import React from 'react';
  import ReactDOM from 'react-dom';
  import PureRenderer from 'react-addons-pure-render-mixin';
  import Radium from 'radium';
  import {Spotlight, decorators} from '../src/index';
  import theme from '../themes/default';
  
  import etheme from './theme';
  import schwarzenegger from './schwarzenegger';
  
  const MOVIE_START = 0;
  
  @Radium
  class MovieMeta extends React.Component {
      render(){
          const meta = this.props.meta;
          const style = etheme.meta;
          return (
              <div style={style.base} key={Math.random() * Date.now()}>
                  <h1 style={style.title}>{meta.title}</h1>
                  <h2 style={style.date}>{meta.date}</h2>
                  <p style={style.story}>{meta.story}</p>
              </div>
          );
      }
  }
  
  MovieMeta.propTypes = {
      meta: React.PropTypes.object.isRequired
  };
  
  class MoviePosters extends React.Component {
      constructor(props){
          super(props);
          this._onChanged = this._onChanged.bind(this);
          this._pureRenderer = PureRenderer.shouldComponentUpdate.bind(this);
      }
      shouldComponentUpdate(nextProps, nextState){
          return this._pureRenderer(nextProps, nextState);
      }
      render(){
          return (
              <Spotlight
                  style={theme}
                  start={MOVIE_START}
                  stiffness={170}
                  damping={26}
                  cullbacks={true}
                  touch={true}
                  responsive={true}
                  onItemChanged={this._onChanged}
                  decorators={decorators}>
                  {schwarzenegger.map((movie, index) =>
                      <img
                          key={index}
                          meta={movie.meta}
                          width={movie.poster.width}
                          height={movie.poster.height}
                          src={movie.poster.src}
                      />
                  )}
              </Spotlight>
          );
      }
      _onChanged(poster){
          const props = this.props;
          if(props.onChanged){ props.onChanged(poster); }
      }
  }
  
  MoviePosters.propTypes = {
      onChanged: React.PropTypes.func.isRequired
  };
  
  class App extends React.Component {
      constructor(props){
          super(props);
          this.state = { meta: schwarzenegger[MOVIE_START].meta };
          this.onPosterChanged = this.onPosterChanged.bind(this);
      }
      render(){
          return (
              <div>
                  <MoviePosters onChanged={this.onPosterChanged}/>
                  <MovieMeta meta={this.state.meta}/>
              </div>
          );
      }
      onPosterChanged(poster){
          const meta = poster.element.props.meta;
          if(!meta){ return; }
          this.setState({ meta: meta });
      }
  }
  
  const content = document.getElementById('content');
  ReactDOM.render(<App/>, content);
  