// This is a port of YUI Grids version 2.6.0
// Note: This is not really tested yet. Use at your own risk.

@import compass/utilities/general/float.sass
@import fonts.sass

=yui-grids
  +yui-grids-init
  +yui-grid-templates
  +yui-grid-divisions

=yui-grid-templates
  #doc
    +yui-document(750px)
  #doc2
    +yui-document(950px)
  #doc3
    +yui-document("fluid")
  #doc4
    +yui-document(974px)
  /* Section: Preset Template Rules (.yui-t[1-6])
  .yui-t1
    +yui-two-column-left-template(160px)
  .yui-t2
    +yui-two-column-left-template(180px)
  .yui-t3
    +yui-two-column-left-template(300px)
  .yui-t4
    +yui-two-column-right-template(180px)
  .yui-t5
    +yui-two-column-right-template(240px)
  .yui-t6
    +yui-two-column-right-template(300px)
  .yui-t7
    +yui-one-column-template

=yui-group-clearing
  zoom: 1
  &:after
    content: "."
    display: block
    height: 0
    clear: both
    visibility: hidden

=yui-grids-init(!header = "#hd", !footer = "#ft", !body = "#bd")
  /* Section: General Rules
  body
    :text-align center
  @if !header
    #{!header}
      +yui-group-clearing
  @if !footer
    #{!footer}
      +yui-group-clearing
  @if !body
    #{!body}
      +yui-group-clearing

=em-size(!style, !px_size, !base_font_size = !yui_default_base_font_size)
  :#{!style}= 1em * !px_size / !base_font_size

=em-size-hacked(!style, !px_size, !base_font_size = !yui_default_base_font_size)
  +em-size(!style, !px_size, !base_font_size)
  +em-size("*"+!style, !px_size * 39 / 40, !base_font_size)

// All documents must have these styles
=yui-document-base(!min_width = false)
  :margin auto
  :text-align left
  @if !min_width
    :min-width= !min_width

=yui-block-base
  :position relative
  :_position static

=yui-main-block
  :float none
  :width auto

// Creates a fixed width document container
// Pass "fluid" for the width to create a document that grows with the width of the browser.
=yui-document(!width, !min_width = false, !base_font_size = !yui_default_base_font_size)
  +yui-document-base(!min_width)
  @if !width == "fluid"
    :margin auto 10px
    :width auto
  @else
    +em-size-hacked("width", !width, !base_font_size)

=yui-two-column-left-template(!column_width, !main_selector = "#yui-main", !block_selector = ".yui-b", !document_width = 750px, !min_width = false, !base_font_size = !yui_default_base_font_size)
  +yui-document(!document_width, !min_width, !base_font_size)
  #{!block_selector}
    +yui-block-base
    :float left
    +em-size-hacked("width", !column_width, !base_font_size)
  #{!main_selector}
    :width 100%
    :float right
    :margin-left -25em
    #{!block_selector}
      +yui-main-block
      +em-size("margin-left", !column_width + 13px, !base_font_size)
      // t3 is 15px for IE for some reason - seems like this should be some formula based on the column width and not a fixed number - need to do more research
      @if !column_width > 180px
        +em-size("*margin-left", (!column_width + 15px)  * 39 / 40, !base_font_size)
      @else
        +em-size("*margin-left", (!column_width + 14px)  * 39 / 40, !base_font_size)

=yui-two-column-right-template(!column_width, !main_selector = "#yui-main", !block_selector = ".yui-b", !document_width = 750px, !min_width = false, !base_font_size = !yui_default_base_font_size)
  +yui-document(!document_width, !min_width, !base_font_size)
  #{!block_selector}
    +yui-block-base
    :float right
    +em-size-hacked("width", !column_width, !base_font_size)
  #{!main_selector}
    :width 100%
    :float left
    :margin-right -25em
    #{!block_selector}
      +yui-main-block
      +em-size("margin-right", !column_width + 13px, !base_font_size)
      // t5 is 15px for IE for some reason - seems like this should be some formula based on the column width and not a fixed number - need to do more research
      @if !column_width > 180px
        +em-size("*margin-right", (!column_width + 15px)  * 39 / 40, !base_font_size)
      @else
        +em-size("*margin-right", (!column_width + 14px)  * 39 / 40, !base_font_size)

=yui-one-column-template(!main_selector = "#yui-main", !block_selector = ".yui-b", !document_width = 750px, !min_width = false, !base_font_size = !yui_default_base_font_size)
  +yui-document(!document_width, !min_width, !base_font_size)
  #{!main_selector}
    #{!block_selector}
      +yui-main-block
      :display block
      :margin 0 0 1em 0

=yui-custom-template(!main_selector = "#yui-main", !block_selector = ".yui-b")
  #{!block_selector}
    +yui-block-base
  #{!main_selector}
    :width 100%
    #{!block_selector}
      +yui-main-block

=yui-grid-divisions(!unit = ".yui-u", !g_50_50 = ".yui-g", !g_33_33_33 = ".yui-gb", !g_67_33 = ".yui-gc", !g_33_67 = ".yui-gd", !g_75_25 = ".yui-ge", !g_25_75 = ".yui-gf")

  /* Section: Grids and Nesting Grids

  /* from #yui-main, .yui-g .yui-u .yui-g
  #{nest(!g_50_50, !unit, !g_50_50)}
    width: 100%

  /* Children generally take half the available space
  #{nest(!g_33_33_33, !unit)},
  #{nest(!g_50_50, !g_33_33_33, !unit)},
  #{nest(!g_33_33_33, !g_50_50)},
  #{nest(!g_33_33_33, !g_33_33_33)},
  #{nest(!g_33_33_33, !g_67_33)},
  #{nest(!g_33_33_33, !g_33_67)},
  #{nest(!g_33_33_33, !g_75_25)},
  #{nest(!g_33_33_33, !g_25_75)},
  #{nest(!g_67_33, !unit)},
  #{nest(!g_67_33, !g_50_50)},
  #{nest(!g_33_67, !unit)}
    float: left

  /* Float units (and sub grids) to the right
  #{nest(!g_50_50, !unit)},
  #{nest(!g_50_50, !g_50_50)},
  #{nest(!g_50_50, !g_33_33_33)},
  #{nest(!g_50_50, !g_67_33)},
  #{nest(!g_50_50, !g_33_67)},
  #{nest(!g_50_50, !g_75_25)},
  #{nest(!g_50_50, !g_25_75)},
  #{nest(!g_67_33, !unit)},
  #{nest(!g_33_67, !g_50_50)},
  #{nest(!g_50_50, !g_67_33, !unit)},
  #{nest(!g_75_25, !unit)},
  #{nest(!g_75_25, !g_50_50)},
  #{nest(!g_25_75, !g_50_50)},
  #{nest(!g_25_75, !unit)}
    float: right

  /* Float units (and sub grids) to the left
  #{!g_50_50},
  #{!g_33_33_33},
  #{!g_67_33},
  #{!g_33_67},
  #{!g_75_25},
  #{!g_25_75},
  #{nest(!g_50_50, !g_67_33)},
  #{nest(!g_50_50, !g_75_25)},
  #{nest(!g_67_33, "div.first")}
    div.first
      float: left

  #{!g_50_50}
    #{!unit},
    #{!g_50_50},
    #{!g_33_33_33},
    #{!g_67_33},
    #{!g_33_67},
    #{!g_75_25},
    #{!g_25_75}
      width: 49.1%

  #{nest(!g_33_33_33, !unit)},
  #{nest(!g_50_50, !g_33_33_33, !unit)},
  #{nest(!g_33_33_33, !g_50_50)},
  #{nest(!g_33_33_33, !g_33_33_33)},
  #{nest(!g_33_33_33, !g_67_33)},
  #{nest(!g_33_33_33, !g_33_67)},
  #{nest(!g_33_33_33, !g_75_25)},
  #{nest(!g_33_33_33, !g_25_75)},
  #{nest(!g_67_33, !unit)},
  #{nest(!g_67_33, !g_50_50)},
  #{nest(!g_33_67, !unit)}
    width: 32%
    margin-left: 1.99%

  /* Give IE some extra breathing room for 1/3-based rounding issues
  #{nest(!g_33_33_33, !unit)}
    *margin-left: 1.9%
    *width: 31.9%

  #{nest(!g_50_50, !g_33_33_33)},
  #{!g_33_33_33},
  #{!g_67_33},
  #{!g_33_67}
    div.first
      margin-left: 0

  /* Section: Deep Nesting
  #{!g_50_50},
  #{!g_33_33_33},
  #{!g_67_33},
  #{!g_33_67},
  #{!g_75_25},
  #{!g_25_75}
    #{!g_50_50}
      #{!unit}
        width: 49%
        *width: 48.1%
        *margin-left: 0

  #{nest(!g_50_50, !g_50_50, !unit)}
    width: 48.1%

  #{!g_50_50},
  #{!g_33_33_33}
    #{!g_33_33_33}
      div.first
        *margin-right: 0
        *width: 32%
        _width: 31.7%

  #{nest(!g_50_50, !g_67_33, "div.first")},
  #{nest(!g_67_33, "div.first")},
  #{nest(!g_33_67, !g_50_50)},
  #{nest(!g_33_67, !unit)}
    width: 66%

  #{nest(!g_33_33_33, !g_50_50, "div.first")}
    *margin-right: 4%
    _margin-right: 1.3%

  #{!g_33_33_33}
    #{!g_67_33},
    #{!g_33_67}
      div.first
        *margin-right: 0

  #{!g_33_33_33}
    #{!g_33_33_33},
    #{!g_67_33}
      #{!unit}
        *margin-left: 1.8%
        _margin-left: 4%

  #{nest(!g_50_50, !g_33_33_33, !unit)}
    _margin-left: 1.0%

  #{nest(!g_33_33_33, !g_33_67, !unit)}
    *width: 66%
    _width: 61.2%

  #{nest(!g_33_33_33, !g_33_67, "div.first")}
    *width: 31%
    _width: 29.5%

  #{!g_50_50},
  #{!g_33_33_33}
    #{!g_67_33}
      #{!unit}
        width: 32%
        _float: right
        margin-right: 0
        _margin-left: 0

  #{nest(!g_33_33_33, !g_67_33, "div.first")}
    width: 66%
    *float: left
    *margin-left: 0

  #{!g_33_33_33}
    #{!g_75_25},
    #{!g_25_75}
      #{!unit}
        margin: 0

  #{nest(!g_33_33_33, !g_33_33_33, !unit)}
    _margin-left: .7%

  #{nest(!g_33_33_33, !g_50_50)},
  #{nest(!g_33_33_33, !g_33_33_33)}
    div.first
      *margin-left: 0

  #{!g_67_33},
  #{!g_33_67}
    #{!g_50_50}
      #{!unit}
        *width: 48.1%
        *margin-left: 0

  #{!g_33_67},
  #{nest(!g_33_33_33, !g_33_67)}
    div.first
      width: 32%

  #{nest(!g_50_50, !g_33_67, "div.first")}
    _width: 29.9%

  #{nest(!g_75_25, !unit)},
  #{nest(!g_75_25, !g_50_50)},
  #{nest(!g_25_75, "div.first")}
    width: 24%

  #{nest(!g_75_25, "div.first")},
  #{nest(!g_25_75, !g_50_50)},
  #{nest(!g_25_75, !unit)}
    width: 74.2%

  #{!g_33_33_33}
    #{!g_75_25},
    #{!g_25_75}
      div#{!unit}
        float: right

  #{!g_33_33_33}
    #{!g_75_25},
    #{!g_25_75}
      div.first
        float: left

  /* Width Accommodation for Nested Contexts
  #{!g_33_33_33}
    #{nest(!g_75_25, !unit)},
    #{nest(!g_25_75, "div.first")}
      *width: 24%
      _width: 20%

  /* Width Accommodation for Nested Contexts
  #{!g_33_33_33}
    #{nest(!g_75_25, "div.first")},
    #{nest(!g_25_75, !unit)}
      *width: 73.5%
      _width: 65.5%

  /* Patch for GD within GE
  #{nest(!g_75_25, "div.first", !g_33_67, !unit)}
    width: 65%

  #{nest(!g_75_25, "div.first", !g_33_67, "div.first")}
    width: 32%

  /* @group Clearing
  #{!g_50_50},
  #{!g_33_33_33},
  #{!g_67_33},
  #{!g_33_67},
  #{!g_75_25},
  #{!g_25_75}
    +yui-group-clearing