         .append("div")
         .attr("class", "card")
         .on("mousedown", (d) ->
+            d.clicked ?= -1
+            d.standing ?= 1
+
             if d3.event.shiftKey
-                d.showing = !d.showing
-                d.parent = if d.showing then table else new CoordinateSystem parent: null 
+                d.parent = switch d.parent
+                    when table then null
+                    when null then table
+                    # when camera then table
+
+            else if d3.event.altKey
+                d.standing *= -1                
+                d.do(
+                    rotate   : { x:  90 * d.standing * d.clicked}
+                    around   : { y: 0 }
+                    duration : 1000
+                )
             else
-                d.clicked = !d.clicked
-                # d.do rotate:{ x:  (if d.clicked then 90 else -90 ) }
+                d.clicked *= -1
                 d.do(
-                    rotate     :{ x:  (if d.clicked then 179 else 181 ) }
-                    around     :{ y: 0 }
-                    translate  :{ y: -153 }
+                    translate: { z: 153/2 *d.clicked }
+                    duration : 500
+                    ease : d3.ease("cubic-in")
                 )
-            draw()
+                .do(
+                    translate:{ z: -153/2 * d.clicked }
+                    duration : 500
+                    delay    : 500
+                    ease : d3.ease("cubic-out")
+                )
+                d.do(
+                    rotate   : { x:  180 }
+                    around   : { y: 153/2 }
+                    duration : 1000
+                )
         );
     d3cardsEnter
         .append("div")

                camera.do translate:{x:-10}
            when 40  
                camera.do translate:{z:-10}
    draw()
    e.preventDefault()



showCardActive = no
@showCard = -> 
    cards[0].parent = if showCardActive then table else new CoordinateSystem parent: null 
    draw()
    showCardActive = not showCardActive

player = 0
@changePlayer1 = -> 
    player = (player+1) % 2
    table.do({rotate:{z:179.999}, around:{x:width/2 , y:height/2} })
    draw()

@changePlayer = -> 
    # todo: think how to use d3 to interpolate transformations in a sound way
    player = (player+1) % 2
    steps = 50;
    i=0
    while i++ < steps
        setTimeout ->
                table.do({rotate:{z:180/steps}, around:{x:width/2 , y:height/2} })
                draw()
            , 100*i
# yo.@cards[0].parent.matrix3d=yo.@cards[0].parent.matrix3d.rotate(-75,0,0);yo.draw()
@camera = new CoordinateSystem parent: null
@table = new CoordinateSystem parent: @camera
@cards = [
    (new CoordinateSystem parent: @table).do translate:{ x: 0  , y: 20, z:1}, duration: 0
    (new CoordinateSystem parent: @table).do translate:{ x: 150, y: 20, z:1}, duration: 0
    (new CoordinateSystem parent: @table).do translate:{ x: 300, y: 20, z:1}, duration: 0
]

camera.do translate: { z: -800}
