/* ------------------------------------------------- *
 *  Ezy Grid by Frej Raahede Nielsen
 *  http://github.com/raahede/ezy
 * ------------------------------------------------- *
 */

// ---------------------------------------------------------------------------
// Grid defaults: can be overridden

$column-width     : 60px      !default;
$gutter-width     : 20px      !default;
$gutter-property  : "margin"  !default;
$total-columns    : 12        !default;
$is-fluid         : true      !default;
$grid-padding     : 0         !default;

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

$grid-init        : false;
$at-breakpoint    : false;
$grid-init-index  : 0; // Prevents columns defined before grid-init() from extending new placeholder selectors
$context-warn     : "You must set $context if $is-fluid is set to true.";
$init-gutter-property: $gutter-property;

// ---------------------------------------------------------------------------
// Importing dependencies

@import "settings";
@import "functions";
@import "clearfix";
@import "grid/debug";
@import "grid/helpers";
@import "grid/layout";

// ---------------------------------------------------------------------------
// 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        : $total-columns,
  $at-breakpoint  : $at-breakpoint
  ) {
  @if $is-fluid {
    max-width: layout-width( $context );
    @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
      /* Forcing static grid on IE6 and IE7 */
      *width: layout-width( $context );
    }
  } @else {
    width: layout-width( $context );
  }

  $grid-padding-left  : $grid-padding;
  $grid-padding-right : $grid-padding;

  @if type-of( $grid-padding ) == "list"  {
    // If grid padding is set as 2 values
    $grid-padding-left  : nth( $grid-padding, 1 );
    $grid-padding-right : nth( $grid-padding, 2 );
  }

  @if $grid-padding-left {  padding-left: $grid-padding-left; }
  @if $grid-padding-right { padding-right: $grid-padding-right; }
  
  @if ( not $at-breakpoint ) {
    @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        : $total-columns,
  $at-breakpoint  : $at-breakpoint
  ) {
  $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 column-base
// Common styles for grid columns

@mixin column-base {
  float: left;
  @if $legacy-support-for-ie6 {
    /* Fixing double margin on IE6 */
    _display: inline;
  }
  // Inserting debug styles
  @if $debug {
    @include debug-styles;
  }
}

// ---------------------------------------------------------------------------
// @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( $columns: $total-columns ) {
  $grid-init            : true;
  $grid-init-index      : $grid-init-index + 1;
  $init-gutter-property : $gutter-property;

  // Placeholder selector for fluid grid columns
  @for $i from 1 through $columns {
    %ezy-column-#{ $grid-init-index }-#{ $i } {
      /* Grid column base at a #{ $i }-column context */
      @include gutters( $i );
      @include column-base;
    }
  }

  // Placeholder selector for non-fluid grid columns
  %ezy-column-#{ $grid-init-index } {
    /* Grid column base */
    #{ $gutter-property }: {
      left: $gutter-width / 2;
      right: $gutter-width / 2;
    }
    @include column-base;
  }

}

// ---------------------------------------------------------------------------
// @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          : $total-columns,
  $at-breakpoint    : $at-breakpoint,
  $gutter-property  : $gutter-property
  ) {
  $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;
  }

  // Inserting debug text
  @if $debug {
    @include debug-info( $columns, $context );
  }

  // Setting base column styles when a column can't 
  // have extended the base columns placeholder selector
  @if ( not $grid-init ) {
    @include column-base;
  }

  // Some crazy logic to set gutter or 
  // extend column placeholder selectors

  @if $grid-init and ( not $at-breakpoint )  {
    // Those are the conditions for using @extend
    @if $context {
      @if ( $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 {
        @extend %ezy-column-#{ $grid-init-index }-#{ $context };
      }
      
    } @else {
      @extend %ezy-column-#{ $grid-init-index };
    }

  }
  @if ( $gutter-property and $gutter-property != $init-gutter-property )
      or ( not $grid-init ) 
      or $at-breakpoint {

    @if $is-fluid and $context {
      @include gutters( $context, $gutter-property );

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

  }
}