window.addEvent('domready', function() {

	if ($$('form.childProductForm').length > 0) {
		$$('form.childProductForm input[type=submit]').setStyle('display', 'none');
	
		//get the selectbox, will return an array cos that's what mootools does
		var selectBoxes = $('childProduct');

		
			selectBoxes.addEvent('change', function(event) {
				var parent = this.getParent().getParent();	//returns div.productDescription element
			
				//get the image div to replace the content
				var imageDiv = parent.getParent('div.contentColumn').getPrevious().getElement('div.mainImage');
				//get the description div to replace the content
				var descriptionDiv = parent.getElement('div.shortDescription');
			
				var longDescriptionDiv = parent.getElement('div.longDescription');
			
				
				//get the members price span
				var membersPrice = parent.getElement('span#membersPrice');
				
				//get the selected product ID from the select box
				var prod_id = this.options[this.selectedIndex].value;
		
	
				//if we're not on the search page we want to replace the title that is in a separate div
				var titleH1 = parent.getParent("div.contentColumn").getElement("H1");
				var AJAXdata = 'prod_id='+prod_id;

				//make the ajax call, replace text, on complete fade out the image 
				//horrible IE specific hack - should be revisited
				if(navigator.appName.indexOf("Microsoft")>=0) {
			   	 var req = new Request({ 
			    	method: 'get', 
			    	url: 'http://'+window.location.host+'/assets/shop/productChildrenAJAX.php?'+AJAXdata,
				  	onSuccess: function(response) {

						new Fx.Tween(imageDiv).start('opacity',0).chain(
							function() {
						
							
								var contentObject = new ActiveXObject("Msxml2.DOMDocument.3.0");
							    contentObject.loadXML(response);

								objNodeList = contentObject.getElementsByTagName("longdescription");
							   	for (var i=0; i<objNodeList.length; i++) {
							    	var description = objNodeList.item(i).text;
									if(longDescriptionDiv) {
										longDescriptionDiv.set('html',description);
									}
							   	}
							
								objNodeList = contentObject.getElementsByTagName("shortdescription");
							   	for (var i=0; i<objNodeList.length; i++) {
							    	var description = objNodeList.item(i).text;
									if(descriptionDiv) {
										descriptionDiv.set('html',description);
									}
							   	}
							
								objNodeList = contentObject.getElementsByTagName("membersprice");
							   	for (var i=0; i<objNodeList.length; i++) {
							    	var membersprice = objNodeList.item(i).text;
									membersPrice.set('html',membersprice);
							   	}
		
								objNodeList = contentObject.getElementsByTagName("title");
							   	for (var i=0; i<objNodeList.length; i++) {
							    	var title = objNodeList.item(i).text;
									titleH1.set('html', title);
							   	}																			

								objNodeList = contentObject.getElementsByTagName("image");
							   	for (var i=0; i<objNodeList.length; i++) {
							    	var image = objNodeList.item(i).text;
									imageDiv.set('html', image);
							   	}				
								this.start('opacity',1);		
							});
					  	}
				    }).send();
				} else {
					var req = new Request.HTML({ 
				    	method: 'get', 
				    	url: 'http://'+window.location.host+'/assets/shop/productChildrenAJAX.php', 
				      	data: AJAXdata, 
					  	onSuccess: function(responseTree, responseElements) {
							new Fx.Tween(imageDiv).start('opacity',0).chain(
								function() {
									var content = responseElements.filter('replacement_content');

									content.each(function(content_element) {						
										var shortdescription = content_element.getElement('shortdescription').get('text');
										var longdescription = content_element.getElement('longdescription').get('text');
										var image = content_element.getElement('image').get('text');
										var membersprice = content_element.getElement('membersprice').get('text');
										
										var title = content_element.getElement('title').get('text');
										titleH1.set('html', title)
										
										if(descriptionDiv) {
											descriptionDiv.set('html', shortdescription);
										}
										
										if(longDescriptionDiv) {
											longDescriptionDiv.set('html', longdescription);
										}
										membersPrice.set('html', membersprice);
										
										imageDiv.set('html', image);
									})
									this.start('opacity',1);
							});
						}
					}).send();
				}
				
				//also change the hidden input field of the add to basket form to change the product id
				var addToBasketForm = this.getParent().getNext('form');
			
				var inputIDField = addToBasketForm.getChildren('input[name=basket_item]');
				var productDetailsIDField = inputIDField.getSiblings('input[name="showProductDetails"]');
				
				inputIDField.set('value', prod_id);
				productDetailsIDField[0].set('value', prod_id);
			

			});
		
	}
});