@import ../shared/jquery.jgrowl

$object-padding: 6px
$nc-icon-size: 16px

$preview-dimension: 400px
$sidebar-margin: 20px
$sidebar-width: 400px
$sidebar-unit-horizontal-padding: 24px
$sidebar-unit-inner-width: $sidebar-width - $sidebar-unit-horizontal-padding * 2

$outfit-thumbnail-size: 0
$outfit-thumbnail-original-size: 100px
$outfit-thumbnail-margin: 12px
$outfit-header-padding: 24px
$outfit-content-width: $sidebar-unit-inner-width - $outfit-thumbnail-size - $outfit-thumbnail-margin - 32px
$outfit-content-inner-width: $outfit-content-width - $outfit-header-padding

=outfit
  //+clearfix
  padding: .25em 0
  //.outfit-thumbnail
    float: left
    height: $outfit-thumbnail-size
    margin-right: $outfit-thumbnail-margin
    overflow: hidden
    position: relative
    width: $outfit-thumbnail-size
  img
    height: $outfit-thumbnail-original-size
    left: -$outfit-thumbnail-original-size / 4
    position: absolute
    top: -$outfit-thumbnail-original-size / 4
    width: $outfit-thumbnail-original-size
  //> div
    float: left
    width: $outfit-content-width
  .outfit-delete
    +reset-awesome-button
    +opacity(.5)
    font-size: 150%
    float: right
    line-height: 1
    margin-top: -.125em
    padding: .125em .25em
    &:hover
      +opacity(1)
      background: $module-bg-color
  header
    display: block
    padding-left: $outfit-header-padding
  .outfit-star
    background:
      image: image-url("unstarred.png")
      position: left top
      repeat: no-repeat
    bottom: -2px
    /* margin-bottom doesn't work here
    cursor: pointer
    display: block
    float: left
    height: 16px
    margin-left: -24px
    /* makes it not take up inline space
    position: relative
    width: 16px
    &.loading
      background-image: image-url("loading.gif") !important
  h4
    cursor: pointer
    font-size: 115%
    &:hover
      text-decoration: underline
  .outfit-url
    +opacity(.5)
    background: transparent
    border-color: $background-color
    font-size: 75%
    width: $outfit-content-inner-width
    &:hover
      +opacity(1)
      border-color: $input-border-color
  .outfit-delete-confirmation
    display: none
    font-size: 75%
    span
      color: red
    a
      margin: 0 .25em
  &.active
    background: $module-bg-color
  &.confirming-deletion
    .outfit-delete
      visibility: hidden
    .outfit-url
      display: none
    .outfit-delete-confirmation
      display: block
  &.starred
    .outfit-star
      background-image: image-url("star.png")

body.outfits-edit
  #preview-toolbar
    margin-bottom: .5em
    text-align: left
    form
      +inline-block
      margin-right: 2em
  #pet-info form
    display: inline
  #pet-state-form
    ul
      list-style: none
      &, li
        display: inline
    input
      display: none
    label
      +awesome-button
      margin: 0 .25em
    li.selected label
      +awesome-button-color($marked_button_color)
    &.hidden
      visibility: hidden
  #save-outfit-wrapper
    float: right
    button
      +loud-awesome-button-color
      display: none
  #preview
    clear: both
  #preview-swf
    float: left
    height: $preview-dimension
    margin-bottom: 1em
    position: relative
    width: $preview-dimension
  #preview-swf-overlay
    +opacity(0)
    background: black
    height: 100%
    left: 0
    position: absolute
    top: 0
    width: 100%
  #preview-sidebar
    float: left
    height: $preview-dimension
    margin-left: $sidebar-margin
    margin-bottom: 1em
    width: $container_width - $preview-dimension - $sidebar-margin
    &.viewing-outfits
      #preview-closet
        display: none
      #preview-outfits
        display: block
    &.viewing-saving-outfit
      height: auto
      max-height: 100%
      #preview-closet
        display: none
      #preview-saving-outfit
        display: block
  #preview-closet
    h2
      margin: 0
    .object
      background: $module-bg-color
      img
        +opacity(0.5)
      &.worn
        background: transparent
        img
          +opacity(1)
      &.no-assets
        background: $error-bg-color
        color: $error-color
        padding-bottom: 1.25em
        .no-assets-message
          display: block
  .no-assets-message
    background: $error-bg-color - #080808
    bottom: 0
    color: $error-color - #080808
    cursor: pointer
    display: none
    font-size: 75%
    left: 0
    position: absolute
    width: 100%
  #no-assets-full-message
    +border-radius(5px)
    background: $error-bg-color + #111111
    border: 1px solid $error-border-color + #111111
    color: $error-color + #111111
    font-size: 75%
    left: -9999px
    padding: .25em
    position: absolute
    top: -9999px
    width: 30em
  #preview-search-form
    clear: both
    text-align: left
    h2
      +inline-block
      margin: 0 1em 0 0
    input
      +inline-block
  #preview-search-form-pagination
    +inline-block
    margin-left: 2em
    a, span
      margin: 0 .25em
    .current
      font-weight: bold
  #preview-search-form-clear
    display: none
    font-size: 87.5%
    margin-left: 2em
  #preview-search-form-loading
    display: none
    font:
      size: 75%
      style: italic
    margin-left: 2em
  #preview-search-form-no-results
    display: none
  #preview-search-form-help
    font-size: 87.5%
    margin-left: 2em
  .search-helper
    font-family: inherit
  .possible-error
    @extend .error
    display: none
  #fullscreen-copyright
    display: none
  &.fullscreen
    $fullscreen-search-border: 1px 1px 0
    height: 100%
    #container
      +box-sizing(border-box)
      height: 100%
      margin: 0 auto
      min-width: 800px
      padding-top: 2.5em
      position: relative
      width: 80%
    h1
      display: none
    #short-url-response
      position: static
    #preview
      width: 100%
    #preview-sidebar
      +border-radius(10px)
      border: 1px solid $soft-border-color
      float: right
      height: 100%
      margin: 0
      position: relative
      width: auto
      > div
        height: 100%
        overflow: auto
        padding:
          left: $sidebar-unit-horizontal-padding
          right: $sidebar-unit-horizontal-padding
        width: $sidebar-width - (2 * $sidebar-unit-horizontal-padding)
        h2
          margin-bottom: .25em
      &.viewing-saving-outfit
        height: auto
        max-height: 100%
    #preview-search-form
      bottom: 1.5em
      left: 0
      overflow: auto
      padding: .5em 1em
      position: absolute
      width: 100%
    #preview-search-form-help
      div
        +inline-block
        width: 48%
    #footer
      bottom: 0
      left: 0
      position: absolute
      width: 100%
      ul, p, li
        display: inline
      ul
        margin-right: 2em

  .object
    padding: $object-padding
    position: relative
    ul
      display: none
      left: 0
      list-style: none
      position: absolute
      top: 0
      li
        margin-bottom: .25em
        a
          +awesome-button
          +awesome-button-color(#aaaaaa)
          +opacity(0.9)
          font-size: 80%
    &:hover
      ul, .object-info
        display: block

  // the difference between the horizontal edge of the object element and the
  // image edge
  $object-img-diff: ($object-width - $object-img-size) / 2 + $object-padding

  .nc-icon
    background: image-url("nc.png") no-repeat
    height: $nc-icon-size
    position: absolute
    right: $object-img-diff
    text-indent: -9999px
    top: $object-img-size - $nc-icon-size
    width: $nc-icon-size
    &:hover
      +opacity(0.5)

  .object-info
    +border-radius(12px)
    +opacity(0.75)
    background: #aaa
    color: #fff
    display: none
    height: 16px
    position: absolute
    right: $object-img-diff / 2
    top: 0
    width: 16px
    span
      font:
        family: $text-font
        weight: bold
      position: relative
      top: -2px
    &:hover
      +opacity(1)

  #preview-outfits
    display: none
    text-align: left
    h3
      margin-bottom: .5em
    > ul
      background: image-url("loading.gif") no-repeat center top
      display: block
      font-family: $main-font
      list-style: none
      margin-bottom: 1em
      min-height: 16px
      > li
        +outfit
      &.loaded
        background: transparent

  .preview-sidebar-nav
    float: right
    font-size: 85%
    margin-top: 1em
  
  #save-success, #save-error, #outfit-not-found
    display: none
    margin-top: 1em
    text-align: center
  
  #save-success
    +notice
  
  #save-error, #outfit-not-found
    +error
  
  #userbar-message
    +opacity(.5)
    display: none
  
  #new-outfit
    +outfit
    display: none
    h4
      display: inline
      &:hover
        text-decoration: none
    .outfit-star
      margin-top: .5em
  
  #new-outfit-name
    font: inherit
    line-height: 1
  
  #preview-saving-outfit
    display: none
    padding-bottom: 1em
  
  #pet-type-form, #pet-state-form, #preview-swf, #preview-search-form
    position: relative
  
  .control-overlay
    height: 100%
    left: 0
    position: absolute
    top: 0
    width: 100%
    z-index: 5
  
  #preview-sidebar-nav-outfits, #save-outfit-signed-in
    display: none
  
  &.user-signed-in
    #preview-sidebar-nav-outfits
      display: block
    #save-outfit
      display: inline-block
    #save-outfit-wrapper.active-outfit
      #save-outfit
        display: none
      #save-current-outfit, #save-outfit-copy
        display: inline-block
  
  &.user-not-signed-in
    #save-outfit-not-signed-in
      display: inline-block