var currentlyVisible = 'feature';
var currentColorSwatch;
var currentSizeOption;
var productId;
var selectedTab = 'info';

function doProcess(toDo, args) {
	var processURL = contextPath + '/catalog/product_process.jsp?toDo=' + toDo + '&pid=' + productId;
	if (document.getElementById('productProcess'))
		document.getElementById('productProcess').src = argsToURL(processURL, args);
}

function xColors(extantColorsArray) {
	var colorSwatches = document.getElementById('colorSection').getElementsByTagName('DIV');
	for (var i = 0; i < colorSwatches.length; i++) {
		var colorSwatchId = colorSwatches[i].id;
		if (contains(extantColorsArray.keys(), colorSwatchId)) {
			colorSwatches[i].className = 'colorSwatch';
			colorSwatches[i].setAttribute('sku', extantColorsArray[colorSwatchId]);
		}
		else {
			colorSwatches[i].className = 'colorSwatch colorX';
			colorSwatches[i].setAttribute('sku', '');
		}
	}
}

function xSizes(extantSizesArray) {
	var size = document.getElementById('size');
	var sizeOptions = size.options;
	for (var i = 1; i < sizeOptions.length; i++) {
		var sizeOptionId = sizeOptions[i].id;
		if (contains(extantSizesArray.keys(), sizeOptionId)) {
			sizeOptions[i].style.color = '#000000';
			sizeOptions[i].setAttribute('sku', extantSizesArray[sizeOptionId]);
		}
		else {
			sizeOptions[i].style.color = '#AAAAAA';
			sizeOptions[i].setAttribute('sku', '');
		}
	}
}

function chooseSize(size) {
	if (size.selectedIndex == 0) { 
		xColors({});
	}
	else {
		// HACK TO ACCOUNT FOR A SIZE WITH A HYPHEN IN IT LIKE '1-SZ' 
		if (size.options[size.selectedIndex].value == '1-SZ-SP'){
			doProcess('chooseSize', {'sizeCode':'1-SZ', 'dimensionCode':'SP'});
		}
		else{
			var codes = size.options[size.selectedIndex].value.split('-');
			doProcess('chooseSize', {'sizeCode':codes[0], 'dimensionCode':codes[1]});
		}
	}
	validateSKU(size.options[size.selectedIndex].getAttribute('sku'));
}

function chooseColor(colorSwatch) {
	if (currentColorSwatch) {
		currentColorSwatch.style.borderWidth = '1px';
		currentColorSwatch.style.padding = '1px';
	}
	colorSwatch.style.borderWidth = '2px';
	colorSwatch.style.padding = '0px';
	doProcess('chooseColor', {'colorCode':colorSwatch.id.substring(7),'pid':productId});
	validateSKU(colorSwatch.getAttribute('sku'));
	currentColorSwatch = colorSwatch;
}

function validateSKU(sku) {
	if (sku == null) {
		//do nothing
	}
	else if (sku == '') {
		document.getElementById('skuIdField').value = '';
		document.getElementById('quantity').disabled = true;
		document.getElementById('submitButton').className = 'disabled';
		errorMsg('Not available in this size/color combination');
	}
	else {
		document.getElementById('skuIdField').value = sku;
		document.getElementById('quantity').disabled = false;
		document.getElementById('submitButton').className = '';
		errorMsg('');
	}
}

function errorMsg(msg) {
	document.getElementById('errorMsg').innerHTML = msg;
}

function showSwatchDetail(event) {
	var colorSwatch = getTarget(event, 'DIV');
	if (is.ie) {
		var colorSwatchShim = document.getElementById('colorSwatchShim');
		colorSwatchShim.style.display = 'block';
	}
	var colorSwatchDetail = document.getElementById('colorSwatchDetail');
	colorSwatchDetail.style.display = 'block';
	colorSwatchDetail.getElementsByTagName('SPAN')[0].innerHTML = colorSwatch.getAttribute('name');
	colorSwatchDetail.getElementsByTagName('IMG')[0].src = colorSwatch.getAttribute('detail');
	if (is.ie) 	colorSwatch.appendChild(colorSwatchShim);
	colorSwatch.appendChild(colorSwatchDetail);
}

function hideSwatchDetail(event) {
	if (is.ie) document.getElementById('colorSwatchShim').style.display = 'none';
	document.getElementById('colorSwatchDetail').style.display = 'none';
}

function tabSwitch(tab) {
	if (selectedTab != tab) {
		selectedTab = tab;
		document.getElementById('infoTab').className = (tab == 'info' ? 'active' : '');
		document.getElementById('fitTab').className = (tab == 'fit' ? 'active' : '');
		toggle('infoBlock');
		toggle('fitBlock'); 
	}
}

function chooseView(imgType) {
	document.getElementById(currentlyVisible + 'Image').style.display = 'none';
	document.getElementById(imgType + 'Image').style.display = 'block';
	currentlyVisible = imgType;
}

function showZoom() {
	if (currentlyVisible != 'zoom') {
		var zoomIframe = document.getElementById('zoomImage').getElementsByTagName('IFRAME')[0];
		zoomIframe.src = zoomIframe.getAttribute(currentlyVisible + 'URL');
		zoomIframe.style.display = 'block';
		chooseView('zoom');
	}
}

function showPanel(tab)  {
	var sizeChartTabs = document.getElementById('sizeChartTabs').getElementsByTagName('A');
	for (var i = 0; i < sizeChartTabs.length; i++) {
		sizeChartTabs[i].className = (sizeChartTabs[i] == tab ? 'active' : '');
		document.getElementById(sizeChartTabs[i].getAttribute('panel') + 'Panel').style.display = (sizeChartTabs[i] == tab ? 'block' : 'none');
	}
}