function callVariation(groupId) {

	var param = "id=" + groupId;
	var options = {
		method:"get",
		parameters:param,
		onComplete:renderForm
	};
	new Ajax.Request("/store/itemVariationData.do", options);
}

function renderForm(res) {

	xml = res.responseXML;

	if (! checkVariations(xml)) {
		$("storeForm").innerHTML = '<p>＊この商品は現在品切れ中です。</p>';
		$("addButton").hide();
		$("storeFormCaption").hide();
		return;
	}

	var children = xml.getElementsByTagName("instance");

	if (typeof(children) != "undefined" && children.length > 0) {
		renderSingleForm(xml);
	} else {
		renderMultipleForm(xml);
	}
	
}

function renderSingleForm(xml) {

	var groupId = xml.getElementsByTagName("variations")[0].getAttribute("groupId");

	var form = "";

	form += '<div class="number">';
	form += '<input type="hidden" name="id" value="' + groupId + '" />';
	form += '数量: ';
	form += '<select name="quantity">';
	for (var i=1; i<=10; i++) {
		form += '<option value="' + i + '">' + i + '</option>';
	}
	form += '</select>';
	form += '</div>';

	$("storeForm").innerHTML = form;
}

function renderMultipleForm(xml) {

	var groupId = xml.getElementsByTagName("variations")[0].getAttribute("groupId");

	var form = '';

	form += '<input type="hidden" name="id" value="' + groupId + '" />';

	var colors = xml.getElementsByTagName("color");
	if (colors != null && colors.length > 0) {
		if (colors.length == 1) {
			form += '<input type="hidden" name="color" value="' + colors[0].firstChild.nodeValue + '">';
		} else {
			form += '<div class="color">';
			var label = colors[0].getAttribute("label");
			if (label == null) {
				label = 'カラー: ';
			} else {
				label += ': ';
			}
			form += label;
			form += '<select name="color">';
			for (var i=0; i<colors.length; i++) {
				if (colors[i].getAttribute("hasStock") != "true") {
					continue;
				}
				var color = colors[i].firstChild.nodeValue;
				form += '<option value="' +  color + '">' + color + '</option>';
			}
			form += '</select>';
			form += '</div>';
		}
	}

	var sizes = xml.getElementsByTagName("size");
	if (sizes != null && sizes.length > 0) {
		form += '<div class="size">';
		var label = sizes[0].getAttribute("label");
		if (label == null) {
			label = 'サイズ: ';
		} else {
			label += ': ';
		}
		form += label;
		form += '<select name="size">';
		for (var i=0; i<sizes.length; i++) {
			if (sizes[i].getAttribute("hasStock") != "true") {
				continue;
			}
			var size = sizes[i].firstChild.nodeValue
				form += '<option value="' +  size + '">' + size + '</option>';
		}
		form += '</select>';
		form += '</div>';
	}

	form += '<div class="number">';
	form += '数量: ';
	form += '<select name="quantity">';
	for (var i=1; i<=10; i++) {
		form += '<option value="' + i + '">' + i + '</option>';
	}
	form += '</select>';
	form += '</div>';

	$("storeForm").innerHTML = form;
}


function checkVariations(xml) {

	var children = xml.getElementsByTagName("instance");
	if (typeof(children) != "undefined" && children.length > 0) {
		return (children[0].getAttribute("hasStock") == "true");
	}

	var colors = xml.getElementsByTagName("color");
	for (var i=0; i<colors.length; i++) {
		if (colors[i].getAttribute("hasStock") == "true") {
			return true;
		}
	}
	var sizes = xml.getElementsByTagName("size");
	for (var i=0; i<sizes.length; i++) {
		if (sizes[i].getAttribute("hasStock") == "true") {
			return true;
		}
	}
	return false;
}