@import ../css3/images
@import ../css3/background-size

// Set the color of your columns
$grid-background-column-color: rgba(100, 100, 225, 0.25) !default

// Set the color of your gutters
$grid-background-gutter-color: rgba(0, 0, 0, 0) !default

// Set the total number of columns in your grid
$grid-background-total-columns: 24 !default

// Set the width of your columns
$grid-background-column-width: 30px !default

// Set the width of your gutters
$grid-background-gutter-width: 10px !default

// Set the offset, if your columns are padded in from the container edge
$grid-background-offset: 0px !default

// Set the color of your baseline
$grid-background-baseline-color: rgba(0, 0, 0, 0.5) !default

// Set the height of your baseline grid
$grid-background-baseline-height: 1.5em !default

// toggle your columns grids on and off
$show-column-grid-backgrounds: true !default

// toggle your vertical grids on and off
$show-baseline-grid-backgrounds: true !default

// toggle all your grids on and off
$show-grid-backgrounds: true !default

// optionally force your grid-image to remain fluid
// no matter what units you used to declared your grid.
$grid-background-force-fluid: false !default

// Create the gradient needed for baseline grids
@function get-baseline-gradient($color: $grid-background-baseline-color)
  $gradient: linear-gradient(bottom, $color 5%, rgba($color, 0) 5%)
  @return $gradient

// Create the color-stops needed for horizontal grids
@function build-grid-background($total: $grid-background-total-columns, $column: $grid-background-column-width, $gutter: $grid-background-gutter-width, $offset: $grid-background-offset, $column-color: $grid-background-column-color, $gutter-color: $grid-background-gutter-color)
  $grid: compact()
  $grid: append($grid, $gutter-color $offset, comma)
  @for $i from 0 to $total
    // $a represents the start of this column, initially equal to the offset
    $a: $offset
    @if $i > 0
      $a: $a + ($column + $gutter) * $i
    // $g represents the start of this gutter, equal to $a plus one column-width
    $g: $a + $column
    // $z represents the end of a gutter, equal to $g plus one gutter-width
    $z: $g + $gutter
    @if unit($a) == "%" and $i == $total - 1
      $z: 100%
    // and we add this column/gutter pair to our grid
    $grid: join($grid, ($column-color $a, $column-color $g, $gutter-color $g, $gutter-color $z))
  @return $grid

// Return the gradient needed for horizontal grids
@function get-column-gradient($total: $grid-background-total-columns, $column: $grid-background-column-width, $gutter: $grid-background-gutter-width, $offset: $grid-background-offset, $column-color: $grid-background-column-color, $gutter-color: $grid-background-gutter-color, $force-fluid: $grid-background-force-fluid)
  $grid: unquote("")
  // don't force fluid grids when they are already fluid.
  @if unit($column) == "%"
    $force-fluid: false
  @if $force-fluid
    $grid: get-column-fluid-grid($total, $column, $gutter, $offset, $column-color, $gutter-color)
  @else
    $grid: build-grid-background($total, $column, $gutter, $offset, $column-color, $gutter-color)
  // return the horizontal grid as a gradient
  $gradient: linear-gradient(left, $grid)
  @return $gradient

// Convert a grid from fixed units into percentages.
@function get-column-fluid-grid($total: $grid-background-total-columns, $column: $grid-background-column-width, $gutter: $grid-background-gutter-width, $offset: $grid-background-offset, $column-color: $grid-background-column-color, $gutter-color: $grid-background-gutter-color)
  $context: $column * $total + $gutter * ($total - 1) + $offset * 2
  $offset: $offset / $context * 100%
  $column: $column / $context * 100%
  $gutter: $gutter / $context * 100%
  // return the horizontal grid as a set of color-stops
  $grid: build-grid-background($total, $column, $gutter, $offset, $column-color, $gutter-color)
  @return $grid

// Add just the baseline grid to an element's background
=baseline-grid-background($baseline: $grid-background-baseline-height, $color: $grid-background-baseline-color)
  @if $show-grid-backgrounds and $show-baseline-grid-backgrounds
    +background-image(get-baseline-gradient($color))
    +background-size(100% $baseline)
    background-position: left top

// Add just the horizontal grid to an element's background
=column-grid-background($total: $grid-background-total-columns, $column: $grid-background-column-width, $gutter: $grid-background-gutter-width, $offset: $grid-background-offset, $column-color: $grid-background-column-color, $gutter-color: $grid-background-gutter-color, $force-fluid: $grid-background-force-fluid)
  @if $show-grid-backgrounds and $show-column-grid-backgrounds
    +background-image(get-column-gradient($total, $column, $gutter, $offset, $column-color, $gutter-color, $force-fluid))
    background-position: left top

// Add both horizontal and baseline grids to an element's background
=grid-background($total: $grid-background-total-columns, $column: $grid-background-column-width, $gutter: $grid-background-gutter-width, $baseline: $grid-background-baseline-height, $offset: $grid-background-offset, $column-color: $grid-background-column-color, $gutter-color: $grid-background-gutter-color, $baseline-color: $grid-background-baseline-color, $force-fluid: $grid-background-force-fluid)
  @if $show-grid-backgrounds
    @if $show-baseline-grid-backgrounds and $show-column-grid-backgrounds
      +background-image(get-baseline-gradient($baseline-color), get-column-gradient($total, $column, $gutter, $offset, $column-color, $gutter-color, $force-fluid))
      +background-size(100% $baseline, auto)
      background-position: left top
    @else
      +baseline-grid-background($baseline, $baseline-color)
      +column-grid-background($total, $column, $gutter, $offset, $column-color, $gutter-color, $force-fluid)