skits.js.coffee

# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/

# A word of warning. I'm aware that this is a bit of mess. Development is comprimise; tread lightly.

delgator = (state) ->
  # Deal with any changes
  $.each state.addedKeys, (index, key) ->
    console.log("Added keys", index, key)
    console.log("Executing #{key.key}(#{key.value})")
    eval("#{key.key}(#{key.value})")

getQuestion = (scenario_id, text_language, answer_language) ->
    $.getJSON "/scenarios/#{scenario_id}/questions/random", {text_language, answer_language},
      (data) ->
        $("#message").html("<p>#{data["text"]}</p>")

getScenario = (scenario_id) ->
  # Clear the area
  $(".prop-container").html('')
  $("#scenario-tools").html('')
  # Load scene
  $.getJSON ("/scenarios/#{scenario_id}/show_scene"), {},
    (data) ->
      # Push out the old scene
      $("#scene").hide("slide", { direction: "left" }, 1000)
      
      $("#scene").html("<img src=#{data["image"]["url"]} id='scene-image' />")
      $("#scene-image").load () ->
        # TODO: An odd jerk shows up at the end of the animation. Possibly margin related?
        $("#scene").show "slide", { direction: "right" }, 1000, ()->
          # Load Props.
          $(".prop-container").html('')
          $.getJSON ("/scenarios/#{scenario_id}/props/"), {},
            (data) ->
              $.each data, (index, prop) ->
                $(".prop-container").append("<img src='#{prop.image.url}' id='#{prop.name}' class='prop' style='top:#{prop.y}px; left:#{prop.x}px;'/>")
                $("##{prop.name}").show("bounce", {times: 0}, "fast")
                $("##{prop.name}").draggable(true, { containment: "parent" })     
          

      $("#scenario-tools").append("<li><a id='random-question' href='#load-question'>Random Question</a></li>")
      $("#scenario-tools").append("<li class='divider-vertical'></li>")

  # Load available masks.
  $.getJSON ("/scenarios/#{scenario_id}/masks/"), {},
    (data) ->
      $.each data, (index, mask) ->
        $("#scenario-tools").append("<li><a id='load-mask' href='#load-mask' data-id=#{mask["id"]}>Load #{mask["name"]}</a></li>")


  # Pull back the curtains and start the show
  if ($(".inner-curtain").is(":visible"))
    $(".left-curtain").hide("slide", { direction: "left" }, 2000)
    $(".right-curtain").hide("slide", { direction: "right" }, 2000)

  $(".infotainment .exclamation #text").html("<span>Loaded!</span>")

loadMask = (scenario_id, mask_id) ->
  console.log("loading mask")
  $.getJSON ("/scenarios/#{scenario_id}/masks/#{mask_id}"), {},
    (data) ->
      console.log("data fetched", data)
      window.overlay = null
      image = gapi.hangout.av.effects.createImageResource(data.image.url)
      console.log("Image resource", image)
      window.overlay = image.createFaceTrackingOverlay(
        'trackingFeature': data.track
        'rotateWithFace': data.rotate_with_face
        'scaleWithFace': data.scale_with_face
        'scale': data.scale
        'rotation': data.rotation
        'offset':
          'x': data.x_offset
          'y': data.y_offset)
      
      console.log("overlay", overlay)
      window.overlay.setVisible(true)



$ ->
  gapi.hangout.onApiReady.add ()->
    gapi.hangout.data.onStateChanged.add (data) ->
      window.state = data
      console.log("change!", data)
      delgator(data)

  $("#load-scenario").click ->
    window.scenario_id = $(this).data("id")
    scenario_id = $(this).data("id")

    gapi.hangout.data.setValue("getScenario", scenario_id.toString())

    #getScenario(window.scenario_id)

  $(document).on "click", "#random-question",
    () ->
      getQuestion(window.scenario_id,"English", "English")

  $(document).on "click", "#load-mask",
    () ->
      loadMask(window.scenario_id, $(this).data("id"))