main.js

// Setup //

function setup() {
  var articles = document.getElementsByClassName( "article" );
  for ( var i = 0; i < articles.length; i++ )
    setupPics( articles[ i ] );
}

// Menu //

var openmenu = false;
function toggleMenu() {
  document.getElementById("menu").style.display = openmenu ? null : "block";
  openmenu = !openmenu;
}

// Article + Picture //

var current = null;
var currentArticle = null;
var currentNumber = null;

function getPicElements( article ) {
  var imageElements = [];
  var images = document.getElementsByTagName( "img" );
  for ( var i = 0; i < images.length; i++ ) {
    var image = images[ i ];
    if( image.parentNode.parentNode == article )
      imageElements[ imageElements.length ] = image;
  }
  return imageElements;
}

function setupPics( article ) {
  var pics = getPicElements( article );
  for ( var i = 0; i < pics.length; i++ ) {
    var pic = pics[ i ];
    pic.alt = pic.title ? pic.title : pic.src;
    pic.onclick = ( function( pic, article, number ) {
      return function() {
        showPic( pic, article, number );
      }
    } ) ( pic, article, i + 1 );
  }
  if( pics.length == 0 )
    article.getElementsByClassName( "text" )[ 0 ].className += "nopics";
}

function showPic( pic, article, number ) {
  var display = document.getElementById( "pic_display_pic" );
  display.src = pic.src;
  display.id = "pic_display_pic";
  document.getElementById( "pic_display" ).style.display = "block";
  var desc = document.getElementById( "pic_display_desc" );
  if( pic.title ) {
    display.title = pic.title;
    desc.innerHTML = pic.title;
    desc.style.display = "block";
  } else {
    display.title = "";
    desc.innerHTML = null;
    desc.style.display = "none";
  }
  fixSize( display );
  current = pic;
  currentArticle = article;
  currentNumber = number;
}

function fixSize( display ) {
  display.style.height = "auto";
  display.style.width = "100%";
  if( display.offsetHeight > window.innerHeight ) {
    display.style.height = window.innerHeight * 0.8;
    display.style.width = "auto";
  }
}

function hidePic() {
  document.getElementById( "pic_display" ).style.display = null;
  var display = document.getElementById( "pic_display_pic" );
  display.src = "";
  display.style.height = "auto";
  display.style.width = "100%";
  current = null;
  currentArticle = null;
  currentNumber = null;
}

function showPreviousPic() {
  var pics = getPicElements( currentArticle );
  var last = null;
  for ( var i = 0; i < pics.length; i++ ) {
    var pic = pics[ i ];
    if( pic == current ) {
      if( last != null )
        showPic( last, currentArticle );
      return;
    } else {
      last = pic;
    }
  }
}

function showNextPic() {
  var pics = getPicElements( currentArticle );
  var last = false;
  for ( var i = 0; i < pics.length; i++ ) {
    var pic = pics[ i ];
    if( last ) {
      if( pic != null )
        showPic( pic, currentArticle );
      return;
    } else if( pic == current ) {
      last = true;
    }
  }
}