Resize all loaded views to prevent left/right overlapping center.
[Hacks.git] / hacks / Landscape / Landscape.js
1 /* Copyright 2011 The Dominion of Awesome
2  * See COPYING for licensing information */
3 enyo.kind({
4         name: "Landscape",
5         kind: "Hack",
6         style: "background-color: #2ab40f",
7         components: [
8                 {name: "clouds", style: "height: 200px; background-image: url(hacks/Landscape/clouds.png)"},
9                 {name: "mountains", style: "height: 200px; background-image: url(hacks/Landscape/mountains.png)"},
10                 {name: "trees", style: "height: 200px; background-image: url(hacks/Landscape/trees.png)"}
11         ],
12         create: function() {
13                 this.inherited(arguments);
14                 this.n = 0;
15         },
16         start: function() {
17                 if (!this.timer)
18                         this.timer = setInterval(this.draw.bind(this), 33);
19         },
20         stop: function() {
21                 clearInterval(this.timer);
22                 this.timer = null;
23         },
24         draw: function() {
25                 this.n--;
26                 if (this.n == -1600)
27                        this.n = 0;
28
29                 this.$.clouds.applyStyle("background-position", (this.n * 1.5) + "px top");
30                 this.$.mountains.applyStyle("background-position", (this.n * 2.5) + "px top");
31                 this.$.trees.applyStyle("background-position", (this.n * 7.5) + "px top");
32         }
33 });