canvas.js

var paper_width = 1110,
  paper_height = 600;
	paper = Raphael("game", paper_width, paper_height),
	socket = io.connect();

paper.rect(0, 0, 900, 600, 10).attr({
	"stroke-width": 0,
	"fill": "#52922c"
});

function rand(min, max) {

	return Math.floor(Math.random() * max) + min;
}

var player = [],
	oponent = [],
	oponent2 = [],
	deck = [],
	trump_card = [],
	card_1 = [],
	card_2 = [],
	card_3 = [],
	box = [],
	letters = ["p", "s", "k", "a"];

// Setting player && oponent cards

for(a = 0; a<5; a++) {

	player[a] = { "card" : letters[rand(0, 4)] + "" + rand(1, 5), "x" : 165 + a * 116, "y" : 480, "width" : 110, "height" : 165 };
	oponent[a] = { "card" : "back", "x" : 165 + a * 116, "y" : -45, "width" : 110, "height" : 165 };
	oponent2[a] = { "card" : "back", "x" : -45, "y" : 60 + a * 80, "width" : 110, "height" : 165 };
	deck[0] = { "card" : "back", "x" : 770, "y" : 218, "width" : 110, "height" : 165 };
	deck[1] = { "card" : "back", "x" : 780, "y" : 218, "width" : 110, "height" : 165 };

	paper.image("/images/schnapsen/" + player[a].card + ".png", player[a].x, player[a].y, player[a].width, player[a].height)
		.data("card", player[a].card)
		.click(function(event) {
			console.log(this.data("card"));
		});

	// Top
	paper.image("/images/schnapsen/" + oponent[a].card + ".png", oponent[a].x, oponent[a].y, oponent[a].width, oponent[a].height)
		.data({"a": a})
		.click(function(event) {
			this.animate({x: 165 + this.data("a") * 116, y: 200, transform: 'r180'}, 500, '>');
		});
	// Left
	paper.image("/images/schnapsen/" + oponent2[a].card + ".png", oponent2[a].x, oponent2[a].y, oponent2[a].width, oponent2[a].height)
		.rotate(90)
		.data({"a": a})
		.click(function(event) {
			this.animate({x: 165 + this.data("a") * 116, y: 200, transform: 'r90'}, 500, '>');
		});
	paper.image("/images/schnapsen/s1.png", trump_card.x, trump_card.y, trump_card.width, trump_card.height).rotate(90);
	paper.image("/images/schnapsen/back.png", deck[0].x, deck[0].y, deck[0].width, deck[0].height).rotate(-15);
	paper.image("/images/schnapsen/back.png", deck[1].x, deck[1].y, deck[1].width, deck[1].height).rotate(15);
}

trump_card = { "card" : "s1", "x" : 720, "y" : 218, "width" : 110, "height" : 165 };

// Score
paper.rect(910, 0, 200, 600, 10).attr({
	"stroke-width": 1,
	"stroke": "#b2b9c2",
	"fill": "#dde4eb"
});