@import ../shared/jquery.jgrowl
@import partials/wardrobe

@import "partials/context_button"
@import "partials/icon"
@import star

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

$preview-dimension: 380px
$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

=user-select($select)
  select: unquote($select)
  +experimental(user-select, $select, -moz, -webkit, not -o, not -ms, -khtml, official)

=active-mode
  color: $text-color
  font-weight: bold

=sidebar-navbar-unselected
  background: transparent
  border-bottom: 1px solid $soft-border-color
  font-weight: normal

=sidebar-navbar-selected
  background: white
  border-bottom-color: white
  font-weight: bold

=sidebar-view-child
  margin:
    left: $sidebar-unit-horizontal-padding
    right: $sidebar-unit-horizontal-padding

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 button
      +awesome-button-color($marked_button_color)
    &.hidden
      visibility: hidden
  #save-outfit-wrapper
    float: right
    button
      display: none
    #share-outfit
      display: inline-block
    &.loading
      background:
        image: image-url("loading.gif")
        position: left center
        repeat: no-repeat
      padding-left: 20px
  #save-outfit, #save-outfit-not-signed-in, #save-current-outfit, #save-outfit-finish
    +loud-awesome-button-color
  #current-outfit-permalink, #shared-outfit-permalink
    display: none
    margin-right: .25em
    img
      +icon
  #shared-outfit-url
    display: none
    width: 15em
  #preview
    clear: both
  #preview-swf
    float: left
    height: $preview-dimension
    margin-bottom: 1em
    position: relative
    width: $preview-dimension
    &.swf-adapter
      #preview-image-container
        display: none
    &.image-adapter
      #preview-swf-container
        display: none
  #preview-image-container
    +wardrobe-image-wrapper
    position: relative
    &, img
      height: 100%
      width: 100%
  #preview-swf-overlay
    +opacity(0)
    background: black
    height: 100%
    left: 0
    position: absolute
    top: 0
    width: 100%
  #preview-images-pending
    background: black
    background: rgba(0, 0, 0, 0.75)
    bottom: 0
    color: white
    font-size: 75%
    padding: .5em
    position: absolute
    right: 0
    z-index: 1000
    &.waiting-on-0
      display: none
  #preview-mode
    margin-right: 1em
    position: absolute
    right: 100%
    text-align: center
    top: 0
    width: 7em
    &.flash-active
      #preview-mode-flash
        +active-mode
    &.image-active
      #preview-mode-image
        +active-mode
      #preview-mode-note, #report-broken-image
        display: block
      // Phasing out the image download section. Not confident enough yet to
      // *remove* it, depending on user feedback, but that's a TODO for down
      // the road if hiding goes well.
      // &.can-download
        // #preview-download-image
          // display: inline-block
  #preview-mode-toggle
    +border-radius(.5em)
    border: 1px solid $module-border-color
    color: $soft-text-color
    font-size: 85%
    list-style: none
    margin: 0 auto .5em
    text-align: center
    width: 5em
    li
      border-top: 1px solid $soft-border-color
      cursor: pointer
      padding: .125em 0
      width: 100%
      &:first-child
        border-top: 0
  #preview-download-image
    display: none
    margin: 1em auto
    h3
      font-size: 125%
      margin-bottom: .5em
    ul
      list-style: none
    button
      font-size: 75%
      width: 100%
  #preview-mode-note, #report-broken-image
    display: block
    font-size: 75%
    margin-top: .5em
    text-align: center
    text-decoration: none
    width: 100%
    em
      font-style: normal
      text-decoration: underline
  #preview-mode-note, #report-broken-image
    display: none
  
  #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
    &.sharing
      #preview-closet
        display: none
      #preview-sharing
        display: block
    .sidebar-view
      margin-top: 1.5em
  #preview-closet
    h2
      margin-bottom: 0
    ul
      text-align: center
    .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
      &[type=submit]
        margin-right: 2em
  .preview-search-form-your-items
    display: none
    font-size: 85%
    margin-right: 1em
  #preview-search-form-pagination
    +inline-block
    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
      float: right
      margin: 0
      position: relative
      width: $sidebar-width
      &.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
          +context-button
    &: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
    
    $outfit-inner-size: 110px
    $outfit-margin: 1px
    $outfit-outer-size: $outfit-inner-size + ($outfit-margin * 2)
    > ul
      +sidebar-view-child
      background: image-url("loading.gif") no-repeat center top
      display: none
      font-family: $main-font
      list-style: none
      margin: 0 auto 1em
      min-height: 16px
      width: $outfit-outer-size * 3
      
      &.loaded
        background: transparent
      
      > li
        +inline-block
        +outfit-star
        height: $outfit-inner-size
        margin: $outfit-margin
        width: $outfit-inner-size
        overflow: hidden
        position: relative
        
        $outfit-header-h-padding: 4px
        $outfit-header-v-padding: 2px
        $outfit-header-inner-width: $outfit-inner-size - (2 * $outfit-header-h-padding)
        header, footer, .outfit-delete-confirmation
          color: white
          font-size: 85%
          left: 0
          padding: $outfit-header-v-padding $outfit-header-h-padding
          position: absolute
          width: $outfit-header-inner-width
          z-index: 2
        
        header, footer
          background: black
          background: rgba(0, 0, 0, 0.75)
        
        header
          +opacity(0.75)
          bottom: 0
          cursor: pointer
        
        footer, .outfit-delete-confirmation
          display: none
          top: 0
        
        .outfit-delete-confirmation
          background: red
          background: rgba(255, 50, 50, 0.75)
          text-align: center
          top: 0
          
          span
            font-weight: bold
        
        $outfit-thumbnail-size: 150px
        $outfit-thumbnail-offset: ($outfit-inner-size - $outfit-thumbnail-size) / 2
        .outfit-thumbnail
          +opacity(.5)
          cursor: pointer
          display: none
          left: $outfit-thumbnail-offset
          position: absolute
          top: $outfit-thumbnail-offset
          z-index: 1
        
        .outfit-star
          bottom: 0
          margin-right: 4px
        
        .outfit-delete
          float: right
        
        .outfit-rename-button
          float: left
        
        .outfit-rename-button, .outfit-delete
          font-size: 85%
          text-decoration: none
          
          &:hover
            text-decoration: underline
        
        .outfit-rename-form
          display: none
          
          input
            background: transparent
            border: 1px solid white
            width: 6em
        
        a
          color: white
        
        &:hover
          header
            +opacity(1)
          
          .outfit-thumbnail
            +opacity(0.75)
          
          footer
            display: block
        
        &.active
          header
            +opacity(1)
            font-weight: bold
          
          .outfit-thumbnail
            +opacity(1)
        
        &.confirming-deletion
          footer
            display: none
          
          .outfit-delete-confirmation
            display: block
        
        &.renaming
          .outfit-name
            display: none
          
          .outfit-rename-form
            display: inline
        
        &.thumbnail-available
          .outfit-thumbnail
            display: block
        
        &.loading
          .outfit-star
            background-image: image-url("loading_outfit_pane.gif")
    
    #preview-outfits-not-logged-in
      text-align: center
      
      img
        border:
          color: $module-border-color
          style: solid
          width: 1px 0
      
      figure
        display: block
        margin: 0 0 1em 0
        padding: 0
      
      figcaption
        display: block
        font-weight: bold
      
      p
        +sidebar-view-child
        font-size: 85%
      
      #preview-outfits-log-in
        +awesome-button
        +loud-awesome-button-color
  
  #preview-sharing
    display: none
    
    #preview-sharing-urls
      +sidebar-view-child
      display: none
      margin:
        bottom: 1em
        top: 1em
    
      li
        display: block
        padding: .25em 0
        width: 100%
        
        label
          display: block
          font-weight: bold
        
        input
          display: block
          width: 100%
    
    #preview-sharing-url-formats
      +sidebar-view-child
      +user-select(none)
      // remove whitespace between inline-block elements
      display: none
      font-size: 0
      text-align: center
      
      li
        +inline-block
        
        border: 1px solid $module-border-color
        border-left-width: 0
        border-right-color: $soft-border-color
        color: $soft-text-color
        cursor: pointer
        font-size: 12px
        padding: 0 2em
        
        &.active
          background: $module-bg-color
          color: inherit
          font-weight: bold
        
        &:first-child
          +border-top-left-radius(5px)
          +border-bottom-left-radius(5px)
          border-left-width: 1px
        
        &:last-child
          +border-top-right-radius(5px)
          +border-bottom-right-radius(5px)
          border-right-color: $module-border-color
    
    #preview-sharing-thumbnail-wrapper
      border: 1px solid $soft-border-color
      display: block
      height: 150px
      margin: 1em auto 0
      position: relative
      width: 150px
      
    #preview-sharing-thumbnail-loading
      height: 100%
      left: 0
      position: absolute
      top: 0
      width: 100%
      
      span
        color: $soft-text-color
        font-size: 85%
        margin-top: -0.75em
        position: absolute
        text-align: center
        top: 50%
        width: 100%
    
    #preview-sharing-thumbnail, #preview-sharing-thumbnail-generating
      display: none
      
    &.urls-loaded
      #preview-sharing-thumbnail-saving
        display: none
      
      #preview-sharing-urls, #preview-sharing-url-formats, #preview-sharing-thumbnail-generating
        display: block
      
    &.urls-loaded.thumbnail-loaded
      #preview-sharing-thumbnail-loading
        display: none
      
      #preview-sharing-thumbnail
        display: block
    
    &.urls-loaded.thumbnail-available
      #preview-sharing-thumbnail-loading
        +opacity(0.85)
      
      #preview-sharing-thumbnail
        display: block

  .preview-sidebar-nav
    float: right
    font-size: 85%
    margin:
      right: $sidebar-unit-horizontal-padding
      top: 1em
  
  $sidebar-border-radius: 10px
  $sidebar-navbar-inner-width: $sidebar-width - 2px
  $sidebar-navbar-child-outer-width: floor($sidebar-navbar-inner-width / 3)
  
  #preview-sidebar
    #preview-sidebar-navbar-closet
      +sidebar-navbar-selected
    
    &.viewing-outfits, &.sharing
      #preview-sidebar-navbar-closet
        +sidebar-navbar-unselected
    
    &.viewing-outfits #preview-sidebar-navbar-outfits, &.sharing #preview-sidebar-navbar-sharing
      +sidebar-navbar-selected
  
  #preview-sidebar-navbar
    +border-radius($sidebar-border-radius $sidebar-border-radius 0 0)
    +clearfix
    +header-text
    background: $module-bg-color
    border: 1px solid $soft-border-color
    border-bottom: 0
    font-size: 150%
    
    > div
      +sidebar-navbar-unselected
      cursor: pointer
      float: left
      border-left: 1px solid $soft-border-color
      padding: .5em 0
      text-align: center
      width: $sidebar-navbar-child-outer-width
      
      &:first-child
        border-left: 0
  
  #preview-sidebar-content
    +border-radius(0 0 $sidebar-border-radius $sidebar-border-radius)
    border: 1px solid $soft-border-color
    border-top: 0
    overflow: auto

  #save-success, #save-error, #outfit-not-found, #preview-sidebar-donation-request
    +sidebar-view-child
    display: none
    margin:
      top: 1em
    text-align: center

  #preview-sidebar-donation-request
    +notice
    font-size: 85%
    padding: 1em

  #preview-sidebar-donation-request-no-thanks
    margin-left: 1em

  #save-success
    +notice

  #save-error, #outfit-not-found
    +error

  #userbar-message
    +opacity(.5)
    display: none

  #new-outfit-name
    font: inherit
    line-height: 1

  #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

  form#save-outfit-form
    +outfit-star-shifted
    display: none
    margin-right: 0
    padding: 0    

    .outfit-star, input, button
      +inline-block
      float: none
      vertical-align: top

    .outfit-star
      margin-top: .25em

  .outfit-url
    font-size: 75%

  #preview-search-form-error
    +error
    padding: .25em .5em

  &.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
        // Phasing out permalink. Shared outfit links have been straight-up
        // removed, but this may stay depending on user feedback. Otherwise,
        // removing it is TODO down the road.
        // #current-outfit-permalink
          // display: inline-block
      &.saving-outfit
        #save-outfit-form
          display: block
        #save-outfit, #save-current-outfit, #save-outfit-copy, #current-outfit-permalink, #shared-outfit-permalink, #share-outfit, #shared-outfit-url
          display: none
    .preview-search-form-your-items
      +inline-block
    #preview-outfits-not-logged-in
      display: none
    #preview-outfits-list
      display: block

  &.user-not-signed-in
    #save-outfit-not-signed-in
      display: inline-block

  #save-outfit-wrapper.shared-outfit
    #shared-outfit-permalink, #shared-outfit-url
      display: inline-block
    #current-outfit-permalink
      display: none !important