﻿


var lastTarget1 = null;
var lastTarget2 = null;
var lastTarget3 = null;

function ToggleProducts(target, sectionIndex)
{
    target = GetObject(target);
    
    if (target)
    {
        if (target.className.toLowerCase().indexOf('show') == -1)
        {
            target.className = target.className.replace("hide", "show");
            
            switch (parseInt(sectionIndex))
            {
                case 0:
                    if (lastTarget1 == null)
                        lastTarget1 = GetObject('benefits');
                    
                    lastTarget1.className = lastTarget1.className.replace("show", "hide");
                    lastTarget1 = target;
                    
                    break;
                
                case 1:
                    if (lastTarget2 == null)
                        lastTarget2 = GetObject('product1');
                    
                    lastTarget2.className = lastTarget2.className.replace("show", "hide");
                    lastTarget2 = target;
                    
                    break;
                
                case 3:
                    if (lastTarget3 == null)
                        lastTarget3 = GetObject('overview');
                    
                    lastTarget3.className = lastTarget3.className.replace("show", "hide");
                    lastTarget3 = target;
                    
                    break;
            }
        }
    }
    
    return;
}



function ToggleProductResults(index)
{
    var divProductResults = GetObject('divProductResults');
    var resultItems = divProductResults.getElementsByTagName('div');
    var tdProductsImage = GetObject('tdProductsImage');
    
    if (divProductResults && parseInt(resultItems.length) > 0)
    {
        for (var r = 0; r < parseInt(resultItems.length); r++)
        {
            if (r == index)
            {
                tdProductsImage.className = resultItems[r].id.toString();
                resultItems[r].className = resultItems[r].className.replace('hide', 'show');
            }
            else
            {
                resultItems[r].className = resultItems[r].className.replace('show', 'hide');
            }
        }
    }
    
    return;
   }


function ToggleDetails(index, action)
{
	var firstFeature = GetObject('feature_block0');
	var details_block = GetObject('details_block');
	var details_block_items = details_block.getElementsByTagName('div');

	if (details_block_items.length > 0)
	{
		for (var i = 0; i < details_block_items.length; i++)
		{
			if (action == 0)
			{
				firstFeature.className = firstFeature.className.replace('hide', 'show');
				details_block_items[i].className = details_block_items[i].className.replace('show', 'hide');
			}
			
			if (action == 1)
			{
				if (details_block_items[i].id.indexOf('feature_block') != -1)
				{
					if (details_block_items[i].id == ('feature_block' + index.toString()))
					{
						firstFeature.className = firstFeature.className.replace('show', 'hide');
						details_block_items[i].className = details_block_items[i].className.replace('hide', 'show');
					}
					else
					{
						details_block_items[i].className = details_block_items[i].className.replace('show', 'hide');
					}
				}
			}
		}
	}

	return;
}

var lastTab = null;
var lastTabCaller = null;

function ToggleProductsTab(caller, index)
{
	var target = GetObject('tab_section' + index.toString());
	
	if (lastTab == null)
		lastTab = GetObject('tab_section1');

	if (lastTab != null && lastTab.id == target.id)
		return;

	if (lastTabCaller == null)
		lastTabCaller = GetObject('tab_left');

	var product_tabs = GetObject('product_tabs');

	product_tabs.className = 'tabs' + index.toString();
	target.className = target.className.replace('hide', 'show');
	caller.className = caller.className.replace('gray', 'blue');

	lastTab.className = lastTab.className.replace('show', 'hide');
	lastTabCaller.className = lastTabCaller.className.replace('blue', 'gray');

	lastTab = target;
	lastTabCaller = caller;

	return;
}


var lastBrushCaller = null;
var lastBrush = null;
var lastAccessory = null;
var selectedBrushCaller = null;

function ToggleBrushHead(caller, brushIndex)
{
	var brush = GetObject('divBrushHeadInfo' + brushIndex.toString());
	var all_brushes = GetObject('all_brushes');

	brush.className = brush.className.replace('hide', 'show');

	if (lastBrush != null && lastBrush.id != brush.id)
	{
		lastBrush.className = lastBrush.className.replace('show', 'hide');
	}
	
	all_brushes.className = all_brushes.className.replace('show', 'hide');

	ToggleBrushHeadAccessories(null, lastAccessory);
	ToggleBrushHeadSelectedState(caller, brushIndex, 2);

	lastBrushCaller = caller;
	lastBrush = brush;

	return;
}


function ToggleBrushHeadSelectedState(caller, brushIndex, action)
{
	if (action == 0)
	{
		caller.className = caller.className.replace('brush_head_over', 'brush_head_out');
	}

	if (action == 1)
	{
		caller.className = caller.className.replace('brush_head_out', 'brush_head_over');
	}

	if (action == 2)
	{
		selectedBrushCaller = caller;
	}
	
	if (lastBrushCaller != null)
	{
		lastBrushCaller.className = lastBrushCaller.className.replace('brush_head_over', 'brush_head_out');
	}

	if (selectedBrushCaller != null)
	{
		selectedBrushCaller.className = selectedBrushCaller.className.replace('brush_head_out', 'brush_head_over');
	}
	
	return;
}


function ToggleBrushHeadAccessories(caller, target)
{
	target = GetObject(target);

	var divProductResults = GetObject('divProductResults');

	if (target)
	{
		if (target.className.indexOf('hide') != -1 && caller != null)
		{
			target.className = target.className.replace('hide', 'show');
			divProductResults.className = divProductResults.className.replace('hide', 'show');
		}
		else
		{
			target.className = target.className.replace('show', 'hide');
			divProductResults.className = divProductResults.className.replace('show', 'hide');
		}
		
		if (lastAccessory != null && lastAccessory.id != target.id)
		{
			lastAccessory.className = lastAccessory.className.replace('show', 'hide');
		}

		lastAccessory = target;
	}

	return;
}


var lastStepContainerIndex = 1;
var brushFinderSelection = new Array();

function ToggleBrushFinderStep(stepType, stepIndex, isLastStep)
{
	var results_container = GetObject('results_container');
	var divAlternateBrush = GetObject('divAlternateBrush');

	if (results_container)
	{
		results_container.className = results_container.className.replace('show', 'hide');
	}
	
	if (divAlternateBrush)
	{
		divAlternateBrush.className = divAlternateBrush.className.replace('show', 'hide');
	}
	
	if (stepType != null)
	{
		var selectedControl = GetSelectionInControlGroup('Group' + (stepIndex - 1).toString());

		if (selectedControl != null)
		{
			brushFinderSelection.push(selectedControl.value);
		}
		else
		{
			alert('Please identify your ' + stepType + '       ');

			return;
		}
	}
	else
	{
		brushFinderSelection.pop();
	}

	var step_container = GetObject('step' + stepIndex.toString() + '_container');
	
	if (step_container != null)
	{
		step_container.className = step_container.className.replace('hide', 'show');
	}

	var lastStepContainer = null;
	
	if (stepIndex != lastStepContainerIndex)
	{
		lastStepContainer = GetObject('step' + lastStepContainerIndex.toString() + '_container');

		if (lastStepContainer != null)
		{
			lastStepContainer.className = lastStepContainer.className.replace('show', 'hide');
		}
	}

	lastStepContainerIndex = stepIndex;
	
	if (isLastStep)
	{
		ShowBrushFinderRecommendation();
	}

	return;
}


function ShowBrushFinderRecommendation()
{
	var results_container = GetObject('results_container');

	if (results_container)
	{
		results_container.className = results_container.className.replace('hide', 'show');

		var identifiedSelection = null;
		var span = null;
		var selectedCombo = '';
		
		for (var b = 0; b < brushFinderSelection.length; b++)
		{
			identifiedSelection = brushFinderSelection[b].split(';');

			span = GetObject('spnIdentifyResult' + (b + 1).toString());

			if (span)
			{
				span.innerHTML = identifiedSelection[0];
			}
			
			selectedCombo += (b + 1).toString() + identifiedSelection[1].toUpperCase();
		}

		LoadBrushRecommendation(selectedCombo);
	}

	return;
}


var xmlHttp = null;

// --- AJAX METHODS --- //
function LoadBrushRecommendation(selectedCombo)
{
	xmlHttp = null;

	var results_loading = GetObject('results_loading');

	if (results_loading)
	{
		results_loading.className = results_loading.className.replace('hide', 'show');
	}
	
	try
	{
		// IE
		if (window.ActiveXObject)
		{
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		// Mozilla, etc...
		else if (window.XMLHttpRequest)
		{
			xmlHttp = new XMLHttpRequest();
		}
		else
		{
			return;
		}
	}
	catch(err)
	{
		return;
	}

	xmlHttp.onreadystatechange = function()
	{
		if (CheckResponseStatus())
		{
			try
			{
				ParseBrushRecommendation();
			}
			catch (err)
			{
				return;
			}
		}
	}
	
	xmlHttp.open("GET", document.location.href.replace('.aspx', '.ashx') + "?combo=" + selectedCombo, true);
	xmlHttp.send(null);
	
	return;
}


function CheckResponseStatus()
{
	if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
    {
        return true;
    }
}


function ParseBrushRecommendation()
{
	var xmlResponse = xmlHttp.responseXML.documentElement;
	
	if (xmlHttp.responseText.length > 0)
	{
		var results_loading = GetObject('results_loading');
		var span = results_loading.getElementsByTagName('span')[0];

		if (results_loading)
		{
			results_loading.className = results_loading.className.replace('show', 'hide');
			
			if (span)
			{
				span.innerHTML = 'Brush Found!';
			}
		}

		var brushName = xmlResponse.getElementsByTagName('BrushName')[0];
		var brushDescription = xmlResponse.getElementsByTagName('BrushDescription')[0];
		var brushFile = xmlResponse.getElementsByTagName('BrushFile')[0];
		var brushIndex = xmlResponse.getElementsByTagName('BrushIndex')[0];
		var brushAlternate = xmlResponse.getElementsByTagName('BrushAlternateName')[0];
		var brushAlternateFile = xmlResponse.getElementsByTagName('BrushAlternateFile')[0];
		var results_info = GetObject('results_info');
		var aLearnMore = GetObject('aLearnMore');
		var imgLearnMore = aLearnMore.getElementsByTagName('img')[0];
		
		var results_container = GetObject('results_container');
		
		if (results_container)
		{
			results_container.className = 'result_' + brushIndex.childNodes[0].nodeValue.toString() + ' show';
		}
		
		if (results_info)
		{
			var h4 = results_info.getElementsByTagName('h4')[0];
			var p = results_info.getElementsByTagName('p')[0];

			if (h4)
			{
				h4.innerHTML = brushName.childNodes[0].nodeValue;
			}

			if (p)
			{
				p.innerHTML = brushDescription.childNodes[0].nodeValue;
			}
			
			if (aLearnMore)
			{
				aLearnMore.href = brushFile.childNodes[0].nodeValue;
				aLearnMore.title = 'Learn More about the ' + brushName.childNodes[0].nodeValue + ' brush';
				imgLearnMore.title = 'Learn More about the ' + brushName.childNodes[0].nodeValue + ' brush';
				imgLearnMore.alt = 'Learn More about the ' + brushName.childNodes[0].nodeValue + ' brush';
			}
		}

		if (brushAlternate.childNodes[0].nodeValue.length > 0 && brushAlternateFile.childNodes[0].nodeValue.length > 0)
		{
			var divAlternateBrush = GetObject('divAlternateBrush');
			var spnAlternateBrush = GetObject('spnAlternateBrush');
			var aAlternateBrush = GetObject('aAlternateBrush');
			
			if (divAlternateBrush && spnAlternateBrush && aAlternateBrush)
			{
				divAlternateBrush.className = divAlternateBrush.className.replace('hide', 'show');
				spnAlternateBrush.innerHTML = brushAlternate.childNodes[0].nodeValue;
				aAlternateBrush.href = brushAlternateFile.childNodes[0].nodeValue;
				aAlternateBrush.title = 'Learn More about the ' + brushAlternate.childNodes[0].nodeValue + ' brush';
			}
		}
	}

	xmlHttp = null;
	
    return;
}


// --- HELPER METHODS --- //
function GetObject(obj)
{
    return ((typeof(obj) != 'object') ? document.getElementById(obj) : obj);
}


function GetSelectionInControlGroup(controlGroup)
{
	controlGroup = document.getElementsByName(controlGroup);

	var control = null;

	if (controlGroup)
	{
		for (var c = 0; c < parseInt(controlGroup.length); c++)
		{
			if (controlGroup[c].checked)
			{
				control = controlGroup[c];
				break;
			}
		}
	}
	
	return control;
}