gistfile1.coffee

class Opjam.Models.Wall extends Backbone.Model
  paramRoot: 'wall'

  defaults:
    numColumns: 16
    numRows: 4
    radius: 600 # Radius of the virtual circle

    currentRotation: -12 # Initial position, measured in columns
    animationDegree: 0.25 # Degrees per frame of animation

  degreesPerColumn: =>
    360 / @numColumns() 

  numColumns: =>
    @get("numColumns")

  radius: =>
    @get("radius")

  animationDegree: ->
    @get("animationDegree")

  currentRotation: ->
    @get("currentRotation")

  incrementCurrentRotation: (increment)=>
    rotation = @get("currentRotation")
    @set {currentRotation: (rotation + increment)}

  currentRotationDegrees: -> # The current position, in columns * degrees per column
    @currentRotation() * @degreesPerColumn()


  # Number of frames in the rotation
  # e.g. if we want to rotate 15 degrees at 0.25 degrees per frame
  # We must have 60 frames
  rotationFrames: ->
    @degreesPerColumn() / @animationDegree()



class Opjam.Views.WallView extends Backbone.View

  el: "#wall"

  events:
    "click #next" : "next"
    "click #prev" : "prev"
  
  initialize: ->
    @rotater = $("#rotate")[0]
    @setupImages()
    @initPosition()


  setupImages: ->
    for ring in $("#wall .ring")
      for plate, i in $("a", ring)
        transform = 'rotateY(' + (-@model.degreesPerColumn() * i) + 'deg) translateZ(' + -1 * @model.radius() + 'px)'
        plate.style.webkitTransform = transform 
        $(plate).addClass("poster")

  next: ->
    @rotate(1)
    false
    
  prev: =>
    @rotate(-1)
    false

  rotate: (increment) =>
    @delegateEvents [] # Unbind all clicks
    @animateRotate @model.rotationFrames(), 
      (increment * @model.animationDegree()), 
      @model.currentRotationDegrees()
    @model.incrementCurrentRotation(increment)

  # Always work in degrees here
  animateRotate: (frames, increment, current) ->
    if frames > 0
      current = current + increment
      transform = 'rotateY(' + current + 'deg)'
      @rotater.style.webkitTransform = transform
      setTimeout (=>
        @animateRotate((frames - 1), increment, current)
      ), 0.1
    else
      @delegateEvents @events

  initPosition: ->
    transform = 'rotateY(' + @model.currentRotationDegrees() + 'deg)'
    @rotater.style.webkitTransform = transform