ballalama3_app/app/assets/javascripts/popover.coffee

bottom = 0
prev_link = ""

$("document").ready ->
  
  position_img_now = ->
    
    
    
   # alert $("#large .large-img").outerHeight(false)
    
    imgheight = $("#large .large-img").outerHeight(false) + $("#large h3").outerHeight(false) 
    
     
    margintop = (( $(window).height() - imgheight) / 2 )
   
    $("#large .large-img").css
      "margin-top" :(margintop+"px")
      #"width" : "100px"

    
    
  position_img = ->
    $("#large .large-img").one "load", ->
      
      position_img_now()
    
  
  
  $(".video_expand").click ->
    maxwidth = 1000
    maxheight = 900

    
    
    
    prev_link = $(this)
    $("body").append "<div id='large'></div>"
    title = false

    
    $("#large").append "<div class='img_container first video_container' style='width:90%;margin:auto;'></div>"
    $("#large").append "<img src='/close.png' class='close_link' />"
    if $(this).data("video-type") == "youtube"
      $(".img_container.first").append '<div class="video-container"><iframe width="1000" height="563" src="'+$(this).data("video-url")+'" frameborder="0" allowfullscreen></iframe></div>'
    else if $(this).data("video-type") == "vimeo"
      $(".img_container.first").append '<div class="video-container"><iframe src="'+$(this).data("video-url")+'" width="1920" height="1080" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>'
    
    $(".img_container.first").append "<div class='links'>"+$(this).data("twitter-link")+$(this).data("facebook-link")+"<div>"
    $(".img_container.first").append "<h3>"+$(this).data("video-title")+"</h3>"
    $(".img_container.first").append "<div class='description'>"+$(this).data("video-description")+"</div>"
    $(".img_container.first").append "<div class='clear'></div>"
    
      
    
    $("#large").fadeIn(500)
    position_img();
    if $(window).height() > (maxheight+100)
      $("#large .large-img").css
        "max-height" : maxheight
    else
      $("#large .large-img").css
        "max-height" : "85%"
        
    if $(window).width() > (maxwidth+100)
      $("#large .large-img").css
        "max-width" : maxwidth
    else
      $("#large .large-img").css
        "max-width" : "85%"
    popover_resize();
    
    $("#large .img_container.first").css
      "padding-top": (($(window).height()- $("#large .img_container.first iframe").height()-50)/ 2)+"px"
    #position_img();
    
    
    false
  
  
  $(".expandable_image").click ->
    maxwidth = 1000
    maxheight = 900
    alert "t"

    
    
    prev_link = $(this)
    $("body").append "<div id='large'></div>"
    title = false
    alert "te"
    
    
    $("#large").append "<div class='img_container first'></div>"
    $("#large").append "<img src='/close.png' class='close_link' />"
    $(".img_container.first").append "<img src="+$(this).attr("href")+" class='large-img' />"
    
    if $(this).attr "title"
      title = $(this).attr "title"
      $(".img_container.first").append "<h3>"+title+"</h3>"
      
    $("#large .large-img").one "load", ->
      $("#large").fadeIn(500)
    position_img();
    if $(window).height() > (maxheight+100)
      $("#large .large-img").css
        "max-height" : maxheight
    else
      $("#large .large-img").css
        "max-height" : "85%"
        
    if $(window).width() > (maxwidth+100)
      $("#large .large-img").css
        "max-width" : maxwidth
    else
      $("#large .large-img").css
        "max-width" : "85%"
    
    position_img();
    
    alert "t"
    false
  
  
  $(".rea-gal a").click ->
    maxwidth = 1000
    maxheight = 900
    
    
    prev_link = $(this)
    $("body").append "<div id='large'></div>"
    title = false
    
        
    $("#large").append "<img src='/arrow-next.png' class='next' />"
    $("#large").append "<img src='/arrow-prev.png' class='prev' />"
    $("#large").append "<img src='/close.png' class='close_link' />"
    
    $("#large").append "<div class='img_container first'></div>"
    $(".img_container.first").append "<img src="+$(this).attr("href")+" class='large-img' />"
    
    if $(this).attr "title"
      title = $(this).attr "title"
      $(".img_container.first").append "<h3>"+title+"</h3>"
      
    $("#large .large-img").one "load", ->
      $("#large").fadeIn(500)
    position_img();
    if $(window).height() > (maxheight+100)
      $("#large .large-img").css
        "max-height" : maxheight
    else
      $("#large .large-img").css
        "max-height" : "85%"
        
    if $(window).width() > (maxwidth+100)
      $("#large .large-img").css
        "max-width" : maxwidth
    else
      $("#large .large-img").css
        "max-width" : "85%"
    
    position_img();
    
    
    false
  
  
  
  $("body").on "click", "#large", ->
    $(this).fadeOut 300, ->
      $(this).remove()
    
    
  $("body").on "click" ,"#large .prev",->
    
    if prev_link.prev("a").length > 0
      link = prev_link.closest("a").prev("a")
      
      
      
    else
      link = prev_link.closest("div").children("a:last")
    
   
    #titre = photo.find("h3")
    $(".img_container.first").fadeOut 300, ->
      $("#large h3").remove()
      if link.attr "title"
        title = link.attr "title"
        $(".img_container.first").append "<h3>"+title+"</h3>"
      
      
      $('#large .large-img').attr("src", link.attr("href"))
      $("#large .large-img").one "load", ->
        $(".img_container.first").fadeIn()
      position_img();
    prev_link = link
    
    false
  
  
  $("body").on "click" ,"#large .next",->
    
    if prev_link.next("a").length > 0
      link = prev_link.closest("a").next("a")
      
      
      
    else
      link = prev_link.closest("div").children("a:first")
    
   
    #titre = photo.find("h3")
    
    $(".img_container.first").fadeOut 300, ->
      $("#large h3").remove()
      if link.attr "title"
        title = link.attr "title"
        $(".img_container.first").append "<h3>"+title+"</h3>"
      
      $('#large .large-img').attr("src", link.attr("href"))
      $("#large .large-img").one "load", ->
        $(".img_container.first").fadeIn()
      position_img();
    prev_link = link
    
    false
  
  

  left =0
  
  top = 0
  offset= 0
  
  popover_resize = ->
    

    
 
    

        
    $(".rea-gal").each ->
      
      $(this).find("img").css "width", Math.floor(((100) )/ 5)+"%"
    
    
    $("#large").css "min-height", ($(window).height()-30)+"px"
  
    $(".slider").each ->
      $(this).css({"width": $(window).width()+"px"})
    
      height = ($(window).height())
      optimal_height = Math.round($(this).width()/ 1.66)
      if optimal_height < height
        height = optimal_height
  
      $(this).css({"height": height+"px"})

    
    position_img_now();
  
 
  
  
  popover_resize()
  
  $(window).on "popover_resize", ->
    popover_resize()