/*
* by @psyonline ( http://www.psyonline.kr/, majorartist@gmail.com )
*/

'use strict';
(function() {
var $html = document.documentElement,
$body = document.body,
$scroller = document.querySelector('.scroller'),
$header = document.querySelector('.header'),
$navbox = document.querySelector('nav.navigation'),
$footer = document.querySelector('.footer'),
ismobile = (/(ip(ad|hone|od)|android)/i).test(navigator.userAgent),
isie = (/(?:msie ([0-9]+)|rv:([0-9\.]+)\) like gecko)/i).test(navigator.userAgent),
areawidth = window.innerWidth,
areaheight = window.innerHeight,
maxareaheight = areaheight,
listeners = {
mediachange: [],
resize: [],
scroll: [],
wheel: [],
bodyclick: []
},
currentmedia = '',
headerreduced = false,
wheeler = wheeler(),
notransitionclassname = 'no-transition';

$html.classList.add(!ismobile ? 'hoverable' : 'touchable');
isie && $html.classList.add('ie');
window.addEventListener('resize', onresize);

// page control
var page = (function() {
var $cover = createnode('div', 'page-cover'),
$pagetitle = $header.querySelector('h2') || createnode('h2', '', '', $header),
laststate, backstate, urlto;

//createnode('header', 'header', '<h1>'+ document.querySelector('h1 a').innerHTML, $cover);
$cover.addEventListener('touchstart', preventdefault, false);
$body.addEventListener('click', function(e) {
listeners.bodyclick.forEach(function(handler) {
handler(e);
});
linkclick(e);
}, false);
// if ('scrollRestoration' in history) {
history.scrollRestoration = 'manual';
// }
document.addEventListener('scroll', preventdefault);
window.addEventListener('popstate', poped);
requestAnimationFrame(function() {
setview($body.classList.contains('type-view'));
initialize(true);
});
Pace.on('done', oninitialize);

function linkclick(e) {
var target = e.target;
while (target !== $body) {
if (target.nodeName.toLowerCase() === 'a') {
if (target.target !== '_blank') {
go(target.getAttribute('href'));
e.preventDefault();
}
break;
}
target = target.parentNode;
}
}
/*function go(url) {
scroller.disabled = true;
urlto = url;
history.pushState({scrollyfrom: getscrolltop(), index: ++laststate.index}, '', url);
cover();
}*/
function poped(e) {
scroller.disabled = true;
urlto = location.href.split('//gxlab.co.kr')[1] || location.pathname;
cover();
}
function back() {
history.back();
}
function cover() {
wheeler.blocked = true;
$body.appendChild($cover);
$cover.style.opacity = 0;
TweenMax.to($cover, 0.35, {opacity: 1, ease: Quad.easeOut, onComplete: clear});
}
function clear() {
nav.close(true);
$html.classList.remove('displayed');
[].slice.call($scroller.children).forEach(function($child) {
if (!(/(footer|script)/i).test($child.nodeName)) {
removenode($child, true);
}
});
removenode(document.querySelector('.visual-full'), true);
for (var name in listeners) {
listeners[name].length = 0;
}
currentmedia = '';
page.initialized = false;
load();
}
function load() {
Pace.restart();
Pace.track(function() {
ajax(urlto, {onsuccess: onload});
});
}
function onload(response) {
var pagetitle = response.match(/class="header[\s\S]+h2>(.+)<\/h2/);
if (pagetitle) {
pagetitle = pagetitle[1];
// $pagetitle.classList[pagetitle === $pagetitle.innerHTML ? 'add' : 'remove']('fix');
$pagetitle.innerHTML = pagetitle;
$header.appendChild($pagetitle);
} else {
removenode($pagetitle);
}
[].slice.call(createnode('div', '', response.match(/scroller[^"]*">([\s\S]+)<footer/)[1]).children).forEach(function($child) {
$scroller.insertBefore($child, $footer);
});
setview((/type-view/).test(response));
initialize();
}
function initialize(isfirst) {
// check is back
if ((laststate && !history.state) ||
(laststate && history.state && laststate.index > history.state.index)) {
backstate = laststate;
}
laststate = {
scrollyfrom: history.state ? history.state.scrollyfrom || 0 : 0,
index: !isfirst && history.state ? history.state.index || 0 : 0
};
wheeler.blocked = false;
pageinitialize();
}
function oninitialize() {
$body.classList[document.querySelector('.contents.index') ? 'add' : 'remove']('type-index');
scroller.reset(document.querySelector('.sec-list') && backstate ? backstate.scrollyfrom : 0);
ismobile ? setTimeout(display, 1) : display();
page.initialized = true;
}
function display() {
lazy.reset();
currentmedia = '';
onresize();
reflowtrick();
$html.classList.add('displayed');
TweenMax.to($cover, 0.25, {opacity: 0, ease: Quad.easeOut, onComplete: removenode, onCompleteParams: [$cover]});
backstate = null;
}
function setview(isview) {
if (isview) {
$body.classList.add('type-view');
sharer.add();
} else {
$body.classList.remove('type-view');
sharer.remove();
}
}
return {
initialized: false,
//go: go,
back: back
}
})();

// navigation
var nav = $navbox ? (function() {
var $togglerbox = createnode('p', 'nav-button', '<button type="button">Navigation</button>'),
$toggler = $togglerbox.querySelector('button'),
$inwrap = null,
$menu = $navbox.querySelector('ul'),
$menudeco = createnode('li', 'deco', '', $menu),
opened = false,
decovisible = false,
menuresettimer = null;

$body.insertBefore($togglerbox, $header.nextSibling);
removenode($menu);
$menu.classList.add('menu');
$navbox.innerHTML = '<div class="mask"><div class="inwrap"></div></div>';
$inwrap = $navbox.querySelector('.inwrap');
$inwrap.appendChild($menu);
$inwrap.insertBefore(document.querySelector('header.header').cloneNode(true), $menu);
[].forEach.call($inwrap.querySelector('.header').children, function($child) {
$child.nodeName.toLowerCase() !== 'h1' && removenode($child);
});
$inwrap.appendChild(document.querySelector('footer.footer').cloneNode(true));
$toggler.addEventListener('click', toggle, false);
$toggler.addEventListener('transitionend', checkstep, false);
createnode('div', 'background', null, $navbox);
if (!ismobile) {
[].forEach.call($menu.querySelectorAll('a'), function($link, index) {
$link.setAttribute('data-index', index);
$link.addEventListener('mouseenter', menuenter, false);
$link.addEventListener('mouseleave', menuleave, false);
});
}
function menuenter() {
TweenMax.to(this.children[0], 0.5, {x: currentmedia === 'wide' ? 20 : 10, ease: 'easeOutQuart', force3D: true});
return;
var index = parseInt(this.getAttribute('data-index'));
clearTimeout(menuresettimer);
if (!decovisible) {
$menudeco.classList.add(notransitionclassname);
}
$menudeco.style.transform = 'translate3d(0, '+ (index*90) +'px, 0)';
if (!decovisible) {
reflowtrick();
$menudeco.classList.remove(notransitionclassname);
$menudeco.classList.add('show');
}
decovisible = true;
}
function menuleave() {
TweenMax.to(this.children[0], 0.5, {x: 0, ease: 'easeOutQuart', force3D: true});
return;
menuresettimer = setTimeout(menureset, 50);
}
function menureset() {
$menudeco.classList.remove('show');
decovisible = false;
}
function checkstep(e) {
if (e.propertyName === 'transform' && $toggler.className === 'step1') {
if (opened) {
$toggler.classList.add('step2');
} else {
$toggler.classList.remove('step1');
}
}
}
function toggle(e) {
if (!opened) {
$navbox.style.display = '';
reflowtrick();
$inwrap.style.height = areaheight +'px';
$html.classList.add('navigate');
$toggler.classList.add('step1');
opened = true;
wheeler.blocked = true;
} else {
$html.classList.remove('navigate');
$toggler.classList.remove('step2');
opened = false;
wheeler.blocked = false;
}
e && e.preventDefault();
}
return {
close: function(fromcover) {
if (opened) {
if (fromcover) {
$navbox.style.display = 'none';
}
toggle();
}
}
}
})() : null;

// share
var sharer = (function() {
var $sharebox = createnode('div', 'share', [
'<p class="toggle"><button type="button">Share</button></p>',
'<ul>',
'<li><a href="#" class="facebook" target="_blank">Facebook</a></li>',
'<li><a href="#" class="twitter" target="_blank">Twitter</a></li>',
'<li><a href="#" class="pinterest" target="_blank">Pinterest</a></li>',
'</ul>'
].join('')),
$toggler = $sharebox.querySelector('.toggle button'),
$links = [].slice.call($sharebox.querySelectorAll('a')),
opened = false;
$toggler.addEventListener('click', toggle, false);
$sharebox.addEventListener('click', stoppropagation, false);
listeners.bodyclick.push(function() {
if ($sharebox.classList.contains('open')) {
toggle();
}
});
function toggle(e) {
if (!opened) {
$sharebox.classList.add('open');
opened = true;
} else {
$sharebox.classList.remove('open');
opened = false;
}
}
function setlinks() {
var title = encodeURIComponent($scroller.querySelector('h3').innerHTML.replace(/<br>/g, ' ')),
imageurl = encodeURIComponent(document.querySelector('meta[property="og:image"]').getAttribute('content')),
url = encodeURIComponent(location.href);
$sharebox.querySelector('.facebook').href = 'https://www.facebook.com/sharer/sharer.php?u='+ url;
$sharebox.querySelector('.twitter').href = 'https://twitter.com/intent/tweet?text='+ title +'&url='+ url;
$sharebox.querySelector('.pinterest').href = 'http://pinterest.com/pin/create/button/?url='+ url +'&media='+ imageurl +'&description='+ title;
}
return {
add: function() {
setlinks();
$body.appendChild($sharebox);
},
remove: function() {
removenode($sharebox);
}
}
})();

// page initialize
function pageinitialize() {
// index
document.querySelector('.contents.index') && (function() {
var $index = document.querySelector('.contents.index'),
$worktitle = $index.querySelector('h3'),
$workbox = $index.querySelector('.works'),
$worklinks = [].slice.call($workbox.querySelectorAll('.works a')),
$introduce = $index.querySelector('.introduce'),
$timer = createnode('div', 'timer', [
'<p class="number">01</p>',
getsvgcirclehtml(50),
].join(''), $index),
$timernumber = $timer.querySelector('.number'),
$timerpath = $timer.querySelector('path'),
timerpathlength = $timerpath.getTotalLength(),
timertween = null,
timerpaused = false,
$mentbox = createnode('ul', 'ments', (function() {
var html = [];
$worklinks.forEach(function($link) {
html.push('<li><span>', $link.querySelector('span').innerHTML, '</span></li>');
});
return html.join('');
})()),
$paging = createnode('p', 'paging', (function() {
var html = [];
$worklinks.forEach(function($link, index) {
html.push('<span>', index+1, '</span>');
});
return html.join('');
})()),
$pagingbuttons = [].slice.call($paging.querySelectorAll('span')),
numworks = $worklinks.length,
currentindex = 0;

removenode($worktitle);
removenode($workbox);
if (numworks > 1) {
$timerpath.style.strokeDasharray = 
$timerpath.style.strokeDashoffset = timerpathlength;
} else {
$timer = null;
}
$pagingbuttons.forEach(function($button, index) {
$button.setAttribute('data-index', index);
$button.addEventListener('click', pagechange);
});
setpaging();
listeners.wheel.push(onwheel);
listeners.resize.push(onresize);
listeners.mediachange.push(onmediachange);

// wide
var wide = (function() {
var $widebox = createnode('div', 'wide', '<div class="rolling"></div>'),
$visualbox = createnode('ul', 'visual', (function() {
var html = [];
$worklinks.forEach(function($link) {
var videourl = $link.getAttribute('data-video');
html.push('<li>'); 
html.push('<div class="media">');
if (videourl && !ismobile) {
html.push(getvideohtml(videourl));
} else {
html.push('<div class="image" style="background-image: url(\''+ $link.getAttribute('data-image') +'\');">');
}
html.push('</div>');
html.push('</li>');
});
return html.join('');
})()),
$visualvideos = [],
$mediabox = $visualbox.querySelector('.media'),
$contentbox = createnode('div', 'content', [
'<h3>', $worktitle.innerHTML, '</h3>',
'<div class="rolling"></div>',
'<div class="rolling"></div>'
].join(''), $widebox),
_$workbox = $workbox.cloneNode(true),
_$mentbox = $mentbox.cloneNode(true),
$rollingboxs = [].slice.call($widebox.querySelectorAll('.rolling')),
$rollinggroups = [
[].slice.call($visualbox.children),
[].slice.call(_$workbox.children),
[].slice.call(_$mentbox.children)
],
isfaking = false,
targetindex = 0;

$rollingboxs[0].appendChild($visualbox);
$rollingboxs[1].appendChild(_$workbox);
$rollingboxs[2].classList.add('ments');
$rollingboxs[2].appendChild(_$mentbox);
$rollinggroups.forEach(function($group, index) {
var $fake = $group[0].cloneNode(true);
$group[0].parentNode.appendChild($fake);
$group.push($fake);
$fake = $group[numworks-1].cloneNode(true);
$group[0].parentNode.insertBefore($fake, $group[0]);
$group.unshift($fake);
});
$rollinggroups[0].forEach(function($item, index) {
$visualvideos[index] = $item.querySelector('video');
if ($visualvideos[index]) { // for firefox autoplay error with cloned video
var $parent = $visualvideos[index].parentNode;
$parent.innerHTML = $parent.innerHTML;
$visualvideos[index] = $parent.querySelector('video');
}
});
[].forEach.call(_$workbox.querySelectorAll('a'), function($link) {
$link.addEventListener('mouseenter', pausetimer, false);
$link.addEventListener('mouseleave', unpausetimer, false);
});
function onchanged() {
if (isfaking) {
rolling(true);
}
$visualvideos.forEach(function($video, index) {
if ($video && index !== currentindex+1) {
resetvideo($video);
}
});
}
function change(fromauto) {
$widebox.classList.add('active');
rolling(false, fromauto);
}
function rolling(withoutanimation, fromauto) {
isfaking = (fromauto === 1 && currentindex === 0) || (fromauto === -1 && currentindex === numworks-1);
targetindex = isfaking ? fromauto === 1 ? numworks+1 : 0 : currentindex+1;
if (withoutanimation) {
$widebox.classList.add(notransitionclassname);
}
$rollingboxs.forEach(function($rollingbox, index) {
if (index > 0) {
$rollingbox.style.height = $rollinggroups[index][targetindex].offsetHeight +'px';
}
// if (1 > index) {
// $rollingbox.children[0].style.transform = 'translate3d(0, -'+ (100*targetindex) +'px, 0)';
// } else {
$rollingbox.children[0].style.transform = 'translate3d(0, -'+ $rollinggroups[index][targetindex].offsetTop +'px, 0)';
// }
$rollinggroups[index].forEach(setcurrentitem);
});
reflowtrick();
if (withoutanimation) {
$widebox.classList.remove(notransitionclassname);
}
if ($visualvideos[targetindex]) {
$visualvideos[targetindex].play();
if (isfaking) {
$visualvideos[currentindex+1].play();
}
}
}
function setcurrentitem($item, index) {
$item.classList[index === targetindex ? 'add' : 'remove']('on');
}
function show() {
$widebox.appendChild($paging);
$index.insertBefore($widebox, $introduce);
$timer && $contentbox.appendChild($timer);
resize();
}
function hide() {
$visualvideos.forEach(resetvideo);
removenode($widebox);
}
function resize() {
var mediaboxwidth = $mediabox.offsetWidth,
mediaboxheight = $mediabox.offsetHeight;
$visualvideos.forEach(function($video) {
$video && resizevideo($video, mediaboxwidth, mediaboxheight);
});
rolling(true);
}
return {
show: show,
hide: hide,
change: change,
onchanged: onchanged,
resize: resize
}
})();
// narrow
var narrow = (function() {
var $narrowbox = createnode('div', 'narrow', (function() {
var html = [
'<div class="content">',
'<h3>', $worktitle.innerHTML, '</h3>',
// '<div class="blank"></div>',
'</div>'
];
html.push('<div class="swiper-container">');
html.push('<ul class="swiper-wrapper">');
$worklinks.forEach(function($link) {
html.push('<li class="swiper-slide">');
html.push('<div class="image-wrap">');
html.push('<div class="image" style="background-image: url(\''+ $link.getAttribute('data-image') +'\');"></div>');
html.push('</div>');
html.push('<a href="', $link.getAttribute('href'), '">');
html.push('<p>', $link.innerHTML, '</p>');
html.push('</a>');
html.push('</li>');
});
html.push('</ul>');
html.push('</div>');
return html.join('');
})()),
$contentbox = $narrowbox.querySelector('.content'),
swiper = null;

[].forEach.call($narrowbox.querySelectorAll('.swiper-slide p'), function($title) {
$title.setAttribute('data-swiper-parallax', -200);
$title.setAttribute('data-swiper-parallax-duration', 800);
});
// [].forEach.call($narrowbox.querySelectorAll('.swiper-slide span'), function($ment) {
// $ment.setAttribute('data-swiper-parallax', -200);
// $ment.setAttribute('data-swiper-parallax-duration', 1000);
// });
function onchanged() {}
function setswiper() {
swiper = new Swiper($narrowbox.querySelector('.swiper-container'), {speed: 800, loop: true, parallax: true, on: {
slideChange: function(e) {
if (swiper && swiper.realIndex !== currentindex) {
pagechange.call($pagingbuttons[swiper.realIndex], false, true);
}
}
}});
}
function change(fromauto) {
if (fromauto) {
swiper.slideNext(1000, false);
} else {
swiper.slideTo(currentindex+1, 1000, false); // +1 for swiper loop mode
}
}
function show() {
$narrowbox.appendChild($paging);
$index.insertBefore($narrowbox, $introduce);
!swiper && setswiper();
swiper.slideTo(currentindex+1, 0); // +1 for swiper loop mode
$timer && $contentbox.appendChild($timer);
resize(true);
}
function hide() {
removenode($narrowbox);
}
function resize(widthchanged) {
if (widthchanged) {
$narrowbox.style.height = areaheight +'px';
// rolling(true);
}
}
return {
show: show,
hide: hide,
change: change,
onchanged: onchanged,
resize: resize
}
})();
$timer && timerstart();
function callfunction(functionname, parameter) {
if (currentmedia === 'wide') {
wide[functionname](parameter);
} else {
narrow[functionname](parameter);
}
}
function pagechange(_fromauto, withoutchange) {
var fromauto = !isNaN(_fromauto) ? _fromauto : false,
index = fromauto === 1 ? currentindex === numworks-1 ? 0 : currentindex+1 :
fromauto === -1 ? currentindex === 0 ? numworks-1 : currentindex-1 :
parseInt(this.getAttribute('data-index'));
if (index !== currentindex) {
currentindex = index;
!withoutchange && callfunction('change', fromauto);
resettimer();
setpaging();
}
}
function setpaging() {
$pagingbuttons.forEach(function($button, index) {
$button.classList[index === currentindex ? 'add' : 'remove']('on');
});
}
function timerstart() {
if ($timer) {
timertween = TweenMax.to($timerpath.style, 10, {strokeDashoffset: 0, ease: 'linear', onComplete: pagechange, onCompleteParams: [1]}); // ·Ñ¸µ½Ã°£
if (timerpaused) {
timertween.pause();
}
}
}
function resettimer() {
killtween(timertween);
$timer.style.transition = 'none';
TweenMax.to($timer, 0.2, {opacity: 0, ease: 'easeOutQuad', onComplete: function() {
$timerpath.style.strokeDashoffset = timerpathlength;
TweenMax.to($timer, 0.5, {opacity: 1, ease: 'easeOutQuad', delay: 0.3,
onStart: function() {
$timernumber.innerHTML = '0'+ (currentindex+1);
timerstart();
},
onComplete: function() {
callfunction('onchanged');
wheeler.blocked = false;
}
});
}});
}
function pausetimer() {
timertween.pause();
timerpaused = true;
}
function unpausetimer() {
timertween.play();
timerpaused = false;
}
function onwheel(e, direction) {
if (currentmedia === 'wide') {
wheeler.blocked = true;
pagechange(direction);
e.preventDefault();
}
}
function onresize() {
callfunction('resize');
}
function onmediachange() {
if (currentmedia === 'wide') {
wide.show();
narrow.hide();
} else {
wide.hide();
narrow.show();
}
}
})();

// list
document.querySelector('.sec-list') && (function() {
var $listbox = document.querySelector('[class*="list-"]'),
$items = [].slice.call($listbox.querySelectorAll('li')),
$links = [].slice.call($listbox.querySelectorAll('a')),
$figures = [].slice.call($listbox.querySelectorAll('figure')),
$medias = [],
$videos = [],
$covers = [],
figurewidth, figureheight, rotateangle;

$figures.forEach(function($figure, index) {
var videourl = !ismobile ? $figure.getAttribute('data-video') : '',
$media = createnode('div', 'media', [
videourl ? getvideohtml(videourl) : '',
'<span class="cover" style="background-image: url(\'', $figure.querySelector('img').getAttribute('src'), '\');"></span>'
].join(''));
if (videourl) {
$videos[index] = $media.querySelector('video');
}
$covers[index] = $media.querySelector('.cover');
$medias[index] = $media;
$figure.innerHTML = '';
$figure.appendChild($media);
if (!ismobile) {
$figure.setAttribute('data-index', index);
$figure.addEventListener('mouseenter', onfigureenter, false);
$figure.addEventListener('mousemove', onfiguremove, false);
$figure.addEventListener('mouseleave', onfigureleave, false);
}
});
listeners.resize.push(onresize);

function onfigureenter(e) {
var index = this.getAttribute('data-index');
if ($videos[index]) {
$videos[index].play();
TweenMax.to($covers[index], 0, {opacity: 0});
}
}
function onfiguremove(e) {
var index = this.getAttribute('data-index'),
rotatex = -rotateangle*((e.offsetY-figureheight/2)/(figureheight/2)),
rotatey = rotateangle*((e.offsetX-figurewidth/2)/(figurewidth/2));
// $medias[index].style.transform = 'rotateX('+ rotatex +'deg) rotateY('+ rotatey +'deg) rotateZ(0deg)'; // css transition is not smooth in ie
TweenMax.to($medias[index], 0.7, {rotationX: rotatex, rotationY: rotatey, ease: Power2.easeOut, force3D: true});
}
function onfigureleave(e) {
var index = this.getAttribute('data-index');
// $medias[index].style.transform = 'rotateZ(0.0001deg)';
TweenMax.to($medias[index], 0.7, {rotationX: 0.0001, rotationY: 0.0001, ease: Back.easeOut.config(1.75), force3D: true});
if ($videos[index]) {
TweenMax.to($covers[index], 0.5, {opacity: 1, ease: Quad.easeOut, onComplete: function() {
resetvideo($videos[index]);
}});
}
}
function onresize() {
figurewidth = $figures[0].offsetWidth;
figureheight = $figures[0].offsetHeight;
rotateangle = Math.min(20, 9*(700/figurewidth));
}
})();

// view
document.querySelector('.sec-view') && (function() {
var
$visualbox = document.querySelector('.visual-full'),
$visualfigure, $visualcover, $titlebox,
$viewbox = document.querySelector('.sec-view'),
$viewcon = document.querySelector('.view-con'),
$slidebox = $viewbox.querySelector('.view-slide .slides'),
$resizetargets = $viewbox.querySelectorAll('iframe[src*="vimeo.com"], iframe[src*="youtube.com"]'),
$backbox = createnode('div', 'view-back', [
'<div class="inner">',
'<div class="button">',
'<button>',
getsvgcirclehtml(100),
'back',
'</button>',
'</div>',
'</div>'
].join('')),
$backinnerbox = $backbox.querySelector('.inner'),
$backbutton = $backbox.querySelector('button'),
$path = $backbox.querySelector('path'),
pathlength = $path.getTotalLength(),
$image, $video,
videoadded = false,
visualcovered = false,
backtimer = null,
goingback = false;

if ($visualbox) {
$visualfigure = $visualbox.querySelector('figure');
$visualcover = createnode('div', 'cover', '', $visualfigure);
$image = createnode('div', 'image');
$image.style.backgroundImage = 'url(\''+ $visualfigure.getAttribute('data-image') +'\')';
$video = !ismobile ? $visualfigure.getAttribute('data-video') : null;
if ($video) {
$video = createnode('div', '', getvideohtml($video)).children[0];
} else {
$visualfigure.appendChild($image);
}
$titlebox = $viewbox.querySelector('.sec-view .view-visual');
$scroller.parentNode.insertBefore($visualbox, $scroller);
}
if ($resizetargets.length) {
$resizetargets = [].slice.call($resizetargets);
$resizetargets.forEach(function($target, index) {
$target.setAttribute('data-ratio', $target.height/$target.width);
});
}
if ($slidebox) {
$slidebox.classList.add('swiper-container');
$slidebox.children[0].classList.add('swiper-wrapper');
[].forEach.call($slidebox.querySelectorAll('li'), function($item) {
$item.classList.add('swiper-slide');
});
var swiper = new Swiper($slidebox, {speed: 700, loop: true,
navigation: {prevEl: '.view-slide .btn-prev', nextEl: '.view-slide .btn-next'},
pagination: {el: createnode('p', 'paging', '', $slidebox.parentNode), clickable: true}
});
}
$scroller.insertBefore($backbox, $body.querySelector('.scroller > .footer'));
$backbutton.addEventListener('click', goback, false);
!ismobile && (function() {
var currentoffset = 0;
$backbutton.addEventListener('mouseenter', function() {
currentoffset = $path.style.strokeDashoffset;
TweenMax.to($path.style, 0.5, {strokeDashoffset: 0, ease: Expo.easeOut});
}, false);
$backbutton.addEventListener('mouseleave', function() {
if (!wheeler.blocked) {
TweenMax.to($path.style, 0.35, {strokeDashoffset: currentoffset, ease: Expo.easeOut});
}
}, false);
})();
$path.style.strokeDasharray = 
$path.style.strokeDashoffset = pathlength;
listeners.scroll.push(onscroll);
listeners.mediachange.push(onmediachange);
listeners.resize.push(onresize);

function goback() {
if (!goingback) {
wheeler.blocked = true;
TweenMax.to($path.style, 0.5, {strokeDashoffset: pathlength, ease: Quint.easeOut});
goingback = true;
page.back();
}
}
function onscroll(scrolltop) {
var backboxheight = Math.min(maxareaheight, scrolltop, Math.max(0, (scrolltop+maxareaheight*2)-getscrollheight())),
percent = backboxheight/maxareaheight,
needtovisualupdate = false;
$backinnerbox.style.height = backboxheight +'px';
$path.style.strokeDashoffset = pathlength*3-(pathlength*percent);
clearTimeout(backtimer);
if (percent > 0.99) {
backtimer = setTimeout(goback, 500);
return;
}
if ($visualfigure) {
if (areaheight > scrolltop) {
if (videoadded && $video.paused) {
$video.play();
}
visualcovered = false;
needtovisualupdate = true;
} else {
if (videoadded && !$video.paused) {
$video.pause();
}
if (!visualcovered) {
visualcovered = true;
needtovisualupdate = true;
}
}
}
if (needtovisualupdate) {
if (visualcovered) {
$visualfigure.style.display = 'none';
} else {
$visualfigure.style.display = '';
$visualcover.style.backgroundColor = 'rgba(20, 20, 20, '+ 1*(scrolltop/areaheight) +')';
$visualcover.style.webkitBackdropFilter = $visualcover.style.backdropFilter = 'blur('+ 10*(scrolltop/areaheight) +'px)';
}
}
}
function onmediachange() {
videoadded = false;
if ($video) {
if (currentmedia == 'wide') {
$visualfigure.appendChild($video);
removenode($image);
videoadded = true;
} else {
$visualfigure.appendChild($image);
removenode($video);
}
}
}
function onresize(widthchanged) {
$backbox.style.height = maxareaheight +'px';
if ($visualbox) {
if (!$visualbox.style.height || widthchanged) {
$visualbox.style.height = areaheight +'px';
$visualbox.style.minHeight = 'auto';
if ($video) {
resizevideo($video, areawidth, areaheight);
}
$titlebox.style.height = areaheight +'px';
}
}
if ($resizetargets.length) {
var viewconwidth = $viewcon.offsetWidth;
$resizetargets.forEach(function($target) {
$target.width = viewconwidth;
$target.height = viewconwidth*parseFloat($target.getAttribute('data-ratio'));
});
}
}
})();

// about
document.querySelector('.about-half') && (function() {
var $halfcontents = document.querySelectorAll('.about-half .cell h5');
listeners.resize.push(onresize);
function onresize() {
if (currentmedia === 'wide') {
$halfcontents[1].style.height = $halfcontents[0].offsetHeight +'px';
}
}
})();

// about slide
document.querySelector('.about-slide') && (function() {
var $box = document.querySelector('.about-slide'),
$matbox = document.querySelector('.materialize'),
$typebox = $matbox.querySelector('.types'),
$typemover = $typebox.children[0],
$types = [].slice.call($typebox.querySelectorAll('li')),
$typetexts = null,
$visualbox = createnode('div', 'visual swiper-container', (function() {
var html = ['<ul class="swiper-wrapper">'];
$types.forEach(function($type, index) {
html.push('<li class="swiper-slide">');
html.push('<div class="image" style="background-image: url(\'', $type.getAttribute('data-image'), '\');"></div>');
html.push('</li>');
$type.removeAttribute('data-image');
});
html.push('</ul>');
return html.join('');
})(), $matbox),
$paging = createnode('p', 'paging', ''),
$txt = $box.querySelector('.fromnowon'),
swiper = new Swiper($visualbox, {speed: 1000, loop: true, effect: 'fade',
pagination: {el: $paging, clickable: true},
on: {touchStart: ontouchstart, touchMove: ontouchmove, touchEnd: ontouchend, slideChange: onswiperchange},
autoplay: {delay: 2000}
}),
movetween = null,
numtypes = $types.length,
numalltypes = numtypes*3,
currentindex = 0,
currentallindex = numtypes,
maxscale = 3,
swiperchanged = false,
islooping = false,
values = {x: 0, touchx: 0, touchstartx: 0, ratio: 0};

$matbox.addEventListener('mouseenter', function() {
swiper.autoplay.stop();
});
$matbox.addEventListener('mouseleave', function() {
swiper.autoplay.start();
});
$visualbox.appendChild($typebox);
$typemover.innerHTML = (function() {
var html = $typemover.innerHTML.replace(/>(.+)<\//g, '><span>$1</span></');
return html + html + html;
})();
$types = [].slice.call($typemover.children);
$typetexts = [].slice.call($typemover.querySelectorAll('span'));
$typetexts.forEach(function($type, index) {
$type.setAttribute('data-index', index);
$type.addEventListener('click', change, false);
});
$paging.setAttribute('data-lazy', 'left');
listeners.mediachange.push(onmediachange);
listeners.resize.push(onresize);
onmediachange();

function onswiperchange() {
if (swiper && swiper.realIndex !== currentindex) {
islooping = swiper.activeIndex === 0 && swiper.previousIndex === 1 ? -1 :
swiper.activeIndex === numtypes+1 && swiper.previousIndex === numtypes ? 1 :
false;
change.call($typetexts[swiper.realIndex+numtypes], true);
swiperchanged = true;
}
}
function ontouchstart(e) {
var point = getpoint(e);
values.touchx = values.x;
values.touchstartx = point[0];
values.ratio = $types[currentallindex].offsetWidth/areawidth;
swiperchanged = false;
}
function ontouchmove(e) {
if (!swiperchanged) {
var point = getpoint(e);
values.x = values.touchx+((point[0]-values.touchstartx)*values.ratio);
setposition();
}
}
function ontouchend(e) {
if (!swiperchanged) {
move();
}
}
function onmoved(e) {
if (islooping) {
currentallindex = islooping === -1 ? numtypes*2-1 : numtypes;
islooping = false;
move(true);
} else if (currentallindex > numtypes*2-1 || numtypes > currentallindex) {
currentallindex += numtypes > currentallindex ? numtypes : -numtypes;
move(true);
}
$box.classList.remove('block');
}
function change(fromswiper) {
var index = parseInt(this.getAttribute('data-index'));
currentallindex = islooping === -1 ? numtypes-1 : islooping === 1 ? numtypes*2 : index;
currentindex = index%numtypes;
fromswiper !== true && swiper.slideTo(currentindex +1);
$box.classList.add('block');
move();
}
function move(withoutanimation) {
killtween(movetween);
movetween = TweenMax.to(values, withoutanimation ? 0 : 1, {x: -$types[currentallindex].offsetLeft, duration: 500, ease: Power4.easeOut, onUpdate: setposition, onComplete: onmoved});
}
function setposition() {
var x = -values.x,
overflow = 0,
typex, typewidth, typeabsolutex, scale, i;
$typemover.style.transform = 'translate3d('+ values.x +'px, 0, 0)';
for (i = 1; i < numalltypes; i++) {
typeabsolutex = $types[i].getBoundingClientRect().left;
if (typeabsolutex > areawidth || -areawidth/4 > typeabsolutex) {
continue;
}
typex = $types[i].offsetLeft;
if (x >= typex) {
typewidth = $types[i].offsetWidth;
scale = typewidth > x-typex ? 1-(x-typex)/typewidth : 0;
} else {
typewidth = $types[i-1].offsetWidth;
scale = typewidth > typex-x ? 1-(typex-x)/typewidth : 0;
}
scale = 1+(maxscale-1)*scale;
$typetexts[i].style.transform = 'scale('+ scale +') translateZ(0)';
$types[i].style.transform = 'translate3d('+ overflow +'px, 0, 0)';
if (scale > 1) {
typewidth = $typetexts[i].offsetWidth;
overflow += typewidth*scale-typewidth;
}
}
}
function onmediachange() {
if (currentmedia === 'wide') {
maxscale = 3;
$box.insertBefore($paging, $txt);
} else {
maxscale = 2.4;
$matbox.appendChild($paging);
}
}
function onresize() {
killtween(movetween);
move(true);
}
})();

// contact
document.querySelector('.contact-regist') && (function() {
var $registbox = document.querySelector('.contact-regist'),
$select = $registbox.querySelector('select'),
$selectbox = createnode('div', 'form-select', (function() {
var html = ['<button type="button">', $select.options[0].text, '</button>'];
html.push('<div class="options">');
html.push('<div class="inner">');
[].forEach.call($select.options, function($option) {
$option.value && html.push('<span>', $option.text, '</span>');
});
html.push('</div>');
html.push('</div>');
return html.join('');
})(), $select.parentNode),
$selecttitle = $selectbox.querySelector('button'),
$selectoptions = [].slice.call($selectbox.querySelectorAll('.options span'));
$selectbox.addEventListener('click', stoppropagation, false);
$selecttitle.addEventListener('click', function(e) {
$selectbox.classList.toggle('open');
}, false);
$selectoptions.forEach(function($option, index) {
$option.setAttribute('data-index', index+1);
$option.addEventListener('click', select, false);
});
listeners.bodyclick.push(function() {
if ($selectbox.classList.contains('open')) {
$selectbox.classList.remove('open');
}
});
function select() {
var index = parseInt(this.getAttribute('data-index'));
$select.options.selectedIndex = index;
$selecttitle.classList.add('has-value');
$selecttitle.innerHTML = this.innerHTML;
$selectbox.classList.remove('open');
}
})();
}

function ajax(url, option) {
var method = (option.method || 'get').toLowerCase() == 'get' ? 'GET' : 'POST',
xmlhttp = new XMLHttpRequest();
xmlhttp.open(method, url, option.async !== false);
xmlhttp.onreadystatechange = readystatechange;
xmlhttp.timeout = 30000;
if (method == 'GET') {
xmlhttp.send(null);
} else {
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=utf-8');
xmlhttp.send(option.query);
}
function readystatechange() {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
option.onsuccess && option.onsuccess(xmlhttp.responseText);
} else {
option.onerror && option.onerror();
}
}
}
}
function getsvgcirclehtml(size) {
return [
'<svg width="', size, '" height="', size, '">',
'<path d="M', size/2, ',', size/2, 'm0,-23a23,23,0,1,1,-0.0001,0z" />',
'</svg>'
].join('');
}
function getvideohtml(videourl) {
return [
'<video loop muted playsinline>',
'<source src="', videourl, '" type="video/mp4">',
'</video>'
].join('');
}
function resetvideo($video) {
if ($video && $video.readyState) {
$video.pause();
$video.currentTime = 0;
}
}
function resizevideo($video, towidth, toheight) {
var videowidth = towidth,
videoheight = videowidth*1.5;
//videoheight = videowidth*0.56256062075654;
if (toheight > videoheight) {
videoheight = toheight;
videoheight = videowidth*1.5;
//videoheight = videowidth*0.56256062075654;
}
$video.width = videowidth;
$video.height = videoheight;
}
function createnode(name, classname, innerhtml, $appendto) {
var $node = document.createElement(name);
if (classname) {
$node.className = classname;
}
if (innerhtml) {
$node.innerHTML = innerhtml;
}
if ($appendto) {
$appendto.appendChild($node);
}
return $node;
}
function removenode($node, emptycontent) {
if ($node) {
if (emptycontent) {
$node.innerHTML = '';
}
$node.parentNode && $node.parentNode.removeChild($node);
}
}
function getpoint(e) {
if (e.touches) {
e = e.touches[0];
}
return [e.pageX || e.clientX, e.pageY || e.clientY];
}
function wheeler() {
var lastmovedtime = 0,
_blocked = false,
deltax, deltay;
$body.addEventListener('onwheel' in document ? 'wheel' : 'DOMMouseScroll' in document ? 'DOMMouseScroll' : 'mousewheel', function(e) {
if (_blocked) {
e.preventDefault();
return;
}
deltax = e.deltaX !== undefined ? e.deltaX : e.wheelDeltaX || 0;
deltay = e.deltaY !== undefined ? e.deltaY : e.wheelDeltaY !== undefined ? e.wheelDeltaY : e.detail || e.wheelDelta*-1;
if (listeners.wheel.length) {
if (Math.abs(deltay) > 5 && new Date().getTime()-lastmovedtime > 200) {
listeners.wheel.forEach(function(handler) {
handler(e, deltay > 0 ? 1 : -1);
});
lastmovedtime = new Date().getTime();
}
}
}, {passive: false});
return {
get blocked() {
return _blocked;
},
set blocked(value) {
_blocked = value;
// $html[(value ? 'add' : 'remove')+'EventListener']('touchmove', preventdefault, {passive: false});
}
};
}

// image lazy showing
var lazy = (function() {
var $lazynodes = [],
numtargets, numdisplayed = 0;
function onscroll(scrolltop) {
for (var bound, transformed, showdelay = 0, i = 0; i < numtargets; i++) {
if ($lazynodes[i] && $lazynodes[i].hasAttribute('data-lazy') && !$lazynodes[i].classList.contains('show')) {
bound = $lazynodes[i].getBoundingClientRect();
transformed = gettransform($lazynodes[i]);
if (areaheight-20 > bound.top-(transformed.y || 0)) {
if (bound.top+bound.height > 0) { // visible
showdelay = showdelay + (parseFloat($lazynodes[i].getAttribute('data-lazy-delay')) || 0);
$lazynodes[i].style.transitionDelay = showdelay +'s';
$lazynodes[i].addEventListener('transitionend', removetarget);
$lazynodes[i].classList.add('show');
showdelay += 0.125;
} else {
removetarget.call($lazynodes[i]);
}
}
}
}
}
function removetarget(e) {
this.style.transitionDelay = '';
this.classList.remove('show');
this.removeAttribute('data-lazy');
this.removeEventListener('transitionend', removetarget);
numdisplayed++;
if (numtargets === numdisplayed) {
$lazynodes.length = 0;
}
e && e.stopPropagation();
}
function reset() {
$lazynodes = [].slice.call(document.querySelectorAll('[data-lazy]'));
numtargets = $lazynodes.length;
numdisplayed = 0;
}
return {
onscroll: onscroll,
reset: reset
}
})();
var scroller = ismobile ? (function() {
window.addEventListener('scroll', onscroll);
return {
reset: function(_scrolltop) {
var scrolltop = _scrolltop || 0;
window.scrollTo(0, scrolltop);
page.initialized && onscroll(scrolltop);
}
}
})() : (function() {
var $hodor = createnode('div', '', '', $body),
tweener = {y: 0, previousy: 0, destinationy: 0},
scrolltween = null,
scrolltop = 0,
_disabled = false;
window.addEventListener('load', checksize);
window.addEventListener('scroll', _onscroll);
window.addEventListener('resize', _onresize);
function onmove() {
var y = tweener.y;
if (y === tweener.previousy) {
killtween(scrolltween);
} else {
$scroller.style.transform = 'translate3d(0, -'+ y +'px, 0)';
tweener.previousy = y;
}
page.initialized && onscroll(Math.round(y));
}
function _onscroll(_scrolltop) {
checksize();
killtween(scrolltween);
if (!_disabled) {
scrolltop = !isNaN(_scrolltop) ? _scrolltop : getscrolltop();
scrolltween = TweenMax.to(tweener, 1, {y: scrolltop, ease: Quint.easeOut, onUpdate: onmove});
}
}
function _onresize() {
checksize();
_onscroll();
}
function checksize() {
$hodor.style.height = Math.max(areaheight, $scroller.offsetHeight) + 'px';
}
return {
set disabled(value) {
_disabled = value;
},
reset: function(_scrolltop) {
checksize();
tweener.y = _scrolltop || 0;
tweener.previousy = -1;
window.scrollTo(0, tweener.y);
onmove();
_disabled = false;
}
}
})();
var trace = (function() {
var $box = document.createElement('ul');
$box.style.cssText = 'position: fixed; left: 0; top: 0; max-height: 30%; font-size: 11px; font-weight: 700; color: #000; line-height: 2; padding: 0 10px; background: rgba(255, 255, 255, 0.5); overflow: auto; -webkit-overflow-scrolling: touch; z-index: 99999;';
return function() {
var $node = document.createElement('li');
$node.innerHTML = [].slice.call(arguments).join(' / ');
$box.appendChild($node);
if ($box.parentNode !== $body) {
$body.appendChild($box);
}
$box.scrollTop = 9999999;
}
})();
function killtween(tween) {
tween && tween.kill();
}
function gettransform($node) {
return $node._gsTransform || CSSPlugin._internals.getTransform($node);
}
function reflowtrick() {
$scroller.offsetWidth;
}
function preventdefault(e) {
e.preventDefault();
}
function stoppropagation(e) {
e.stopPropagation();
}
function getscrolltop() {
return document.documentElement.scrollTop || document.body.scrollTop;
}
function getscrollheight() {
return Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
}
function _log(value) {
if (window.localStorage) {
window.localStorage.getItem('test-mode') && console.log(value);
}
}
function onscroll(_scrolltop) {
var scrolltop = !isNaN(_scrolltop) ? _scrolltop : getscrolltop();
if (scrolltop > 100) {
if (!headerreduced) {
$html.classList.add('reduced-header');
headerreduced = true;
}
} else if (headerreduced) {
$html.classList.remove('reduced-header');
headerreduced = false;
}
listeners.scroll.forEach(function(handler) {
handler(scrolltop);
});
lazy.onscroll(scrolltop);
}
function onresize() {
var media = parseInt(window.getComputedStyle($body)['fontSize']) > 15 ? 'wide' : 'narrow',
_areawidth = window.innerWidth,
widthchanged = !currentmedia || currentmedia === 'wide' || _areawidth !== areawidth;
areawidth = _areawidth;
areaheight = window.innerHeight;
maxareaheight = currentmedia === 'wide' ? areaheight : Math.max(maxareaheight, areaheight);
if (media !== currentmedia) {
currentmedia = media;
listeners.mediachange.forEach(function(handler) {
handler();
});
}
listeners.resize.forEach(function(handler) {
handler(widthchanged);
});
onscroll();
}
})();