function removeItemFromBasket(item) {
	$("basket-container").setStyles($("ajax-basket-items").getCoordinates());
	$("ajax-basket-items").setStyle("visibility", "hidden");
	$("basket-container").addClass("loading");
	new Ajax(
			"/viewmodes/shop/ajax/remove-from-basket.cfm?BasketItemID=" + item + "&uuid=" + escape(new Date()), 
			{
				method: "get",
				update: "basket-container",
				evalScripts : true,
				onComplete : function () {
					$("basket-container").removeClass("loading");
					$("basket-container").removeProperty("style");
					}
			}).request();
	}

function loadBasket() {
	$("basket-container").addClass("loading");

	new Ajax(
			"/viewmodes/shop/ajax/add-to-basket.cfm?&uuid=" + escape(new Date()), 
			{
				method: "get",
				update: "basket-container",
				evalScripts : true,
				onComplete : function () {
					//$("basket-container").removeProperty("style")
					$("basket-container").removeClass("loading");
					}
			}).request();
	
	}	

function ajaxCreditCardForm() {
	// If we are on the payment page with credit card form set up ajax form submit
	if ($("payment-form")) {
		
		paymentForm = $("payment-form").getElement("form");
		
		paymentForm.addEvent("submit", function (event) {
				var e = new Event(event)
				new Event(e).stop();
				//alert($$("#payment-form div.submit-button"))
				
				if (validateForm(this)) {
					$$("#payment-form div.submit-button").getElement(" input").setStyle("display","none");
					$("processing").setStyle("display",""); //setHTML("<img src='/storage/images/ajax-loader.gif' alt='Processing Payment' title='Processing Payment' /><br /><strong>Processing Payment</strong>");
					this.submit();
					/*
					this.send({
						update: "payment-form",
						evalScripts : true,
						onComplete: function() {
									//alert("added to cart");
									//$("basket-container").removeClass("loading");
									//$("basket-container").removeProperty("style");
									//log.removeClass('ajax-loading');
									//log.addClass('poll-response');
								}
							
						});*/
					}	
			
			});
		
		}
	}	
	
window.addEvent('domready', function(){
	// Load the ajax basket
	loadBasket();
	
	// Setup credit card form
	//ajaxCreditCardForm()
	
	// Attach the keyup event to the text inputs for the product forms
	document.getElements("input[name=Qty]").addEvent("keyup",  function(e) {
				if (isNaN(this.value)) {
					alert("Quantities must be a valid number.      ");
					this.value = "";
					}
				});
	// Attach the keyup event to the text inputs for the product forms
	document.getElements("td[title=Qty]").getElement("input").addEvent("keyup",  function(e) {
				if (isNaN(this.value)) {
					alert("Quantities must be a valid number.      ");
					this.value = "";
					}
				});		
	// Add the ajax submit actions to the product forms			
	$$("form.product-form").addEvent(
		"submit", 
		function (event) {
			var e = new Event(event)
			new Event(e).stop();
			
			// validate the form
			if (validateForm(this)) {
				var target = $('basket-container');
				var box = this.getElements("img");
				var box2 = box[box.length-1].clone().injectInside(box[0].getParent());//new Element("div");
				box2.formObj = this;
				
				// set up the product image transition into the cart then submit the form
				var fx = new Fx.Styles(box2, {
					duration: 500, 
					wait: false, 
					onComplete : function (obj) {
						obj.setProperties({'width' : 20, 'height' : 20});
						if ($("ajax-basket-items")) {
							$("basket-container").setStyles($("ajax-basket-items").getCoordinates());
							$("ajax-basket-items").setStyle("visibility", "hidden");
							}
					
						$("basket-container").addClass("loading");
					
						obj.formObj.send({
							update: "basket-container",
							evalScripts : true,
							onComplete: function() {
								$("basket-container").removeClass("loading");
								$("basket-container").removeProperty("style");
								}
							});
					
						obj.remove();
						}
								
					});
				
				fx.options.transition = Fx.Transitions.Sine.easeIn
				box2.setStyles(box.getCoordinates())
				box2.setStyles({position:"absolute"});
				box2.setStyles({'opacity': 0.7})
				box2.injectBefore(box[box.length-1]);
				
				this.s = {
						'left': target.getLeft(),
						'top': target.getTop(),
						'width' : 20,
						'height' : 20,
						'opacity' : 0
						};
				
				box2.setStyles({
								'top': box[box.length-1].getTop(),
								'left': box[box.length-1].getLeft()
								});
				fx.start(this.s);
				}
					
			});
	
	// Style the select boxes			
	var list = $$(".select-box select");

	baseIndex = 5000
	list.each(
		function(selectElement) {
			
			var optionElements = $(selectElement).getChildren();
			var container = new Element("div", {"class":"tool-container", "style":"z-index:" + --baseIndex}).injectAfter(selectElement);
			container.setStyle("z-index", --baseIndex);
			
			var selUL = new Element("ul", {"class" : selectElement.getProperty("class") == "" ? "default" : selectElement.getProperty("class")});
			for (o=0; o < optionElements.length; ++o) {
				if (optionElements[o].value != "") {
					if (o == 0) {
						liItem = new Element("li", {"title":optionElements[o].text, "class":"first"}).appendText(optionElements[o].text).injectInside(selUL);
						}
					else if (o == optionElements.length-1) {
						liItem = new Element("li", {"title":optionElements[o].text, "class":"last"}).appendText(optionElements[o].text).injectInside(selUL);
						}
					else {
						liItem = new Element("li", {"title":optionElements[o].text}).appendText(optionElements[o].text).injectInside(selUL);
						}
					}
			    }
			
			selUL.getChildren().each(
							
							function (element) {
								var fx = new Fx.Styles(element, {duration:200, wait:false});
				
								
								element.addEvent("click", function (e) {
									
									for (o=0; o < optionElements.length; ++o) {
										if (optionElements[o].text == element.getText()) {
												optionElements[o].selected = true;
												element.getParent().getParent().getPrevious().setText(optionElements[o].text);
												slideFX.toggle();
												}
											}
										});
						
								element.addEvent("mouseenter", function (e) {
																	fx.start({'color': '#000'});
																	});
								element.addEvent("mouseleave", function (e) {
																	fx.start({'color': '#9f9f9f'});
																	});
								}
							);
			
			selUL.injectInside(container);
			selectElement.setStyle("display", "none");
			var linkElement = new Element("div", {"class":"label", "title":selectElement.getFirst().getText()}).appendText(selectElement.getProperty("title"));
			
			linkElement.injectBefore(selUL)
			var slideFX = new Fx.Slide($(selUL), {duration:200});
			
			linkElement.addEvent("mouseenter", function () {
												linkElement.getParent().setStyle("background-position", "0px -27px");
												//linkElement.getParent().setOpacity(0.5)
												});
			linkElement.addEvent("mouseleave", function () {
												linkElement.getParent().setStyle("background-position", "0px 0px");
												//linkElement.getParent().setOpacity(1)
												});
			
			//alert(linkElement.getParent().outerHTML);
			linkElement.slideFX = slideFX;
			linkElement.addEvent("click", function (event) {
											var selectLabels = $$("div.label");
												
											selectLabels.each(
													function (e) {
														if (e != linkElement) {
															e.slideFX.hide();
															}
														}
													);
											
											slideFX.toggle();
											});
			slideFX.hide();
			
			});	
			
			if ($("size-guide")) {
				$("size-guide").fx = new Fx.Slide($('size-guide'), {duration:600});
				$("size-guide").fx.hide();
				$("size-guide").fx.options.transition = Fx.Transitions.Quad.easeOut;
				$("size-guide").open = function () {
					$("size-guide").fx.slideIn();
					}
				$("size-guide").close = function () {
					$("size-guide").fx.slideOut();
					}
				}
		}); 
		

		
function dynamicWindow(str, w, h)
	{
	dynamicPopup = window.open("about:blank","dynamicPopup","status=1,width=" + w + ",height=" + h);
	docStyle = document.getElementsByTagName("link");

	docStyles = "";
	for (i=0; i < docStyle.length; ++i) {
		//docStyles += docStyle[i].outerHTML;
		}

	dynamicPopup.document.write(docStyles + str);
	dynamicPopup.document.title = document.title;
	dynamicPopup.document.close();
	}
	
function openVC() {
	var content = "<html><title>What are Credit Card Verification Numbers</title></html><body><style>body,li,ul,ol,p,div,td,a {font-family:arial; font-size:9pt;}</style><h2>Credit Card Verification Numbers</h2><p>The Credit Card Verification (CCV) Number is printed on your credit card and provides you with extra security.</p><p>The location of the number varies from card to card:</p><ul><li><strong>Visa, Mastercard and Bankcard</strong><br><br>- Several digits are printed in the signature area on the back of your card. The last three digits make up the CCV Number. <br><img src=\"/images/cvv.jpg\" title=\"Credit Card Verification (CCV) Number\" alt=\"Credit Card Verification (CCV) Number\" /></li></ul><br><a href=\"javascript:window.close()\"><strong>close window</strong></a></body></html>";
	dynamicWindow(content, 400, 400);
	}