/* Copyright 2011 The Dominion of Awesome
 * See COPYING for licensing information */
enyo.kind({
	name: "Landscape",
	kind: "Hack",
	style: "background-color: #2ab40f",
	preferences: [
		{name: "direction", label: "Direction of Travel", kind: "ListSelector", items: [
			{caption: "right", value: -1},
			{caption: "left", value: 1}
		]},
		{name: "speed", label: "Speed", kind: "Slider", minimum: 0.1, maximum: 10, snap: 0.1}
	],
	direction: -1,
	speed: 1.0,
	components: [
		{name: "clouds", style: "height: 200px; background-image: url(hacks/Landscape/clouds.png)"},
		{name: "mountains", style: "height: 200px; background-image: url(hacks/Landscape/mountains.png)"},
		{name: "trees", style: "height: 200px; background-image: url(hacks/Landscape/trees.png)"}
	],
	create: function() {
		this.inherited(arguments);
		this.n = 0;
	},
	start: function() {
		if (!this.timer)
			this.timer = setInterval(this.draw.bind(this), 33);
	},
	stop: function() {
		clearInterval(this.timer);
		this.timer = null;
	},
	draw: function() {
		this.n += this.direction * this.speed;
		if (this.n <= -1600)
			this.n += 1600;
		else if (this.n >= 1600)
			this.n -= 1600;

		this.$.clouds.applyStyle("background-position", (this.n * 1.5) + "px top");
		this.$.mountains.applyStyle("background-position", (this.n * 2.5) + "px top");
		this.$.trees.applyStyle("background-position", (this.n * 7.5) + "px top");
	}
});