<div class="row2">
  <div class="column" onclick="onPageMinus()" id="pageMinus"><div class="arrow-left"></div></div>
  <div class="column" onclick="onPagePlus()" id="pagePlus"><div class="arrow-right"></div></div>
</div>
<script>
  function init() {
	var imgDefer = document.getElementsByTagName("img");
	for (var i=0; i<imgDefer.length; i++) {
	  if(imgDefer[i].getAttribute("data-src")) {
		console.log("defer init: "+i);
		imgDefer[i].setAttribute("src",imgDefer[i].getAttribute("data-src"));
	  } }
    setTimeout(onArticle(0), 500);
  }
  window.onload = init;
  function changeHref() {
    var curOpacity = parseInt(document.getElementById("mangaOpacityValue").innerHTML);
    var curPage = parseInt(document.getElementById("mangaCurrPage").innerHTML);
    location.href="#opacity="+curOpacity+"&page="+curPage;
  }
  function changeOpacity() {
    var curOpacity = parseInt(document.getElementById("mangaOpacityValue").innerHTML);
    document.getElementById("article-current").style.opacity = curOpacity/10;
    changeHref();
  }
  function onOpacityPlus() {
    var curOpacity = parseInt(document.getElementById("mangaOpacityValue").innerHTML);
    curOpacity += 1;
    if( 10 <= curOpacity ) curOpacity = 10;
    document.getElementById("mangaOpacityValue").innerHTML = curOpacity;
    changeOpacity();
  }
  function onOpacityMinus() {
    var curOpacity = parseInt(document.getElementById("mangaOpacityValue").innerHTML);
    curOpacity -= 1;
    if( 1 > curOpacity ) curOpacity = 1;
    document.getElementById("mangaOpacityValue").innerHTML = curOpacity;
    changeOpacity();
  }
  function onPagePlus() {
    var currPage = parseInt(document.getElementById("mangaCurrPage").innerHTML)-1;
    console.log("onPagePlus: ["+currPage+"]");
    onArticle(currPage+1);
  }
  function onPageMinus() {
    var currPage = parseInt(document.getElementById("mangaCurrPage").innerHTML)-1;
    console.log("onPageMinus: ["+currPage+"]");
    onArticle(currPage-1);
  }
  function onChapterNext() {
    var el = document.getElementsByClassName("mangaChapNavigNext")[0];
    var elLink = el.getElementsByTagName("a")[0].getAttribute("href");
    var indexHash=location.href.indexOf("#");
    if( -1 != indexHash) {
      var curHref = location.href.substring(indexHash);
      location.href=elLink + curHref;
    } else {
      location.href=elLink;
    }
    //location.href=elLink;
  }
  function onChapterPrev() {
    var el = document.getElementsByClassName("mangaChapNavigPrev")[0];
    var elLink = el.getElementsByTagName("a")[0].getAttribute("href");
    location.href=elLink;
  }
    document.onkeydown = function(e) { // listen to keyboard events
      switch (e.keyCode) {
        case 37: // left
          onPageMinus();    
          break;
        case 39: // right
          onPagePlus();    
          break;
        case 79: // o
          onPageMinus();    
          break;
        case 80: // p
          onPagePlus();    
          break;
        case 187: // +
          onOpacityPlus();
          break;
        case 189: // -
          onOpacityMinus();
          break;
        case 74: // j
          onChapterPrev();
          break;
        case 75: // k
          onChapterNext();
          break;
        case 70: // f
          openFullscreen();
          break;
        default:
          console.log(e.which);
    }
  }
  function onArticle(index) {
    if(index < 0) {
        //index = 0;
        onChapterPrev();
        return;
    }
    var string_index = "article-"+index;
    console.log("onArticle("+index+") : "+string_index);
    var url = location.href;
    var x = document.getElementById("item-active");
    if(null == document.getElementById(string_index)) {
      onChapterNext();
    } else {
      x.className = string_index;
      document.getElementById("article-current").innerHTML =
      document.getElementById(string_index).innerHTML;
      location.href = "#";
      //console.log(document.getElementById(string_index).innerHTML);
      document.getElementById("mangaCurrPage").innerHTML = index+1;
    }
    changeOpacity();
  }
  function openFullscreen() {
    //var elem = document.getElementById("article-current");
    var elem = document.documentElement;
    var status = parseInt(document.getElementById("mangaFSStatus").innerHTML);
    if( 0 == status ) {
      document.getElementById("mangaFSStatus").innerHTML = 1;
      if (elem.requestFullscreen) {
        elem.requestFullscreen();
      } else if (elem.webkitRequestFullscreen) { /* Safari */
        elem.webkitRequestFullscreen();
      } else if (elem.msRequestFullscreen) { /* IE11 */
        elem.msRequestFullscreen();
      }
      document.getElementById("mangaFSToggle").innerHTML = "<div class=\"fs-off\"></div>"; 
    } else {
      document.getElementById("mangaFSStatus").innerHTML = 0;
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.webkitExitFullscreen) { /* Safari */
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) { /* IE11 */
        document.msExitFullscreen();
      }
      document.getElementById("mangaFSToggle").innerHTML = "<div class=\"fs-on\"></div>"; 
    }
  }
</script>
</body>
</html>