%p Click tiles in the grey grid to change the terrain.

- grid = 8
.isometric_grid
  - (0..((grid*grid)-1)).each do |i|
    .isometric_grid__square
    
.layout_grid
  - (0..((grid*grid)-1)).each do |i|
    .layout_grid__square{"data-tile_type" => 0}

@import bourbon
/* Variables */
$grid: 8
$sqWidth: 47px
$sqHeight: 27px
$sqHeightTall: 65px

p 
  font-family: sans-serif
  
/* Mixins */
=block($w, $h)
  display: block
  width: $w
  height: $h
 
=abs($top, $left)
  position: absolute
  top: $top
  left: $left
  
/* Isometric Grid Styling */

.isometric_grid
  +block($sqWidth*$grid, $sqHeight*$grid)
  position: relative
  float: left
  margin-top: 60px
  
.isometric_grid__square
  +block($sqWidth, $sqHeight)
  background: url("http://williamanderson.io/remote_use/namek_pathfinder/simple_grass.png")
  
%tall_square
  content: ""
  +block($sqWidth, $sqHeightTall)
  position: absolute
  bottom: 0px
  left: 0px
  
$onSquare: 1
@for $row from 1 through $grid
  @for $col from 1 through $grid
    .isometric_grid__square:nth-child(#{$onSquare})
      $leftOffset: (($col - 2)*$sqWidth/2) + ($row*$sqWidth/2) 
      $topOffset: (($row*$sqHeight)-$col*($sqHeight/2))
      $topOffset: $topOffset + ($grid * $sqHeight/2) 
      $topOffset: $topOffset - ($row + 1)*($sqHeight/2)
      +abs($topOffset, $leftOffset)
      $zindex: (($grid+1) - ($col - 1)) + (10 *  $row)
      z-index: $zindex
      

      
      /* Variations styles , in block to leverage sass calculations */
      &.isometric_grid__square--pillar:after
        @extend %tall_square
        z-index: $zindex + ($row * 100)
        background: url("http://williamanderson.io/remote_use/namek_pathfinder/pillar.png")  
      
      /* bush */
      &.isometric_grid__square--bush:after
        @extend %tall_square
        background: url("http://williamanderson.io/remote_use/namek_pathfinder/bush.png")
      
      /* tree */
      &.isometric_grid__square--tree:after
        @extend %tall_square
        background: url("http://williamanderson.io/remote_use/namek_pathfinder/tree.png")
      
      /* water styling */
      &.isometric_grid__square--water
        background: url("http://williamanderson.io/remote_use/namek_pathfinder/water.png")
      
    $onSquare: $onSquare + 1
   
/* Layout Grid Styling */
/* Layout Grid is used to modify the terrain top view */
.layout_grid
  +block($sqHeight*$grid, $sqHeight*$grid)
  float: left
  margin-top: 60px
  margin-left: 20px
  
.layout_grid__square
  +block($sqHeight, $sqHeight)
  float: left
  outline: 1px solid white
  background: gray
  cursor: pointer
  position: relative
  &:hover
    outline: 1px solid gold
    z-index: 2

.layout_grid__square--bush
  background: darken(gray, 10%)
  
.layout_grid__square--tree
  background: darken(gray, 20%)
  
.layout_grid__square--pillar
  background: darken(blue, 60%)
  
.layout_grid__square--water
  background: green
     
  

$(document).ready ->
  
  tiles = ["plain", "bush", "tree", "pillar", "water"]
  
  
	# Iterates over tile options and sets data for grid
  $(".layout_grid__square").click ->
    _index = $(this).index()+1
    _tile_type = parseInt($(this).attr("data-tile_type"))
    if _tile_type+1 < tiles.length
      _tile_type++
    else
      _tile_type = 0
      
    $(this).attr("data-tile_type", _tile_type)
    update_tile(_index, _tile_type, tiles)
    
	###
	*	Updates the appearence of a tile across both grids
	* @method update_tile
	*	@param {int} tile - tile index
	*	@param {int} type - index of type
	*	@param {array} tile_types - string array of tile types
	*###
	update_tile = (tile, type, tile_types) ->
    for grid_type in ["isometric_grid", "layout_grid"]
      $grid = $("."+grid_type+"__square")
      $tile = $grid.eq(tile-1)
      $tile.attr("class", grid_type+"__square")
      $tile.addClass(grid_type+"__square--" + tile_types[type])