@import "compass/css3/images";

$equal-height-columns-direction: left !default;

//////////////////////////////
// Equal Height Columns
//
// Builds equal-height columns based on Dan Cederholm's Faux Columns method using CSS3 Gradients
// Can be used to build fluid or fixed backgrounds, depending on widths passed in.
//  http://alistapart.com/article/fauxcolumns
//////////////////////////////
@mixin equal-height-columns($widths, $colors, $direction: $equal-height-columns-direction) {
  @if (length($widths) != length($colors)) and (length($widths) != length($colors) - 1)  {
    @warn 'You either need an equal number of widths and colors or one less width than color, in which case it is assumed that the last width goes to 100%. Please provide the correct amount of widths and colors.';
  }
  @else {
    $stops: ();

    @if length($widths) == (length($colors) - 1) {
      $widths: append($widths, 100%);
    }

    $i: 1;

    @each $width in $widths {
      $width: nth($widths, $i);
      $color: nth($colors, $i);

      @if $i == 1 {
        $stops: join($stops, build-gradient-piece($width, $color), comma);
      }
      @else {
        $position: nth($widths, $i - 1);
        $stops: join($stops, build-gradient-piece($width, $color, $position), comma);
      }

      $i: $i + 1;
    }

    @include background-image(
      linear-gradient($direction, $stops)
    );
  }
}

@function build-gradient-piece($width, $color, $position: false) {
  @if ($position == 'last') {
    @return ($color $width);
  }
  @else if ($position != false) {
    @return $color $position, $color $width;
  }
  @else {
    @return $color, $color $width;
  }
}