// ***********************************
// *                                 *
// *  Clifford CardMaker Theme Setup *
// *                                 *
// ***********************************
//
// The themeName of each theme followed by an underscore is used as the prefix for all of 
// that theme's images.  
//
// The name of the image used for the *cover* of each theme's card (without the .gif extension) 
// will be the "themeName_" prefix followed by the word "cover". 
//
// In the example naming scheme, the themeNames are numbered "theme1" through "theme6", 
// so the first Theme will require three "cover" images:
// 1. a cover preview image named "theme1_cover.gif", 
// 2. a thumbnail of the cover named "theme1_cover-small.gif", and
// 3. a print version, used for the actual card, named "theme1_cover-print.gif"
// 
// In addition to the cover images, each theme also needs three "Inside Design" images, named 
// with "design1", "design2" and "design3" appended to the themName in the example), and each 
// of these inside design images also need their own -small, and -print versions, 
// giving us, for *each* theme, a total of 9 "design" images:
// 1. three "inside design" preview images (named theme1_design1.gif, theme1_design2.gif, theme1_design3.gif) 
// 2. three "inside design" thumbnails (theme1_design1-small.gif, theme1_design2-small, etc.) 
// 3. and three "inside design" print images theme1_design1-print, and so on) 
//
// Similarly, each theme needs three "greeting" images: (greeting1, greeting2 and greeting3, here), for a 
// total of nine more images per theme:
// 1. three "inside greeting" preview images (named theme1_greeting1.gif, theme1_greeting2.gif, ...) 
// 2. three "inside greeting" thumbnails (theme1_greeting1-small.gif, theme1_greeting2-small, ...) 
// 3. and three "inside greeting" print images theme1_design1-print, and so on.) 
//
// Notes: 
//
//   I. The "-print" versions of the Design and Greeting images need to be upside-down, for the 
//      foldable printout page.  
//
//  II. All themes specify the image: all_back.gif for the back of the card, but they could be customized too.
//
// III. The application also needs blank (but appropriately sized) placeholder images for the:
//      1. cover theme preview (before it has been selected) 
//      2. inside design (before it has been selected), and 
//      3. inside greeting (before it has been selected) 
//      These point to the same blank image in the example, but can be customized to display instructions, 
//      a helpful animated avatar or a talking paperclip (or not).

// where the theme and other images live 
var baseURL = {
  themes : "themes2/", 
  images : "images/"
};

// image extension
var imageExtension = ".gif";

// placeholder preview blanks
var blankCover    = "blank_preview";
var blankDesign   = "blank_preview";
var blankGreeting = "blank_preview";

// enabled/disabled next buttons
var nextButton = {
    Theme     : { enabled: "next.gif", disabled: "next_not.gif" },
    Design    : { enabled: "next.gif", disabled: "next_not.gif" },
    Greeting  : { enabled: "next.gif", disabled: "next_not.gif" },
    Default   : "pixel.gif"
};

var cardTheme = new Object;

cardTheme["one_cover"]  = {
    Design    : [ "one_design1",   "one_design2",   "one_design3"   ], 
    Greeting  : [ "one_greeting1", "one_greeting2", "one_greeting3" ],
    Back      : "all_back"
}; 

cardTheme["two_cover"]  = {
    Design    : [ "two_design1",   "two_design2",   "two_design3"   ], 
    Greeting  : [ "two_greeting1", "two_greeting2", "two_greeting3" ],
    Back      : "all_back"
}; 

cardTheme["three_cover"]  = {
    Design    : [ "three_design1",   "three_design2",   "three_design3"   ], 
    Greeting  : [ "three_greeting1", "three_greeting2", "three_greeting3" ],
    Back      : "all_back"
}; 
  
cardTheme["four_cover"]  = {
    Design    : [ "four_design1",   "four_design2",   "four_design3"   ], 
    Greeting  : [ "four_greeting1", "four_greeting2", "four_greeting3" ],
    Back      : "all_back"
}; 




/***********************************/
/*                                 */
/*  Clifford CardMaker Functions   */
/*                                 */
/***********************************/

function loadThemes() {
  // populate theme thumbnail names and source-urls from the cardTheme object
  var thumbNum=0;
  for (var themeName in cardTheme) {
    thumbNum++;
    var thumbElement = document.getElementById('thumb' + thumbNum);
    thumbElement.name = themeName;
    thumbElement.src = baseURL.themes + themeName + '-small' + imageExtension;
  }
  // populate big image source-url from cookie, if set (user pressed back button)
  var imageElement = document.getElementById('coverImage');
  var cardmaker2_cookie = new Cookie(document, 'cardmaker2_cookie');
  cardmaker2_cookie.load();
  if (cardmaker2_cookie.Theme) {
    imageElement.src = baseURL.themes + cardmaker2_cookie.Theme + imageExtension;
    enableNext('Theme');
  }
  else {
    imageElement.src = baseURL.themes + blankCover + imageExtension;
    disableNext('Theme');
  }
}

function selectTheme(themeName) {
  if (cardTheme[themeName]==null) return alert('Theme not found: ' + themeName);

  var cardmaker2_cookie = new Cookie(document, 'cardmaker2_cookie');
  cardmaker2_cookie.load();
  cardmaker2_cookie.Theme = themeName;
  // when a theme is seleccted, clear any Design and Greeting (in case they used the back button)
  cardmaker2_cookie.Design='';
  cardmaker2_cookie.Greeting='';
  
  cardmaker2_cookie.store();

  var imageElement = document.getElementById('coverImage');
  imageElement.src = baseURL.themes + themeName + imageExtension;
  enableNext('Theme');
}

function coverOk() {
  var cardmaker2_cookie = new Cookie(document, 'cardmaker2_cookie');
  cardmaker2_cookie.load();
  return cardmaker2_cookie.Theme ? true : false;
}

function enableNext(whichPage) {
  document.getElementById('next_button').src=baseURL.images + nextButton[whichPage].enabled;
}

function disableNext(whichPage) {
  document.getElementById('next_button').src=baseURL.images + nextButton[whichPage].disabled;
}

function loadDesigns() {
  // populate design thumbnail names and source-urls from the selected theme 
  var cardmaker2_cookie = new Cookie(document, 'cardmaker2_cookie');
  cardmaker2_cookie.load();

  var themeName = cardmaker2_cookie.Theme;
  if (themeName == null) return(history.back());

  var Theme = cardTheme[themeName];
  if (Theme == null) { // theme in cooke not found in cardTheme - delete it
    cardmaker2_cookie.remove();
    return alert('Unknown theme: ' + themeName + ' removed.  Try again.');
  }

  var Designs = cardTheme[themeName].Design;
  if (Designs == null) return alert('No designs found in theme: ' + themeName);

  for (var designNum=0; designNum < Designs.length; designNum++) {
    var thumbNum = designNum + 1;
    var designName = Designs[designNum];
    var thumbElement = document.getElementById('thumb' + thumbNum);
    thumbElement.name = designName;
    thumbElement.src = baseURL.themes + designName + '-small' + imageExtension;
  }
  // populate big image source-url from cookie, if set (user pressed back button)
  var imageElement = document.getElementById('designImage');
  var cardmaker2_cookie = new Cookie(document, 'cardmaker2_cookie');
  cardmaker2_cookie.load();
  if (cardmaker2_cookie.Design) {
    imageElement.src = baseURL.themes + cardmaker2_cookie.Design + imageExtension;
    enableNext('Design');
  }
  else {
    imageElement.src = baseURL.themes + blankDesign + imageExtension;
    disableNext('Design');
  }
}

function selectDesign(designName) {
  var cardmaker2_cookie = new Cookie(document, 'cardmaker2_cookie');
  cardmaker2_cookie.load();

  var themeName = cardmaker2_cookie.Theme;
  if (themeName == null) return alert('theme not set');

  if (cardTheme[themeName]==null) return alert('Theme not found: ' + themeName);
  var Designs = cardTheme[themeName].Design;
  if (Designs == null) return alert('Design key not found for Theme: ' + themeName);
  
  var foundDesign=0;
  for (var i=0; i < Designs.length; i++) if (Designs[i] == designName) foundDesign = 1;
  if (foundDesign != 1) return alert('Design named "' + designName + '" not found in Theme: ' + themeName);

  var cardmaker2_cookie = new Cookie(document, 'cardmaker2_cookie');
  cardmaker2_cookie.load();
  cardmaker2_cookie.Design = designName;
  cardmaker2_cookie.store();

  var imageElement = document.getElementById('designImage');
  imageElement.src = baseURL.themes + designName + imageExtension;
  enableNext('Design');
}

function designOk() {
  var cardmaker2_cookie = new Cookie(document, 'cardmaker2_cookie');
  cardmaker2_cookie.load();
  return cardmaker2_cookie.Design ? true : false;
}

function loadGreetings() {
  // populate greeting thumbnail names and source-urls from the selected theme 
  var cardmaker2_cookie = new Cookie(document, 'cardmaker2_cookie');
  cardmaker2_cookie.load();

  var themeName = cardmaker2_cookie.Theme;
  var designName = cardmaker2_cookie.Design;
  if (! themeName) return(history.back());
  if (! designName) return(history.back());

  var Theme = cardTheme[themeName];
  if (Theme == null) { // theme in cooke not found in cardTheme - delete it
    cardmaker2_cookie.remove();
    return alert('Unknown theme: ' + themeName + ' removed.  Try again.');
  }

  var Greetings = cardTheme[themeName].Greeting;
  if (Greetings == null) return alert('No greetings found in theme: ' + themeName);

  for (var greetingNum=0; greetingNum < Greetings.length; greetingNum++) {
    var thumbNum = greetingNum + 1;
    var greetingName = Greetings[greetingNum];
    var thumbElement = document.getElementById('thumb' + thumbNum);
    thumbElement.name = greetingName;
    thumbElement.src = baseURL.themes + greetingName + '-small' + imageExtension;
  }
  // populate big image source-url from cookie, if set (user pressed back button)
  var imageElement = document.getElementById('greetingImage');
  var cardmaker2_cookie = new Cookie(document, 'cardmaker2_cookie');
  cardmaker2_cookie.load();

  if (cardmaker2_cookie.Greeting) {
    imageElement.src = baseURL.themes + cardmaker2_cookie.Greeting + imageExtension;
    enableNext('Greeting');
  }
  else {
    imageElement.src = baseURL.themes + blankGreeting + imageExtension;
    disableNext('Greeting');
  }
}

function selectGreeting(greetingName) {
  var cardmaker2_cookie = new Cookie(document, 'cardmaker2_cookie');
  cardmaker2_cookie.load();

  var themeName = cardmaker2_cookie.Theme;
  if (themeName == null) return alert('theme not set');

  if (cardTheme[themeName]==null) return alert('Theme not found: ' + themeName);
  var Greetings = cardTheme[themeName].Greeting;
  if (Greetings == null) return alert('Greeting key not found for Theme: ' + themeName);
  
  var foundGreeting=0;
  for (var i=0; i < Greetings.length; i++) if (Greetings[i] == greetingName) foundGreeting = 1;
  if (foundGreeting != 1) return alert('Greeting named "' + greetingName + '" not found in Theme: ' + themeName);

  var cardmaker2_cookie = new Cookie(document, 'cardmaker2_cookie');
  cardmaker2_cookie.load();
  cardmaker2_cookie.Greeting = greetingName;
  cardmaker2_cookie.store();

  var imageElement = document.getElementById('greetingImage');
  imageElement.src = baseURL.themes + greetingName + imageExtension;
  enableNext('Greeting');
}

function greetingOk() {
  var cardmaker2_cookie = new Cookie(document, 'cardmaker2_cookie');
  cardmaker2_cookie.load();
  return cardmaker2_cookie.Greeting ? true : false;
}

function loadPrint() {
  // populate printout-page images from the cover, design and greeting images selected 
  var cardmaker2_cookie = new Cookie(document, 'cardmaker2_cookie');
  cardmaker2_cookie.load();
  var themeName = cardmaker2_cookie.Theme;
  var designName = cardmaker2_cookie.Design;
  var greetingName = cardmaker2_cookie.Greeting;
  if (! themeName) return(history.back());
  if (! designName) return(history.back());
  if (! greetingName) return(history.back());

  var coverElement = document.getElementById('coverPrint');
  coverElement.src = baseURL.themes + cardmaker2_cookie.Theme + '-print' + imageExtension;

  var designElement = document.getElementById('designPrint');
  designElement.src = baseURL.themes + cardmaker2_cookie.Design + '-print' + imageExtension;

  var greetingElement = document.getElementById('greetingPrint');
  greetingElement.src = baseURL.themes + cardmaker2_cookie.Greeting + '-print' + imageExtension;

  var backElement = document.getElementById('backPrint');
  backElement.src = baseURL.themes + cardTheme[themeName].Back + '-print' + imageExtension;
}

function ResetSelections() {
  var cardmaker2_cookie = new Cookie(document, 'cardmaker2_cookie');
  cardmaker2_cookie.remove();
}

// JavaScript Cookie class, adapted from "JavaScript: The Definitive Guide, 4th Edition" 
// by David Flanagan, from O'Reilly & Associates [http://www.oreilly.com/catalog/jscript4/]

function Cookie(document, name) {
    this.$document = document;
    this.$name = name;
}

Cookie.prototype.store = function () {
    var cookieval = "";
    for(var prop in this) {
        if ((prop.charAt(0) == '$') || ((typeof this[prop]) == 'function')) continue;
        if (cookieval != "") cookieval += '&';
        cookieval += prop + ':' + escape(this[prop]);
    }
    var cookie = this.$name + '=' + cookieval;
    this.$document.cookie = cookie;
}

Cookie.prototype.load = function() { 
    var allcookies = this.$document.cookie;
    if (allcookies == "") return false;
    var start = allcookies.indexOf(this.$name + '=');
    if (start == -1) return false;
    start += this.$name.length + 1;
    var end = allcookies.indexOf(';', start);
    if (end == -1) end = allcookies.length;
    var cookieval = allcookies.substring(start, end);
    var a = cookieval.split('&');
    for(var i=0; i < a.length; i++) a[i] = a[i].split(':');
    for(var i = 0; i < a.length; i++) this[a[i][0]] = unescape(a[i][1]);
    return true;
}

Cookie.prototype.remove = function() {
    var cookie;
    cookie = this.$name + '=';
    cookie += '; expires=Fri, 02-Jan-1970 00:00:00 GMT';
    this.$document.cookie = cookie;
}