class App
  
  checkers: []
  targetColumn: 0
  columnValue: [ 0 , 0 , 0 , 0 , 0 , 0 , 0 ]
  
  currentColor: "red"
  resizing: false
  
  constructor: ->
    
    @.getElements()
    @.addListeners()
    @.render()
    
    @.makeChecker @.currentColor
    
  getElements: ->
    
    @.board = document.querySelector ".board"
    @.columns = @.board.getElementsByClassName "column"
    @.checkerHolder = document.querySelector ".checkers"
    @.resetButton = document.querySelector ".reset"
    
  addListeners: ->
    
    window.addEventListener "resize" , @.onResize
    @.resetButton.addEventListener "click" , @.onReset
    
    i = 0
    for column in @.columns
      column.setAttribute "data-num" , i
      column.addEventListener "mousemove" , @.onColumnOver
      column.addEventListener "click" , @.onColumnClick
      i++
    @.onResize()
    
  onReset: =>
        
    console.log "resetting"
    if @.currentColor is "red" then @.currentColor = "black" else @.currentColor = "red"
    for checker in @.checkers
      checker.parentNode.removeChild checker
    @.checkers = []
    @.columnValue = [ 0 , 0 , 0 , 0 , 0 , 0 , 0 ]
    @.makeChecker @.currentColor
    
  onColumnOver: ( e ) =>
    @.targetColumn = parseInt( e.target.getAttribute( "data-num" ))
    
  onColumnClick: ( e ) =>
    @.targetColumn = parseInt( e.target.getAttribute( "data-num" ))
    @.dropChecker()
    
  dropChecker: =>
    for checker in @.checkers
      if checker.state.active is true and @.columnValue[ @.targetColumn ] < 6
      
        checker.state.x = @.bounds.width / 7 * checker.state.column
        checker.state.row = 5 - @.columnValue[ @.targetColumn ]
        @.columnValue[ @.targetColumn ]++
        checker.state.active = false
        
        if @.currentColor is "red" then @.currentColor = "black" else @.currentColor = "red"
        @.makeChecker @.currentColor
    
  onResize: =>
    
    @.bounds = @.board.getBoundingClientRect()
    s = @.bounds
    style = "
      top: #{s.top}px; 
      left:#{s.left}px; 
      width: #{s.width}px; 
      height: #{s.height}px;
    "
    
    @.resizing = true
    clearTimeout @.resizeDebounce
    @.resizeDebounce = setTimeout =>
      @.resizing = false
    , 60
    
    @.checkerHolder.setAttribute "style" , style
    
  makeChecker: ( color ) ->
    
    checker = document.createElement "div"
    checker.setAttribute "class" , "checker #{color}"
    
    checker.state =
      initialized: false
      active: true
      row: -1.5
      column: 0
      x: 0
      y: 0
      
    @.checkerHolder.appendChild checker
    @.checkers.push checker
      
  render: =>
    
    requestAnimationFrame @.render
    @.updateCheckers()
    
  updateCheckers: ->
    
    for checker in @.checkers
      
      if checker.state.active is true then checker.state.column = @.targetColumn
      
      u = @.bounds.width / 7
      
      targetX = u * checker.state.column
      targetY = u * checker.state.row
      
      if checker.state.initialized is true and @.resizing is false
         
        checker.state.x = @.ease checker.state.x , targetX
        if Math.abs( checker.state.x - targetX ) < u * 0.2
          checker.state.y = @.ease checker.state.y , targetY
        
      else
        
        checker.state.initialized = true
        checker.state.x = targetX
        checker.state.y = targetY
      
      @.transform checker , checker.state.x , checker.state.y
      
  ease: ( current , target ) ->
    
    diff = current - target
    if Math.abs( diff ) > 0.1
      current -= diff * 0.2
    else
      current = target
      
  transform: ( element , x , y ) ->
    
    prefixes = [ "webkitTransform" , "transform" ]
    for prefix in prefixes
      element.style[ prefix ] = "translate( #{x}px , #{y}px)"
    
window.game = new App()