/*
* 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();
 }
})();