Skip to content

Instantly share code, notes, and snippets.

@fmal

fmal/wp.js

Forked from kirbysayshi/wp.js
Created July 9, 2013 12:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save fmal/5957094 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save fmal/5957094 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
wp.js
var $ = function() {
var readyFn = [],
loadedFn = [],
$ = function(selector, context) {
return new NL(qsa(selector, context))
},
qsa = function(selector, context) {
if (typeof selector == "object" && (selector.nodeType || "setInterval" in selector)) return [selector];
if (selector instanceof NL) return selector;
return (context || document).querySelectorAll(selector)
},
size = function() {
var s = -1,
i;
for (i in this) if (this.hasOwnProperty(i)) s++;
return s
},
NL = function(dom) {
for (var i = 0, l = dom.length; i < l; i++) this[i] = dom[i];
this.length = size;
return this
},
Tap = function(el, fn, delay) {
this.el = $(el);
this.callback = fn;
this.delay = delay === undefined ? 50: delay;
this.el.bind($.events.start, this);
this.el.bind($.events.move, this);
this.el.bind($.events.end, this);
this.el.bind("mouseout", this)
},
domReady = function() {
for (var i = 0, l = readyFn.length; i < l; i++) readyFn[i]();
readyFn = null;
$.unbind(document, "DOMContentLoaded", domReady)
},
windowLoad = function() {
for (var i = 0, l = loadedFn.length; i < l; i++) loadedFn[i]();
loadedFn = null;
$.unbind(window, "load", windowLoad)
};
$.has = {
touch: "ontouchstart" in window
};
$.is = {
standalone: window.navigator.standalone,
android: /android \d+\.\d+/i.test(navigator.appVersion),
iDevice: /iphone|ipad/i.test(navigator.appVersion),
retina: window.devicePixelRatio >= 2
};
$.has.rotateY = !$.is.android;
$.events = {
start: $.has.touch ? "touchstart": "mousedown",
move: $.has.touch ? "touchmove": "mousemove",
end: $.has.touch ? "touchend": "mouseup"
};
$.id = function(id, context) {
id = (context || document).getElementById(id);
id = id ? [id] : [];
return new NL(id)
};
$.bind = function(el, type, fn, capture) {
el.addEventListener(type, fn, !!capture)
};
$.unbind = function(el, type, fn, capture) {
el.removeEventListener(type, fn, !!capture)
};
$.ready = function(fn) {
if (!readyFn.length) $.bind(document, "DOMContentLoaded", domReady, false);
readyFn.push(fn)
};
$.loaded = function(fn) {
if (!loadedFn.length) $.bind(window, "load", windowLoad, false);
loadedFn.push(fn)
};
$.hasClass = function(el, value) {
return new RegExp("(^|\\s)" + value + "(\\s|$)").test(el.className)
};
$.create = function(el, attr) {
return $(document.createElement(el))
};
$.ajax = function(url, callback, postData, args) {
var method = postData ? "POST": "GET",
req = new XMLHttpRequest;
req.open(method, url, true);
req.setRequestHeader("X-Requested-With", "XMLHttpRequest");
if (postData) req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
req.onreadystatechange = function() {
if (req.readyState != 4) return;
callback(req.status != 200 && req.status != 304 ? false: req.responseText, args);
req = null
};
req.send(postData)
};
Tap.prototype = {
initiated: false,
moved: false,
timer: null,
handleEvent: function(e) {
switch (e.type) {
case $.events.start:
this.start(e);
break;
case $.events.move:
this.move(e);
break;
case $.events.end:
this.end();
break;
case "mouseout":
this.out();
break
}
},
start: function(e) {
var that = this;
clearTimeout(this.timer);
this.initiated = false;
this.moved = false;
this.startX = $.has.touch ? e.touches[0].pageX: e.pageX;
this.startY = $.has.touch ? e.touches[0].pageY: e.pageY;
this.timer = setTimeout(function() {
that.initiated = true;
that.el.addClass("pressed")
},
this.delay)
},
move: function(e) {
clearTimeout(this.timer);
if (!this.initiated) return;
var x = $.has.touch ? e.touches[0].pageX: e.pageX,
y = $.has.touch ? e.touches[0].pageY: e.pageY;
if (Math.abs(x - this.startX) > 1 || Math.abs(y - this.startY) > 10) {
this.moved = true;
this.el.removeClass("pressed")
}
},
out: function() {
clearTimeout(this.timer);
if (!this.initiated) return;
this.el.removeClass("pressed")
},
end: function() {
clearTimeout(this.timer);
if (!this.initiated) return;
this.el.removeClass("pressed");
if (!this.moved && this.callback) this.callback()
},
destroy: function() {
this.el.unbind($.events.start, this);
this.el.unbind($.events.move, this);
this.el.unbind($.events.end, this);
this.el.unbind("mouseout", this)
}
};
NL.prototype = {
each: function(callback) {
for (var i = 0, l = this.length(); i < l; i++) callback.call(this[i]);
return this
},
get: function(num) {
var l = this.length();
if (num < 0) num = 0;
else if (num > l - 1) num = l - 1;
return $(this[num])
},
bind: function(type, fn, capture) {
return this.each(function() {
$.bind(this, type, fn, capture)
})
},
unbind: function(type, fn, capture) {
return this.each(function() {
$.unbind(this, type, fn, capture)
})
},
tap: function(fn, delay) {
return this.each(function() {
this._tap = new Tap(this, fn, delay)
})
},
untap: function() {
return this.each(function() {
if (this._tap && "destroy" in this._tap) {
this._tap.destroy();
this._tap = null;
delete this._tap
}
})
},
data: function(key, value) {
if (key === undefined && value === undefined) return this[0].dataset;
if (typeof key == "string" && value === undefined) return this[0].dataset[key];
if (typeof key != "object") {
var tmp = {};
tmp[key] = value;
key = tmp
}
return this.each(function() {
for (var i in key) this.dataset[i] = key[i]
})
},
attr: function(key, value) {
if (typeof key == "string" && value === undefined) return this[0].getAttribute(key);
if (typeof key != "object") {
var tmp = {};
tmp[key] = value;
key = tmp
}
return this.each(function() {
for (var i in key) this.setAttribute(i, key[i])
})
},
style: function(key, value) {
if (typeof key == "string" && value === undefined) return window.getComputedStyle(this[0], null).getPropertyValue(key);
if (typeof key != "object") {
var tmp = {};
tmp[key] = value;
key = tmp
}
return this.each(function() {
for (var i in key) this.style[i] = key[i]
})
},
width: function(value) {
if (!value) return this[0].clientWidth;
return this.each(function() {
this.style.width = value + "px"
})
},
height: function(value) {
if (!value) return this[0].clientHeight;
return this.each(function() {
this.style.height = value + "px"
})
},
hasClass: function(value) {
return $.hasClass(this[0], value)
},
addClass: function(value) {
var i,
l;
if (typeof value == "string") value = [value];
for (i = 0, l = value.length; i < l; i++) this.each(function() {
if (value[i] && !$.hasClass(this, value[i])) this.className = this.className ? this.className + " " + value[i] : value[i]
});
return this
},
removeClass: function(value) {
var i,
l;
if (typeof value == "string") value = [value];
for (i = 0, l = value.length; i < l; i++) this.each(function() {
this.className = this.className.replace(new RegExp("(^|\\s+)" + value[i] + "(\\s+|$)"), " ")
});
return this
},
toggleClass: function(value) {
var i,
l;
if (typeof value == "string") value = [value];
for (i = 0, l = value.length; i < l; i++) this.each(function() {
if ($.hasClass(this, value[i])) $(this).removeClass(value[i]);
else $(this).addClass(value[i])
});
return this
},
append: function(el) {
return this.each(function() {
var parent = this;
el.each(function() {
parent.appendChild(this)
})
})
},
remove: function(el) {
this.each(function() {
if (this.parentNode) this.parentNode.removeChild(this)
});
return null
},
parent: function(p) {
var el,
found;
p = $(p);
while (el = this[0].parentNode) {
found = p.each(function() {
if (el == this) found = this
});
if (found) return found
}
return undefined
},
html: function(value) {
if (value === undefined) return this[0].innerHTML;
return this.each(function() {
this.innerHTML = value
})
},
text: function(value) {
if (value === undefined) return this[0].innerText;
return this.each(function() {
this.innerText = value
})
}
};
return $
} ();
/*!
* iScroll Lite base on iScroll v4.1.6 ~ Copyright (c) 2011 Matteo Spinelli, http://cubiq.org
* Released under MIT license, http://cubiq.org/license
*/
(function() {
var m = Math,
vendor = /webkit/i.test(navigator.appVersion) ? "webkit": /firefox/i.test(navigator.userAgent) ? "Moz": "opera" in window ? "O": "",
has3d = "WebKitCSSMatrix" in window && "m11" in new WebKitCSSMatrix,
hasTouch = "ontouchstart" in window,
hasTransform = vendor + "Transform" in document.documentElement.style,
isIDevice = /iphone|ipad/gi.test(navigator.appVersion),
isPlaybook = /playbook/gi.test(navigator.appVersion),
hasTransitionEnd = isIDevice || isPlaybook,
nextFrame = function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
return setTimeout(callback, 17)
}
} (),
cancelFrame = function() {
return window.cancelRequestAnimationFrame || window.webkitCancelRequestAnimationFrame || window.mozCancelRequestAnimationFrame || window.oCancelRequestAnimationFrame || window.msCancelRequestAnimationFrame || clearTimeout
} (),
RESIZE_EV = "onorientationchange" in window ? "orientationchange": "resize",
START_EV = hasTouch ? "touchstart": "mousedown",
MOVE_EV = hasTouch ? "touchmove": "mousemove",
END_EV = hasTouch ? "touchend": "mouseup",
CANCEL_EV = hasTouch ? "touchcancel": "mouseup",
trnOpen = "translate" + (has3d ? "3d(": "("),
trnClose = has3d ? ",0)": ")",
iScroll = function(wrapper, target, options) {
var that = this,
doc = document,
i;
that.wrapper = typeof wrapper == "object" ? wrapper: doc.getElementById(wrapper);
that.wrapper.style.overflow = "hidden";
that.options = {
hScroll: true,
vScroll: true,
x: 0,
y: 0,
bounce: true,
bounceLock: false,
momentum: true,
lockDirection: true,
useTransform: true,
useTransition: false,
onRefresh: null,
onBeforeScrollStart: function(e) {
e.preventDefault()
},
onScrollStart: null,
onBeforeScrollMove: null,
onScrollMove: null,
onBeforeScrollEnd: null,
onScrollEnd: null,
onTouchEnd: null,
onDestroy: null
};
for (i in options) that.options[i] = options[i];
that.x = that.options.x;
that.y = that.options.y;
that.options.useTransform = hasTransform ? that.options.useTransform: false;
that.options.hScrollbar = that.options.hScroll && that.options.hScrollbar;
that.options.vScrollbar = that.options.vScroll && that.options.vScrollbar;
that.options.useTransition = hasTransitionEnd && that.options.useTransition;
that.changeTarget(target);
that._bind(RESIZE_EV, window);
that._bind(START_EV, that.wrapper);
if (!hasTouch) that._bind("mouseout", that.wrapper)
};
iScroll.prototype = {
enabled: true,
x: 0,
y: 0,
steps: [],
handleEvent: function(e) {
var that = this;
switch (e.type) {
case START_EV:
if (!hasTouch && e.button !== 0) return;
that._start(e);
break;
case MOVE_EV:
that._move(e);
break;
case END_EV:
case CANCEL_EV:
that._end(e);
break;
case RESIZE_EV:
that._resize();
break;
case "mouseout":
that._mouseout(e);
break;
case "webkitTransitionEnd":
that._transitionEnd(e);
break
}
},
changeTarget: function(target) {
var that = this,
matrix;
if (that.scroller) {
that.stop();
that.refresh()
}
that.scroller = typeof target == "object" ? target: document.getElementById(target);
matrix = getComputedStyle(that.scroller, null)[vendor + "Transform"].replace(/[^0-9-.,]/g, "").split(",");
that.y = matrix[5] * 1 || 0;
that.scroller.style[vendor + "TransitionProperty"] = that.options.useTransform ? "-" + vendor.toLowerCase() + "-transform": "top left";
that.scroller.style[vendor + "TransitionDuration"] = "0";
that.scroller.style[vendor + "TransformOrigin"] = "0 0";
if (that.options.useTransition) that.scroller.style[vendor + "TransitionTimingFunction"] = "cubic-bezier(0.33,0.66,0.66,1)";
if (that.options.useTransform) that.scroller.style[vendor + "Transform"] = trnOpen + "0," + that.y + "px" + trnClose;
else that.scroller.style.cssText += ";position:absolute;top:" + that.y + "px;left:0px";
that.refresh()
},
_resize: function() {
var that = this;
setTimeout(function() {
that.refresh()
},
200)
},
_pos: function(x, y) {
y = this.vScroll ? y: 0;
if (this.options.useTransform) this.scroller.style[vendor + "Transform"] = trnOpen + "0," + y + "px" + trnClose;
else {
y = m.round(y);
this.scroller.style.top = y + "px"
}
this.y = y
},
_start: function(e) {
var that = this,
point = hasTouch ? e.touches[0] : e,
matrix,
y;
if (!that.enabled) return;
if (that.options.onBeforeScrollStart) that.options.onBeforeScrollStart.call(that, e);
if (that.options.useTransition) that._transitionTime(0);
that.moved = false;
that.animating = false;
that.zoomed = false;
that.distX = 0;
that.distY = 0;
that.absDistX = 0;
that.absDistY = 0;
that.dirX = 0;
that.dirY = 0;
if (that.options.momentum) {
if (that.options.useTransform) {
matrix = getComputedStyle(that.scroller, null)[vendor + "Transform"].replace(/[^0-9-.,]/g, "").split(",");
y = matrix[5] * 1
} else y = getComputedStyle(that.scroller, null).top.replace(/[^0-9-]/g, "") * 1;
if (y != that.y) {
if (that.options.useTransition) that._unbind("webkitTransitionEnd");
else cancelFrame(that.aniTime);
that.steps = [];
that._pos(0, y)
}
}
that.absStartX = that.x;
that.absStartY = that.y;
that.startX = that.x;
that.startY = that.y;
that.pointX = point.pageX;
that.pointY = point.pageY;
that.startTime = e.timeStamp || Date.now();
if (that.options.onScrollStart) that.options.onScrollStart.call(that, e);
that._bind(MOVE_EV, that.wrapper);
that._bind(END_EV, that.wrapper);
that._bind(CANCEL_EV, that.wrapper)
},
_move: function(e) {
var that = this,
point = hasTouch ? e.touches[0] : e,
deltaX = point.pageX - that.pointX,
deltaY = point.pageY - that.pointY,
newX = that.x + deltaX,
newY = that.y + deltaY,
timestamp = e.timeStamp || Date.now();
if (that.options.onBeforeScrollMove) that.options.onBeforeScrollMove.call(that, e);
that.pointX = point.pageX;
that.pointY = point.pageY;
if (newY > 0 || newY < that.maxScrollY) newY = that.options.bounce ? that.y + deltaY / 2: newY >= 0 || that.maxScrollY >= 0 ? 0: that.maxScrollY;
if (that.absDistY < 10) {
that.distX += deltaX;
that.distY += deltaY;
that.absDistX = m.abs(that.distX);
that.absDistY = m.abs(that.distY);
return
}
if (that.options.lockDirection) if (that.absDistX > that.absDistY + 5) {
newY = that.y;
deltaY = 0
} else if (that.absDistY > that.absDistX + 5) {
newX = that.x;
deltaX = 0
}
that.moved = true;
that._pos(0, newY);
that.dirY = deltaY > 0 ? -1: deltaY < 0 ? 1: 0;
if (timestamp - that.startTime > 300) {
that.startTime = timestamp;
that.startY = that.y
}
if (that.options.onScrollMove) that.options.onScrollMove.call(that, e)
},
_end: function(e) {
if (hasTouch && e.touches.length != 0) return;
var that = this,
point = hasTouch ? e.changedTouches[0] : e,
target,
ev,
momentumY = {
dist: 0,
time: 0
},
duration = (e.timeStamp || Date.now()) - that.startTime,
newPosY = that.y,
newDuration;
that._unbind(MOVE_EV, that.wrapper);
that._unbind(END_EV, that.wrapper);
that._unbind(CANCEL_EV, that.wrapper);
if (that.options.onBeforeScrollEnd) that.options.onBeforeScrollEnd.call(that, e);
if (!that.moved) {
if (hasTouch) {
target = point.target;
while (target.nodeType != 1) target = target.parentNode;
if (target.tagName != "SELECT" && target.tagName != "INPUT" && target.tagName != "TEXTAREA") {
ev = document.createEvent("MouseEvents");
ev.initMouseEvent("click", true, true, e.view, 1, point.screenX, point.screenY, point.clientX, point.clientY, e.ctrlKey, e.altKey, e.shiftKey, e.metaKey, 0, null);
ev._fake = true;
target.dispatchEvent(ev)
}
}
that._resetPos(200);
if (that.options.onTouchEnd) that.options.onTouchEnd.call(that, e);
return
}
if (duration < 300 && that.options.momentum) {
momentumY = newPosY ? that._momentum(newPosY - that.startY, duration, -that.y, that.maxScrollY < 0 ? that.scrollerH - that.wrapperH + that.y: 0, that.options.bounce ? that.wrapperH: 0) : momentumY;
newPosY = that.y + momentumY.dist;
if (that.y > 0 && newPosY > 0 || that.y < that.maxScrollY && newPosY < that.maxScrollY) momentumY = {
dist: 0,
time: 0
}
}
if (momentumY.dist) {
newDuration = m.max(momentumY.time, 10);
that.scrollTo(0, m.round(newPosY), newDuration);
if (that.options.onTouchEnd) that.options.onTouchEnd.call(that, e);
return
}
that._resetPos(200);
if (that.options.onTouchEnd) that.options.onTouchEnd.call(that, e)
},
_resetPos: function(time) {
var that = this,
resetY = that.y >= 0 || that.maxScrollY > 0 ? 0: that.y < that.maxScrollY ? that.maxScrollY: that.y;
if (resetY == that.y) {
if (that.moved) {
if (that.options.onScrollEnd) that.options.onScrollEnd.call(that);
that.moved = false
}
return
}
that.scrollTo(0, resetY, time || 0)
},
_mouseout: function(e) {
var t = e.relatedTarget;
if (!t) {
this._end(e);
return
}
while (t = t.parentNode) if (t == this.wrapper) return;
this._end(e)
},
_transitionEnd: function(e) {
var that = this;
if (e.target != that.scroller) return;
that._unbind("webkitTransitionEnd");
that._startAni()
},
_startAni: function() {
var that = this,
startY = that.y,
startTime = Date.now(),
step,
easeOut,
animate;
if (that.animating) return;
if (!that.steps.length) {
that._resetPos(400);
return
}
step = that.steps.shift();
if (step.y == startY) step.time = 0;
that.animating = true;
that.moved = true;
if (that.options.useTransition) {
that._transitionTime(step.time);
that._pos(0, step.y);
that.animating = false;
if (step.time) that._bind("webkitTransitionEnd");
else that._resetPos(0);
return
}
animate = function() {
var now = Date.now(),
newX,
newY;
if (now >= startTime + step.time) {
that._pos(0, step.y);
that.animating = false;
if (that.options.onAnimationEnd) that.options.onAnimationEnd.call(that);
that._startAni();
return
}
now = (now - startTime) / step.time - 1;
easeOut = m.sqrt(1 - now * now);
newY = (step.y - startY) * easeOut + startY;
that._pos(0, newY);
if (that.animating) that.aniTime = nextFrame(animate)
};
animate()
},
_transitionTime: function(time) {
this.scroller.style[vendor + "TransitionDuration"] = time + "ms"
},
_momentum: function(dist, time, maxDistUpper, maxDistLower, size) {
var deceleration = .0006,
speed = m.abs(dist) / time,
newDist = speed * speed / (2 * deceleration),
newTime = 0,
outsideDist = 0;
if (dist > 0 && newDist > maxDistUpper) {
outsideDist = size / (6 / (newDist / speed * deceleration));
maxDistUpper = maxDistUpper + outsideDist;
speed = speed * maxDistUpper / newDist;
newDist = maxDistUpper
} else if (dist < 0 && newDist > maxDistLower) {
outsideDist = size / (6 / (newDist / speed * deceleration));
maxDistLower = maxDistLower + outsideDist;
speed = speed * maxDistLower / newDist;
newDist = maxDistLower
}
newDist = newDist * (dist < 0 ? -1: 1);
newTime = speed / deceleration;
return {
dist: newDist,
time: m.round(newTime)
}
},
_offset: function(el) {
var left = -el.offsetLeft,
top = -el.offsetTop;
while (el = el.offsetParent) {
left -= el.offsetLeft;
top -= el.offsetTop
}
return {
left: left,
top: top
}
},
_bind: function(type, el, bubble) { (el || this.scroller).addEventListener(type, this, !!bubble)
},
_unbind: function(type, el, bubble) { (el || this.scroller).removeEventListener(type, this, !!bubble)
},
destroy: function() {
var that = this;
that.scroller.style[vendor + "Transform"] = "";
that._unbind(RESIZE_EV, window);
that._unbind(START_EV, that.wrapper);
that._unbind(MOVE_EV, that.wrapper);
that._unbind(END_EV, that.wrapper);
that._unbind(CANCEL_EV, that.wrapper);
that._unbind("mouseout", that.wrapper);
if (that.options.useTransition) that._unbind("webkitTransitionEnd");
if (that.options.onDestroy) that.options.onDestroy.call(that)
},
refresh: function() {
var that = this,
offset;
that.wrapperH = that.wrapper.clientHeight;
that.scrollerH = that.scroller.offsetHeight;
that.maxScrollY = that.wrapperH - that.scrollerH;
that.dirY = 0;
that.vScroll = that.options.vScroll && (!that.options.bounceLock && !that.hScroll || that.scrollerH > that.wrapperH);
offset = that._offset(that.wrapper);
that.wrapperOffsetLeft = -offset.left;
that.wrapperOffsetTop = -offset.top;
that.scroller.style[vendor + "TransitionDuration"] = "0";
that._resetPos(200)
},
scrollTo: function(x, y, time, relative) {
var that = this,
step = x,
i,
l;
that.stop();
if (!step.length) step = [{
x: x,
y: y,
time: time,
relative: relative
}];
for (i = 0, l = step.length; i < l; i++) {
if (step[i].relative) {
step[i].x = that.x - step[i].x;
step[i].y = that.y - step[i].y
}
that.steps.push({
x: step[i].x,
y: step[i].y,
time: step[i].time || 0
})
}
that._startAni()
},
scrollToElement: function(el, time) {
var that = this,
pos;
el = el.nodeType ? el: that.scroller.querySelector(el);
if (!el) return;
pos = that._offset(el);
pos.left += that.wrapperOffsetLeft;
pos.top += that.wrapperOffsetTop;
pos.left = pos.left > 0 ? 0: pos.left < that.maxScrollX ? that.maxScrollX: pos.left;
pos.top = pos.top > 0 ? 0: pos.top < that.maxScrollY ? that.maxScrollY: pos.top;
time = time === undefined ? m.max(m.abs(pos.left) * 2, m.abs(pos.top) * 2) : time;
that.scrollTo(pos.left, pos.top, time)
},
disable: function() {
this.stop();
this._resetPos(0);
this.enabled = false;
this._unbind(MOVE_EV);
this._unbind(END_EV);
this._unbind(CANCEL_EV)
},
enable: function() {
this.enabled = true
},
stop: function() {
cancelFrame(this.aniTime);
this.steps = [];
this.moved = false;
this.animating = false
}
};
if (typeof exports !== "undefined") exports.iScroll = iScroll;
else window.iScroll = iScroll
})();
var TouchLayer = function() {
var TouchLayer = function(_el) {
this.wrapper = $.id(_el);
this.wrapper.bind($.events.start, this);
this.wrapper.bind($.events.move, this);
this.wrapper.bind($.events.end, this)
};
TouchLayer.prototype = {
x: 0,
moved: false,
initiated: false,
handleEvent: function(e) {
switch (e.type) {
case $.events.start:
this.start(e);
break;
case $.events.move:
this.move(e);
break;
case $.events.end:
this.end(e);
break
}
},
transitionTime: function(t) {},
setPos: function(x) {},
start: function(e) {
if (e.touches && e.touches.length > 1) return;
var point = $.has.touch ? e.touches[0] : e;
e.preventDefault();
this.initiated = true;
this.moved = false;
this.absStartX = point.pageX;
this.startX = point.pageX;
this.startY = point.pageY;
this.distX = 0;
this.distY = 0;
this.directionX = 0;
this.directionY = 0;
ev = document.createEvent("Event");
ev.initEvent("scrollStart", true, true);
ev.startX = this.startX;
ev.startY = this.startY;
point.target.dispatchEvent(ev)
},
move: function(e) {
if (!this.initiated || e.touches && e.touches.length > 1) return;
var point = $.has.touch ? e.touches[0] : e,
deltaX = point.pageX - this.startX,
deltaY = point.pageY - this.startY;
this.startX = point.pageX;
this.startY = point.pageY;
this.directionX = deltaX > 0 ? 1: deltaX < 0 ? -1: 0;
this.directionY = deltaY > 0 ? 1: deltaY < 0 ? -1: 0;
if (this.distX < 10 && this.distY < 10) {
this.distX += Math.abs(deltaX);
this.distY += Math.abs(deltaY);
e.stopPropagation();
return
}
if (this.distY > this.distX) return;
e.stopPropagation();
this.moved = true;
ev = document.createEvent("Event");
ev.initEvent("scrollMove", true, true);
ev.deltaX = deltaX;
ev.deltaY = deltaY;
ev.directionX = this.directionX;
ev.directionY = this.directionY;
point.target.dispatchEvent(ev)
},
end: function(e) {
if (!this.initiated) return;
var point = $.has.touch ? e.changedTouches[0] : e,
distanceX = point.pageX - this.absStartX,
distanceY = point.pageY - this.absStartY,
x,
ev;
this.initiated = false;
if (!this.moved) return;
ev = document.createEvent("Event");
ev.initEvent("scrollEnd", true, true);
ev.distanceX = distanceX;
ev.distanceY = distanceY;
ev.directionX = this.directionX;
ev.directionY = this.directionY;
point.target.dispatchEvent(ev)
},
destroy: function() {
this.wrapper.unbind($.events.start, this);
this.wrapper.unbind($.events.move, this);
this.wrapper.unbind($.events.end, this)
}
};
return TouchLayer
} ();
var WP = WP || {};
WP.calendar = function() {
var slider,
tutorial,
livetiles = [],
dialog,
dialogScroller,
Slide = function() {
var titles = $("#calendarTitles > h2"),
that = this,
i,
l;
this.slider = $.id("calendarSlider");
this.calendar = $.id("calendar");
this.header = $.id("calendarTitles");
this.pageWidth = $.id("calendarAgenda").width();
this.pagesPos = [2, 0, 1];
this.titles = $("#calendarTitles > h2");
this.titlesWidth = [];
this.headerWidth = 0;
titles.each(function() {
that.titlesWidth.push(this.offsetWidth);
that.headerWidth += this.offsetWidth
});
titles.get(0).style({
position: "absolute",
left: "0px"
});
titles.get(1).style({
position: "absolute",
left: this.titlesWidth[0] + "px"
});
titles.get(2).style({
position: "absolute",
left: -this.titlesWidth[2] + "px"
});
this.headerRightLimit = that.headerWidth - this.titlesWidth[3];
this.touch = new TouchLayer("calendar");
this.scroller = new iScroll("calendarScroller", "calendarAgenda", {
useTransition: true,
hScroll: false,
momentum: $.has.rotateY,
bounce: $.has.rotateY,
bounceLock: true,
onBeforeScrollStart: function() {}
});
this.calendar.bind("scrollStart", this);
this.calendar.bind("scrollMove", this);
this.calendar.bind("scrollEnd", this)
},
init = function() {
slider = new Slide;
tutorial = new WP.Tutorial([{
el: "#step1",
reach: function() {
tutorial.nextStep()
}
},
{
el: "#step2",
reach: function() {
tutorial.nextStep()
}
},
{
el: "#actionAdd span",
tap: function() {
dialog = new WP.Dialog("appointment");
$.id("actionbar").removeClass("opened");
var d = new Date,
hour = d.getHours(),
sa = "AM";
if (hour == 0) hour = 12;
else if (hour > 12) {
hour = hour - 12;
sa = "PM"
}
$.id("appDate").html(d.getMonth() + 1 + "/" + d.getDate() + "/" + d.getFullYear());
$.id("appTime").html(hour + ":" + d.getMinutes() + " " + sa);
dialogScroller = new iScroll("appWrapper", "appScroller");
tutorial.nextStep()
}
},
{
el: "#step4",
tap: function() {
var openPickCalendar = function() {
$(this).unbind("webkitTransitionEnd", openPickCalendar).html(sessionStorage["pickcalendar"]).style({
webkitTransitionDuration: "0",
opacity: "0",
webkitTransform: "translate3d(0,0,0)"
});
$("#pickcalendar h5").style({
webkitTransitionDuration: "0",
webkitTransform: "translate3d(100px,-100px,0)"
});
$("#pickcalendar > ul").style({
webkitTransitionDuration: "0",
webkitTransform: "translate3d(0,300px,0)"
});
setTimeout(function() {
$("#dialog").style({
webkitTransitionDuration: "300ms",
opacity: "1"
});
$("#pickcalendar h5").style({
webkitTransitionDuration: "300ms",
webkitTransform: "translate3d(0,0,0)"
});
$("#pickcalendar > ul").style({
webkitTransitionDuration: "500ms",
webkitTransform: "translate3d(0,0,0)"
})
},
100)
};
$("#dialog").style({
webkitTransitionDuration: "300ms",
opacity: "0",
webkitTransform: "translate3d(0,300px,0)"
}).bind("webkitTransitionEnd", openPickCalendar);
$.id("hardkeys").addClass("opened");
WP.tracking.StubMidpoint("Calendar");
tutorial.nextStep()
}
},
{
el: "#buttonHome",
tap: function() {
tutorial.nextStep();
$.id("hardkeys").removeClass("opened");
WP.overlay.open("#dialog", "Calendar")
}
}])
},
tiltIn = function() {
setTimeout(function() {
$("#screen > div").style("display", "none");
$.id("calendar").style({
display: "block",
opacity: "0",
webkitTransform: "translate3d(0,0,0)",
webkitTransitionDuration: "200ms"
});
$("#calendar h2 span").style({
webkitTransformOrigin: "0 50%",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(85deg)": "translate3d(-200px,0,0)",
webkitTransitionDuration: "300ms"
});
$.id("calendarTitles").style({
webkitTransformOrigin: "0 50%",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(85deg)": "translate3d(-200px,0,0)",
webkitTransitionDuration: "400ms"
});
$.id("calendarScroller").style({
webkitTransformOrigin: "0 50%",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(85deg)": "translate3d(-200px,0,0)",
webkitTransitionDuration: "500ms"
}).bind("webkitTransitionEnd", tiltInEnd);
init();
setTimeout(function() {
$.id("calendar").style({
opacity: "1"
});
$("#calendar h2 span").style({
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(0deg)": "translate3d(0,0,0)"
});
$.id("calendarTitles").style({
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(0deg)": "translate3d(0,0,0)"
});
$.id("calendarScroller").style({
webkitTransformOrigin: "0 0",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(0deg)": "translate3d(0,0,0)"
})
},
100)
},
500);
WP.tracking.StubStart("Calendar")
},
tiltInEnd = function() {
$(this).unbind("webkitTransitionEnd", tiltInEnd);
$.id("calendar").style({
webkitPerspective: "0"
})
},
tiltOut = function() {
for (var i = 0; i < livetiles.length; i++) livetiles[i].destroy();
livetiles = [];
tutorial.destroy();
WP.overlay.close();
if (dialogScroller) {
dialogScroller.destroy();
dialogScroller = null
}
$.id("hardkeys").removeClass("opened");
$.id("actionbar").removeClass("opened").removeClass("openedHardkeys");
$.id("screen").style({
webkitPerspective: "800px"
});
if ($("#dialog").length()) $.id("dialog").style({
opacity: "0",
webkitTransformOrigin: "-10px 50%",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(90deg)": "translate(-80%,0)",
webkitTransitionDuration: "300ms"
}).bind("webkitTransitionEnd", tiltOutEnd);
else $.id("calendar").style({
opacity: "0",
webkitTransformOrigin: "-10px 50%",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(90deg)": "translate(-80%,0)",
webkitTransitionDuration: "300ms"
}).bind("webkitTransitionEnd", tiltOutEnd)
},
tiltOutEnd = function() {
var _pageIn = $("#screen .pageIn").removeClass("pageIn");
_pageIn = _pageIn.length() ? _pageIn.attr("id") : "home";
$.id("screen").style({
webkitPerspective: "0"
});
$(this).unbind("webkitTransitionEnd", tiltOutEnd);
slider.destroy();
slider = null;
tutorial = null;
if ($("#dialog").length()) $.id("dialog").remove();
$.id("calendar").remove();
WP[_pageIn].tiltIn()
};
Slide.prototype = {
x: 0,
headerX: 0,
page: 0,
handleEvent: function(e) {
switch (e.type) {
case "scrollStart":
this.start(e);
break;
case "scrollMove":
this.move(e);
break;
case "scrollEnd":
this.end(e);
break
}
},
start: function(e) {
this.slider.style({
webkitTransitionDuration: "0"
});
this.header.style({
webkitTransitionDuration: "0"
})
},
move: function(e) {
this.x += e.deltaX;
this.headerX += this.titlesWidth[e.deltaX < 0 ? this.pagesPos[1] : this.pagesPos[0]] / this.pageWidth * e.deltaX;
this.slider.style({
webkitTransform: "translate3d(" + this.x + "px,0,0)"
});
this.header.style({
webkitTransform: "translate3d(" + this.headerX + "px,0,0)"
})
},
end: function(e) {
var pageShift = 0,
prevPage = this.page,
duration = "200ms",
that = this;
if (e.directionX > 0) this.page = Math.ceil(this.x / this.pageWidth);
else if (e.directionX < 0) this.page = Math.floor(this.x / this.pageWidth);
else this.page = Math.round(this.x / this.pageWidth);
this.x = this.page * this.pageWidth;
this.slider.style({
webkitTransitionDuration: "300ms",
webkitTransform: "translate3d(" + this.x + "px,0,0)"
});
if (prevPage != this.page) {
if (e.directionX > 0) {
pageShift = this.pagesPos.pop();
this.pagesPos.unshift(pageShift)
} else if (e.directionX < 0) {
pageShift = this.pagesPos.shift();
this.pagesPos.push(pageShift)
}
$("#calendarSlider > div").get(pageShift).style({
left: -this.page * this.pageWidth + this.pageWidth * -e.directionX + "px"
});
this.titles.get(pageShift).style({
left: e.directionX < 0 ? this.titles.get(this.pagesPos[1]).style("left").replace("px", "") * 1 + this.titlesWidth[this.pagesPos[1]] + "px": this.titles.get(this.pagesPos[1]).style("left").replace("px", "") * 1 - this.titlesWidth[pageShift] + "px"
});
tutorial.update(this.pagesPos[1]);
if (this.pagesPos[1] == 0 || this.pagesPos[1] == 2) $("#calendar .header span").html("today");
else $("#calendar .header span").html("calendar");
if (this.pagesPos[1] == 2) {
$("#actionbar li").style("display", "none");
$("#actionToday, #actionAdd, #actionMonth").style("display", "inline-block");
$.id("actionbar").addClass("opened")
} else $.id("actionbar").removeClass("opened")
}
this.scroller.changeTarget($("#calendarSlider > div")[this.pagesPos[1]]);
this.headerX = -this.titles.get(this.pagesPos[1]).style("left").replace("px", "") * 1;
$("#calendarTitles > h2.active").removeClass("active");
this.titles.get(this.pagesPos[1]).addClass("active");
this.header.style({
webkitTransitionDuration: "200ms",
webkitTransform: "translate3d(" + Math.round(this.headerX) + "px,0,0)"
})
},
destroy: function() {
$("#calendarSlider > div").each(function() {
this.style.cssText = ""
});
this.slider[0].style.cssText = "";
this.calendar[0].style.cssText = "";
this.header[0].style.cssText = "";
this.touch.destroy();
this.touch = null;
this.scroller.destroy();
this.scroller = null;
this.calendar.unbind("scrollStart", this);
this.calendar.unbind("scrollMove", this);
this.calendar.unbind("scrollEnd", this)
}
};
return {
tiltIn: tiltIn,
tiltOut: tiltOut
}
} ();
var WP = WP || {};
WP.Dialog = function() {
var Dialog = function(_id) {
this.id = _id;
this.father = $("#screen > div:nth-child(2)");
this.dialog = $.create("div").attr("id", "dialog").style({
opacity: "0",
webkitTransitionDuration: "200ms"
}).html(sessionStorage[_id]).bind("touchstart", this);
$.id("screen").append(this.dialog);
this.fatherFadeOut()
};
Dialog.prototype = {
handleEvent: function(e) {
if (e.type == "webkitTransitionEnd") if (e.target.id == "dialogTitle") this.title.unbind("webkitTransitionEnd", this);
else if (e.target.id == "dialog") {
this.dialog.unbind("webkitTransitionEnd", this);
this.fatherFadeIn()
} else {
this.father.unbind("webkitTransitionEnd", this);
this.fadeIn()
} else if (e.type == "touchstart") {
e.preventDefault();
e.stopPropagation()
}
},
fatherFadeOut: function() {
this.father.style({
opacity: "0",
webkitTransitionDuration: "200ms"
}).bind("webkitTransitionEnd", this);
this.title = $("h5", this.dialog[0]).style({
webkitTransform: "translate3d(50px, -50px, 0)",
webkitTransitionTimingFunction: "ease-out"
});
this.contents = $("div", this.dialog[0]).get(0).style({
webkitTransform: "translate3d(0, 200px, 0)",
webkitTransitionTimingFunction: "ease-out"
})
},
fatherFadeIn: function() {
var that = this;
this.dialog.remove();
setTimeout(function() {
that.father.style({
opacity: "1",
webkitTransitionDuration: "200ms"
})
},
300)
},
fadeIn: function() {
this.dialog.style({
opacity: "1"
});
this.contents.style({
webkitTransitionDuration: "300ms",
webkitTransform: "translate3d(0, 0, 0)"
});
this.title.style({
webkitTransitionDuration: "400ms",
webkitTransform: "translate3d(0, 0, 0)"
}).bind("webkitTransitionEnd", this)
},
slideOut: function() {
this.dialog.style({
webkitTransform: "translate3d(0,300px,0)",
opacity: "0",
webkitTransitionDuration: "300ms"
}).bind("webkitTransitionEnd", this)
},
close: function() {
this.dialog.unbind("touchstart", this);
$.id("hardkeys").removeClass("opened");
$.id("actionbar").removeClass("wideOpenedHardKeys").removeClass("openedHardkeys").removeClass("wideOpened").removeClass("opened").addClass("hidden");
this.slideOut()
}
};
return Dialog
} ();
var WP = WP || {};
WP.group = function() {
var slider,
tutorial,
livetiles = [],
dialog,
Slide = function() {
var titles = $("#groupTitles > h2"),
that = this,
i,
l;
this.slider = $.id("groupSlider");
this.group = $.id("group");
this.header = $.id("groupTitles");
this.pageWidth = $.id("groupNews").width();
this.pagesPos = [2, 0, 1];
this.titles = $("#groupTitles > h2");
this.titlesWidth = [];
this.headerWidth = 0;
titles.each(function() {
that.titlesWidth.push(this.offsetWidth);
that.headerWidth += this.offsetWidth
});
titles.get(0).style({
position: "absolute",
left: "0px"
});
titles.get(1).style({
position: "absolute",
left: this.titlesWidth[0] + "px"
});
titles.get(2).style({
position: "absolute",
left: -this.titlesWidth[2] + "px"
});
this.headerRightLimit = that.headerWidth - this.titlesWidth[3];
this.touch = new TouchLayer("group");
this.scroller = new iScroll("groupScroller", "groupGroup", {
useTransition: true,
hScroll: false,
momentum: $.has.rotateY,
bounce: $.has.rotateY,
bounceLock: true,
onBeforeScrollStart: function() {}
});
this.group.bind("scrollStart", this);
this.group.bind("scrollMove", this);
this.group.bind("scrollEnd", this)
},
init = function() {
slider = new Slide;
tutorial = new WP.Tutorial([{
el: "#step1",
reach: function() {
tutorial.nextStep()
}
},
{
el: "#step2",
reach: function() {
tutorial.nextStep()
}
},
{
el: "#step3",
tap: function() {
$.id("actionbar").removeClass("opened");
dialog = new WP.Dialog("pickone");
tutorial.nextStep()
}
},
{
el: "#step4",
tap: function() {
var openSendMessage = function() {
$(this).unbind("webkitTransitionEnd", openSendMessage).html(sessionStorage["sendmessage"]).style({
webkitTransitionDuration: "300ms",
opacity: "1",
webkitTransform: "translate3d(0,0,0)"
});
$("#actionbar li").style("display", "none");
$("#actionSendComment, #actionClip, #actionMic").style({
display: "inline-block"
});
$.id("actionbar").addClass("opened")
},
movieNight = function() {
var message = "ready for movie night!",
pos = 1,
writeMessage = function() {
var messageField = $("#fakefield > em");
messageField.html(message.substring(0, pos) + "|");
if (pos < message.length) setTimeout(writeMessage, 120);
else {
messageField.html(message);
if (tutorial) tutorial.nextStep()
}
pos++
};
setTimeout(writeMessage, 1e3)
};
$("#dialog > div").style({
webkitTransitionDuration: "300ms",
opacity: "0",
webkitTransform: "translate3d(0,300px,0)"
}).bind("webkitTransitionEnd", openSendMessage);
movieNight()
}
},
{
el: "#actionSendComment > span",
tap: function() {
$.id("conversation").style({
display: "block",
opacity: "0",
webkitTransform: "translate3d(0,100px,0)",
webkitTransitionDuration: "600ms"
});
$("#fakefield").html("send SMS<span></span>");
setTimeout(function() {
$.id("conversation").style({
opacity: "1",
webkitTransform: "translate3d(0,0,0)"
})
},
100);
$.id("hardkeys").addClass("opened");
$.id("actionbar").addClass("openedHardkeys");
WP.tracking.StubMidpoint("Groups");
tutorial.nextStep()
}
},
{
el: "#buttonHome",
tap: function() {
tutorial.nextStep();
$.id("hardkeys").removeClass("opened");
$.id("actionbar").removeClass("openedHardkeys").removeClass("opened");
WP.overlay.open("#dialog", "Groups")
}
}]);
if ($.is.iDevice) {
$("#groupGroup .liveTiles li > div").each(function() {
livetiles.push(new WP.LiveTile(this))
});
livetiles[3].addBackface("<strong>Missed Call</strong><em>Sean P. Alexander</em>")
} else {
$("#groupGroup .liveTiles li > div").get(3).each(function() {
livetiles.push(new WP.LiveTile(this))
});
livetiles[0].addBackface("<strong>Missed Call</strong><em>Sean P. Alexander</em>")
}
},
tiltIn = function() {
setTimeout(function() {
$("#screen > div").style("display", "none");
$.id("group").style({
display: "block",
opacity: "0",
webkitTransform: "translate3d(0,0,0)",
webkitTransitionDuration: "200ms"
});
$("#group h2 span").style({
webkitTransformOrigin: "0 50%",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(85deg)": "translate3d(-200px,0,0)",
webkitTransitionDuration: "300ms"
});
$.id("groupTitles").style({
webkitTransformOrigin: "0 50%",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(85deg)": "translate3d(-200px,0,0)",
webkitTransitionDuration: "400ms"
});
$.id("groupScroller").style({
webkitTransformOrigin: "0 50%",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(85deg)": "translate3d(-200px,0,0)",
webkitTransitionDuration: "500ms"
}).bind("webkitTransitionEnd", tiltInEnd);
init();
setTimeout(function() {
$.id("group").style({
opacity: "1"
});
$("#group h2 span").style({
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(0deg)": "translate3d(0,0,0)"
});
$.id("groupTitles").style({
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(0deg)": "translate3d(0,0,0)"
});
$.id("groupScroller").style({
webkitTransformOrigin: "0 0",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(0deg)": "translate3d(0,0,0)"
})
},
100)
},
500);
WP.tracking.StubStart("Groups")
},
tiltInEnd = function() {
$(this).unbind("webkitTransitionEnd", tiltInEnd);
$.id("group").style({
webkitPerspective: "0"
})
},
tiltOut = function() {
for (var i = 0; i < livetiles.length; i++) livetiles[i].destroy();
livetiles = [];
tutorial.destroy();
WP.overlay.close();
$.id("hardkeys").removeClass("opened");
$.id("actionbar").removeClass("opened").removeClass("openedHardkeys");
$.id("screen").style({
webkitPerspective: "800px"
});
if ($("#dialog").length()) $.id("dialog").style({
opacity: "0",
webkitTransformOrigin: "-10px 50%",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(90deg)": "translate(-80%,0)",
webkitTransitionDuration: "300ms"
}).bind("webkitTransitionEnd", tiltOutEnd);
else $.id("group").style({
opacity: "0",
webkitTransformOrigin: "-10px 50%",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(90deg)": "translate(-80%,0)",
webkitTransitionDuration: "300ms"
}).bind("webkitTransitionEnd", tiltOutEnd)
},
tiltOutEnd = function() {
var _pageIn = $("#screen .pageIn").removeClass("pageIn");
_pageIn = _pageIn.length() ? _pageIn.attr("id") : "home";
$.id("screen").style({
webkitPerspective: "0"
});
$(this).unbind("webkitTransitionEnd", tiltOutEnd);
slider.destroy();
slider = null;
tutorial = null;
if ($("#dialog").length()) $.id("dialog").remove();
$.id("group").remove();
WP[_pageIn].tiltIn()
};
Slide.prototype = {
x: 0,
headerX: 0,
page: 0,
handleEvent: function(e) {
switch (e.type) {
case "scrollStart":
this.start(e);
break;
case "scrollMove":
this.move(e);
break;
case "scrollEnd":
this.end(e);
break
}
},
start: function(e) {
this.slider.style({
webkitTransitionDuration: "0"
});
this.header.style({
webkitTransitionDuration: "0"
})
},
move: function(e) {
this.x += e.deltaX;
this.headerX += this.titlesWidth[e.deltaX < 0 ? this.pagesPos[1] : this.pagesPos[0]] / this.pageWidth * e.deltaX;
this.slider.style({
webkitTransform: "translate3d(" + this.x + "px,0,0)"
});
this.header.style({
webkitTransform: "translate3d(" + this.headerX + "px,0,0)"
})
},
end: function(e) {
var pageShift = 0,
prevPage = this.page,
duration = "200ms",
that = this;
if (e.directionX > 0) this.page = Math.ceil(this.x / this.pageWidth);
else if (e.directionX < 0) this.page = Math.floor(this.x / this.pageWidth);
else this.page = Math.round(this.x / this.pageWidth);
this.x = this.page * this.pageWidth;
this.slider.style({
webkitTransitionDuration: "300ms",
webkitTransform: "translate3d(" + this.x + "px,0,0)"
});
if (prevPage != this.page) {
if (e.directionX > 0) {
pageShift = this.pagesPos.pop();
this.pagesPos.unshift(pageShift)
} else if (e.directionX < 0) {
pageShift = this.pagesPos.shift();
this.pagesPos.push(pageShift)
}
$("#groupSlider > div").get(pageShift).style({
left: -this.page * this.pageWidth + this.pageWidth * -e.directionX + "px"
});
this.titles.get(pageShift).style({
left: e.directionX < 0 ? this.titles.get(this.pagesPos[1]).style("left").replace("px", "") * 1 + this.titlesWidth[this.pagesPos[1]] + "px": this.titles.get(this.pagesPos[1]).style("left").replace("px", "") * 1 - this.titlesWidth[pageShift] + "px"
});
tutorial.update(this.pagesPos[1])
}
this.scroller.changeTarget($("#groupSlider > div")[this.pagesPos[1]]);
this.headerX = -this.titles.get(this.pagesPos[1]).style("left").replace("px", "") * 1;
$("#groupTitles > h2.active").removeClass("active");
this.titles.get(this.pagesPos[1]).addClass("active");
this.header.style({
webkitTransitionDuration: "200ms",
webkitTransform: "translate3d(" + Math.round(this.headerX) + "px,0,0)"
})
},
destroy: function() {
$("#groupSlider > div").each(function() {
this.style.cssText = ""
});
this.slider[0].style.cssText = "";
this.group[0].style.cssText = "";
this.header[0].style.cssText = "";
this.touch.destroy();
this.touch = null;
this.scroller.destroy();
this.scroller = null;
this.group.unbind("scrollStart", this);
this.group.unbind("scrollMove", this);
this.group.unbind("scrollEnd", this)
}
};
return {
tiltIn: tiltIn,
tiltOut: tiltOut
}
} ();
var WP = WP || {};
WP.home = function() {
var tiles,
tilePosX = 0,
tilePosY = 0,
pictures = [],
peopleTile,
peopleTileTimer,
groupTile,
groupTileTimer,
scroller,
touch,
inboxStep = false,
prevDefault = function(e) {
e.preventDefault();
e.stopPropagation()
},
init = function() {
var _touch = new TouchLayer("home"),
_home = $.id("home"),
_x = 0,
_maxScrollX = 320 - $.id("home").width(),
_d = new Date;
tiles = $("#tiles .tile");
tiles.each(function() {
var _me = $(this);
_me.style({
left: tilePosX * 122 + "px",
top: tilePosY * 122 + "px",
webkitTransformOriginX: -tilePosX * 122 - 8 + "px",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(-90deg)": "translate(-320px,0)"
});
if (tilePosX % 2 || _me.hasClass("wide")) {
tilePosX = 0;
tilePosY++
} else tilePosX++
}).tap(function() {
$("#tiles .selected").removeClass("selected");
this.el.addClass("selected");
window.location.hash = "#" + this.el.attr("id").replace("tile-", "")
});
$.id("tiles").height(tilePosY * 122);
$.id("calToday").html((["sun", "mon", "tue", "wed", "thu", "fri", "sat"])[_d.getDay()] + " <strong>" + _d.getDate() + "</strong>");
_maxScrollX = 320 - $.id("home").width();
_home.bind("scrollStart",
function(e) {
_home.style({
webkitTransitionDuration: "0"
})
});
_home.bind("scrollMove",
function(e) {
_x += e.deltaX;
if (_x > 0) _x = 0;
else if (_x < _maxScrollX) _x = _maxScrollX;
_home.style({
webkitTransform: "translate3d(" + _x + "px,0,0)"
})
});
_home.bind("scrollEnd",
function(e) {
var _prevX = _x,
_duration = "200ms";
if (e.distanceX > 20) _x = 0;
else if (e.distanceX < -20) _x = _maxScrollX;
else {
_duration = "50ms";
_x = Math.round(_x / _maxScrollX) * _maxScrollX
}
clearTimeout(peopleTileTimer);
if (!_x) peopleTileTimer = setTimeout(function() {
peopleTile.play()
},
500);
else peopleTile.pause();
if (_prevX == _x) return;
_home.style({
webkitTransitionDuration: _duration,
webkitTransform: "translate3d(" + _x + "px,0,0)"
});
if (_x) {
scroller.changeTarget($("#programsList > ul")[0]);
$.id("home").addClass("shifted")
} else {
scroller.changeTarget("tiles");
$.id("home").removeClass("shifted")
}
});
$.id("actionProgramsList").tap(function() {
_x = _x ? 0: _maxScrollX;
_home.style({
webkitTransitionDuration: "200ms",
webkitTransform: "translate3d(" + _x + "px,0,0)"
});
if (_x) {
scroller.changeTarget($("#programsList > ul")[0]);
$.id("home").addClass("shifted")
} else {
scroller.changeTarget("tiles");
peopleTileTimer = setTimeout(function() {
peopleTile.play()
},
500);
$.id("home").removeClass("shifted")
}
},
0)
},
Grid = function(_el) {
var _list,
_out = "",
_i,
_l,
_rnd,
_rndPic,
_gridPos = [0, 1, 2, 3, 4, 5, 6, 7, 8],
_pics = [];
for (_i = 0, _l = pictures.length; _i < _l; _i++) this.pictures.push(pictures[_i].attr("src"));
this.el = $("div", _el[0]).get(0);
this.list = $("ul", _el[0]).get(0);
_rnd = Math.floor(Math.random() * 2);
if (_rnd) {
_rnd = Math.floor(Math.random() * 4);
_rndPic = Math.floor(Math.random() * this.pictures.length);
for (_i = 0; _i < 4; _i++) {
_pics.push({
pos: this.pos2x2[_rnd][_i],
src: this.pictures[_rndPic],
size: 2,
offset: _i
});
_gridPos.splice(_gridPos.indexOf(this.pos2x2[_rnd][_i]), 1)
}
this.pictures.splice(_rndPic, 1)
}
for (_i = _pics.length; _i < 5; _i++) {
_rnd = Math.floor(Math.random() * _gridPos.length);
_rndPic = Math.floor(Math.random() * this.pictures.length);
_pics.push({
pos: _gridPos[_rnd],
src: this.pictures[_rndPic],
size: 1,
offset: 0
});
_gridPos.splice(_rnd, 1);
this.pictures.splice(_rndPic, 1)
}
for (_i = 0; _i < 5; _i++) $("li", this.list[0]).get(_pics[_i].pos).append($.create("img").attr({
width: "38",
height: "38",
src: _pics[_i].src
}).addClass(["front", "size" + _pics[_i].size, "offset" + _pics[_i].offset]));
for (_i = 0; _i < 5; _i++) $("li", this.list[0]).get(_gridPos[_i]).append($.create("img").attr({
width: "38",
height: "38",
src: "images/blank1.png"
}).addClass(["front", "size1", "offset0"]));
this.cells = $("li", this.list[0])
},
Group = function(_el) {
this.stripes = $("li", _el[0]);
this.currentPic = 1;
this.currentStripe = 0;
this.activeStripes = [0, 1, 2]
},
tiltIn = function() {
var _i = 0,
_l;
if (!peopleTile) peopleTile = new Grid($.id("tile-people"));
if (!groupTile && !$.is.android) groupTile = new Group($.id("tile-group"));
$.id("home").style("display", "block");
setTimeout(function() {
$.id("sideIcons").removeClass("hidden");
tiles.each(function() {
$(this).style({
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(0deg)": "translate(0,0)",
webkitTransitionDelay: _i * 80 + "ms",
webkitTransitionDuration: "300ms"
});
_i++
})
},
100);
tiles.get(_i - 1).bind("webkitTransitionEnd", tiltInEnd)
},
tiltInEnd = function() {
$(this).unbind("webkitTransitionEnd", tiltInEnd);
if (!scroller) scroller = new iScroll("home", "tiles", {
useTransition: true,
momentum: $.has.rotateY,
bounce: $.has.rotateY,
onScrollStart: function() {
if (this.scroller.id == "tiles") {
clearTimeout(peopleTileTimer);
peopleTile.pause()
}
},
onScrollEnd: function() {
if (this.scroller.id == "tiles") {
clearTimeout(peopleTileTimer);
peopleTileTimer = setTimeout(function() {
peopleTile.play()
},
500)
}
}
});
else setTimeout(function() {
scroller.refresh()
},
400);
if (window.location.hash && window.location.hash != "#home") {
WP.router();
return
}
peopleTileTimer = setTimeout(function() {
peopleTile.play()
},
1e3);
if (groupTile) groupTileTimer = setTimeout(function() {
groupTile.play()
},
2e3);
if (WP.home.inboxStep) {
$.id("screen").append($.create("div").style({
position: "absolute",
top: "0",
left: "0",
bottom: "0",
right: "0",
zIndex: "9999"
}).bind("touchstart", prevDefault).attr("id", "blockscreen"));
$.id("tile-inbox").addClass("tileLinkedInbox").html("<div><h2>Linked inbox</h2><p>3</p></div>");
$.id("screen").append($.create("div").attr("id", "hotspot").html("<div></div>").style({
left: "176px",
top: "186px",
zIndex: "9999"
}).tap(function() {
$.id("hotspot").untap().remove();
$.id("blockscreen").unbind("touchstart", prevDefault).remove();
WP.inbox.stageTwo = true;
setTimeout(function() {
window.location.hash = "#inbox"
},
0)
}));
setTimeout(function() {
scroller.scrollTo(0, 0, 200)
},
800)
}
},
tiltOut = function() {
var _i,
_l,
_el = $("#tiles .selected");
clearTimeout(peopleTileTimer);
peopleTile.pause();
if (groupTile) groupTile.pause();
setTimeout(function() {
tiles.each(function() {
var _me = $(this);
if (_me != _el) _me.style({
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(-90deg)": "translate(-320px,0)",
webkitTransitionDelay: _i * 80 + "ms",
webkitTransitionDuration: "200ms"
})
});
_el.style({
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(-90deg)": "translate(-320px,0)",
webkitTransitionDelay: _i * 80 + "ms",
webkitTransitionDuration: "200ms"
}).removeClass("selected").bind("webkitTransitionEnd", tiltOutEnd);
$.id("sideIcons").addClass("hidden")
},
100)
},
tiltOutEnd = function() {
var _pageIn = $("#screen .pageIn").removeClass("pageIn");
_pageIn = _pageIn.length() ? _pageIn.attr("id") : "home";
$(this).unbind("webkitTransitionEnd", tiltOutEnd);
$("#screen #hotspot").remove();
$("#screen #blockscreen").remove();
WP[_pageIn].tiltIn()
};
Group.prototype = {
handleEvent: function(e) {
switch (e.type) {
case "webkitTransitionEnd":
this.nextImg();
break
}
},
play: function() {
var that = this;
clearTimeout(groupTileTimer);
if (!this.activeStripes.length) {
this.currentPic++;
this.activeStripes = [0, 1, 2];
if (this.currentPic == 4) this.currentPic = 0
}
this.currentStripe = Math.floor(Math.random() * this.activeStripes.length);
this.currentStripe = this.activeStripes.splice(this.currentStripe, 1)[0];
if (this.stop) {
this.nextImg();
return
}
this.stripes.get(that.currentStripe).style({
webkitTransitionDuration: "300ms",
webkitTransform: "scaleY(0.001)"
}).bind("webkitTransitionEnd", this)
},
pause: function() {
this.stop = true
},
nextImg: function() {
var that = this,
stripe = this.stripes.get(this.currentStripe);
stripe.unbind("webkitTransitionEnd", this);
$("img", this.stripes[this.currentStripe]).remove();
setTimeout(function() {
stripe.append($.create("img").attr({
src: pictures[that.currentPic].attr("src"),
width: "114",
height: "114"
}).addClass("offset" + that.currentStripe));
stripe.style({
webkitTransitionDuration: "300ms",
webkitTransform: "scaleY(1)"
});
setTimeout(function() {
if (!that.stop) groupTileTimer = setTimeout(function() {
that.play()
},
Math.floor(Math.random() * 2e3) + 1500);
else that.stop = false
},
200)
},
0)
}
};
Grid.prototype = {
pos2x2: [[0, 1, 3, 4], [1, 2, 4, 5], [3, 4, 6, 7], [4, 5, 7, 8]],
activeCell: false,
pictures: [],
pictureStack: [],
timer: null,
handleEvent: function(e) {
switch (e.type) {
case "webkitTransitionEnd":
this.clearCell();
break
}
},
pause: function() {
this.stop = true
},
clearCell: function() {
this.cells.get(this.activeCell).unbind("webkitTransitionEnd", this);
$("img", this.cells[this.activeCell]).remove();
this.play()
},
play: function() {
var _rnd,
_bigPic,
_rndPic,
_li,
_img,
_i,
_l,
_j,
_k,
_addToStack,
_style = {},
_that = this;
clearTimeout(this.timer);
if (this.activeCell === false && !this.pictureStack.length) this.activeCell = Math.floor(Math.random() * 9);
if (this.pictureStack.length) this.activeCell = this.pictureStack[0].pos;
_img = $("img", this.cells[this.activeCell]);
if (_img.length()) {
_style = $.has.rotateY ? {
webkitTransitionDuration: this.stop ? "0": "200ms",
webkitTransform: "translateZ(0) rotateX(90deg)"
}: {
webkitTransitionDuration: this.stop ? "0": "200ms",
webkitTransform: "translateZ(0) scaleY(0.01)"
};
if (this.stop) {
this.stop = false;
this.clearCell()
} else this.cells.get(this.activeCell).style(_style).bind("webkitTransitionEnd", this);
return
}
if (!this.pictureStack.length) {
this.pictures = [];
_img = $("img", this.list[0]);
for (_i = 0, _l = pictures.length; _i < _l; _i++) {
_addToStack = true;
for (_j = 0, _k = _img.length(); _j < _k; _j++) if (_img.get(_j).attr("src") == pictures[_i].attr("src")) {
_addToStack = false;
break
}
if (_addToStack) this.pictures.push(pictures[_i].attr("src"))
}
this.blankCell = false;
_rndPic = Math.floor(Math.random() * this.pictures.length);
if (this.activeCell == 0 || this.activeCell == 1 || this.activeCell == 3 || this.activeCell == 4) _bigPic = Math.floor(Math.random() * 2);
if (_bigPic) {
_rnd = this.activeCell == 3 || this.activeCell == 4 ? this.activeCell - 1: this.activeCell;
for (_i = 0; _i < 4; _i++) this.pictureStack.push({
pos: this.pos2x2[_rnd][_i],
src: this.pictures[_rndPic],
size: 2,
offset: _i
})
} else this.pictureStack.push({
pos: this.activeCell,
src: this.pictures[_rndPic],
size: 1,
offset: 0
});
this.pictures.splice(_rndPic, 1)
}
_style = $.has.rotateY ? {
webkitTransitionDuration: "0",
webkitTransform: "translateZ(0) rotateX(90deg)"
}: {
webkitTransitionDuration: "0",
webkitTransform: "translateZ(0) scaleY(0.01)"
};
this.cells.get(this.activeCell).style(_style).append($.create("img").attr({
width: "38",
height: "38",
src: this.pictureStack[0].src
}).addClass(["size" + this.pictureStack[0].size, "offset" + this.pictureStack[0].offset]));
this.pictureStack.shift();
setTimeout(function() {
_style = $.has.rotateY ? {
webkitTransitionDuration: "200ms",
webkitTransform: "translateZ(0) rotateX(0deg)"
}: {
webkitTransitionDuration: "200ms",
webkitTransform: "translateZ(0) scaleY(1)"
};
_that.cells.get(_that.activeCell).style(_style);
_that.activeCell = false
},
0);
this.timer = setTimeout(function() {
if (_that.stop) _that.stop = false;
else _that.play()
},
3e3)
}
};
return {
init: init,
tiltIn: tiltIn,
tiltOut: tiltOut,
pictures: pictures,
inboxStep: inboxStep
}
} ();
var WP = WP || {};
WP.inbox = function() {
var slider,
tutorial,
livetiles = [],
dialog,
dialogScroller,
stageTwo,
Slide = function() {
var titles = $("#inboxTitles > h2"),
that = this,
i,
l;
this.slider = $.id("inboxSlider");
this.inbox = $.id("inbox");
this.header = $.id("inboxTitles");
this.pageWidth = $.id("inboxAll").width();
this.pagesPos = [2, 0, 1];
this.titles = $("#inboxTitles > h2");
this.titlesWidth = [];
this.headerWidth = 0;
titles.each(function() {
that.titlesWidth.push(this.offsetWidth);
that.headerWidth += this.offsetWidth
});
titles.get(0).style({
position: "absolute",
left: "0px"
});
titles.get(1).style({
position: "absolute",
left: this.titlesWidth[0] + "px"
});
titles.get(2).style({
position: "absolute",
left: -this.titlesWidth[2] + "px"
});
this.headerRightLimit = that.headerWidth - this.titlesWidth[3];
this.touch = new TouchLayer("inbox");
this.scroller = new iScroll("inboxScroller", "inboxAll", {
useTransition: true,
hScroll: false,
momentum: $.has.rotateY,
bounce: $.has.rotateY,
bounceLock: true,
onBeforeScrollStart: function() {}
});
this.inbox.bind("scrollStart", this);
this.inbox.bind("scrollMove", this);
this.inbox.bind("scrollEnd", this)
},
init = function() {
slider = new Slide;
$("#actionbar li").style("display", "none");
$("#actionAdd, #actionSelect, #actionSync, #actionSearch").style("display", "inline-block");
$.id("actionbar").addClass("inverted").addClass("opened");
if (!WP.inbox.stageTwo) tutorial = new WP.Tutorial([{
el: "#actionEllipsis",
tap: function() {
$.id("actionbarOptions").html('<li>folders</li><li>settings</li><li><span id="step2">link inboxes</span></li><li>add email account</li>');
$.id("actionbar").addClass("wideOpened");
tutorial.nextStep()
}
},
{
el: "#step2",
tap: function() {
dialog = new WP.Dialog("inboxlinked");
$.id("dialog").style("background", "#fff");
$.id("actionbar").removeClass("opened").removeClass("wideOpened");
dialogScroller = new iScroll("inboxLinked", "inboxDialogScroller");
tutorial.nextStep()
}
},
{
el: "#step3",
tap: function() {
tutorial.nextStep();
var li = document.createElement("li");
li.innerHTML = $.id("takeThis").html();
li.className = "hotmail";
$.id("takeThis").remove();
document.getElementById("inboxList").insertBefore(li, document.getElementById("aboveThis"));
$.id("hardkeys").addClass("opened");
WP.tracking.StubMidpoint("Outlook")
}
},
{
el: "#buttonHome",
tap: function() {
tutorial.nextStep();
$.id("hardkeys").removeClass("opened");
WP.home.inboxStep = true;
setTimeout(function() {
window.location.hash = "#home"
},
0)
}
}]);
else tutorial = new WP.Tutorial([{
el: "#stage2step1",
tap: function() {
dialog = new WP.Dialog("inboxemail");
$.id("dialog").style("background", "#fff");
$.id("actionbar").removeClass("opened");
dialogScroller = new iScroll("inboxEmail", "inboxDialogScroller");
tutorial.nextStep();
setTimeout(function() {
$("#actionbar li").style("display", "none");
$("#actionReply, #actionDelete, #actionNext, #actionPrev").style("display", "inline-block");
$.id("actionbar").addClass("openedHardkeys");
$.id("hardkeys").addClass("opened")
},
500)
}
},
{
el: "#buttonHome",
tap: function() {
tutorial.nextStep();
WP.overlay.open("#dialog", "Outlook");
$.id("hardkeys").removeClass("opened");
$.id("actionbar").removeClass("opened").removeClass("openedHardkeys").removeClass("wideOpenedHardkeys")
}
}]);
WP.inbox.stageTwo = false
},
tiltIn = function() {
setTimeout(function() {
$("#screen > div").style("display", "none");
$.id("inbox").style({
display: "block",
opacity: "0",
webkitTransform: "translate3d(0,0,0)",
webkitTransitionDuration: "200ms"
});
$("#inbox h2 span").style({
webkitTransformOrigin: "0 50%",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(85deg)": "translate3d(-200px,0,0)",
webkitTransitionDuration: "300ms"
});
$.id("inboxTitles").style({
webkitTransformOrigin: "0 50%",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(85deg)": "translate3d(-200px,0,0)",
webkitTransitionDuration: "400ms"
});
$.id("inboxScroller").style({
webkitTransformOrigin: "0 50%",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(85deg)": "translate3d(-200px,0,0)",
webkitTransitionDuration: "500ms"
}).bind("webkitTransitionEnd", tiltInEnd);
if (WP.inbox.stageTwo) {
$("#inbox .linked").style("display", "block");
$("#inbox .header h2 span").html("inbox - outlook - hotmail")
}
init();
setTimeout(function() {
$.id("inbox").style({
opacity: "1"
});
$("#inbox h2 span").style({
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(0deg)": "translate3d(0,0,0)"
});
$.id("inboxTitles").style({
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(0deg)": "translate3d(0,0,0)"
});
$.id("inboxScroller").style({
webkitTransformOrigin: "0 0",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(0deg)": "translate3d(0,0,0)"
})
},
100)
},
500);
if (!WP.inbox.stageTwo) WP.tracking.StubStart("Outlook")
},
tiltInEnd = function() {
$(this).unbind("webkitTransitionEnd", tiltInEnd);
$.id("inbox").style({
webkitPerspective: "0"
})
},
tiltOut = function() {
for (var i = 0; i < livetiles.length; i++) livetiles[i].destroy();
livetiles = [];
tutorial.destroy();
WP.overlay.close();
if (dialogScroller) {
dialogScroller.destroy();
dialogScroller = null
}
$.id("hardkeys").removeClass("opened");
$.id("actionbar").removeClass("opened").removeClass("wideOpened").removeClass("openedHardkeys").removeClass("wideOpenedHardkeys");
$.id("screen").style({
webkitPerspective: "800px"
});
if ($("#dialog").length()) $.id("dialog").style({
opacity: "0",
webkitTransformOrigin: "-10px 50%",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(90deg)": "translate(-80%,0)",
webkitTransitionDuration: "300ms"
}).bind("webkitTransitionEnd", tiltOutEnd);
else $.id("inbox").style({
opacity: "0",
webkitTransformOrigin: "-10px 50%",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(90deg)": "translate(-80%,0)",
webkitTransitionDuration: "300ms"
}).bind("webkitTransitionEnd", tiltOutEnd)
},
tiltOutEnd = function() {
$(this).unbind("webkitTransitionEnd", tiltOutEnd);
var _pageIn = $("#screen .pageIn").removeClass("pageIn");
_pageIn = _pageIn.length() ? _pageIn.attr("id") : "home";
$.id("screen").style({
webkitPerspective: "0"
});
slider.destroy();
slider = null;
tutorial = null;
if ($("#dialog").length()) $.id("dialog").remove();
$.id("inbox").remove();
dialog = null;
$.id("actionbar").removeClass("inverted");
WP[_pageIn].tiltIn()
};
Slide.prototype = {
x: 0,
headerX: 0,
page: 0,
handleEvent: function(e) {
switch (e.type) {
case "scrollStart":
this.start(e);
break;
case "scrollMove":
this.move(e);
break;
case "scrollEnd":
this.end(e);
break
}
},
start: function(e) {
this.slider.style({
webkitTransitionDuration: "0"
});
this.header.style({
webkitTransitionDuration: "0"
})
},
move: function(e) {
this.x += e.deltaX;
this.headerX += this.titlesWidth[e.deltaX < 0 ? this.pagesPos[1] : this.pagesPos[0]] / this.pageWidth * e.deltaX;
this.slider.style({
webkitTransform: "translate3d(" + this.x + "px,0,0)"
});
this.header.style({
webkitTransform: "translate3d(" + this.headerX + "px,0,0)"
})
},
end: function(e) {
var pageShift = 0,
prevPage = this.page,
duration = "200ms",
that = this;
if (e.directionX > 0) this.page = Math.ceil(this.x / this.pageWidth);
else if (e.directionX < 0) this.page = Math.floor(this.x / this.pageWidth);
else this.page = Math.round(this.x / this.pageWidth);
this.x = this.page * this.pageWidth;
this.slider.style({
webkitTransitionDuration: "300ms",
webkitTransform: "translate3d(" + this.x + "px,0,0)"
});
if (prevPage != this.page) {
if (e.directionX > 0) {
pageShift = this.pagesPos.pop();
this.pagesPos.unshift(pageShift)
} else if (e.directionX < 0) {
pageShift = this.pagesPos.shift();
this.pagesPos.push(pageShift)
}
$("#inboxSlider > div").get(pageShift).style({
left: -this.page * this.pageWidth + this.pageWidth * -e.directionX + "px"
});
this.titles.get(pageShift).style({
left: e.directionX < 0 ? this.titles.get(this.pagesPos[1]).style("left").replace("px", "") * 1 + this.titlesWidth[this.pagesPos[1]] + "px": this.titles.get(this.pagesPos[1]).style("left").replace("px", "") * 1 - this.titlesWidth[pageShift] + "px"
});
tutorial.update(this.pagesPos[1])
}
this.scroller.changeTarget($("#inboxSlider > div")[this.pagesPos[1]]);
this.headerX = -this.titles.get(this.pagesPos[1]).style("left").replace("px", "") * 1;
$("#inboxTitles > h2.active").removeClass("active");
this.titles.get(this.pagesPos[1]).addClass("active");
this.header.style({
webkitTransitionDuration: "200ms",
webkitTransform: "translate3d(" + Math.round(this.headerX) + "px,0,0)"
})
},
destroy: function() {
$("#inboxSlider > div").each(function() {
this.style.cssText = ""
});
this.slider[0].style.cssText = "";
this.inbox[0].style.cssText = "";
this.header[0].style.cssText = "";
this.touch.destroy();
this.touch = null;
this.scroller.destroy();
this.scroller = null;
this.inbox.unbind("scrollStart", this);
this.inbox.unbind("scrollMove", this);
this.inbox.unbind("scrollEnd", this)
}
};
return {
tiltIn: tiltIn,
tiltOut: tiltOut,
stageTwo: stageTwo
}
} ();
var WP = WP || {};
WP.init = function() {
var loadedFiles = 0,
totalFiles = 0,
currentPage = "home",
removeLoading = function() {
$.id("loading").unbind(removeLoading).remove();
$.id("welcomeButton").untap();
$.id("welcome-tap").untap();
$.id("welcome-twipe").untap();
setTimeout(function() {
WP.home.tiltIn()
},
$.has.touch && !$.is.standalone ? 500: 0)
},
pictureLoaded = function() {
$(this).unbind("load", pictureLoaded).unbind("error", pictureLoaded);
ready()
},
preloadPictures = function(_page, _pictures) {
var _i,
_l,
_img,
_tmp;
for (_i = 0, _l = _pictures.length; _i < _l; _i++) {
if ($.is.retina) {
_tmp = _pictures[_i].lastIndexOf(".");
_pictures[_i] = _pictures[_i].substr(0, _tmp) + "@2x" + _pictures[_i].substr(_tmp)
}
_img = $.create("img").attr({
width: "38",
height: "38",
src: _pictures[_i]
}).bind("load", pictureLoaded).bind("error", pictureLoaded);
WP[_page].pictures.push(_img)
}
},
orientationCheck = function() {
if (Math.abs(window.orientation) == 90) $.id("wrongOrientation").style("display", "block");
else $.id("wrongOrientation").style("display", "none")
},
ready = function() {
loadedFiles++;
if (loadedFiles == totalFiles) {
WP.tracking.DemoLoaded();
if (window.location.hash && window.location.hash != "#home") {
WP.home.init();
$.id("loading").bind("webkitTransitionEnd", removeLoading).addClass("fadeout");
return
}
$.id("dots").style("visibility", "hidden");
$.id("welcomeButton").html("<span></span><strong>Start demo</strong>").addClass("start").tap(function() {
WP.home.init();
$.id("loading").bind("webkitTransitionEnd", removeLoading).addClass("fadeout");
WP.tracking.StartDemo()
});
$.id("welcome-tap").tap(function() {
WP.home.init();
$.id("loading").bind("webkitTransitionEnd", removeLoading).addClass("fadeout")
});
$.id("welcome-swipe").tap(function() {
WP.home.init();
$.id("loading").bind("webkitTransitionEnd", removeLoading).addClass("fadeout")
})
}
},
init = function(_debug) {
var _i,
_l,
_offset = 0,
_device = navigator.appVersion.match(/(iphone|ipad|ipod)( simulator)?;( u;)? cpu( iphone)? OS \d+(_\d)?|android \d+(\.\d)?|Chrome\/\d+|version\/\d+\.\d+ safari/i),
_version = _device ? _device[0].replace(/_/g, ".").replace(/[^\d.]/g, "") * 1: 0,
_pages = [{
id: "people",
page: "pages/people.html?v14"
},
{
id: "profile",
page: "pages/people-profile.html?v14"
},
{
id: "pictures",
page: "pages/pictures.html?v7"
},
{
id: "picturesfacebook",
page: "pages/pictures-facebook.html?v3"
},
{
id: "addcomment",
page: "pages/addcomment.html?v4"
},
{
id: "accounts",
page: "pages/accounts.html?v1"
},
{
id: "messaging",
page: "pages/messaging.html?v6"
},
{
id: "thread",
page: "pages/thread.html?v3"
},
{
id: "group",
page: "pages/group.html?v8"
},
{
id: "pickone",
page: "pages/pickone.html?v6"
},
{
id: "sendmessage",
page: "pages/sendmessage.html?v9"
},
{
id: "switchto",
page: "pages/switchto.html?v6"
},
{
id: "calendar",
page: "pages/calendar.html?v4"
},
{
id: "appointment",
page: "pages/appointment.html?v2"
},
{
id: "pickcalendar",
page: "pages/pickcalendar.html?v2"
},
{
id: "localscout",
page: "pages/localscout.html?v10"
},
{
id: "xbox",
page: "pages/localscout-xbox.html?v12"
},
{
id: "inbox",
page: "pages/inbox.html?v10"
},
{
id: "inboxlinked",
page: "pages/inbox-linked.html?v7"
},
{
id: "inboxemail",
page: "pages/inbox-email.html?v11"
},
{
id: "phone",
page: "pages/phone.html?v2"
},
{
id: "phonedialing",
page: "pages/phone-dialing.html?v3"
},
{
id: "overlay",
page: "pages/overlay.html?v4"
}],
_pictures = ["images/people/michelle_alexander.jpg", "images/people/ken_sanchez.jpg", "images/people/linda_mitchell.jpg", "images/people/scott_mitchell.jpg", "images/people/sean_alexander.jpg", "images/people/wendy_kahn.jpg", "images/people/yolanda_sanchez.jpg", "images/blank1.png", "images/blank2.png"],
_bgImg = ["images/pictures-bg.jpg", "images/pictureshub/share.jpg"];
if (!_debug) {
_device = _device ? _device[0] : "";
if (!_device || /iphone|ipod|ipad/i.test(_device) && _version < 3.2 || /android/i.test(_device) && _version < 2.2 || /chrome/i.test(_device) && _version < 10 || /safari/i.test(_device) && _version < 4) {
WP.tracking.Unsupported();
setTimeout(function() {
window.location.href = "unsupported.mspx"
},
80);
return
}
}
totalFiles += _pages.length;
totalFiles += _pictures.length;
$.bind(document, "touchmove",
function(e) {
e.preventDefault()
});
if (!$.is.standalone) {
$.bind(document, "touchstart",
function(e) {
if (window.scrollY != 1) {
window.scrollTo(0, 1);
$.id("device").height(window.innerHeight);
$.id("wrongOrientation").height(window.innerHeight + 1)
}
});
$(window).bind("scroll",
function() {
$.id("device").height(window.innerHeight);
$.id("wrongOrientation").height(window.innerHeight + 1)
})
}
$.bind(window, "hashchange", WP.router);
$.bind(window, $.is.android ? "resize": "orientationchange",
function() {
if (window.scrollY != 1) window.scrollTo(0, 1);
$.id("device").height(window.innerHeight);
$.id("wrongOrientation").height(window.innerHeight + 1);
orientationCheck()
});
$.ready(function() {
$.id("wrongOrientation").bind("touchstart",
function(e) {
e.preventDefault();
e.stopPropagation()
});
orientationCheck()
});
$.loaded(function() {
$.id("MainBody").style("display", "");
if ($.has.touch && !$.is.standalone) {
$("body").height(1004);
setTimeout(function() {
window.scrollTo(0, 1);
$.id("device").height(window.innerHeight);
$.id("wrongOrientation").height(window.innerHeight + 1)
},
0)
}
setTimeout(function() {
$.id("dots").addClass("startani")
},
200);
setTimeout(function() {
preloadPictures("home", _pictures);
preloadPictures("pictures", _bgImg);
for (_i = 0, _l = _pages.length; _i < _l; _i++) if (_debug || sessionStorage[_pages[_i].id] === undefined || sessionStorage[_pages[_i].id] == "false") $.ajax(_pages[_i].page,
function(_response, _num) {
sessionStorage[_pages[_num].id] = _response;
ready()
},
false, _i);
else ready()
},
1e3)
})
};
return init
} ();
var WP = WP || {};
WP.LiveTile = function() {
var LiveTile = function(el) {
this.tile = $(el);
this.pos = 2;
this.slide()
};
LiveTile.prototype = {
wrapper: null,
backface: null,
timer: null,
flipTimer: null,
flipped: false,
handleEvent: function(e) {
if (e.type == "webkitTransitionEnd") {
var that = this;
this.wrapper.unbind("webkitTransitionEnd", this);
if ($.has.rotateY) {
if (!this.flipped) {
this.tile.style({
left: "0",
webkitTransitionProperty: "-webkit-transform"
});
this.backface.style("left", "-114px")
} else {
this.tile.style({
left: "-114px",
webkitTransitionProperty: "-webkit-transform"
});
this.backface.style("left", "0")
}
setTimeout(function() {
that.wrapper.style({
webkitTransitionDuration: "400ms",
webkitTransform: "translateZ(0) rotateX(0)"
})
},
100)
}
setTimeout(function() {
clearTimeout(that.flipTimer);
that.flipTimer = setTimeout(function() {
that.flip()
},
4e3)
},
200)
}
},
slide: function() {
var that = this;
clearTimeout(this.timer);
this.timer = setTimeout(function() {
that.pos--;
if (that.pos == -1) that.pos = 2;
that.tile.style({
webkitTransitionProperty: "-webkit-transform",
webkitTransform: "translate3d(0,-" + that.pos * 25 + "%,0)"
});
that.slide()
},
Math.floor(Math.random() * 1e4) + 2300)
},
addBackface: function(text) {
this.backface = $.create("div").addClass("back").html(text).style($.has.rotateY ? {
webkitTransitionProperty: "-webkit-transform",
webkitTransform: "translate3d(0,0,0)",
left: "-114px"
}: {
webkitTransitionProperty: "opacity",
webkitTransitionDuration: "0",
webkitTransform: "translate3d(0,0,0)",
opacity: "0"
});
this.wrapper = $(this.tile[0].parentNode).append(this.backface).style("webkitTransitionProperty", "-webkit-transform");
this.flip()
},
flip: function() {
var that = this;
clearTimeout(this.flipTimer);
this.flipTimer = setTimeout(function() {
if ($.has.rotateY) that.wrapper.style({
webkitTransitionDuration: "400ms",
webkitTransform: "translateZ(0) rotateX(90deg)"
});
else that.backface.style({
webkitTransitionDuration: "600ms",
opacity: that.flipped ? "0": "1"
});
that.flipped = !that.flipped;
that.wrapper.bind("webkitTransitionEnd", that)
},
Math.floor(Math.random() * 8e3) + 1e3)
},
destroy: function() {
clearTimeout(this.timer);
clearTimeout(this.flipTimer);
this.tile = null;
this.backface = null;
this.wrapper = null
}
};
return LiveTile
} ();
var WP = WP || {};
WP.localscout = function() {
var slider,
tutorial,
dialog,
Slide = function() {
this.slider = $.id("localscoutSlider");
this.localscout = $.id("localscout");
this.pageWidth = $.id("localscoutEat").width();
this.pagesPos = [3, 0, 1, 2];
this.touch = new TouchLayer("localscout");
this.scroller = new iScroll("localscoutScroller", "localscoutEat", {
useTransition: true,
hScroll: false,
momentum: $.has.rotateY,
bounce: $.has.rotateY,
bounceLock: true,
onBeforeScrollStart: function() {}
});
this.localscout.bind("scrollStart", this);
this.localscout.bind("scrollMove", this);
this.localscout.bind("scrollEnd", this)
},
init = function() {
slider = new Slide;
tutorial = new WP.Tutorial([{
el: "#step1",
reach: function() {
tutorial.nextStep()
}
},
{
el: "#step2",
reach: function() {
tutorial.nextStep()
}
},
{
el: "#step3",
reach: function() {
tutorial.nextStep()
}
},
{
el: "#step4",
tap: function() {
$.id("screen").append($.create("div").attr("id", "xbox").addClass("pageIn").html(sessionStorage["xbox"]));
tutorial.nextStep();
tiltToXbox()
}
}])
},
tiltIn = function() {
setTimeout(function() {
$("#screen > div").style("display", "none");
$.id("localscout").style({
display: "block",
opacity: "0",
webkitTransform: "translate3d(0,0,0)",
webkitTransitionDuration: "200ms"
});
$("#localscout h2 span").style({
webkitTransformOrigin: "0 50%",
webkitTransform: $.has.rotateY ? "translate3d(160px,0,0) rotateY(45deg)": "translate3d(160px,0,0)",
webkitTransitionDuration: "350ms"
});
$.id("localscoutSlider").style({
webkitTransformOrigin: "0 50%",
webkitTransform: $.has.rotateY ? "translate3d(160px,0,0) rotateY(45deg)": "translate3d(160px,0,0)",
webkitTransitionDuration: "300ms"
});
init();
setTimeout(function() {
$.id("localscout").style({
opacity: "1"
});
$("#localscout h2 span").style({
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(0deg)": "translate3d(0,0,0)"
});
$.id("localscoutSlider").style({
webkitTransformOrigin: "0 0",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(0deg)": "translate3d(0,0,0)"
})
},
100)
},
500);
$("#actionbar li").style("display", "none");
$("#actionAdd, #actionSearch").style("display", "inline-block");
WP.tracking.StubStart("LocalScout")
},
tiltToXbox = function() {
tutorial.destroy();
$.id("hardkeys").removeClass("opened");
$.id("actionbar").removeClass("opened").removeClass("openedHardkeys").removeClass("closed");
$.id("screen").style({
webkitPerspective: "800px"
});
$.id("localscout").style({
opacity: "0",
webkitTransformOrigin: "-10px 50%",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(-90deg)": "translate(-80%,0)",
webkitTransitionDuration: "300ms"
}).bind("webkitTransitionEnd", tiltOutEnd)
},
tiltOut = function() {
tutorial.destroy();
$.id("hardkeys").removeClass("opened");
$.id("actionbar").removeClass("opened").removeClass("openedHardkeys").removeClass("closed");
$.id("screen").style({
webkitPerspective: "800px"
});
$.id("localscout").style({
opacity: "0",
webkitTransformOrigin: "-10px 50%",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(90deg)": "translate(-80%,0)",
webkitTransitionDuration: "300ms"
}).bind("webkitTransitionEnd", tiltOutEnd)
},
tiltOutEnd = function() {
var _pageIn = $("#screen .pageIn").removeClass("pageIn");
_pageIn = _pageIn.length() ? _pageIn.attr("id") : "home";
$.id("screen").style({
webkitPerspective: "0"
});
$.id("actionLike").removeClass("dislike");
$(this).unbind("webkitTransitionEnd", tiltOutEnd);
slider.destroy();
slider = null;
tutorial = null;
$.id("localscout").remove();
if ($("#dialog").length()) $.id("dialog").remove();
WP[_pageIn].tiltIn()
},
fadeOut = function() {
$.id("localscout").style({
opacity: "0",
webkitTransitionDuration: "300ms"
}).bind("webkitTransitionEnd", tiltOutEnd)
};
Slide.prototype = {
x: 0,
headerX: 0,
page: 0,
handleEvent: function(e) {
switch (e.type) {
case "scrollStart":
this.start(e);
break;
case "scrollMove":
this.move(e);
break;
case "scrollEnd":
this.end(e);
break
}
},
start: function(e) {
this.slider.style({
webkitTransitionDuration: "0"
})
},
move: function(e) {
this.x += e.deltaX;
this.slider.style({
webkitTransform: "translate3d(" + this.x + "px,0,0)"
})
},
end: function(e) {
var pageShift = 0,
prevPage = this.page,
duration = "200ms",
that = this,
header = $("#localscout h2 span");
if (e.directionX > 0) this.page = Math.ceil(this.x / this.pageWidth);
else if (e.directionX < 0) this.page = Math.floor(this.x / this.pageWidth);
else this.page = Math.round(this.x / this.pageWidth);
this.x = this.page * this.pageWidth;
this.slider.style({
webkitTransitionDuration: "200ms",
webkitTransform: "translate3d(" + this.x + "px,0,0)"
});
if (prevPage != this.page) {
if (e.directionX > 0) {
pageShift = this.pagesPos.pop();
this.pagesPos.unshift(pageShift)
} else if (e.directionX < 0) {
pageShift = this.pagesPos.shift();
this.pagesPos.push(pageShift)
}
$("#localscoutSlider > div").get(pageShift).style({
left: e.directionX < 0 ? -this.page * this.pageWidth + this.pageWidth * 2 * -e.directionX + "px": -this.page * this.pageWidth + this.pageWidth * -e.directionX + "px"
});
tutorial.update(this.pagesPos[1]);
header[0].className = "";
if (this.pagesPos[1] == 0) header.style({
webkitTransform: "translate3d(0,0,0)",
webkitTransitionDuration: "300ms"
});
else if (this.pagesPos[1] == 1) header.style({
webkitTransform: "translate3d(-70px,-20px,0)",
webkitTransitionDuration: "300ms"
});
else if (this.pagesPos[1] == 2) header.style({
webkitTransform: "translate3d(-60px,-200px,0)",
webkitTransitionDuration: "300ms"
});
else if (this.pagesPos[1] == 3) header.style({
webkitTransform: "translate3d(-10px,-200px,0)",
webkitTransitionDuration: "300ms"
})
}
this.scroller.changeTarget($("#localscoutSlider > div")[this.pagesPos[1]])
},
destroy: function() {
$("#localscoutSlider > div").each(function() {
this.style.cssText = ""
});
this.slider[0].style.cssText = "";
this.localscout[0].style.cssText = "";
this.touch.destroy();
this.touch = null;
this.scroller.destroy();
this.scroller = null;
this.localscout.unbind("scrollStart", this);
this.localscout.unbind("scrollMove", this);
this.localscout.unbind("scrollEnd", this)
}
};
return {
tiltIn: tiltIn,
tiltOut: tiltOut
}
} ();
var WP = WP || {};
WP.messaging = function() {
var slider,
tutorial,
dialog,
hardkeys = false,
Slide = function() {
var titles = $("#messagingTitles > h2"),
that = this,
i,
l;
this.slider = $.id("messagingSlider");
this.messaging = $.id("messaging");
this.header = $.id("messagingTitles");
this.pageWidth = $.id("messagingThreads").width();
this.pagesPos = [0, 1];
this.titles = $("#messagingTitles > h2");
this.titlesWidth = [];
this.headerWidth = 0;
titles.each(function() {
that.titlesWidth.push(this.offsetWidth);
that.headerWidth += this.offsetWidth
});
titles.get(0).style({
position: "absolute",
left: "0px"
});
titles.get(1).style({
position: "absolute",
left: this.titlesWidth[0] + "px"
});
this.headerRightLimit = that.headerWidth - this.titlesWidth[3];
this.touch = new TouchLayer("messaging");
this.scroller = new iScroll("messagingScroller", "messagingThreads", {
useTransition: true,
hScroll: false,
momentum: $.has.rotateY,
bounce: $.has.rotateY,
bounceLock: true,
onBeforeScrollStart: function() {}
});
this.messaging.bind("scrollStart", this);
this.messaging.bind("scrollMove", this);
this.messaging.bind("scrollEnd", this)
},
init = function() {
slider = new Slide;
tutorial = new WP.Tutorial([{
el: "#step1",
reach: function() {
tutorial.nextStep()
}
},
{
el: "#step2",
tap: function() {
dialog = new WP.Dialog("thread");
$("#actionbar li").style("display", "none");
$("#actionSendComment, #actionClip, #actionMic, #actionSwitch").style("display", "inline-block");
$.id("actionbar").removeClass("hidden").addClass("opened");
WP.tracking.StubMidpoint("Messaging");
tutorial.nextStep()
}
},
{
el: "#actionSwitch > span",
tap: function() {
$.id("actionbar").removeClass("opened").addClass("hidden");
var openSwitchTo = function() {
$(this).unbind("webkitTransitionEnd", openSwitchTo).html(sessionStorage["switchto"]).style({
webkitTransitionDuration: "0",
opacity: "0",
webkitTransform: "translate3d(0,0,0)"
});
$("#switchto h5").style({
webkitTransitionDuration: "0",
webkitTransform: "translate3d(100px,-100px,0)"
});
$("#switchto > ul").style({
webkitTransitionDuration: "0",
webkitTransform: "translate3d(0,300px,0)"
});
setTimeout(function() {
$("#dialog").style({
webkitTransitionDuration: "300ms",
opacity: "1"
});
$("#switchto h5").style({
webkitTransitionDuration: "300ms",
webkitTransform: "translate3d(0,0,0)"
});
$("#switchto > ul").style({
webkitTransitionDuration: "500ms",
webkitTransform: "translate3d(0,0,0)"
})
},
100)
};
$("#dialog").style({
webkitTransitionDuration: "300ms",
opacity: "0",
webkitTransform: "translate3d(0,300px,0)"
}).bind("webkitTransitionEnd", openSwitchTo);
$.id("hardkeys").addClass("opened");
tutorial.nextStep()
}
},
{
el: "#buttonHome",
tap: function() {
tutorial.nextStep();
$.id("hardkeys").removeClass("opened");
WP.overlay.open("#dialog", "Messaging")
}
}])
},
tiltIn = function() {
setTimeout(function() {
$("#screen > div").style("display", "none");
$.id("messaging").style({
display: "block",
opacity: "0",
webkitTransform: "translate3d(0,0,0)",
webkitTransitionDuration: "200ms"
});
$("#messaging h2 span").style({
webkitTransformOrigin: "0 50%",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(85deg)": "translate3d(-200px,0,0)",
webkitTransitionDuration: "300ms"
});
$.id("messagingTitles").style({
webkitTransformOrigin: "0 50%",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(85deg)": "translate3d(-200px,0,0)",
webkitTransitionDuration: "400ms"
});
$.id("messagingScroller").style({
webkitTransformOrigin: "0 50%",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(85deg)": "translate3d(-200px,0,0)",
webkitTransitionDuration: "500ms"
});
init();
setTimeout(function() {
$.id("messaging").style({
opacity: "1"
});
$("#messaging h2 span").style({
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(0deg)": "translate3d(0,0,0)"
});
$.id("messagingTitles").style({
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(0deg)": "translate3d(0,0,0)"
});
$.id("messagingScroller").style({
webkitTransformOrigin: "0 0",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(0deg)": "translate3d(0,0,0)"
})
},
100)
},
500);
WP.tracking.StubStart("Messaging")
},
tiltOut = function() {
tutorial.destroy();
WP.overlay.close();
$.id("hardkeys").removeClass("opened");
$.id("actionbar").removeClass("opened").removeClass("wideOpened").removeClass("openedHardkeys").removeClass("wideOpenedHardkeys");
$.id("screen").style({
webkitPerspective: "800px"
});
if ($("#dialog").length()) $.id("dialog").style({
opacity: "0",
webkitTransformOrigin: "-10px 50%",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(90deg)": "translate(-80%,0)",
webkitTransitionDuration: "300ms"
}).bind("webkitTransitionEnd", tiltOutEnd);
else $.id("messaging").style({
opacity: "0",
webkitTransformOrigin: "-10px 50%",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(90deg)": "translate(-80%,0)",
webkitTransitionDuration: "300ms"
}).bind("webkitTransitionEnd", tiltOutEnd)
},
tiltOutEnd = function() {
var _pageIn = $("#screen .pageIn").removeClass("pageIn");
_pageIn = _pageIn.length() ? _pageIn.attr("id") : "home";
$.id("screen").style({
webkitPerspective: "0"
});
$(this).unbind("webkitTransitionEnd", tiltOutEnd);
slider.destroy();
slider = null;
tutorial = null;
$.id("messaging").remove();
if ($("#dialog").length()) $.id("dialog").remove();
WP[_pageIn].tiltIn()
};
Slide.prototype = {
x: 0,
headerX: 0,
page: 0,
handleEvent: function(e) {
switch (e.type) {
case "scrollStart":
this.start(e);
break;
case "scrollMove":
this.move(e);
break;
case "scrollEnd":
this.end(e);
break
}
},
start: function(e) {
this.slider.style({
webkitTransitionDuration: "0"
});
this.header.style({
webkitTransitionDuration: "0"
})
},
move: function(e) {
this.x += e.deltaX;
this.headerX += this.titlesWidth[e.deltaX < 0 ? this.pagesPos[0] : this.pagesPos[1]] / this.pageWidth * e.deltaX;
this.slider.style({
webkitTransform: "translate3d(" + this.x + "px,0,0)"
});
this.header.style({
webkitTransform: "translate3d(" + this.headerX + "px,0,0)"
})
},
end: function(e) {
var pageShift = 0,
prevPage = this.page,
duration = "200ms",
that = this;
if (e.directionX > 0) this.page = Math.ceil(this.x / this.pageWidth);
else if (e.directionX < 0) this.page = Math.floor(this.x / this.pageWidth);
else this.page = Math.round(this.x / this.pageWidth);
this.x = this.page * this.pageWidth;
this.slider.style({
webkitTransitionDuration: "300ms",
webkitTransform: "translate3d(" + this.x + "px,0,0)"
});
if (prevPage != this.page) {
if (e.directionX > 0) {
pageShift = this.pagesPos.pop();
this.pagesPos.unshift(pageShift)
} else if (e.directionX < 0) {
pageShift = this.pagesPos.shift();
this.pagesPos.push(pageShift)
}
$("#messagingSlider > div").get(pageShift).style({
left: e.directionX < 0 ? -this.page * this.pageWidth + this.pageWidth * -e.directionX + "px": -this.page * this.pageWidth + "px"
});
this.titles.get(pageShift).style({
left: e.directionX < 0 ? this.titles.get(this.pagesPos[0]).style("left").replace("px", "") * 1 + this.titlesWidth[this.pagesPos[0]] + "px": this.titles.get(this.pagesPos[1]).style("left").replace("px", "") * 1 - this.titlesWidth[pageShift] + "px"
});
tutorial.update(this.pagesPos[0])
}
this.scroller.changeTarget($("#messagingSlider > div")[this.pagesPos[0]]);
this.headerX = -this.titles.get(this.pagesPos[0]).style("left").replace("px", "") * 1;
$("#messagingTitles > h2.active").removeClass("active");
this.titles.get(this.pagesPos[0]).addClass("active");
this.header.style({
webkitTransitionDuration: "200ms",
webkitTransform: "translate3d(" + Math.round(this.headerX) + "px,0,0)"
})
},
destroy: function() {
$("#messagingSlider > div").each(function() {
this.style.cssText = ""
});
this.slider[0].style.cssText = "";
this.messaging[0].style.cssText = "";
this.header[0].style.cssText = "";
this.touch.destroy();
this.touch = null;
this.scroller.destroy();
this.scroller = null;
this.messaging.unbind("scrollStart", this);
this.messaging.unbind("scrollMove", this);
this.messaging.unbind("scrollEnd", this)
}
};
return {
tiltIn: tiltIn,
tiltOut: tiltOut
}
} ();
var WP = WP || {};
WP.overlay = function() {
var open = function(container, hub) {
$(container).append($.create("div").attr("id", "popup").html(sessionStorage.overlay).style("display", "block"));
$.id("overlayname").html(hub);
$.id("returnToHome").tap(function() {
WP.tracking.CTALinks(hub, "ReturnToStart");
close();
setTimeout(function() {
window.location.hash = "#home"
},
0)
});
$.id("seeOurPhones").tap(function() {
WP.tracking.CTALinks(hub, "Phones");
setTimeout(function() {
window.location.href = "http://m.microsoft.com/windowsphone/en-us/phones/default.mspx"
},
80)
});
$.id("shareEmail").tap(function() {
WP.tracking.CTALinks(hub, "ShareEmail");
setTimeout(function() {
window.location.href = "mailto:?subject=Check%20out%20this%20cool%20Windows%20Phone%20demo%20&body=You%20can%20run%20this%20interactive%20demo%20right%20from%20your%20iPhone%20or%20Android%20-%20no%20app%20required.%20http%3A//aka.ms/wpdemo%3FWT.mc_id%3DWPDemo_Share%20"
},
80)
});
$.id("shareTwitter").tap(function() {
WP.tracking.CTALinks(hub, "ShareTwitter");
setTimeout(function() {
window.location.href = "https://mobile.twitter.com/home?status=Check%20out%20this%20cool%20%23WindowsPhone%20demo%20that%20you%20can%20run%20right%20from%20your%20iPhone%20or%20Android%20http%3A//aka.ms/wpdemo%3FWT.mc_id%3DWPDemo_Share"
},
80)
});
$.id("shareFacebook").tap(function() {
WP.tracking.CTALinks(hub, "ShareFacebook");
setTimeout(function() {
window.location.href = "http://m.facebook.com/sharer.php?u=http%3A//aka.ms/wpdemo%3FWT.mc_id%3DWPDemo_Share%26v%3D4"
},
80)
});
$.id("takeSurvey").tap(function() {
WP.tracking.CTALinks(hub, "TakeSurvey");
setTimeout(function() {
window.location.href = "http://www.insightexpress.com/ix/Survey.aspx?id=194380&accessCode=6579880837&cell=test&siteID=CLE"
},
80)
});
WP.tracking.DemoComplete(hub)
},
close = function() {
var poppy = $.id("popup");
if (!poppy.length()) return;
$.id("returnToHome").untap();
$.id("seeOurPhones").untap();
poppy.style("display", "none").remove()
};
return {
open: open,
close: close
}
} ();
var WP = WP || {};
WP.people = function() {
var slider,
tutorial,
dialog,
livetiles = [],
Slide = function() {
this.slider = $.id("peopleSlider");
this.people = $.id("people");
this.header = $("#people h2");
this.pageWidth = $.id("peopleAll").width();
this.pagesPos = [2, 0, 1];
this.touch = new TouchLayer("people");
this.scroller = new iScroll("peopleScroller", "peopleNews", {
useTransition: true,
hScroll: false,
momentum: $.has.rotateY,
bounce: $.has.rotateY,
bounceLock: true,
onBeforeScrollStart: function() {}
});
this.people.bind("scrollStart", this);
this.people.bind("scrollMove", this);
this.people.bind("scrollEnd", this)
},
init = function() {
slider = new Slide;
tutorial = new WP.Tutorial([{
el: "#step1",
tap: function() {
dialog = new WP.Dialog("addcomment");
$("#actionbar li").style("display", "none");
$("#actionSendComment, #actionLike").style("display", "inline-block");
$.id("actionbar").removeClass("closed").addClass("opened");
tutorial.nextStep()
}
},
{
el: "#actionLike span",
tap: function() {
$.id("liked").style("display", "block");
$.id("actionLike").addClass("dislike");
$.id("hardkeys").addClass("opened");
$.id("actionbar").addClass("openedHardkeys");
tutorial.nextStep()
}
},
{
el: "#buttonBack",
tap: function() {
slider.scroller.scrollTo(0, 0, 0);
dialog.close();
dialog = null;
tutorial.nextStep()
}
},
{
el: "#allAccounts",
tap: function() {
dialog = new WP.Dialog("accounts");
WP.tracking.StubMidpoint("People");
tutorial.nextStep()
}
},
{
el: "#facebook",
tap: function() {
$("#accounts .selected").removeClass("selected");
$.id("facebook").addClass("selected");
$.id("allAccounts").html("Facebook");
$("#peopleNews ul > li").style("display", "none");
$("#peopleNews ul > .facebook").style("display", "block");
dialog.close();
dialog = null;
tutorial.nextStep();
setTimeout(function() {
slider.scroller.refresh()
},
0)
}
},
{
el: "#persona",
tap: function() {
$.id("screen").append($.create("div").attr("id", "profile").addClass("pageIn").html(sessionStorage["profile"]));
tutorial.nextStep();
fadeOut()
}
}]);
if ($.is.iDevice) {
$("#peopleRecent .liveTiles li > div").each(function() {
livetiles.push(new WP.LiveTile(this))
});
livetiles[1].addBackface("Found my phone! So relieved. I used the Find My Phone feature on my PC...")
} else {
$("#peopleRecent .liveTiles li > div").get(1).each(function() {
livetiles.push(new WP.LiveTile(this))
});
livetiles[0].addBackface("Found my phone! So relieved. I used the Find My Phone feature on my PC...")
}
},
tiltIn = function() {
setTimeout(function() {
$("#screen > div").style("display", "none");
$.id("people").style({
display: "block",
opacity: "0",
webkitTransform: "translate3d(0,0,0)",
webkitTransitionDuration: "200ms"
});
$("#people h2 span").style({
webkitTransformOrigin: "0 50%",
webkitTransform: $.has.rotateY ? "translate3d(160px,0,0) rotateY(45deg)": "translate3d(160px,0,0)",
webkitTransitionDuration: "350ms"
});
$.id("peopleSlider").style({
webkitTransformOrigin: "0 50%",
webkitTransform: $.has.rotateY ? "translate3d(160px,0,0) rotateY(45deg)": "translate3d(160px,0,0)",
webkitTransitionDuration: "300ms"
});
init();
setTimeout(function() {
$.id("people").style({
opacity: "1"
});
$("#people h2 span").style({
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(0deg)": "translate3d(0,0,0)"
});
$.id("peopleSlider").style({
webkitTransformOrigin: "0 0",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(0deg)": "translate3d(0,0,0)"
})
},
100)
},
500);
$("#actionbar li").style("display", "none");
$("#actionAdd, #actionSearch").style("display", "inline-block");
WP.tracking.StubStart("People")
},
tiltOut = function() {
for (var i = 0; i < livetiles.length; i++) livetiles[i].destroy();
livetiles = [];
tutorial.destroy();
$.id("hardkeys").removeClass("opened");
$.id("actionbar").removeClass("opened").removeClass("openedHardkeys").removeClass("closed");
$.id("screen").style({
webkitPerspective: "800px"
});
if ($("#dialog").length()) $.id("dialog").style({
opacity: "0",
webkitTransformOrigin: "-10px 50%",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(90deg)": "translate(-80%,0)",
webkitTransitionDuration: "300ms"
}).bind("webkitTransitionEnd", tiltOutEnd);
else $.id("people").style({
opacity: "0",
webkitTransformOrigin: "-10px 50%",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(90deg)": "translate(-80%,0)",
webkitTransitionDuration: "300ms"
}).bind("webkitTransitionEnd", tiltOutEnd)
},
tiltOutEnd = function() {
var _pageIn = $("#screen .pageIn").removeClass("pageIn");
_pageIn = _pageIn.length() ? _pageIn.attr("id") : "home";
$.id("screen").style({
webkitPerspective: "0"
});
$.id("actionLike").removeClass("dislike");
$(this).unbind("webkitTransitionEnd", tiltOutEnd);
slider.destroy();
slider = null;
tutorial = null;
$.id("people").remove();
if ($("#dialog").length()) $.id("dialog").remove();
WP[_pageIn].tiltIn()
},
fadeOut = function() {
$.id("people").style({
opacity: "0",
webkitTransitionDuration: "300ms"
}).bind("webkitTransitionEnd", tiltOutEnd)
};
Slide.prototype = {
x: 0,
headerX: 0,
page: 0,
handleEvent: function(e) {
switch (e.type) {
case "scrollStart":
this.start(e);
break;
case "scrollMove":
this.move(e);
break;
case "scrollEnd":
this.end(e);
break
}
},
start: function(e) {
this.slider.style({
webkitTransitionDuration: "0"
});
this.header.style({
webkitTransitionDuration: "0",
webkitTransitionTimingFunction: "ease"
})
},
move: function(e) {
this.x += e.deltaX;
this.headerX += this.header.width() / (this.pageWidth * 10) * e.deltaX;
this.slider.style({
webkitTransform: "translate3d(" + this.x + "px,0,0)"
});
this.header.style({
webkitTransform: "translate3d(" + this.headerX + "px,0,0)"
})
},
end: function(e) {
var pageShift = 0,
prevPage = this.page,
duration = "200ms",
that = this;
if (e.directionX > 0) this.page = Math.ceil(this.x / this.pageWidth);
else if (e.directionX < 0) this.page = Math.floor(this.x / this.pageWidth);
else this.page = Math.round(this.x / this.pageWidth);
this.x = this.page * this.pageWidth;
this.slider.style({
webkitTransitionDuration: "200ms",
webkitTransform: "translate3d(" + this.x + "px,0,0)"
});
if (prevPage != this.page) {
if (e.directionX > 0) {
pageShift = this.pagesPos.pop();
this.pagesPos.unshift(pageShift)
} else if (e.directionX < 0) {
pageShift = this.pagesPos.shift();
this.pagesPos.push(pageShift)
}
$("#peopleSlider > div").get(pageShift).style({
left: -this.page * this.pageWidth + this.pageWidth * -e.directionX + "px"
});
tutorial.update(this.pagesPos[1]);
if (this.pagesPos[1] == 2) {
$("#actionbar li").style("display", "none");
$("#actionAdd, #actionSearch").style("display", "inline-block");
$.id("actionbar").addClass("opened")
} else $.id("actionbar").removeClass("opened")
}
if (this.pagesPos[1] == 0 && prevPage > this.page) {
duration = "600ms";
this.header.style({
webkitTransitionTimingFunction: "cubic-bezier(0.000, 0.020, 0.020, 1.000);",
webkitTransitionDuration: "0ms",
webkitTransform: "translate3d(320px,0,0)"
})
} else if (this.pagesPos[1] == 2 && prevPage < this.page) {
duration = "600ms";
this.header.style({
webkitTransitionTimingFunction: "cubic-bezier(0.000, 0.020, 0.020, 1.000);",
webkitTransitionDuration: "0ms",
webkitTransform: "translate3d(" + -this.header.width() + "px,0,0)"
})
}
this.scroller.changeTarget($("#peopleSlider > div")[this.pagesPos[1]]);
this.headerX = -this.header.width() / (this.pageWidth * 10) * this.pagesPos[1] * this.pageWidth;
setTimeout(function() {
that.header.style({
webkitTransitionDuration: duration,
webkitTransform: "translate3d(" + Math.round(that.headerX) + "px,0,0)"
})
},
0)
},
destroy: function() {
$("#peopleSlider > div").each(function() {
this.style.cssText = ""
});
this.slider[0].style.cssText = "";
this.people[0].style.cssText = "";
this.header[0].style.cssText = "";
this.touch.destroy();
this.touch = null;
this.scroller.destroy();
this.scroller = null;
this.people.unbind("scrollStart", this);
this.people.unbind("scrollMove", this);
this.people.unbind("scrollEnd", this)
}
};
return {
tiltIn: tiltIn,
tiltOut: tiltOut
}
} ();
var WP = WP || {};
WP.phone = function() {
var slider,
tutorial,
livetiles = [],
dialog,
dialogScroller,
scroller,
init = function() {
tutorial = new WP.Tutorial([{
el: "#step1",
tap: function() {
dialog = new WP.Dialog("phonedialing");
$.id("hardkeys").addClass("opened");
tutorial.nextStep()
}
},
{
el: "#buttonHome",
tap: function() {
tutorial.nextStep();
$.id("hardkeys").removeClass("opened");
WP.overlay.open("#dialog", "Phone")
}
}]);
scroller = new iScroll("phoneScroller", "phoneHistory", {
useTransition: true,
hScroll: false,
momentum: $.has.rotateY,
bounce: $.has.rotateY,
bounceLock: true,
onBeforeScrollStart: function() {}
})
},
tiltIn = function() {
setTimeout(function() {
$("#screen > div").style("display", "none");
$.id("phone").style({
display: "block",
opacity: "0",
webkitTransform: "translate3d(0,0,0)",
webkitTransitionDuration: "200ms"
});
$("#phone h2 span").style({
webkitTransformOrigin: "0 50%",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(85deg)": "translate3d(-200px,0,0)",
webkitTransitionDuration: "300ms"
});
$.id("phoneTitles").style({
webkitTransformOrigin: "0 50%",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(85deg)": "translate3d(-200px,0,0)",
webkitTransitionDuration: "400ms"
});
$.id("phoneScroller").style({
webkitTransformOrigin: "0 50%",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(85deg)": "translate3d(-200px,0,0)",
webkitTransitionDuration: "500ms"
}).bind("webkitTransitionEnd", tiltInEnd);
init();
setTimeout(function() {
$.id("phone").style({
opacity: "1"
});
$("#phone h2 span").style({
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(0deg)": "translate3d(0,0,0)"
});
$.id("phoneTitles").style({
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(0deg)": "translate3d(0,0,0)"
});
$.id("phoneScroller").style({
webkitTransformOrigin: "0 0",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(0deg)": "translate3d(0,0,0)"
})
},
100)
},
500);
WP.tracking.StubStart("Phone")
},
tiltInEnd = function() {
$(this).unbind("webkitTransitionEnd", tiltInEnd);
$.id("phone").style({
webkitPerspective: "0"
})
},
tiltOut = function() {
for (var i = 0; i < livetiles.length; i++) livetiles[i].destroy();
livetiles = [];
tutorial.destroy();
if (dialogScroller) {
dialogScroller.destroy();
dialogScroller = null
}
WP.overlay.close();
$.id("hardkeys").removeClass("opened");
$.id("actionbar").removeClass("opened").removeClass("openedHardkeys");
$.id("screen").style({
webkitPerspective: "800px"
});
if ($("#dialog").length()) $.id("dialog").style({
opacity: "0",
webkitTransformOrigin: "-10px 50%",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(90deg)": "translate(-80%,0)",
webkitTransitionDuration: "300ms"
}).bind("webkitTransitionEnd", tiltOutEnd);
else $.id("phone").style({
opacity: "0",
webkitTransformOrigin: "-10px 50%",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(90deg)": "translate(-80%,0)",
webkitTransitionDuration: "300ms"
}).bind("webkitTransitionEnd", tiltOutEnd)
},
tiltOutEnd = function() {
var _pageIn = $("#screen .pageIn").removeClass("pageIn");
_pageIn = _pageIn.length() ? _pageIn.attr("id") : "home";
$.id("screen").style({
webkitPerspective: "0"
});
$(this).unbind("webkitTransitionEnd", tiltOutEnd);
scroller.destroy();
scroller = null;
tutorial = null;
if ($("#dialog").length()) $.id("dialog").remove();
$.id("phone").remove();
WP[_pageIn].tiltIn()
};
return {
tiltIn: tiltIn,
tiltOut: tiltOut,
slider: slider
}
} ();
var WP = WP || {};
WP.pictures = function() {
var slider,
dialog,
tutorial,
pictures = [],
Slide = function() {
this.slider = $.id("picturesSlider");
this.pictures = $.id("pictures");
this.picturesBg = $.id("picturesBg");
this.header = $("#pictures h2");
this.pageWidth = $.id("picturesHome").width();
this.pagesPos = [2, 0, 1];
this.touch = new TouchLayer("pictures");
this.scroller = new iScroll("picturesScroller", "picturesHome", {
useTransition: true,
hScroll: false,
momentum: $.has.rotateY,
bounce: $.has.rotateY,
bounceLock: true,
onBeforeScrollStart: function() {}
});
this.pictures.bind("scrollStart", this);
this.pictures.bind("scrollMove", this);
this.pictures.bind("scrollEnd", this)
},
init = function() {
$.id("picturesBg").style("backgroundImage", "url(" + WP.pictures.pictures[0].attr("src") + ")");
slider = new Slide;
tutorial = new WP.Tutorial([{
el: "#step1",
tap: function() {
dialog = new WP.Dialog("picturesfacebook");
$.id("sharepic")[0].src = WP.pictures.pictures[1][0].src;
$("#actionbar li").style("display", "none");
$.id("actionbar").removeClass("closed").addClass("opened");
tutorial.nextStep()
}
},
{
el: "#actionEllipsis",
tap: function() {
$.id("actionbarOptions").html('<li style="margin-top:38px">share...</li><li><span id="step3">share on Facebook...</span></li><li><span>use as wallpaper</span></li><li>delete</li><li>remove from favorites</li><li>auto-fix</li>');
$.id("actionbar").removeClass("opened").addClass("wideOpened");
tutorial.nextStep()
}
},
{
el: "#step3",
tap: function() {
var showtags = function() {
$.id("sharepicture").unbind("webkitTransitionEnd", showtags).style({
webkitTransform: "translate3d(0,0,0)"
});
$("#actionUpload, #actionTag, #actionCancel").style("display", "inline-block");
$.id("actionbar").addClass("openedHardkeys");
$.id("hardkeys").addClass("opened");
$.id("fakefield").style("display", "block");
$("#sharepicture .whosthis").style("display", "block")
};
$.id("sharepicture").style({
webkitTransform: "translate3d(0,470px,0)"
}).bind("webkitTransitionEnd", showtags);
$.id("actionbar").removeClass("wideOpened");
tutorial.nextStep()
}
},
{
el: "#buttonHome",
tap: function() {
tutorial.nextStep();
$.id("hardkeys").removeClass("opened");
$.id("actionbar").removeClass("openedHardkeys");
WP.overlay.open("#dialog", "Pictures")
}
}])
},
tiltIn = function() {
setTimeout(function() {
$("#screen > div").style("display", "none");
$.id("pictures").style({
display: "block",
opacity: "0",
webkitTransform: "translate3d(0,0,0)",
webkitTransitionDuration: "200ms"
});
$("#pictures h2 span").style({
webkitTransformOrigin: "0 50%",
webkitTransform: $.has.rotateY ? "translate3d(160px,0,0) rotateY(45deg)": "translate3d(160px,0,0)",
webkitTransitionDuration: "350ms"
});
$.id("picturesSlider").style({
webkitTransformOrigin: "0 50%",
webkitTransform: $.has.rotateY ? "translate3d(160px,0,0) rotateY(45deg)": "translate3d(160px,0,0)",
webkitTransitionDuration: "300ms"
});
init();
setTimeout(function() {
$.id("pictures").style({
opacity: "1"
});
$("#pictures h2 span").style({
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(0deg)": "translate3d(0,0,0)"
});
$.id("picturesSlider").style({
webkitTransformOrigin: "0 0",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(0deg)": "translate3d(0,0,0)"
})
},
100)
},
600);
WP.tracking.StubStart("Pictures")
},
tiltOut = function() {
$.id("popup").style("display", "none");
$.id("hardkeys").removeClass("opened");
$("#pictures *").untap();
$.id("screen").style({
webkitPerspective: "800px"
});
tutorial.destroy();
WP.overlay.close();
$.id("hardkeys").removeClass("opened");
$.id("actionbar").removeClass("opened").removeClass("openedHardkeys").removeClass("wideOpened");
$.id("screen").style({
webkitPerspective: "800px"
});
if ($("#dialog").length()) $.id("dialog").style({
opacity: "0",
webkitTransformOrigin: "-10px 50%",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(90deg)": "translate(-80%,0)",
webkitTransitionDuration: "300ms"
}).bind("webkitTransitionEnd", tiltOutEnd);
else $.id("pictures").style({
opacity: "0",
webkitTransformOrigin: "-10px 50%",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(90deg)": "translate(-80%,0)",
webkitTransitionDuration: "300ms"
}).bind("webkitTransitionEnd", tiltOutEnd)
},
tiltOutEnd = function() {
var _pageIn = $("#screen .pageIn").removeClass("pageIn");
_pageIn = _pageIn.length() ? _pageIn.attr("id") : "home";
$.id("screen").style({
webkitPerspective: "0"
});
$(this).unbind("webkitTransitionEnd", tiltOutEnd);
slider.destroy();
slider = null;
tutorial = null;
if ($("#dialog").length()) $.id("dialog").remove();
$.id("pictures").remove();
WP[_pageIn].tiltIn()
};
Slide.prototype = {
x: 0,
bgX: 0,
headerX: 0,
page: 0,
handleEvent: function(e) {
switch (e.type) {
case "scrollStart":
this.start(e);
break;
case "scrollMove":
this.move(e);
break;
case "scrollEnd":
this.end(e);
break
}
},
start: function(e) {
this.slider.style({
webkitTransitionDuration: "0"
});
this.header.style({
webkitTransitionDuration: "0",
webkitTransitionTimingFunction: "ease"
});
this.picturesBg.style({
webkitTransitionDuration: "0"
})
},
move: function(e) {
this.x += e.deltaX;
this.headerX += this.header.width() / (this.pageWidth * 8) * e.deltaX;
this.bgX += (this.picturesBg.width() - 320) / (this.pageWidth * 12) * e.deltaX;
this.slider.style({
webkitTransform: "translate3d(" + this.x + "px,0,0)"
});
this.header.style({
webkitTransform: "translate3d(" + this.headerX + "px,0,0)"
});
this.picturesBg.style({
webkitTransform: "translate3d(" + this.bgX + "px,0,0)"
})
},
end: function(e) {
var pageShift = 0,
prevPage = this.page,
duration = "200ms",
that = this;
if (e.directionX > 0) this.page = Math.ceil(this.x / this.pageWidth);
else if (e.directionX < 0) this.page = Math.floor(this.x / this.pageWidth);
else this.page = Math.round(this.x / this.pageWidth);
this.x = this.page * this.pageWidth;
this.slider.style({
webkitTransitionDuration: "200ms",
webkitTransform: "translate3d(" + this.x + "px,0,0)"
});
if (prevPage != this.page) {
if (e.directionX > 0) {
pageShift = this.pagesPos.pop();
this.pagesPos.unshift(pageShift)
} else if (e.directionX < 0) {
pageShift = this.pagesPos.shift();
this.pagesPos.push(pageShift)
}
$("#picturesSlider > div").get(pageShift).style({
left: -this.page * this.pageWidth + this.pageWidth * -e.directionX + "px"
});
tutorial.update(this.pagesPos[1])
}
if (this.pagesPos[1] == 0 && prevPage > this.page) {
duration = "600ms";
this.header.style({
webkitTransitionTimingFunction: "cubic-bezier(0.000, 0.020, 0.020, 1.000);",
webkitTransitionDuration: "0ms",
webkitTransform: "translate3d(320px,0,0)"
});
this.picturesBg.style({
webkitTransitionTimingFunction: "cubic-bezier(0.000, 0.020, 0.020, 1.000);",
webkitTransitionDuration: "0ms",
webkitTransform: "translate3d(320px,0,0)"
})
} else if (this.pagesPos[1] == 2 && prevPage < this.page) {
duration = "600ms";
this.header.style({
webkitTransitionTimingFunction: "cubic-bezier(0.000, 0.020, 0.020, 1.000);",
webkitTransitionDuration: "0ms",
webkitTransform: "translate3d(" + -this.header.width() + "px,0,0)"
});
this.picturesBg.style({
webkitTransitionTimingFunction: "cubic-bezier(0.000, 0.020, 0.020, 1.000);",
webkitTransitionDuration: "0ms",
webkitTransform: "translate3d(-439px,0,0)"
})
}
this.scroller.changeTarget($("#picturesSlider > div")[this.pagesPos[1]]);
this.headerX = -this.header.width() / (this.pageWidth * 8) * this.pagesPos[1] * this.pageWidth;
this.bgX = -Math.round((this.picturesBg.width() - 320) / (this.pageWidth * 12) * this.pagesPos[1] * this.pageWidth);
setTimeout(function() {
that.header.style({
webkitTransitionDuration: duration,
webkitTransform: "translate3d(" + Math.round(that.headerX) + "px,0,0)"
});
that.picturesBg.style({
webkitTransitionDuration: duration,
webkitTransform: "translate3d(" + Math.round(that.bgX) + "px,0,0)"
})
},
0)
},
destroy: function() {
$("#picturesSlider > div").each(function() {
this.style.cssText = ""
});
this.slider[0].style.cssText = "";
this.pictures[0].style.cssText = "";
this.header[0].style.cssText = "";
this.touch.destroy();
this.touch = null;
this.scroller.destroy();
this.scroller = null;
this.pictures.unbind("scrollStart", this);
this.pictures.unbind("scrollMove", this);
this.pictures.unbind("scrollEnd", this)
}
};
return {
tiltIn: tiltIn,
tiltOut: tiltOut,
pictures: pictures
}
} ();
var WP = WP || {};
WP.profile = function() {
var slider,
tutorial,
hardkeys = false,
Slide = function() {
var titles = $("#profileTitles > h2"),
that = this,
i,
l;
this.slider = $.id("profileSlider");
this.profile = $.id("profile");
this.header = $.id("profileTitles");
this.pageWidth = $.id("profileNews").width();
this.pagesPos = [3, 0, 1, 2];
this.titles = $("#profileTitles > h2");
this.titlesWidth = [];
this.headerWidth = 0;
titles.each(function() {
that.titlesWidth.push(this.offsetWidth);
that.headerWidth += this.offsetWidth
});
titles.get(0).style({
position: "absolute",
left: "0px"
});
titles.get(1).style({
position: "absolute",
left: this.titlesWidth[0] + "px"
});
titles.get(2).style({
position: "absolute",
left: this.titlesWidth[0] + this.titlesWidth[1] + "px"
});
titles.get(3).style({
position: "absolute",
left: -this.titlesWidth[3] + "px"
});
this.headerRightLimit = that.headerWidth - this.titlesWidth[3];
this.touch = new TouchLayer("profile");
this.scroller = new iScroll("profileScroller", "profileNews", {
useTransition: true,
hScroll: false,
momentum: $.has.rotateY,
bounce: $.has.rotateY,
bounceLock: true,
onBeforeScrollStart: function() {}
});
this.profile.bind("scrollStart", this);
this.profile.bind("scrollMove", this);
this.profile.bind("scrollEnd", this)
},
init = function() {
slider = new Slide;
tutorial = new WP.Tutorial([{
el: "#step1",
reach: function() {
tutorial.nextStep()
}
},
{
el: "#step2",
reach: function() {
tutorial.nextStep()
}
},
{
el: "#step3",
reach: function() {
$.id("hardkeys").addClass("opened");
hardkeys = true;
tutorial.nextStep()
}
},
{
el: "#buttonHome",
tap: function() {
tutorial.nextStep();
$.id("swipe").style("display", "none");
$.id("hardkeys").removeClass("opened");
WP.overlay.open("#profile", "People")
}
}])
},
tiltIn = function() {
setTimeout(function() {
$("#screen > div").style("display", "none");
$.id("profile").style({
display: "block",
opacity: "0",
webkitTransform: "translate3d(0,0,0)",
webkitTransitionDuration: "150ms"
});
init();
$.id("profileSlider").style({
webkitTransform: "translate3d(0,480px,0)",
webkitTransitionDuration: "400ms",
webkitTransitionTimingFunction: "ease-out"
});
$.id("profileTitles").style({
webkitTransform: "translate3d(0,480px,0)",
webkitTransitionDuration: "300ms",
webkitTransitionTimingFunction: "ease-out"
});
$("#profile .header > h3").style({
webkitTransform: "translate3d(0,480px,0)",
webkitTransitionDuration: "250ms",
webkitTransitionTimingFunction: "ease-out"
});
$("#profile .header > h2").style({
webkitTransform: "translate3d(100px,-100px,0)",
webkitTransitionDuration: "300ms",
webkitTransitionTimingFunction: "ease-out"
});
setTimeout(function() {
$.id("profile").style({
opacity: "1"
});
$.id("profileSlider").style({
webkitTransform: "translate3d(0,0,0)"
});
$("#profile .header > h3").style({
webkitTransform: "translate3d(0,0,0)"
});
$.id("profileTitles").style({
webkitTransform: "translate3d(0,0,0)"
});
$("#profile .header > h2").style({
webkitTransform: "translate3d(0,0,0)"
})
},
100)
},
500)
},
tiltOut = function() {
tutorial.destroy();
WP.overlay.close();
$.id("hardkeys").removeClass("opened");
$.id("actionbar").removeClass("opened").removeClass("openedHardkeys");
$.id("screen").style({
webkitPerspective: "800px"
});
$.id("profile").style({
opacity: "0",
webkitTransformOrigin: "-10px 50%",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(90deg)": "translate(-80%,0)",
webkitTransitionDuration: "300ms"
}).bind("webkitTransitionEnd", tiltOutEnd)
},
tiltOutEnd = function() {
var _pageIn = $("#screen .pageIn").removeClass("pageIn");
_pageIn = _pageIn.length() ? _pageIn.attr("id") : "home";
$.id("screen").style({
webkitPerspective: "0"
});
$(this).unbind("webkitTransitionEnd", tiltOutEnd);
slider.destroy();
slider = null;
tutorial = null;
$.id("profile").remove();
WP[_pageIn].tiltIn()
};
Slide.prototype = {
x: 0,
headerX: 0,
page: 0,
handleEvent: function(e) {
switch (e.type) {
case "scrollStart":
this.start(e);
break;
case "scrollMove":
this.move(e);
break;
case "scrollEnd":
this.end(e);
break
}
},
start: function(e) {
this.slider.style({
webkitTransitionDuration: "0"
});
this.header.style({
webkitTransitionDuration: "0"
})
},
move: function(e) {
this.x += e.deltaX;
this.headerX += this.titlesWidth[e.deltaX < 0 ? this.pagesPos[1] : this.pagesPos[0]] / this.pageWidth * e.deltaX;
this.slider.style({
webkitTransform: "translate3d(" + this.x + "px,0,0)"
});
this.header.style({
webkitTransform: "translate3d(" + this.headerX + "px,0,0)"
})
},
end: function(e) {
var pageShift = 0,
prevPage = this.page,
duration = "200ms",
that = this;
if (e.directionX > 0) this.page = Math.ceil(this.x / this.pageWidth);
else if (e.directionX < 0) this.page = Math.floor(this.x / this.pageWidth);
else this.page = Math.round(this.x / this.pageWidth);
this.x = this.page * this.pageWidth;
this.slider.style({
webkitTransitionDuration: "300ms",
webkitTransform: "translate3d(" + this.x + "px,0,0)"
});
if (prevPage != this.page) {
if (e.directionX > 0) {
pageShift = this.pagesPos.pop();
this.pagesPos.unshift(pageShift)
} else if (e.directionX < 0) {
pageShift = this.pagesPos.shift();
this.pagesPos.push(pageShift)
}
$("#profileSlider > div").get(pageShift).style({
left: e.directionX < 0 ? -this.page * this.pageWidth + (this.pageWidth + this.pageWidth) * -e.directionX + "px": -this.page * this.pageWidth + this.pageWidth * -e.directionX + "px"
});
this.titles.get(pageShift).style({
left: e.directionX < 0 ? this.titles.get(this.pagesPos[2]).style("left").replace("px", "") * 1 + this.titlesWidth[this.pagesPos[2]] + "px": this.titles.get(this.pagesPos[1]).style("left").replace("px", "") * 1 - this.titlesWidth[pageShift] + "px"
});
tutorial.update(this.pagesPos[1])
}
this.scroller.changeTarget($("#profileSlider > div")[this.pagesPos[1]]);
this.headerX = -this.titles.get(this.pagesPos[1]).style("left").replace("px", "") * 1;
$("#profileTitles > h2.active").removeClass("active");
this.titles.get(this.pagesPos[1]).addClass("active");
this.header.style({
webkitTransitionDuration: "200ms",
webkitTransform: "translate3d(" + Math.round(this.headerX) + "px,0,0)"
})
},
destroy: function() {
$("#profileSlider > div").each(function() {
this.style.cssText = ""
});
this.slider[0].style.cssText = "";
this.profile[0].style.cssText = "";
this.header[0].style.cssText = "";
this.touch.destroy();
this.touch = null;
this.scroller.destroy();
this.scroller = null;
this.profile.unbind("scrollStart", this);
this.profile.unbind("scrollMove", this);
this.profile.unbind("scrollEnd", this)
}
};
return {
tiltIn: tiltIn,
tiltOut: tiltOut
}
} ();
var WP = WP || {};
WP.router = function() {
var currentPage = "home",
router = function() {
var _i,
_l,
_hash = window.location.hash.substr(1) || "home";
if (currentPage == _hash) return;
if (_hash == "home") {
$.id("home").addClass("pageIn");
if ($("#profile").length()) currentPage = "profile";
else if ($("#xbox").length()) currentPage = "xbox";
WP[currentPage].tiltOut();
currentPage = _hash;
$.id("tile-inbox").removeClass("tileLinkedInbox").html("<div><h2>Outlook</h2><p>2</p></div>")
} else if (_hash == "people" || _hash == "pictures" || _hash == "messaging" || _hash == "group" || _hash == "calendar" || _hash == "localscout" || _hash == "inbox" || _hash == "phone") {
WP.home.inboxStep = false;
if (_hash != "inbox") WP.inbox.stageTwo = false;
$.id("screen").append($.create("div").attr("id", _hash).addClass("pageIn").html(sessionStorage[_hash]));
$.id("tile-" + _hash).addClass("selected");
WP[currentPage].tiltOut();
currentPage = _hash
}
};
return router
} ();
var WP = WP || {};
WP.tracking = function() {
var WTnv = "WT.nv";
var WTti = "WT.ti";
var WTmcid = "WT.mc_id";
var DemoLoaded = function() {
dcsMultiTrack(WTnv, "WPDemoTakeover:DemoLoaded", WTti, "StartDemo")
},
StartDemo = function() {
dcsMultiTrack(WTnv, "WPDemoTakeover:StartDemo", WTti, "StartDemo")
},
StubStart = function(hub) {
dcsMultiTrack(WTnv, "WPDemoTakeover:HomeScreen", WTti, "HomeScreen:" + hub)
},
StubMidpoint = function(hub) {
dcsMultiTrack(WTnv, "WPDemoTakeover:" + hub, WTti, hub + "DemoMidPoint")
},
CTALinks = function(hub, action) {
dcsMultiTrack(WTnv, "WPDemoTakeover:" + hub, WTti, hub + "Complete:" + action)
},
DemoComplete = function(hub) {
dcsMultiTrack(WTnv, "WPDemoTakeover:" + hub, WTti, hub + "DemoComplete:Complete");
FireAtlasTag()
},
Unsupported = function() {
var cam = GetCampaign();
dcsMultiTrack(WTnv, "WPDemoTakeover:StartDemo", WTti, "Unsupported:CID:" + (cam != "" ? cam: "na") + "|UA|" + navigator.userAgent)
},
GetCampaign = function() {
var chk = GetQSParam(WTmcid);
if (chk != null) return chk;
else return ""
},
FireAtlasTag = function() {
return;
$.id("AtlasEndTag").remove();
$.id("AtlasStartTag").append($.create("img").attr({
src: "http://view.atdmt.com/action/WinPhone_FY12_Mango_MobileDemo_EndPage",
width: "1",
height: "1",
id: "AtlasEndTag"
}).load)
},
GetQSParam = function(name) {
var result = null;
if (location.search !== "") {
var querystring = location.search.substring(1).replace(/\+/g, " ");
var pairs = querystring.split("&");
var isFound = false;
for (var i = 0; i < pairs.length; i++) {
var pair = pairs[i].split("=");
var key = decodeURIComponent(pair[0]);
if (key === name) {
var val = pair.length === 2 ? decodeURIComponent(pair[1]) : key;
if (!isFound) {
isFound = true;
result = [val]
} else result.push(val)
}
}
if (isFound && result.length == 1 && !/\[.*\]$/.test(name)) result = result[0]
}
return result
};
return {
DemoLoaded: DemoLoaded,
StartDemo: StartDemo,
StubStart: StubStart,
StubMidpoint: StubMidpoint,
CTALinks: CTALinks,
DemoComplete: DemoComplete,
Unsupported: Unsupported,
GetCampaign: GetCampaign,
FireAtlasTag: FireAtlasTag,
GetQSParam: GetQSParam
}
} ();
var WP = WP || {};
WP.Tutorial = function() {
var Tutorial = function(steps) {
this.steps = steps;
this.pages = $(".page");
this.pageWidth = this.pages.width();
this.swipe = $.id("swipe");
this.lastPage = 0;
this.nextStep()
};
Tutorial.prototype = {
handleEvent: function(e) {
if (e.type == "webkitTransitionEnd") this.swipe.unbind("webkitTransitionEnd", this)
},
nextStep: function() {
var p,
tmp,
that = this;
if (this.el && this.currentStep.tap) {
this.el.untap();
this.el.removeClass("glowing")
}
if (!this.steps.length) {
this.el = null;
if (this.hotspot) {
this.hotspot.remove();
this.hotspot = null
}
return
}
this.currentStep = this.steps.shift();
this.el = $(this.currentStep.el).get(0);
if (this.currentStep.tap) {
this.el.addClass("glowing");
this.el.tap(this.currentStep.tap)
}
tmp = this.el[0];
while (tmp = tmp.parentNode) {
p = $(tmp);
if (p.hasClass("page")) {
this.targetPage = p;
break
}
}
this.update(this.lastPage)
},
update: function(page) {
var that = this;
if (!this.el) return;
var currentPos = this.pages.get(page).style("left").replace(/[^0-9-]/gi, "") * 1,
targetPos = this.targetPage ? this.targetPage.style("left").replace(/[^0-9-]/gi, "") * 1: currentPos;
this.lastPage = page;
if (this.hotspot) this.hotspot.remove();
if (this.currentStep.tap && (!this.hotspot || this.hotspot[0].parentNode != this.el[0])) {
this.hotspot = $.create("div").attr("id", "hotspot").style({
left: Math.round(this.el.width() / 2 - 16) + "px",
top: Math.round(this.el.height() / 2 - 16) + "px"
}).html("<div></div>");
this.el.append(this.hotspot)
}
if (!this.targetPage || this.pages[page] == this.targetPage[0]) {
if (this.swipe.style("display") == "block") this.swipe.style("display", "none");
if (this.currentStep.reach) setTimeout(function() {
that.currentStep.reach()
},
0);
return
}
this.swipe.style("display", "block").removeClass("fadeOut");
if (currentPos > targetPos) this.swipe.addClass("right");
else this.swipe.removeClass("right")
},
destroy: function() {
if (this.el) this.el.untap().removeClass("glowing");
this.swipe.style("display", "none");
if (this.hotspot) this.hotspot.remove()
}
};
return Tutorial
} ();
var WP = WP || {};
WP.xbox = function() {
var slider,
tutorial,
Slide = function() {
var titles = $("#xboxTitles > h2"),
that = this,
i,
l;
this.slider = $.id("xboxSlider");
this.xbox = $.id("xbox");
this.header = $.id("xboxTitles");
this.pageWidth = $.id("xboxAbout").width();
this.pagesPos = [2, 0, 1];
this.titles = $("#xboxTitles > h2");
this.titlesWidth = [];
this.headerWidth = 0;
titles.each(function() {
that.titlesWidth.push(this.offsetWidth);
that.headerWidth += this.offsetWidth
});
titles.get(0).style({
position: "absolute",
left: "0px"
});
titles.get(1).style({
position: "absolute",
left: this.titlesWidth[0] + "px"
});
titles.get(2).style({
position: "absolute",
left: -this.titlesWidth[2] + "px"
});
this.headerRightLimit = that.headerWidth - this.titlesWidth[3];
this.touch = new TouchLayer("xbox");
this.scroller = new iScroll("xboxScroller", "xboxAbout", {
useTransition: true,
hScroll: false,
momentum: $.has.rotateY,
bounce: $.has.rotateY,
bounceLock: true,
onBeforeScrollStart: function() {}
});
this.xbox.bind("scrollStart", this);
this.xbox.bind("scrollMove", this);
this.xbox.bind("scrollEnd", this)
},
init = function() {
slider = new Slide;
tutorial = new WP.Tutorial([{
el: "#step1",
reach: function() {
tutorial.nextStep()
}
},
{
el: "#step2",
reach: function() {
$.id("hardkeys").addClass("opened");
tutorial.nextStep()
}
},
{
el: "#buttonHome",
tap: function() {
tutorial.nextStep();
$.id("hardkeys").removeClass("opened");
$.id("swipe").style("display", "none");
WP.overlay.open("#xbox", "Local Scout")
}
}])
},
tiltIn = function() {
setTimeout(function() {
$("#screen > div").style("display", "none");
$.id("xbox").style({
display: "block",
opacity: "0",
webkitTransform: "translate3d(0,0,0)",
webkitTransitionDuration: "200ms"
});
$("#xbox h2 span").style({
webkitTransformOrigin: "0 50%",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(85deg)": "translate3d(-200px,0,0)",
webkitTransitionDuration: "300ms"
});
$.id("xboxTitles").style({
webkitTransformOrigin: "0 50%",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(85deg)": "translate3d(-200px,0,0)",
webkitTransitionDuration: "400ms"
});
$.id("xboxScroller").style({
webkitTransformOrigin: "0 50%",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(85deg)": "translate3d(-200px,0,0)",
webkitTransitionDuration: "500ms"
}).bind("webkitTransitionEnd", tiltInEnd);
init();
setTimeout(function() {
$.id("xbox").style({
opacity: "1"
});
$("#xbox h2 span").style({
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(0deg)": "translate3d(0,0,0)"
});
$.id("xboxTitles").style({
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(0deg)": "translate3d(0,0,0)"
});
$.id("xboxScroller").style({
webkitTransformOrigin: "0 0",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(0deg)": "translate3d(0,0,0)"
})
},
100)
},
500)
},
tiltInEnd = function() {
$(this).unbind("webkitTransitionEnd", tiltInEnd);
$.id("xbox").style({
webkitPerspective: "0"
})
},
tiltOut = function() {
tutorial.destroy();
WP.overlay.close();
$.id("hardkeys").removeClass("opened");
$.id("actionbar").removeClass("opened").removeClass("openedHardkeys");
$.id("screen").style({
webkitPerspective: "800px"
});
if ($("#dialog").length()) $.id("dialog").style({
opacity: "0",
webkitTransformOrigin: "-10px 50%",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(90deg)": "translate(-80%,0)",
webkitTransitionDuration: "300ms"
}).bind("webkitTransitionEnd", tiltOutEnd);
else $.id("xbox").style({
opacity: "0",
webkitTransformOrigin: "-10px 50%",
webkitTransform: $.has.rotateY ? "translate3d(0,0,0) rotateY(90deg)": "translate(-80%,0)",
webkitTransitionDuration: "300ms"
}).bind("webkitTransitionEnd", tiltOutEnd)
},
tiltOutEnd = function() {
var _pageIn = $("#screen .pageIn").removeClass("pageIn");
_pageIn = _pageIn.length() ? _pageIn.attr("id") : "home";
$.id("screen").style({
webkitPerspective: "0"
});
$(this).unbind("webkitTransitionEnd", tiltOutEnd);
slider.destroy();
slider = null;
tutorial = null;
if ($("#dialog").length()) $.id("dialog").remove();
$.id("xbox").remove();
WP[_pageIn].tiltIn()
};
Slide.prototype = {
x: 0,
headerX: 0,
page: 0,
handleEvent: function(e) {
switch (e.type) {
case "scrollStart":
this.start(e);
break;
case "scrollMove":
this.move(e);
break;
case "scrollEnd":
this.end(e);
break
}
},
start: function(e) {
this.slider.style({
webkitTransitionDuration: "0"
});
this.header.style({
webkitTransitionDuration: "0"
})
},
move: function(e) {
this.x += e.deltaX;
this.headerX += this.titlesWidth[e.deltaX < 0 ? this.pagesPos[1] : this.pagesPos[0]] / this.pageWidth * e.deltaX;
this.slider.style({
webkitTransform: "translate3d(" + this.x + "px,0,0)"
});
this.header.style({
webkitTransform: "translate3d(" + this.headerX + "px,0,0)"
})
},
end: function(e) {
var pageShift = 0,
prevPage = this.page,
duration = "200ms",
that = this;
if (e.directionX > 0) this.page = Math.ceil(this.x / this.pageWidth);
else if (e.directionX < 0) this.page = Math.floor(this.x / this.pageWidth);
else this.page = Math.round(this.x / this.pageWidth);
this.x = this.page * this.pageWidth;
this.slider.style({
webkitTransitionDuration: "300ms",
webkitTransform: "translate3d(" + this.x + "px,0,0)"
});
if (prevPage != this.page) {
if (e.directionX > 0) {
pageShift = this.pagesPos.pop();
this.pagesPos.unshift(pageShift)
} else if (e.directionX < 0) {
pageShift = this.pagesPos.shift();
this.pagesPos.push(pageShift)
}
$("#xboxSlider > div").get(pageShift).style({
left: -this.page * this.pageWidth + this.pageWidth * -e.directionX + "px"
});
this.titles.get(pageShift).style({
left: e.directionX < 0 ? this.titles.get(this.pagesPos[1]).style("left").replace("px", "") * 1 + this.titlesWidth[this.pagesPos[1]] + "px": this.titles.get(this.pagesPos[1]).style("left").replace("px", "") * 1 - this.titlesWidth[pageShift] + "px"
});
tutorial.update(this.pagesPos[1])
}
this.scroller.changeTarget($("#xboxSlider > div")[this.pagesPos[1]]);
this.headerX = -this.titles.get(this.pagesPos[1]).style("left").replace("px", "") * 1;
$("#xboxTitles > h2.active").removeClass("active");
this.titles.get(this.pagesPos[1]).addClass("active");
this.header.style({
webkitTransitionDuration: "200ms",
webkitTransform: "translate3d(" + Math.round(this.headerX) + "px,0,0)"
})
},
destroy: function() {
$("#xboxSlider > div").each(function() {
this.style.cssText = ""
});
this.slider[0].style.cssText = "";
this.xbox[0].style.cssText = "";
this.header[0].style.cssText = "";
this.touch.destroy();
this.touch = null;
this.scroller.destroy();
this.scroller = null;
this.xbox.unbind("scrollStart", this);
this.xbox.unbind("scrollMove", this);
this.xbox.unbind("scrollEnd", this)
}
};
return {
tiltIn: tiltIn,
tiltOut: tiltOut
}
} ()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment