// Display.js, 11/02 - 11/09, J. MacKenzie.

// Used by Hats.htm.
// See changes.txt for change list.

/*
function Startup() - called by onload event in Hats.htm; 
                     SETS which category of hats is displayed initially; 
                     calls CreateSlideshowArray(); 
                     calls CategoryChange().

function CategoryChange() - called by drop-down list in Hats.htm; 
                            gets the selected category index; 
                            SETS the file names (hats) for each category; 
                            calls DisplayThumbs().
   
function DisplayThumbs() - displays the thumbnails and central hat for a given category; 
                           sets window.onload = PreloadImages().

function PreloadImages() - preloads larger hat images.

function Display(hat) - called by onmouseover events in Hats.htm;
                        displays the chosen hat; 
                        adds selected hat to HatArray.

function TraverseHatArray(direction) - called by onclick events in Hats.htm; 
                                       traverses previously selected hats.

Slide Show:
function CreateSlideshowArray() - SETS the model file names for the slide show.

function ToggleSlideshow() - initially called by SlideButton in Hats.htm; 
                             also called by some of the above functions; 
                             toggles slide show off/on; 
                             calls DisplaySlideshow().

function DisplaySlideshow() - called by itself; 
                              displays the slide show in an infinite loop.
*/

// **********************************************************************************************************************

// Whether the slide show is running.
var slideshowRunning = new Boolean(false);

var hatDir;

// The names of the hats for a given category are set in these var's by CategoryChange(). 
// Note that hat names can contain spaces but the file names of the corresponding images shouldn't contain spaces. 
// DisplayThumbs() & Display(hat) contain code to match the two.
var Hat1;
var Hat2;
var Hat3;
var Hat4;
var Hat5;
var Hat6;
var Hat7;
var Hat8;

// Used to preload large hat images.
var ImageArray = new Array(8);

// Used to preload slide show images.
var Slideshow = new Array();

// Arrays and indices for previous/next hat scrolling.
var HatNameArray = new Array();
var SrcArray = new Array();
var MultiDimArray = [HatNameArray, SrcArray];
var ArrayIndex = 0;
var TraverseIndex = 0;

// Sets which category of hats is displayed initially; creates array to preload images.
function Startup()
{
   // Initial hats to display.  Corresponds to index of category drop-down box.
   // Starts at zero.  See CategoryChange() for values.
   var initialCategory = 5;
   
   if(document.getElementById)  // Standard.
   {
      document.getElementById('Category').selectedIndex = initialCategory;
   }
   else if(document.all)        // IE4, Opera6.
   {
      document.all['Category'].selectedIndex = initialCategory;
   }
   else {}                      // Ignore everything else.
   
   // Create arrays for preloaded images.
   for(var i = 0; i < ImageArray.length ; i++)
   {
      ImageArray[i] = new Image();
   }
   
   // Set the model file names for the slide show.
   CreateSlideshowArray(); 

   // Display intial hats;
   CategoryChange();
}


// ******** CategoryChange **********************************************************************************************

// Change the thumbnails and central hat when a different category is chosen.
function CategoryChange()
{
   // Stop slide show if running.
   if (slideshowRunning == true)
   {
      ToggleSlideshow();
   }
   
   var categorySelected;
   
   if (document.getElementById)
   {
      categorySelected = document.getElementById('Category').selectedIndex;
      document.getElementById('HatName').childNodes[0].replaceData(0, 30, " ");
      document.getElementById('HatImage').alt = "";
   }
   else if (document.all)
   {
      categorySelected = document.all['Category'].selectedIndex.value;
      document.all['HatName'].innerHTML = "&nbsp;";
      document.all['HatImage'].alt = "";
   }
   else if (document.layers)
   {
      var formSelect = document.Form1.Category;
      categorySelected = formSelect.options[formSelect.selectedIndex].value;
   }
   else {}
   
   if(categorySelected == 0)        // Bridal
   {
      hatDir = "Images/Bridal/";
      categoryHat = "Bridals.jpg"
      Hat1 = "Olga";
      Hat2 = "JulieB";
      Hat3 = "Gay";
      Hat4 = "Lace Cowboy";
      Hat5 = "Cynthia";
      Hat6 = "Sherry";
      Hat7 = "Functional Confection";
      Hat8 = "Rose Pillbox";
   }
   else if(categorySelected == 1)   // Cocktail
   {
      hatDir = "Images/Cocktail/";
      categoryHat = "Cocktails.jpg"
      Hat1 = "Sally";
      Hat2 = "Frankie";
      Hat3 = "Seme";
      Hat4 = "Poppy Fascinator";
      Hat5 = "Iris And Orchid";
      Hat6 = "Simone";
      Hat7 = "Odile";
      Hat8 = "Spring";
   }
   else if(categorySelected == 2)   // Fall Felts
   {
      hatDir = "Images/FallFelts/";
      categoryHat = "FallFelts.jpg"
      Hat1 = "Mae";
      Hat2 = "Ivan";
      Hat3 = "Babs";
      Hat4 = "Ms Derby";
      Hat5 = "Kenna";
      Hat6 = "Edith";
      Hat7 = "Yvonne";
      Hat8 = "Frances";
   }
   else if(categorySelected == 3)   // Fall Soft
   {
      hatDir = "Images/FallSoft/";
      categoryHat = "FallSofts.jpg"
      Hat1 = "Gracie";
      Hat2 = "Ohara";
      Hat3 = "Ms Hall";
      Hat4 = "Albert";
      Hat5 = "Henry";
      Hat6 = "Moira";
      Hat7 = "Joanie";
      Hat8 = "Mildred";
   }
   else if(categorySelected == 4)   // Mens
   {
      hatDir = "Images/Mens/";
      categoryHat = "Mens.jpg"
      Hat1 = "Ace";
      Hat2 = "Bachelor";
      Hat3 = "Patrick";
      Hat4 = "Bachelor Buttons";
      Hat5 = "Grey Fedora";
      Hat6 = "Outdoors Person";
      Hat7 = "Charles";
      Hat8 = "Zeke";
   }
   else if(categorySelected == 5)   // Metal
   {
      hatDir = "Images/Metal/";
      categoryHat = "Metals.jpg"
      Hat1 = "Bijoux";
      Hat2 = "Map Of An Oil Field";
      Hat3 = "Bronze Standing";
      Hat4 = "Copper Origami";
      Hat5 = "Head Button";
      Hat6 = "Maya";
      Hat7 = "Party Pill";
      Hat8 = "Pleated Stainless";
   }
   else if(categorySelected == 6)   // Resort
   {
      hatDir = "Images/Resort/";
      categoryHat = "Resorts.jpg"
      Hat1 = "Vera";
      Hat2 = "Gemma";
      Hat3 = "Paulina";
      Hat4 = "Estes";
      Hat5 = "Vivian";
      Hat6 = "Layla";
      Hat7 = "Twix";
      Hat8 = "Viola";
   }
   else if(categorySelected == 7)   // Royal Ascot
   {
      hatDir = "Images/RoyalAscot/";
      categoryHat = "RoyalAscots.jpg"
      Hat1 = "Kara";
      Hat2 = "Alice";
      Hat3 = "Charlotte";
      Hat4 = "Allegra";
      Hat5 = "Greta";
      Hat6 = "White Roses";
      Hat7 = "White Nellie";
      Hat8 = "Yvodne";
   }
   else if(categorySelected == 8)   // Wearable Art
   {
      hatDir = "Images/WearableArt/";
      categoryHat = "WearableArts.jpg"
      Hat1 = "Potential For Life";
      Hat2 = "Climate Change";
      Hat3 = "Source Of Life";
      Hat4 = "My Derrick";
      Hat5 = "Its A Girl";
      Hat6 = "Tracks Through A Minefield";
      Hat7 = "Porch Party";
      Hat8 = "Mortar Blast To A Hero";
   }
   else if(categorySelected == 9)   // Woven 1
   {
      hatDir = "Images/Woven1/";
      categoryHat = "Woven1s.jpg"
      Hat1 = "Aves";
      Hat2 = "Celeste";
      Hat3 = "Braided Beret";
      Hat4 = "Woven Ivan";
      Hat5 = "Woven Lucille";
      Hat6 = "Hattengin";
      Hat7 = "Woven Pill";
      Hat8 = "Woven Top Hat";
   }
   else if(categorySelected == 10)   // Woven 2
   {
      hatDir = "Images/Woven2/";
      categoryHat = "Woven2s.jpg";
      Hat1 = "Billie";
      Hat2 = "Silk Corporal";
      Hat3 = "Gene";
      Hat4 = "Justice";
      Hat5 = "Spectator With Poppy";
      Hat6 = "Melissa";
      Hat7 = "Bobbie";
      Hat8 = "Liberty";
   }
   
   document.HatImage.src = hatDir + categoryHat;
   
   DisplayThumbs();
}

// Display the thumbnails then preload larger images.
function DisplayThumbs()
{
   var imageNumber;
   var hatNumber;
   var i;
   
   // Display thumbs.
   for(var i = 1; i <= ImageArray.length; i++) 
   {
      hatNumber = eval("Hat" + i);
      
      imageNumber = eval('document.Image' + i);
      // Remove spaces in hat name to match corresponding image file name.
      imageNumber.src   = hatDir + "Thumb_" + hatNumber.replace(/ /g, "") + ".jpg";
      imageNumber.alt   = hatNumber;
      imageNumber.title = hatNumber; // Standard.
   }
   
   // Wait for all thumbs to load then preload corresponding hat images.
   //window.onload = 
   PreloadImages();
}

// Preloads hat images.
function PreloadImages()
{
   // Preload large images.
   for(var i = 1; i <= ImageArray.length; i++)
   {
      // Array index starts at 0 while hat numbers start at 1.
      ImageArray[i - 1].src = hatDir + (eval("Hat" + i)).replace(/ /g, "") + ".jpg";
   }
}

// Display the chosen hat.
function Display(hat)
{
   // Stop slide show if running.
   if ( slideshowRunning == true )
   {
      ToggleSlideshow();
   }
   
   // Remove spaces in hat name to match corresponding image file name.
   var source = hatDir + hat.replace(/ /g, "") + ".jpg";
   document.HatImage.src = source;
   
   if(document.getElementById)   // Standard.
   {
      document.getElementById('SlideButton').focus();
      document.getElementById('SlideButton').blur();
      document.getElementById('HatName').childNodes[0].replaceData(0, 30, hat);
      document.getElementById('HatImage').alt = hat;
   }
   else if(document.all)         // IE4.
   {
      document.all['SlideButton'].focus();
      document.all['SlideButton'].blur();
      document.all['HatName'].innerHTML = hat;
      document.all['HatImage'].alt = hat;
   }
   else {}
   
   TraverseIndex = ArrayIndex;
   if( TraverseIndex >= 1 )
   {
      document.LArrow.src = "Images/LeftArrow.jpg";
   }
   HatNameArray[ArrayIndex] = hat;
   SrcArray[ArrayIndex++] = source;
}

// Provide forward-backward access to previously selected hats.
function TraverseHatArray(direction)
{
   // Stop slide show if running.
   if ( slideshowRunning == true )
   {
      ToggleSlideshow();
   }
   
   var logicPath = 0;
   if( (direction == "prev") && (TraverseIndex > 0) )
   {
      document.HatImage.src = MultiDimArray[1][--TraverseIndex];
   }
   else if( (direction == "next") && (TraverseIndex < ArrayIndex - 1) )
   {
      document.HatImage.src = MultiDimArray[1][++TraverseIndex];
   }
   else
   {
      logicPath = 1;
   }
   
   if( logicPath == 0 )
   {
      document.getElementById('HatName').childNodes[0].replaceData(0, 30, MultiDimArray[0][TraverseIndex]);
      document.getElementById('HatImage').alt = MultiDimArray[0][TraverseIndex];
   }
   
   // Grey out arrows at ends of array.
   if( TraverseIndex == 0 )
   {
      document.LArrow.src = "Images/LeftArrow_Grey.jpg";
   }
   else
   {
      document.LArrow.src = "Images/LeftArrow.jpg";
   }
   
   if( TraverseIndex >= ArrayIndex - 1 )
   {
      document.RArrow.src = "Images/RightArrow_Grey.jpg";
   }
   else
   {
      document.RArrow.src = "Images/RightArrow.jpg";
   }
}


// ******** Model Slide Show **********************************************************************************************

// Sets the model file names for the slide show.
var slideshowNumber = 32;
function CreateSlideshowArray()
{
   var modelDirectory = "Images/Models/";
   Slideshow[0]  = modelDirectory + "Kristen86.jpg";
   Slideshow[1]  = modelDirectory + "FanOnKristen.jpg";
   Slideshow[2]  = modelDirectory + "Ascots1.jpg";
   Slideshow[3]  = modelDirectory + "WearableArt.jpg";
   Slideshow[4]  = modelDirectory + "Bridals.jpg";
   Slideshow[5]  = modelDirectory + "ItalianIceOnKristen.jpg";
   Slideshow[6]  = modelDirectory + "Cocktails.jpg";
   Slideshow[7]  = modelDirectory + "Vogue.jpg";
   Slideshow[8]  = modelDirectory + "FunctionalConfection.jpg";
   Slideshow[9]  = modelDirectory + "Fon.jpg";
   Slideshow[10] = modelDirectory + "MetalCocktails.jpg";
   Slideshow[11] = modelDirectory + "MensWear.jpg";
   Slideshow[12] = modelDirectory + "AD3.jpg";
   Slideshow[13] = modelDirectory + "Resort.jpg";
   Slideshow[14] = modelDirectory + "Ascots2.jpg";
   Slideshow[15] = modelDirectory + "LavinaOnKristen.jpg";
   Slideshow[16] = modelDirectory + "Woven1.jpg";
   Slideshow[17] = modelDirectory + "Woven2.jpg";
   Slideshow[18] = modelDirectory + "Helen3.jpg";
   Slideshow[19] = modelDirectory + "StandingHat.jpg";
   Slideshow[20] = modelDirectory + "Kristen28.jpg";
   Slideshow[21] = modelDirectory + "SpectatorWithPoppy.jpg";
   Slideshow[22] = modelDirectory + "OlgaAndPierro.jpg";
   Slideshow[23] = modelDirectory + "TeresaInPleatedStraw.jpg";
   Slideshow[24] = modelDirectory + "Ascots3.jpg";
   Slideshow[25] = modelDirectory + "SpringGreenOnKristen.jpg";
   Slideshow[26] = modelDirectory + "Vogue_CloseUp.jpg";
   Slideshow[27] = modelDirectory + "Gigi.jpg";
   Slideshow[28] = modelDirectory + "TracksThroughMinefield.jpg";
   Slideshow[29] = modelDirectory + "VivianOnKristen.jpg";
   Slideshow[30] = modelDirectory + "MyDerrick.jpg";
   Slideshow[31] = modelDirectory + "Katrina.jpg";
}

// Toggles slide show off/on.  Initially called by SlideButton in Hats.htm (at which time slideshowRunning is false).
function ToggleSlideshow()
{
   if ( slideshowRunning == false )
   {
      slideshowRunning = true;
      
      if (document.getElementById)
      {
         document.getElementById('HatName').childNodes[0].replaceData(0, 30, " ");
         document.getElementById('HatImage').alt = "";
      }
      else if (document.all)
      {
         document.all['HatName'].innerHTML = "&nbsp;";
         document.all['HatImage'].alt = "";
      }
      else {}
      
      document.getElementById('SlideButton').childNodes[0].replaceData(0, 30, "Click to Stop");
      DisplaySlideshow();
      //setTimeout("DisplaySlideshow()", 1000);
   }
   else
   {
      slideshowRunning = false;
      document.getElementById('SlideButton').childNodes[0].replaceData(0, 30, "Click for Model Slide Show");
   }
}

// Displays slide show in infinite loop.  Preload next image during timeout.
var SlideshowIndex = 0;
var tempImage  = new Image();
function DisplaySlideshow()
{
   if ( slideshowRunning == false ) return;
   
   document.HatImage.src = Slideshow[SlideshowIndex++];
   if ( SlideshowIndex == slideshowNumber ) SlideshowIndex = 0;
   setTimeout("DisplaySlideshow()", 2000);  // This function causes ~ 1 KB to be sent/received from the server each time it's called.
   
   // Preload next image during timeout.
   tempImage.src = Slideshow[SlideshowIndex];
}

// ****************************************************************************************************************************

// Hat Slide Show: shows hat pictures in order of occurrence on site.  Not in use; replaced with model slide show.
// Code deleted; see version previous to 2009.