// Set objects for dropdown lists.
var divisionObj = new Object( );

divisionObj = [{value:"gapmens", text:"Gap Men's"},
			{value:"accessories", text:"Accessories"},
			{value:"gapwomens", text:"Gap Women's"},
			{value:"maternity", text:"Maternity"},
			{value:"gapbody", text:"GapBody"},
			{value:"boysdivision", text:"Boys Division"},
			{value:"girlsdivision", text:"Girls Division"},
			{value:"kidsaccessories", text:"Accessories"},
			{value:"babygap", text:"BabyGap"}];

var sizeChartObj = new Object( );

sizeChartObj["gapmens"] = [{value:"2098", text:"Men's Shoes"},
                      {value:"2093", text:"Men's Bottoms"},
                      {value:"2094", text:"Men's Tops & Outerwear"},
                      {value:"2097", text:"Men's Belts"},
                      {value:"2095", text:"Men's Tall Tops & Outerwear"},
                      {value:"2096", text:"Men's Lounge & Underwear"}];
										
sizeChartObj["accessories"] = [{value:"2094", text:"Men's Tops & Outerwear"},
                      {value:"2096", text:"Men's Lounge & Underwear"},
                      {value:"2086", text:"Women's Shoes"},
                      {value:"2087", text:"Women's Belts"}];

sizeChartObj["gapwomens"] = [{value:"2081", text:"Women's Bottoms"},
                      {value:"2082", text:"Women's Tops & Outerwear"},
                      {value:"2083", text:"Women's Bras & Panties"},
                      {value:"2084", text:"Women's Swim"},
                      {value:"2085", text:"Women's Dresses"},
                      {value:"2086", text:"Women's Shoes"},
                      {value:"2087", text:"Women's Belts"}];

sizeChartObj["maternity"] = [{value:"2088", text:"Maternity Bottoms"},
                      {value:"2089", text:"Maternity Tops & Outerwear"},
                      {value:"2090", text:"Maternity Dresses"},
                      {value:"2092", text:"Maternity Shoes"},
                      {value:"2091", text:"Maternity Bras"}];

sizeChartObj["gapbody"] = [{value:"2083", text:"Women's Bras & Panties"},
                      {value:"2086", text:"Women's Shoes"},
                      {value:"2081", text:"Women's Bottoms"},
                      {value:"2082", text:"Women's Tops & Outerwear"},
                      {value:"2084", text:"Women's Swim"}];

sizeChartObj["boysdivision"] = [{value:"2103", text:"Boys Tops"},
                      {value:"2104", text:"Boys Bottoms"}];

sizeChartObj["girlsdivision"] = [{value:"2099", text:"Girls Tops"},
                      {value:"2100", text:"Girls Bottoms"}];

sizeChartObj["kidsaccessories"] = [{value:"2101", text:"Kids Shoes & Socks"},
                      {value:"2102", text:"Kids Shoes"},
                      {value:"2103", text:"Boys Tops"},
                      {value:"2104", text:"Boys Bottoms"},
                      {value:"2099", text:"Girls Tops"},
                      {value:"2100", text:"Girls Bottoms"}];

sizeChartObj["babygap"] = [{value:"2105", text:"Baby"},
                      {value:"2106", text:"Baby Shoes"}];
	
// Initialize division dropdown list.
function initOptions() {
	var selDivision = document.sizeChartList.scDivision;
	
	selDivision.options.length = 0;
	
	selDivision.options[selDivision.options.length] = new Option(resourceBundleValues.sizeChart.headerDropdown, "");
	
	for (var j = 0; j < divisionObj.length; j++) {
		selDivision.options[selDivision.options.length] = new Option(divisionObj[j].text, divisionObj[j].value);
	}
}
		
// Construct size chart type dropdown list by passing in string value of the division drop down list.
function setOptionsByValue(iDivisionValue) {
	var setDivision = iDivisionValue;
	var selType = document.sizeChartList.scType;
	 
	selType.options.length = 0;

	if (setDivision != "") {
		selType.options[selType.options.length] = new Option(resourceBundleValues.sizeChart.headerDropdown, "");
		
		for (var i = 0; i < sizeChartObj[setDivision].length; i++) {
			selType.options[selType.options.length] = new Option(sizeChartObj[setDivision][i].text, sizeChartObj[setDivision][i].value);
		}
	}
}

// Construct second dropdown list if the reference to the 'Select' element exists.
function setOptions(iDivision) {
	setOptionsByValue(iDivision.options[iDivision.selectedIndex].value);
}

// Set value of 'cid' field (hidden) with value of selected size chart option.
function setCid(iType) {
	return iType.options[iType.options.selectedIndex].value;
}

// Replaces text for Size Chart subheader
function replaceText(iText) {
    var newSpan = document.createElement("span");
    var newText = document.createTextNode(iText);
    newSpan.appendChild(newText);

    var para = document.getElementById("sizeChartContentHeader");
    var spanElm = document.getElementById("hdrText");
    para.replaceChild(newSpan,spanElm);
}

// Checks to see if there's a value for the 'cid'.  If yes, set selected indices of both dropdown lists.
function setSelectedIndices(cid) {
	var setDivisionIndex = -1;
	var setDivisionValue = "";
	var setTypeIndex = -1;
	var setTypeText = "";
	
	if (cid != "") {
		for (var k = 0; k < divisionObj.length && setDivisionIndex == -1; k++) {
			for (var l = 0; l < sizeChartObj[divisionObj[k].value].length && setTypeIndex == -1; l++) {
				if (sizeChartObj[divisionObj[k].value][l].value == cid.toString()) {
					setDivisionIndex = k;
					setDivisionValue = divisionObj[k].value;
					setTypeIndex = l;
					setTypeText = sizeChartObj[divisionObj[k].value][l].text;
				}
			}
		}
	} else {
		setDivisionIndex = -1;
		setTypeIndex = -1;
		return;
	}
	
	if (setTypeIndex >= 0) {
		document.sizeChartList.scDivision.selectedIndex = setDivisionIndex+1;
		setOptionsByValue(setDivisionValue);
		document.sizeChartList.scType.selectedIndex = setTypeIndex+1;
		replaceText(setTypeText);
		return;
	}
}

//  Hide divs that were specified by ID.  Pass in name of the ID.
function hideDiv(el) {
    var ele = $(el);
    if(ele)
        $(el).setStyle({display: 'none'});
}

//  Show divs that were specified by ID.  Pass in the name of ID.
function showDiv(el) {
    var ele = $(el);
    if(ele)
        $(el).setStyle({display: 'block'});
}

//  Hides and shows designated divs based on ID.  Pass in alphanumeric portion of element ID, numeric portion of element ID and 
//  the number of display block in the grouping.
function toggleDiv(el, elid, length) {
	var openDiv = el + elid;
	for (i=1; i<=length; i++) {
		if (elid == i) {
			showDiv(openDiv);
		} else {
			var closeDiv = el + i;
			hideDiv(closeDiv.toString());
		}
	}
}	

// Validate form
function validate() {
	var setDivision = document.sizeChartList.scDivision;
	var setType = document.sizeChartList.scType;

	if (setDivision.options[setDivision.options.selectedIndex].value == "") {
		alert(resourceBundleValues.sizeChart.sizeChartSelectError);
		setDivision.focus();
		return false;
	} else if (setType.options[setType.options.selectedIndex].value == "") {
		alert(resourceBundleValues.sizeChart.sizeChartSelectError);
		setType.focus();
		return false;
	} else {
		var getCid = setCid(setType);
		window.location.href = "/browse/sizeChart.do?cid=" + getCid;
	}
}
	
// Gets the url parameter and initializes dropdown lists and toggle layers.
Event.observe(window,"load",function() {
	var strCid = getQuerystringParam("cid");
	
	initOptions();

	setSelectedIndices(strCid);
	
	if (strCid.length > 0 && strCid != brandProperties.DEFAULTSIZECHARTID) { 
		toggleDiv("cid", "2", 2);
		toggleDiv("tab", "1", 2);
	} else {
		toggleDiv("cid", "1", 2);
	}
});