   $("#info_txt").text(msg).css("color","red").fadeOut("fast").fadeIn("fast").fadeOut("fast").fadeIn("fast", callback)
 
 
+  
 connect_four.add = (x,y,color,callback) ->
   board = $("canvas#board")
   board_left = board.position().left
   board_top = board.position().top
   return if x < 0 or x > (board.width()/100 - 1) or y < 0 or y > (board.height()/100 - 1)
-  new_img = $('<img src="/assets/'+color+'.png" class="checker '+color+'" id="pos'+x+'_'+y+'"style="position:absolute;left:'+(x*100+board_left+1)+'px;top:0px;z-index:-1;" width="100" height="100">')
-  $("div:last").first().after(new_img)
-  new_img.animate({top:(y*100+board_top+2)+'px'},"slow",callback)
+  new_img = $("<img src=\"/assets/#{color}.png\" class=\"checker #{color}\" id=\"pos#{x}_#{y}\" style=\"position:absolute;left:#{(x*100+board_left)}px;z-index:-1;\" width=\"100\" height=\"100\">")
+  $("canvas:first").first().after(new_img)
+  new_img.animate({top:"#{(y*100+board_top+2)}px"},"slow",callback)
           
 draw_board = ->
   block = $("canvas#block")[0]

    [x,y] = element.id.split("pos")[1].split("_")
    all[y][x] = if $(this).hasClass("red") then "r" else "b"
  all.join(";")

check_board = (color) ->
  all_checkers = []


$(document).on "ready page:change", ->
  draw_board()
  $(window).resize ->
    update_checkers()
  connect_four.valid_msg "Game started",->
    play_game()
    
