$ = jQuery

toReplace = 0
replaced = 0

class imageReplacer
  constructor: (@orig, @src) ->
    @replacement = new Image()
    @replacement.onload = @replace
    @replacement.src = @src
    toReplace++
    @updateText()
  replace: =>
    $(@orig).replaceWith(@replacement)
    replaced++
    @updateText()
  updateText: =>
    if ((toReplace-replaced)>0)
      $('.loading').text('Please be patient, loading high-quality images ('+replaced+'/'+toReplace+')')
    else
      $('.loading').text('')

loadHighRes = ->
  images = $('img')
  for image in images
    new imageReplacer(image, image.src.replace('.small.', '.'))

zoomIn = ->
  width = $('.paper').width()
  $('.paper').width(width*1.1)

zoomOut = ->
  width = $('.paper').width()
  $('.paper').width(width*(1/1.1))

fitPageHeight = ->
  page_height = $('.paper img').height()
  page_width = $('.paper img').width()
  window_height = $(window).height() - $('.menu').height()
  # We now want to set page_height=window_height, but through page_width
  $('.paper').width(window_height*(2*page_width/page_height))

updatePageNumber = ->


$ ->
  menu = $('.menu').text('')
  $('<button>').text("Zoom Out").click(zoomOut).appendTo(menu)
  $('<button>').text("Zoom In").click(zoomIn).appendTo(menu)
  $('<button>').text("Fit Page Height").click(fitPageHeight).appendTo(menu)
  $('<div>').addClass('loading').appendTo(menu)
  $('.spacer').height(menu.height())
  $('.paper').scroll(updatePageNumber)
  loadHighRes()