<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"));
	  }
  }
  var curPage = parseInt(document.getElementById("mangaCurrPage").innerHTML)-1;
  setTimeout(onArticle(curPage), 500);
}

window.onload = init;

function changeOpacity() {
  var curOpacity = parseInt(document.getElementById("mangaOpacityValue").innerHTML);
  document.getElementById("article-current").style.opacity = curOpacity/10;
}
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 elLink = document.getElementById("chapterNext").innerHTML;
  var curOpacity = parseInt(document.getElementById("mangaOpacityValue").innerHTML);
  location.href="?url="+elLink+"&opacity="+curOpacity;
}
function onChapterPrev() {
  var elLink = document.getElementById("chapterPrevious").innerHTML;
  var curOpacity = parseInt(document.getElementById("mangaOpacityValue").innerHTML);
  location.href="?url="+elLink+"&opacity="+curOpacity;
}

//Keyboard shortcuts
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>