// ============================================================================================
//
// scripts.js -- JavaScript for the "Cribbage Boards by Lorne Mertick" website
//
// ============================================================================================
/*
This file contains all the necessary JavaScript to drive the afore-mentioned website. The main
functions of this file are to manage the browser windows of the full-size pictures, generate
HTML code for e-mail addresses and generate HTML code for & validate the order form.
*/
// ============================================================================================
// DESIGN NOTES
// ============================================================================================
/*
Each piece has been given a name to identify it. This name is used for thumbnail images,
full-size pictures, and browser windows -- for example, the name "boot" refers to
"thumbnails/boot.jpg", "images/boot.jpg", and (if ever created) a browser window named "boot"
that shows "images/boot.jpg".
To make things a little more confusing, each piece has also been given a title to identify it
to humans. These titles are not to be confused with names -- for example, one piece is named
"golfCourseDogLeg" and has the title "Golf Course - Dog Leg".
*/
// ============================================================================================
// GLOBAL VARIABLES
// ============================================================================================
var pictures = new Array(0); // array of all browser windows of full-size pictures of pieces
var at = "@"; // character code for "@" (for even more spam protection)
// ============================================================================================
// PRELOADED GRAPHICS MANAGEMENT
// ============================================================================================
var preloadedGraphics = new Array(1); // array of all pre-loaded graphics
preloadedGraphics[0] = new Image();
preloadedGraphics[0].src = "menuItemBackgroundHover.gif";
// ============================================================================================
// FUNCTION DEFINITIONS
// ============================================================================================
/*********************************************************************************************/
function showPicture
(
thumbnailElement // the thumbnail of the piece to show
)
// --------------------------------------------------------------------------------------------
/*
This function makes the browser window for the piece represented by "thumbnailElement" appear,
either by creating it or by bringing it into focus.
PRECONDITIONS:
"thumbnailElement" must be a valid document image element.
POSTCONDITIONS:
The user can see the full-size picture of "piece".
*/
// --------------------------------------------------------------------------------------------
{
/(\w*)\.\w*$/.exec(thumbnailElement.src);
var name = RegExp.$1;
/*
"pictures" (a global variable) is an array of browser windows. If the window "name" is in
"pictures" and isn't in a closed state then that means that it already exists and just needs
to be brought into focus; otherwise, the window has to be (re-)created.
*/
if (pictures[name] && !pictures[name].closed)
{
pictures[name].focus();
}
else
{
/*
"width" and "height" are arbitrary values for the size (in pixels) of the window. From
these values, though, the window is created in the centre of the screen.
*/
var width = 720;
var height = 480;
var leftPos = screen.width ? (screen.width - width ) / 2 : 50;
var topPos = screen.height ? (screen.height - height) / 2 : 50;
var settings = "width=" + width + ",height=" + height + ",top=" + topPos + ",left=" +
leftPos + ",scrollbars=1,location=0,directories=0,status=0,menubar=0," +
"toolbar=0,resizable=1";
pictures[name] = window.open("images/" + name + ".jpg", name, settings);
return;
}
}
/*********************************************************************************************/
function writeEmailAddress
(
userId, // userID portion of an e-mail address
domain // domain portion of an e-mail address
)
// --------------------------------------------------------------------------------------------
/*
This function is a defence against spam spiders. It writes an e-mail address hyperlink given a
userID and domain.
PRECONDITIONS:
"userId" and "domain" must be valid strings and be the two parts of a valid e-mail address.
POSTCONDITIONS:
The appropriate HTML code for the e-mail address hyperlink is placed directly in the document's
body.
*/
// --------------------------------------------------------------------------------------------
{
document.write("" + userId + at + domain +
"");
return;
}
/*********************************************************************************************/
function validateBudget
(
inputField // the field in a form to validate
)
// --------------------------------------------------------------------------------------------
/*
This function determines whether or not the value in "inputField" is a dollar amount or not.
To use this function, include the modifier "onChange='validateBudget(this)'" in the ""
tag.
PRECONDITIONS:
"inputField" is a valid "" field on a form.
POSTCONDITIONS:
If "inputField" is not a valid dollar amount then the user is admonished and given another
chance to enter a valid dollar amount.
*/
// --------------------------------------------------------------------------------------------
{
var NumberFormat = /^\$?\d+\.?\d{0,2}$/;
var isValid = NumberFormat.test(inputField.value);
if (!isValid)
{
window.alert("That's not a valid dollar amount!");
inputField.focus();
}
return;
}
/*********************************************************************************************/
function isOrderValid
(
orderForm // the Order Form to validate
)
// --------------------------------------------------------------------------------------------
/*
This function determines whether or not the Order Form is valid. Invalid forms are blocked
from being submitted.
To use this function, include the modifier "onClick='return isOrderValid(this.form)'" in the
"" tag.
PRECONDITIONS:
"orderForm" is a valid form.
POSTCONDITIONS:
This function will admonish the user if any required information is missing. It will return
"true" if everything looks good and "false" if something's not right.
*/
// --------------------------------------------------------------------------------------------
{
var canSubmit = true;
/*
This function is hard-coded to use specific field names. These names MUST match what's on
the HTML page or else this function will malfunction.
*/
if (orderForm.ShippingDestination.value == "")
{
window.alert("Please provide a shipping destination. It's important.")
canSubmit = false;
}
if (orderForm.Budget.value == "")
{
window.alert("Please provide an approximate budget amount. It's important.")
canSubmit = false;
}
if (canSubmit)
{
window.alert("Thank you for your interest in these Cribbage boards!\n\n" +
"The information that you've provided will now be relayed to your e-mail program and " +
"sent on from there.");
}
return canSubmit;
}
/*********************************************************************************************/
function writeOrderFormTag
(
userId, // userID portion of an e-mail address
domain, // domain portion of an e-mail address
subject // the subject to include in the message
)
// --------------------------------------------------------------------------------------------
/*
This function is a defence against spam spiders. It generates a "mailto" HTML "