// Card component with image, text and sound
enyo.kind({
	name: "FoodChain.Card",
	kind: enyo.Control,
	published: { cardname: "", x: 0, y: 0, z: 0 },
	classes: "card",
	components: [
		{ name: "itemImage", classes: "cardImage", kind: "Image" },
		{ kind: "Image", src: "images/sound_icon.png", classes: "cardSoundIcon" },
		{ name: "itemText", classes: "cardText" }
	],
	
	// Constructor
	create: function() {
		this.inherited(arguments);
		this.cardnameChanged();
		this.xChanged();
		this.yChanged();
		this.zChanged();
	},
	
	// Rendering
	rendered: function() {
		this.inherited(arguments);		
	},
	
	// Localization changed, update card 
	setLocale: function() {
		this.cardnameChanged();
		this.render();
	},
	
	// Card setup
	cardnameChanged: function() {
		var image = FoodChain.context.home.getDatabase()+"images/cards/"+this.cardname+".png";
		var text = __$FC(this.cardname);
		this.sound = FoodChain.context.home.getDatabase()+"audio/"+__$FC("sounddir")+"/cards/"+this.cardname;
		
		this.$.itemImage.setAttribute("src", image);
		this.$.itemText.setContent(text);
	},
	
	// Coordinate setup
	xChanged: function() {
		if (this.x.toString().indexOf("%") != -1)
			this.applyStyle("margin-left", this.x);
		else
			this.applyStyle("margin-left", this.x+"px");
	},
	
	// Coordinate setup
	yChanged: function() {
		this.applyStyle("margin-top", this.y+"px");
	},
	
	// Coordinate setup
	zChanged: function() {
		this.applyStyle("z-index", this.z);
	},
	
	// Play sound using the media
	play: function(media) {
		media.play(this.sound);
	},
	
	// Change position
	moveTo: function(x, y) {
		this.x = x;
		this.xChanged();
		this.y = y;
		this.yChanged();		
	}
});