var app = (function(){

  var app = {}

  app.init = function(){
    upload.init()
    app.bind()
    app.build()
    app.resize()
    app.route()
  }
  app.bind = function(){
    $(window).on('resize', app.resize)
    $(".about_button").on('click', app.about_show)
    $(".privacy_button").on('click', app.privacy_show)
    $(".modal").on('click', app.modal_hide)
    $(".modal .btn").on('click', app.modal_hide)
    $(".modal .inner").on('click', preventDefault)
    $("#destroy_data").on('click', app.destroyData)
    $("#show_all_results").on('click', app.showAllResults)
  }
  app.build = function(){
    var items = JSON.parse(decodeEntities($("#dropdown_options").html()))
    var $dropdown = $("#dropdown")
    var options = Object.keys(items).sort().map(key => {
      var item = items[key]
      var option = document.createElement('option')
      option.value = item.name
      option.innerHTML = item.title
      if (item.selected) option.selected = true
      $dropdown.append(option)
    })
    var loader = new Image ()
    loader.src = '/static/img/loader.gif'
  }
  app.resize = function(){
    var $el = $('#photo_area')
    var w = $el.width()
    $el.height($el.width())
  }
  app.route = function(){
    const path = window.location.pathname.split('/')
    path.shift()
    switch (path[0]) {
      case 'd':
        app.processingComplete(path[1], true) // public
        break
      case 'p':
        app.processingComplete(path[1], false) // private
        break
      case 'about':
        app.about_show()
        break
      case 'privacy':
        app.privacy_show()
        break
      default:
        // load index, default state
        break
    }
  }

  /* upload UI changes */

  app.didPickPhoto = function(){
    $('#upload_controls').fadeIn()
    $('#user_photo_canvas').show()
    $('#take_photo_btn').hide()
  }
  app.didClickUpload = function(){
    $('#upload_controls').slideUp('fast')
    $('#user_photo_canvas').hide()
    $('#preloader_anim').fadeIn('fast')
    $('#progress').fadeIn()
  }
  app.uploadDidComplete = function(){
    $('#preloader_anim').hide()
    $('#progress').hide()
  }
  app.uploadDidComplete = function(){
    // $('#preloader_anim').hide()
    // $('#progress').hide()
  }
  app.updateProgress = function(message, percentage){
    message = message || "Processing..."
    percentage = percentage || 0
    $("#progress").html(message)
  }
  app.processingComplete = function(uuid, is_public){
    $('#preloader_anim').hide()
    $('#progress').hide()
    // 
    $("header h2").html("Your dull result")
    $(".upload_view").hide()
    $(".results_view").show()
    var endpoint = is_public ? 'json' : 'json_private'
    $.getJSON('/static/media/' + endpoint + '/' + uuid + '.json', function(data){
      console.log(data)
      var template = $("#result_template").html()
      var final_result = new Image
      final_result.src = data.files[data.files.length-1].fn
      $(".final_result").empty()
      $(".all_results").empty()
      $(".final_result").append(final_result)
      data.files.forEach(function(file){
        var t = template.replace(/{img}/, file.fn).replace(/{title}/, file.title)
        $(".all_results").append(t)
      })
      $(".result_view").show()
      $(".permalink").attr('href', window.location.href)
    }).fail(function(){
      console.log('error fetching json')
      window.location.href = '/'
    })
  }
  var detailed = false
  app.showAllResults = function(){
    if (!detailed) {
      detailed = true
      $(this).html('Hide')
      $(".all_results").fadeIn('fast')
    } else {
      detailed = false
      $(this).html('Detailed Analysis')
      $(".all_results").slideUp('fast')
    }
  }
  app.destroyData = function(){
    var uuid = window.location.pathname.split('/')[2]
    var confirmed = confirm("Do you really want to delete your dull dream?")
    if (confirmed) {
      $.get( [window.location.pathname, 'destroy'].join('/').replace('//', '/') ).always(function(){
        alert('Dull dream deleted!')
        window.location.href = '/'
      })
    }
  }

  /* modals */

  app.about_show = function(e){
    e.preventDefault()
    $(".about_view").addClass('visible')
  }
  app.privacy_show = function(e){
    e.preventDefault()
    $(".privacy_view").addClass('visible')
  }
  app.modal_hide = function(e){
    e.preventDefault()
    e.stopPropagation()
    $(".modal").removeClass('visible')
  }

  document.addEventListener('DOMContentLoaded', app.init)

  return app
})()