// ---------------------------------------------------------------------------
// Mandatory grid settings
// Defaults: can be overridden

$column-width:    4em       !default;
$gutter-width:    1em       !default;
$gutter-property: "margin"  !default;
$total-columns:   12        !default;
$is-fluid:        true      !default;

// ---------------------------------------------------------------------------
// Variables used in grid context

$grid-init: false;
$context-warn: "You must set $context if $is-fluid is set to true.";

// ---------------------------------------------------------------------------
// @function layout-width
// 
// Returns width based on given number of culumns
// $columns :   Number of columns to calculate width from
// @return  :   Width in the same unit as $column-width and $gutter-width

@function layout-width( $columns ) {
  @if comparable( $column-width, $gutter-width ) {
    @return $columns * ( $column-width + $gutter-width ) - $gutter-width;
  } @else {
    @warn "$column-width and $gutter-width must have the same unit set. #{ unit($column-width) }'s and #{ unit($gutter-width) }'s are not comparable.";
  }
}

// ---------------------------------------------------------------------------
// @function context-width
// 
// Returns width based on given number of culumns, plus an extra gutter
// Used for % calculations in the grid
// $columns :   Number of columns to calculate width from
// @return  :   Width in the same unit as $column-width and $gutter-width

@function context-width( $columns ) {
  @return layout-width( $columns ) + $gutter-width;
}

// ---------------------------------------------------------------------------
// @function span-column-width
// 
// Same as layout-width( $columns ), but renamed for better context awareness

@function span-column-width( $columns ) {
  @return layout-width( $columns );
}

// ---------------------------------------------------------------------------
// @function gutter
// 
// Returns gutter in the same unit as $gutter-width if grid is static
// Returns gutter as a percentage of the context if grid is fluid
// $context :   Number of columns in the current context. 
//          :   If set to false, the returned value is as in static grid 
// @return  :   Width as $gutter-width or as a percentage of the context

@function gutter(
  $context: false
  ) {
  @if $is-fluid and $context {
    @return ( percentage-round( ( $gutter-width / 2 ) / context-width( $context ) ) );
  } @else if $is-fluid {
    @warn $context-warn;
  } @else {
    @return $gutter-width / 2; 
  }
}

// ---------------------------------------------------------------------------
// @mixin gutters
// 
// Sets gutters using the gutter( $context ) function
// $context           :   Number of columns in the current context. 
//                    :   Only mandatory if grid is fluid 
// $gutter-property   :   Set to "margin" or "padding"

@mixin gutters( 
  $context: false,
  $property: false
  ) {
  @if (not $property) {
    $property: $gutter-property;
  }
  @if $property == "margin" or $property == "padding" {
    #{ $property }: {
      left: gutter( $context );
      right: gutter( $context );
    }
  } @else {
    @warn "$gutter-property must be set to either 'margin' or 'padding'";
  }
}

// ---------------------------------------------------------------------------
// Grid master placeholder selector
// Adds cleafix and centers page in browser

%ezy-master {
  @extend %clearfix;
  margin: {
    left: auto;
    right: auto;
  }
}

// ---------------------------------------------------------------------------
// @mixin master
// 
// Sets width on page. If the grid is fluid, it's set as a max-width
// Extends the grid master placeholder selector
// $context           :   Number of columns in the current context. 

@mixin master(
  $context
  ) {
  @if $is-fluid {
    max-width: layout-width( $context );
  } @else {
    width: layout-width( $context );
  }
  @extend %ezy-master;
}

// ---------------------------------------------------------------------------
// Grid container placeholder selector
// Adds cleafix

%ezy-container {
  @extend %clearfix;
}

// ---------------------------------------------------------------------------
// @mixin container
// 
// Sets width on page. If the grid is fluid, it's set as a max-width
// Extends the grid master placeholder selector
// $context           :   Number of columns in the current context
//                    :   Only mandatory if grid is fluid
// $at-breakpoint     :   Set to true if mixin is called within a media query
//                    :   Avoids SASS compillation errors from extending within
//                    :   a media query

@mixin container(
  $context: false,
  $at-breakpoint: false
  ) {
  $pullout: -( $gutter-width )/2;
  @if $is-fluid and $context {
    $pullout: -( percentage-round( $gutter-width / layout-width( $context ) ) )/2;
  } @else if $is-fluid {
    @warn $context-warn;
  }
  margin: {
    left: $pullout;
    right: $pullout;
  }
  @if (not $at-breakpoint) {
    @extend %ezy-container;
  }
}

// ---------------------------------------------------------------------------
// @mixin grid-init
// 
// Prints out placeholder selectors used with columns. Helps reduce the CSS output.
// 
// Should be called after setting grid variables:
// ----------------
// $column-width
// $gutter-width
// $gutter-property
// $total-columns
// ----------------

@mixin grid-init() {
  $grid-init: true;
  @if $is-fluid {
    @for $i from 1 through $total-columns {
      %ezy-column-#{ $i } {
        float: left;
        @include gutters( $i );
      }
    }
  } @else {
    %ezy-column {
      float: left;
      @include gutters;
    }
  }
}

// ---------------------------------------------------------------------------
// @mixin span-columns
// 
// Sets width and gutter on columns
// Uses @extend for gutters outside media queries if grid-init() has been called
// $columns           :   Number of columns to span
// $context           :   Number of columns in the current context
//                    :   Only mandatory if grid is fluid
// $at-breakpoint     :   Set to true if mixin is called within a media query
//                    :   Avoids SASS compillation errors from extending within
//                    :   a media query
// $gutter-property   :   Overrides the global $gutter-property

@mixin span-columns(
  $columns,
  $context: false,
  $at-breakpoint: false,
  $gutter-property: false
  ) {
  $width: span-column-width( $columns );
  @if $is-fluid and $context {
  /* Spanning #{ $columns } of #{ $context } columns */
    $context-width: context-width( $context );
    $pct-width: percentage-round( $width / $context-width );
    width: $pct-width;
  } @else {
  /* Spanning #{ $columns } columns */
    width: $width;
  }
  @if $gutter-property and $is-fluid and $context {
    @include gutters( $context, $gutter-property );

  } @else if $gutter-property and $is-fluid and ( not $context ) {
    @warn $context-warn;

  } @else if $gutter-property and ( not $is-fluid ) {
    @include gutters( $gutter-property );

  } @else if $is-fluid and $context and $at-breakpoint {
    @include gutters( $context );

  } @else if $is-fluid and $context and ( $total-columns < $context ) {
    @include gutters( $context );
    @warn "Please check if $total-columns is set. $total-columns should be the highest number of columns occuring in your layout. This error will not break your layout, but will increase the CSS output.";

  } @else if $is-fluid and $context and ( not $grid-init ) {
    @include gutters( $context );
    @warn "Include grid-init() after setting $total-columns for cleaner CSS output.";
    
  } @else if $is-fluid and $context {
    @extend %ezy-column-#{ $context };

  } @else if $is-fluid { // $context not set
    @warn $context-warn;

  } @else if $grid-init { // Grid is static
      @extend %ezy-column;

  } @else {
    @warn "Include grid-init() after setting $gutter-width for cleaner CSS output.";
    @include gutters( $context );
  }

  //   @if $is-fluid {
  //     @if (not $at-breakpoint) {
  //       @if $total-columns < $context {
  //         @warn "Please check if $total-columns is set. $total-columns should be the highest number of columns occuring in your layout. This error will not break your layout, but will increase the CSS output.";
  //         @include gutters( $context );
  //       } @else if (not $grid-init) {
  //         @warn "Include grid-init() after setting $total-columns for cleaner CSS output.";
  //         @include gutters( $context );
  //       } @else {
  //         @extend %ezy-column-#{ $context };
  //       }
  //     } @else {
  //       @include gutters( $context );
  //     }
  //     @if $columns > $context {
  //       @warn "You are trying to span #{ $columns } columns, but your layout only has #{ $context } columns.";
  //     }
  //     @if (not $context) {
  //       @warn $context-warn;
  //     }
  //   } @else if (not $grid-init) {
  //     @warn "Include grid-init() after setting $gutter-width for cleaner CSS output.";
  //     @include gutters( $context );
  //   } @else {
  //     @extend %ezy-column;
  //   }
}