var myBasket = new Class({
	Implements: [Events,Options],
	options: {
		cookieName: "basket"
	},
	initialize: function(options) {
		this.setOptions(options);
		this.read();
	},
	read: function() {
		this.contents = Cookie.read(this.options.cookieName) || "";
		return this;
	},
	add: function(product, version, qtty) {
		// add a product to basket
		if (this.contents.length) {
			// basket has items?
			var basketItems = this.contents.split(","), newBasket = [];

			newBasket.push(product + "-" + version + "-" + qtty);

			// already in there?
			if (!basketItems.toString().contains(product + "-" + version + "-"))
				this.contents = newBasket.combine(basketItems).join(",");

		}
		else {
			// make a new one
			this.contents = product + "-" + version + "-" + qtty;
		}
		// save this
		this.freshen();
		return this;
	},
	setQtty: function(product, version, qtty) {
		if (this.contents.length) {
			// basket has items?
			var basketItems = this.contents.split(",");

			basketItems.each(function(item, index) {
				var data = item.split("-");
				if (data[0] == product && data[1] == version) {
					basketItems[index] = product + "-" + version + "-" + qtty;

				}
			});

			this.contents = basketItems.join(",");
			this.freshen();
		}

	},
	freshen: function() {
		// commit to cookie
		Cookie.dispose(this.options.cookieName);
		Cookie.write(this.options.cookieName, this.contents, {
			path: "/",
			duration: 30,
			domain: ".webtogs.co.uk"
		});
		return this;
	},
	remove: function(version) {
		// remove an exact product from basket
		var basketItems = this.contents.split(","), newBasket = [];

		basketItems.each(function(item, index) {
			var data = item.split("-");
			if (data[1] != version) {
				newBasket.push(item);
			}
		});

		this.contents = newBasket.join(",");
		this.freshen();
		return this;
	},
	showTotal: function() {
		var el = document.id("miniBasketTotalReal");
		if (!el)
			return;
		if (!this.contents.length) {
			document.id("miniBaksetProds").empty().grab(new Element("div", {
				"html": "Your shopping basket is now empty.",
				styles: {
					padding: 100,
					textAlign: "center"
				}
			}).fade(0,1));
			var total = 0;
			document.id("cost").set("html", total.money(moneySign));
			document.id("items").set("html", "none");
			return;
		}


		var selects = document.id("modalBody").getElements("select"), total = 0;
		var items = 0;
		selects.each(function(sel) {
			var data = sel.get("value").split("-");
			var price = sel.getSelected()[0].get("rel").toFloat();
			total += price * data[2].toInt();
			items += data[2].toInt();
		});
		var moneySign;
		switch(el.get("class")) {
			case "Euro":
				moneySign = '€';
				break;
			case "Australian_Dollars":
				moneySign = '$';
				break;
			default:
				moneySign = '£';
		}
		el.set("html", total.money(moneySign));
		document.id("cost").set("html", total.money(moneySign));
		document.id("items").set("html", items);
	},
	show: function(el) {

		var el = document.id(el) || document.id("SBL"), _this = this;
		// window.location.href='/basket.php';
		el.modalBox({
			width: (Browser.Engine.trident4) ? 692 : 685,
			height: 600,
			title: "<div class='ysb'>YOUR SHOPPING BASKET</div>",
			text: "<div class='spinnerBasket'>loading your basket contents...</div>",
			movable: true,
			innerPadding: 0,
			modal: true,
			callback: function() {
				new Request({
					url: "/miniBasket.php",
					method: "get",
					evalScripts: true,
					onComplete: function() {
						var modalBody = $("modalBody");
						modalBody.set("html", this.response.text);

						new mooSelecta({
							selector: "myselects2",
							parentNode: modalBody,
							wrapperHeight: 194
						});

						var also = document.id("alsoHeader");
						if (also)
							also.setStyle("opacity", .8);

						var real = document.id("realBought");
						if (real) {
							document.id("alsoProd").set("html", real.get("html"));
							real.destroy();
						}

						(function() {
							return;
							var also = document.id("alsoHeader");
							if (!also)
								return;
							also.set("tween", {
								duration: 1000,
								onComplete: function() {
									if (document.id("alsoHeader"))
										also.destroy();
								}
							}).fade(0);
						}).delay(1400);

						// events....
						var selects = modalBody.getElements("select");

						// qtty change!
						if (selects.length) {
							selects.each(function(sel) {
								sel.addEvent("change", function() {
									var contents = this.get("value").split("-");
									togBasket.setQtty(contents[0], contents[1], contents[2]);
									sel.getParent("div.miniBasketLine").fade(0,1);
									togBasket.showTotal();
								});
							});
						}

						var removals = modalBody.getElements("a.removeItem");

						if (removals.length) {
							modalBody.addEvent("click:relay(a.removeItem)", function(e, ael) {
								e.stop();
								togBasket.remove(ael.get("rel"));
								ael.getParent("div.miniBasketLine").set("tween", {
									onComplete: function() {
										this.element.dispose();
										togBasket.showTotal();
									}
								}).fade(0);
							});

						}

						document.id("cs1").addEvent("click", function() {
							document.id("modalClose").fireEvent("click");
						});

						_this.showTotal();
					}
				}).send("cn="+_this.options.cookieName);
			}
		});



	}
});

var togBasket = new myBasket();

var mooPlaceholder = new Class({
	// behaviour for default values of inputs class
	Implements: [Options],
	options: {
		// default options
		htmlPlaceholder: "placeholder",
		// the element attribute, eg, data-placeholder="MM/YY" -> "data-placeholder"
		unmoddedClass: "unchanged",
		// apply a class to the unmodded input, say, to grey it out
		parentNode: document,
		// limit to a particular set of child nodes
		defaultSelector: "input[placeholder]"
	},
	initialize: function (options) {
		this.setOptions(options);
		this.nativeSupport = 'placeholder' in document.createElement('input');
	},
	attachToElements: function (selector) {
		// basic function example that uses a class selector to
		var inputs = this.options.parentNode.getElements(selector || this.options.defaultSelector);
		if (inputs.length) {
			inputs.each(function (el) {
				this.attachEvents(el);
			}, this);
		}
	}, // end attachToElements
	attachEvents: function (el, placeholder) {
		// method that attaches the events to an input element.
		var placeholder = placeholder || el.get(this.options.htmlPlaceholder);
		if (this.nativeSupport || !$(el) || !placeholder || !placeholder.length) return;

		if (el.retrieve("placeholder"))
			return;

		el.set("value", placeholder).store("placeholder", placeholder);
		// append unmodded class to input at start
		if (this.options.unmoddedClass) el.addClass(this.options.unmoddedClass);
		// now cater for the events
		el.addEvents({
			change: this.changer = function () {
				// when value changes
				var value = el.get("value").trim(),
				placeholder = el.retrieve("placeholder");
				if (value != placeholder) {
					// once it changes, remove this check and remove the unmoddedClass
					el.removeClass(this.options.unmoddedClass).removeEvent("change", this.changer);
				}
			}.bind(this),
			focus: function () {
				var value = el.get("value").trim(),
				placeholder = el.retrieve("placeholder");
				if (value == placeholder) {
					el.set("value", "").removeClass(this.options.unmoddedClass);
				}
			}.bind(this),
			blur: function () {
				var value = el.get("value").trim(),
				placeholder = el.retrieve("placeholder");
				if (value == placeholder || value == "") {
					el.set("value", placeholder).addClass(this.options.unmoddedClass);
				}
			}.bind(this)
		});
	}
});

(function() {
	// scroller closure.
	var moveTimer, moveStatus = false, prdScrolling = false, productScroll;
	window.Scroller = new Class({
		images: [],
		options: {
			cats: [],
			productContainer: $empty(),
			totalProducts: 0,
			moveDelay: 10,
			moveSteps: 5,
			moveDirection: "Right",
			productToScrollTo: $empty(),
			arrowLeft: $empty(),
			arrowRight: $empty(),
			product_: $empty(),
			loadedImages: [],
			buttons: {
				rightOff: "/img/scroll-right-off.jpg",
				rightOn: "/img/scroll-right.jpg",
				leftOff: "/img/scroll-left-off.jpg",
				leftOn: "/img/scroll-left.jpg"
			},
			buttons: {
				rightOff: "/img/products/scroll-right-off.gif",
				rightOn: "/img/products/scroll-right.gif",
				leftOff: "/img/products/scroll-left-off.gif",
				leftOn: "/img/products/scroll-left.gif"
			},
			startCoords: {
				left: 0,
				top: 0
			}
		},
		Implements: [Options, Events],
		initialize: function(options) {
			this.setOptions(options);
			this.element = this.get("productContainer").setStyle("opacity", "0");

			this.products = this.options.products.getChildren();

			this.set("totalProducts", this.products.length);
			this.getData();
			this.attach();
		},
		getData: function() {
			this.products.each(function(el) {
				var foo = {};
				var link = el.getFirst();
				if (link) {
					foo.image = el.get("data-thumb");
					foo.url = link.get("href");
					foo.title = link.get("text");
					foo.price = el.getLast().get("html");
					foo.brand = el.get("data-brand");
					this.images.push(foo);
				}
			}, this);

		},
		attach: function() {
			this.loadImages();
			this.setEvents();
		},
		set: function() {
			// internal setter for options that can take a json or a simple pair
			switch ($type(arguments[0])) {
				case "object":
					this.setOptions(arguments[0]);
					break;
				default:
					if (arguments.length == 2) {
						var newo = {}
						newo[arguments[0]] = arguments[1];

						this.setOptions(newo);
					} else {
						C.log("incorrect number of arguments");
					}
					break;
				case "false":
					return false;
					break;
			}
		},
		get: function(key) {
			// this.options getter, 1.2 stylee...
			return this.options[key];
		},
		goToProduct: function(i) {
			// go to product with index i.
			prdScrolling = true; // added to recall productScrolling state due to window.scroll

			window.addEvent("scroll", function() {
				if (prdScrolling) {
					// need a fix, if window.scroll fires, it stops the instance of our Fx.Scroll (productScroll)

					// go w/o
					this.element.scrollTo(this.get("moveSteps")*i);
					this.element.setStyle("opacity", 1);
					this.setButtons(); // fix scrolling left/right buttons as per scroll state
					moveStatus = false;
					prdScrolling = false;
				}
			}.bind(this));

			productScroll = new Fx.Scroll(this.element, {
				transition: Fx.Transitions.Elastic.easeOut,
				duration: 1500,
				wait: true,
				onComplete: function() {
					moveStatus = false;
					prdScrolling = false;
					this.element.setStyle("opacity", 1);
					this.setButtons();
				}.bind(this)
			});

			var el = this.element.getSize2();

			moveStatus = true;
			productScroll.start(el.scroll.x+this.get("moveSteps")*i, 0);
		},
		setButtons: function() {
			var el = this.element.getSize2();
			if (this.get("totalProducts") <= 10) {
				this.get("arrowRight").set("src", this.options.buttons.rightOff);
				this.get("arrowLeft").set("src", this.options.buttons.leftOff);
				return false;
			}
			if ((el.scroll.x + el.size.x)>= el.scrollSize.x - 1) {
				this.get("arrowRight").set("src", this.options.buttons.rightOff);
			}
			else {
				this.get("arrowRight").set("src", this.options.buttons.rightOn);
			}

			if (el.scroll.x <= 0) {
				this.get("arrowLeft").set("src", this.options.buttons.leftOff);
			}
			else {
				this.get("arrowLeft").set("src", this.options.buttons.leftOn);
			}
		},
		move: function(fn) {

			if (moveStatus)
				return false;

			var _this = this;
			productScroll = new Fx.Scroll(this.element, {
				offset: {
					x:0,
					y:0
				},
				transition: Fx.Transitions.Cubic.easeOut,
				duration: this.get("moveDelay"),
				onComplete: function() {
					moveStatus = false;
					_this.element.setStyle("opacity", 1);
					_this.setButtons();
					if (fn)
						fn.pass(this)();
				}
			});
			var el = this.element.getSize2();
			if (this.get("moveDirection") == "Right") {
				if ((el.scroll.x + el.size.x)>= el.scrollSize.x - 1) {
					$clear(moveTimer);
					this.get("arrowRight").set("src", this.options.buttons.rightOff);
					return;
				}
				this.element.setStyle("opacity", .8);

				moveStatus = true;
				productScroll.start(el.scroll.x+this.get("moveSteps"), 0);

			}
			else {
				var el = this.element.getSize2();
				if (el.scroll.x <= 0) {
					$clear(moveTimer);
					this.get("arrowLeft").set("src", this.options.buttons.leftOff);
					return;
				}
				this.element.setStyle("opacity", .8);

				moveStatus = true;
				productScroll.start(el.scroll.x-this.get("moveSteps"), 0);
			}

		}, // end mover
		stop: function() {
			$clear(moveTimer);
		},
		moveResume: function() {
			if ($("zoomer"))
				$("zoomer").fade(1,0);
			if (this.get("totalProducts") <= 10)
				return;
			moveTimer = (function() {
				if (moveStatus == false)
					this.move();
			}).periodical(this.get("moveDelay"), this);
		},
		loadImages: function() {
			// pre-load them
			var _this = this;
			this.get("product_").empty();
			this.images.each(function(im, c) {
				// need to make a containing layer.
				if (im.url == "") return;

				var prod_layer = new Element('div', {
					"class": "scrollImage curImage",
					styles: {
						"text-align": "center",
						float: "left",
						opacity: 1,
						width: 78,
						height: 84,
						padding: 2,
						"margin-right": 1,
						border: (im.url == "#") ? "1px solid #c6d9d3" : "1px solid #fff",
						background: (im.url == "#") ? "#fff url(/img/prodScrollCurrent.gif) repeat-x bottom left" : "#fff url(/img/tiny_red.gif) no-repeat center center"
					}
				}).inject(_this.get("product_")); // add to dom within the product_ object

				if (im.url != "#") {
					prod_layer.addEvent("click", function() {
						window.location.href = im.url;
					}); // addEvent etc.
				}
				else {
					_this.set("productToScrollTo", c);
					prod_layer.removeClass("curImage");
				}

				new Asset.image(im.image, {
					title: im.title,
					onload: function(img) {
						if (!img.width) {
							img = new Asset.image("/img/noimageyet.gif").setStyles({
								height: 70,
								width: 70
							});
						}
						img.inject(prod_layer);

						this.addProdEvents(prod_layer, im, img);


					}.bind(this)
				}).setStyles({
					height: 70,
					width: 70
				});
			}, this); // each
		},
		addProdEvents: function(prod_layer, im, thumb) {
			var _this = this;

			new Element("div").set("html", "<div style='text-align: center; font-weight: bold;'>" +im.price+"</div>").inject(prod_layer);

			var mytime, showtime;

			prod_layer.addEvents({
				mouseenter: function() {
					var __this = this;
					$clear(mytime);
					$clear(showtime);
					if (moveStatus)
						return false;

					showtime = (function() {
						_this.set("mouseOverDelay", 200);
						if ($("zoomer")) {
							$("zoomer").destroy();
						}
						var coords = __this.getPosition();
						var parentScroll = _this.element.getScroll();

						var newCoordinates = {
							left: (_this.get("startCoords").left == 0) ? coords.x - 36 : _this.get("startCoords").left,
							top: coords.y - 36,
							newLeft: coords.x - parentScroll.x - 36
						};

						var zoomer = new Element("div", {
							id: "zoomer",
							"class": "shadowy",
							styles: {
								left: newCoordinates.left,
								top: newCoordinates.top,
								opacity: .5
							},
							events: {
								mouseleave: function() {
									startCoords = this.getCoordinates();
									mytime = (function() {
										_this.set("startCoords", {
											left: 0
										});
									}).delay(500);
									this.dispose();
									_this.zoomed = false;
									if ($("wheeltip"))
										this.tipaway();
								},
								mouseenter: function() {
									_this.zoomed = true;
									if (!_this.get("shown") && _this.images.length > 10) {
										/*this.tooltip("You can use your mousewheel to scroll between different products", {
                                            delay: 5000,
                                            topOffset: 82,
                                            id: "wheeltip",
                                            opacity: 1
                                        });*/
										_this.set("shown", true);
									}
								},
								mousewheel: function(e) {
									var e = new Event(e).stop();

									_this.set("moveDirection", (e.wheel >= 0) ? "Left" : "Right");
									_this.move((function() {
										this.dispose();
										_this.set("mouseOverDelay", 0);
									}).bind(this));
								}
							}
						}).adopt(thumb.clone().addClass((im.url != "#") ? "curImage" : "").setStyles({
							height: 129,
							width: 129
						}).addEvents({
							click: function() {
								prod_layer.fireEvent("click");
							}
						})).inject(document.body).fade(.5, 1, {
							remove: false
						});


						if (_this.get("startCoords").left != 0) {
							var adjust = new Fx.Style(zoomer, "left", {
								duration: 300,
								transition: Fx.Transitions.Expo.easeOut
								});
							adjust.start(newCoordinates.left, newCoordinates.newLeft);
						}

						new Element("div").setStyles({
							"text-align": "center",
							"font-size": "10px"
						}).set("html", "<a href='"+im.url+"'>"+im.title+"</a><br /><span style='color: #C11A2C'>"+im.price+"</span>").inject(zoomer);
					}).delay(_this.get("mouseOverDelay"));

				// showtime();
				},
				mouseleave: function() {
					$clear(showtime);
				}
			});


			// load has completed, show the layer
			this.element.setStyle("visibility", "visible");

			this.setButtons();
			this.element.fade(0, 1);

			// if not in view, we need to go there...
			// where?
			if (this.get("productToScrollTo") < this.get("totalProducts") || this.get("productToScrollTo") >= 10) {
				this.goToProduct(this.get("productToScrollTo") - 4);
			}
			else {
				this.set("productToScrollTo", 0);
				this.element.setStyle("opacity", 1);

				this.goToProduct(0);
			}

		}, // end loadImages
		setEvents: function() {
			// define events for arrows and the likes.
			var _this = this;
			this.get("arrowRight").addEvents({
				mouseenter: function() {
					_this.set("moveDirection", "Right");
					_this.moveResume();
				},
				mouseleave: function() {
					_this.stop();
				}
			});

			this.get("arrowLeft").addEvents({
				mouseenter: function() {
					_this.set("moveDirection", "Left");
					_this.moveResume();
				},
				mouseleave: function() {
					_this.stop();
				}
			});


		} // end setEvents
	}); // end togs_scroller
})();


var Form = {
	// wrapper class for form element values
	getValue: function(name) {
		if ($type(name) == "object")
			return name.get("value");

		var elems = $$('input[name='+name+'], select[name='+name+'], textarea[name='+name+']');
		var value = false;
		elems.each(function(el) {
			if ($(el).get("value")) {
				value = $(el).get("value");
			}
		});
		return value;
	},
	setValue: function(name, value) {
		if ($type(name) == "object")
			name.set("value", value);

		var elems = $$('input[name='+name+'], select[name='+name+'], textarea[name='+name+']');
		elems.each(function(el) {
			if (value != false)
				$(el).set("value", value);
		});
	}
};



$F = Form.getValue;
$f = Form.setValue;

var AjaxLoader = new Class({
	options: {
		zIndex: 1000000,
		loaderImage: "/img/ajax-loader.gif",
		background: "#fff",
		opacity: .7,
		loaderLeft: "center",
		loaderTop: "center",
		loaderAutoTop: true,
		loaderAutoTopMargin: "140px"
	},
	Implements: [Options, Events],
	initialize: function(options) {
		this.setOptions(options);
		new Asset.image(this.options.loaderImage); // cache it.
		return this;
	},
	make: function(el) {
		this.element = $(el);
		this.coords = this.element.getCoordinates();
		if (this.options.loaderAutoTop === true)
			this.options.loaderTop = (this.coords.height > 434) ? this.options.loaderAutoTopMargin : "center";

		var imagebit = (this.options.loaderImage.length)
		? " url(" + this.options.loaderImage + ") no-repeat " + this.options.loaderLeft + " " + this.options.loaderTop
		: "";

		this.loader = new Element("div", {
			styles: $merge({
				position: "absolute",
				zIndex: this.options.zIndex,
				opacity: this.options.opacity,
				background: this.options.background + imagebit
			}, this.coords)
		}).inject(document.body);

		el.store("loader", this.loader);

		return this;
	},
	remove: function() {
		if (this.loader)
			this.loader.dispose();

		return this;
	},
	removeFromElement: function(el) {
		if (el.retrieve("loader"))
			el.retrieve("loader").dispose();

		return this;
	}
});



var winSizes = {};
var menuEvents = function() {
	if ($("SC")) {
		$("SC").addEvent("click", function(e) {
			e.stop();
			ShowCategories();
		});
	}

	if ($("pageControl")) {
		$("pageControl").addEvent("click", function(e) {
			e.stop();
			ShowPage();
		});
	}

	var searchField = $("searchfield");
	if (searchField) {
		$("searchButton").addEvents({

			"click": function() {
				if (searchField.get("value").length) {
					if (searchField.get("value") == searchField.get("placeholder") || searchField.get("value").trim() == '') {
						simpleBubble(searchField, "Please type<br />keywords here");
						searchField.set("value", "").fireEvent("focus");

						return false;
					}

					$("searchForm").submit();
				} else {
					return false;
				}
			}
		}).addClass("curImage");

		var completer = new Autocompleter.Ajax.Json(searchField, "/searchAjax.php", {
			customTarget: $("searchSuggest"),
			ajaxOptions: {
				"method": "get"
			},
			"minLength": 3,
			'postVar': 'q',
			'onRequest': function(el) {
				searchField.addClass("search_ing");
			},
			'onComplete': function(el) {
				searchField.removeClass("search_ing");
			},
			"onSelect": function(el, choice) {
				var choiceURL = choice.get("rel");
				//console.log(el, choice);

				if (choiceURL)
					if (choiceURL.length) {
						toggleModal("#fff");
						 window.location.href = choiceURL;
						return false;
					}

			 $("searchButton").fireEvent("click");

			}
		});

		if (Browser.Engine.trident4 && $("main")) {
			var sorter = $("main").getElement("div.sorter");

			if (sorter)
				sorter.setStyles({
					"float": "left",
					"margin-left": 10
				});
		}

	}

	var knobRail = document.id("knobRail");
	if (knobRail) {
		(function() {
			var children = knobRail.getChildren().get("data-pos");

			if (children.length != 2 || children[0] === null)
				return;

			var rangeData = JSON.decode(knobRail.get("data-pos"));
			var range = [rangeData.min.toInt(), rangeData.max.toInt()];
			var start = [knobRail.getFirst().get("data-pos").toInt(), knobRail.getLast().get("data-pos").toInt()];
			var allowSubmit = false;
			document.getElements("div.knobs").set("title", "Drag slider to adjust");


			var moneyEls = {
				min: document.id('minMoney'),
				max: document.id('maxMoney')
			};

			var showMoney = function(min, max) {
				moneyEls.min.set("html", "&pound;" + min);
				moneyEls.max.set("html", "&pound;" + max);
			};

			new DoubleSlider(knobRail, {
				range: range,
				start: start,
				onChange: function(pos) {
					allowSubmit = true;
					showMoney(pos.knob_left, pos.knob_right);
				},
				onComplete: function(pos) {
					$data = {
						a: "applyPriceFilter",
						t: $("priceHeading").get("data-type"),
						min: pos.knob_left,
						max: pos.knob_right,
						filters: knobRail.get("data-filters"),
						price: (pos.knob_left == rangeData.min && pos.knob_right == rangeData.max) ? false : true
					};

					ajl.make(document.id("main"));

					new Request({
						url: "/accountAjax.php",
						method: "get",
						data: $data,
						onComplete: function() {
							window.location.href = this.response.text;
						}
					}).send();

				}
			});

			showMoney(start[0], start[1]);
		})();
	}

	if ($("priceHeading")) {
		$("priceHeading").addEvents({
			click: function(e) {
				new Event(e).stop();

				if (this.hasClass("catChoiceOn"))
					return false;

				this.addClass("catChoiceOn");

				ajl.make($("main"));
				window.location.href = this.get("data-any");
			}
		});

	}
};


// sex icons
var icons = ["/img/icons/male.gif", "/img/icons/female.gif"];


var basketEvents = function() {
	var sbl = document.id("SBL"), timer
	if (!sbl)
		return;


	sbl.addEvents({
		mouseenter: function() {
			$clear(timer);
			timer = (function() {
				togBasket.show(sbl);
			}).delay(3000);
		},
		mouseleave: function() {
			$clear(timer);
		}
	});
} // end basketEvents;



var genderEvents = function(sURL) {
	// setup gender change

	$$("a.genderPick").each(function(el) {
		if (el.getNext() && el.getNext().get("text") == "(0)") {

			var safer = new Element("span").set("text", el.get("text")).setStyles({
				color: "#777"
			}).injectBefore(el)
			el.dispose();
			return;
		}

		el.addEvents({
			click: function(e) {
				new Event(e).stop();
				ajl.make($("main"));

				var newGender = this.get("text"), cookieVal = (newGender == "Women's") ? "female" : "male";

				var goToURL = window.location.href;
				goToURL = goToURL.replace(/Womens_/i, "");
				goToURL = goToURL.replace(/Mens_/i, "");
				goToURL = (cookieVal == "male") ? goToURL.replace(".co.uk/", ".co.uk/Mens_") : goToURL.replace(".co.uk/", ".co.uk/Womens_")


				window.location.href = goToURL;
			}
		});
	});

	if ($("uniselect"))
		$("uniselect").addEvents({
			click: function(e) {
				new Event(e).stop();
				if (this.hasClass("catChoiceOn"))
					return;

				this.addClass("catChoiceOn");
				ajl.make($("main"));

				var cookieVal = "unisex";
				Cookie.dispose("gender");
				Cookie.write("gender", cookieVal, {
					duration: 365,
					path: "/"
				});

				var goToURL = window.location.href;
				goToURL = goToURL.replace(/Womens_/i, "");
				goToURL = goToURL.replace(/Mens_/i, "");
				window.location.href = goToURL;
			}

		});

} // end genderEvents

var ShowCategories = function() {
	// display the categories and hide search...
	$("page_navigation").setStyle("display", "block");
	$("result_interpretation").setStyle("display", "none");
	$("SM").setStyle("display", 'none');
	$("SB").setStyle("display", 'none');
	$("PM").setStyle("display", 'block');
	if ($("top10sellers"))
		$("top10sellers").setStyle("display", "none");

} // end ShowCategories

var ShowPage = function() {
	// show the page results and hide the category
	$("page_navigation").setStyle("display", "none");
	$("result_interpretation").setStyle("display", "block");
	$("SM").setStyle("display", 'block');
	$("SB").setStyle("display", 'none');
	$("PM").setStyle("display", 'none');
	if ($("top10sellers"))
		$("top10sellers").setStyle("display", "block");

} // end ShowPage

var toggleModal = function(backgroundColour, options) {
	// modal view for the whole screen
	// ver 2.02 17/10/2008 03:42:06
	// returns the $("modal") div as element.
	if ($("modal")) {
		$("modal").destroy();
		return false;
	}

	var options = $merge({
		zIndex: 1000000,
		opacity: .8,
		events: $empty()
	}, options);

	if (!$type(backgroundColour) && !$("modal"))
		return false;

	return new Element("div", {
		id: "modal",
		styles: {
			position: "absolute",
			top: 0,
			left: 0,
			width: window.getScrollWidth(),
			height: window.getScrollHeight(),
			background: backgroundColour,
			"z-index": options.zIndex
		},
		opacity: options.opacity,
		events: options.events
	}).inject(document.body);
} // end toggleModal



var continueShopping = function(e) {
	// gets a page via ajax and redirects to it.
	if (e && e.stop)
		e.stop();

	new Request({
		url: "/index.php?a=continue",
		method: "get",
		onComplete: function() {
			window.location.href = unescape(this.response.text.replace("https", "http"));
		}
	}).send();
}; // end continueShopping


var myWhat = function(what, message, options) {
	var options = $merge({
		offsetY: 16,
		offsetX: 0,
		width: 260
	}, options);

	// open up a popup for text
	var coords  = what.getCoordinates();
	new Element("div", {
		"class": "what",
		id: "myWhat"
	}).setStyles({
		top: coords.top+options.offsetY,
		left: coords.left+options.offsetX,
		width: 260
	}).set("html", message).inject(document.body);

	what.addEvent("mouseleave", function() {
		//what.removeEvents();
		myDestroy("myWhat");
	});
} // end myWhat

var myImage = function(what) {
	// open up a popup for a larger image
	myDestroy("myImage");

	var coords  = what.getCoordinates();
	var popup   = new Element("div");
	popup.setStyles({
		"position": "absolute",
		"top": parseInt(coords["top"]+20)+"px",
		"left": parseInt(coords["left"]+184)+"px",
		"border": "1px solid #000",
		"background": "#ffffff",
		"display": "none",
		"z-index": 100000
	})
	.set("id", "myImage")
	.inject(document.body);

	var image = new Element("img");
	image.set("src", what.get("rel")).setStyle("border", 0).injectInside(popup);

	popup.setStyle("display", "block");

	// var mw = what.get("id");
	what.addEvent("mouseleave", function() {
		myDestroy("myImage");
	});
} // end myImage

var myDestroy = function(what) {
	// remove any image layers left out
	if ($(what)) {
		$(what).destroy();
	}
}

var myEventBubble = function(what, message) {
	// open up a pink bubble popup for text
	myDestroy("myBubble");


	var coords  = what.getCoordinates();
	var popup   = new Element("div");
	popup.setStyles({
		"position": "absolute",
		"top": parseInt(coords["top"]-56)+"px",
		"left": parseInt(coords["left"]-118)+"px",
		"display": "inline"
	})
	.addClass("bubble")
	.set("id", "myBubble")
	.set("html", message)
	.inject(document.body);

	what.addEvent("mouseleave", function() {
		myDestroy("myBubble");
	});
} // end myEventBubble

var simpleBubble = function(what, message, dobg) {
	// open up a pink bubble popup for text
	var $existing = $("myBubble");
	if ($existing)
		$existing.destroy();

	var coords  = what.getCoordinates();
	new Element("div", {
		id: "myBubble",
		"class": "bubble",
		html: message,
		styles: {
			"position": "absolute",
			"top": coords.top - 56,
			"left": coords.left- 118,
			"display": "inline",
			"zIndex": 100000000
		}
	}).inject(document.body);

	(function() {
		myDestroy("myBubble");
		if (dobg != false)
			what.setStyle('background', '#fff');
	}).delay(3000);

} // end simpleBubble

Element.implement({
	Watermark: function(options) {
		if (!options.esource)
			return;

		var coords = this.getCoordinates();

		var options = $merge({
			xoffset: coords.width,
			yoffset: 60,
			zIndex: 20000000,
			styles: {
				border: 0
			}
		}, options);

		var foo = options.esource.clone().cloneEvents(options.esource).set({
			styles: {
				position: "absolute",
				float: "left",
				"z-index": options.zIndex,
				marginLeft: coords.width - options.xoffset,
				marginTop: options.yoffset
			}
		}).setStyles(options.styles).inject(this.getParent(), "top");
	},
	getHTML: function() {
		return this.innerHTML;
	},
	modalBox: function(options) {
		var options = $merge({
			width: 400,
			height: 300,
			title: "",
			titleClass: "modalTitle",
			close: true,
			modal: true,
			shadow: true,
			scroll: false,
			modalColour: "#fff",
			text: "",
			textFunction: false,
			id: "modalBox",
			innerPadding: 10,
			movable: false,
			animate: true,
			zIndex: 20000001,
			callback: function() {

			},
			onClose: function() {

			},
			onBeforeClose: function() {

			}
		}, options);



		// make the box.
		var coords = this.getCoordinates();

		var whenDone = function() {
			if (options.scroll) {
				modalBody.setStyles({
					"overflow-y": "auto",
					"overflow-x": "hidden"
				});
			}

			if (options.shadow) {
				if (Browser.Engine.trident)
					modalBox.dropShadow();
				else
					modalBox.addClass("shadowy");

			}

			if (options.close) {
				new Asset.image("/img/modal_close2.png", {
					onload: function() {
						this.set({
							"class": "curImage right",
							styles: {
								opacity: 1,
								paddingTop: 3,
								paddingRight: 3,
								border: 0
							},
							title: "click to close",
							id: "modalClose",
							events: {
								click: function() {
									this.destroy();
									closeModalBox();
								}
							}
						}).inject(modalBox, "top");
					}
				});
				modalBody.addEvent("click:relay(.closeThis)", closeModalBox);
			} // end close

			var adjustedWidth = (options.close) ? 58 : 0;

			modalTitle.set({
				html: options.title,
				styles: {
					width: options.width - adjustedWidth,
					cursor: (options.movable) ? "move" : "default"
				}
			});

			modalBody.set({
				styles: {
					padding: options.innerPadding,
					clear: "both"
				},
				html: options.text
			});

			options.callback.call(this);

			// movable.
			if (options.movable) {
				new Drag.Move(modalBox, {
					handle: modalTitle,
					onStart: function() {
						if (options.shadow && Browser.Engine.trident) {
							var rel = modalBox.retrieve("shadow");
							if ($(rel))
								$(rel).destroy();
						}
					},
					onComplete: function() {
						if (options.shadow && Browser.Engine.trident) {
							modalBox.dropShadow();
						}
					}
				});
			}

		}; // end whenDone

		var modalPos = centerBox(options.width,options.height);

		if (!options.animate) {
			coords = {
				height: options.height,
				width: options.width,
				left: modalPos.left,
				top: modalPos.top
			};
		}

		var modalBox = new Element("div", {
			id: options.id,
			styles: {
				width: coords.width,
				height: coords.height, // + "px !important",
				left: coords.left,
				top: coords.top,
				position: "absolute",
				border: "1px solid #000",
				"z-index": options.zIndex
			},
			morph: {
				transition: Fx.Transitions.Sine.easeOut,
				duration: 300,
				link: "cancel",
				onComplete: whenDone
			}
		}).inject(document.body);


		var closeModalBox = function() {
			options.onBeforeClose.call(this);
			modalBox.get("morph").cancel();
			var modal = document.id("modal"), customId = document.id(options.id);
			if (options.modal && modal) {
				modal.smartDispose();
			}

			if (customId)
				customId.smartDispose();

			// tooltips cleanup
			document.getElements("div.what3, div.what2").smartDispose();

			options.onClose.call(this);
		};

		modalBox.store("close", closeModalBox);

		if (options.modal)
			var foo = toggleModal(options.modalColour);

		foo.addEvents({
			click: function() {
				closeModalBox();
			}
		});

		var modalTitle = new Element("div", {
			id: "modalTitle",
			"class": "left " + options.titleClass
		}).inject(modalBox, "top");

		var modalBody = new Element("div", {
			id: "modalBody",
			styles: {
				height: options.height - 49
			}
		}).inject(modalBox);

		this.store("body", modalBody);


		if (options.animate) {
			modalBox.morph({
				height: options.height,
				width: options.width,
				left: modalPos.left,
				top: modalPos.top
			});
		}
		else {
			whenDone();
		}


		return this;
	}, // end modalBox...
	smartDispose: function() {
		// dispose of an element and its dropShadow (if there is one)
		var rel = this.retrieve("shadow");
		if (rel) {
			rel.destroy();
		}

		if (this.parentNode)
			this.destroy();
	}, // end smartDispose
	dropShadow: function(options) {
		// creates a shadow effect to a rectangular element

		// define defaults
		var options = $merge({
			id: "dropShadow" + $random(100,1000),
			x: 3, // offset from parent
			y: 3,
			border: "1px solid #000",
			background: "#555",
			opacity: .5,
			zIndex: this.getStyle("z-index").toInt() - 1 // behind parent
		}, options);

		// only apply shadow on absolutely positioned elements
		if (this.getStyle("position") != "absolute")
			return this;

		var c = this.getCoordinates();

		this.store("shadow", new Element("div", {
			id: options.id
		}).setStyles({
			position: "absolute",
			left: c.left + options.x,
			top: c.top + options.y,
			width: c.width,
			height: c.height,
			background: options.background,
			zIndex: options.zIndex
		}).setStyle("opacity", 0).injectBefore(this).fade(0, options.opacity, {
			reclaim: false,
			remove: false
		}));

		return this;
	}, // end dropShadow
	simpleBox: function(message, options) {
		var options = $merge({
			offsetY: 16,
			offsetX: 0,
			width: 260,
			closeEvent: "mouseleave",
			background: "#fff"
		}, options);

		// open up a popup for text
		var coords  = this.getCoordinates();
		new Element("div", {
			"class": "what",
			id: "myWhat"
		}).setStyles({
			top: coords.top+options.offsetY,
			left: coords.left+options.offsetX,
			width: options.width,
			background: options.background,
			position: "absolute"
		}).set("html", message).inject(document.body);

		if (options.closeEvent != false)
			this.addEvent(options.closeEvent, function() {
				if ($("myWhat"))
					$("myWhat").dispose();
			});
	},
	tooltip: function(what, options) {
		// apple style tooltip
		var _this = this, coords = _this.getCoordinates(), options = $merge({
			eventEnd: "mouseleave",
			eventEndTrigger: _this,     // parent element or self
			topOffset: 90,              // offset when in full view
			leftOffset: 0,
			topStartOffset: 100,        // offset for animation start
			opacity: .8,                // target opacity in full view
			className: "tooltip",       // linked to css
			morphOptions: {
				duration: 300,
				transition: Fx.Transitions.Sine.easeOut
			},
			style: $empty(),
			delay: 0,                    // can dispose on a timer, in seconds
			id: "tt_" + $random(100, 1000),
			innerStyle: "padding:20px; line-height: 18px"
		}, options);

		if ($type(_this.tip) != "element") {
			this.tip = new Element("div", {
				"class": options.className,
				id: options.id
			});
		}

		options.style = $merge({
			left: coords.left + coords.width / 2 +options.leftOffset
		}, options.style);
		this.tip.setStyles(options.style).setStyle("opacity", 0).set("html", "<div style='"+ options.innerStyle + "'>"+what+"</div>").inject(document.body);

		this.store("morph", new Fx.Morph(this.tip, options.morphOptions).start({
			opacity: options.opacity,
			top: [coords.top - _this.tip.getSize().y - options.topStartOffset, coords.top - options.topOffset]
		}));

		var closeAnimation = {
			opacity: 0,
			top: coords.top - _this.tip.getSize().y - options.topStartOffset
		}

		this.tip.store("data-close",closeAnimation);
		if (options.delay === 0) {
			options.eventEndTrigger.addEvent(options.eventEnd, function(e) {
				this.retrieve("morph").stop();
				_this.tipaway(closeAnimation);
			});
		}
		else {
			(function() {
				if (this.tipaway)
					this.tipaway(closeAnimation);
			}).delay(options.delay, this);
		}
		return this;
	},
	tipaway: function(options) {
		if (this.tip) {
			this.retrieve("morph").start(this.tip.retrieve("data-close"));
		}

		return this;
	},
	disposeRelatives: function() {
		var rels = this.retrieve("relatives");
		if (!rels.length)
			return;

		rels.each(function(el) {
			el.dispose();
		});

		return this;
	},
	slowFocus: function(options) {
		// don't focus straight away so user can read error bubble
		el = this;
		options = $merge({
			delay: 3000
		}, options);
		(function() {
			el.focus();

		}).delay(options.delay);
		return el;
	},
	fieldError: function(error_title, body, options) {
		if ($("error"+this.get("id")))
			$("error"+this.get("id")).smartDispose();

		var options = $merge({
			left: 0,
			top: -12,
			position: "relative",
			marginLeft: 0,
			errorClass: "myinputFocusedError",
			doEvents: true
		}, options);

		var el = this;
		var error_message = new Element("div", {
			"id": "error"+this.get("id"),
			"class": "error_state_wrap"
		}).set("html", '<div class="error_state"><div class="large">' + error_title + '</div><div class="small">' + body + '</div></div>')
		.setStyles({
			left: options.left,
			"margin-top": options.top,
			"margin-left": options.marginLeft
		})
		.inject(this, "after");

		if (options.doEvents == false)
			return this;

		this.addClass(options.errorClass);
		(function() {
			error_message.smartDispose();
		}).delay(4000, this);
		return this;
	},
	getSize2: function() {
		// based on mootools 1.11 getSize, gets the subcontainer size and scroll data
		return {
			'scroll': {
				'x': this.scrollLeft,
				'y': this.scrollTop
				},
			'size': {
				'x': this.offsetWidth,
				'y': this.offsetHeight
				},
			'scrollSize': {
				'x': this.scrollWidth,
				'y': this.scrollHeight
				}
		};
	},
	facetip: function(message, options) {
		// a quick 'facebook' style tooltip
		// function version 2.2, 21/06/2009 20:04:16

		if (!$type(message))
			return false;

		if ($type(this.retrieve("tipbody"))== "element")
			this.retrieve("tipbody").destroy();

		var options = $merge({
			eventStart: "mouseenter",
			eventEnd: "mouseleave",
			topOffset: 20,
			opacity: 1,
			zIndex: 10000000
		}, options);

		var coords = this.getCoordinates();

		this.store("tipbody", new Element("div", {
			styles: {
				background: "transparent url(/images/point_down.gif) no-repeat center bottom",
				float: "left",
				position: "absolute",
				left: 0,
				top: -100,
				opacity: options.opacity,
				height: 20,
				zIndex: options.zIndex
			}
		}).adopt(new Element("div", {
			styles: {
				background: "#4c4c4c",
				color: "#ffffe5",
				padding: 0,
				"padding-top": 2,
				"line-height": 10,
				margin: 0,
				"padding-left": 9,
				"padding-right": 9,
				display: "block",
				"margin-left": "auto",
				"margin-right": "auto",
				overflow: "hidden",
				"font-size": "10px",
				"font-family": "verdana",
				float: "left",
				height: 13
			},
			html: message.replace(/ /g, "&nbsp;")
		})).inject(document.body));

		this.addEvent(options.eventEnd, function() {
			if ($type(this.retrieve("tipbody")) == "element") {
				this.retrieve("tipbody").destroy();
				this.removeEvent(options.eventEnd);
			}
		}.bind(this));

		// var tipWidth = tipbody.getCoordinates();
		var t = this.retrieve("tipbody").getSize();

		this.retrieve("tipbody").setStyles({
			left: coords.left + (coords.width / 2).round() - (t.x / 2).round(),
			top: coords.top - options.topOffset,
			width: t.x
		});

		return this;
	}
}); // element

var IEactivateFlash = function() {
	$$("embed").each(function(el) {
		el.outerHTML = el.outerHTML;
	});
} // activate all embed controls.


var centerBox = function(width, height) {
	// returns coordinates for positioning
	var winSize = window.getSize(), winScroll = window.getScroll(), winSize = window.getSize(), windowHeight = window.getScrollHeight()-1, coords = {
		top: winScroll.y + (winSize.y / 2) - (height / 2),
		left: winSize.x / 2 - width / 2,
		width: width,
		height: height
	}

	if (coords.top + height + 20 > windowHeight)
		coords.top = windowHeight - 20 - height;

	if (coords.top <= 0) {
		coords.top = 20;
	}

	return coords;
};


Number.implement({
	money: function(currency) {
		var n = this, c = isNaN(c = Math.abs(c)) ? 2 : c, d = d == undefined ? "." : d, t = t == undefined ? "." : t, s = n < 0 ? "-" : "", i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", j = (j = i.length) > 3 ? j % 3 : 0;
		return (currency || "") + s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
	}
});// end number extend

var validEmailRegex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, isValid = function(email) {
	return email.test(validEmailRegex);
};

var C = {
	// console wrapper
	debug: true, // global debug on|off
	quietDismiss: !false, // may want to just drop, or alert instead
	log: function() {
		if (!C.debug) return false;


		if (typeof console == 'object' && typeof console.log != "undefined")
			try {
				console.log.apply(this, arguments); // safari's console.log can't accept scope...
			} catch(e) {
				// so we loop instead.
				for (var i = 0, l = arguments.length; i < l; i++)
					console.log(arguments[i]);
			}
		else
		if (!C.quietDismiss) {
			var result = "";
			for (var i = 0, l = arguments.length; i < l; i++)
				result += arguments[i] + " ("+typeof arguments[i]+") ";

			alert(result);
		}
	}
}; // end console wrapper.


// currency change
var currencySwap = {
	changed: false,
	isOpen: false,
	initialize: function() {
		this.changer = $("currencySwapper");
		if (!this.changer)
			return;

		this.source = $("ASDASD");
		if (!this.source)
			return;

		this.content = this.source.innerHTML;
		var _this = this;
		this.changer.addEvents({
			click: function(e) {
				e.preventDefault();

				if (_this.isOpen)
					return false;

				_this.openSwapper(this);
			}
		}); // events
	},
	openSwapper: function(el) {
		this.isOpen = true;
		var _this = this;

		el.modalBox({
			width: 800,
			height: 170,
			title: "Set your currency and delivery preferences",
			titleClass: "modalTitle",
			close: true,
			modal: true,
			shadow: true,
			scroll: false,
			modalColour: "#fff",
			text: "",
			textFunction: false,
			id: "modalBox",
			innerPadding: 10,
			movable: !false,
			callback: function() {
				// load content
				$("modalBody").set("html", _this.content).setStyles({
					textAlign: "center"
				});

				$("ASDASD").empty();

				$("currencyNotice").addEvents({
					mouseenter: function() {
						this.tooltip($("currencyTip").innerHTML, {
							className: "what2 shadowy",
							topOffset: -16,
							topStartOffset: -250,
							opacity: 1,
							style: {
								zIndex: 100000000,
								background: "#ffffcf"
							},
							innerStyle: "padding: 5px;line-height: 1.3"
						});
					},
					click: function(e) {
						e.preventDefault();
					}
				});

				_this.addEvents();
			},
			onClose: function() {
				_this.isOpen = false;
				if (_this.changed === true) {
					if ($("main"))
						ajl.make($("main"));
					else
						toggleModal("#fff");
					window.location.href = window.location.href;
				}
			}
		});
	},
	addEvents: function() {
		// currency change...
		var _this = this;
		$("priceSwap").addEvents({
			change: function() {
				var target = this.get("value");
				Cookie.dispose("currency");
				Cookie.write("currency", target, {
					duration: 7,
					path: "/"
				});
				_this.changed = true;
			}
		}); // end priceSwap change

		// target country change
		$("deliveryCountry").addEvents({
			change: function() {
				var newId = this.get("value");
				if (newId == 0) {
					Cookie.dispose("deliveryCountry");
					return false;
				}

				Cookie.dispose("deliveryCountry");
				Cookie.write("deliveryCountry", newId, {
					duration: 7,
					path: "/"
				});
				_this.changed = true;
			}
		});
	}
}; // end currency changer namespace



// ajax loader class
ajl = new AjaxLoader();


var toggleInputs = function(classOff, classOn, options) {

	var options = $merge({
		off: "#f60",
		on: "#070",
		over: "#fa6"
	}, options);

	$$("input."+classOff, "select."+classOff).addEvents({
		focus: function() {
			this.removeClass("myinputFocusedError").removeClass("myinputShortFocusedError").addClass(classOn).store("focused", true);
			document.getElement("label[for="+this.id+"]").setStyle("color", options.on);
			if (this.tip) {
				try {
					tipper.tipaway(this);
				}
				catch(e) {

				}
			}
		},
		blur: function() {
			this.removeClass(classOn).store("focused", false);
			document.getElement("label[for="+this.id+"]").setStyle("color", options.off);
		},
		mouseenter: function() {
			if (this.retrieve("focused") === false) {
				this.addClass(classOn);
				document.getElement("label[for="+this.id+"]").setStyle("color", options.over);
			}
		},
		mouseleave: function() {
			if (this.retrieve("focused") === false) {
				this.removeClass(classOn);
				document.getElement("label[for="+this.id+"]").setStyle("color", options.off);
			}
		}
	}).store("focused", false);
};

function toggleEl(el) {
	// for dodgy IE crap with block/none collapse
	if (!Browser.Engine.trident) {
		if (el.retrieve("hidden")) {
			el.store("hidden", false).setStyle("display", "block");
		}
		else {
			el.store("hidden", true).setStyle("display", "none");
		}
		return;
	}

	if (el.retrieve("hidden")) {
		el.setStyles({
			"visibility":  "visible",
			height: el.retrieve("height")
			});
		el.store("hidden", false);
	}
	else {
		el.store("height", el.getStyle("height"));
		el.store("hidden", true);
		el.setStyles({
			"visibility":  "hidden",
			height: 0
		});
	}
}

/*
---

name: mooSelecta

description: mooSelecta, select element styling replacement

authors: Dimitar Christoff, Andre Fiedler

license: MIT-style license.

version: 1.3a

requires:
  - Core/String
  - Core/Event
  - Core/Browser
  - Core/Element
  - Core/Element.Dimensions

provides: mooSelecta

...
*/

var mooSelecta = new Class({

	version: "1.3.0a",

	updated: "28/03/2011 11:20:01",

	Implements: [Options,Events],

	// default options
	// don't change these here but on the instance (unless you want to)
	options: {
		parentNode: document,
		selector: "selecta",                     // class / selector for selects to convert
		positionRelativeSelector: null,                 // class / selector for a positioned parent element
		triggerClass: "selectaTrigger",                 // class of the replacement div
		triggerPadding: 30+5,                           // compensate for left/right padding of text
		triggerBeforeImage: "",                         // advanced styling of trigger like a round image
		triggerBeforeImageWidth: 0,                     // need to compensate width
		triggerBeforeImageHeight: 0,                    // and know height.
		wrapperClass: "selectaWrapper",                 // popup wrapper class
		wrapperWidthAdjustment: 0,                      // you can add or substract to width if not matching, use +/- value
		wrapperShadow: "shadowy",                       // extra class applied to wrapper, like one with box-shadow
		wrapperHeight: 0,                               // maximum allowed height for dropdown before it scrolls
		optionClass: "selectaOption",                   // base class of indivdual options
		optionClassSelected: "selectaOptionSelected",   // pre-selected value class
		optionDisabledClass: "selectaDisabled",         // if option disabled=disabled
		optionClassOver: "selectaOptionOver",           // onmouseover option class
		allowTextSelect: false,                         // experimental to stop accdiental text selection
		// these are keycodes that correspond to alpha numerics on most ISO keyboards for index lookups of options
		allowedKeyboardCodes: [48,49,50,51,52,53,54,55,56,57,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90],
		useClickListener: true                          // binds click events to check for clicks away from dropdown.
	},

	// internal hashed collection of managed selects
	selects: {},

	// hash that references options per select for keycode lookups
	optionList: {},

	// store all options to be able to swap programatically
	optionsElements: [],

	// false or contains a pointer to the last select that has opened the menu
	focused: false,

	initialize: function(options) {
		// start everything.
		this.setOptions(options);

		// locate and apply selects to all required ones.
		var selects = this.options.parentNode.getElements("select." + this.options.selector);

		if (!selects.length) {
			return false; // "nothing to do, selector came up empty!";
		}

		selects.each(this.replaceSelect.bind(this));

		// bind mouseclicks and keytyping
		this.bindListeners();
	},

	replaceSelect: function(el) {

		return true;

		// public method that replaces selects
		el = document.id(el); // adds uid

		if (!el) {
			return;
		}

		// gets existing element's width to use
		var width = el.getSize().x;

		// default selected to go into wrapper
		var selectedOption = el.getElements("option").filter(function(op) {
			return op.getProperty("selected");
		});

		// clean up old instances.
		if (el.retrieve("triggerElement")) {
			el.retrieve("triggerElement").destroy();
		}

		if (el.retrieve("wrapper")) {
			el.retrieve("wrapper").destroy();
		}

		// build the top visible element
		el.store("triggerElement", new Element("div", {
			"class": this.options.triggerClass,
			styles: {
				width: width - this.options.triggerPadding
			}
		}).inject(el, "after").addClass("cur")); // cur is a class that changes cursor to a clicky one.

		// re-adjust width after the trigger has been done so wrapper can match it.
		width = Math.max(el.retrieve("triggerElement").getSize().x - 2 - this.options.triggerBeforeImageWidth + this.options.wrapperWidthAdjustment, 0);

		// build the menu wrapper

		// if we have an image to pre-pend, add it.
		if (this.options.triggerBeforeImage.length) {
			new Element("div", {
				styles: {
					"float": "left",
					position: (Browser.ie6) ? "absolute" : "relative",
					background: "url("+this.options.triggerBeforeImage+") no-repeat",
					width: this.options.triggerBeforeImageWidth,
					height: this.options.triggerBeforeImageHeight
				}
			}).inject(el.retrieve("triggerElement"), "before");
		}

		// create the options wrapper
		var pos = el.getPosition((!!this.options.positionRelativeSelector ? el.getParent(this.options.positionRelativeSelector) : null));

		el.store("wrapper", new Element("div", {
			"class": this.options.wrapperClass,
			styles: {
				width: width,
				zIndex: 10000,
				marginLeft: this.options.triggerBeforeImageWidth
			}
		}).inject(el.retrieve("triggerElement"), "after").addClass(this.options.wrapperShadow));

		// now hide the original selects off-screen
		// this is so the tab indexing and by-label focus works and hands us back contol.
		el.set({
			styles: {
				position: "absolute",
				top: "-1000px",
				left: "-1000px"
			},
			events: {
				focus: function() {
					if (this.focused) {
						this._hideOptions();
					}

					this.focused = el;
					this._toggleOptions(el);

				}.bind(this),
				blur: function(e) {
					if (this.focused == el) {
						this._toggleOptions(el);
					}
				}.bind(this)
			}
		});

		// handle labels so they don't interfere by launching a semi-full event.
		var lbl = document.getElement("label[for="+el.get("id")+"]");
		if (el.get("id") && lbl) {
			lbl.addEvent("click", function(e) {
				e.stop();
				el.fireEvent("focus");
			});
		}


		// get all options and port them to wrapper
		el.getElements('option').each(function(option) {
			var selected = false;
			if (option.get("selected")) {
				el.retrieve("triggerElement").set("html", option.get("text"));
				selected = true;
			}
			this._addOption(option, el, selected);
		}, this);

		// figure out height of wrapper and reduce if needed
		if (this.options.wrapperHeight) { // if greater than 0 care about this
			var height = el.retrieve("wrapper").getSize().y;
			if (height > this.options.wrapperHeight) {
				el.retrieve("wrapper").setStyles({
					height: this.options.wrapperHeight
				});
			}
		}

		// hide the menu by default.
		el.retrieve("wrapper").setStyle("display", "none");

		// attach a click event to trigger element
		el.retrieve("triggerElement").addEvents({
			click: function(e) {
				new Event(e).stop();
				// toggler, click on opened closes it.
				el.fireEvent((this.focused == el) ? "blur" : "focus");
			}.bind(this)
		});

		// export the managed select to the hash
		if (el.uid && el) {
			this.selects[el.uid] = el;
		}

	}, // end .replaceSelect();

	bindListeners: function() {
		// setup valrious click / key events

		if (this.options.useClickListener) {
			document.addEvent("click", this._bindClickListener.bind(this));
		}

		document.addEvents({
			// keyboard listener
			keydown: function(e) {
				e = new Event(e);

				var ops, old, done;

				// if no menu is currently open, don't do anything.
				if (!this.focused) {
					return;
				}

				switch(e.code) {
					case 40: // down arrow option navigation
						new Event(e).stop();
						// ops should really be cached outside here
						ops = this.focused.retrieve("wrapper").getElements("div."+this.options.optionClass);
						done = false;

						ops.each(function(el, i) {
							if (ops.length-1 == i || done) {
								return;
							}

							if (el.hasClass(this.options.optionClassSelected)) {
								ops.removeClass(this.options.optionClassOver);
								ops[i+1].addClass(this.options.optionClassSelected).addClass(this.options.optionClassOver);
								el.removeClass(this.options.optionClassSelected);
								done = true;
							}
						}, this);


						break;
					case 38: // up arrow option navigation
						new Event(e).stop();
						ops = this.focused.retrieve("wrapper").getElements("div."+this.options.optionClass);
						done = false;

						ops.each(function(el, i) {
							if (done) {
								return;
							}

							if (el.hasClass(this.options.optionClassSelected)) {
								if (i > 0) {
									ops.removeClass(this.options.optionClassOver);
									ops[i-1].addClass(this.options.optionClassSelected).addClass(this.options.optionClassOver);
									el.removeClass(this.options.optionClassSelected);
								}
								done = true;
							}
						}, this);


						break;
					case 13: // enter
						new Event(e).stop();
						this.focused.retrieve("wrapper").getElements("div."+this.options.optionClassSelected).fireEvent("click");
						break;
					case 9: // tabbed out, blur auto...
						this._hideOptions(this.focused);
						break;
					case 34:
					case 35:
						// go to last option via pgdn or end
						new Event(e).stop();
						old = this.focused;
						this.focused.retrieve("wrapper").getElements("div."+this.options.optionClass).getLast().fireEvent("click");
						old.fireEvent("focus");

						break;
					case 33:
					case 36:
						// go to first option via pgup or home
						new Event(e).stop();
						old = this.focused;
						this.focused.retrieve("wrapper").getElement("div."+this.options.optionClass).fireEvent("click");
						old.fireEvent("focus");

						break;
					default:
						// the "other" keys.
						old = this.focused;
						ops = this.focused.retrieve("wrapper").getElements("div."+this.options.optionClass);

						// is is alpha numeric allowed?
						if (this.options.allowedKeyboardCodes.contains(e.code)) {
							// loop through current option texts array cache for matches
							var matchingKeys = [];
							var selected = false;

							var applicable = this.optionList["k"+this.focused.uid].filter(function(el, index) {
								if (ops[index].hasClass(this.options.optionClassSelected)) {
									selected = index;
								}
								var match = el.indexOf(e.key) === 0;
								if (match) {
									matchingKeys.push(index);
								}
								return match;
							}, this);

							if (applicable.length) {
								if (!matchingKeys.contains(selected)) {
									selected = matchingKeys[0];
								}
								else {
									if (ops[selected+1] && matchingKeys.contains(selected+1)) {
										selected++;
									}
									else {
										selected = matchingKeys[0];
									}

								}

								ops[selected].fireEvent("click");
								old.fireEvent("focus");
								done = true;
							}
						}
						else {
							// do nothing or disable comment to see other keys you may like to bind.
							// console.log(e.code, e.key);
							e.stop(); // no keyboard events should work outside of allowed ones
						}
						break;
				}
			}.bind(this)
		});
	}, // end .bindListeners()

	_bindClickListener: function(e) {
		// listens for client clicks away from triggers and closes like real selects do when user loses interest
		e = new Event(e);

		// using a collection which saves a click on an element that's not extended with .hasClass
		if ($$(e.target).hasClass(this.options.triggerClass).contains(false)) {
			this._hideOptions();
		}
	},

	_addOption: function(option, el, selected) {
		// internal method called by replaceSelect that adds each option as a div within the wrapper
		var text = option.get("text").trim();
		if (!text.length) {
			text = "&nbsp;";
		}

		// store options relevant to element uid.
		var oldList = this.optionList["k" + el.uid] || [];
		oldList.push(text.toLowerCase());
		var tempObj = {};
		tempObj["k" + el.uid] = oldList;

		$merge(this.optionList, tempObj);
		// end store

		var opDiv = new Element("div", {
			"class": this.options.optionClass,
			html: text,
			events: {
				mouseenter: function() {
					opDiv.addClass(this.options.optionClassOver);
				}.bind(this),
				mouseleave: function() {
					opDiv.removeClass(this.options.optionClassOver);
				}.bind(this),
				click: function(e) {
					if (e && e.type && e.stop) {
						e.stop();
					}

					if (opDiv.hasClass(this.options.optionDisabledClass)) {
						return false; // do nothing!
					}

					// menu stuff visual
					el.retrieve("wrapper").getChildren().removeClass(this.options.optionClassSelected);
					opDiv.addClass(this.options.optionClassSelected);
					el.retrieve("triggerElement").set("html", opDiv.get("text"));

					// now handle change in the real select
					el.set("value", opDiv.retrieve("value")).fireEvent("change", e);
					this._toggleOptions(el);
				}.bind(this)
			}
		}).store("value", option.get("value")).inject(el.retrieve("wrapper")).addClass("cur");

		if (!this.optionsElements[el.uid]) {
			this.optionsElements[el.uid] = [];
		}
		this.optionsElements[el.uid].push(opDiv);

		if (option.get("disabled")) {
			opDiv.addClass(this.options.optionDisabledClass);
		}

		if (selected) {
			opDiv.addClass(this.options.optionClassSelected);
		}

	},

	_toggleOptions: function(el) {
		// toggles visibility on click
		var vis = el.retrieve("wrapper").getStyle("display");
		el.retrieve("wrapper").setStyle("display", (vis == "none") ? "block" : "none").getChildren().removeClass(this.options.optionClassOver);
		this.focused = (vis != "none") ? false : el;

		// scroll to selected from .toElement in core but w/o a fx.slide instance
		var parent = el.retrieve("wrapper").getPosition(this.options.overflown);
		var target = el.retrieve("wrapper").getElement("div." + this.options.optionClassSelected).getPosition(this.options.overflown);
		el.retrieve("wrapper").scrollTo(target.x - parent.x, target.y - parent.y);
		this._clearSelection();
	},

	_hideOptions: function() {
		// private called on cleanup / away click
		Object.values().each(function(el, key) {
			if (!el.retrieve("wrapper"))
				return;

			if (el.retrieve("wrapper").getStyle("display") != "none") {
				el.fireEvent("blur");
			}
			el.retrieve("wrapper").setStyle("display", "none");
			el.focused = false;
		});
	},

	_clearSelection: function() {
		// removes document selection
		if (this.options.allowTextSelect || Browser.ie6) { // not sure how IE6 does this
			return;
		}

		if (!!document.selection && !!document.selection.empty) {
			try {
				document.selection.empty();
			} catch(e) {} // IE8 throws exception on hidden selections
		} else if (!!window.getSelection) {
			window.getSelection().removeAllRanges();
		}
	},

	select: function(sel, value) {
		this.optionsElements[sel.uid].some(function(el) {
			if (el.retrieve("value") == value) {
				el.fireEvent("click");
				return true;
			}
			return false;
		});

		this._toggleOptions(sel);
	}
}); // endClass


var navMenu = new Class({
	Implements: [Options, Events],
	options: {
		columnsCount: 3
	},
	initialize: function(el, options) {

		this.element = document.id(el);
		if (!this.element)
			return;

		this.setOptions(options);
		// can override order of preference.
		this.methods = ['sessionStorage', 'localStorage'];

		// feature detect what storage to use.
		Browser.Features.storage = this.methods.some(function(el) {
			return ($type(window[el]) == 'object') ? Browser.Features.storageMethod = el : false;
		});

		this.storage = window[Browser.Features.storageMethod] || {
			setItem: $empty,
			getItem: $empty,
			clear: $empty
		};


		this.responses = Browser.Features.storage ? JSON.decode(window[Browser.Features.storageMethod].getItem("MENUITEMS")) : {};

		if (this.responses && this.responses.cats && this.responses.brands) {
			this.buildMenus();
		}
		else {
			this.loadMenus();
		}
	},
	columnsCounts: function(array, columns) {
		var columnsCounts = [],
		columnIndex = 0,
		arrayLength = array.length;

		while(columns > 0) {
			arrayLength -= columnsCounts[columnIndex] = Math.ceil(arrayLength / columns);
			columnIndex++;
			columns--;
		}

		return columnsCounts;
	},
	buildMenus: function() {
		// called to create the menu when the responses are stored.
		if (this.element.getChildren().length) {
			this.adoptMenus();
			return;
		}
		this.browseCats = new Element("a", {
			id: "browseCategories",
			"class": "primNav",
			href: "#"
		}).inject(this.element);

		this.foldOut1 = new Element("div", {
			"class": "shadowy foldOut"
		});

		this.browseCats.adopt(this.foldOut1).store("fold", this.foldOut1);

		this.responses.cats.each(function(el) {
			new Element("div", {
				"class": "itm blueLi",
				html: "<a href='"+el.url+"'>"+el.p_name+"</a>" // ("+el.prods+")"
			}).inject(this.foldOut1);
		}, this);


		this.browseBrands = new Element("a", {
			id: "browseBrands",
			"class": "primNav",
			href: "#"
		}).inject(this.element, "top");

		this.foldOut2 = this.foldOut1.clone().empty();
		this.browseBrands.adopt(this.foldOut2).store("fold", this.foldOut2);

		// work out brands counts.
		var brandLinks = this.responses.brands
		var columns = [], done = 0, columnindex = 0;
		var columnsCounts = this.columnsCounts(brandLinks, this.options.columnsCount);

		while(this.options.columnsCount--) {
			columns.push(new Element("div", {
				"class": "left"
			}).inject(this.foldOut2));
		}


		this.responses.brands.each(function(el) {
			done++;
			new Element("div", {
				"class": "itm orangeLi",
				html: "<a href='"+el.url+"'>"+el.p_name+"</a>" // ("+el.prods+")"
			}).inject(columns[columnindex]);

			if (done >= columnsCounts[columnindex]) {
				done = 0;
				columnindex++;
			}
		});

		this.attachEvents();
	},
	adoptMenus: function() {
		// when its in dom already.

		var menus = this.element.getElements("a.primNav");
		this.browseBrands = menus[0];
		this.foldOut2 = this.browseBrands.getNext();
		this.browseBrands.store("fold", this.foldOut2).adopt(this.foldOut2);

		this.browseCats = menus[1];
		this.foldOut1 = this.browseCats.getNext();
		this.browseCats.store("fold", this.foldOut1).adopt(this.foldOut1);



		var brandLinks = this.foldOut2.getChildren();
		brandLinks.dispose();

		// work out brands counts.
		var columns = [], done = 0, columnindex = 0;
		var columnsCounts = this.columnsCounts(brandLinks, this.options.columnsCount);

		while(this.options.columnsCount--) {
			columns.push(new Element("div", {
				"class": "left"
			}).inject(this.foldOut2));
		}

		brandLinks.each(function(el) {
			done++;
			el.inject(columns[columnindex]);

			if (done >= columnsCounts[columnindex]) {
				done = 0;
				columnindex++;
			}
		});

		this.attachEvents();

	},
	attachEvents: function() {
		this.element.getElements("a.primNav").addEvents({
			click: function(e) {
				e.preventDefault();
			},
			mouseenter: function() {
				this.retrieve("fold").setStyle("display", "block");
			},
			mouseleave: function() {
				this.retrieve("fold").setStyle("display", "none");
			}
		});

		this.element.getElements("div.itm").addEvents({
			mouseenter: function() {
				this.addClass("on");
			},
			mouseleave: function() {
				this.removeClass("on");
			},
			click: function(e) {
				window.location.href = this.getFirst().get("href");
			}
		});
	},
	loadMenus: function() {
		try {
			this.storage.clear();
		}
		catch (e) {
			this.storage = {
				setItem: $empty,
				getItem: $empty,
				clear: $empty
			}
		}

		var _this = this;
		new Request({
			url: "/accountAjax.php",
			method: "get",
			onComplete: function(response) {
				// C.log("storage status: ", _this.storage.setItem);
				try {
					_this.storage.setItem("MENUITEMS", this.response.text);
				}
				catch(e) {

				}

				_this.responses = JSON.decode(response);
				_this.buildMenus();
				_this.fireEvent("dataIn");
			}
		}).send("a=buildMenu");
	}
});


var cowsOnHeat=new Class({
	Implements:[Options,Events],
	Binds:['handleClick'],
	clicks:[],
	options:{
		listenOn:document,
		eventType:"click",
		autoAttach:true,
		relativeOffset:{
			x:0,
			y:0
		},
		tagMap:{
			div:"red",
			a:"orange",
			img:"blue",
			p:"yellow",
			span:"yellow",
			body:"#888",
			code:"cyan",
			input:"green",
			embed:"purple"
		}
	},
initialize:function(identifier,options){
	if(!identifier)
		throw"Need a unique page id";
	this.id=identifier;
	this.setOptions(options);
	this.listener=$(this.options.listenOn);
	this.doSave=true;
	if(!this.listener||!this.autoAttach)
		return;
	this.addListener();
},
addListener:function(){
	this.listener.addEvent(this.options.eventType,this.handleClick.bind(this));
	window.addEvent((Browser.Engine.presto)?"unload":"beforeunload",this.storeClicks.bind(this));
	return this;
},
removeListener:function(){
	this.listener.removeEvent(this.options.eventType,this.handleClick);
},
handleClick:function(e){
	var click={};

	var scroll=window.getScroll();
	click.x=e.client.x-this.listener.getPosition().x+scroll.x;
	click.y=e.client.y-this.listener.getPosition().y+scroll.y;
	var foo=$(e.target).get("tag");
	click.element=foo!="body"?foo:"body";
	if(e.target.get("href"))
		click.href=e.target.get("href");
	var id=e.target.get("id");
	if(id)
		click.id=id
	else
		click.id=e.target.get("className");
	this.clicks.push(click);
	this.fireEvent("eventDone",click);
},
storeClicks:function(){
	if(!this.clicks.length||!this.doSave)return;
	new Request({
		url:"/accountAjax.php",
		method:"POST",
		async:false
	}).send("a=storeClicks&id="+this.id+"&clicks="+JSON.encode(this.clicks));
}
});

var stacker = new Class({
	Implements: [Options],

	options: {
		delay: 4000
	},

	timer: null,

	initialize: function(element, options) {
		this.setOptions(options);

		this.element = document.id(element);
		if (!this.element)
			return;

		this.stacks = this.element.getElements("div");

		if (!this.stacks.length)
			return;

		this.current = (Browser.Features.storage) ? window.sessionStorage.getItem("currentStacker") || 0 : 0;

		this.addStacks();
	},

	addStacks: function() {
		this.stacks.each(function(el) {
			el.setStyle("opacity", 0).removeClass("hide");
			el.addEvents({
				mouseenter: this.stopCycling.bind(this),
				mouseleave: this.cycleStacks.bind(this)
			});
		}, this);
		this.stacks[this.current].fade(1);

		this.cycleStacks();
	},

	cycleStacks: function() {
		$clear(this.timer);
		this.timer = (function() {
			this.stacks[this.current].fade(0);
			this.current++;

			if (!this.stacks[this.current])
				this.current = 0;

			this.stacks[this.current].fade(1);
			if (Browser.Features.storage) {
				try {
					window.sessionStorage.setItem("currentStacker", this.current);
				}
				catch(e) {

				}
			}
		}).periodical(this.options.delay, this);
	},

	stopCycling: function() {
		$clear(this.timer);
	}

});



/////////////////////////////////////////////////////////////////////////////////////////////
// execute on domready


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

	// support for placeholder= property for older browsers
	new mooPlaceholder().attachToElements();

	new navMenu(document.id("menuHolder"));

	new stacker("freeDelivery");

	var gender = Cookie.read("gender");
	if (gender != "male" && gender != "female") {
		var myStyleBorder = {
			border: "1px solid #ddd"
		};

		// 20/06/2010 22:08:32 refactored for absolute pos.
		new Asset.image(icons[0], {
			title: "Suitable for men",
			onload: function() {
				this.set({
					"class": "curImage",
					opacity: .7,
					events: {
						mouseenter: function() {
							this.setStyle("opacity", 1);
						},
						mouseleave: function() {
							this.setStyle("opacity", .7);
						}
					}
				});

				document.getElements("img.male").Watermark({
					xoffset: 20,
					yoffset: 3,
					esource: this,
					styles: {
						border: "1px solid #ddd",
						width: this.width,
						height: this.height
					}
				});

			}
		});

		new Asset.image(icons[1], {
			title: "Suitable for women",
			onload: function() {
				this.set({
					"class": "curImage",
					opacity: .7,
					events: {
						mouseenter: function() {
							this.setStyle("opacity", 1);
						},
						mouseleave: function() {
							this.setStyle("opacity", .7);
						}
					}
				});

				document.getElements("img.female").Watermark({
					xoffset: 20,
					yoffset: 3,
					esource: this,
					styles: {
						border: "1px solid #ddd",
						width: this.width,
						height: this.height
					}
				});

			}
		});
	// end refactored
	}

	var SI = document.getElements("img.sale");
	if (SI.length > 0) {
		new Asset.image("/img/icons/sale2.gif", {
			title: "Item is on sale",
			onload: function() {
				SI.Watermark({
					yoffset: 1,
					esource: this,
					styles: {
						width: this.width,
						height: this.height
					}
				});

			}
		});
	}

	if (Browser.Engine.trident) {
		(function() {
			menuEvents();
		}).delay(1000);
	}
	else {
		menuEvents();
	}

	// sidemenu expand
	var $mytime;

	$$("div.catExpand").each(function(el) {
		var myId = el.get("rel");
		el.addEvents({
			mouseenter: function() {
				$mytime = (function() {
					this.addClass("catDown").removeEvents();

					$$("div.catHide[rel="+myId+"]").each(function(sub) {
						sub.setStyles({
							"display": "block"
						}).setStyle("opacity", 0).fade(0,1, {
							remove: false,
							reclaim: false
						});
					});
				}).delay(500, this);

			},
			mouseleave: function() {
				$clear($mytime);
			}
		});

	});

	if ($("allsubs"))
		$("allsubs").addEvents({
			click: function(e) {
				this.getFirst().addClass("catChoiceOn");
				ajl.make($("main"));
			}
		});

	if ($("allbrands"))
		$("allbrands").addEvents({
			click: function() {
				this.getFirst().addClass("catChoiceOn");
				ajl.make($("main"));
			}
		});

	(function() {
		// sizes
		var hybrids = document.getElements("div.hybrid");
		var sizeHeading = document.id("sizeHeading");
		var bc = document.getElement("div.trail_nav");

		var navSizes = document.getElements("div.navSize");
		var cookieSize = Cookie.read("thumbSize");


		navSizes.each(function(el) {
			var size = el.get("text");

			el.addEvents({
				click: function() {
					// ajl.make($("main"));
					document.getElements("div.navSizeOn").removeClass("navSizeOn");

					this.addClass("navSizeOn").fade(0,1, {
						remove:0,
						reclaim:0
					});

					var currentSize = this.get("text").clean();
					hybrids.removeClass("hide");

					hybrids.filter(function(el) {
						var sis = el.get("data-sis");
						if (!sis)
							return true;
						var sisArray = sis.split(",");
						return !sisArray.contains(currentSize);
					}).addClass("hide");
					sizeHeading.removeClass("catChoiceOn");

					// breadcrumb
					if (bc) {
						bc.getElements("span.sizeFilter").destroy();

						var sizeFilter = new Element("span", {
							"class": "sizeFilter",
							html: " > <a href='#' title=''><img src='/img/close-filter.gif'></a> size '" + currentSize + "'"
						}).inject(bc);

						sizeFilter.getElement("a").addEvents({
							click: function(e) {
								e.stop();
								sizeHeading.getParent().fireEvent("click", e);
							}
						});

					}


					Cookie.write("thumbSize", currentSize, {
						path: "/"
					});
				},
				mouseenter: function() {
					this.addClass("navSizeOver");
				},
				mouseleave: function() {
					this.removeClass("navSizeOver");
				}
			}).addClass("cur"); //.set("html", size);
		});

		if (sizeHeading) {
			sizeHeading.getParent().addEvents({
				click: function(e) {
					e.stop();
					hybrids.removeClass("hide");
					$$("div.navSizeOn").removeClass("navSizeOn");
					sizeHeading.addClass("catChoiceOn");
					if (bc)
						bc.getElements("span.sizeFilter").destroy();
					Cookie.dispose("thumbSize", {
						path: "/"
					});

				}
			});
		}

		if (cookieSize) {
			var isSizeAvailable = navSizes.filter(function(el) {
				return el.get("text").clean() == cookieSize;
			});

			if (isSizeAvailable.length) {
				ajl.make($("main"));
				(function() {
					isSizeAvailable[0].fireEvent("click");
					ajl.remove();
				}).delay(1000);
			}
		}

	})(); // end sizes

	currencySwap.initialize();

	var rel = document.id("relatedProds");
	// product Scroller
	if (rel) {

		var scr = new Scroller({
			products: rel,
			cats: [],
			productContainer: document.id("productC"),
			moveDelay: 200,
			moveSteps: 85,
			product_: document.id("product_"),
			arrowLeft: document.id("arrowL"),
			arrowRight: document.id("arrowR")
		});
	}

	if (Browser.ie)
		// activate flash
		IEactivateFlash();


}); // domready