/*	***************************** Product Selector Control **************************************
    $Id: productSelector.js,v 1.9 2007/11/20 21:20:34 liane_cavalcanti Exp $
    Copyright 2007 (C) Creative Labs, Inc.

    File:			productSelector.js
	Created:		2007-09-19
	Author(s):		Gary Byte
					Howard Ho
	Dependencies:	prototype.js (v1.5+)
					includes/productSelector.asp (builds JSON objects)
	Description:	This JS is the core of the color/capacity selector code for the website and
					manages how the selectors function
	Usage:			*** Requirements:
					1)  DIV/SPAN encompassing all elements with a unique ID field (suggest SKU or
						parent ID being used to help this)
					2)  JSON product list be created from productSelect.asp to be passed in via
						instantation.  Example:
						window.buycontrol<%=nProductID%> = new Prototype.BuyControl('<DIV/SPAN ID for Wrapping>', <AjaxRefreshRate>, <JSONProductList Variable>);
							<DIV/SPAN ID for Wrapping>		= From #1 above
							<AjaxRefreshRate>				= Currently not used
							<JSONProductList Variable>		= Variable used for JSON product list
					3)  A generic select box with class of prodSelect be created to hold product IDs and a value.
					4)  A generic select box with class of prodCapacity be created to hold product capacities
					5)  A generic select box with class of prodColor be created to hold product colors
					*** Optional (Contained within #1 above)
					7)  IMG with class of prodImg to hold product img
					8)  DIV/SPAN with class of prodButton to hold the button(s)
					9)  DIV/SPAN with class of prodName to hold product name
					10) DIV/SPAN with class of prodPrice to hold product price
					11) DIV/SPAN with class of prodListPrice to hold product list price
					12) DIV/SPAN with class of prodSKU to hold product SKU
					13) DIV/SPAN with class of prodStatus to hold a message by status (configured via updateStatusConfig)
					14) INPUT with class of prodID to hold product ID
	
	Methods:		After instantiation the following methods on the BuyControl are used to help make changes:
					
						updateStatusConfig( status, key, value )
							*** Updates one of the by-status fields via below
							Status must be one of the following:
								InStock
								OutOfStock
								NotAvailable
								PreOrder
								BackOrder
								PreNotify
							Key must be one of the following:
								statusText
								statusClass			** Class used for statusText if needed
								buttonImg
								action				*** popup_notify, buy_link, none
								
						updateImageFormat( imageFormat )
							*** Updates image format to use for this buyControl
							*** Used to specify differences between product page vs configurator vs cross sells vs etc.
						
	********************************************************************************************* */

// Adds new option to select list
function addNewOption( optionText, optionValue, selectList, isSelected ) {
	if (optionText != null && optionValue != null && selectList != null) {
		selectList.options[selectList.length] = new Option(optionText, optionValue);
		if (isSelected) { selectList.options[selectList.length - 1].selected = true; }
	}
}

// Removes all options
function removeOptions( selectList ) {
	var selMax		= selectList.length-1;
	for (var i=selMax; i >= 0; i--) {
		selectList.options[i]		= null;
	}
}

// Setups a list of elements to use
function elementConfig( productName, productTitleName, productDesc, productSKU,
productPrice, productListPrice, productStatus, productImg, productButton, productSelect,
productCapacity, productColor, productValue, productSaveMessage, productShopStatus ) {
	return {
		'prodName'			: productName,
		'prodTitleName'		: productTitleName,
		'prodDesc'			: productDesc,
		'prodPrice'			: productPrice,
		'prodListPrice'		: productListPrice,
		'prodImg'			: productImg,
		'prodSKU'			: productSKU,
		'prodButton'		: productButton,
		'prodStatus'		: productStatus,
		'prodSelect'		: productSelect,
		'prodCapacity'		: productCapacity,
		'prodColor'			: productColor,
		'prodValue'			: productValue,
		'prodSave'			: productSaveMessage,
		'prodShopStatus'	: productShopStatus
	}
}

var buyCountry		= 1;

// TODO: Dig out my CSS dollar number fomatter...
function formatDollar(number) {
	if (number <= 0)
	{
		// Not a valid dollar amount if negative!
		return "";
	}
	// Special return for non-US
	else if (buyCountry != 1) {
		return('USD $' + number);
	} else {
		return('$' + number);
	}
}

function formatSaveMsg(number) {
	if (number <= 0 || isNaN(number)) {
		return "";
	}
	return 'Save ' + Math.round(number) + '%';
}

function formatCurrency(input) {
	if (input != null || !isNaN(input)) {
		input			= Math.round(input * 100);
		input			= String(input);
		input			= '$' + input.substring(0,input.length-2) + '.' + input.substring(input.length-2);
		return input;
	}
	return null;
}

function showSavings(element, savePercent, salePrice, listPrice ) {
	var	priceDiff		= 0.0;
	var saveMsg			= '';
	if (salePrice != null && listPrice != null) {
		try {
			salePrice	= eval(salePrice);
			listPrice	= eval(listPrice);
			if (listPrice > salePrice) {
				priceDiff	= listPrice - salePrice;
			}
		} catch (ex) { }
	}
	
	if (priceDiff > 5.0) {
		saveMsg		= 'Save ' + formatCurrency(priceDiff);
	} else if (savePercent != null) {
		saveMsg		= formatSaveMsg(savePercent);
	}
	
	if (saveMsg.length > 0 && element != null) {
		element.innerHTML			= saveMsg;
		element.show();
	} else if (element != null) {
		element.hide();
	} else if (element == null) {
		return saveMsg;
	}
}

var globalStatusAction = {
	'buy_link'		: '/shop/config.asp?cartAdd=[id]&mpid=[mpid]',
	'popup_notify'	: 'window.open(\'/shop/notify.asp?product=[id]\',\'NotifyMe\',config=\'height=300,width=450\');',
	'product_page'	: '/products/product.asp?product=[mpid]',
	'in_cart'		: '/shop/cart.asp',
	'none'			: null
};

var globalStatusActionMap = $H( globalStatusAction );
var globalStockStatus


// Product <SELECT> prototype class
Prototype.SelectControl = Class.create();
Prototype.SelectControl.prototype = {

	/* *********************** FireFox "Select" hack to be like IE ***********************
		This script is used to bind the "keyUp" event for any product selectors to make
		them fire similar to that of IE
	*/
	Firefox_select_scroll_hack: function(Ev) {
		// prevent tab, alt, ctrl keys from fireing the event
		if (Ev.keyCode && (Ev.keyCode == 1 || Ev.keyCode == 9 || 
		    Ev.keyCode == 16 || Ev.altKey || Ev.ctrlKey))
			return true;
		Ev.target.onchange();
		return true;
	},

	// Initializer
	initialize: function(control, origControl) {
		this.origControl	= origControl;
		this.products		= origControl.products;
		this.buyType		= origControl.buyType;
		this.imgWrap		= origControl.imgWrap;
		this.image          = origControl.image;
		this.name           = origControl.name;
		this.desc			= origControl.desc;
		this.button			= origControl.button;
		this.statusText		= origControl.statusText;
		this.dropdown       = origControl.dropdown;
		this.capacitySelect = origControl.capacitySelect;
		this.colorSelect    = origControl.colorSelect;
		this.price          = origControl.price;
		this.listPrice      = origControl.listPrice;
		this.sku            = origControl.sku;
		this.saveMsg		= origControl.saveMsg;
		this.shopStatus		= origControl.shopStatus;
		this.statusConfig	= origControl.statusConfig;
		this.valueField		= origControl.valueField;
		this.context        = window.eval.bind(window);
		this.registerCallbacks();
		this.lastCapacity	= origControl.lastCapacity;
	},

	// Creates the event hooks
	registerCallbacks: function() {
		// Store DOM handlers so you can dispose of them (prevent memory leaks)
		this.selectHandlerPointer = this.refreshSelect.bindAsEventListener(this); 
		Event.observe(this.dropdown, 'change', this.selectHandlerPointer, false);

		this.updateSelectsHandlerPointer = this.updateSelects.bindAsEventListener(this);
		Event.observe(this.capacitySelect, 'change', this.updateSelectsHandlerPointer, false);
		Event.observe(this.colorSelect, 'change', this.updateSelectsHandlerPointer, false);
		
		// Adds in hack for Firefox and Safari
		if (Prototype.Browser.Gecko || Prototype.Browser.WebKit) {
			Event.observe(this.colorSelect, 'keyup', this.updateSelectsHandlerPointer, false);
			Event.observe(this.capacitySelect, 'keyup', this.updateSelectsHandlerPointer, false);
			Event.observe(this.dropdown, 'keyup', this.selectHandlerPointer, false);
		}
	},

	// Destructor - need to figure out how to fire off this...
	dispose: function() {
		Event.stopObserving(this.dropdown, 'change', this.selectHandlerPointer, false);
		this.selectHandlerPointer = null;

		Event.stopObserving(this.capacitySelect, 'change', this.updateSelectsHandlerPointer, false);
		Event.stopObserving(this.colorSelect, 'change', this.updateSelectsHandlerPointer, false);
		this.updateSelectsHandlerPointer = null;
	},

	updateSelects: function updateSelects(event) {
		var thisSelect;
		if (Prototype.Browser.IE)
			thisSelect = Event.element(event);
		else
			thisSelect = event.currentTarget;

		// Try to find product ID
		var prodID		= 0;
		var prodIdx		= -1;
		var colSelect, capSelect;

		// Check if we have a legit combo and switch other control if not
		if (this.capacitySelect.length > 0 && this.colorSelect.length > 0)
		{
			var capSelected = this.capacitySelect.options.selectedIndex;
			var capValue = (capSelected >= 0) ? this.capacitySelect.options[capSelected].value : '';
			var capIDs = capValue.split(',');
			
			
			// Check to make sure the capacity has changed otherwise no reason to process color list
			if (this.lastCapacity != capSelected) {
				this.lastCapacity		= capSelected;
				
				// Retrieve colors
				var colors = $A( this.products.findAll(function(node) {
					return (node.capacity == capValue && node.color != 'null' && node.color.length > 0);
				}).pluck('color') ).uniq();
			
				// Sort alphabeticaly
				colors = colors.sort();

				// Repopulate field
				removeOptions( this.colorSelect );
				for (var i=0; i < colors.length; i++) {
					addNewOption( colors[i], colors[i], this.colorSelect, false );
				}
				this.colorSelect.selectedIndex		= 0;
			}
		}

		if (this.colorSelect.length > 0) {
			colSelect	= this.colorSelect.options[this.colorSelect.selectedIndex].value;
		}
		if (this.capacitySelect.length > 0) {
			capSelect	= this.capacitySelect.options[this.capacitySelect.selectedIndex].value;
		}
		
		// Retrieves correct listing for an item with a capcity or color
		if ( this.capacitySelect.length > 0 && this.colorSelect.length > 0 ) {
			prodID = $A( this.products.findAll(function(node) {
				return (node.color == colSelect && node.capacity == capSelect);
			}).pluck('prodID') ).first();
		} else if ( this.capacitySelect.length > 0 ) {
			prodID = $A( this.products.findAll(function(node) {
				return (node.capacity == capSelect);
			}).pluck('prodID') ).first();
		} else if ( this.colorSelect.length > 0 ) {
			prodID = $A( this.products.findAll(function(node) {
				return (node.color == colSelect);
			}).pluck('prodID') ).first();
		}

		// Retrieve prodIdx if prodID exists
		if (prodID > 0) {
			for (var i=0; i < this.products.length; i++) {
				if (prodID == this.products[i].prodID) {
					prodIdx	= i;
					break;
				}
			}
		}
		// Match back the value into the main dropdown
		this.dropdown.selectedIndex	= (prodIdx >= 0) ? prodIdx : 0;
		this.refreshSelect();
	},
	
	refreshSelect: function refreshSelect() {
		// Maybe wrap this in a try/catch?
		if (this.dropdown.selectedIndex > -1)
		{
			var prodID;
			var prodIdx		= this.dropdown.selectedIndex;
			var price, listprice, status, capacity, color;

			prodID		= this.products[prodIdx].prodID;
			price		= this.products[prodIdx].price;
			listprice	= this.products[prodIdx].listPrice;
			status		= this.products[prodIdx].status;
			capacity	= this.products[prodIdx].capacity;
			color		= this.products[prodIdx].color;


			if (this.saveMsg != null) {
				showSavings(this.saveMsg, this.products[prodIdx].salePercent, price, listprice);
//				if (this.products[prodIdx].salePercent > 0) {
//					if (listprice != null) {
//						this.listPrice.innerHTML	= formatDollar(listprice);
//						this.listPrice.show();
//					}
//					this.saveMsg.innerHTML		= formatSaveMsg(this.products[prodIdx].salePercent);
//					this.saveMsg.show();
//				} else {
//					this.saveMsg.hide();
//					this.listPrice.hide();
//				}
			}
			
			// Handles special product page treatment
			if (this.shopStatus != null && this.buyType == 'product') {
				var thisStatus		= this.products[prodIdx].shopStatus;
				if (thisStatus != null && thisStatus.length > 0) {
					if (thisStatus == 'R' || thisStatus == 'RP') {
						this.shopStatus.src		= '/images/shop/product_icons/refurb.png';
						this.shopStatus.show();
					} else if (thisStatus == 'M') {
						this.shopStatus.src		= '/images/shop/product_icons/rebate.png';
						this.shopStatus.show();
					} else if (thisStatus == 'C' || thisStatus == 'S' || thisStatus == 'SC') {
						this.shopStatus.src		= '/images/shop/product_icons/save.png';
						this.shopStatus.show();
					} else if (thisStatus == 'N') {
						this.shopStatus.src		= '/images/shop/product_icons/now-available.png';
						this.shopStatus.show();
					} else if (thisStatus == 'P') {
						this.shopStatus.src		= '/images/shop/product_icons/promo.png';
						this.shopStatus.show();
					} else if (thisStatus == 'E') {
						this.shopStatus.src		= '/images/shop/product_icons/email.png';
						this.shopStatus.show();						
					} else {
						this.shopStatus.hide();
					}
				} else {
					this.shopStatus.hide();
				}
			}
			
			if (this.name != null) {
				if (this.buyType != 'product') {
					this.name.innerHTML	= this.origControl.getReplaceString( '<a href="/products/product.asp?product=[mpid]">', prodIdx ) + this.products[prodIdx].titleName + '</a>';
				} else {
					this.name.innerHTML	= this.products[prodIdx].titleName;
				}
			}
			
			if (this.valueField != null) {
				this.valueField.value	= prodID;
			}
			
			if (this.desc != null && this.products[prodIdx].desc.length > 0) {
				this.desc.show();
				this.desc.innerHTML		= this.products[prodIdx].desc;
			} else if (this.desc != null) {
				this.desc.hide();
			}
			
			try {
				if (this.image != null) {
					this.image.src			= this.origControl.getReplaceString( this.origControl.imageFormat, prodIdx );
					this.image.alt			= this.products[prodIdx].name;
					this.image.title		= this.products[prodIdx].name;
					if (this.imgWrap != null) {
						this.imgWrap.href	= this.origControl.getReplaceString( globalStatusActionMap[ 'product_page' ], prodIdx );
					}
				}
			} catch(ex) { ; }

			if (this.price != null) {
				this.price.innerHTML	= formatDollar(price);
			}
			
			if (this.sku != null) {
				this.sku.innerHTML		= this.products[prodIdx].sku;
			}
			
			if (this.statusText != null) {
				this.statusText.innerHTML	= this.statusConfig[ this.products[prodIdx].status ].statusText;
			}
			
			if (this.button != null) {
				var buttonImg				= this.statusConfig[ this.products[prodIdx].status ].buttonImg;
				var buttonAction			= this.statusConfig[ this.products[prodIdx].status ].action;
				var buttonActionLink		= globalStatusActionMap[ buttonAction ];
				if ( buttonImg.length > 0 && buttonAction != null ) {
					if (buttonAction == 'buy_link' || buttonAction == 'in_cart') {
						this.button.innerHTML	= '<a href="' + this.origControl.getReplaceString( buttonActionLink, prodIdx ) + '"><img src="' + buttonImg + '" alt="' + this.products[prodIdx].name + '" border="0" title="' + this.products[prodIdx].name + '" class="productBuyButton_' + ( buttonAction == 'buy_link' && this.buyType == 'other' ? 'Buy' : this.products[prodIdx].status ) + '"></a>';
//alert(this.button.innerHTML);
					} else if (buttonAction == 'popup_notify') {
						this.button.innerHTML	= '<a href="#" onClick="' + this.origControl.getReplaceString( buttonActionLink, prodIdx ) + '; return false;"><img src="' + buttonImg + '" alt="' + this.products[prodIdx].name + '" border="0" title="' + this.products[prodIdx].name + '" class="productBuyButton_' + this.products[prodIdx].status + '"></a>';
					}
					this.button.show();
				} else {
					this.button.hide();
				}
			}
		}
	}
}

// Main control prototype class
Prototype.BuyControl = Class.create();
Prototype.BuyControl.prototype = {

	// Initializer
	initialize: function(pageHooks, rate, products, buyType, doSetup) {
		this.json           =  null;
		this.products		= products.products;
		this.rate           = $(rate);
		this.buyType		= buyType;
		this.statusText		= $$('#' + pageHooks.prodStatus )[0];
		this.button			= $$('#' + pageHooks.prodButton )[0];
		this.image			= $$('#' + pageHooks.prodImg )[0];
		this.name			= $$('#' + pageHooks.prodName )[0];
		this.desc			= $$('#' + pageHooks.prodDesc )[0];
		this.capacitySelect	= $$('#' + pageHooks.prodCapacity )[0];
		this.colorSelect	= $$('#' + pageHooks.prodColor )[0];
		this.dropdown		= $$('#' + pageHooks.prodSelect )[0];
		this.price			= $$('#' + pageHooks.prodPrice )[0];
		this.listPrice		= $$('#' + pageHooks.prodListPrice )[0];
		this.sku			= $$('#' + pageHooks.prodSKU )[0];
		this.valueField		= $$('#' + pageHooks.prodValue )[0];
		this.saveMsg		= $$('#' + pageHooks.prodSave )[0];
		this.shopStatus		= $$('#' + pageHooks.prodShopStatus )[0];
		this.imgWrap		= (buyType == 'other') ?  $$('#' + pageHooks.prodImg.gsub( 'img', 'imgWrap' ) )[0] : null;
		this.imageFormat	= '/images/products/shop/shopsmall[id][saletype]_1_1_61.gif';
		this.context        = window.eval.bind(window);
		this.registerCallbacks(this.rate);
		this.lastCapacity	= 0;
		this.statusConfig	= $H( globalStockStatus );
		
		if (doSetup) {
			this.finishSetup();
		}
	},
	
	// Does the last steps of setup after setup adjustments made
	finishSetup: function() {
		this.refreshButton();
		this.selectCtl	= new Prototype.SelectControl(null, this);
	},
	
	// Util function
	getReplaceString: function( replaceString, prodIdx ) {
		var tmpVar		= replaceString.replace( '[id]', this.products[ prodIdx ].prodID ).replace( '[mpid]', this.products[ prodIdx ].masterProdID );
		if ( this.products[ prodIdx ].saleType > 1 ) {
			return tmpVar.replace( '[saletype]', '_' + this.products[ prodIdx ].saleType );
		} else {
			return tmpVar.replace( '[saletype]', '' );
		}
	},
	
	// Updates a status config item
	updateStatusConfig: function( status, key, value ) {
		if ( key == 'statusText' ) {
			this.statusConfig[ status ].statusText	= value;
		} else if ( key == 'statusClass' ) {
			this.statusConfig[ status ].statusClass	= value;
		} else if ( key == 'buttonImg' ) {
			this.statusConfig[ status ].buttonImg	= value;
		} else if ( key == 'action' ) {
			this.statusConfig[ status ].action		= value;
		}
		this.refreshButton();
	},
	
	// Allows changing of image
	updateImageFormat: function( imageFormat ) {
		this.imageFormat	= imageFormat;
		this.initControl(this);
	},
	
	// Creates the event hooks
	registerCallbacks: function(rate) {
		// Implementation removed...
	},

	// Destructor - need to figure out how to fire off this...
	dispose: function() {
		// Other clean up code...
		this.selectCtl.dispose();
		this.selectCtl = null;
	},

	// Code to actually update the control if you provide it with a JSON or a jsonRequest response
	initControl: function initControl(json) {
		// This alias is used during looping
		var myDropdown	= this.dropdown;
		var prodIdx		= 0;

		this.dropdown.length			= 0;
		this.capacitySelect.length		= 0;
		this.colorSelect.length			= 0;

		for (var i=0; i < this.products.length; i++) {
			addNewOption( this.products[i].name, this.products[i].prodID, this.dropdown, false );
		}

		// Create initial selects
		var capacities = $A( this.products.findAll(function(node) {
			return (node.capacity != 'null' && node.capacity.length > 0);
		}).pluck('capacity') ).uniq();

		// Sort numerically
		capacities = capacities.sortBy(function(node) {
			var numeric = parseInt(node);
			if (node.toUpperCase().indexOf("KB") > 0) { numeric = numeric * 1000; }
			if (node.toUpperCase().indexOf("MB") > 0) { numeric = numeric * 1000000; }
			if (node.toUpperCase().indexOf("GB") > 0) { numeric = numeric * 1000000000; }
			if (node.toUpperCase().indexOf("TB") > 0) { numeric = numeric * 1000000000000; }
			// For T-shirt sizes.. 
			if (!node.toUpperCase().indexOf("SMALL")) { numeric = 10; }
			if (!node.toUpperCase().indexOf("X-SMALL")) { numeric = 1; }
			if (!node.toUpperCase().indexOf("MEDIUM")) { numeric = 100; }
			if (!node.toUpperCase().indexOf("LARGE")) { numeric = 1000; }
			if (!node.toUpperCase().indexOf("X-LARGE")) { numeric = 10000; }
			if (!node.toUpperCase().indexOf("XX-LARGE")) { numeric = 100000; }
			return (numeric);
		});
		
		var colors = $A( this.products.findAll(function(node) {
			return (node.color != 'null' && node.color.length > 0);
		}).pluck('color') ).uniq();

		// Sort alphabeticaly
		colors = colors.sort();

		if (this.products && this.products.length > 0)
		{
			// Capacities exist
			if (capacities.length > 0) {
				for (var i=0; i < capacities.length; i++) {
					addNewOption( capacities[i], capacities[i], this.capacitySelect, false );
				}
				
				// Select the default capacity
				var selCapacity = 0;
				for (var nCount = 0; nCount < this.capacitySelect.options.length; nCount++) {
					if (this.capacitySelect.options[nCount].value == this.products[0].capacity)
					{
						selCapacity = nCount;
						this.capacitySelect.selectedIndex = nCount;
						this.lastCapacity = nCount;
						break;
					}
				}

				// Checks for colors
				colors = $A( this.products.findAll(function(node) {
					return (node.capacity == capacities[selCapacity] && node.color != 'null' && node.color.length > 0);
				}).pluck('color') ).uniq();
				
				if (colors.length > 0) {
					for (var i=0; i < colors.length; i++) {
						addNewOption( colors[i], colors[i], this.colorSelect, false );
					}
				}

			// No capacities but colors
			} else if (colors.length > 0) {
				for (var i=0; i < colors.length; i++) {
					addNewOption( colors[i], colors[i], this.colorSelect, false );
				}
			}

			// Adjust the display name based on the capacity and color text
			if (colors.length > 0) {
				var colorRegex	= eval('/([(, ]+(' + colors.join("(.)*|").gsub('/','[/]') + '(.)*))/');
				// Replace the name in JSON to this fixed name
				this.products.each(function(node) {
					node.titleName = node.name.replace(colorRegex, '');
				});
			}

			// Select the default color
			for (var nCount = 0; nCount < this.colorSelect.options.length; nCount++) {
				if (this.colorSelect.options[nCount].value == this.products[0].color)
				{
					this.colorSelect.selectedIndex = nCount;
					break;
				}
			}
			
			if (capacities.length > 0) {
				//var capacityRegex = eval('/(' + capacities.join("(.)*|").gsub( '/', '[/]' ) + ')/');
				var capacityRegex = eval('/([(, ]+(' + capacities.join("(.)*|").gsub('/','[/]') + '(.)*))/');
				// Replace the name in JSON to this fixed name
				this.products.each(function(node) {
					node.titleName = node.name.replace(capacityRegex, '');
				});
			}

			// New behaviour... we assume 0th product is the prodID
			var prodID = this.products[0].prodID;

			// Retrieve prodIdx if prodID exists
			if (prodID > 0) {
				for (var i=0; i < this.products.length; i++) {
					if (prodID == this.products[i].prodID) {
						prodIdx	= i;
						break;
					}
				}
			}

		
			// Only 1 item then no drop down
			// Or if there are secondary drop downs
			if (this.products.length == 1) {
				this.dropdown.hide();
				this.capacitySelect.hide();
				this.colorSelect.hide();
			} else if (colors.length > 0) {
				this.capacitySelect.hide();
				this.dropdown.hide();
				if (this.name != null) { this.name.show(); }
			} else if (capacities.length > 0) {
				this.colorSelect.hide();
				this.dropdown.hide();
				if (this.name != null) { this.name.show(); }
			} else {
				if (this.name != null) { this.name.hide(); }
				this.capacitySelect.hide();
				this.colorSelect.hide();
				myDropdown.show();
				
			}
			
			if (this.shopStatus != null && this.buyType == 'product') {
				var thisStatus		= this.products[prodIdx].shopStatus;
				if (thisStatus != null && thisStatus.length > 0) {
					if (thisStatus == 'R' || thisStatus == 'RP') {
						this.shopStatus.src		= '/images/shop/product_icons/refurb.png';
						this.shopStatus.show();
					} else if (thisStatus == 'M') {
						this.shopStatus.src		= '/images/shop/product_icons/rebate.png';
						this.shopStatus.show();
					} else if (thisStatus == 'C' || thisStatus == 'S' || thisStatus == 'SC') {
						this.shopStatus.src		= '/images/shop/product_icons/save.png';
						this.shopStatus.show();
					} else if (thisStatus == 'N') {
						this.shopStatus.src		= '/images/shop/product_icons/now-available.png';
						this.shopStatus.show();
					} else if (thisStatus == 'P') {
						this.shopStatus.src		= '/images/shop/product_icons/promo.png';
						this.shopStatus.show();
					} else if (thisStatus == 'E') {
						this.shopStatus.src		= '/images/shop/product_icons/email.png';
						this.shopStatus.show();
					} else {
						this.shopStatus.hide();
					}
				} else {
					this.shopStatus.hide();
				}
			}
			
			if (this.saveMsg != null) {
				showSavings(this.saveMsg, this.products[prodIdx].salePercent, this.products[prodIdx].price, this.products[prodIdx].listPrice);
/*				if (this.products[prodIdx].salePercent > 0) {
					if (this.products[prodIdx].listPrice != null) {
						this.listPrice.innerHTML= formatDollar(this.products[prodIdx].listPrice);
						this.listPrice.show();
					}
					this.saveMsg.innerHTML		= formatSaveMsg(this.products[prodIdx].salePercent);
					this.saveMsg.show();
				} else {
					this.saveMsg.hide();
					this.listPrice.hide();
				}
*/			}
			
			if (this.valueField != null) {
				this.valueField.value	= prodID;
			}
			
			if (this.desc != null && this.products[prodIdx].desc.length > 0) {
				this.desc.show();
				this.desc.innerHTML		= this.products[prodIdx].desc;
			} else if (this.desc != null) {
				this.desc.hide();
			}

			try {
				// Initialize with the CapacityDropdown item on the list...
				if (this.image != null) {
					this.image.src			= this.getReplaceString( this.imageFormat, prodIdx );
					this.image.alt			= this.products[prodIdx].name;
					this.image.title		= this.products[prodIdx].name;
					if (this.imgWrap != null) {
						this.imgWrap.href	= this.getReplaceString( globalStatusActionMap[ 'product_page' ], prodIdx );
					}
				}
			} catch(ex) { ; }

			if (this.name != null) {
				this.name.innerHTML		= this.products[prodIdx].titleName;
				if (this.buyType == 'other') {
					this.name.innerHTML	= '<a href="' + this.getReplaceString( globalStatusActionMap[ 'product_page' ], prodIdx ) + '">' + this.name.innerHTML + '</a>';
				}
			}
			if (this.price != null) {
				this.price.innerHTML	= formatDollar(this.products[prodIdx].price);
			}
			if (this.sku != null) {
				this.sku.innerHTML		= this.products[prodIdx].sku;
			}
			if (this.statusText != null) {
				this.statusText.innerHTML	= this.statusConfig[this.products[prodIdx].status].statusText;
			}

			// Enable or disable the dropdowns
			if (this.capacitySelect.options && this.capacitySelect.options.length > 0)
			{
				this.capacitySelect.show();
			}

			if (this.colorSelect.options && this.colorSelect.options.length > 0)
			{
				this.colorSelect.show();
			}
			
			if (this.button != null) {
				var buttonImg				= this.statusConfig[ this.products[prodIdx].status ].buttonImg;
				var buttonAction			= this.statusConfig[ this.products[prodIdx].status ].action;
				var buttonActionLink		= globalStatusActionMap[ buttonAction ];
				if ( buttonImg.length > 0 && buttonAction != null ) {
					if (buttonAction == 'buy_link' || buttonAction == 'in_cart') {
						this.button.innerHTML	= '<a href="' + this.getReplaceString( buttonActionLink, prodIdx ) + '"><img src="' + buttonImg + '" alt="' + this.products[prodIdx].name + '" border="0" title="' + this.products[prodIdx].name + '" class="productBuyButton_' + ( buttonAction == 'buy_link' && this.buyType == 'other' ? 'Buy' : this.products[prodIdx].status ) + '"></a>';
					} else if (buttonAction == 'popup_notify') {
						this.button.innerHTML	= '<a href="#" onClick="' + this.getReplaceString( buttonActionLink, prodIdx ) + '; return false;"><img src="' + buttonImg + '" alt="' + this.products[prodIdx].name + '" border="0" title="' + this.products[prodIdx].name + '" class="productBuyButton_' + this.products[prodIdx].status + '"></a>';
					}
					this.button.show();
				} else {
					this.button.hide();
				}
			}
		}
		else
		{
			// Failing all we should turn everything off
			if (this.button != null)
			{
				this.button.disabled = true;
			}
		}
	},

	refreshButton: function refreshButton() {
		// Use local values to set the controls
		this.initControl(this);
	}
}