/* ********************************************************************* **
* © Copyright 2008 EZ-NetTools. All rights reserved.
* File: gallery.js
* Author: Devin Roberts
* Notes: This is designed to be a plug and play javascript gallery.
** ********************************************************************* */

// page numbers 'before' the grid, 'after' the grid, or 'both'
var pageNumbersLoc;

// define max width and height for main image
var maxImageWidth;
var maxImageHeight;

// define max width and height for thumbnail images
var maxThumbnailWidth;
var maxThumbnailHeight;

// define thumbnail grid
var rows;
var columns;
var picsPerPage;

// onclick or onmouseover
var switchType;

// keep track of the current state
var currPage = 1;
var currCategory = 0;

// define category names, image names and paths
var categories;
var images;
var catPaths;
var thumbPaths;

// load the xml document
function loadXMLDoc(dname)
{
   // code for IE
   if (window.ActiveXObject)
   {
      xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
   }
   // code for Mozilla, Firefox, Opera, etc.
   else if (document.implementation && document.implementation.createDocument)
   {
      xmlDoc = document.implementation.createDocument("","",null);
   }
   // error
   else
   {
      alert('Your browser is not configured to handle the gallery script.');
   }

   xmlDoc.async = false;
   xmlDoc.load(dname);

   return(xmlDoc);
}

// switches the main picture to the one corresponding with the selected thumbnail
function loadPic(picNum)
{
   document.getElementById('galleryPic').style.width = "";
   document.getElementById('galleryPic').style.height = "";
   document.getElementById('galleryPic').src = catPaths[currCategory] + images[currCategory][picNum];

   document.getElementById('galleryPic').style.width = maxImageWidth;
   if (document.getElementById('galleryPic').height > maxImageHeight)
   {
      document.getElementById('galleryPic').style.height = maxImageHeight;
      document.getElementById('galleryPic').style.width = "";
   }
}

// load the page of thumbnails for the category
function loadPage(pageNum)
{
   if (pageNum >= 1 && pageNum < (((images[currCategory].length - 1) / picsPerPage) + 1))
   {
      if (images[currCategory].length >= picsPerPage)
         if (document.getElementById('page' + currPage + 'Link'))
            document.getElementById('page' + currPage + 'Link').className = "";
      var row;
      var col;
      for (row = 0; row < rows; row++)
      {
         for (col = 0; col < columns; col++)
         {
               var loc = (row * columns) + col;
               var i = ((pageNum - 1) * picsPerPage) + loc;
               var id = "grid" + loc;
               // if there is an image for the thumbnail location, load and show it
               // if not, hide the image
               if (i < images[currCategory].length)
               {
                  document.getElementById(id).style.width = "";
                  document.getElementById(id).style.height = "";
                  document.getElementById(id).src = thumbPaths[currCategory] + images[currCategory][i];
                  document.getElementById(id).number = i;
                  document.getElementById(id).className = "show";

                  document.getElementById(id).style.width = maxThumbnailWidth;
                  if (document.getElementById(id).height > maxThumbnailHeight)
                  {
                     document.getElementById(id).style.width = "";
                     document.getElementById(id).style.height = maxThumbnailHeight;
                  }
               }
               else
                  document.getElementById(id).className = "hide";
         }
      }
      currPage = pageNum;

      if (images[currCategory].length >= picsPerPage)
         if (document.getElementById('page' + currPage + 'Link'))
            document.getElementById('page' + currPage + 'Link').className = "selectedNum";
   }
}

// load the category's image set
function loadCategory(catNum)
{
   if (categories.length > 1)
   {
      document.getElementById(categories[currCategory]).className = "";
      currCategory = catNum;
      document.getElementById(categories[currCategory]).className = "selectedCat"; // for styling
   }
   
   // set the page numbers, 1st page grid and 1st picture for the category
   loadPageNums();
   loadPage(1);
   loadPic(0);
}

// load the page numbers for the category
function loadPageNums()
{
   var htmlCode = "";
   var i;

   if (images[currCategory].length >= picsPerPage)
   {
      htmlCode += "<span class='arrows'><a onclick='loadPage(1)'>|&lt;</a> <a onclick='loadPage(currPage - 1)'>&lt;&lt;</a></span>";
      htmlCode += "<span class='numbers'>";

      // one number for each page
      for (i = 1; i <= (Math.round(((images[currCategory].length - 1) / picsPerPage) - .5) + 1); i++)
      {
         htmlCode += "<a id='page" + i + "Link' onclick='loadPage(" + i + ")'>" + i + "</a>";
      }

      htmlCode += "</span>";

      htmlCode += "<span class='arrows'><a onclick='loadPage(currPage + 1)'>&gt;&gt;</a> <a onclick='loadPage(" + (Math.round(((images[currCategory].length - 1) / picsPerPage) - .5) + 1) + ")'>&gt;|</a></span>";
   }

   // set the page number in each existing location
   if (document.getElementById('pageNums1'))
      document.getElementById('pageNums1').innerHTML = htmlCode;
   if (document.getElementById('pageNums2'))
      document.getElementById('pageNums2').innerHTML = htmlCode;
}

// setup the main picture
function writePic()
{
   var htmlCode = "";
   htmlCode += "<table class='galleryView'><tr><td align='center'><img id='galleryPic' src='' /></td></tr></table>";
   return htmlCode;
}

// setup the thumbnail table and page numbers when loading the web page
function writeGrid()
{
   var htmlCode = "";
   gallery = images;

   // setup page navigation before grid
   if (pageNumbersLoc != "after")
   {
      htmlCode += "<div id='pageNums1' class='pageNums'></div>";
   }

   // setup the thumbnails table
   htmlCode += "<table cellspacing='0' cellpadding='0' class='galleryGrid'>";
   var row;
   var col;
   for (row = 0; row < rows; row++)
   {
      htmlCode += "<tr>";
      for (col = 0; col < columns; col++)
      {
         if ((row + 1) * (col + 1) <= picsPerPage)
            htmlCode += "<td class='gridCell' align='center'><img class='hide' " + "id='grid" + ((row * columns) + col) + "' " + switchType + "='loadPic(this.number);' number='' src='' /></td>";
      }
      htmlCode += "</tr>";
   }
   htmlCode += "</table>";

   // setup page navigation after grid
   if (pageNumbersLoc != "before")
   {
      htmlCode += "<div id='pageNums2' class='pageNums'></div>";
   }
   
   return htmlCode;
}

// setup the list of categories
function writeCategories()
{
   var htmlCode = "";
   
   if (categories.length > 1)
   {
      htmlCode += "<ul id='categories'>";
      
      var i;
      for (i = 0; i < categories.length; i++)
      {
         htmlCode += "<li><a id='" + categories[i] + "' onclick='loadCategory(" + i + ")'>" + categories[i] + "</a></li>";
      }
      
      htmlCode += "</ul>";
   }
   
   return htmlCode;
}

// setup the gallery with the specified layout
function writeGallery(file, catPos, loc, pos, m)
{
   // load the xml file
   loadXMLDoc(file);
   
   var g = xmlDoc.documentElement;
   var c = g.getElementsByTagName('category');

   categories = new Array();
   images = new Array();
   catPaths = new Array();
   thumbPaths = new Array();
   
   // get data from xml and parameters
   var i;
   var j;
   for (i = 0; i < c.length; i++)
   {
      images[i] = new Array();
      categories[i] = c[i].getAttribute('name');
      catPaths[i] = c[i].getAttribute('path');
      thumbPaths[i] = c[i].getAttribute('thumbs');

      for (j = 0; j < c[i].getElementsByTagName('image').length; j++)
      {
         images[i][j] = c[i].getElementsByTagName('image')[j].firstChild.nodeValue;
      }
   }
   pageNumbersLoc = loc;
   maxImageWidth = g.getAttribute('width');
   maxImageHeight = g.getAttribute('height');
   maxThumbnailWidth = g.getAttribute('tnWidth');
   maxThumbnailHeight = g.getAttribute('tnHeight');
   rows = g.getAttribute('rows');
   columns = g.getAttribute('columns');
   picsPerPage = rows * columns;
   switchType = m;

   // write the components of the gallery
   var htmlCode = "";
   htmlCode += "<table class='gallery'><tr>";
   if (catPos == "left")
      htmlCode += "<td valign='top'>" + writeCategories() + "</td>";
   htmlCode += "<td><table><tr><td align='center'>";
   if (pos == "top" || pos == "left")
      htmlCode += writePic();
   else
      htmlCode += writeGrid();
   htmlCode += "</td>";
   if (pos == "top" || pos == "bottom")
      htmlCode += "</tr><tr>";
   htmlCode += "<td align='center'>";
   if (pos == "top" || pos == "left")
      htmlCode += writeGrid();
   else
      htmlCode += writePic();
   htmlCode += "</td></tr></table></td>";
   if (catPos == "right")
      htmlCode += "<td valign='top'>" + writeCategories() + "</td>";
   htmlCode += "</tr></table>";
   
   // hide the images that are not part of the current page
   htmlCode += "<style type='text/css'> .show { display: inline; } .hide { display: none; } </style>";
   
   document.write(htmlCode);

   // initialize
   loadCategory(currCategory);
}