# This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
PeriodismoVivoWizard = ->
  @datos = periodismo_vivo_test
  @respondidas = []
  @posiciones = {}

  @inicializar = ->
    respondidasObs = ko.getObservable(this, 'respondidas')
    respondidasObs.subscribe (newValue) =>
      @actualizarSlider()

    @prepararAnimaciones()
    @reiniciar()

  @reiniciar = ->
    @ocultarPregunta pregunta for pregunta in @datos.preguntas
    $("#resultado").hide()
    $("#inicio").show()
    $("#camarografo").show()
    $("#avion").removeAttr('style')
    $("#inicio_globo").show()
    $("#nena_inicio").removeAttr('style')
    $("#nena_inicio").show()
    $("#slider_luz").hide()


  ## Oculta las preguntas preventivamente
  @ocultarPregunta = ( item ) ->
    pregunta = $("#pregunta_#{item.orden}_bloque")
    pregunta.hide()

  ## Guarda la posición actual del objeto
  @guardarPosicionActual = (selector) ->
    $obj = $(selector)

    if ($obj.length > 1)
      @guardarPosicionActual obj for obj in $obj
    else
      item = {}
      item.$obj = $obj
      item.css = item.$obj.css(["left", "top"])
      @posiciones[$obj.prop('id')] = item

  ## Crea las funciones de la animación correspondiente a la pregunta
  @crearFuncionAnimacionPregunta = (item) ->
    $pregunta_grupo = item.$obj.children("div")
    $pregunta = $pregunta_grupo.children("div")
    $respuestas = $pregunta_grupo.find("li")
    $anterior = item.$obj.children("button")

    animarIn = (item) ->
      item.$obj.show()
      TweenMax.set item.$obj, {clearProps: "all"}
      TweenMax.set $pregunta_grupo, {clearProps: "all"}
      # TweenMax.from $pregunta_grupo, 1, {y: -100, autoAlpha: 0, scale: 0, ease:Linear.easeNone}

      TweenMax.set $pregunta, {clearProps: "all"}
      TweenMax.from $pregunta, 1, {y: -100, autoAlpha: 0, scale: 0, ease:Linear.easeNone}

      TweenMax.set $respuestas, {clearProps: "all"}
      TweenMax.staggerFrom $respuestas, 0.5, {x: 500, autoAlpha: 0, ease:Linear.easeNone, delay: 1}, 0.5

      TweenMax.set $anterior, {clearProps: "all"}
      TweenMax.from $anterior, 0.5, {autoAlpha: 0, x: -200, ease:Linear.easeNone}

    animarOut = (item) ->
      $anterior.hide()
      TweenMax.to item.$obj, 1, {
        ease:Linear.easeNone, y: 500, rotation: 360, onComplete: ->
          item.$obj.hide()
      }

    item.animarIn = () ->
      animarIn(item)
    item.animarOut = () ->
      animarOut(item)

  @prepararAnimaciones = () ->
    # guardo la posición actual de lo que hay acá
    # inicio

    animables = [ "#inicio", "#inicio_globo", "#nena_inicio", "#camarografo",
                  "avion", ".pregunta_grupo", "#resultado", "#slider_linea_progreso" ]
    @guardarPosicionActual selector for selector in animables

    preguntas = (@posiciones["pregunta_#{pregunta.orden}_bloque"] for pregunta in @datos.preguntas)
    @crearFuncionAnimacionPregunta pregunta for pregunta in preguntas

  ## arranca con el wizard
  @comenzarCuestionario = ->
    $("#inicio").hide()

    @posiciones["pregunta_1_bloque"].animarIn()
    @respondidas.length = 0

    $("#camarografo").hide()
    $("#avion").animate({left: "40px", top: "200px"}, 500)
    $("#inicio_globo").hide()
    $("#nena_inicio").css({transform: "scale(0.7)"});
    $("#nena_inicio").animate({left: "520px", top: "110px"}, 500)
    $("#slider_linea_progreso").removeAttr('style')
    $("#slider_luz").show()

  # al responder la pregunta "por segunda vez" cambia la lista resultante
  # esto lo hacemos para que los que están observando el avance de las preguntas
  # se refresquen
  @limpiarRespuesta = ( pregunta_orden ) ->
    removidos = _.remove @respondidas, (r) ->
      r.pregunta_orden == pregunta_orden

    if (removidos)
      # le aviso a ko que se modificó el dato y esto debería ejecutar los subscriptores
      respondidasObs = ko.getObservable this, "respondidas" # valueHasMutated()
      respondidasObs.valueHasMutated()
    return removidos

  ## la próxima pregunta
  @proxima = ( respuesta, pregunta, index_pregunta ) ->
    @limpiarRespuesta pregunta.orden

    @respondidas.push({
      pregunta_orden: pregunta.orden,
      respuesta_opcion: respuesta.opcion,
      pregunta: pregunta,
      respuesta: respuesta })

    @posiciones["pregunta_#{pregunta.orden}_bloque"].animarOut()

    if (index_pregunta < (@datos.preguntas.length-1))
      # me muevo a la próxima pregunta
      @posiciones["pregunta_#{pregunta.orden+1}_bloque"].animarIn()
    else
      # muestro los resultados
      @mostrarResultado()

  # vuelve para atrás la pregunta actual y resetea la respuesta
  @anterior = ( pregunta ) ->
    @limpiarRespuesta (pregunta.orden-1)
    @posiciones["pregunta_#{pregunta.orden}_bloque"].animarOut()
    @posiciones["pregunta_#{pregunta.orden-1}_bloque"].animarIn()

  # muestra los resultados al final de todas las preguntas
  @mostrarResultado = ->
    $("#slider_luz").hide()

    $("#resultado").show()
    $("#avion").removeAttr('style')

    $("#nena_inicio").css({transform: "scaleX(-1)"});
    $("#nena_inicio").animate({left: "20px", top: "95px"}, 100)

  @actualizarSlider = ->
    console.log("@actualizarSlider", @respondidas)
    # máximo es 350px
    $slider_linea_progreso = @posiciones["slider_linea_progreso"]
    if (@respondidas && $slider_linea_progreso)
      startLeftPos = parseInt($slider_linea_progreso.css.left, 10)
      distanciaPorRecorrer = 350 - startLeftPos
      # ponemos una menos porque el final ya no nos importa, son los resultados
      totalPreguntas = @datos.preguntas.length - 1
      cantRespondida = @respondidas.length
      distanciaPorRespuesta = (distanciaPorRecorrer / totalPreguntas)
      distanciaRecorrida = startLeftPos + (distanciaPorRespuesta * cantRespondida)
      $slider = $("#slider_linea_progreso")
      console.log "animate para a #{distanciaRecorrida} porque hay #{cantRespondida} respondidas"
      $slider.animate({left: "#{distanciaRecorrida}px"}, 500)

  @resultado = ->
    opciones = {
      "1": { key: "1", value: 0 },
      "2": { key: "2", value: 0 },
      "3": { key: "3", value: 0 },
      "4": { key: "4", value: 0 }
    }

    @contarResultados = (respondida) ->
      opciones[respondida.respuesta_opcion].value++;

    @contarResultados respondida for respondida in @respondidas

    maximo = _.max opciones, (item) ->
      item.value

    @datos.max_respuestas[maximo.key]

  ko.track this




# ---------------------------------------------------------------------------------------------
# Activates knockout.js
ko.punches.enableAll()
model = new PeriodismoVivoWizard()
ko.applyBindings model

model.inicializar()