// VARIABLES AND DATA
// For UpdateDisplay().
var displayStatus = {};  // New object
// For the following:
//   "active" means the item'sviewing area is displayed and its button is not a link.
//   "inactive" means the viewing area is not displayed and its button is a link.
// Assigned values reflect how page should appear when first loaded.
displayStatus.home = "active";
displayStatus.pastelsSlife = "inactive";
displayStatus.pastelsLscape = "inactive";
displayStatus.acrylicsSlife = "inactive";
displayStatus.acrylicsLscape = "inactive";
displayStatus.about = "inactive";
displayStatus.statement = "inactive";
displayStatus.awards = "inactive";
displayStatus.contact = "inactive";

var displayArea = "";
var displayBtnOff = "";

// For the art.
// The following must be true for the script to work correctly:
//   Thumbnail source names are built dynamicially to avoid text bloat, so:
//     All images are to be pngs and have the extension ".png".
//     All thumbnails are supposed to have the image name plus "_small". Example: JillSnow.png is original, JillSnow_small.png is thumbnail.
//   Each art category has its own array of data. Each has:
//     A separate variable for the path (to avoid text bloat).
//     An idBase property, which is the base name for the html ids where the thumbnails will be inserted.
//     1+ array entries with the data for each image.

// Pastels - Still Life
var pS = "media/pastelsSlife/";
var artPastelsSlife = [];
artPastelsSlife.idBase = "pastelsSlife";
artPastelsSlife[0] = {source: pS + "ParisianDuck.png", title: "Parisian Duck", dim: "12\"x16\"", thumb: "", artImage: new Image()};
artPastelsSlife[1] = {source: pS + "Strawberries.png", title: "Strawberries", dim: "12\"x12\"", thumb: "", artImage: new Image()};
artPastelsSlife[2] = {source: pS + "FivePears.png", title: "Five Pears", dim: "12\"x12\"", thumb: "", artImage: new Image()};
artPastelsSlife[3] = {source: pS + "Reflections.png", title: "Reflections", dim: "11\"x14\"", thumb: "", artImage: new Image()};
artPastelsSlife[4] = {source: pS + "OnTheShelf.png", title: "On the Shelf", dim: "9\"x18\"", thumb: "", artImage: new Image()};
BuildThumbSource(artPastelsSlife);

// Pastels - Landscapes
var pL = "media/pastelsLscape/";
var artPastelsLscape = [];
artPastelsLscape.idBase = "pastelsLscape";
artPastelsLscape[0] = {source: pL + "Storm.png", title: "Storm", dim: "11\"x14\"", thumb: "", artImage: new Image()};
artPastelsLscape[1] = {source: pL + "EarlySeptember.png", title: "Early September", dim: "9\"x9\"", thumb: "", artImage: new Image()};
artPastelsLscape[2] = {source: pL + "Vertigo.png", title: "Vertigo", dim: "16\"x16\"", thumb: "", artImage: new Image()};
artPastelsLscape[3] = {source: pL + "SaltMarsh.png", title: "Salt Marsh", dim: "12\"x16\"", thumb: "", artImage: new Image()};
artPastelsLscape[4] = {source: pL + "AlFresco.png", title: "Al Fresco", dim: "11.5\"x15.5\"", thumb: "", artImage: new Image()};
artPastelsLscape[5] = {source: pL + "FirstSnow.png", title: "First Snow", dim: "9\"x12\"", thumb: "", artImage: new Image()};
artPastelsLscape[6] = {source: pL + "EchoLakeTrail.png", title: "Echo Lake Trail ", dim: "12\"x12\"", thumb: "", artImage: new Image()};
artPastelsLscape[7] = {source: pL + "SeptemberSun.png", title: "September Sun", dim: "8\"x10\"", thumb: "", artImage: new Image()};
BuildThumbSource(artPastelsLscape);

// Acrylics - Still Life
var aS = "media/acrylicsSlife/";
var artAcrylicsSlife = [];
artAcrylicsSlife.idBase = "acrylicsSlife";
artAcrylicsSlife[0] = {source: aS + "AllMyChickens.png", title: "All My Chickens", dim: "18\"x18\"", artImage: new Image()};
artAcrylicsSlife[1] = {source: aS + "OffWithTheirHeads.png", title: "Off with Their Heads", dim: "18\"x18\"", artImage: new Image()};
artAcrylicsSlife[2] = {source: aS + "JimsReel.png", title: "Jim’s Reel", dim: "16\"x20\"", artImage: new Image()};
artAcrylicsSlife[3] = {source: aS + "OneDollarTeapot.png", title: "$1 Teapot", dim: "16\"x20\"", artImage: new Image()};
BuildThumbSource(artAcrylicsSlife);

// Acrylics - Landscapes
var aL = "media/acrylicsLscape/";
var artAcrylicsLscape = [];
artAcrylicsLscape.idBase = "acrylicsLscape";
artAcrylicsLscape[0] = {source: aL + "JillSnow.png", title: "Jill Snow", dim: "12\"x12\"", artImage: new Image()};
artAcrylicsLscape[1] = {source: aL + "CodmanFarm.png", title: "Codman Farm", dim: "9\"x18\"", artImage: new Image()};
BuildThumbSource(artAcrylicsLscape);

// Variables for OpenSlideshow(). 
var currentArtType;
var nextIndex;
var prevIndex;


// FUNCTIONALITY
// Build the thumbnail source names from the image source strings.
function BuildThumbSource(artDataArray) {
  var index;
  for (index = 0; index < artDataArray.length; index++) {
    artDataArray[index].thumb = artDataArray[index].source;
    artDataArray[index].thumb = artDataArray[index].thumb.replace(".png","_small.png");
  }
}

// Set up things once the document is loaded. 
$(document).ready(function() {
  UpdateDisplay('home');
  LoadThumbnails();
  //LoadArtIntoBrowserCache();
}); 

// Update the page display and navigation settings.
function UpdateDisplay(activate) {
  if (!document.getElementById) {
    return;
  }

  for (key in displayStatus) {
    if (key == activate) {
      displayArea = activate + "Area";
      displayBtnOff = activate + "BtnOff";
      document.getElementById(displayArea).style.display = "block";
      document.getElementById(displayBtnOff).style.display = "block";
      displayStatus[key] = "active";
    } else if (displayStatus[key] == "active") {
      displayArea = key + "Area";
      displayBtnOff = key + "BtnOff";
      document.getElementById(displayArea).style.display = "none";
      document.getElementById(displayBtnOff).style.display = "none";
      displayStatus[key] = "inactive";
    }
  }
}

// Load the thumbnail images when the page is loaded. These are not visible when the 
// initial page loads and so can be laoded later, to speed up the initial page download.
function LoadThumbnails() {
  LoadThumbnailsByCategory(artPastelsSlife);
  LoadThumbnailsByCategory(artPastelsLscape);
  LoadThumbnailsByCategory(artAcrylicsSlife);
  LoadThumbnailsByCategory(artAcrylicsLscape);

  function LoadThumbnailsByCategory(artArray) {
    var index;
    var elementId = "";
    var elementIdBase = artArray.idBase;
    for (index = 0; index < artArray.length; index++) {
      elementId = elementIdBase + index.toString();
      document.getElementById(elementId).innerHTML = '<img src="' + artArray[index].thumb
      + '" alt="' + artArray[index].title + '"><br>' + artArray[index].title;
    }
  }
}

// Load the art images into the browser's cache. If the user clicks a thumbnail to view 
// an image, it will display much quicker than if it is already in cache.
function LoadArtIntoBrowserCache() {
  LoadArtByCategory(artPastelsSlife);
  LoadArtByCategory(artPastelsLscape);
  LoadArtByCategory(artAcrylicsSlife);
  LoadArtByCategory(artAcrylicsLscape);

  function LoadArtByCategory(artArray) {
    var index;
    for (index = 0; index < artArray.length; index++) {
      artArray[index].artImage.src = artArray[index].source;
    }
  }
}

// Control the slide show for the images.
function OpenSlideshow(artType, index, statusShow) {
    	console.log(artType + " "+ index + " " + statusShow);
  var artObject = this[artType][index];
  currentArtType = artType;  // Used in the html for JS calls in the Next/Previous buttons in the slide show.
  if (index === 0) {
    nextIndex = index + 1;
    prevIndex = this[artType].length - 1;
  } else if (index === this[artType].length-1) {
    nextIndex = 0;
    prevIndex = index - 1;
  } else {
    nextIndex = index + 1;
    prevIndex = index - 1;
  }
  if (statusShow === "curShow") {
    $("#controlsSlides, #artToDisplay").fadeOut("slow",function() {
      document.getElementById('artToDisplay').innerHTML = '<p class="ver16 marTop15 ctr"><img src="' + artObject.source + '" alt="' 
      + artObject.title + '"><br>' + artObject.title + ' <span class="ver10">' + artObject.dim + '</span></p>';
      document.getElementById('artSlides').style.display = "block";
    $("#artToDisplay, #controlsSlides").fadeIn("slow");
    });
  } else {
    	console.log("newShow branch, statusShow is "+ statusShow);
      document.getElementById('artToDisplay').innerHTML = '<p class="ver16 marTop15 ctr"><img src="' + artObject.source + '" alt="' 
      + artObject.title + '"><br>' + artObject.title + ' <span class="ver10">' + artObject.dim + '</span></p>';
      document.getElementById('artSlides').style.display = "block";
  }
}

function CloseSlideshow() {
  document.getElementById('artSlides').style.display = "none";
}