(function () {
$(function () {
var sceneNum = 0;
var $mask = $('#mask');
var $knooo = $('#knooo');
var $knoooGlow = $('#knooo-glow');
var $hat = $('#knooo-hat');
var $body = $('#knooo-body');
var $face = $('#knooo-face');
var $faceGlow = $('#knooo-face-glow');
var $handL = $('#knooo-hand-l');
var $handR = $('#knooo-hand-r');
var $legs = $('#knooo-legs');
var $faceFace = $('#knooo-face-face');
var $faceEyeL = $('#knooo-eye-l');
var $faceEyeR = $('#knooo-eye-r');
var $faceMouse = $('#knooo-mouse');
var $MB = $('#messageBody');
var marker = '<span class="marker tr"></span><span class="marker tl"></span><span class="marker br"></span><span class="marker bl"></span>';
var scene = function (_num) {
switch (_num) {
case 0:
sceneNum = 0;
$knoooGlow.show();
$faceGlow.hide();
$MB.fadeOut()
.queue(function (nxt) {
$(this).html([
'<p class="en">Hi, I’ll show you the great design concept of the Selection Tool UI. At first <strong>click (tap) and select me</strong>.</p>',
'<p class="ja">こんにちは、いまから新しいセレクトツールのUIコンセプトを紹介します。まずは<strong>僕をクリック（タップ）して選択</strong>してください。</p>'
].join(''))
.fadeIn();
$knooo
.append(marker)
.hover(
function () {
$(this).find('span').show();
},
function () {
$(this).find('span').hide();
}
)
.hammer()
.bind('click tap', function () {
$(this).unbind('click tap');
$knoooGlow.hide();
$(this).find('span').addClass('active');
$MB.fadeOut()
.queue(function (nxt) {
$(this).html([
'<p class="en">OK, I was selected. I am <strong>a group object</strong>. Then, please <strong>double-click (pinch out)</strong> me again.</p>',
'<p class="ja">オーケー、選択されました。僕は<strong>グループオブジェクト</strong>です。今度は僕を<strong>ダブルクリック（ピンチアウト）</strong>してください。</p>'
].join(''))
.fadeIn();
nxt();
});
$(this).hammer().bind('dblclick doubletap pinchout', function() {
$(this).unbind('dblclick doubletap pinchout');
scene(1);
});
});
nxt();
});
break;
case 1:
$knooo.find('.tl').transition({ x: -135, y: -120, duration: 300, easing: 'out'});
$knooo.find('.tr').transition({ x: 135, y: -120, duration: 300, easing: 'out'});
$knooo.find('.bl').transition({ x: -135, y: 120, duration: 300, easing: 'out'});
$knooo.find('.br').transition({ x: 135, y: 120, duration: 300, easing: 'out'});
$mask.css({ transform: 'scale(2)' })
.transition({ opacity: 0.3, scale: 1.4, duration: 300, delay: 200, easing: 'out'});
$hat.transition({ x: 0, y: '-=104', duration: 300, easing: 'out'});
$face.transition({ x: '+=129', y: '-=52', duration: 300, easing: 'out'});
$body.transition({ x: '+=129', y: '+=57', duration: 300, easing: 'out'});
$handL.transition({ x: '-=41', y: '+=129', duration: 300, easing: 'out'});
$handR.transition({ x: '-=90', y: '+=53', duration: 300, easing: 'out'});
$legs.transition({ x: '-=130', y: '-=124', duration: 300, easing: 'out',
complete: function () {
$MB.fadeOut()
.queue(function (nxt) {
$(this).html([
'<p class="en">Well done! You saw that I was separated. But this is the <strong>temporary</strong> state and I’m <strong>still a group object</strong>. Click “Next” to continue.</p>',
'<p class="ja">体が分解してしまったけれど大丈夫。<strong>一時的</strong>に離れただけで、僕はまだ<strong>グループオブジェクトのまま</strong>です。この続きを見るには”Next”をクリックしてください。</p>',
'<p class="right"><a class="continue" href="#"><span>▲</span>Next</a>'
].join(''))
.fadeIn();
$knooo.unbind("mouseenter").unbind("mouseleave");
$MB.find('.continue').click(function () {
$(this).unbind('click');
scene(2);
});
nxt();
});
}
});
break;
case 2:
$knooo.find('.element')
.append(marker)
.hover(
function () {
$(this).find('span').show();
},
function () {
$(this).find('span').hide();
}
)
.hammer()
.bind('click tap', function () {
$('#knooo > .marker').remove();
$knooo.find('.element > span').removeClass('active');
$(this).find('span').addClass('active');
});
$MB.fadeOut()
.queue(function (nxt) {
$faceGlow.show();
$(this).html([
'<p class="en">In this state, you can select one of bodies’ object. You need NOT ungroup me to select the object <strong>in lower layer</strong>. <strong>Let’s select the FACE object</strong>.</p>',
'<p class="ja">この状態で僕の体のオブジェクトを選択することもできます。<strong>下層のオブジェクトを選択するために、わざわざグループオブジェクトを解除する必要はない</strong>よ。次は僕の「<strong>顔</strong>」を選んでみてください。</p>'
].join(''))
.fadeIn();
$face.hammer().bind('click tap', function () {
$knooo.find('.element').unbind();
$faceGlow.hide();
scene(3);
});
nxt();
});
break;
case 3:
$MB.fadeOut()
.queue(function (nxt) {
$(this).html([
'<p class="en">OK. Now you selected my face, and it’s also <strong>a group object</strong>. If you wanted to finish the Smart Selection Tool, <strong>click the margin or pinch in</strong>. OR, if you <strong>double-click (pinch out) my face</strong>...!?</p>',
'<p class="ja">ありがとう、いまあなたは僕の顔を選択してます。僕の顔もまた<strong>グループオブジェクト</strong>だよ。このままスマートセレクトから抜けるには、<strong>空白部分をクリックするかピンチイン</strong>してください。または僕の顔をさらに<strong>ダブルクリック（ピンチアウト）</strong>すると...!?</p>'
].join(''))
.fadeIn();
$('#demo').hammer().bind('click pinchin', function (event) {
$(this).unbind('click pinchin');
$knooo.find('.element').unbind();
scene(4);
});
$knooo.find('.element').click(function (event) {
event.preventDefault();
event.stopPropagation();
});
$face.hammer().bind('dblclick doubletap pinchout', function (event) {
$('#demo').unbind();
$knooo.find('.element').unbind();
scene(5);
});
nxt();
});
break;
case 4:
$mask.transition({ opacity: 0, scale: 0.2, duration: 300, delay: 200, easing: 'out'});
$hat.transition({ x: 0, y: '+=104', duration: 300, easing: 'out'});
$face.transition({ x: '-=129', y: '+=52', duration: 300, easing: 'out'});
$body.transition({ x: '-=129', y: '-=57', duration: 300, easing: 'out'});
$handL.transition({ x: '+=41', y: '-=129', duration: 300, easing: 'out'});
$handR.transition({ x: '+=90', y: '-=53', duration: 300, easing: 'out'});
$legs.transition({ x: '+=130', y: '+=124', duration: 300, easing: 'out',
complete: function () {
$MB.fadeOut()
.queue(function (nxt) {
$knoooGlow.hide();
$(this).html([
'<p class="en">Hi, you came back to the first state. <strong>You selected my face object without ungroup me!</strong> If you wanted to try it again, click the ”Back”.</p>',
'<p class="ja">これで最初の状態に戻りました。<strong>グループ化を解かずに僕の顔を選択できました</strong>ね。もう一度試すには“Back”をクリックしてね。</p>',
'<p class="right"><a class="back" href="#"><span>▲</span>Back</a></p>'
].join(''))
.fadeIn();
$MB.find('.back').click(function () {
$(this).unbind('click');
$knooo.find('.marker').remove();
scene(0);
});
nxt();
});
}
});
break;
case 5:
$mask.transition({ scale: 0.3, opacity: 0.1, duration: 300, easing: 'out'});
$face.transition({ x: 4, y: 37, duration: 300, easing: 'out',
complete: function () {
$mask.transition({ scale: 1.4, opacity: 0.3, duration: 300, delay: 200, easing: 'out'});
$face.find('.tl').transition({ x: -140, y: -157, duration: 300, easing: 'out'});
$face.find('.tr').transition({ x: 140, y: -157, duration: 300, easing: 'out'});
$face.find('.bl').transition({ x: -140, y: 157, duration: 300, easing: 'out'});
$face.find('.br').transition({ x: 140, y: 157, duration: 300, easing: 'out'});
$faceFace.transition({ x: 0, y: '-=151', duration: 300, easing: 'out'});
$faceEyeL.transition({ x: '+=135', y: '-=3', duration: 300, easing: 'out'});
$faceEyeR.transition({ x: '+=14', y: '+=147', duration: 300, easing: 'out'});
$faceMouse.transition({ x: '-=150', y: '-=16', duration: 300, easing: 'out',
complete: function () {
scene(6);
}
});
}
});
$hat.transition({ opacity: 0, duration: 300, easing: 'out'});
$body.transition({ opacity: 0, duration: 300, easing: 'out'});
$handL.transition({ opacity: 0, duration: 300, easing: 'out'});
$handR.transition({ opacity: 0, duration: 300, easing: 'out'});
$legs.transition({ opacity: 0, duration: 300, easing: 'out'});
break;
case 6:
$MB.fadeOut()
.queue(function (nxt) {
$(this).html([
'<p class="en">Then, I was separated again but it’s not ungrouped. Let’s select one of them.</p>',
'<p class="ja">さらに僕の顔がばらばらになったね。今回もやはりグループは解除されていません。どれかオブジェクトを選んでください。</p>'
].join(''))
.fadeIn();
$knooo.find('.faceElement')
.append(marker)
.hover(
function () {
$(this).find('span').show();
},
function () {
$(this).find('span').hide();
}
)
.hammer()
.bind('click tap', function (event) {
event.preventDefault();
event.stopPropagation();
$('#knooo-face > span').remove();
$knooo.find('.faceElement > span').removeClass('active');
$(this).find('span').addClass('active');
if (sceneNum === 0) {
sceneNum = 7;
scene(7);
}
});
nxt();
});
break;
case 7:
$MB.fadeOut()
.queue(function (nxt) {
$(this).html([
'<p class="en">OK! You could select the object again. Then, <strong>click the margin (or pinch in)</strong> to back to the first state.</p>',
'<p class="ja">オーケーです、オブジェクトを選択できました。もとの状態に戻るために<strong>空白部分をクリックするかピンチイン</strong>しましょう。</p>'
].join(''))
.fadeIn();
$('#demo').hammer().bind('click pinchin', function () {
$(this).unbind('click pinchin');
$face.find('.faceElement').unbind();
$face.unbind();
scene(8);
});
nxt();
});
break;
case 8:
$mask.transition({ opacity: 0, scale: 0.2, duration: 300, delay: 200, easing: 'out'});
$faceFace.transition({ x: 0, y: '+=151', duration: 300, easing: 'out'});
$faceEyeL.transition({ x: '-=135', y: '+=3', duration: 300, easing: 'out'});
$faceEyeR.transition({ x: '-=14', y: '-=147', duration: 300, easing: 'out'});
$faceMouse.transition({ x: '+=150', y: '+=16', duration: 300, easing: 'out',
complete: function () {
$face.transition({ x: 0, y: '-=37', duration: 300, easing: 'out'});
$hat.transition({ opacity: 1, x: 0, y: '+=104', duration: 300, easing: 'out'});
$body.transition({ opacity: 1, x: '-=129', y: '-=57', duration: 300, easing: 'out'});
$handL.transition({ opacity: 1, x: '+=41', y: '-=129', duration: 300, easing: 'out'});
$handR.transition({ opacity: 1, x: '+=90', y: '-=53', duration: 300, easing: 'out'});
$legs.transition({ opacity: 1, x: '+=130', y: '+=124', duration: 300, easing: 'out',
complete: function () {
$MB.fadeOut()
.queue(function (nxt) {
$knoooGlow.hide();
$(this).html([
'<p class="en">Well come back. <strong>You could select the deeper object located in the group</strong>, without ungrouping any group objects.</p>',
'<p class="ja">おかえりなさい。僕のグループ化を解かずに、<strong>2階層の下のオブジェクトを選択することができました</strong>。もう一度試すには“Back”をクリックしてね。</p>',
'<p class="right"><a class="back" href="#"><span>▲</span>Back</a></p>'
].join(''))
.fadeIn();
$MB.find('.back').click(function () {
$(this).unbind('click');
$knooo.find('.marker').remove();
scene(0);
});
nxt();
});
}
});
}
});
break;
}
};
scene(0);
$('#langEn').click(function () {
$('body').addClass('en');
$('body').removeClass('ja');
});
$('#langJa').click(function () {
$('body').addClass('ja');
$('body').removeClass('en');
});
$('body').addClass('ja');
});
})();
!
