1/* file: carousel.js
2   date: oct 2008
3   author: jeremydw,smain
4   info: operates the carousel widget for announcements on
5         the android developers home page. modified from the
6         original market.js from jeremydw. */
7
8/* -- video switcher -- */
9
10var oldVid = "multi"; // set the default video
11var nowPlayingString = "Now playing:";
12var assetsRoot = "assets/";
13
14
15/* -- app thumbnail switcher -- */
16
17var currentDroid;
18var oldDroid;
19
20// shows a random application
21function randomDroid(){
22
23	// count the total number of apps
24	var droidListLength = 0;
25	for (var k in droidList)
26		droidListLength++;
27
28	// pick a random app and show it
29  var j = 0;
30  var i = Math.floor(droidListLength*Math.random());
31  for (var x in droidList) {
32    if(j++ == i){
33    	currentDroid = x;
34    	showPreview(x);
35    	centerSlide(x);
36    }
37  }
38
39}
40
41// shows a bulletin, swaps the carousel highlighting
42function droid(appName){
43
44  oldDroid = $("#droidlink-"+currentDroid);
45  currentDroid = appName;
46
47  var droid = droidList[appName];
48
49  $("#"+appName).show().siblings().hide();
50
51  if(oldDroid)
52    oldDroid.removeClass("selected");
53
54  $("#droidlink-"+appName).addClass("selected");
55}
56
57
58// -- * build the carousel based on the droidList * -- //
59function buildCarousel() {
60  var appList = document.getElementById("app-list");
61  for (var x in droidList) {
62    var droid = droidList[x];
63    var icon = droid.icon;
64    var name = droid.name;
65    var a = document.createElement("a");
66    var img = document.createElement("img");
67    var br = document.createElement("br");
68    var span = document.createElement("span");
69    var text = document.createTextNode(droid.name);
70
71    a.setAttribute("id", "droidlink-" + x);
72    a.className = x;
73    a.setAttribute("href", "#");
74    a.onclick = function() { showPreview(this.className); return false; }
75    img.setAttribute("src", toRoot + assetsRoot + "images/home/" + droid.icon);
76    img.setAttribute("alt", "");
77
78    span.appendChild(text);
79    a.appendChild(img);
80    a.appendChild(br);
81    a.appendChild(span);
82    appList.appendChild(a);
83
84
85    /* add the bulletins */
86    var layout = droid.layout;
87    var div = document.createElement("div");
88    var imgDiv = document.createElement("div");
89    var descDiv = document.createElement("div");
90
91    div.setAttribute("id", x);
92    div.setAttribute("style", "display:none");
93    imgDiv.setAttribute("class", "bulletinImg");
94    descDiv.setAttribute("class", "bulletinDesc");
95
96	  if (layout == "imgLeft") {
97	    $(imgDiv).addClass("img-left");
98	    $(descDiv).addClass("desc-right");
99	  } else if (layout == "imgTop") {
100	    $(imgDiv).addClass("img-top");
101	    $(descDiv).addClass("desc-bottom");
102	  } else if (layout == "imgRight") {
103	    $(imgDiv).addClass("img-right");
104	    $(descDiv).addClass("desc-left");
105	  }
106
107	  imgDiv.innerHTML = "<img src='" + toRoot + assetsRoot + "images/home/" + droid.img + "'>";
108	  descDiv.innerHTML = (droid.title != "") ? "<h3>" + droid.title + "</h3>" + droid.desc : droid.desc;
109		$(div).append(imgDiv);
110		$(div).append(descDiv);
111
112    $("#carouselMain").append(div);
113
114  }
115}
116
117// -- * slider * -- //
118
119// -- dependencies:
120//    (1) div containing slides, (2) a "clip" div to hide the scroller
121//    (3) control arrows
122
123// -- * config below * -- //
124
125var slideCode = droidList; // the dictionary of slides
126var slideList = 'app-list'; // the div containing the slides
127var arrowRight = 'arrow-right'; // the right control arrow
128var arrowLeft = 'arrow-left'; // the left control arrow
129
130
131function showPreview(slideName) {
132  centerSlide(slideName);
133  if (slideName.indexOf('selected') != -1) {
134    return false;
135  }
136  droid(slideName); // do this function when slide is clicked
137}
138
139var thumblist = document.getElementById(slideList);// the div containing the slides
140
141var slideWidth = 144; // width of a slide including all margins, etc.
142var slidesAtOnce = 3; // no. of slides to appear at once (requires odd number to have a centered slide)
143
144// -- * no editing should be needed below * -- //
145
146var originPosition = {};
147var is_animating = 0;
148var currentStripPosition = 0;
149var centeringPoint = 0;
150var rightScrollLimit = 0;
151
152// makeSlideStrip()
153// - figures out how many slides there are
154// - determines the centering point of the slide strip
155function makeSlideStrip() {
156  var slideTotal = 0;
157  centeringPoint = Math.ceil(slidesAtOnce/2);
158  for (var x in slideCode) {
159    slideTotal++;
160  }
161  var i = 0;
162  for (var code in slideCode) {
163    if (i <= centeringPoint-1) {
164      originPosition[code] = 0;
165    } else {
166      if (i >= slideTotal-centeringPoint+1)  {
167        originPosition[code] = (slideTotal-slidesAtOnce)*slideWidth;
168      } else {
169        originPosition[code] = (i-centeringPoint+1)*slideWidth;
170      }
171    }
172    i++;
173  }
174  rightScrollLimit = -1*(slideTotal-slidesAtOnce)*slideWidth;
175}
176
177// slides with acceleration
178function slide(goal, id, go_left, cp) {
179  var div = document.getElementById(id);
180  var animation = {};
181  animation.time = 0.5;  // in seconds
182  animation.fps = 60;
183  animation.goal = goal;
184  origin = 0.0;
185  animation.origin = Math.abs(origin);
186  animation.frames = (animation.time * animation.fps) - 1.0;
187  var current_frame = 0;
188  var motions = Math.abs(animation.goal - animation.origin);
189  function animate() {
190    var ease_right = function (t) { return (1 - Math.cos(t * Math.PI))/2.0; };
191    var ease = ease_right;
192    if (go_left == 1) {
193      ease = function(t) { return 1.0 - ease_right(t); };
194    }
195    var left = (ease(current_frame/animation.frames) * Math.abs(animation.goal - animation.origin)) - cp;
196    if(left < 0) {
197      left = 0;
198    }
199    if(!isNaN(left)) {
200      div.style.left = '-' + Math.round(left) + 'px';
201    }
202    current_frame += 1;
203    if (current_frame == animation.frames) {
204      is_animating = 0;
205      window.clearInterval(timeoutId)
206    }
207  }
208  var timeoutId = window.setInterval(animate, animation.time/animation.fps * 1000);
209}
210
211//Get style property
212function getStyle(element, cssProperty){
213  var elem = document.getElementById(element);
214  if(elem.currentStyle){
215    return elem.currentStyle[cssProperty]; //IE
216  } else{
217    var style =  document.defaultView.getComputedStyle(elem, null); //firefox, Opera
218    return style.getPropertyValue(cssProperty);
219  }
220}
221
222// Left and right arrows
223function page_left() {
224  var amount = slideWidth;
225  animateSlide(amount, 'left');
226}
227
228function page_right() {
229  var amount = slideWidth;
230  animateSlide(amount, 'right');
231}
232
233
234// animates the strip
235// - sets arrows to on or off
236function animateSlide(amount,dir) {
237  var currentStripPosition = parseInt(getStyle(slideList,'left'));
238  var motionDistance;
239  if (amount == slideWidth ) {
240    motionDistance = slideWidth;
241  } else {
242    motionDistance = amount;
243  }
244
245  var rightarrow = document.getElementById(arrowRight);
246  var leftarrow = document.getElementById(arrowLeft);
247
248  function aToggle(state,aDir) {
249    if (state == 'on') {
250      if (aDir =='right') {
251        rightarrow.className = 'arrow-right-on';
252        rightarrow.href = "javascript:page_right()";
253      } else {
254        leftarrow.className = 'arrow-left-on';
255        leftarrow.href = "javascript:page_left()";
256      }
257    } else {
258      if (aDir =='right') {
259        rightarrow.href = "javascript:{}";
260        rightarrow.className = 'arrow-right-off';
261      } else {
262        leftarrow.href = "javascript:{}";
263        leftarrow.className = 'arrow-left-off';
264      }
265    }
266  }
267
268  function arrowChange(rP) {
269    if (rP >= rightScrollLimit) {
270      aToggle('on','right');
271    }
272    if (rP <= rightScrollLimit) {
273      aToggle('off','right');
274    }
275    if (rP <= slideWidth) {
276      aToggle('on','left');
277    }
278    if (rP >= 0) {
279      aToggle('off','left');
280    }
281  }
282
283  if (dir == 'right' && is_animating == 0) {
284    arrowChange(currentStripPosition-motionDistance);
285    is_animating = 1;
286    slide(motionDistance, slideList, 0, currentStripPosition);
287  } else if (dir == 'left' && is_animating == 0) {
288    arrowChange(currentStripPosition+motionDistance);
289    is_animating = 1;
290    rightStripPosition = currentStripPosition + motionDistance;
291    slide(motionDistance, slideList, 1, rightStripPosition);
292  }
293}
294
295function centerSlide(slideName) {
296  var currentStripPosition = parseInt(getStyle(slideList,'left'));
297  var dir = 'left';
298  var originpoint = Math.abs(currentStripPosition);
299  if (originpoint <= originPosition[slideName]) {
300    dir = 'right';
301  }
302  var motionValue = Math.abs(originPosition[slideName]-originpoint);
303  animateSlide(motionValue,dir);
304}
305
306
307function initCarousel(def) {
308  buildCarousel();
309  showPreview(def);
310  makeSlideStrip();
311}
312