/**
 * Created by devin on 12/2/15.
 */

import React, { Component } from 'react';
import mui from 'material-ui';
import {GridList, GridTile, IconButton} from 'material-ui';
export default class Board extends React.Component {

render() {
    let n = 3
    let gridSize = 600;
    let cellTotalSize = gridSize-20;
    let tilesData = [
        {title: 'test1', author:'devin'},
        {title: 'test3', author:'devin'},
        {title: 'test4', author:'devin'},
        {title: 'test5', author:'devin'},
        {title: 'test6', author:'devin'},
        {title: 'test2', author:'albert'},
        {title: 'test7', author:'devin'},
        {title: 'test8', author:'albert'},
        {title: 'test9', author:'albert'}
    ];
   return(
       <GridList
           cols={n}
           cellHeight={cellTotalSize/n}
           style={{width: gridSize, height: gridSize, overflowY: 'auto', color: 'red', borderStyle: 'solid', borderColor: 'black',
           textAlign: 'center', verticalAlign: 'middle'}}
      >
   {
      tilesData.map((tile, i) =>
          <GridTile style={{borderColor:'black', borderStyle: 'solid'}} key={i}><div>
              <h1>{tile.title} </h1>
          </div></GridTile>
      )
   }
    </GridList>
   )
}
}

@@ -167,16 +167,40 @@
 al-ui';%0A
+import _ from 'lodash';%0A
 export d
@@ -268,17 +268,17 @@
 let n = 
-3
+6
 %0A    let
@@ -331,420 +331,234 @@
 ize-
-2
+6
 0;%0A    
-let tilesData = %5B%0A        %7Btitle: 'test1', author:'devin'%7D,%0A        %7Btitle: 'test3', author:'devin'%7D,%0A        %7Btitle: 'test4', author:'devin'%7D,%0A        %7Btitle: 'test5', author:'devin'%7D,%0A        %7Btitle: 'test6', author:'devin'%7D,%0A        %7B
+// generate some fake data%0A    let range = _.range(n);%0A    let cells = _.flatten(_.map(range, (i) =%3E _.map(range, (r) =%3E r+i*n)))%0A    let 
 ti
-t
 le
-: 'test2', author:'albert'%7D,%0A        %7Btitle: 'test7', author:'devin'%7D,%0A        %7Btitle: 'test8', author:'albert'%7D,%0A        %7Btitle: 'test9', author:'albert'%7D%0A    %5D;
+sData = _.map(cells, (c) =%3E %7Breturn %7Btitle: c%7D;%7D)%0A    // end data generation
 %0A   

implement flexible board size