var W3CDOM_virtual_sample = document.getElementById;	// test to see if the browser is up to snuff

var chair_back_id = 'chairBack';
var chair_cushion_id = 'sampleProductChairCushion';
var frame_img_id = 'sampleProductFrame';
var chair_back_node;
var chair_cushion_node;
var frame_node;

// these gets set in the inline javascript in the onload()
var model_no;	
var frame_color;
var chair_back_color;
var chair_cushion_color;

var nav_form_node;
var nav_form_id = 'color_selections';

var current_custom_section_id;	// this is the id of the section that holds custom content (like frame color swathces or upload image form)

var model_headline_text_id = 'modelHeadline';
var model_headline_text_node;


//----------------------------------------------------------------------

function initVirtualSample() {
	if ( ! W3CDOM_virtual_sample) {
		alert('This browser is not capable of creating a virtual sample. To use this feature, please upgrade your browser or install a newer browser such as FireFox.');
		return;
	}
	
	
	chair_back_node = document.getElementById(chair_back_id);
	chair_cushion_node = document.getElementById(chair_cushion_id);
	frame_node = document.getElementById(frame_img_id);
	
	nav_form_node = document.getElementById(nav_form_id);
	
	// display the frame color swatch section
	showNode('modelThumbs');
	current_custom_section_id = 'modelThumbs';
	
	markColorSelected(model_no, model_no);
	
	
	model_headline_text_node = document.getElementById(model_headline_text_id);
	
}

//----------------------------------------------------------------------

function swapImage(color_name, color_type) {
	
	switch(color_type) {
		case 'frame':
			frame_color = color_name;
			swapFrame();
			break;
		case 'chair_back':
			chair_back_color = color_name;
			swapChairBack();
			break;
		case 'chair_cushion':
			chair_cushion_color = color_name;
			swapChairCushion();
			break;	
	}
	
	//changeLinkColor();
}

//----------------------------------------------------------------------

function swapFrame() {
	// format the string of the new background image
	var str = 'url(' + img_dir_path_relative + model_no + '/main_image/frame/' + frame_color + '.jpg)';
	
	// update the background image
	frame_node.style.backgroundImage = str;
	
	markColorSelected( 'frame_' + frame_color , 'frame_' + nav_form_node.selected_frame.value);
	
	// update the hidden value of the navigation form 
	nav_form_node.selected_frame.value = frame_color;
	
}

//----------------------------------------------------------------------

function swapChairBack() {
	// format the string of the new image
	var str = img_dir_path_relative + model_no + '/main_image/chair_back/' + chair_back_color + '.gif';
	// update the image
	chair_back_node.src = str;
	
	//markColorSelected(chair_back_color, 'chair_back' , nav_form_node.selected_chair_back.value);
	markColorSelected('chair_back_' + chair_back_color, 'chair_back_' + nav_form_node.selected_chair_back.value);
	
	// update the hidden value of the navigation form 
	nav_form_node.selected_chair_back.value = chair_back_color;
}


//----------------------------------------------------------------------

function swapChairCushion() {
	
	var this_cushion = chair_cushion_color;
	if (model_no == '4400BX') {
		this_cushion = 'anime_' + chair_cushion_color;
	}
	
	// format the string of the new background image
	var str = 'url(' + img_dir_path_relative + model_no + '/main_image/chair_cushion/' + this_cushion + '.gif)';
	// update the background image
	chair_cushion_node.style.backgroundImage = str;
	
	//markColorSelected(chair_cushion_color, 'chair_cushion' , nav_form_node.selected_chair_cushion.value);
	markColorSelected('chair_cushion_' + chair_cushion_color, 'chair_cushion_' + nav_form_node.selected_chair_cushion.value);
	
	// update the hidden value of the navigation form 
	nav_form_node.selected_chair_cushion.value = chair_cushion_color;
}


//----------------------------------------------------------------------

function displayCustomSection(custom_section_id) {
	//hideAllCustomSections();
	//var custom_section_id = element.options[element.selectedIndex].value;
	
	hideNode(current_custom_section_id);
	showNode(custom_section_id);
	current_custom_section_id = custom_section_id;
}


//----------------------------------------------------------------------

function changeModel(p_model_no) {
	//model_no = element.options[element.selectedIndex].value;
	model_no = p_model_no;
	
	swapFrame();
	swapChairCushion();
	swapChairBack();
	
	
	markColorSelected(model_no, nav_form_node.selected_model.value);
	
	// update the hidden value of the navigation form 
	nav_form_node.selected_model.value = model_no;
	
	
	if (locations[p_model_no]['chairBackColor_link'] == true) {
		showNode('chairBackColor_link');
		showNode('chair_back_logo_upload_form');
		nav_form_node['chair_back_logo_display'].value = 'true';
	} else {
		hideNode('chairBackColor_link');
		hideNode('chair_back_logo_upload_form');
		nav_form_node['chair_back_logo_display'].value ='false';
	}
	
	if (locations[p_model_no]['frameColor_link'] == true) {
		showNode('frameColor_link');
	} else {
		hideNode('frameColor_link');
	}
	
	
	//alert(model_headline_text_node.childNodes[0].nodeValue);
	model_headline_text_node.childNodes[0].nodeValue = p_model_no;
	
}


//----------------------------------------------------------------------

function showNode(id) {
	var the_node = document.getElementById(id);
	the_node.style.display = 'block';
}

//----------------------------------------------------------------------

function hideNode(id) {
	var the_node = document.getElementById(id);
	the_node.style.display = 'none';
}

//----------------------------------------------------------------------
/*
function hideAllCustomSections() {
	//var select_node = document.getElementById('custom_sections');
	for ( var x=0; x<customize_menu_node.options.length; x++ ) {
		var option_value = customize_menu_node.options[x].value;
		var node = document.getElementById(option_value);
		node.style.display = 'none';	
	}
}*/

//----------------------------------------------------------------------
/*
function updateCustomizeMenu() {
	
	removeAllCustomizeMenuOptions();
	
	var num_options = default_customize_menu_options.length;
	// loop the default options for the customize select menu
	for (var x=0; x<num_options; x++) {
		// if the child is an option node
		if (default_customize_menu_options[x].nodeName == 'OPTION') {
			// loop each location for the selected model
			for (var loc in locations[model_no]) {
				// if the id of the current option node equals the current location
				if (default_customize_menu_options[x].id == loc) {
					// if the location is available for the selected model
					if ( locations[model_no][loc] == true) {
						// add the option node to the customize select menu
						customize_menu_node.appendChild(default_customize_menu_options[x]);
					}
				}
			}
		}
	}
	
	customize_menu_node.selectedIndex = 0;	// reset the customize menu to the first option
	displayCustomSection(customize_menu_node);	// reset the page so the first option content displays
}*/

//----------------------------------------------------------------------
/*
function removeAllCustomizeMenuOptions() {
	while(customize_menu_node.hasChildNodes() == true)
	{
		customize_menu_node.removeChild(customize_menu_node.childNodes[0]);
	}
}*/

//----------------------------------------------------------------------
/*
function changeLinkColor() {
	var link_node = document.getElementById(current_custom_section_id + '_link');
	
	if ( link_node.getAttribute('class') != null) {
		link_node.setAttribute('class', 'visitedLink');
	} else {
		// win ie version
		link_node.setAttribute("className", "visitedLink");
	}
	
	
}
*/
//----------------------------------------------------------------------

//function markColorSelected(color_name, color_type , prev_color) {
function markColorSelected(new_id, old_id) {
	
	//var dd_node = document.getElementById( color_type + '_' + prev_color);
	//alert(old_id); 
	var dd_node = document.getElementById(old_id);
	dd_node.style.color = '#000';
	dd_node.style.backgroundColor = '';
	
	
	//dd_node = document.getElementById( color_type + '_' + color_name);
	//alert(new_id);
	dd_node = document.getElementById(new_id);
	dd_node.style.color = '#fff';
	dd_node.style.backgroundColor = '#666';
	
}