var players = [];

var section_names = ["codemusic",
                     "singingcode",
                     "singingcomputer",
                     "carteblanche",
                     "caressing",
                     "romancestories",
                     "dragonpoem",
                     "computers",
                     "floordrawing",
                     "arcs",
                     "2009",
                     "statement",
                     "resume"];

var vimeo_names = ["codemusic",
                   "singingcode",
                   "singingcomputer",
                   "carteblanche",
                   "caressing",
                   "dragonpoem"];

var page_names = ["commodore", "dell", "sunlab"];

function initImage(container, url, title, description, year) {
  var img_div = document.createElement("div");
  img_div.className = "thm_div";
  img_div.innerHTML = "<img src='" + url + "_t.jpg' " +
                      "onclick=\"showImage('" + url + "', '" + title + "', '" + description + "', '" + year + "')\">"; 
  container.appendChild(img_div);  
}

function showImage(url, title, description, year) {
  var selected_image_container = document.getElementById(current_section + "_selected_image");
  selected_image_container.innerHTML =
      "<img class='selected_image' src='" + url + ".jpg'>" +
      "<div class='selected_image_title'>" + title + "</div>" +                               
      "<div class='selected_image_description'>" + description + "</div>" +                               
      "<div class='selected_image_year'>" + year + "</div>";                               
}

function initVimeoPlayers() {
  for (var i=0; i < vimeo_names.length; i++) {
    var player = document.getElementById(vimeo_names[i]+ "_iframe");
    players[i] = new Froogaloop(player);
  }
}

function pauseVimeoPlayers() {
  for (var i=0; i < players.length; i++) {
    players[i].api("pause");
  }
}

function showSection(section_id) {
  pauseVimeoPlayers();
  for (var i=0; i < section_names.length; i++) {
    document.getElementById(section_names[i]).style.display = "none";
    document.getElementById(section_names[i] + "_navitem").className = "navitem";
  }
  var container = document.getElementById(section_id); 
  container.style.display = "block";
  var navitem = document.getElementById(section_id + "_navitem");
  navitem.className = "navitem selected_navitem";
  current_section = section_id;
}

function showPage(container_id, num) {
  var container = document.getElementById(container_id);
  var container_nav = document.getElementById(container_id + "_nav");
  var children = container.childNodes;
  var nav_children = container_nav.childNodes;
  var num_pages = 0;
  for (var i=0; i < children.length; i++) {
    var child = children[i];
    if (child.className == "page") {
      num_pages++;
      if (num_pages == num) { 
        child.style.display = "block";
      } else {
        child.style.display = "none";
      }
    }
  }
  num_pages = 0;
  for (var i=0; i < nav_children.length; i++) {
   var child = nav_children[i];
   if ((child.className == "page_navitem") ||
       (child.className == "page_navitem selected_page_navitem")) {
      num_pages++;
      if (num_pages == num) { 
        child.className = "page_navitem selected_page_navitem";
      } else {
        child.className = "page_navitem";
      }
    }
  }
}