Most Advanced iPhone CSS web app ive seen: Spin-the-bottle

Have been inspired to post the past couple of days. Its a way for me to organize my thoughts as i do market research for iphone web apps and iphone apps in general. I have a new app idea brewing as well as what may be the beginning of a prediction for another major macro trend that will impact the way the mobile industry evolves (kind of like the MoSoSo trend i sensed and started championing in 2004/2005)

I came across a Spin the Bottle app in a very interesting tech blog:
http://ajaxian.com/by/topic/mobile

After checking it out on the Apple web app directory. I got my iPhone OG and tested it.

This is some of the most advanced iphone specific CSS i have seen. I am very interested in exploring the use of Web App animation in what i predict will be the main driver of the mobile web boom. Unfortunately when i tested this site on a G1 browser the site did not load properly. Also even on my iPhone over wifi the site took forever to load.

Check out the Spin The Bottle app for yourself by pointing your iphone's safari to :

http://www.idean.com/iphone/spin/

Apparently here is some of the types of code that the developer used to make this:

"JAVASCRIPT:

1.

2.
function startTouch() {
3.
setTimeout(hideURLbar, 100);
4.

5.
document.body.ontouchstart = function(e) {
6.
oldangle1 = 0; oldangle2 = 0; oldangle3 = 0;
7.
//spinout();
8.
cancelspin();
9.
}
10.

11.
document.body.ontouchmove = function(e) {
12.
// prevent window scrolling!
13.
e.preventDefault();
14.

15.
if (timer_rot != 0)
16.
return;
17.

18.
var touch = e.touches[0]; // finger 1
19.
var dx = centerx - touch.pageX;
20.
var dy = centery - touch.pageY;
21.
var angle = Math.atan2(dy, dx);
22.

23.
oldangle3 = angle;
24.
oldangle1 = oldangle2;
25.
oldangle2 = oldangle3;
26.

27.
var val = "rotateZ(" + angle + "rad)";
28.
bottle.style.webkitTransform = val;
29.
shadow.style.webkitTransform = val;
30.
rot = angle;
31.
//cancelspin();
32.
}
33.
document.body.ontouchend = function(e){
34.
if (timer_rot == 0) {
35.
var val = ((oldangle2 - oldangle1) + (oldangle3 - oldangle2)) / 2;
36.
val /= 3;
37.
if (val == 0.0)
38.
val = rand(0.3)+0.2;
39.
else if (Math.abs(val) <0.3)
40.
val *= 3;
41.

42.
//cancelspin();
43.
startanim(val);
44.
}
45.
}
46.
}
47.
// remove our touch handlers
48.
function stopTouch() {
49.
document.body.ontouchstart = null;
50.
document.body.ontouchmove = null;
51.
document.body.ontouchend = null;
52.
}
53.
"