/** 
 * @fileOverview Global and commonly used scripts for the Dulux site.
 * @author Oliver J Bishop
 * @version 1.1.01
 * @changeLog Change the colour scheme servlet to the SEO friendly "/colour/"
 * @changeLog Added the tailormade.jsp Flash modal box functionality (YAHOO.dulux.co.uk.Color.TailorMade).
 * @changeLog Added the function remove to YAHOO.dulux.co.uk.Flash and updated the embed option.
 * @changeLog Added write2 to YAHOO.dulux.co.uk.Flash to replace the old fwrite function.
 * @changeLog Fixed Navigation to fix breadcrumbs by swapping execution order and remove   from the section name.
 * @changeLog Added generic SWF modal and changed the Tailor Made colour video player to use it too.
 * @changeLog Modified rollover for exclusive colours and removed paper swatch ordering.
 * @changeLog Replaced colour with sku on shoppingbaskethandler non handled URLs as some 'colour' orders seem to be slipping through.
 * @changeLog Updated tester price to 99p and changed name from sampler to tester.
 * @changeLog Fixed reference to tester in detailQuickAdd. 
 * @changeLog Added a duluxOrderLiterture(code, name) method to add literutre item to the order.
 * @changeLog Added the feature wallpaper script.
 * @changeLog Added Custom scrapbook folders function.
 * @changeLog Added sitestat hit method from the UKISA library with changes as it doesn't use the normal framework.
*/

/**
 * @name dulux.co.uk
 * @namespace
 * @memberOf YAHOO
 */
YAHOO.namespace("dulux.co.uk");

/**
 * Create a pop up window in several different sizes.
 *
 * @deprecated Use YAHOO.dulux.co.uk.Browser.helper instead
 */
function helperWin(URL,winName,type) {
	if (!type) {type='large';}
	var features = 'top=0,resizable,menubar,scrollbars';
	if (type=='full') {
		features += ',left=0,height=460,width=758,location,status';
	} else {
		features += ',left=100,height=500'
		if (type=='small') {
			features += ',width=350';
		} else if (type=='medium2') {
			features = 'top=0,resizable,scrollbars,left=100,height=460,width=420 status=no';
		} else if (type=='medium') {
			features += ',width=550';
		} else {
			features += ',width=618';
		}
	}
	if (type=='MP') {
		features = 'top=0,resizable,scrollbars,left=100,height=535,width=777';
	}
	if (type=='MPV') {
		features = 'top=0,height=526,width=760,resizable=no,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no';
	}
	eval(winName+'pop = window.open(URL,winName,features)');
	eval(winName+'pop.opener = self');
	eval(winName+'pop.focus()');
}

YAHOO.namespace("dulux.co.uk.Browser");
/**
 * @namespace Open a new window with customised settings.
 */
YAHOO.dulux.co.uk.Browser = {
	config: {
		width: 700,
		height: 400,
		x: null,
		y: null,
		toolbar: 1,
		scrollbars: 1,
		location: 0,
		statusbar: 0,
		menubar: 0,
		resizable: 1,
		name: "helper"
	},
	/**
	 * Opens a new window and can accept configuration settings.
	 *
	 * @param {HTMLObject} e			The link that called the pop-up window.
	 * @param {String|JSON} options		This is either a set of sizes as predetermined settings or a JSON list of settings.
	 * @param options.width				Width of the window.
	 * @param options.height			Height of the window.
	 * @param options.x					Left position of the window (centered by default).
	 * @param options.y					Top position of the window (centered by default).
	 * @param options.toolbar			Window toolbar.
	 * @param options.scrollbars		Window scrollbars.
	 * @param options.location			Window location.
	 * @param options.statusbar			Window statusbar.
	 * @param options.menubar			Window menubar.
	 * @param options.resizable			All the window to be resized.
	 * @param options.name				Give the window a name (default is "helper").
	 * @returns {Boolean}				Returns FALSE to prevent default link action.
	 * @example <a href="http://www.google.co.uk" onclick="return YAHOO.dulux.co.uk.Browser.helper(this);">Google</a>
	 */
	helper: function(e, options) {
		var config = this.config;

		// Setup the configuration
		if (typeof options === "string") {
			// Use named predetermined sizes
			switch (options) {
				case "small":
					config.width = 350;
					config.height = 500;
				break;
				case "medium":
					config.width = 550;
					config.height = 500;
				break;
			}
		} else {
			// Or use custom settings
			for (var i in options) {
				if (typeof config[i] !== "undefined") {
					config[i] = options[i];
				}
			}		
		}
		
		// Center the helper window unless the position is specified
		config.x = config.x || (screen.width - config.width) / 2;
		config.y = config.y || ((screen.height - config.height) / 2) - 30;

		var win = window.open(e, config.name, "toolbar=" + config.toolbar + ",scrollbars=" + config.scrollbars + ",location=" + config.location + ",statusbar=" + config.statusbar + ",menubar=" + config.menubar + ",resizable=" + config.resizable + ",width=" + config.width + ",height=" + config.height + ",left=" + config.x + ",top=" + config.y);

		// Push the window to the front
		win.focus();

		// Cancel the click
		return false;
	}
};

YAHOO.namespace("dulux.co.uk.Flash");
/**
 * @namespace The contains methods to control and write Flash objects.
 */
YAHOO.dulux.co.uk.Flash = {
	_baseUrl: "/web/flash/",
	_supportedVersion: 7,
	_flashVersion: null,
	_defaultVars: {
	},
	_defaultParams: {
		"quality": "high",
		"pluginspage": "http://www.macromedia.com/go/getflashplayer",
		"wmode": "transparent"
	},
	/**
	 * Detect the protocol used in the browser to prevent security errors.
	 *
	 * @private
	 * @returns {String} The protocol currently used.
	 */
	_getProtocol: function() {
		var protocol = "https:";
		if (location.protocol.toLowerCase() === protocol) {
			return protocol;
		} else {
			return "http:";
		}
	},
	/**
	 * Browser sniff :( the Flash version.
	 *
	 * @private
	 */
	_getVersion: function() {

		this._flashVersion = 0;

		if (swfobject) {
			this._flashVersion = swfobject.getFlashPlayerVersion().major;		
			
			/* detect which version of Flash installed, either 

			alert(swfobject.getFlashPlayerVersion().major);
			alert(swfobject.getFlashPlayerVersion().minor);
			alert(swfobject.getFlashPlayerVersion().release);
			*/
		} else {
			this._flashVersion = (navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"]) ? navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin : 0;
			if (this._flashVersion) {
				this._flashVersion = parseInt(this._flashVersion.description.substring(this._flashVersion.description.indexOf(".")-2));
			} else if (navigator.userAgent && navigator.userAgent.indexOf("MSIE")>=0 && navigator.userAgent.indexOf("Windows")>=0 ) {
				document.write('<script language=VBScript>\n');
				document.write('Dim hasPlayer, version\n');
				document.write('hasPlayer = false\n');
				document.write('version = 10\n');
				document.write('Do While version > 0\n');
				document.write('On Error Resume Next\n');
				document.write('hasPlayer = (IsObject(CreateObject("ShockwaveFlash.ShockwaveFlash." & version)))\n');
				document.write('If hasPlayer = true Then Exit Do\n');
				document.write('version = version - 1\n');
				document.write('Loop\n');
				document.write('is_FlashVersion = version\n');
				document.write('is_Flash = hasPlayer\n');
				document.write('<\/script>\n');		
				if (version > 0) {
					this._flashVersion = version;
				}
			} 
		}
	},
	/**
	 * Get the Flash version once.
	 *
	 * @private
	 * @returns {Boolean} If the Flash version installed on the users machine can support the flash used on the site.
	 */
	_detect: function() {
		if (this._flashVersion === null) {
			this._getVersion();

			if (this._flashVersion !== 0) {
				var css = [
					"<style type=\"text/css\"><!--",
					".noFlash {position: absolute; left: -999em;}",
					'--><\/style>'
				];
				document.write(css.join(""));
			}
		}
		return (this._flashVersion >= this._supportedVersion); 
	},
	/**
	 * This can be called from the page and the Flash object will be written in place.
	 *
	 * @param {String} movie			The name of the Flash file to use without the file extension or directory.
	 * @param {Integer} width			The width of the Flash object.
	 * @param {Integer} height			The height of the Flash object.
	 * @param {String} [flashVars]		Flash variable value.
	 * @param {Integer} [minVersion]	The version of the Flash file.
	 */
	write: function(movie, width, height, flashVars, noFlashContent) {
		var minVersion = 7;

		if (this._detect()) {
			var protocol = this._getProtocol();
			document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="' + protocol + '//download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version='+this._supportedVersion+',0,0,0" ');
			document.write('width="'+width+'" height="'+height+'" id="visualiser">');
			document.write('<param name="movie" value="'+this._baseUrl+movie+'.swf?' + flashVars + '">');
			document.write('<param name="allowScriptAccess" value="sameDomain" />');
			document.write('<param name="wmode" value="transparent">');
			document.write('<embed src="'+this._baseUrl+movie+'.swf?' + flashVars + '" name="visualiser" width="'+width+'" height="'+height+'" ');
			document.write('wmode="transparent" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" >');
			document.write('<\/object>');
		} else {

			var altContent = YAHOO.util.Dom.getElementsByClassName("noFlash", "div");

			if (!altContent.length) {

				if (noFlashContent) {
					document.write(noFlashContent);
				} else {
					document.write('<p style="font-size: 11px; color: #828276;">Sorry, you must have a recent version of the free Adobe Flash Player to continue. </p><p><a href="http://www.adobe.com/go/getflashplayer" target="_blank" alt="Get Adobe Flash Player - opens in a new window"><img src="/web/images/colour_click/get_flash.jpg" alt="Get Adobe Flash Player" /></a></p>');
				}
			}
		}
	},
	/**
	 * This can be placed in the HEAD tag to be called to replace an HTML container without using the NOSCRIPT tag option and uses the SWFObject plugin.
	 *
	 * @requires SWFObject
	 * @param {String} el The container to replace.
	 */
	embed: function(move, el, width, height, vars, params, version) {
		var fVars = vars || this._defaultVars;
		var fParams = params || this.defaultParams;

		if (typeof swfobject !== "undefined") {
			swfobject.embedSWF(move, el, width, height, version, null, fVars, fParams);
		}
	},
	/**
	 * Safely removes a Flash movie from the page.
	 * @param {String} el Flash placeholder.
	 */
	remove: function(el) {
		swfobject.removeSWF(el);
	}
};

/**
 * Write a Flash movie.
 *
 * @deprecated Use YAHOO.dulux.co.uk.Flash.write();	 
 * @param {String} movie		The name of the Flash file to use without the file extension or directory.
 * @param {Integer} w			The width of the Flash object.
 * @param {Integer} h			The height of the Flash object.
 * @param {String} [fVars]		Flash variable value.
 * @param {Integer} [minVer]	The version of the Flash file (not used so replaced with noFlashContent).
 */
function fWrite(movie, w, h, fVars, noFlashContent) {
	if (movie) {
		YAHOO.dulux.co.uk.Flash.write(movie, w, h, fVars, noFlashContent);
	}
}	

/**
 * Write a Flash movie ensuring that the URLs are written using the SSL protocol.
 *
 * @deprecated Use YAHOO.dulux.co.uk.Flash.write();	 
 * @param {String} movie		The name of the Flash file to use without the file extension or directory.
 * @param {Integer} w			The width of the Flash object.
 * @param {Integer} h			The height of the Flash object.
 * @param {String} [fVars]		Flash variable value.
 * @param {Integer} [minVer]	The version of the Flash file.
 */
function fWriteSSL(movie, w, h, fVars, noFlashContent) {
	YAHOO.dulux.co.uk.Flash.write(movie, w, h, fVars, noFlashContent);
}

/**
 * Provides rollover effect for links by changing the SRC of an inline image to a different state.
 *
 * @param (HTMLObject} obj The link that contains the follover image.
 */
function roll(obj) { // Roll images
	var img;
	if (typeof obj === "object") {
		if (document.getElementsByTagName) {
			img = obj.getElementsByTagName("IMG")[0];
			img.src = (img.src.indexOf("_0.")>0)?img.src.replace("_0.", "_1."):img.src.replace("_1.", "_0.");
		}
	}
}

/**
 * Provides rollover effect for buttons by changing the SRC of an inline image to a different state.
 *
 * @param (HTMLObject} btn The button that contains the follover image.
 */
function rollBtn(btn) { // Roll buttons
  if (!btn.state) { btn.state = 0; }
  var newState = (btn.state===0)?1:0;
  btn.src = btn.src.replace("_" + btn.state + ".gif", "_" + newState + ".gif");
  btn.state = newState;
  return true;
}

/**
 * This gets the scroll position of the page - something that YUI doesn't provide yet.
 * 
 * @memberOf YAHOO.dulux.co.uk
 * @returns (Array} Returns an array with the first index [0] as the x coordinate, and the second index [1] as the y coordinate.
 */
YAHOO.dulux.co.uk.getScrollXY = function() {
	var scrOfX = 0, scrOfY = 0;
	if( typeof( window.pageYOffset ) === 'number' ) {
		//Netscape compliant
		scrOfY = window.pageYOffset;
		scrOfX = window.pageXOffset;
	} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
		//DOM compliant
		scrOfY = document.body.scrollTop;
		scrOfX = document.body.scrollLeft;
	} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
		//IE6 standards compliant mode
		scrOfY = document.documentElement.scrollTop;
		scrOfX = document.documentElement.scrollLeft;
	}
	return [scrOfX, scrOfY];
};

/**
 * Positions the Scrapbook when a vertical change is greater than 100 from a page scroll.
 */
YAHOO.dulux.co.uk.fnMoveScrapbookVertical = function (e) { // Move scrapbook based on scroll position
	var animScrapbook;
	if (YAHOO.dulux.co.uk.getScrollXY()[1] < 100) {
		animScrapbook = new YAHOO.util.Anim('scrapbook', {   
			top : { to: 100 }  
		    }, 0.5, YAHOO.util.Easing.backOut).animate();   
		} else {
		animScrapbook = new YAHOO.util.Anim('scrapbook', {
			top : { to: YAHOO.dulux.co.uk.getScrollXY()[1]+12 }
			}, 0.5, YAHOO.util.Easing.backOut).animate();   
	}
}


/**
 * Configure scrolling scrapbook.
 */
YAHOO.dulux.co.uk.initScrapbook = function() {
	var setScrapbook = function(e) {
		// add listener for scrolling
		YAHOO.util.Event.addListener(window, "scroll", YAHOO.dulux.co.uk.fnMoveScrapbookVertical);   
		
		YAHOO.dulux.co.uk.fnMoveScrapbookVertical(); 
	};

	setScrapbook();
};

/**
 * Create a YUI Drag and Drop process for colour chips. This calls the base class constructor.
 *
 * @constructor
 * @borrows YAHOO.util.DDProxy as this
 */
YAHOO.dulux.co.uk.DDCollectColour = function(id, sGroup, config) {
    if (id) {
        this.init(id, sGroup, config);				
    }
};

YAHOO.dulux.co.uk.DDCollectColour.prototype = new YAHOO.util.DDProxy();
YAHOO.dulux.co.uk.DDCollectColour.prototype.startPos = 0;
/**
 * When a draggable element is clicked, the proxy element has it's properties changed to act as a thumbnail
 * by converting the elements SRC into a thumbnail file path.
 * 
 * @event
 * @returns {Boolean} Returns TRUE.
 */
YAHOO.dulux.co.uk.DDCollectColour.prototype.clickValidator = function(e) {
	var el = this.getEl(); 
	var picURL = el.getAttribute("src");
	var root = YAHOO.util.Dom.get("dragColour");
  	
	this.startPos = YAHOO.util.Dom.getXY(el);
	YAHOO.util.Dom.setStyle(root, 'background-image', 'url('+picURL+')'); 	
		
	return true;
};

/**
 * This event is called if the draggable is released on a valid target. It will try to add the draggable element to the users'
 * Scrapbook using AJAX calls and updates the status text located inside the Scrapbook.
 *
 * @event
 * @param {HTMLObject} e	The object that triggered the event.
 * @param {HTMLObject} id	The id of the draggable element to be added to the Scrapbook.
 */
YAHOO.dulux.co.uk.DDCollectColour.prototype.onDragDrop = function(e, id) {  
	var colourStyle, leftStr, rightStr, colourId, addingelement, resultelement, url, animProgress;

	if (id === 'scrapbook') { 
		colourStyle= YAHOO.util.Dom.getStyle('dragColour', 'background-image');
	
		leftStr = colourStyle.search("/swatch/");
		rightStr = colourStyle.search(".jpg");
		colourId = colourStyle.substring(leftStr+8,rightStr);
		resultelement = document.getElementById("message");
		addingelement = document.getElementById("adding");

		//Close any open chips/images
		document.getElementById("rollovers").style.display = 'none';
		var rollover = document.getElementById("rollover");
		if (rollover) {
			rollover.style.display = 'none';
		}	

		YAHOO.util.Dom.setStyle('indicator', 'visibility', '');
		resultelement.textContent = "";
		resultelement.innerText = ""; 
		addingelement.textContent = "Adding...";
		addingelement.innerText = "Adding..."; 
		YAHOO.dulux.co.uk.doScrapbookAddColour(colourId);		
	}
};

/**
 * This event is called if the draggle element is not released on a valid target. It will hide the rollover HTML.
 *
 *@event
 */
YAHOO.dulux.co.uk.DDCollectColour.prototype.onInvalidDrop = function(e) {  
	//Close any open chips/images
	document.getElementById("rollovers").style.display = 'none';
	var rollover = document.getElementById("rollover");
	if (rollover) {
		rollover.style.display = 'none';
	}	
};

/**
 * Create a YUI Drag and Drop process for Scrapbook images. This calls the base class constructor.
 *
 * @constructor
 * @borrows YAHOO.util.DDProxy as this
 */
YAHOO.dulux.co.uk.DDCollectImage = function(id, sGroup, config) {
    if (id) {
        this.init(id, sGroup, config);				
    }
};

YAHOO.dulux.co.uk.DDCollectImage.prototype = new YAHOO.util.DDProxy();
YAHOO.dulux.co.uk.DDCollectImage.prototype.startPos = 0;

/**
 * When a draggable element is clicked, the proxy element has it's properties changed to act as a thumbnail
 * by converting the elements SRC into a thumbnail file path.
 * 
 * @event
 * @returns {Boolean} Returns TRUE.
 */
YAHOO.dulux.co.uk.DDCollectImage.prototype.clickValidator = function(e) {
	var el = this.getEl(); 
	var picURL = el.getAttribute("src");
	// Remove the _x used for non-square zoom image
	picURL = picURL.replace('_x','');
	picURL = picURL.replace('_400','_31');
	picURL = picURL.replace('_236','_31');
	picURL = picURL.replace('_154','_31');
	picURL = picURL.replace('_72','_31');
	// If images are not a square size
	picURL = (picURL.indexOf("_31") == -1) ? picURL.replace(".jpg", "_31.jpg") : picURL;
	var root = YAHOO.util.Dom.get("dragPicture");
  	
	this.startPos = YAHOO.util.Dom.getXY(el);
	YAHOO.util.Dom.setStyle(root, 'background-image', 'url('+picURL+')'); 	
		
	return true;
};

/**
 * This event is called if the draggle element is not released on a valid target. It will hide the rollover HTML.
 *
 *@event
 */
YAHOO.dulux.co.uk.DDCollectImage.prototype.onInvalidDrop = function(e) {  
	//Close any open chips/images
	document.getElementById("rollovers").style.display = 'none';
	var rollover = document.getElementById("rollover");
	if (rollover) {
		rollover.style.display = 'none';
	}		
};

/**
 * This event is called if the draggable is released on a valid target. It will try to add the draggable element to the users'
 * Scrapbook using AJAX calls and updates the status text located inside the Scrapbook.
 *
 * @event
 * @param {HTMLObject} e	The object that triggered the event.
 * @param {HTMLObject} id	The id of the draggable element to be added to the Scrapbook.
 */
YAHOO.dulux.co.uk.DDCollectImage.prototype.onDragDrop = function(e, id) {  
	var imageName, leftStr, rightStr, colourId, addingelement, resultelement, url, animProgress;
	if (id === 'scrapbook') { 
		imageName= YAHOO.util.Dom.getStyle('dragPicture', 'background-image');
		leftStr = imageName.search("/web/images/collect/");
		rightStr = imageName.search("_31.jpg");
		imageId = imageName.substring(leftStr+20,rightStr);
		resultelement = document.getElementById("message");
		addingelement = document.getElementById("adding");

		//Close any open chips/images
		document.getElementById("rollovers").style.display = 'none';		
		var rollover = document.getElementById("rollover");
		if (rollover) {
			rollover.style.display = 'none';
		}	

		YAHOO.util.Dom.setStyle('indicator', 'visibility', '');
		resultelement.textContent = "";
		resultelement.innerText = ""; 
		addingelement.textContent = "Adding...";
		addingelement.innerText = "Adding...";
		YAHOO.dulux.co.uk.doScrapbookAddDraggedImage(imageId);		
	}
};

/**
 * Flag to prevent continuous zooming in on an image. It is set to TRUE when an image has a zoomed version on display.
 */
YAHOO.dulux.co.uk.doZoomFlag = false;

/**
 * Takes the currently selected image and fetches a larger version and animates it into view.
 *
 * @function
 * @param {HTMLObject} el The original image that has been selected.
 */
YAHOO.dulux.co.uk.doZoom = function(el) {
	var picRollover, picSize, picImg, picZoom, picZoomPic, picShift;			

	picRollover = el.parentNode.id;
	picShift = 0;
	picSizeWidth = parseInt(el.width); // Changed from picRollover to el
	picSizeHeight = parseInt(el.height); // Changed from picRollover to el
	picImg = el.parentNode.childNodes[0];

	YAHOO.util.Dom.removeClass(picImg, "zoom");

	if (!YAHOO.dulux.co.uk.doZoomFlag &&
	picSizeWidth < 400 && 
	(picSizeWidth !== 358 && picSizeHeight !== 355) &&
	(picSizeWidth == picSizeWidth && 
	picSizeWidth !== 72 &&
	picSizeWidth !== 154 &&
	picSizeWidth !== 236)) { 	
		YAHOO.dulux.co.uk.doZoomFlag = true;
		var sizeY = picSizeHeight + 82;
		var scale = sizeY / picSizeHeight;
		var sizeX = Math.round(picSizeWidth * scale);

		switch(picSizeWidth) {
			case 72:  picShift = 72; break;
			case 154: picShift = 36; break;
			default: picShift = (sizeX - picSizeWidth) / 2;
		}

		var myAnim = new YAHOO.util.Anim(picRollover, {   
			width: { to: sizeX }   		 
			}, .2, YAHOO.util.Easing.easeOut).animate();   

		var myAnim2 = new YAHOO.util.Anim(picImg, {   
			width: { to: sizeX },    
			height: { to: sizeY }  
			}, .2, YAHOO.util.Easing.easeOut).animate();   

		var myAnim4 = new YAHOO.util.Anim(document.getElementById("rollovers"), {   
			left : { by: -picShift },
			top : { by: -picShift }
			}, .2, YAHOO.util.Easing.easeOut);

		var replacePicture = function() {
			picImg.src = picImg.src.replace(".jpg", "_x.jpg");
		};

		myAnim4.onComplete.subscribe(replacePicture);
		myAnim4.animate();
		return;
	} 

	if (picSizeWidth < 236 && picSizeHeight < 236 && !YAHOO.dulux.co.uk.doZoomFlag) { 
		YAHOO.dulux.co.uk.doZoomFlag = true;

		switch(picSizeWidth) {
			case 72:  picShift = 72; break;
			case 154: picShift = 36; break;
		}

		var myAnim = new YAHOO.util.Anim(picRollover, {   
			width: { to: 236 }   		 
			}, .2, YAHOO.util.Easing.easeOut).animate();   

		var myAnim2 = new YAHOO.util.Anim(picImg, {   
			width: { to: 236 },    
			height: { to: 236 }  
			}, .2, YAHOO.util.Easing.easeOut).animate();   

		var myAnim4 = new YAHOO.util.Anim(document.getElementById("rollovers"), {   
			left : { by: -picShift },
			top : { by: -picShift }
			}, .2, YAHOO.util.Easing.easeOut);

		var replacePicture = function() {
			picImg.src=picImg.src.replace("_72","_236");
			picImg.src=picImg.src.replace("_154","_236");
		};

		myAnim4.onComplete.subscribe(replacePicture);
		myAnim4.animate();
	}
};
	
/**
 * Deletes an item from the Scrapbook or a basket.
 *
 * @function
 * @param {HTMLObject} el Possibly a delete button calls this?
 */
YAHOO.dulux.co.uk.doAjaxDelete = function(el) {
	var colourToDelete = el.parentNode.parentNode.parentNode.childNodes[1].alt.replace(/ /g,"_").toLowerCase();

	var totalColours = YAHOO.util.Dom.getElementsByClassName("chip","div");

	if (!YAHOO.util.Dom.hasClass ( el.parentNode.parentNode.parentNode , "scrapbook")) {
		if (totalColours.length <= 16) {
			document.getElementById("change").innerHTML = "<input name=\"checkout\" type=\"submit\" value=\"Order\" />";
		}
		if (totalColours.length === 1) {
			document.getElementById("hereare").innerHTML = "";
			document.getElementById("change").innerHTML = "<div class=\"tReg\"><p>You currently don't have any items in your order.</p><p> As you browse the site you can select colours to order by moving your mouse pointer over a colour  and you'll see the option to order a colour swatch.</p>	  <a href=\"/colours/index.jsp\" class=\"menuLnk scta\" onMouseOver=\"roll(this)\" onMouseOut=\"roll(this)\">See our colours <img src=\"/web/images/shared/arrow_0.gif\" width=\"7\" height=\"7\" border=\"0\" alt=\"\" /></a>	</div>";
		}
	}

	//change the delete button into an Ajax progress indicator
	el.src = "/web/images/furniture/scrapbook/indicator_white.gif";
	YAHOO.util.Dom.setStyle(el.parentNode, 'left', "54px"); 	
	YAHOO.util.Dom.setStyle(el, 'left', "54px"); 	
	YAHOO.util.Dom.setStyle(el, 'outline', "none"); 	
	YAHOO.util.Dom.setStyle(el, 'width', "16px"); 	
	YAHOO.util.Dom.setStyle(el, 'height', "16px"); 	

	var delCallback = {
		success: function(o) {
			// Delete the colour chip passed as o.argument from the array of chips
			var elements = YAHOO.util.Dom.getElementsByClassName('chip');
			for (var i = 0; i < elements.length; i++) {
				if (elements[i].childNodes[1].src.indexOf(o.argument[0]) > 0) {
					while(elements[i].hasChildNodes()){
						elements[i].removeChild(elements[i].childNodes[0])
					}
					elements[i].parentNode.removeChild(elements[i]);
				}
			}	
		},
		failure: function(o) {
			alert("Could not delete this colour.");
		},
		argument: [colourToDelete]
	};

	// Update to remove scrapbook getId for folders.
	var id = el.parentNode.parentNode.parentNode.className.match(/id-\d+/g);

	if (id.length) {
		id = id[0].replace("id-", "");
	} else {
		id = null;	
	}

	var sUrl="";
	var sArgs="";
	if (YAHOO.util.Dom.hasClass ( el.parentNode.parentNode.parentNode , "scrapbook")) {
		sUrl="/servlet/ScrapbookHandler";
		if (id) {
			sArgs="scrapaction=delete&successURL=/ajax/response.jsp&failURL=/ajax/response.jsp&ItemType=colour&id="+id;
		} else {
			sArgs="scrapaction=delete&successURL=/ajax/response.jsp&failURL=/ajax/response.jsp&ItemType=colour&ItemId="+colourToDelete;
		}
	} else {
		sUrl="/servlet/ShoppingBasketHandler";
		sArgs="action=delete&successURL=/ajax/response.jsp&failURL=/ajax/response.jsp&ItemType=colour&ItemID="+colourToDelete;
	}

	var transaction = YAHOO.util.Connect.asyncRequest('POST', sUrl, delCallback, sArgs);  
};

/** 
 * Adds a folder to the Scrapbook.
 *
 * @function
 * @param {String} folderToAdd		The name of the folder to create.
 * @param {HTMLObject} el			Not sure what element this is.
 * @return {Boolean}				Prevent default link click action.
 */
YAHOO.dulux.co.uk.doScrapbookAddFolder = function (folderToAdd, el) {

	//Add an ID to the clicked element
	YAHOO.util.Dom.generateId(el,"add_");
	
	var addIcon, addText;

	// This prevents the script failing if a CSS based scrapbook link has been used.
	var icon = YAHOO.util.Dom.getElementsByClassName('AddIcon','div',el);

	if (icon.length) {
		addIcon = icon[0].childNodes[0];	
		addText = YAHOO.util.Dom.getElementsByClassName('AddText','div',el)[0];
		addText.innerHTML="Adding...";	

		//change the icon into an Ajax progress indicator
		addIcon.src = "/web/images/furniture/scrapbook/indicator_white.gif";
		YAHOO.util.Dom.setStyle(addIcon, 'left', "54px"); 	
		YAHOO.util.Dom.setStyle(addIcon, 'margin-left', "3px");
		YAHOO.util.Dom.setStyle(addIcon, 'outline', "none"); 	
		YAHOO.util.Dom.setStyle(addIcon, 'width', "16px"); 	
		YAHOO.util.Dom.setStyle(addIcon, 'height', "16px"); 	
	} else {
		el.style.backgroundImage = "url(/web/images/furniture/scrapbook/indicator_white.gif)";
		el.innerHTML = "Adding...";
	}
		
	//Remove links now clicked
	el.onclick="";
	el.onmouseover="";
	el.onmouseout="";
	YAHOO.util.Dom.setStyle(el, 'cursor', "default"); 	
		
	var addCallback = {
		success: function(o) {
			var response, resultelement,addingelement, addIcon, addText;
			var addedDiv = document.getElementById(o.argument);

			addIcon = YAHOO.util.Dom.getElementsByClassName('AddIcon','div',el)[0];		
			addText = YAHOO.util.Dom.getElementsByClassName('AddText','div',el)[0];

			if (!o.responseText.indexOf("unhandled exception") >= 0){
				if (addIcon) {
					addText.innerHTML="Folder added";
					addIcon.innerHTML="";
				} else {
					el.innerHTML = "Folder added";
					el.style.backgroundImage = "none";
				}
			} else {
				if (addIcon) {
					addText.innerHTML="Error";
					addIcon.innerHTML="";
				} else {
					el.innerHTML = "Folder added";
					el.style.backgroundImage = "none";	
				}
			} 

			YAHOO.util.Dom.setStyle('indicator', 'visibility', 'hidden');
			response = o.responseText;
			if (response.indexOf("unhandled exception") >= 0 ) { 
				response = "Sorry, you need to enable cookies to use the scrapbook.";
			}
			resultelement = document.getElementById("message");
			addingelement = document.getElementById("adding");
			resultelement.textContent = response;
			resultelement.innerText = response;  
			addingelement.textContent = "";
			addingelement.innerText = "";			
		},
		failure: function(o) {
			var addingelement;
			YAHOO.util.Dom.setStyle('indicator', 'visibility', 'hidden');
			addingelement = document.getElementById("adding");
			addingelement.textContent = "";
			addingelement.innerText = "";
			alert("Could not add this folder.");
		},
		argument: [el.id]
	};
	
	var sUrl="";
	var sArgs="";
	sUrl="/servlet/ScrapbookHandler";
	sArgs="scrapaction=add&successURL=/ajax/response.jsp&failURL=/ajax/response.jsp&ItemType=folder&ItemId="+folderToAdd;
	
	var transaction = YAHOO.util.Connect.asyncRequest('POST', sUrl, addCallback, sArgs);

	return false;
};



/** 
 * Adds a custo m folder to the Scrapbook.
 *
 * @function
 * @param {String} folderToAdd		The datastructure containing the folder name and contents.
 * @param {HTMLObject} el			Not sure what element this is.
 * @return {Boolean}				Prevent default link click action.
 */
YAHOO.dulux.co.uk.doScrapbookAddCustomFolder = function (folderToAdd, el) {

	//Add an ID to the clicked element
	YAHOO.util.Dom.generateId(el,"add_");
	
	var addIcon, addText;

	// This prevents the script failing if a CSS based scrapbook link has been used.
	var icon = YAHOO.util.Dom.getElementsByClassName('AddIcon','div',el);

	if (icon.length) {
		addIcon = icon[0].childNodes[0];	
		addText = YAHOO.util.Dom.getElementsByClassName('AddText','div',el)[0];
		addText.innerHTML="Adding...";	

		//change the icon into an Ajax progress indicator
		addIcon.src = "/web/images/furniture/scrapbook/indicator_white.gif";
		YAHOO.util.Dom.setStyle(addIcon, 'left', "54px"); 	
		YAHOO.util.Dom.setStyle(addIcon, 'margin-left', "3px");
		YAHOO.util.Dom.setStyle(addIcon, 'outline', "none"); 	
		YAHOO.util.Dom.setStyle(addIcon, 'width', "16px"); 	
		YAHOO.util.Dom.setStyle(addIcon, 'height', "16px"); 	
	} else {
		el.style.backgroundImage = "url(/web/images/furniture/scrapbook/indicator_white.gif)";
		el.innerHTML = "Adding...";
	}
		
	//Remove links now clicked
	el.onclick="";
	el.onmouseover="";
	el.onmouseout="";
	YAHOO.util.Dom.setStyle(el, 'cursor', "default"); 	
		
	var addCallback = {
		success: function(o) {
			var response, resultelement,addingelement, addIcon, addText;
			var addedDiv = document.getElementById(o.argument);

			addIcon = YAHOO.util.Dom.getElementsByClassName('AddIcon','div',el)[0];		
			addText = YAHOO.util.Dom.getElementsByClassName('AddText','div',el)[0];

			if (!o.responseText.indexOf("unhandled exception") >= 0){
				if (addIcon) {
					addText.innerHTML="Folder added";
					addIcon.innerHTML="";
				} else {
					el.innerHTML = "Folder added";
					el.style.backgroundImage = "none";
				}
			} else {
				if (addIcon) {
					addText.innerHTML="Error";
					addIcon.innerHTML="";
				} else {
					el.innerHTML = "Folder added";
					el.style.backgroundImage = "none";	
				}
			} 

			YAHOO.util.Dom.setStyle('indicator', 'visibility', 'hidden');
			response = o.responseText;
			if (response.indexOf("unhandled exception") >= 0 ) { 
				response = "Sorry, you need to enable cookies to use the scrapbook.";
			}
			resultelement = document.getElementById("message");
			addingelement = document.getElementById("adding");
			resultelement.textContent = response;
			resultelement.innerText = response;  
			addingelement.textContent = "";
			addingelement.innerText = "";			
		},
		failure: function(o) {
			var addingelement;
			YAHOO.util.Dom.setStyle('indicator', 'visibility', 'hidden');
			addingelement = document.getElementById("adding");
			addingelement.textContent = "";
			addingelement.innerText = "";
			alert("Could not add this folder.");
		},
		argument: [el.id]
	};
	
	var sUrl="";
	var sArgs="";
	sUrl="/servlet/ScrapbookHandler";
	sArgs="scrapaction=add&successURL=/ajax/response.jsp&failURL=/ajax/response.jsp&ItemType=custom&ItemId="+folderToAdd;
	
	var transaction = YAHOO.util.Connect.asyncRequest('POST', sUrl, addCallback, sArgs);

	return false;
};







/**
 * Add an image to the Scrapbook.
 *
 * @function
 * @param {String} imgToAdd		The name of the image to add to the Scrapbook.
 * @param {HTMLObject} el		The element that called this function.
 */
YAHOO.dulux.co.uk.doScrapbookAddImage = function (imgToAdd, el) {

	addDiv = el.parentNode;
	
	addDiv.innerHTML="<img width=\"10\" height=\"10\" src=\"/web/images/furniture/scrapbook/indicator_white.gif\" /> Adding...";
	
	//Add an ID to the clicked element
	YAHOO.util.Dom.generateId(addDiv,"addimg_");
	
	var addCallback = {
		success: function(o) {
			//var response, resultelement,addingelement, addIcon, addText;

			try {
				var addedDiv = document.getElementById(o.argument);
				if (!o.responseText.indexOf("unhandled exception") >= 0) {
					addedDiv.innerHTML="Added.";
				} else {
					addedDiv.innerHTML="Error.";
				}
			} catch (e) {
				// Rollover has been removed in the meantime
			}

			YAHOO.util.Dom.setStyle('indicator', 'visibility', 'hidden');
			response = o.responseText;
			if (response.indexOf("unhandled exception") >= 0 ) { response = "Sorry, you need to enable cookies to use the scrapbook.";}
			resultelement = document.getElementById("message");
			addingelement = document.getElementById("adding");
			resultelement.textContent = response;
			resultelement.innerText = response;  
			addingelement.textContent = "";
			addingelement.innerText = "";
		},
		failure: function(o) {
			var addingelement;
			YAHOO.util.Dom.setStyle('indicator', 'visibility', 'hidden');
			addingelement = document.getElementById("adding");
			addingelement.textContent = "";
			addingelement.innerText = "";
			alert("Could not add this picture.");
		},
		argument: [addDiv.id]
	};
	
	var sUrl="";
	var sArgs="";
	sUrl="/servlet/ScrapbookHandler";
	sArgs="scrapaction=add&successURL=/ajax/response.jsp&failURL=/ajax/response.jsp&ItemType=image&ItemId="+imgToAdd;
	
	var transaction = YAHOO.util.Connect.asyncRequest('POST', sUrl, addCallback, sArgs);
	
	return false;
};

/**
 * Delete an image from the Scrapbook.
 *
 * @function
 * @param {String} imgToDelete	The name of the image to delete from the Scrapbook.
 * @param {HTMLObject} el		The element that called this function.
 */
YAHOO.dulux.co.uk.doScrapbookDeleteImage = function (imgToDelete, el) {
	delDiv = el.parentNode;
	
	delDiv.innerHTML="<img width=\"10\" height=\"10\" src=\"/web/images/furniture/scrapbook/indicator_white.gif\" /> Deleting...";
	
	//Add an ID to the clicked element
	YAHOO.util.Dom.generateId(delDiv,"delimg_");
	
	var delCallback = {
		success: function(o) {
			//Close any open chips/images
			document.getElementById("rollovers").style.display = 'none';
			//in effect, hide the pic until the page is refreshed
			var picImg = document.getElementById(o.argument)
			YAHOO.util.Dom.removeClass ( picImg , "pad" );
			YAHOO.util.Dom.removeClass ( picImg , "scrapbook" );
			YAHOO.util.Dom.removeClass ( picImg , "pic" );
			picImg.src="";
			picImg.height="0";
			picImg.width="0";
		},
		failure: function(o) {
			var addingelement;
			YAHOO.util.Dom.setStyle('indicator', 'visibility', 'hidden');
			addingelement = document.getElementById("adding");
			addingelement.textContent = "";
			addingelement.innerText = "";
			alert("Could not delete this picture.");
		},
		argument: [imgToDelete]
	};
	
	var sUrl="";
	var sArgs="";
	sUrl="/servlet/ScrapbookHandler";

	// Update to remove scrapbook getId for folders.
	var id = document.getElementById(imgToDelete).className.match(/id-\d+/g);

	if (id.length) {
		id = id[0].replace("id-", "");
	} else {
		id = null;	
	}
	
	if (id) {
		sArgs="scrapaction=delete&successURL=/ajax/response.jsp&failURL=/ajax/response.jsp&ItemType=image&id="+id;
	} else {
		sArgs="scrapaction=delete&successURL=/ajax/response.jsp&failURL=/ajax/response.jsp&ItemType=image&ItemId="+imgToDelete;
	}
	
	var transaction = YAHOO.util.Connect.asyncRequest('POST', sUrl, delCallback, sArgs);
};

/**
 * This adds saves the image to the users Scrapbook and is called from the DDCollectImage.onDragDrop function.
 *
 * @function
 * @param {String} imgToAdd	The name of the image to add to the Scrapbook.
 */
YAHOO.dulux.co.uk.doScrapbookAddDraggedImage = function (imgToAdd) {

	var addCallback = {
		success: function(o) {
			YAHOO.util.Dom.setStyle('indicator', 'visibility', 'hidden');
			response = o.responseText;
			if (response.indexOf("unhandled exception") >= 0 ) { 
				response = "Sorry, you need to enable cookies to use the scrapbook.";
			}
			resultelement = document.getElementById("message");
			addingelement = document.getElementById("adding");
			resultelement.textContent = response;
			resultelement.innerText = response;  
			addingelement.textContent = "";
			addingelement.innerText = "";	
		},
		failure: function(o) {
			var addingelement;
			YAHOO.util.Dom.setStyle('indicator', 'visibility', 'hidden');
			addingelement = document.getElementById("adding");
			addingelement.textContent = "";
			addingelement.innerText = "";
			alert("Could not add this picture.");
		}
	};
	
	var sUrl="";
	var sArgs="";
	sUrl="/servlet/ScrapbookHandler";
	sArgs="scrapaction=add&successURL=/ajax/response.jsp&failURL=/ajax/response.jsp&ItemType=image&ItemId="+imgToAdd;
	
	var transaction = YAHOO.util.Connect.asyncRequest('POST', sUrl, addCallback, sArgs);		
};

/**
 * This adds saves the colour to the users Scrapbook and is called from the DDCollectColour.onDragDrop function.
 *
 * @function
 * @param {String} colourToAdd	The name of the colour to add to the Scrapbook.
 */
YAHOO.dulux.co.uk.doScrapbookAddColour = function (colourToAdd) {
	var addCallback = {
		success: function(o) {
			var response, resultelement,addingelement;
			YAHOO.util.Dom.setStyle('indicator', 'visibility', 'hidden');
			response = o.responseText;
			if (response.indexOf("unhandled exception") >= 0 ) { 
				response = "Sorry, you need to enable cookies to use the scrapbook.";
			}
			resultelement = document.getElementById("message");
			addingelement = document.getElementById("adding");
			resultelement.textContent = response;
			resultelement.innerText = response;  
			addingelement.textContent = "";
			addingelement.innerText = "";
		},
		failure: function(o) {
			var addingelement;
			YAHOO.util.Dom.setStyle('indicator', 'visibility', 'hidden');
			addingelement = document.getElementById("adding");
			addingelement.textContent = "";
			addingelement.innerText = "";
			alert("Could not add this colour.");
		},
		argument: [colourToAdd]
	};
	
	var sUrl="";
	var sArgs="";
	sUrl="/servlet/ScrapbookHandler";
	sArgs="scrapaction=add&successURL=/ajax/response.jsp&failURL=/ajax/response.jsp&ItemType=colour&ItemId="+colourToAdd;
	
	var transaction = YAHOO.util.Connect.asyncRequest('POST', sUrl, addCallback, sArgs);  
};

/**
 * Toggle the visibility a container in the colours section.
 *
 * @function
 * @param {Integer} i	The suffix to the ID of the section to toggle.
 * @returns {Boolean}	Returns FALSE to prevent default link action.
 * @example
 * <a href="#productSection3" onclick="return YAHOO.dulux.co.uk.toggleSection(3)">Section 3</a>
 */
YAHOO.dulux.co.uk.toggleSection = function(section) {
	var divToToggle = document.getElementById("productSection"+section);

	//Close any open chips/images
	document.getElementById("rollovers").style.display = 'none';

	if (YAHOO.util.Dom.getStyle(divToToggle, 'display')==="none") {
		YAHOO.util.Dom.setStyle(divToToggle, 'display', 'block');
	} else {
		YAHOO.util.Dom.setStyle(divToToggle, 'display', 'none');
	}
	//Roll the arrow
	roll(document.getElementById("rolloverLink"+section));

	return false;
};


YAHOO.namespace("dulux.co.uk.Navigation");
/**
 * @namespace Anything to do with manipulating the navigation.
 */
YAHOO.dulux.co.uk.Navigation = {
	/**
	 * @namespace Uses this breadcrumbs as a guide to highlight the corresponding navigation category tab.
	 *
	 * @function
	 */
	highlight: function() {
		// Use object detection for IE - to use instead of :hover for an LI element
		if (document.all && document.getElementById) {
			
			var nav = document.getElementById("nav");
			if (!nav) { return; }

			var list = nav.getElementsByTagName("ul");
			if (!list) { return; }

			for (var i = 0, ix = list[0].childNodes.length; i < ix; i++) {
				var node = list[0].childNodes[i];
				if (node.nodeName.toLowerCase() === "li") {
					node.onmouseover = function() {
						
						this.className += " hover";
					};
					node.onmouseout = function() {
						this.className = this.className.replace(" hover", "");
					};
				}
			}
		}

		// Use the breadcrumbs to highlight the currect tab in the navigation
		var breadcrumb = document.getElementById("breadCrumb");
		if (!breadcrumb) { return; }

		var section, tab;
		
		if (breadcrumb.hasChildNodes()) {
			// Get the section if it's inside a link
			if (breadcrumb.childNodes[1].hasChildNodes()) {
				section = breadcrumb.childNodes[1].childNodes[0].nodeValue.toLowerCase();
			} else {
				// Get the section if it's a parent page
				if (breadcrumb.hasChildNodes()) {
					section = breadcrumb.childNodes[1].nodeValue.toLowerCase();
				}
			}
			//section = section.nodeValue.replace(/^\s*(\S*(\s+\S+)*)\s*$/, "$1").toLowerCase();

			var s = section.indexOf(" ");
			if (s !== -1) {
				section = section.substring(0, s);
			}
		}

		if (section !== null) {
			// This removes &nbsp; from the breadcrumb link
			section = section.replace(/^[\s\xA0]+|[\s\xA0]+$/g, "");

			tab = document.getElementById("nav-" + section);
			if (!tab) { return; }
			tab.className = "active";
		}
	}
};

/**
 * Deletes a folder from the Scrapbook projects.
 *
 * @function
 * @param {String} id		The name of the folder to delete.
 * @param {HTMLObject} el	The delete button that called this.
 */
YAHOO.dulux.co.uk.deleteFromProjectList = function(id, el) {
	var newProgress;
	var divToDelete = el.parentNode.parentNode.parentNode;
	var divDelete = el.parentNode;
	
	//Remove the a href and image from the divDelete
	while(divDelete.hasChildNodes()){
		divDelete.removeChild(divDelete.childNodes[0])
	}

	newProgress = document.createElement("img");
	
	//Create a new Ajax progress indicator
	newProgress.src = "/web/images/furniture/scrapbook/indicator_white.gif"; 	
	YAHOO.util.Dom.setStyle(newProgress, 'left', "54px"); 	
	YAHOO.util.Dom.setStyle(newProgress, 'outline', "none"); 	
	YAHOO.util.Dom.setStyle(newProgress, 'width', "16px"); 	
	YAHOO.util.Dom.setStyle(newProgress, 'height', "16px"); 	
	YAHOO.util.Dom.setStyle(newProgress, 'margin-top', "4px"); 
	
	//Put the indicator in the delete div	
	divDelete.appendChild(newProgress);

	var projDelCallback = {
		success: function(o) {
			// Delete the colour chip passed as o.argument from the array of chips
			var divToDelete = document.getElementById(o.argument);

			while(divToDelete.hasChildNodes()){
				divToDelete.removeChild(divToDelete.childNodes[0])
			}

			YAHOO.util.Dom.setStyle(divToDelete, 'visibility', 'hidden');
		},
		failure: function(o) {
			alert("Could not delete this project.");
		},
		argument: [divToDelete.id]
	};
	
	var sUrl="";
	var sArgs="";
	sUrl="/servlet/SaveSchemeHandler";
	sArgs="action=delete&successURL=/ajax/response.jsp&failURL=/ajax/response.jsp&SchemeID="+id;
	
	var transaction = YAHOO.util.Connect.asyncRequest('POST', sUrl, projDelCallback, sArgs);
};

/**
 * Deletes a users room from MousePainter.
 *
 * @function
 * @param {String} id		The name of the image to delete.
 * @param {HTMLObject} el	The delete button that called this.
 */
YAHOO.dulux.co.uk.deleteFromOwnRooms = function(id, el) {
	var newProgress;
	var divToDelete = el.parentNode.parentNode.parentNode;
	var divDelete = el.parentNode;
	
	//Remove the a href and image from the divDelete
	while(divDelete.hasChildNodes()){
			divDelete.removeChild(divDelete.childNodes[0])
	}

	newProgress = document.createElement("img");
	
	//Create a new Ajax progress indicator
	newProgress.src = "/web/images/furniture/scrapbook/indicator_white.gif"; 	
	YAHOO.util.Dom.setStyle(newProgress, 'left', "54px"); 	
	YAHOO.util.Dom.setStyle(newProgress, 'outline', "none"); 	
	YAHOO.util.Dom.setStyle(newProgress, 'width', "16px"); 	
	YAHOO.util.Dom.setStyle(newProgress, 'height', "16px"); 	
	YAHOO.util.Dom.setStyle(newProgress, 'margin-top', "4px"); 
	
	//Put the indicator in the delete div	
	divDelete.appendChild(newProgress);

	var projDelCallback = {
		success: function(o) {
			// Delete the colour chip passed as o.argument from the array of chips
			var divToDelete = document.getElementById(o.argument);

			while(divToDelete.hasChildNodes()){
				divToDelete.removeChild(divToDelete.childNodes[0])
			}

			YAHOO.util.Dom.setStyle(divToDelete, 'visibility', 'hidden');
		},
		failure: function(o) {
			alert("Could not delete this room.");
		},
		argument: [divToDelete.id]
	};
	
	var sUrl="";
	var sArgs="";
	sUrl="/servlet/OwnRoomsHandler";
	sArgs="action=delete&successURL=/ajax/response.jsp&failURL=/ajax/response.jsp&imagecode="+id;
	
	var transaction = YAHOO.util.Connect.asyncRequest('POST', sUrl, projDelCallback, sArgs);
};


YAHOO.namespace("dulux.co.uk.addToBasket");

YAHOO.dulux.co.uk.addToBasket = function(name, code, type) {
	document.getElementById("rollovers").style.display = 'none';


    var callback = {
		success: function(o) {
			var text = o.responseText.split("|");
			YAHOO.dulux.co.uk.otesters.setBody("<div class=\"content\"><p>" + text[0] + "</p><ul class='menuList'><li><div align='left'><a href='/servlet/ShoppingBasketHandler?failURL=/order/index.jsp&amp;successURL=/order/index.jsp' class='menuLnk scta' onmouseout='roll(this)' onmouseover='roll(this)'>See your order <img width='7' height='7' border='0' alt='' src='/web/images/shared/arrow_0.gif'/></a></div></li>     <li><div align='left'><a onclick='YAHOO.dulux.co.uk.otesters.hide()' href='#' class='menuLnk scta' onmouseout='roll(this)' onmouseover='roll(this)'>Continue browsing <img width='7' height='7' border='0' alt='' src='/web/images/shared/arrow_0.gif'/></a></div></li></ul></div>");
			YAHOO.dulux.co.uk.otesters.center();
		},
		failure: function(o) {
			YAHOO.dulux.co.uk.otesters.setBody("<div class=\"content\"><p>Sorry, the item has not been added to your order. Please try again.</p><ul class='menuList'><li><div align='left'><a href='/servlet/ShoppingBasketHandler?failURL=/order/index.jsp&amp;successURL=/order/index.jsp' class='menuLnk scta' onmouseout='roll(this)' onmouseover='roll(this)'>See your order <img width='7' height='7' border='0' alt='' src='/web/images/shared/arrow_0.gif'/></a></div></li>     <li><div align='left'><a onclick='YAHOO.dulux.co.uk.otesters.hide()' href='#' class='menuLnk scta' onmouseout='roll(this)' onmouseover='roll(this)'>Continue browsing <img width='7' height='7' border='0' alt='' src='/web/images/shared/arrow_0.gif'/></a></div></li></ul></div>");
			YAHOO.dulux.co.uk.otesters.center();
		}
	};
		
	var dialogCode = [
		"<div class=\"content\">",
		"<p class=\"loading\">Please wait</p>",
		"</div>"
	];

	YAHOO.dulux.co.uk.otesters.setBody(dialogCode.join(""));

	if (!code) {
		code = name.replace(/ /g,"_").toLowerCase();
	}

	if (!type) {
		type = "sku";
	}

	YAHOO.util.Dom.setStyle('otesters-dialog', 'width', "500px"); 	

	YAHOO.dulux.co.uk.otesters.setHeader("<h1><img width=\"143\" height=\"36\" alt=\"Thank you\" src=\"/web/images/pghd/pghd_thank_you.gif\"/></h1>");
	YAHOO.dulux.co.uk.otesters.setFooter("<img style=\"margin-left:-18px; margin-bottom: -18px;\" width=\"500\" height=\"104\" src=\"/web/images/furniture/img_wave500.gif\" />");
	YAHOO.dulux.co.uk.otesters.show();

	var transaction = YAHOO.util.Connect.asyncRequest('POST', "/servlet/ShoppingBasketHandler", callback, "action=add&ItemType="+type+"&Quantity=1&ItemID="+code+"&successURL=/ajax/responseandbasket.jsp&failURL=/ajax/responseandbasket.jsp");
};


YAHOO.namespace("dulux.co.uk.addWallpaperToBasket");

YAHOO.dulux.co.uk.addWallpaperToBasket = function(name, code) {
	document.getElementById("rollovers").style.display = 'none';

	var sUrl = "/ajax/chooseproduct.jsp";
    var callback = {
		success: function(o) {
			YAHOO.dulux.co.uk.otesters.setBody(o.responseText);
			YAHOO.dulux.co.uk.otesters.center();
		},
		failure: function(o) {/*failure handler code*/}
	};
		
	//var transaction = YAHOO.util.Connect.asyncRequest('POST', sUrl, callback, 'col='+colour);
	var colourCode = name.replace(/ /g,"_").toLowerCase();

	var dialogCode = [
		"<h1>"+name+"</h1>",
		"<div id=\"OTQuickAddDiv\">",
		"<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">",
		"<tr><td valign=\"top\" width=\"50%\">",
		"<p></p>",
		"</td><td width=\"50%\">",
		"<form id=\"form1\" name=\"form1\" method=\"post\" action=\"/servlet/ShoppingBasketHandler\">",
		"<p style=\"margin-bottom:5px\" align=\"center\">",
		"<img src=\"/web/images/skus/"+colourCode+"-132.jpg\" width=\"132\" height=\"132\" /><br />",
		"<br />Feature wallpaper: <strong> 49p (+P&amp;P) </strong></p>",
		"<p style=\"margin-top:0px\" align=\"center\">",
		"<input type=\"hidden\" name=\"action\" value=\"add\" />",
		"<input type=\"hidden\" name=\"ItemType\" value=\"sku\" />",
		"<input type=\"hidden\" name=\"ItemID\" value=\"" + code+ "\" />",
		"<span id=\"colourAdd\"><input style=\"width:110px;height:32px\" src=\"/web/images/furniture/btn/rbtn32_add.gif\" onclick=\"YAHOO.dulux.co.uk.OTQuickAdd(this,'sku','"+code+"');return false;\" type=\"image\" name=\"Submit\" value=\"Add to your order\" />",
		"</span></p></form>",
		"</td></tr></table>",
		"</div>"
	];

	YAHOO.dulux.co.uk.otesters.setBody(dialogCode.join(""));


	YAHOO.util.Dom.setStyle('otesters-dialog', 'width', "500px"); 	
	YAHOO.util.Dom.setStyle('otesters-dialog', 'height', "429px"); 

	YAHOO.dulux.co.uk.otesters.setHeader("<h1><img width=\"251\" height=\"36\" alt=\"Feature wallpaper\" src=\"/web/images/pghd/pghd_feature_wallpaper.gif\"/></h1>");
	YAHOO.dulux.co.uk.otesters.setFooter("<img style=\"margin-left:-18px; margin-bottom: -18px;\" width=\"500\" height=\"104\" src=\"/web/images/furniture/img_wave500.gif\" />");
	YAHOO.dulux.co.uk.otesters.show();
};


/**
 * Create and display the OETesters dialog box.
 *
 * @function
 * @param {String} colour The ID of the colour to use to configure the content.
 */
YAHOO.dulux.co.uk.duluxOT = function (colour) {
	//Close any open chips/images
	document.getElementById("rollovers").style.display = 'none';

	var sUrl = "/ajax/chooseproduct.jsp";
    var callback = {
		success: function(o) {
			YAHOO.dulux.co.uk.otesters.setBody(o.responseText);
			YAHOO.dulux.co.uk.otesters.center();
		},
		failure: function(o) {/*failure handler code*/}
	};

	if (arguments.length > 1) {
		

		var width = Math.floor(100 / arguments.length);
		var colourCode;
		var dialogCode = [
			"<h1>Colours testers - &pound;1.00 (+P&amp;P)</h1>",
			"<div id=\"OTQuickAddDiv\">",
				"<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr><td valign=\"top\" width=\"100%\" colspan=\"" + arguments.length + "\">",
					"<p>Colour Testers from Dulux are handy, convenient and accurate real paint colour testers. They contain 30ml of matt paint making them ideal for you to choose the colours for your room in the comfort of your home.</p>",
					"</td></tr><tr>"
		];

		for (var i = 0, ix = arguments.length; i < ix; i++) {

			colourCode = arguments[i].replace(/ /g,"_").toLowerCase();

			dialogCode.push([
				"<td width=\"" + width + "%\" valign=\"top\">",
					"<form id=\"form1\" name=\"form1\" method=\"post\" action=\"/servlet/ShoppingBasketHandler\">",
						"<p style=\"margin-bottom:5px\" align=\"center\">",
							"<img src=\"/web/images/skus/" + colourCode + "-132.jpg\" width=\"132\" height=\"132\" />",
							"<br /><strong>" + arguments[i] + "</strong>",
						"</p>",
						"<p style=\"margin-top:0px; height: 32px; font-size: 12px;\" align=\"center\">",
							"<input type=\"hidden\" name=\"action\" value=\"add\" />",
							"<input type=\"hidden\" name=\"ItemType\" value=\"sku\" />",
							"<input type=\"hidden\" name=\"ItemID\" value=\"" + colourCode + "\" />",
							"<input style=\"width:110px;height:32px\" src=\"/web/images/furniture/btn/rbtn32_add.gif\" onclick=\"YAHOO.dulux.co.uk.OTQuickContextAdd(this,'sku','" + colourCode + "');return false;\" type=\"image\" name=\"Submit\" value=\"Add to your order\" />",
						"</p>",
					"</form>",
				"</td>"
			].join(""));
		}

		dialogCode.push([	
			"</tr>",
			"<tr><td colspan=\"" + arguments.length + "\">",
				"<ul class=\"menuList\" id=\"qt-quick-context-view-order\">",

					"<li><div align=\"left\"><a onmouseover=\"roll(this)\" onmouseout=\"roll(this)\" class=\"menuLnk scta\" href=\"/servlet/ShoppingBasketHandler?failURL=/order/index.jsp&amp;successURL=/order/index.jsp\">See your order <img width=\"7\" height=\"7\" border=\"0\" src=\"http://www.dulux.co.uk/web/images/shared/arrow_0.gif\" alt=\"\"/></a></div></li>", 

					"<li><div align=\"left\"><a onmouseover=\"roll(this)\" onmouseout=\"roll(this)\" class=\"menuLnk scta\" href=\"#\" onclick=\"YAHOO.dulux.co.uk.otesters.hide()\">Continue browsing <img width=\"7\" height=\"7\" border=\"0\" src=\"http://www.dulux.co.uk/web/images/shared/arrow_0.gif\" alt=\"\"/></a></div></li>",

				"</ul>",
			"</td></tr>",
			"</table></div>"
		].join(""));

		YAHOO.dulux.co.uk.otesters.setBody(dialogCode.join(""));

		YAHOO.util.Dom.setStyle('otesters-dialog', 'width', "500px"); 	
		YAHOO.util.Dom.setStyle('otesters-dialog', 'height', "500px"); 

		YAHOO.dulux.co.uk.otesters.setHeader("<h1><img src=\"/web/images/pghd/pghd_colour_testers.gif\" width=\"291\" height=\"36\" alt=\"Dulux colour testers\" /></h1>");
		YAHOO.dulux.co.uk.otesters.setFooter("<img style=\"margin-left:-18px; margin-bottom: -18px;\" width=\"500\" height=\"104\" src=\"/web/images/furniture/img_wave500.gif\" />");
		YAHOO.dulux.co.uk.otesters.show();
	} else {

		//var transaction = YAHOO.util.Connect.asyncRequest('POST', sUrl, callback, 'col='+colour);
		var colourCode = colour.replace(/ /g,"_").toLowerCase();

		//Old version with paper swatches
		//var dialogCode = "<h1>"+colour+"</h1><div id=\"OTQuickAddDiv\"><p>Choose either a paper swatch or a real paint colour sampler.</p><table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr><td valign=\"bottom\" width=\"50%\"><form id=\"form1\" name=\"form1\" method=\"post\" action=\"/servlet/ShoppingBasketHandler\"><p style=\"margin-bottom:5px\" align=\"center\"><img style=\"border:1px solid #dad6cc;padding-top:10px;padding-bottom:10px;margin-bottom:25px; background-color:white\" src=\"/web/images/swatch/small/"+colourCode+".jpg\" width=\"72\" height=\"52\"/><br />Paper colour swatch: <strong>FREE</strong></p><p style=\"margin-top:0px\" align=\"center\"><input type=\"hidden\" name=\"action\" value=\"add\" /><input type=\"hidden\" name=\"ItemType\" value=\"colour\" /><input type=\"hidden\" name=\"ItemID\" value=\""+colourCode+"\" /><span id=\"colourAdd\"><input style=\"width:110px;height:32px\" src=\"/web/images/furniture/btn/rbtn32_add.gif\" onclick=\"YAHOO.dulux.co.uk.OTQuickAdd(this,'colour','"+colourCode+"');return false;\" type=\"image\" name=\"Submit\" value=\"Add to your order\" /></span></p></form></td><td width=\"50%\"><form id=\"form1\" name=\"form1\" method=\"post\" action=\"/servlet/ShoppingBasketHandler\"><p style=\"margin-bottom:5px\" align=\"center\"><img src=\"/web/images/skus/"+colourCode+"-132.jpg\" width=\"132\" height=\"132\" /><br />Colour sampler: <strong> 98p (+P&amp;P) </strong></p><p style=\"margin-top:0px\" align=\"center\"><input type=\"hidden\" name=\"action\" value=\"add\" /><input type=\"hidden\" name=\"ItemType\" value=\"sku\" /><input type=\"hidden\" name=\"ItemID\" value=\"ritz_rose\" /><span id=\"colourAdd\"><input style=\"width:110px;height:32px\" src=\"/web/images/furniture/btn/rbtn32_add.gif\" onclick=\"YAHOO.dulux.co.uk.OTQuickAdd(this,'sku','"+colourCode+"');return false;\" type=\"image\" name=\"Submit\" value=\"Add to your order\" /></span></p></form></td></tr></table></div>";

		var dialogCode = "<h1>"+colour+"</h1><div id=\"OTQuickAddDiv\"><table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr><td valign=\"top\" width=\"50%\"><p>Colour Testers from Dulux are handy, convenient and accurate real paint colour testers. They contain 30ml of matt paint making them ideal for you to choose the colours for your room in the comfort of your home.</p></td><td width=\"50%\"><form id=\"form1\" name=\"form1\" method=\"post\" action=\"/servlet/ShoppingBasketHandler\"><p style=\"margin-bottom:5px\" align=\"center\"><img src=\"/web/images/skus/"+colourCode+"-132.jpg\" width=\"132\" height=\"132\" /><br />Colour tester: <strong> &pound;1.00 (+P&amp;P) </strong></p><p style=\"margin-top:0px\" align=\"center\"><input type=\"hidden\" name=\"action\" value=\"add\" /><input type=\"hidden\" name=\"ItemType\" value=\"sku\" /><input type=\"hidden\" name=\"ItemID\" value=\"ritz_rose\" /><span id=\"colourAdd\"><input style=\"width:110px;height:32px\" src=\"/web/images/furniture/btn/rbtn32_add.gif\" onclick=\"YAHOO.dulux.co.uk.OTQuickAdd(this,'sku','"+colourCode+"');return false;\" type=\"image\" name=\"Submit\" value=\"Add to your order\" /></span></p></form></td></tr></table></div>";

		YAHOO.dulux.co.uk.otesters.setBody(dialogCode);

		//YAHOO.dulux.co.uk.otesters.setBody("<p><img src=\"/web/images/furniture/scrapbook/indicator_white.gif\" alt=\"\" width=\"16\" height=\"16\" />&nbsp; Loading...</p>");

		YAHOO.util.Dom.setStyle('otesters-dialog', 'width', "500px"); 	
		YAHOO.util.Dom.setStyle('otesters-dialog', 'height', "429px"); 
		//Old order a sampler header
		//YAHOO.dulux.co.uk.otesters.setHeader("<h1><img src=\"/web/images/pghd/pghd_order_sample.gif\" width=\"309\" height=\"36\" alt=\"Order a colour sample\" /></h1>");
		YAHOO.dulux.co.uk.otesters.setHeader("<h1><img src=\"/web/images/pghd/pghd_colour_testers.gif\" width=\"291\" height=\"36\" alt=\"Dulux colour testers\" /></h1>");
		YAHOO.dulux.co.uk.otesters.setFooter("<img style=\"margin-left:-18px; margin-bottom: -18px;\" width=\"500\" height=\"104\" src=\"/web/images/furniture/img_wave500.gif\" />");
		YAHOO.dulux.co.uk.otesters.show();

		//Current prod code
		//YAHOO.dulux.co.uk.otesters.setBody("<div id='OTQuickAddDiv'><div><p id='tempP'>&nbsp;</p></div></div>");
		//YAHOO.dulux.co.uk.otesters.show();
		//var tempP = document.getElementById("tempP");
		//var colourCode = colour.replace(/ /g,"_").toLowerCase();
		//YAHOO.dulux.co.uk.OTQuickAdd (tempP, 'colour', colourCode);
	}

};


/**
 * Create and display the OETesters dialog box.
 *
 * @function
 * @param {String} colour The ID of the colour to use to configure the content.
 */
YAHOO.dulux.co.uk.duluxOrderLiterature = function(code, name) {
	var dialogCode = [
		"<h1>" + name + "</h1>",
		"<div id=\"OTQuickAddDiv\">",
		"<p class=\"literature-quick-add-busy\"><img style='margin-left:4px;margin-top:4px;margin-right:4px;margin-bottom:12px' width='16px' height='16px' src='/web/images/furniture/scrapbook/indicator_white.gif'></p>",
		"</div>"
	];

	YAHOO.dulux.co.uk.otesters.setHeader("");
	YAHOO.dulux.co.uk.otesters.setBody(dialogCode.join(""));
	YAHOO.util.Dom.setStyle('otesters-dialog', 'width', "500px"); 	
	YAHOO.util.Dom.setStyle('otesters-dialog', 'height', "393px"); 
	YAHOO.dulux.co.uk.otesters.setFooter("<img style=\"margin-left:-18px; margin-bottom: -18px;\" width=\"500\" height=\"104\" src=\"/web/images/furniture/img_wave500.gif\" />");
	YAHOO.dulux.co.uk.otesters.show();

	YAHOO.dulux.co.uk.OTQuickAdd(null, "literature", code);
};

/**
 * Simple AJAXed add to basket method for a colour sample/tester.
 *
 * @function
 * @param {HTMLObject} el		The button that called this method.
 * @param {String} itemtype		The type of item that is being added to the basket (Tester, paper sample).
 * @param {String} item			The ID of the product to add to the basket.
 */
YAHOO.dulux.co.uk.OTQuickAdd = function (el, itemtype, item) {
	if (el) {
		el.parentNode.innerHTML="<img style='margin-left:4px;margin-top:4px;margin-right:4px;margin-bottom:12px' width='16px' height='16px' src='/web/images/furniture/scrapbook/indicator_white.gif'>"
	}

	var OTquickAddCallback = {
		success: function(o) {
			var OTQuickAddDiv = document.getElementById("OTQuickAddDiv");
			var messageTxt = o.responseText.split("|")[0];
			OTQuickAddDiv.innerHTML =  "<p>" + messageTxt + "</p><ul class='menuList'><li><div align='left'><a href='/servlet/ShoppingBasketHandler?failURL=/order/index.jsp&amp;successURL=/order/index.jsp' class='menuLnk scta' onmouseout='roll(this)' onmouseover='roll(this)'>See your order <img width='7' height='7' border='0' alt='' src='/web/images/shared/arrow_0.gif'/></a></div></li>     <li><div align='left'><a onclick='YAHOO.dulux.co.uk.otesters.hide()' href='#' class='menuLnk scta' onmouseout='roll(this)' onmouseover='roll(this)'>Continue browsing <img width='7' height='7' border='0' alt='' src='/web/images/shared/arrow_0.gif'/></a></div></li></ul>";
			document.getElementById("headeritems").innerHTML = "Your order ("+o.responseText.split("|")[1]+")";
		},
		failure: function(o) {
			var OTQuickAddDiv = document.getElementById("OTQuickAddDiv");
			var messageTxt = "Sorry, there was a problem and we were unable to add this item to your order.";
			OTQuickAddDiv.innerHTML =  "<p>" + messageTxt + "</p><ul class='menuList'><li><div align='left'><a href='/servlet/ShoppingBasketHandler?failURL=/order/index.jsp&amp;successURL=/order/index.jsp' class='menuLnk scta' onmouseout='roll(this)' onmouseover='roll(this)'>See your order <img width='7' height='7' border='0' alt='' src='/web/images/shared/arrow_0.gif'/></a></div></li>     <li><div align='left'><a onclick='YAHOO.dulux.co.uk.otesters.hide()' href='#' class='menuLnk scta' onmouseout='roll(this)' onmouseover='roll(this)'>Continue browsing <img width='7' height='7' border='0' alt='' src='/web/images/shared/arrow_0.gif'/></a></div></li></ul>";
			document.getElementById("headeritems").innerHTML = "Your order";
		}
	};
	
	var sUrl="";
	var sArgs="";
	sUrl="/servlet/ShoppingBasketHandler";
	sArgs="action=add&ItemType="+itemtype+"&Quantity=1&ItemID="+item+"&successURL=/ajax/responseandbasket.jsp&failURL=/ajax/responseandbasket.jsp";
	var transaction = YAHOO.util.Connect.asyncRequest('POST', sUrl, OTquickAddCallback, sArgs);
};

/**
 * Simple AJAXed add to basket method for a colour sample/tester - replace the button with a confirmation message.
 *
 * @function
 * @param {HTMLObject} el		The button that called this method.
 * @param {String} itemtype		The type of item that is being added to the basket (Tester, paper sample).
 * @param {String} item			The ID of the product to add to the basket.
 */
YAHOO.dulux.co.uk.OTQuickContextAdd = function (el, itemtype, item) {
	
	var indicator = document.createElement("img");
	indicator.className = "qt-quick-context-add-loader";
	indicator.src = "/web/images/furniture/scrapbook/indicator_white.gif";
	indicator.alt = "Please wait";

	el.parentNode.replaceChild(indicator, el);

	var message = document.createElement("p");
	message.className = "qt-quick-context-add-message";

	var OTquickAddCallback = {
		success: function(o) {
			message.innerHTML = "This has been added to your order.";
			indicator.parentNode.replaceChild(message, indicator);

			// Add a view order button if there isn't one.
			//var viewOrder = document.getElementById("qt-quick-context-view-order");

			//if (viewOrder) {
			//	viewOrder.style.visibility = "visible";
			//}
		},
		failure: function(o) {
			message.innerHTML = "Sorry, there was a problem and this has not been added to your order.";
			indicator.parentNode.replaceChild(message, indicator);
		}
	};
	
	var sUrl="";
	var sArgs="";
	sUrl="/servlet/ShoppingBasketHandler";
	sArgs="action=add&ItemType="+itemtype+"&Quantity=1&ItemID="+item+"&successURL=/ajax/responseandbasket.jsp&failURL=/ajax/responseandbasket.jsp";
	var transaction = YAHOO.util.Connect.asyncRequest('POST', sUrl, OTquickAddCallback, sArgs);
};

/**
 * This creates an instance of the OTesters dialog box if the YUI code is available.
 */
YAHOO.dulux.co.uk.configureOTDialog = function () {
	var handleSubmit = function() {
		this.submit();
	};
	var handleCancel = function() {
		this.cancel();
	};

	if (YAHOO.widget.Dialog == undefined) {
		// no dialog is available
	} else {
		YAHOO.dulux.co.uk.otesters = new YAHOO.widget.Dialog("otesters-dialog", 
			{ width : "500px",
			  fixedcenter : true,
			  modal: true,
			  visible : false, 
			  close:true,
			  constraintoviewport : true,
			  zIndex : 1100  
			 } );
		
		YAHOO.dulux.co.uk.otesters.render();
	}
};


	
/**
 * Adds a colour sample to the users basket.
 *
 * @function
 * @param {HTMLObject} el		The button that called this function.
 * @param {String} code			The product code to add to the basket.
 */
YAHOO.dulux.co.uk.detailQuickAdd = function (el, code) {
	el.parentNode.parentNode.parentNode.id="skuAdd";
	el.parentNode.innerHTML="<img src='/web/images/furniture/scrapbook/indicator_white.gif' alt='' />"
	
	var sUrl = "/servlet/ShoppingBasketHandler?action=add&ItemType=sku&Quantity=1&ItemID="+code+"&failURL=/ajax/response.jsp&successURL=/ajax/response.jsp"
	
	var callback ={
		success: function(o) {
			var colName = o.responseText.replace("Dulux Colour Tester - ","").replace("was added to your order.","")
			document.getElementById("skuAdd").innerHTML="<p class=\"SuccessMsg\">"+colName+" Colour Tester was added to your order.</p><p><a href=\"/servlet/ShoppingBasketHandler\" class=\"scta\" onMouseOver=\"roll(this)\" onMouseOut=\"roll(this)\">See your order&nbsp;<img src=\"/web/images/shared/arrow_0.gif\" width=\"7\" height=\"7\" border=\"0\" alt=\"\" name=\"arrow_see\" /></a></p></div>";
			document.getElementById("skuAdd").id="";						
		},
		failure: function(o) {/*failure handler code*/}
	};
		
	var transaction = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback);
};


YAHOO.namespace("dulux.co.uk.Modal");

YAHOO.dulux.co.uk.Modal = {
	Flash: {	
		_modal: null,
		render: function(width, height, header) {
			var panel, hd, bd, ft;	
			
			if (this._modal) {
				this._modal.destroy();
			}

			panel = document.createElement("div");
			panel.id = "dulux-modal-flash";
			panel.className = "yui-panel-container yui-dialog shadow";

			hd = document.createElement("div");
			hd.className = "hd";

			bd = document.createElement("div");
			bd.className = "bd";

			ft = document.createElement("div");
			ft.className = "ft";

			panel.appendChild(hd);
			panel.appendChild(bd);
			panel.appendChild(ft);
			document.body.appendChild(panel);
			
			this._modal = new YAHOO.widget.Panel("dulux-modal-flash", { 
				width: width + "px",
				height: height + "px",
				fixedcenter : true,
				modal: true,
				visible : false, 
				close: true,
				constraintoviewport: true,
				zIndex: 1100,
				autofillheight: "body"
			});
		
			
			this._modal.setHeader(header);
			this._modal.setBody("<div id=\"dulux-modal-flash-movie\">Flash plugin is required to view \"" + header + "\".</div>");
			this._modal.render();
			this._modal.show();		
			this._modal.hideEvent.subscribe(function() {
				// This is to remove the Flash movie
				YAHOO.dulux.co.uk.Flash.remove("dulux-modal-flash-movie");
			});	
		},
		movie: function(e, flashName, width, height, vars, params, version) {		
			var ver = version || "8.0.0.",		
				height = height || 400,
				width = width || 400;			

			this.render(width, height, e.title);

			YAHOO.dulux.co.uk.Flash.embed(flashName, "dulux-modal-flash-movie", width, height, vars, params, ver);

			return false;
		},
		video: function(e, stream, width, height, vars, params, version) {
			var ver = version || "8.0.0.",		
				height = height || 400,
				width = width || 400;	
			
			this.render(width, height, e.title);

			var vars = {
				"MM_ComponentVersion": "1",
				"skinName": "/web/video/Halo_Skin_3",
				"streamName": "/web/video/test",
				"autoPlay": "false",
				"autoRewind": true
			};

			var params = {
				"quality": "high",
				"scale": "noscale",
				"pluginspage": "http://www.macromedia.com/go/getflashplayer",
				"wmode": "transparent"
			};
			
			YAHOO.dulux.co.uk.Flash.embed("/web/video/FLVPlayer_Progressive.swf", "dulux-modal-flash-movie", width, height, vars, params, ver);

			return false;
		}
	}
};

YAHOO.namespace("dulux.co.uk.Color.TailorMade");

/**
 * TailorMade functionality for the Colour section.
 */
YAHOO.dulux.co.uk.Color.TailorMade = {
	_modal: null,
	/**
	 * Create a modal box with the Flash video content.
	 * @param {HTMLObject} e The HREF to the flash video.
	 * @param {String} steam Name of the FLV to stream in the Flash player
	 * @return {Boolean} Returns FALSE to prevent default link action.
	 */
	video: function(e, stream) {
		if (this._modal === null || !document.getElementById("tailor-made-color-panel")) {
			var panel = document.createElement("div");
			panel.id = "tailor-made-color-panel";
			panel.className = "yui-panel-container yui-dialog shadow";

			var hd = document.createElement("div");
			hd.className = "hd";

			var bd = document.createElement("div");
			bd.className = "bd";

			var ft = document.createElement("div");
			ft.className = "ft";

			panel.appendChild(hd);
			panel.appendChild(bd);
			panel.appendChild(ft);
			document.body.appendChild(panel);
			
			this._modal = new YAHOO.widget.Panel("tailor-made-color-panel", { 
				width: "572px",
				height: "425px",
				fixedcenter : true,
				modal: true,
				visible : false, 
				close: true,
				constraintoviewport: true,
				zIndex : 1100  
			});
		}

		this._modal.setHeader(e.title);
		this._modal.setBody("<div id=\"tailor-made-color-movie\">Flash required for viewing \"" + e.title + "\".</div>");
		this._modal.render();
		this._modal.show();		
		this._modal.hideEvent.subscribe(function() {
			// This is to remove the Flash movie
			YAHOO.dulux.co.uk.Flash.remove("tailor-made-color-movie");
		});		

		var vars = {
			"MM_ComponentVersion": "1",
			"skinName": "/web/video/Halo_Skin_3",
			"streamName": "/web/video/" + stream,
			"autoPlay": "false",
			"autoRewind": true
		};

		var params = {
			"quality": "high",
			"scale": "noscale",
			"pluginspage": "http://www.macromedia.com/go/getflashplayer",
			"wmode": "transparent"
		};

		YAHOO.dulux.co.uk.Flash.embed("/web/video/FLVPlayer_Progressive.swf", "tailor-made-color-movie", 534, 339, vars, params, "8.0.0");

		UKISA.Sitestat.hit("video.colouradvice." + stream);
		return false;
	}
};

/**
 * Puts the cursor focus on the field that did not pass validation.
 *
 * @param {HTMLObject} field The field that did not validate.
 */
function highlightField(field) {
	field.focus();
	if (field.select) field.select();
}

/**
 * Raised when a field input fails validation. This calls highlightField and raises an alert.
 *
 * @see highlightField
 * @param {HTMLObject} field	The field that did not validate.
 * @param {String} msg			Error message to display.
 * @returns {Boolean}			Return FALSE to prevent form submission.
 */
function fieldError(field, msg) {
	if (field) {
		highlightField(field);
	}
	alert(msg);
	return false;
}

/**
 * Validation that checks for numbers.
 *
 * @returns {Boolean} Validation result.
 */
function hasNumbers(str) {
	var exp = new RegExp("[0-9]");
	return exp.test(str);
}

/**
 * Validation that checks at least one radio button being checked.
 *
 * @returns {Boolean} Validation result.
 */
function isRadiogroupChecked(radioGroup) {
	for (var i=0;i<radioGroup.length;i++) if (radioGroup[i].checked) return true;
	return false;
}

/**
 * Validation that checks that the value is a number (float).
 *
 * @returns {Boolean} Validation result.
 */
function isNumeric(str) {
	var num=parseFloat(str);
	return (!isNaN(num)||str=="");
}

/**
 * Validation that checks that the value is an integer without a decimal point.
 *
 * @returns {Boolean} Validation result.
 */
function isInteger(str) {
	var num=parseInt(str);
	return (str.indexOf(".")<0 && (!isNaN(num)||str==""));
}

/**
 * Validation that checks that the value is a phone number.
 *
 * @returns {Boolean} Validation result.
 */
function isPhoneNumber(str) {
	var exp = new RegExp("^[0-9 ]*$");
	return exp.test(str);
}

/**
 * Validation that checks that a number is within a range or values.
 *
 * @returns {Boolean} Validation result.
 */
function inRange(num, lower, upper) {
	if (isNaN(num)) num=0;
	return (num>=lower&&num<=upper);
}

/**
 * Validation that checks that the value only contains alpha characters.
 *
 * @returns {Boolean} Validation result.
 */
function isAlpha(str) {
	var exp = new RegExp("[^A-Za-z]");
	return !exp.test(str);
}

/**
 * Validation that checks  that the value only contains alphanumeric characters.
 *
 * @returns {Boolean} Validation result.
 */
function isAlphaAndNumeric(str) {
	var exp = new RegExp("[^A-Za-z0-9]");
	return !exp.test(str);
}

/**
 * Trims all whitespace from user input.
 *
 * @returns {String} The trimmed value.
 */
function trimSpaces(str) {
	return str.replace(/\s+/g, "");
}

/**
 * Trims whitespace from the start and end of a value.
 *
 * @returns {String} The trimmed value.
 */
function trimOutsideSpaces(str) {
	return str.replace(/^\s+|\s+$/g, "");
}

/**
 * Validation that that a value is in the correct sequence.
 *
 * @returns {Boolean} Validation result.
 */
function isValidSequence(str, validSequence) {
	// is this correct - need to test
	var exp = new RegExp("[^" + validSequence + "]");
	return !exp.test(str);
}

/**
 * Validation that checks the the value is a valid email.
 *
 * @returns {Boolean} Validation result.
 */
function isEmail(str) {
	str = trimOutsideSpaces(str.toLowerCase());
	var exp = new RegExp(/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[(2([0-4]\d|5[0-5])|1?\d{1,2})(\.(2([0-4]\d|5[0-5])|1?\d{1,2})){3} \])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
	return exp.test(str);
}

/**
 * Checks that a value has been selected from a drop down.
 *
 * @returns {Boolean} Validation result.
 */
function isValueSelected(field) {
	return (field.options[field.selectedIndex].value!="");
}

/**
 * Validates a postcode.
 *
 * @returns {Boolean} Validation result.
 */
function validatePostCode(field, combo, partial) {
	// drop out if not a UK postcode
	if(((combo) && combo.options[combo.options.selectedIndex].value!="United Kingdom")) return true;
	var str = trimSpaces(field.value.toUpperCase());
	
	// check if field filled
	if (str.length==0) return fieldError(field, "Please enter a postcode.");
	
	// check if its alphanumeric
	if (!isAlphaAndNumeric(str)) return fieldError(field, "Please enter a valid UK postcode (containing both letters and numbers).");
	
	// check postcode formatting
	var exp = (partial&&partial==true)?new RegExp("^[A-Z]{1,2}([0-9]{1,2}|[0-9][A-Z])($|[0-9][ABD-HJLNP-UW-Z]{2}$)"):new RegExp("^[A-Z]{1,2}([0-9]{1,2}|[0-9][A-Z])[0-9][ABD-HJLNP-UW-Z]{2}$");
	
	// need to disable this final validation because NS4 doesn't evalute regexp properly
	if (!exp.test(str)&&!document.layers) return fieldError(field, "Please enter a valid UK postcode.");
	else return true;
}

/**
 * Gets the number of days in a specified month.
 *
 * @returns {Integer} Number of dats in the year.
 */
function getDays(month, year) {
	var monthDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
	monthDays[1] = (year % 4 == 0 && year % 100 != 0 || year % 400 ==0)?monthDays[1]+1:monthDays[1];
	return monthDays[month-1];
}

/**
 * Validates a date of birth. 
 *
 * @returns {Boolean} Validation result.
 */
function validateDateOfBirth(day, month, year) {
	var dayStr = trimSpaces(day.value);
	var monthStr = trimSpaces(month.value);
	var yearStr = trimSpaces(year.value);
	var theDate = new Date();
	// check if fields filled
	if (dayStr.length==0||monthStr.length==0||yearStr.length==0) return fieldError(day, "Please complete your full date of birth.");
	// check if they are all individually valid
	if (!(isNumeric(yearStr)&&inRange(parseInt(yearStr), 1849, theDate.getFullYear()))) return fieldError(year, "Please give a valid year.  It may not be before 1849 or after the present year.");
	if (!(isNumeric(monthStr)&&inRange(parseInt(monthStr), 1, 12))) return fieldError(month, "Please give a valid month (1 - 12).");
	var daysInMonth = getDays(parseInt(monthStr), parseInt(yearStr));
	if (!(isNumeric(dayStr)&&inRange(parseInt(dayStr), 1, daysInMonth))) return fieldError(day, "Please give a valid day.");
	// check its not in the future
	var DOB = new Date(parseInt(yearStr), parseInt(monthStr) - 1, parseInt(dayStr));
	if (DOB>=theDate) return fieldError(day, "Please give a date of birth that is not in the future.");
	return true;
}


YAHOO.namespace("dulux.co.uk.Helpers");
/**
 * @namespace Helper methods.
 * @memberOf YAHOO.dulux.co.uk
 */
YAHOO.dulux.co.uk.Helpers = {
	/**
	 * Apply a class of "nth-child" to a frequency of a collection of items.
	 *
	 * @memberOf YAHOO.dulux.co.uk.Helpers
	 * @param {Object} list Collection of enumerable objects.
	 * @param {Integer} freq The nth item in the list to apply the class to.
	 */
	nthChild: function(list, freq) {
		for (var i = 0, ix = list.length; i < ix; i++) {
			if ((i + 1) % freq == 0) {
				YAHOO.util.Dom.addClass(list[i], "nth-child"); 
			} else {
				YAHOO.util.Dom.removeClass(list[i], "nth-child"); 
			}
		}
	},
	/**
	 * Clear the default text on a textbox when focus is gained.
	 *
	 * @memberOf YAHOO.dulux.co.uk.Helpers
	 * @param {String} Unlimited list of arguments for inputs to apply this to
	 */
	clearDefault: function () {
		var action = function(el) {
			var v = el.value;
			el.onfocus = function() {
				if (this.value === v) {
					this.value = "";
				}
			};
			el.onblur = function() {
				if (this.value === "") {
					this.value = v;
				}
			};
		};

		for (var i = 0, ix = arguments.length; i < ix; i++) {
			action(document.getElementById(arguments[i]));
		}
	},
	/**
	 * Gets the real parent node of an element, skipping inapporpriate node types e.g. whitespace as used in IE.
	 *
	 * @memberOf YAHOO.dulux.co.uk.Helpers
	 * @param {String|HTMLObject} el Element to find the parent node of.
	 * @returns {HTMLObject} The real parent node of the element.
	 */
	parentNode: function(el) {
		var e = (typeof el == "string") ? document.getElementById(el) : el;
		var node = null;
		if (e && e.parentNode) {
			while (e.parentNode.nodeType != 1) {
				e = e.parentNode;
				node = e;
			}
			return (!node) ? e.parentNode : node;
		}
	},
	/**
	 * Remove white space before or after a string
	 *
	 * @memberOf YAHOO.dulux.co.uk.Helpers
	 * @param {String} s String to trim white space from
	 * @return {String}	 Returns a clean string with white space removed
	 */
	trim: function(s) {
		return s.replace(/^\s+|\s+$/g, "");
	},
	amendUrl: function(e) {
		if (e.value.indexOf("?") != -1) {
			e.value = e.value + "&amp;ajax=1";
		} else {
			e.value = e.value + "?ajax=1";
		}
	}
};


YAHOO.namespace("dulux.co.uk.featuredWallpaper");

YAHOO.dulux.co.uk.featuredWallpaper = function() {
	var hero, description, lifestyle, loader, nav;
	
	loader = false;

	// The large wallpaper example.
	hero = document.getElementById("wallpaper-lifestyle");
	
	description = document.getElementById("wallpaper-lifestyle-choice");

	nav = document.getElementById("wallpaper-range-nav");
			
	// Get the swatch styles selector.
	YAHOO.util.Event.addListener("wallpaper-range-nav", "click", function(e) {
		var origin, Event, Dom, room, image, loading;
		Event = YAHOO.util.Event;
		Dom = YAHOO.util.Dom;

		// Check where the event came from
		origin = Event.getTarget(e);

				
		// Compare with the right node name
		if (origin.nodeName.toLowerCase() === "a") {

			if (!loader) {
				loader = true;

				loading = document.createElement("p");
				loading.innerHTML = "Please wait...";
				loading.className = "loading";
				hero.appendChild(loading);

				nav.className = "loading";

				// Update the body class name.
				document.body.className = "wallpaper-" + origin.parentNode.className + " wallpaper-page";

				// Update the selected text.
				description.innerHTML = "<strong>Now displaying</strong>" + origin.innerHTML;
				
				// The large wallpaper example - image
				room = hero.getElementsByTagName("img");
				hero.removeChild(room[0]);

				image = document.createElement("img");
				image.alt = "";
				Event.addListener(image, "load", function() {

					nav.className = "";
					loader = false;
					hero.replaceChild(this, loading);
				});
				image.src = "/web/images/wallpaper/" + origin.className + ".jpg";
			}
		}
		   
		Event.preventDefault(e);
	});
}

var UKISA = UKISA || {};
UKISA.Sitestat = {
	/**
	 * Make a call to the Sitestat server to register a page view.
	 */
	hit: function(qs) {
		var url, ns_0, ns_pixelUrl;

		// This checks that the site is "live" as is must have the sitestat function.
		// This stops polluting the stats with UAT data.

		if (typeof sitestat === "function") {
			
			url = "http://int.sitestat.com/ici-paints/dulux-ie/s?" + qs;

			url += "&amp;ns__t=" + (new Date()).getTime();
			ns_pixelUrl = url;
			ns_0 = document.referrer;
			ns_0 = (ns_0.lastIndexOf("/") == ns_0.length - 1) ? ns_0.substring(ns_0.lastIndexOf("/"), 0) : ns_0;

			if(ns_0.length > 0) {
				url += "&amp;ns_referrer=" + escape(ns_0);
			}
			if(document.images){
				ns_1 = new Image();
				ns_1.src = url;
			} else {
				document.write('<img src="' + url + '" width="1" height="1" alt="" class="tracking" style=\"display: none;\" />');
			}
			
		}
	}
};



YAHOO.util.Event.onDOMReady(YAHOO.dulux.co.uk.Navigation.highlight);
//YAHOO.util.Event.addListener(window, 'load', YAHOO.dulux.co.uk.Navigation.highlight);
YAHOO.util.Event.addListener(window, 'load', YAHOO.dulux.co.uk.initScrapbook);
YAHOO.util.Event.onDOMReady(YAHOO.dulux.co.uk.configureOTDialog);
YAHOO.util.Event.onDOMReady(YAHOO.dulux.co.uk.initRollovers);