var lastAvailableProductAttributeTime = 0;

function get_image(k)
{
	if (!image_xref[k])
	{
		image_xref[k] = new Image();
		var src = image_name[k];
		image_xref[k].src = src;
	}
	return image_xref[k];
}

function load_images(x)
{
/*
// Get the keys
	if (keys.length == 0)
	{
		for (var k in image_name)
			keys[keys.length] = k;
	}

// Load the next image
	var k = keys[x];
	var i = image_name[k];
	image_xref[k] = new Image();
	image_xref[k].src = image_name[k];

// Get the next key if there's more
	if (x < keys.length-1)
	{
		x++;
		setTimeout('load_images('+x+')',5);
	}
*/
}

function updatePMSControl(color,pms)
{
	var display = (color.options[color.selectedIndex].text == 'PMS Color') ? 'inline' : 'none';
	set_style_attribute(pms,'display',display);
	if (display == 'none')
		pms.value = '';
}

function updateVSAvailableProductAttributes(form)
{
/*
	var spinner = document.getElementById('spinner');
	spinner.src = spinner_image.src;
	var updating = document.getElementById('updating');
	updating.style.display = 'inline';
*/
	var t = new Date();
	lastAvailableProductAttributeTime = t.getTime();
	setTimeout('delayedUpdateVSAvailableProductAttributes(document.getElementById(\''+form.id+'\'),'+lastAvailableProductAttributeTime+')',500);
}

function delayedUpdateVSAvailableProductAttributes(form,time)
{
	if (time < lastAvailableProductAttributeTime)
		return;
	lastAvailableProductAttributeTime = time;
	updateAvailableProductAttributesWithCallback(form,'updateAppearance');
}

function initVSAvailableProductAttributes(form)
{
	var t = new Date();
	lastAvailableProductAttributeTime = t.getTime();
	setTimeout('delayedUpdateVSAvailableProductAttributes(document.getElementById(\''+form.id+'\'),'+lastAvailableProductAttributeTime+')',500);
}

function delayedInitVSAvailableProductAttributes(form)
{
	if (time < lastAvailableProductAttributeTime)
		return;
	updateAvailableProductAttributesWithCallback(form,'initAppearance');
}

function remove_color(color,value)
{
// Find the option
	var color_value = color.value;
	var selected = color.selectedIndex;
	var new_options = new Array();
	for (var i=0;i<color.options.length;i++)
	{
		if (color.options[i].value == value)
		{
		// Found; remove it
			break;
		}
		new_options[i] = new Option(color.options[i].text,color.options[i].value);
	}
	if (i == color.options.length)
		return;

// Remove the option and decrease the length
	for (var j=i+1;j<color.options.length;j++)
	{
		new_options[j-1] = new Option(color.options[j].text,color.options[j].value);
	}

// Set the color menu
	for (var i=0;i<new_options.length;i++)
	{
		color.options[i] = new_options[i];
		if (color.options[i].value == color_value)
			selected = i;
	}
	color.options.length = new_options.length;
	color.selectedIndex = selected;
}

function updateAppearance()
{
// Update the price
	update_price();

// Update the sample images
	update_samples();

// Update the size and material appearance
	var shape = document.getElementById('shape');
	var size = document.getElementById('size');
	var material = document.getElementById('material');
	var disabled = (shape.value == '');
	size.disabled = disabled;
	disabled |= (size.value == '');
	material.disabled = disabled;
	disabled |= (material.value == '');

// Update color appearance
	var color1 = $('color1');
	var proof = $('proof');
	var color2 = $('color2');
	var color3 = $('color3');
	var pms1 = $('pms1');
	var pms2 = $('pms2');
	var pms3 = $('pms3');
	var disable_color1 = (disabled || color1.length < 2);
	var disable_proof = (disabled || proof.length < 2);
	var disable_color2 = (disabled || color2.length < 2);
	var disable_color3 = (disabled || color3.length < 2);
	if (disable_color1)
		color1.disabled = true;
	if (disable_proof)
		proof.disabled = true;
	if (disable_color2)
		color2.disabled = true;
	if (disable_color3)
		color3.disabled = true;
	color1.className = (color1.disabled) ? 'disabled' : 'mx';
	proof.className = (proof.disabled) ? 'disabled' : 'mx';
	color2.className = (color2.disabled) ? 'disabled' : 'mx';
	color3.className = (color3.disabled) ? 'disabled' : 'mx';

// Remove used colors in other menus
	if (color1.value)
	{
		remove_color(color2,color1.value);
		remove_color(color3,color1.value);
	}
	if (color2.value)
	{
		remove_color(color1,color2.value);
		remove_color(color3,color2.value);
	}
	if (color3.value)
	{
		remove_color(color1,color3.value);
		remove_color(color2,color3.value);
	}

// Append the PMS color
	if (color1.options[color1.options.length-1].text != 'PMS Color')
		color1.options[color1.options.length] = new Option('PMS Color','');
	if (color2.options[color2.options.length-1].text != 'PMS Color')
		color2.options[color2.options.length] = new Option('PMS Color','');
	if (color3.options[color3.options.length-1].text != 'PMS Color')
		color3.options[color3.options.length] = new Option('PMS Color','');

// If the PMS control is showing, set the menu to the PMS color option
	if (get_style_attribute(pms1,'display') != 'none')
		color1.selectedIndex = color1.options.length-1;
	if (get_style_attribute(pms2,'display') != 'none')
		color2.selectedIndex = color2.options.length-1;
	if (get_style_attribute(pms3,'display') != 'none')
		color3.selectedIndex = color3.options.length-1;

// Stop spinner
/*
	var spinner = document.getElementById('spinner');
	spinner.src = spacer_image.src;
	var updating = document.getElementById('updating');
	updating.style.display = 'none';
*/

// Update steps
	update_steps();
}

function update_steps()
{
// Get the controls
	var shape = document.getElementById('shape');
	var size = document.getElementById('size');
	var material = document.getElementById('material');
	var color1 = document.getElementById('color1');
	var proof = document.getElementById('proof');
	var color2 = document.getElementById('color2');
	var color3 = document.getElementById('color3');
	var pms1 = document.getElementById('pms1');
	var pms2 = document.getElementById('pms2');
	var pms3 = document.getElementById('pms3');

// Get the images
	var step1 = document.getElementById('step1');
	var step2 = document.getElementById('step2');
	var step3 = document.getElementById('step3');

// Set the enabled state of each control
	var disable = false;
	var onClickJS = '';
	if (!shape.value)
	{
		disable = true;
		onClickJS = 'alert(\'Please select Shape before selecting Material.\');';
	}
	var shape_msg = document.getElementById('shape_msg');
	if (shape.value == '')
		shape_msg.innerText = shape_msg.innerHTML = '';
	else
		shape_msg.innerText = shape_msg.innerHTML = shape.options[shape.selectedIndex].text;
	size.disabled = disable;
	var size_msg = document.getElementById('size_msg');
	if (disable || size.value == '')
		size_msg.innerText = size_msg.innerHTML = '';
	else
		size_msg.innerText = size_msg.innerHTML = size.options[size.selectedIndex].text;
	size.onClick = onClickJS;
	if (!size.value)
	{
		disable = true;
		onClickJS = 'alert(\'Please select Shape and Size before selecting Material.\');';
	}
	material.disabled = disable;
	var material_msg = document.getElementById('material_msg');
	if (disable || material.value == '')
		material_msg.innerText = material_msg.innerHTML = '';
	else
		material_msg.innerText = material_msg.innerHTML = material.options[material.selectedIndex].text;
	material.onClick = onClickJS;
	if (!material.value)
	{
		disable = true;
		onClickJS = 'alert(\'Please select Shape, Size, and Material before selecting Ink.\');';
	}
	color1.disabled = disable;
	proof.disabled = disable;
	var color1_msg = document.getElementById('color1_msg');
	if (disable || color1.value == '')
		color1_msg.innerText = color1_msg.innerHTML = (color1.options[color1.selectedIndex].text != 'PMS Color' || pms1.value == '') ? '- none -' : 'PMS Color '+pms1.value;
	else
		color1_msg.innerText = color1_msg.innerHTML = color1.options[color1.selectedIndex].text;
	color1.className = (color1.disabled) ? 'disabled' : 'mx';
	color1.onClick = onClickJS;
	if (color1.selectedIndex < 1 || (color1.options[color1.selectedIndex].text == 'PMS Color' && pms1.value.replace(/^\s+|\s+$/g,"") == ''))
		disable = true;
	color2.disabled = disable;
	color2.className = (color2.disabled) ? 'disabled' : 'mx';
	var color2_msg = document.getElementById('color2_msg');
	if (disable || color2.value == '')
		color2_msg.innerText = color2_msg.innerHTML = (color2.options[color2.selectedIndex].text != 'PMS Color' || pms2.value == '') ? '- none -' : 'PMS Color '+pms2.value;
	else
		color2_msg.innerText = color2_msg.innerHTML = color2.options[color2.selectedIndex].text;
	color2.onClick = onClickJS;
	if (color2.selectedIndex < 1 || (color2.options[color2.selectedIndex].text == 'PMS Color' && pms2.value.replace(/^\s+|\s+$/g,"") == ''))
		disable = true;
	color3.disabled = disable;
	var color3_msg = document.getElementById('color3_msg');
	if (disable || color3.value == '')
		color3_msg.innerText = color3_msg.innerHTML = (color3.options[color3.selectedIndex].text != 'PMS Color' || pms3.value == '') ? '- none -' : 'PMS Color '+pms3.value;
	else
		color3_msg.innerText = color3_msg.innerHTML = color3.options[color3.selectedIndex].text;
	color3.className = (color3.disabled) ? 'disabled' : 'mx';
	color3.onClick = onClickJS;

// Update the steps based on what's enabled
	if (!color1.disabled)
	{
		step1.src = step1_done.src;
		step2.src = step2_done.src;
		step3.src = (color1.value) ? step3_done.src : step3_on.src;
	}
	else if (!material.disabled)
	{
		step1.src = step1_done.src;
		step2.src = step2_on.src;
		step3.src = step3_dim.src;
	}
	else
	{
		step1.src = step1_on.src;
		step2.src = step2_dim.src;
		step3.src = step3_dim.src;
	}
}

function initAppearance()
{
// Update the controls ink menus
	var initcolor1 = $('initcolor1');
	var initcolor2 = $('initcolor2');
	var initcolor3 = $('initcolor3');
	var color1 = $('color1');
	var color2 = $('color2');
	var color3 = $('color3');
	for(var i=0;i<color1.options.length;i++)
	{
		if (color1.options[i].value == initcolor1.value)
		{
			color1.selectedIndex = i;
			break;
		}
	}
	for(var i=0;i<color2.options.length;i++)
	{
		if (color2.options[i].value == initcolor2.value)
		{
			color2.selectedIndex = i;
			break;
		}
	}
	for(var i=0;i<color3.options.length;i++)
	{
		if (color3.options[i].value == initcolor3.value)
		{
			color3.selectedIndex = i;
			break;
		}
	}

// Update the appearance
	updateAppearance();
}

function update_price()
{
// If there are enough specs to calculate a price, show the table
	var shape = document.getElementById('shape');
	var size  = document.getElementById('size');
	var material = document.getElementById('material');
	var dialog = document.getElementById('pricing');
	if (shape && size && material && shape.value && size.value && material.value)
	{
		updatePriceList(table_specs,document.getElementById('maverick'));
		dialog.style.display = 'block';
	}
	else
	{
		dialog.style.display = 'none';
	}
}

function update_samples()
{
// Get the controls
	var shape = document.getElementById('shape');
	var size = document.getElementById('size');
	var material = document.getElementById('material');
	var color1 = document.getElementById('color1');
	var color2 = document.getElementById('color2');
	var color3 = document.getElementById('color3');

// Get the dialog elements
	var your_sticker_dialog = document.getElementById('your_sticker_dialog');
	var your_sticker = document.getElementById('your_sticker');
	var size_image = document.getElementById('size_image');
	var shape_msg = document.getElementById('shape_msg');
	var size_msg = document.getElementById('size_msg');
	var material_msg = document.getElementById('material_msg');
	var color1_image = document.getElementById('color1_image');
	var color1_label = document.getElementById('color1_label');
	var color1_msg = document.getElementById('color1_msg');
	var color2_image = document.getElementById('color2_image');
	var color2_label = document.getElementById('color2_label');
	var color2_msg = document.getElementById('color2_msg');
	var color3_image = document.getElementById('color3_image');
	var color3_label = document.getElementById('color3_label');
	var color3_msg = document.getElementById('color3_msg');

// If we have the shape and size, turn on the dialog
	if (shape && shape.value && size && size.value)
	{
		your_sticker_dialog.className = 'dialog type6 drip';
		your_sticker.style.color = 'black';
		color1_label.style.color = 'black';
		color2_label.style.color = 'black';
		color3_label.style.color = 'black';
		shape_msg.style.color = 'black';
		size_msg.style.color = 'black';
		material_msg.style.color = 'black';
		color1_msg.style.color = 'black';
		color2_msg.style.color = 'black';
		color3_msg.style.color = 'black';

	// Get the proper size image for the right material and colors
		var color = (material.value) ? material_xref[material.value] : '';
		var new_size_image = get_image(size.value+color);
		var src1 = (color1.value) ? get_image(color1.value) : spacer;
		var src2 = (color2.value) ? get_image(color2.value) : spacer;
		var src3 = (color3.value) ? get_image(color3.value) : spacer;
		if (navigator.appName == "Microsoft Internet Explorer")
		{
		// Change the material/size
			size_image.style.setAttribute('sizingMethod','scale');
			size_image.style.setAttribute('width',new_size_image.width);
			size_image.style.setAttribute('height',new_size_image.height);
			size_image.style.setAttribute('filter','progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+new_size_image.src+'\'');

		// Change the colors
			color1_image.style.setAttribute('sizingMethod','scale');
			color1_image.style.setAttribute('width',src1.width);
			color1_image.style.setAttribute('height',src1.height);
			color1_image.style.setAttribute('filter','progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+src1.src+'\'');
			color2_image.style.setAttribute('sizingMethod','scale');
			color2_image.style.setAttribute('width',src2.width);
			color2_image.style.setAttribute('height',src2.height);
			color2_image.style.setAttribute('filter','progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+src2.src+'\'');
			color3_image.style.setAttribute('sizingMethod','scale');
			color3_image.style.setAttribute('width',src3.width);
			color3_image.style.setAttribute('height',src3.height);
			color3_image.style.setAttribute('filter','progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+src3.src+'\'');

		}
		else
		{
			size_image.src = new_size_image.src;
			color1_image.src = src1.src;
			color2_image.src = src2.src;
			color3_image.src = src3.src;
		}

	// Update the messages
		if (shape && shape.value)
		{
			shape_msg.innerText = shape.options[shape.selectedIndex].text;
			shape_msg.innerHTML = shape.options[shape.selectedIndex].text;
		}
		if (size && size.value)
		{
			size_msg.innerText = size.options[size.selectedIndex].text;
			size_msg.innerHTML = size.options[size.selectedIndex].text;
		}
		if (material && material.value)
		{
			material_msg.innerText = material.options[material.selectedIndex].text;
			material_msg.innerHTML = material.options[material.selectedIndex].text;
		}
		if (color1 && color1.value)
		{
			color1_msg.innerText = color1.options[color1.selectedIndex].text;
			color1_msg.innerHTML = color1.options[color1.selectedIndex].text;
		}
		if (color2 && color2.value)
		{
			color2_msg.innerText = color2.options[color2.selectedIndex].text;
			color2_msg.innerHTML = color2.options[color2.selectedIndex].text;
		}
		if (color3 && color3.value)
		{
			color3_msg.innerText = color3.options[color3.selectedIndex].text;
			color3_msg.innerHTML = color3.options[color3.selectedIndex].text;
		}
	}
	else
	{
	// Turn off the dialog and reset everything
		your_sticker_dialog.className = 'dialog type7 drip';
		size_image.src = spacer.src;
		color1_image.src = spacer.src;
		color2_image.src = spacer.src;
		color3_image.src = spacer.src;
		your_sticker.style.color = 'gray';
		color1_label.style.color = 'gray';
		color2_label.style.color = 'gray';
		color3_label.style.color = 'gray';
		shape_msg.style.color = 'gray';
		size_msg.style.color = 'gray';
		material_msg.style.color = 'gray';
		color1_msg.style.color = 'gray';
		color2_msg.style.color = 'gray';
		color3_msg.style.color = 'gray';
	}
}

function validateForm()
{
// Make sure all of the required attributes are selected
	var shape = document.getElementById('shape');
	var size = document.getElementById('size');
	var material = document.getElementById('material');
	var color1 = document.getElementById('color1');
	var color2 = document.getElementById('color2');
	var color3 = document.getElementById('color3');
	var pms1 = document.getElementById('pms1');
	var pms2 = document.getElementById('pms2');
	var pms3 = document.getElementById('pms3');
	var proof = document.getElementById('proof');
	if (!shape.value)
	{
		alert('Please select a shape.');
		return false;
	}
	if (!size.value)
	{
		alert('Please select a size.');
		return false;
	}
	if (!material.value)
	{
		alert('Please select a material.');
		return false;
	}

// Count the inks
	var ink = 0;
	if (color1.value != '' || (color1.options[color1.selectedIndex].text == 'PMS Color' && pms1.value))
		ink++;
	if (color2.value != '' || (color2.options[color2.selectedIndex].text == 'PMS Color' && pms2.value))
		ink++;
	if (color3.value != '' || (color3.options[color3.selectedIndex].text == 'PMS Color' && pms3.value))
		ink++;
	if (ink == 0)
	{
		alert('Please select at least one ink.');
		return false;
	}
	if (!proof.value)
	{
		alert('Please select a proof option.');
		return false;
	}
	var add_to_cart = document.getElementById('add_to_cart');
	if (add_to_cart.value == '')
	{
		var q = document.getElementById('save_qty');
		q.name=  'qty[]';
		return true;
	}

// Make sure one of the quantities is selected
	for (var q=100;q<=1000;q+=100)
	{
		var qty = document.getElementById('qty'+q);
		if (qty.checked)
			return true;
	}
	alert('Please select a quantity.');
	return false;
}