var React = require('react'),
    ItemMultiMediaDescriptions = require('./itemMultiMediaDescriptions'),
    ItemActions = require('../actions/itemActions'),
    ItemStore = require('../stores/itemStore');


var ItemWithDetailsPage = React.createClass({


    render: function() {

        return (
            <div className="item-with-details row-fluid center">
            <div className="span3">
                <ItemMultiMediaDescriptions descriptions={this.state.item.get('multi_media_descriptions')} />
            </div>
            <div className="span4">
               quantitative descriptions
            </div>
            </div>
            
        ) ;       

    },

     // Add change listeners to stores
    componentDidMount: function() {
        ItemStore.addChangeListener(this._onChange);
        ItemActions.loadFrontPageItems();
    },

    _onChange: function () {
        this.setState({
            item: ItemStore.getSelectedItem()
        });
    },

    getInitialState: function () {
      return { item: ItemStore.getSelectedItem() }; 
    }

});


module.exports = ItemWithDetailsPage;