## Breakpoints

breakpointSmall = 380
breakpointMedium = 767
breakpointLarge = 1024

## Functions

# getImageSizesStart = ->
#   $(".figure--slide img").load ->
#     sliderHeight = $(this).height()
#     $(".figcaption--wrapper").css "height", sliderHeight
#     return
#   return

# getImageSizes = ->
#   sliderHeight = $(".figure--slide img").height()
#   $(".figcaption--wrapper").css "height", sliderHeight
#   return


## Mobile Navigation
# mobileNavigation = (mobileTrigger, targetNav, mobileWidth, time) ->

#   ## Set and Unset the mobile Navigation
#   enquire.register "screen and (max-width:"+mobileWidth+"px)",
#     match: ->
#       $(''+mobileTrigger+'').removeClass('is--active').show()
#       $(''+targetNav+'').hide().addClass('is--mobile-nav').removeClass('is--active')
#       return
#     unmatch: ->
#       $(''+mobileTrigger+'').removeClass('is--active').hide() 
#       $(''+targetNav+'').show().removeClass('is--mobile-nav is--active')
#       return

#   $(''+mobileTrigger+'').click ->
#     $(this).toggleClass('is--active')
#     $(''+targetNav+'').toggleClass('is--active').slideToggle(time)
#     return
#   return

## Aspect Ratio helper
## e.g: $('selector').getAspect(359,119,0,'','height')
(($) ->
  jQuery.fn.getAspect = (ratioW, ratioH, offset, target, attr) ->
    @each ->
      t = $(this)
      $(window).on("resize", ->
        containerWidth = $(window).width()
        newHeight = ratioH / ratioW * containerWidth + offset

        if(target == '')
          t.css(attr,newHeight)
        else
         $(''+target+'').css(attr,newHeight)
        console.log(newHeight)
        return
      ).resize()
      return
    return
  return
) jQuery

$(document).ready ->
  <% if (bowerExtraReponse) { %>
  Response.create [
    prop: "width"
    prefix: "min-width-"
    breakpoints: [1180, 1024, 961, 768, 560, 481, 320, 0]
    lazy: true
  ,
    prop: "height"
    prefix: "min-height-"
    breakpoints: [800, 700, 600, 500, 481, 300, 200, 100, 0]
    lazy: true
  ,
    prop: "device-pixel-ratio"
    breakpoints: [0, 1, 1.5, 2]
  ]
  <% } %>
  <% if(bowerResImg) { %>
  ## Initial Responsive Image
  $("img").responsiveImg
    breakpoints:
      "_small":breakpointSmall
      "_medium":breakpointMedium
      "_large":breakpointLarge
    srcAttribute : "data-src"
    pathToPHP : "components/js"
    createNewImages : true
    jpegQuality : 80
  <% } %>

  ## Activate Placeholder
  # $('input, textarea').placeholder()


  ## Activate jKit
  # $('body').jKit()

  ## Modify Selectform
  # $('.select').select2
  #   maximumSelectionSize: 3
  #   placeholder: "Select a State",
  #   allowClear: true

  ## NoUiSlider
  # $('.noUiSlider').noUiSlider
  #   range: [20,100]
  #   start: [40,80]
  #   step: 1
  #   handles: 2
  #   slide: ->
  #     values = $(this).val()
  #     $('.slider-text--left').text(values[0])
  #     $('.slider-text--right').text(values[1])
  #     return

  ## Flowing Slider Caption
  # getImageSizesStart()

  ## Progress Bar 
  # $(".progress-bar").each (index, object) ->
  #   if $(this).data("progress-length") >= 0
  #     progressBarLength = $(this).data("progress-length")
  #     $(this).find("div").animate
  #       width: progressBarLength + "%"
  #         , 1000
  #   return

  ## Switch Trigger ON
  $('.jSwitch-on').click ->
    $(this).addClass('is--active')
    targetSwitchOn = $(this).data('framr-switch')
    $(targetSwitchOn).addClass('is--active')
    return

  ## Switch Trigger OFF
  $('.jSwitch-off').click ->
    $(this).removeClass('is--active')
    targetSwitchOff = $(this).data('framr-switch')
    $(targetSwitchOff).removeClass('is--active')
    return

  ## Toggle Trigger
  $('.jToggle').click ->
    $(this).toggleClass('is--active')
    targetToggle = $(this).data('framr-toggle')
    $(targetToggle).toggleClass('is--active')
    return

  ## Call the Mobile Navigation Function
  # mobileNavigation('.mobile-menu','.site--navigation',480,100)

  ## Sidr Navigation
  # $('#simple-menu').sidr
  #   name: 'sidr'
  #   side: 'left' 



  ## Own Fileupload
  # eg.:
  # <div class="pseudo-fileupload">
  #   <span class="file-message">Choose your Upload</span>
  #   <input type="file" name="fileupload" class="file-type">
  #   <button type="button" class="btn btn--third file-button">Upload</button>
  # </div><!-- pseudo-fileupload -->

  # fileUploadMod = ->
  #   $(".file-message").html $(".file-type").val().replace(/C:\\fakepath\\/i, '')
  # return

  # $(".file-button").on "click", -> 
  #   $(".file-type").click()
  #   setInterval fileUploadMod, 1
  #   false
  #   return 

  return

## Conditionizr Checks
conditionizr
  debug: false
  scriptSrc: false
  styleSrc: false
  ieLessThan:
    active: true
    version: "9"
    scripts: false
    styles: false
    classes: true
    customScript: false

  chrome:
    scripts: false
    styles: false
    classes: true
    customScript: false

  safari:
    scripts: false
    styles: false
    classes: true
    customScript: false

  opera:
    scripts: false
    styles: false
    classes: true
    customScript: false

  firefox:
    scripts: false
    styles: false
    classes: true
    customScript: false

  ie10:
    scripts: false
    styles: false
    classes: true
    customScript: false

  ie9:
    scripts: false
    styles: false
    classes: true
    customScript: false

  ie8:
    scripts: false
    styles: false
    classes: true
    customScript: false

  ie7:
    scripts: false
    styles: false
    classes: true
    customScript: false

  ie6:
    scripts: false
    styles: false
    classes: true
    customScript: false

  retina:
    scripts: false
    styles: false
    classes: true
    customScript: false

  touch:
    scripts: false
    styles: false
    classes: false
    customScript: false

  mac: true
  win: true
  x11: true
  linux: true