/**********************************************

*** NEW ***
Does NOT replace current commerceProducts.js
Deals with SINGLE PRODUCT only, using refactored backend

**********************************************/

/* Refactored SINGLE PRODUCT panel functions */
var objProductUpdate = new Spry.Data.XMLDataSet("", "/product");
var objProductImages = new Spry.Data.NestedXMLDataSet(objProductUpdate, "/product/images/image", {distinctOnLoad:true});
var objProductSizes = new Spry.Data.NestedXMLDataSet(objProductUpdate, "sizes/size", {distinctOnLoad:true});
var objProductRelated = new Spry.Data.NestedXMLDataSet(objProductUpdate, "related/product", {distinctOnLoad:true});
var objProductRelatedImages = new Spry.Data.NestedXMLDataSet(objProductUpdate, "related/product/images/image[1]", {distinctOnLoad:true});

/********************************************** Event: product updates. Product level data replaced **********************************************/
objProductUpdateObserver = new Object();
objProductUpdateObserver.onPostLoad = function(notifier, data) {
	
	//alert("main event");
	
	// check the panel is there first
	if (!$('productPanel')) { return false; }
	
	// remove all loading indicators
	var fel = $$($('productPanel').getElementsByTagName('form'));
	var els = $$(fel[0].getElementsByTagName('span'));
	for (var i=0; i<els.length; i++) {
		els[i].removeClass('spinner');
	}
	
	// update the price area
	var price = notifier.data[0].price;
	var wasprice = notifier.data[0].wasPrice;
	
	if ((typeof wasprice != "undefined") && (wasprice != price)) {
		$('overlayPriceDisplay').setHTML('<em>Now &pound;' + price + '</em><span> was &pound;' + wasprice + '</span>');
	} else {
		$('overlayPriceDisplay').setHTML('&pound;' + price);
	}
	
	// update the story area for this colour
	if ($('storyEl')) {
		$('storyEl').setText(notifier.data[0].story);
	}
		
	this.retainedSize = notifier.data[0].size;
	
	/*********** Part 3 - update related items area **********/
	
	/*********** Part LAST - update webtrends tracking **********/
	/* CHECK WITH BEN ABOUT THIS TRACKING STUFF??? - needs to be working
	var pvarid = "";
	if (notifier.data[0].sku) {
		pvarid = notifier.data[0].sku;
	}
	dcsMultiTrack('WT.si_n','ShoppingCart','WT.si_x','1','WT.pn_sku',pvarid,'WT.tx_u','1','WT.tx_e','v');
	*/
}
objProductUpdate.addObserver(objProductUpdateObserver);


/********************************************** Event: product size updates. size data replaced using subset of xml returned (NestedXMLDataSet) **********************************************/
objProductSizesObserver = new Object();
objProductSizesObserver.onPostLoad = function(notifier, data) {
	
	if (notifier.currentDS.data.length > 0) {
		
		// assemble html snippet from returned xml
		var htmlTxt = '';
		// a returned product CANNOT be totally out of stock, as the colour option in the select list is disabled
		for (var i=0; i < notifier.currentDS.data.length; i++) {
			var myName = notifier.currentDS.data[i].label;
			var myValue = notifier.currentDS.data[i].code;
			var myStock = notifier.currentDS.data[i].availability;
			if (myStock == 0) {
				htmlTxt += '<p class="disabled">\n';
			} else {
				htmlTxt += '<p>\n';
			}
			if (myStock == 0) {
				htmlTxt += '<input type="radio" name="product_size" id="product_size_' + myName + '" value="' + myValue + '" disabled="disabled">\n';
			} else {
				htmlTxt += '<input type="radio" name="product_size" id="product_size_' + myName + '" value="' + myValue + '">\n';
			}
			htmlTxt += '<label for="product_size_' + myName + '">' + myName + '</label>\n';
			htmlTxt += '</p>\n';
		}
		$('sContainer').setHTML(htmlTxt);
		
		for (i=0; i<document.forms['product'].product_size.length; i++) {
			if (document.forms['product'].product_size[i].value == objProductUpdateObserver.retainedSize) {
				if ((document.forms['product'].product_size[i].disabled != true) && (objProductUpdateObserver.autoSizeSelect != true)) {
					document.forms['product'].product_size[i].checked = true;
					// ensure Add To Bag is enabled
					$('add_to_shopping_bag').removeClass('disabled');
					$$($('add_to_shopping_bag').getElementsByTagName('img'))[0].setProperties({
						'src' : 'images/structural/overlay/button_add_to_shopping_bag_2.png',
						'alt' : 'Add to Shopping Bag',
						'class' : ''
					});
				}
			}
		}
		
		// set the "add to basket enabler" on each size input:
		sizeSelectEvent();	/* utility function (see ajax_panel_engine_PHASE4_2009_reskin - I know, I know) */
		
		// slide size area back out again
		var sizeSlideBack = new Fx.Style('sContainer', 'height', {
			duration: 400,
			wait: true,
			transition: Fx.Transitions.Quad.easeInOut
		});
		if (notifier.currentDS.data.length > 9){
			sizeSlideBack.start(100);
		} else {
			sizeSlideBack.start(50);
		}
		
	} else {
		// ensure Add To Bag is enabled - we're dealing with a colour change
		$('add_to_shopping_bag').removeClass('disabled');
		$$($('add_to_shopping_bag').getElementsByTagName('img'))[0].setProperties({
			'src' : 'images/structural/overlay/button_add_to_shopping_bag_2.png',
			'alt' : 'Add to Shopping Bag',
			'class' : ''
		});
	}
	
}
objProductSizes.addObserver(objProductSizesObserver);


/********************** Event: product image updates. main image data replaced using subset of xml returned (NestedXMLDataSet)  ***************************************/
objProductImagesObserver = new Object();
objProductImagesObserver.onPostLoad = function(notifier, data) {
	
	var imageArray = notifier.currentDS.data;	/**** THIS NEEDS SETTING FROM XML, need a multi array of images - imgArr[i].master, imgArr[i].xlarge etc... ***/
	switchImages2(imageArray);	// function in "product_panel_PHASE3.js"
}
objProductImages.addObserver(objProductImagesObserver);


/********************** Event: product related items updates. main image data replaced using subset of xml returned (NestedXMLDataSet)  ***************************************/
objProductRelatedObserver = new Object();
objProductRelatedObserver.onPostLoad = function(notifier, data) {
	
	var relatedArray = notifier.currentDS.data;
	
	var el = $$($('complete_the_look').getElementsByTagName('ul'))[0];
	el.innerHTML = "";
	
	if (relatedArray.length > 0) {
		$('complete_the_look').setStyle('display', 'block');
		var childItems = "";
		//var currentID = "";
		for (var i=0; i<relatedArray.length; i++) {
			var relItem = relatedArray[i];
			//if (relItem.productid != currentID) {
				//currentID = relItem.productid;
				if (i == 3) {
					childItems += '<li class="last_item">';
				} else {
					childItems += '<li>';
				}
				childItems += '<a href="/index.cfm?page=1017&productid=' + relItem.productid + '&productvarid=' + relItem.productvariationid + '" rel="product">';
				//childItems += '<img src="' + relItem.image + '" alt="' + relItem.name + '" width="89" height="95">';	// ensure it's the first <small> returned
				//childItems += '<img id="relImg' + i + '" alt="' + relItem.name + '" width="89" height="95">';	// ensure it's the first <small> returned
				childItems += '<img id="' + relItem.productid + '" alt="' + relItem.name + '" src="images/spacer.gif" width="89" height="95">';
				childItems += '<span class="title">' + relItem.name + '</span>';
				childItems += '<span class="price">';
				if (typeof(relItem.wasPrice) != "undefined") {
					childItems += '<em>now &pound;' + relItem.price + '</em> was &pound;' + relItem.wasprice;
				} else {
					childItems += '&pound;' + relItem.price;
				}
				childItems += '</span>';
				childItems += "</a></li>"
			//}
		}
		el.innerHTML = childItems;
		prepLinks(el);
		// slide back out again
		var relatedSlideBack = new Fx.Style('complete_the_look', 'height', {
			duration: 300,
			wait: true,
			transition: Fx.Transitions.Quad.easeInOut
		});
		relatedSlideBack.start(220);	// 220px is the min height
	} else {
		// There are no related items returned
	}
}

objProductRelated.addObserver(objProductRelatedObserver);

objProductRelatedImagesObserver = new Object();
objProductRelatedImagesObserver.onPostLoad = function(notifier, data) {

	// image array is an array of 'image' objects ie image > small etc
	var imgArray = notifier.currentDS.data;
	// container array is an array of the image elements created for related items
	var containerArray = $$($('complete_the_look').getElementsByTagName('img'));
	
	// loop through containers
	for (var i=0; i<containerArray.length; i++) {
		// loop through image array within each image container
		for (var c=0; c<imgArray.length; c++) {
			var imgPath = "";
			if (typeof imgArray[c].small != "undefined") {
				imgPath = imgArray[c].small;
			} else if (typeof imgArray[c].small_2 != "undefined") {
				imgPath = imgArray[c].small_2;
			}
			if (imgPath.indexOf(containerArray[i].getProperty('id')) != -1) {
				containerArray[i].setProperty('src', imgPath);
			}
		}
	}

	/*for (var i=0; i<imgArray.length; i++) {
		if (typeof imgArray[i].small != "undefined") {
			$('relImg' + i).setAttribute('src', imgArray[i].small);
		} else if (typeof imgArray[i].small_2 != "undefined") {
			$('relImg' + i).setAttribute('src', imgArray[i].small_2);
		} else {
			$('relImg' + i).setAttribute('src', 'images/spacer.gif');
		}
	}*/

}
objProductRelatedImages.addObserver(objProductRelatedImagesObserver);



/* Colour change - stock check for selected colour, images update, related items update */
/* passed in: value of the colour selected, and the product id */
function singleProdChange(productIdObj, colourValObj) {
	
	if ($(colourValObj.options[colourValObj.selectedIndex]).getProperty('disabled') == true) {
		return false
	};	// thanks IE
	
	// get value of productId:
	var prodId = productIdObj.value;
	// get value of colourValObj (select list)
	var colourVal = colourValObj.options[colourValObj.selectedIndex].value;
	// quick switch to the colour shown in the info panel:
	$('colour_info').setText(colourValObj.options[colourValObj.selectedIndex].text);
	// if a size is selected (and exists) this needs adding
	// loop through and find selected, if none, default to lowest
	var sizeVal = "";
	var sizePresent = false;
	if ($('sContainer')) {
		sizePresent = true;
		for (i=0; i<document.forms['product'].product_size.length; i++) {
      		if (document.forms['product'].product_size[i].checked) {
				sizeVal = document.forms['product'].product_size[i].value;
				objProductUpdateObserver.autoSizeSelect = false;
      		}
		}
		if (sizeVal == "") {
			sizeVal = document.forms['product'].product_size[0].value;
			// make sure the product observer object knows this is an "auto selection"
			objProductUpdateObserver.autoSizeSelect = true;
		}
	}
	
	var url = "/index.cfm?event=productdetail.xml&productid=" + prodId +"&varcodes=colour|" + colourVal;
	if (sizePresent == true) {
		url += ",size|" + sizeVal;
	}
	url += "&variationnames=colour";
	if (sizePresent == true) {
		url += ",size";
	}
	url += "&attributenames=wasPrice,Story,imageFileName&fetchRelated=true&reltype=GoesWith";
	
	objProductUpdate.url = url;
	
	// set up complete the look slide
	if ($('complete_the_look')) {
		var relatedSlide = new Fx.Style('complete_the_look', 'height', {
			duration: 300,
			wait: false,
			transition: Fx.Transitions.Quad.easeInOut
		});
		relatedSlide.start(0);
	}
	
	// ensure Add To Bag is disabled upon call ( if it's a size / colour variant )
	$('add_to_shopping_bag').addClass('disabled');
	$$($('add_to_shopping_bag').getElementsByTagName('img'))[0].setProperties({
		'src' : 'images/structural/overlay/button_add_to_shopping_bag_2_disabled.png',
		'alt' : '',
		'class' : 'inactive'
	});
	
	// get rid of any warnings already there:
	var el = $('add_to_shopping_bag').getNext();
	el.removeClass('message');
	el.setHTML('');
	
	// set up size area slide - slide to 0, fire xml call...
	if ($('sContainer')) {
		// set the "size select checker" on disabled btn:
		//$('add_to_shopping_bag').onclick = checkSizeSelected;	// utility function (see ajax_panel_engine_PHASE4_2009_reskin - I know, I know)
		// set up size area slide - slide to 0, fire xml call...
		var sizeSlide = new Fx.Style('sContainer', 'height', {
			duration: 400,
			wait: false,
			transition: Fx.Transitions.Quad.easeInOut,
			onComplete: function() {
				// when collapsed, fire the load
				objProductUpdate.loadData();
			}
		});
		sizeSlide.start(0);
	} else {
		objProductUpdate.loadData();
	}
	
}


/**********************************************************************
				Webtrends data utility function
**********************************************************************/

// WebTrends SmartSource Data Collector
// Copyright (c) 1996-2007 WebTrends Inc. All rights reserved.
// $DateTime: 2007/02/02 09:07:21 $
/*function dcsMultiTrack() {
	if (arguments.length%2==0){
		for (var i=0;i<arguments.length;i+=2){
			if (arguments[i].indexOf('WT.')==0){
				WT[arguments[i].substring(3)]=arguments[i+1];
			} else if (arguments[i].indexOf('DCS.')==0) {
				DCS[arguments[i].substring(4)]=arguments[i+1];
			} else if (arguments[i].indexOf('DCSext.')==0) {
				DCSext[arguments[i].substring(7)]=arguments[i+1];
			}
		}
		var dCurrent=new Date();
		DCS.dcsdat=dCurrent.getTime();
		dcsFunc("dcsCookie");
		dcsTag();
	}
}*/