/* This is the Swatches JS file that will (hopefully) be cross-store compatible.

   This script doesn't pre-cache images because if used properly the images won't be 
   large enough to require precaching that eats up peoples' browser cache.

   If you have any questions, please see Michael@CV3 */

// Array(s)

// I like to declare arrays in JS line by line.  It seems cleaner even though it takes a lot more room.
// You're free to compress this to 1 line or whatever suits your needs. Just keep it named arSwatches.
arSwatches = new Array();
// Declare individual product/category/etc arrays
arSwatches['932'] = new Array();
// Add swatches to each product array necessary
arSwatches['932'][0] = 'capri.jpg';
arSwatches['932'][1] = 'sky_blue.jpg';
arSwatches['932'][2] = 'pacific_blue.jpg';
arSwatches['932'][3] = 'royal_blue.jpg';
arSwatches['932'][4] = 'saphire_blue.jpg';
arSwatches['932'][5] = 'mediterranean_blue.jpg';
arSwatches['932'][6] = 'mediterranean_tweed.jpg';
arSwatches['932'][7] = 'ocean_blue.jpg';
arSwatches['932'][8] = 'marine_blue.jpg';
arSwatches['932'][9] = 'captain_navy.jpg';
arSwatches['932'][10] = 'navy.jpg';
arSwatches['932'][11] = 'spa.jpg';
arSwatches['932'][12] = 'aspen.jpg';
arSwatches['932'][13] = 'sea_spray.jpg';
arSwatches['932'][14] = 'fern.jpg';
arSwatches['932'][15] = 'erin_green.jpg';
arSwatches['932'][16] = 'sea_grass_green.jpg';
arSwatches['932'][17] = 'aquamarine.jpg';
arSwatches['932'][18] = 'turquoise.jpg';
arSwatches['932'][19] = 'persian_green.jpg';
arSwatches['932'][20] = 'perisan_tweed.jpg';
arSwatches['932'][21] = 'hemlock_tweed.jpg';
arSwatches['932'][22] = 'forest_green.jpg';
arSwatches['932'][23] = 'spruce.jpg';
arSwatches['932'][24] = 'alpine.jpg';
arSwatches['932'][25] = 'oyster.jpg';
arSwatches['932'][26] = 'linen.jpg';
arSwatches['932'][27] = 'wheat.jpg';
arSwatches['932'][28] = 'brass.jpg';
arSwatches['932'][29] = 'toast.jpg';
arSwatches['932'][30] = 'heather_beige.jpg';
arSwatches['932'][31] = 'mocha.jpg';
arSwatches['932'][32] = 'linen_tweed.jpg';
arSwatches['932'][33] = 'taupe.jpg';
arSwatches['932'][34] = 'salmon.jpg';
arSwatches['932'][35] = 'tan.jpg';
arSwatches['932'][36] = 'cocoa.jpg';
arSwatches['932'][37] = 'walnut_brown.jpg';
arSwatches['932'][38] = 'true_brown.jpg';
arSwatches['932'][39] = 'mahogany.jpg';
arSwatches['932'][40] = 'black_cherry.jpg';
arSwatches['932'][41] = 'dubonnet_tweed.jpg';
arSwatches['932'][42] = 'burgundy.jpg';
arSwatches['932'][43] = 'jockey_red.jpg';
arSwatches['932'][44] = 'logo_red.jpg';
arSwatches['932'][45] = 'coral.jpg';
arSwatches['932'][46] = 'terra_cotta.jpg';
arSwatches['932'][47] = 'tuscan.jpg';
arSwatches['932'][48] = 'orange.jpg';
arSwatches['932'][49] = 'sunflower_yellow.jpg';
arSwatches['932'][50] = 'buttercup.jpg';
arSwatches['932'][51] = 'natural.jpg';
arSwatches['932'][52] = 'silver.jpg';
arSwatches['932'][53] = 'cadet_grey.jpg';
arSwatches['932'][54] = 'charcoal_grey.jpg';
arSwatches['932'][55] = 'charcoal_tweed.jpg';
arSwatches['932'][56] = 'jet_black.jpg';
arSwatches['932'][57] = 'concord.jpg';
arSwatches['932'][58] = 'plum.jpg';

// Function(s)

// Grab Swatches
// id   = the ID of the category/product/or generic id
// type = [cat|prod|prodcat|etc] 
//         cat     - assumes the main image has an id of catImage
//         prod    - assumes the main image has an id of prodImage
//         prodcat - assumes each product image has an id of prodImage{$prod.prod_id} (for prod_detail_list)
//         etc     - assumes the image has an id of etcImage
function grabSwatches(id,type) {
  // Luckily javascript replaces the function call with the code written to the page
  // so as long as this code is called where enough room is available for the swatches
  // we're good.
  var cols = 12; // Number of columns the swatch table should have.  Rows will happen naturally.
  var wid  = 25; // Width of the swatches to be printed. Set to '' if you want to use auto-width.
  var table; // The start of our table variable, null by default.
  var arConvert = new Array(); // Because some images can be used more than once.
  // set up arConvert if any conversions of IDs are necessary.
  arConvert['937'] = '932';
  // Check if id needs to be converted. If so, convert it.
  if(typeof arConvert[id] != 'undefined') {
    id = arConvert[id];
  }
  // I'd love to avoid loops but it is necessary here.
  for(var i=0,n=arSwatches[id].length;i<n;i++) {
    if(table == null) { // Start the table
      table = '<table cellpadding="0" cellspacing="0" border="0">\n<tr>\n';
    }
    // Write the table row.
    var colMod = i % cols; // Grab the remainder to see if we need to end the row.
    if(colMod == 0) {
      table += '</tr>\n<tr>\n'; // Start a new row if we hit the end of the current row
    }
    // Figure out which type we're using and set the id appropriately for use in the swapImage function
    if(type == 'cat') {
      var imgId = 'catImage';
    } else if(type == 'prod') {
      var imgId = 'prodImage';
    } else if(type == 'prodcat') {
      var imgId = 'prodImage'+id;
    } else if(type == 'etcImage') {
      var imgId = 'etc';
    }
    // specify the path to the images
    var path = '/images/';
    // Write the cell data to the table
    table += '<td><img src="'+path+arSwatches[id][i]+'" width="'+wid+'" alt="" ';
    table += 'onMouseOver="javascript: swapImage(\''+id+'\',\''+imgId+'\',\''+arSwatches[id][i]+'\');" /></td>\n';
  }
  // Finish the table
  table += '</tr>\n</table>\n';
  // Finally, write the table
  document.write(table);
}

// swapImage
// id      = the id of the product or category
// docId   = the document id of the image element to be changed (ex. <img src="..." id="prodImage" />)
// imgName = the filename of the swatch 
//           (which should have the same name as the main image, but without the ID)
// This function should be very, very simplistic.
function swapImage(id,docId,imgName) {
  var path  = '/images/'; // Path to the images used for the swapping
  var delim = '_'; // Delimiter that separates the id in the image from the rest of the image name
  var arConvert = new Array(); // Because some images can be used more than once.
  // set up arConvert if any conversions of IDs are necessary.
  arConvert['937'] = '932';
  // Check if id needs to be converted. If so, convert it.
  if(typeof arConvert[id] != 'undefined') {
    id = arConvert[id];
  }
  // Swap the image to whatever new image we have.
  document.getElementById(docId).src = path+id+delim+imgName;
}