var result_timestamp = -1;
var TimeToSlide = 250.0;
var openAccordion = '';
var spinner_image = new Image();
var spacer_image = new Image();
spinner_image.src = '/images/spinner-clear.gif';
spacer_image.src = '/images/spacer.gif';

function runAccordion(index)
{
// Find out if there is an open accordion
	var i=0;
	var open = null;
	do {
		i++;
		div = document.getElementById('accordionContent'+i);
	} while (div != null && div.style.display == 'none');
	if (div != null)
		openAccordion = div.id;

// Get the content to open
	var nID = "accordionContent"+index;
	if (openAccordion == nID)
		return;
//		nID = '';

// Open the right content
	setTimeout("animate("+new Date().getTime()+","+TimeToSlide+",'"+openAccordion+"','"+nID+"')",33);
	openAccordion = nID;
}

function animate(lastTick,timeLeft,closingId,openingId)
{
	var curTick = new Date().getTime();
	var elapsedTicks = curTick - lastTick;

	var opening = (openingId == '') ? null : document.getElementById(openingId);
	var closing = (closingId == '') ? null : document.getElementById(closingId);

	var totalHeight = (opening != null && opening.scrollHeight > 0) ? opening.scrollHeight+10 : 1;

	if (timeLeft <= elapsedTicks)
	{
		if (opening != null)
		{
			open.className = 'accordionContentOpen';
			opening.style.height = totalHeight+'px';
		}

		if (closing != null)
		{
			open.className = 'accordionContent';
			closing.style.display = 'none';
			closing.style.height = '0px';
		}
		return;
	}

	timeLeft -= elapsedTicks;
	var newClosedHeight = Math.round((timeLeft/TimeToSlide) * totalHeight);

	if (opening != null)
	{
		if(opening.style.display != 'block')
			opening.style.display = 'block';
		opening.style.height = (totalHeight - newClosedHeight)+'px';
	}

	if (closing != null)
		closing.style.height = newClosedHeight+'px';

	setTimeout("animate("+curTick+","+timeLeft+",'"+closingId+"','"+openingId+"')",33);
}

function updateCustomRibbonAvailableProductAttributes(form)
{
	var cur = new Date();
	result_timestamp = cur.getTime();
	setTimeout('updateTimedCustomRibbonAvailableProductAttributes('+result_timestamp+',document.getElementById(\''+form.id+'\'))',1500);
}

function updateTimedCustomRibbonAvailableProductAttributes(time,form)
{
// Turn on spinners
	update_spinner('material',true);
	update_spinner('width',true);
	update_spinner('price',true);

	if (time < result_timestamp)
		return;
	result_timestamp = time;

	updateAvailableProductAttributesWithCallback(form,'updateAppearance');
}

function setMaterial()
{
// Update the material
	updateMaterial();

// Update the other controls
	var form = document.getElementById('maverick');
	updateCustomRibbonAvailableProductAttributes(form);
}

function setWidth()
{
// Update the width
	updateWidth();

// Update the other controls
	var form = document.getElementById('maverick');
	updateCustomRibbonAvailableProductAttributes(form);
}

function setRibbonColor(ctl)
{
	ctl.form.doSubmit.value = '';
// Set the hidden control
	var ribbon_color = document.getElementById('ribbon_color');
	ribbon_color.value = ctl.value;
	updateRibbonColor();

// Update the other controls
	updateCustomRibbonAvailableProductAttributes(ctl.form);
}

function setPrintingColor(ctl)
{
	ctl.form.doSubmit.value = '';

// Set the hidden control
	var ink_color = document.getElementById('ink_color');
	var foil_color = document.getElementById('foil_color');
	var re = new RegExp(/image(\d+)_\d+/);
	var m = re.exec(ctl.id);
    if (m[1] == '1') {
        ink_color.value = ctl.value;
        foil_color.value = '';
    } else {
        ink_color.value = '';
        foil_color.value = ctl.value;
    }
	updatePrintingColor();

// Update the other controls
	updateCustomRibbonAvailableProductAttributes(ctl.form);
}

function toggleButton(type)
{
	var ctl = document.getElementById(type+'_ctl');
	ctl.value = (ctl.value == '') ? 'true' : '';
	updateTextImage();
	updateButton(type);
	updateCustomRibbonAvailableProductAttributes(ctl.form);
}

function updateAppearance()
{
	ensureSelection(6);
	updatePriceList(table_specs,document.getElementById('maverick'));
	updateMaterial();
	updateWidth();
	updateRibbonColor();
	updatePrintingColor();
	updateTextArea();
	updateTextImage();
	updateButton('bold');
	updateButton('italic');
	updateButton('underline');

// Turn off spinners
	update_spinner('material',false);
	update_spinner('width',false);
	update_spinner('price',false);
}

function update_spinner(n,on)
{
	var spinner = document.getElementById(n+'_spinner');
	if (!n) return;
	var img = (on) ? spinner_image : spacer_image;
	spinner.src = img.src;
	var display = (on) ? 'inline' : 'none';
	set_style_attribute(spinner,'display',display);
}

function ensureSelection(att)
{
// Make sure that at least one material is selected
	var inputs = document.getElementsByTagName('input');
	if (getMaterialAbbrev() == '')
	{
		for (var i=0;i<inputs.length;i++)
		{
			var c = inputs[i];
			if ((c.name == att+'[]' || c.name == att)  && !c.disabled)
			{
				c.checked = true;
				var form = document.getElementById('maverick');
				updateCustomRibbonAvailableProductAttributes(form);
				return;
			}
		}
	}
}

function updateMaterial()
{
// Get the main image and label
	var material_image = document.getElementById('material_image');
	var material_desc = document.getElementById('material_desc');

// Find the materials
	var inputs = document.getElementsByTagName('input');
	for (var i=0;i<inputs.length;i++)
	{
		var c = inputs[i];
		if (c.name == '6[]' || c.name == '6')
		{
		// Set the display state of the matching ribbon palette
			var p = document.getElementById('ribbonpalette'+c.value);
			set_style_attribute(p,'display',(c.checked) ? 'block' : 'none');

		// Set the main image and label to match the selected material
			if (c.checked)
			{
				var current_image = document.getElementById('image6_'+c.value);
				var current_desc = document.getElementById('label6_'+c.value);
				material_image.src = current_image.src;
				material_desc.innerHTML = current_desc.innerHTML+' Ribbon';
				material_desc.innerText = current_desc.innerText+' Ribbon';
			}
		}
	}
}

function updateWidth(ctl)
{
// Update the width label
	var width_desc = document.getElementById('width_desc');

// Find the width
	var inputs = document.getElementsByTagName('input');
	for (var i=0;i<inputs.length;i++)
	{
		var c = inputs[i];
		if ((c.name == '53[]' || c.name == '53') && c.checked)
		{
			var current_desc = document.getElementById('label53_'+c.value);
			width_desc.innerHTML = current_desc.innerHTML;
			width_desc.innerText = current_desc.innerText;
			break;
		}
	}

// Change the size based on the width
	updateSize();
}

function updateSize()
{
// Get the selected width
	var width_ctl = null;
	var size_ctl = document.getElementById('size_ctl');
	var form = size_ctl.form;
	for (var i=0;i<form.elements.length;i++)
	{
		var c = form.elements[i];
		if (c.name == '53' || c.name == '53[]')
		{
			width_ctl = c;
			break;
		}
	}
	if (!width_ctl)
		return;

// Update the size
	switch (width_ctl.value)
	{
	case '11915':
		size_ctl.value = 41;
		break;
	case '11925':
		size_ctl.value = 59;
		break;
	case '11935':
		size_ctl.value = 95;
		break;
	case '11905':
	default:
		size_ctl.value = 36;
		break;
	}
}

function getMaterialAbbrev()
{
	var inputs = document.getElementsByTagName('input');
	for (var i=0;i<inputs.length;i++)
	{
		var c = inputs[i];
		if ((c.name == '6[]' || c.name == '6') && c.checked)
		{
			switch (c.value)
			{
			case '11345':
				return 'dfs';
			case '11355':
				return 'grosgrain';
			case '11365':
				return 'satin-ace';
			case '11375':
				return 'twill';
			}
		}
	}
	return '';
}

function updateRibbonColor()
{
// Set the highlights
	var re = new RegExp(/^ribbonborder(\D+)(\d+)/);
	var m;
	var ribbon_color = document.getElementById('ribbon_color');
	var divs = document.getElementsByTagName('div');
	var material = getMaterialAbbrev();
	var ribbon_image = document.getElementById('ribbon_image');
	var ribbon_desc = document.getElementById('ribbon_desc');
	for (var i=0;i<divs.length;i++)
	{
		var d = divs[i];
		if (m = re.exec(d.id))
		{
			var selected = (m[2] == ribbon_color.value);
			d.className = (selected) ? 'selection_on' : 'selection_off';
			if (selected)
			{
			// Update the main image and description
				var current_image = document.getElementById('image'+material+'121_'+ribbon_color.value);
				if (ribbon_desc)
					ribbon_desc.innerHTML = ribbon_desc.innerText = current_image.alt;
				if (ribbon_image)
				{
					ribbon_image.src = current_image.src;
					ribbon_image.className = (current_image.alt == '') ? 'nooutline' : 'outline';
				}
			}
		}
	}
}

function updatePrintingColor()
{
// Set the highlights
	var re = new RegExp(/^printingborder(\d+)/);
	var m;
	var ink_color = document.getElementById('ink_color');
	var foil_color = document.getElementById('foil_color');
	var divs = document.getElementsByTagName('div');
	for (var i=0;i<divs.length;i++)
	{
		var d = divs[i];
		if (m = re.exec(d.id))
		{
			var selected = (m[1] == ink_color.value || m[1] == foil_color.value);
			d.className = (selected) ? 'selection_on' : 'selection_off';
			if (selected)
			{
			// Update the main image and description
				var current = (m[1] == ink_color.value) ? ink_color : foil_color;
				var att = current.name.replace('[]','');
				var v = current.value;
				var printing_image = document.getElementById('printing_image');
				var printing_desc = document.getElementById('printing_desc');
				var printing_color = document.getElementById('printing_color');
				var current_image = document.getElementById('image'+att+'_'+v);
				var current_color = document.getElementById('printingcolor'+v);
				if (printing_image)
					printing_image.src = current_image.src;
				if (printing_desc)
					printing_desc.innerHTML = printing_desc.innerText = current_image.alt;
				if (printing_color)
				{
					printing_color.className = (current_image.alt == '') ? 'nooutline' : 'outline';
					var bgcolor = get_style_attribute(current_color,'background-color');
					set_style_attribute(printing_color,'background-color',bgcolor);
				}
			}
		}
	}
}

function updateTextArea()
{
    // Get the elements
	var artwork_no = document.getElementById('artwork_no');
	var text_box = document.getElementById('text_box');
	var display = (artwork_no.checked) ? 'block' : 'none';
	set_style_attribute(text_box,'display',display);
}

function updateTextImage()
{
    // Hide or show the image
	var render_box = document.getElementById('render_box');
	var text_to_print = document.getElementById('text_to_print');
	var text_render = document.getElementById('text_render');
	var ribbon_ctl = document.getElementById('ribbon_color');
	var ink_ctl = document.getElementById('ink_color');
	var foil_ctl = document.getElementById('foil_color');
	var font_type_ctl = document.getElementById('font_type_ctl');
	if (text_to_print.value == '' ||
		ribbon_ctl.value == '' ||
		(ink_ctl.value == '' && foil_ctl.value == '') ||
		font_type_ctl.value == '')
	{
		set_style_attribute(render_box,'display','none');
		return;
	}
	set_style_attribute(render_box,'display','block');

// Format the url
	var re = new RegExp(/^(\d+)(\[\])/);
	var image_url = "/products/render/render.cgi?template=custom-ribbon&size[]=";

	var size_ctl = document.getElementById('size_ctl');
	if (size_ctl) image_url += size_ctl.value;
	var inputs = document.getElementsByTagName('input');

    var image_args = [];
    var color;
	for (var i=0;i<inputs.length;i++)
	{
		var c = inputs[i];
        /* deal with the colors separately */
        if (c.id != 'foil_color' && c.id != 'ink_color') {
            var res = re.exec(c.name);
            if (res && ((c.type != 'radio' && c.type != 'checkbox') || c.checked))
            {
                image_args.push(c.name+'='+c.value.replace(' ','+'));
            }
        } else {
           color = c.value.replace(' ','+');
        } 
	}

    image_args.push('color='+color);

	var inputs = document.getElementsByTagName('select');
	for (var i=0;i<inputs.length;i++)
	{
		var c = inputs[i];
		if (re.exec(c.name))
			image_args.push(c.name+'='+c.value);
	}


    image_url += '&' + image_args.join('&');

	text_render.src = image_url;
	text_render.width = 380;
	text_render.height = 86;

    // Update the display and links
	var render_link1 = document.getElementById('render_link1');
	render_link1.href = image_url;
	var render_link2 = document.getElementById('render_link2');
	render_link2.href = image_url;
}

function updateButton(type)
{
	var button = document.getElementById(type+'_button');
	var ctl = document.getElementById(type+'_ctl');
	button.src = (ctl.value == '') ? '/images/mailing_btn_'+type.charAt(0)+'.gif' : '/images/mailing_btn_'+type.charAt(0)+'_ON.gif';
}

function validateForm(form)
{
	if (form.doSubmit.value == '')
		return false;

// Get the controls
	var inputs = document.getElementsByTagName('input');
	var material_ctl = null;
	var width_ctl = null;
	var proof_ctl = null;
	for (var i=0;i<inputs.length;i++)
	{
		var c = inputs[i];
		if (c.type != 'radio' && !c.checked) continue;
		switch (c.name)
		{
		case '6':
		case '6[]':
			material = c;
			break;
		case '53':
		case '53[]':
			width = c;
			break;
		case '64':
		case '64[]':
			proof = c;
			break;
		}
	}
	var ribbon_ctl = document.getElementById('ribbon_color');
	var ink_ctl = document.getElementById('ink_color');
	var foil_ctl = document.getElementById('foil_color');
	var printing_ctl = (ink_ctl == null) ? foil_ctl : ink_ctl;
	var text_to_print = document.getElementById('text_to_print');
	var font_type_ctl = document.getElementById('font_type_ctl');
	var qty_ctl = document.getElementById('qty_ctl');
	var material_box = document.getElementById('material_box');
	var width_box = document.getElementById('width_box');
	var ribbon_box = document.getElementById('ribbon_box');
	var printing_box = document.getElementById('printing_box');
	var text_box = document.getElementById('text_box');
	var proof_box = document.getElementById('proof_box');
	var qty_box = document.getElementById('qty_box');

// Make sure the required controls are selected
	var i = 0;
	var err_msg = '';
	if (!material)
	{
		i++;
		err_msg += i+') Please select a material.\n';
		material_box.className = 'error_box';
	}
	else
		material_box.className = 'box';
	if (!width)
	{
		i++;
		err_msg += i+') Please select a width.\n';
		width_box.className = 'error_box';
	}
	else
		width_box.className = 'box';
	if (!ribbon_color || ribbon_color.value == '')
	{
		i++;
		err_msg += i+') Please select a ribbon color.\n';
		ribbon_box.className = 'error_box';
	}
	else
		ribbon_box.className = 'box';
	if (!printing_ctl || printing_ctl.value == '')
	{
		i++;
		err_msg += i+') Please select a printing color.\n';
		printing_box.className = 'error_box';
	}
	else
		printing_box.className = 'box';
	var text_err = false;
	if (text_to_print.value != '')
	{
		if (!font_type_ctl || font_type_ctl.value == '')
		{
			i++;
			err_msg += i+') Please select a font type.\n';
			text_err = true;
		}
	}
	text_box.className = (text_err) ? 'error_box' : 'box';
	if (!qty_ctl.value || isNaN(qty_ctl.replace('/','').replace(',','').replace(' ','')))
	{
		i++;
		err_msg += i+') Please enter a quantity.\n';
		qty_box.className = 'error_box';
	}
	else if (qty_ctl.value > 20)
	{
		i++;
		err_msg += i+') For quantities over 20 rolls, please contact a CustomerCare Representative.\n';
		qty_box.className = 'error_box';
	}
	else
		qty_box.className = 'box';
	if (i>0)
	{
		alert(err_msg);
		return false;
	}
	return true;
}