require 'js'
require 'uri'

def create_element(tag, **attrs)
  e = @document.createElement(tag)
  attrs.each do |n, v|
    e.setAttribute(n.to_s, v)
  end
  e
end

def draw
  if @img_rabbit[:parentElement] == JS::Null
    parent = @document.getElementById('viewerContainer')
    parent.appendChild(@img_turtle)
    parent.appendChild(@img_rabbit)
  end

  page = @document.getElementById('pageNumber')
  cur = page[:value].to_i
  max = page[:max].to_i
  if cur > 1 && !@start_time
    @start_time = Time.now.to_i
  end
  return unless @start_time

  win = JS.global[:window]
  width = win[:innerWidth].to_i - @img_rabbit[:width].to_i
  left = width * (cur - 1) / (max - 1)
  @img_rabbit[:style][:left] = "#{left}px"
  return unless @allotted_time > 0

  width = win[:innerWidth].to_i - @img_turtle[:width].to_i
  left = width * (Time.now.to_i - @start_time) / @allotted_time
  @img_turtle[:style][:left] = "#{left}px" if left < win[:innerWidth].to_i + 200
end

def start
  if @started
    @start_time = nil
    @img_turtle[:style][:left] = '0px'
    return
  end
  @started = true
  @document = JS.global[:document]
  uri = URI.parse(JS.global[:location].to_s)
  q = URI.decode_www_form(uri.query.to_s).to_h
  @allotted_time = q['allotted_time'].to_i * 60
  @img_rabbit = create_element(
    'img',
    id: 'rabbit-rabbit',
    style: 'position:fixed; bottom:0px; left:0px; width:5%',
    src: 'https://tmtms.net/rabbit/rabbit.png'
  )
  @img_turtle = create_element(
    'img',
    id: 'rabbit-turtle',
    style: 'position:fixed; bottom:0px; left:0px; width:5%; visibility:hidden',
    src: 'https://tmtms.net/rabbit/turtle.png'
  )
  @img_turtle[:style][:visibility] = 'visible' if @allotted_time > 0
  JS.global.setInterval(->{draw}, 300)
end