// Sample using Enyo to handle Art4apps library

// Item component with image, text and sound
enyo.kind({
	name: "Item.Element",
	kind: enyo.Control,
	published: { image: "", sound: "", text: "" },
	ontap: "taped",
	components: [
		{ name: "itemImage", classes: "itemImage", kind: "Image", ontap: "taped" },
		{ name: "itemText", classes: "itemText", ontap: "taped" },
		{ name: "itemSound", classes: "itemSound", kind: "HTML5.Audio", preload: "auto", autobuffer: true, controlsbar: true }
	],
	
	// Constructor
	create: function() {
		this.inherited(arguments);
		this.imageChanged();
		this.soundChanged();
		this.textChanged();
	},
	
	// Image setup
	imageChanged: function() {
		if (this.image.length != 0) {
			this.$.itemImage.setAttribute("src", this.image);
			this.$.itemImage.show();
		} else {
			this.$.itemImage.hide();
		}
	},
	
	// Sound setup
	soundChanged: function() {
		this.$.itemSound.setSrc(this.sound);
	},

	// Text setup
	textChanged: function() {
		if (this.text.length != 0) {
			this.$.itemText.setContent(this.text);
			this.$.itemText.show();
		} else {
			this.$.itemText.show();
		}
	},
	
	// Play sound when image taped
	taped: function() {
		if (this.$.itemSound.paused())
			this.$.itemSound.play();
		else
			this.$.itemSound.pause();
	}
});


// Main app class
enyo.kind({
	name: "TestArt4Apps",
	kind: enyo.Control,
	components: [
		{ components: [
			{ content: "Click image or use control bar to hear the word.", classes: "title" },	
			{ kind: "Item.Element", text: "Alligator", image: "images/alligator.png", sound: ["audio/alligator.ogg", "audio/alligator.mp3"], classes: "item" },
			{ kind: "Item.Element", text: "Girl", image: "images/girl.png", sound: ["audio/girl.ogg", "audio/girl.mp3"], classes: "item" },
			{ kind: "Item.Element", text: "Sandwich", image: "images/sandwich.png", sound: ["audio/sandwich.ogg", "audio/sandwich.mp3"], classes: "item" },
			{ classes: "footer", components: [
				{ content: "Images and sounds CC BY-SA from", classes: "licence" },
				{ tag: "a", attributes: {"href":"http://art4apps.org/"}, content: "Art4Apps", classes: "licence" }
			]}
		]}		
	],

	// Constructor
	create: function() {
		this.inherited(arguments);
	}
});