Friday April 8 2011

//create array of product names
var productNames = [];
productNames[0] = "C64 Computer";
productNames[1] = "C64 Monitor";
productNames[2] = "C64 Disk Drive";
productNames[3] = "C64 Mouse";
productNames[4] = "C64 Printer";

var productPrices = [];
productPrices[0] = 719.99;
productPrices[1] = 429.99;
productPrices[2] = 299.99;
productPrices[3] = 49.99;
productPrices[4] = 349.99;

var checkCounter = 0;

var urlString = "?";


function activate(number) {
var name = "num" + number;
makeVisible(name, 1);
calculateTotal();
}

function makeVisible(name, number) {
//http://www.bennadel.com/blog/142-Ask-Ben-Javascript-String-Replace-Method.htm
checkCounter = checkCounter + 1;
var chkName = "check" + name.replace( "num", "" )
var chkBox = document.getElementById(chkName);
var target = document.getElementById(name);
target.className = "notInvisible";
if (number==1) {
target.value = 1;
}
// be sure to use == rather than = !!!!!!!!!!!!!!!!!!!!!!!!! spent twenty minutes on that
if (chkBox.checked == false) {
target.className = "invisble";
target.value = "";
}
}

// had to take this out of calculateTotal so I could reuse it on the next page
function displayTotalString(numTotal) {
var totalCost = document.getElementById("totalSpan");
countTotal = "$" + numTotal;
var totalCostText = document.createTextNode(countTotal);
//i should find a way to turn this into a function
if (totalCost.hasChildNodes()){
totalCost.removeChild(totalCost.lastChild);
}
totalCost.appendChild(totalCostText);
}

//calculate the total for display on the two pages
function calculateTotal(){
//check to see if anything has been selected, if so, enable the submit button
var enableButtonCounter = 0;
var numTotal = 0;
for (i=1; i<6; i++) {
var num = "num" + i;
var numField = document.getElementById(num).value;
if (numField > 0) {
enableButtonCounter += 1;
var price = productPrices[i-1];
numTotal += (numField * price);
}
displayTotalString(numTotal);
}

var subButton = document.getElementById("submitButton" );
if (enableButtonCounter > 0) {
subButton.disabled=false;
} else {
subButton.disabled=true;
}
} //end function calculate total

//create an object for items for sale
function item(id, cost) {

this.id = id;
this.divID = "div" + id;
this.cost = cost;
this.image = "images/product_" + id + ".jpg";


//diplay the product
this.display = function() {
var longName = productNames[this.id - 1];
this.createDiv();
this.createImage();
this.createText(longName);
//I was going to create a purchase button here but it dynamic event handlers are not really supported (whoops!) and window.event is not supported in Firefox, and that was my last option!
//if i could establish sessions / cookies I could get it to work
//this.createButton();
}

//note to self: only put parenthesis infront of the function keyword, not the this.createDIV part
this.createDiv = function() {
var productHolder = document.getElementById("products");
var divName = document.createElement("div");
var idID= this.divID;
divName.setAttribute('id', idID);
divName .className = "productDIV";
productHolder.appendChild(divName );
}


this.createImage = function() {
//http://www.hotscripts.com/forums/javascript/45658-solved-can-you-use-variable-getelementbyid.html
var divHolder = document.getElementById(this.divID);
var imageHolder = document.createElement("img");
//className assign class to the element
imageHolder.className = "productImage";
imageHolder.id = "id" + this.id;
imageHolder.src = this.image;
divHolder.appendChild(imageHolder);
}

this.createText = function(longName) {
var divHolder = document.getElementById(this.divID);
var newP = document.createElement("p");
var textName = document.createTextNode(longName);
var textCost = "$" + this.cost;
var textPrice = document.createTextNode(textCost);
var textBreak= document.createElement("br");
newP.appendChild(textName);
newP.appendChild(textBreak);
newP.appendChild(textPrice);
divHolder.appendChild(newP);
}



}

//productNames, productPrices
//get subtrings from query string
var basicString = "";
var arrayHolder = [];
var totalTotal = 0;

function getQueryString() {
//basicString = window.location.search.substring(1);
//alert(basicString);
basicString = window.location.search;
basicString = basicString.substring(1);
array1 = basicString.split("&");
for (i=0; iarray2 = array1[i].split("=");
if (!isNaN(array2[1])){
arrayHolder.push(array2[1]);
}

}

}

function displayResults(){
for (i=0; iif (arrayHolder[i] != 0) {
buildDisplay(productNames[i], productPrices[i], arrayHolder[i]);
var subTotal = productPrices[i] * arrayHolder[i];
totalTotal += subTotal;
}
}
displayTotalString(totalTotal);
}

function buildDisplay(name, price, quantity){
var targetDiv = document.getElementById('purchasedItems');
var targetP = document.createElement("p");
var blueSpan = document.createElement("span");
blueSpan.className = "blueSpan";
var emSpan = document.createElement("span");
emSpan.className="emphasize";
var dollarPrice = "$" + price;
var mQuantity = " (" + quantity +")" + " = ";
var lineTotal = price * quantity;
var displayLineTotal = "$" + lineTotal;
var nameNode = document.createTextNode(name);
var priceNode = document.createTextNode(dollarPrice);
var quantityNode = document.createTextNode(mQuantity);
var lineTotalNode = document.createTextNode(displayLineTotal);
blueSpan.appendChild(lineTotalNode);
emSpan.appendChild(nameNode);
targetP.appendChild(emSpan);
targetP.appendChild(priceNode);
targetP.appendChild(quantityNode);
targetP.appendChild(blueSpan);
targetDiv.appendChild(targetP);
}

//copy the billing info to shipping
function copyShipping() {
var chkBox = document.getElementById("shippingCheck");
//shipping addresses
var sAddress = document.getElementById("saddress");
var sCity = document.getElementById("scity");
var sState = document.getElementById("sstate");
var sZip = document.getElementById("szip");
if (chkBox.checked == true) {
var bAddress = document.getElementById("baddress");
var bCity = document.getElementById("bcity");
var bState = document.getElementById("bstate");
var bZip = document.getElementById("bzip");

sAddress.value = bAddress.value;
sCity.value = bCity.value;
sState.value = bState.value;
sZip.value = bZip.value;
} else {
sAddress.value = "";
sCity.value = "";
sState.value = "";
sZip.value = "";
}
}