function changeThumbnail(id,name){
	document.itemPhoto.src = "/store/images/" + id +"/"+ name + ".jpg";		
}
		


		
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;
	var groupId = xml.getElementsByTagName("variations")[0].getAttribute("groupId");

	var form = '<form action="/store/addItemToBasket.do">';
	form += '<input type="hidden" name="id" value="' + groupId + '" />';
	form += '<table border="0" cellpadding="0" cellspacing="0" width="480" summary="basket">';
	form += '<tr>';

	form += '<td valign="top"  width="10%" nowrap="nowrap">';

	var colors = xml.getElementsByTagName("color");
	if (colors != null && colors.length > 0) {
		form += 'カラー: </td>';
		form += '<td valign="top" width="10%"  style="padding-right: 24px;">';
		form += '<select name="color">';
		for (var i=0; i<colors.length; i++) {
			var color = colors[i].firstChild.nodeValue
			form += '<option value="' +  color + '">' + color + '</option>';
		}
		form += '</select>';
		form += '</td>';
	} else {
		form += '</td>';
		form += '<td valign="top" width="100"></td>';
	}

	form += '<td valign="top"  width="10%" nowrap="nowrap">';

	var sizes = xml.getElementsByTagName("size");
	if (sizes != null && sizes.length > 0) {
		form += 'サイズ: </td>';
		form += '<td valign="top" width="10%">';
		form += '<select name="size">';
		for (var i=0; i<sizes.length; i++) {
			var size = sizes[i].firstChild.nodeValue
			form += '<option value="' +  size + '">' + size + '</option>';
		}
		form += '</select>';
		form += '</td>';
	} else {
		form += '</td>';
		form += '<td valign="top" width="100"></td>';
	}

	form += '<td valign="top" align="right"><input type="submit" value="かごに入れる"></td>';
	form += '</tr>';
	form += '</table>';
	form += '</form>';

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