if(!$chk(HKM)) {
	var HKM = {};
}

HKM.ProductPage = HKM.ShopPage.extend({

	options: {
		visibleAtStartUp: true,
		
		uielmSelectors: {
			priceDisplaySelector: '.priceDisplay',
			imageContainerSelector: '.imageContainer',
			productImageSelector: '.imageContainer img',
			productControllerBarSelector: '.productControllerBar',
			zoomSelector: '.zoom',
			sendAFriendSelector: '.sendAFriend',
			enlargeButtonSelector: '.enlarge',
			detailButtonSelector: '.detailButtonContainer .labelButton a',
			displayNameFieldSelector: '.headerData h4',
			displayAbsPriceFieldSelector: '.priceDisplay .absPrice',
			displayRestPriceFieldSelector: '.priceDisplay .restPrice',
			displayOldPriceFieldSelector:'.oldPriceDisplay',
			labelButtonSelector: '.labelButton',
			fromPriceLabelSelector: '.priceDisplay .fromPriceLabel'
		},
		onDetailButtonClicked: Class.empty,
		onZoomButtonClicked: Class.empty,
		onTellAFriendButtonClicked: Class.empty,
		indicatorBorderColor: '#BD9E56',
		indicatorBackgroundColor: '#FFF',
		indicatorWidth: 26,
		indicatorHeiht: 26,
		productLoadIndicator: 'Images/productpage/product_image_loader.gif',
		createYourOwnLogo: 'Images/productpage/createyourown.gif',
		createYourOwnLogoWidth: 144
	},
	
	uielms: {
		priceDisplay: null,
		imageContainer: null,
		productImage: null,
		productControllerBar: null,
		zoom: null,
		sendAFriend: null,
		enlargeButton: null,
		detailButton: null,
		displayNameField: null,
		displayAbsPriceField: null,
		displayRestPriceField: null,
		displayOldPriceField: null,
		labelButton: null,
		fromPriceLabel: null
	},
	
	preloadImages: [
		'Images/productpage/zoom_hover.jpg',
		'Images/productpage/send_hover.jpg',
		'Images/productpage/enlarge_hover.jpg',
		'Images/productpage/product_image_loader.gif',
		'Images/productpage/createyourown.gif'
	],
	
	detailImage: null,
	
	loadIndicator: null,
	
	createYourOwnTimer: null,
	
	currentCreateYourOwnPosition: -144,
	
	currentCreateYourOwnTarget: -144,
	
	loaded: false,
	
	setupGUI: function() {
		
		var detailButtonParentDimensions = this.uielms.labelButton.getParent().getSize();
		var detailButtonDimensions = this.uielms.detailButton.getSize();
		var detailButtonX = (detailButtonParentDimensions.size.x/2) - (((detailButtonDimensions.size.x+(2*11))/2));
		
		this.uielms.labelButton.setStyles({'left': Math.round(detailButtonX), 'position':'relative'});
		this.uielms.detailButton.addEvent('click',this.detailButtonClicked.bindAsEventListener(this));
		this.uielms.enlargeButton.addEvent('click',this.enlargeButtonClicked.bindAsEventListener(this));
		this.uielms.zoom.addEvent('click',this.zoomButtonClicked.bindAsEventListener(this));
		this.uielms.zoom.setAttribute('onclick', 'return false;');
		this.uielms.sendAFriend.addEvent('click', this.sendAFriendButtonClicked.bindAsEventListener(this));
		this.uielms.sendAFriend.setAttribute('onclick', 'return false;');
		
	},
	
	
	sendAFriendButtonClicked: function(e) {
		this.fireEvent('onTellAFriendButtonClicked', [this]);
	},
	
	detailButtonClicked: function(e) {
		this.fireEvent('onDetailButtonClicked', [this]);
	},
	
	enlargeButtonClicked: function(e) {
		this.fireEvent('onEnlargeButtonClicked', [this]);
	},
	
	allowZoomClick: true,

	zoomButtonClicked: function(e) {
		
		this.uielms.imageContainer.removeEvents('click');
		this.uielms.imageContainer.setStyle('cursor', 'default');
		
		if(this.allowZoomClick == true) {
			this.allowZoomClick = false;
		}
		this.fireEvent('onZoomButtonClicked', [this.uielms.imageContainer.getFirst()]);
	},
	
	enableZoomClickImage: function() {
		this.allowZoomClick = true;
		this.uielms.imageContainer.addEvent('click',this.zoomButtonClicked.bindAsEventListener(this));
		this.uielms.imageContainer.setStyle('cursor', 'pointer');
	},
	
	getLoadIndicator: function() {
		
		if(this.loadIndicator === null) {
			
			this.loadIndicator = new Element('div');
			this.loadIndicator.setStyles({
				'border': '1px solid '+this.options.indicatorBorderColor,
				'backgroundColor': this.options.indicatorBackgroundColor,
				'display': 'block',
				'float': 'left',
				'width': this.options.indicatorWidth,
				'height': this.options.indicatorHeiht,
				'position': 'relative',
				'left': ((this.pageTarget.getStyle('width').toInt()/2)-(this.options.indicatorWidth/2)),
				'top': ((this.pageTarget.getStyle('height').toInt()/2)-(this.options.indicatorHeiht/2)),
				'z-index': 505
			});
		}
		return this.loadIndicator.clone();
	},
	
	renderData: function(productData) {

		if(!this.loaded) {
			this.loaded = true;
			this.uielms.labelButton.setStyles({'visibility': 'visible'});
		}

		var newProductId = productData.productId;
		var newProductName = productData.displayName;
		var newProductImagePath = productData.largeThumbImageUrl;
		var newProductPrice = productData.price;
		var oldProductPrice = $chk(productData.oldPrice) ? productData.oldPrice : null;
		
		// Set display Name
		this.uielms.displayNameField.setText(newProductName);
		
		// Set price
		// Convert price number to string
		var priceString = newProductPrice.toString();
		var priceParts = priceString.split('.');
		
		var absPrice = priceParts[0];
		var restPrice = (priceParts.length > 0) ? priceParts[1] : '00';
		if($chk(restPrice)) {
			while(restPrice.length < 2) {
				restPrice += '0';
			}                    
		} else {
			restPrice = '00';
		}
        
		if(oldProductPrice != null) {
			
			var oldPriceString = oldProductPrice.toString();
			var oldPriceParts = oldPriceString.split('.');
			
		   	var absoldPrice = oldPriceParts[0];
			var restoldPrice = (oldPriceParts.length > 0) ? oldPriceParts[1] : '00';
			if($chk(restoldPrice)) {
				while(restoldPrice.length < 2) {
					restoldPrice += '0';
				}                    
			} else {
				restoldPrice = '00';
			}
		    
			this.uielms.displayOldPriceField.setText(absoldPrice+','+restoldPrice);
			this.uielms.displayOldPriceField.setStyles({'display':'block','visibility':'visible'});
		} else {
			this.uielms.displayOldPriceField.setStyles({'display':'none','visibility':'hidden'});
		}

		this.uielms.displayAbsPriceField.setText(absPrice);
		this.uielms.displayRestPriceField.setText(restPrice);
		
		// Load image
		this.loadDetailImage(newProductImagePath, newProductName, newProductId);
		
		// Create your own
		if(productData.hasPersonalPrint) {
			this.showCreateYourOwn();
		} else {
			this.hideCreateYourOwn();
		}
		this.allowZoomClick = true;    
		
		
		if(productData.variantsHaveVariablePrices === true) {
			 this.uielms.fromPriceLabel.setStyle('display', 'block');
		} else {
			 this.uielms.fromPriceLabel.setStyle('display', 'none');			
		}

	},
	
	prepareReload: function(productId, productLabel, showLoadProgress) {
		this.allowZoomClick = false;
		// Add indicator. Make firstchild
		//this.getLoadIndicator().injectBefore(this.pageTarget.getFirst());
		
		this.uielms.imageContainer.removeEvents('click');
		this.uielms.imageContainer.setStyle('cursor', 'default');
		this.uielms.displayNameField.setText(productLabel);
		
		this.uielms.displayAbsPriceField.setText('');
		this.uielms.displayRestPriceField.setText('');
		this.uielms.displayOldPriceField.setText('');
		this.uielms.displayOldPriceField.setStyles({'display':'none', 'visibility':'hidden'});

		if(showLoadProgress !== false) {

			var appearFX = new Fx.Styles(this.uielms.imageContainer.getFirst(), {onComplete:this.showProductImageLoadIndicator.bindAsEventListener(this)});
			appearFX.start({'opacity':[this.uielms.productImage.getStyle('opacity'), 0]});
			
		}

	},
	

	
	showCreateYourOwn: function() {

		this.pageTarget.setStyles({
									'backgroundRepeat': 'no-repeat',
									'backgroundPosition': '-144px 44px',
									'backgroundImage': 'url(\''+this.options.createYourOwnLogo+'\')'
								});
		
		if(this.createYourOwnTimer !== null) {
			clearInterval(this.createYourOwnTimer);
			this.createYourOwnTimer = null;
		}
		this.createYourOwnTimer = this.createYourOwnFx.periodical(20, this, [0]);
	},
	
	
	
	hideCreateYourOwn: function() {
		
		if(this.createYourOwnTimer !== null) {
			clearInterval(this.createYourOwnTimer);
			this.createYourOwnTimer = null;
		}
		this.createYourOwnTimer = this.createYourOwnFx.periodical(20, this, [-144]);
		
	},
	
	createYourOwnFx: function(targetLeft) {
		
		this.currentCreateYourOwnPosition += Math.round((targetLeft - this.currentCreateYourOwnPosition) * 0.2);
		
		
		if(Math.abs(this.currentCreateYourOwnPosition - targetLeft) <= 1) {
			this.currentCreateYourOwnPosition = targetLeft;
			clearInterval(this.createYourOwnTimer);
			this.createYourOwnTimer = null;
		}
		
		this.pageTarget.setStyles({
									'backgroundPosition': this.currentCreateYourOwnPosition+'px 44px'
								});
		
	},
	
	showProductImageLoadIndicator: function() {
		
		this.uielms.imageContainer.setStyles({
									'backgroundImage': 'url('+this.options.productLoadIndicator+')',
									'backgroundPosition': '160px center',
									'backgroundRepeat': 'no-repeat'
									});
		
	},
	
	loadDetailImage: function(detailImagePath, productName, productId) {
		if(this.detailImage !== null) {
			this.detailImage = null;
		}
		if(detailImagePath != this.uielms.imageContainer.getFirst().src) {
			this.detailImage = new Asset.image(detailImagePath, {id: productId+'Image', title: productName, onload: this.loadDetailImageCompleteHandler.bind(this)});
		} else {
			this.uielms.imageContainer.setStyles({
										'background-image': 'none'
										});
			this.uielms.imageContainer.getFirst().setStyles({'opacity': 1, 'visibility':'visible', 'display':'block'});
		}
	},
	
	loadDetailImageCompleteHandler: function(animate) {
		this.uielms.imageContainer.setStyles({
									'background-image': 'none'
									});
		if(this.detailImage != null) {
			this.detailImage.setStyle('opacity', 0); 
			this.uielms.imageContainer.getFirst().replaceWith(this.detailImage);
		} else {
			this.detailImage.injectInside(this.uielms.imageContainer);
		}
		
		if(animate !== false) {
			var appearFX = new Fx.Styles(this.uielms.imageContainer.getFirst());
			appearFX.start({'opacity':[this.detailImage.getStyle('opacity'), 1]});
		} else {
			this.detailImage.setStyle('opacity', 1);
		}
		
		// Remove Indicator
		//this.pageTarget.getFirst().remove();
		this.uielms.imageContainer.addEvent('click',this.zoomButtonClicked.bindAsEventListener(this));
		this.uielms.imageContainer.setStyle('cursor', 'pointer');
	},
	
	getCurrentImagePath: function() {
		return this.uielms.productImage.getAttribute('src');
	}
	
});

HKM.ThemePage = HKM.ShopPage.extend({

	options: {
		visibleAtStartUp: true,
		
		uielmSelectors: {
			imageDisplaySelector: 'img'
		}
	},

	uielms: {
		imageDisplay: null
	},

	themeImage: null,

	setupGUI: function() {
		
	},

	prepareReload: function(productId, productLabel, showLoadProgress) {
		this.pageTarget.setStyles({
			'backgroundImage': 'url(\''+this.uielms.imageDisplay.getAttribute('src')+'\')',
			'backgroundRepeat': 'no-repeat',
			'backgroundPosition': 'left top'
		});
	},

	renderData: function(productData) {

		var newThemeImagePath = productData.themeImageUrl;

		if(this.getCurrentImagePath() == newThemeImagePath) { // Don't do anything if the image is the same
			return;
		}

		if(this.themeImage !== null) {
			this.themeImage = null;
		}
		this.themeImage = new Asset.image(newThemeImagePath, {onload: this.loadDetailImageCompleteHandler.bind(this)});
	},

	loadDetailImageCompleteHandler: function() {
		var newThemeImage = this.themeImage.clone();
		this.uielms.imageDisplay.replaceWith(newThemeImage);
		this.uielms.imageDisplay = newThemeImage;
		this.uielms.imageDisplay.setStyles({'opacity': 0, 'visibility': 'visible'});
		
		var appearFX = new Fx.Styles(this.uielms.imageDisplay, {onComplete:this.imageTransitionCompleteHandler.bind(this)});
		appearFX.start({'opacity':[0.01, 1]});
	},
	
	imageTransitionCompleteHandler: function() {
		this.pageTarget.setStyles({
			'backgroundImage': 'none'
		});
	},
	
	getCurrentImagePath: function() {
		return this.uielms.imageDisplay.getAttribute('src');
	}
	
});

HKM.DetailPage = HKM.ShopPage.extend({

	options: {
		visibleAtStartUp: false,
		
		uielmSelectors: {
			closeButtonSelector: '.closeButton a',
			buyIndicatorSelector: '.buyFormContainer .labelButton .indicator',
			reposeSuccessIndicatorSelector: '.buyFormContainer .labelButton .reposeSuccessIndicator',
			reposeFailureIndicatorSelector: '.buyFormContainer .labelButton .reposeFailureIndicator',
			buyButtonSelector: '.buyFormContainer .labelButton a',
			sizeSelectSelector: '.buyFormContainer select.sizeSelection',
			quantitySelectSelector: '.buyFormContainer select.quantitySelection',
			colourSelectSelector: '.buyFormContainer select.colourSelection',
			priceDisplaySelector: '.priceDisplay', 
			sizeSelectionSelector: '.buyFormContainer .sizeSelection',
			quantitySelectionSelector: '.buyFormContainer .quantitySelection',
			descriptionSelector: '.description p',
			descriptionContainerSelector: '.description',
			relatedProductContainerSelector: '.relatedProductContainer',
			relatedProductListSelector: '.relatedProductContainer ul',
			variantIdInputSelector: '.buyFormContainer .variantId',
			createYourOwnSelector: '.buyFormContainer .createYourOwnContainer',
			createYourOwnInputSelector: '.buyFormContainer .createYourOwnText',
			buyFormSelector: '.buyFormContainer form',
			createYourOwnInfoSelector: '.buyFormContainer .infoLabel',
			createYourOwnCharacterCountSelector: '.buyFormContainer .createYourOwnContainer .createYourOwnCharterCount'
		},
		defaultCreateYourOwnText: 'voer hier uw text in',
		createYourOwnMaxCharacter: 15,
		defaultCreateYourOwnText: 'Create Your Own',
		warningFillOutCreateYourOwnText: 'Please fillout the create your own textfield'
	},
	
	uielms: {
		closeButton: null,
		buyIndicator: null,
		buyButton: null,
		priceDisplay: null,
		priceDisplay: null,
		sizeSelection: null,
		colourSelection: null,
		quantitySelection: null,
		description: null,
		relatedProductContainer: null,
		relatedProductList: null,
		variantIdInput: null,
		createYourOwnInput: null,
		buyForm: null,
		reposeSuccessIndicator: null,
		reposeFailureIndicator: null,
		createYourOwn: null,
		descriptionContainer: null,
		createYourOwnInfo: null,
		createYourOwnCharacterCount: null
	},  
	
	preloadImages: [
					'Images/productpage/close_hover.jpg',
					'Images/productpage/info_hover.gif'
				],
	
	quatityLists: null,
	
	variantList: null,

	currentProductId: null,
	
	currentVariantId: null,
	
	currentColour: null,
	
	currentSize: null,
	
	originalDescriptionHeight: 0,
	
	createYourOwnHeightOffset: 40,
	
	currentCreateYourOwnHeight: 0,
	
	createYourOwnTimer: 0,
	
	createYourOwnHadFocus: false,
	
	isCreateYourOwn: false,
	
	setupGUI: function() {
		this.uielms.closeButton.addEvent('click', this.hide.bindAsEventListener(this));
		this.uielms.buyIndicator.setStyles({'visibility':'hidden', 'display': 'none'});
		this.uielms.reposeSuccessIndicator.setStyles({'visibility':'hidden', 'display': 'none'});
		this.uielms.reposeFailureIndicator.setStyles({'visibility':'hidden', 'display': 'none'});
		this.uielms.buyButton.addEvent('click', this.buyButtonClickHandler.bindAsEventListener(this));
		this.uielms.sizeSelection.addEvent('change', this.setupBuyForm.bindAsEventListener(this));
		this.uielms.quantitySelection.addEvent('change', this.setupBuyForm.bindAsEventListener(this));
		
		// Setup buy form
		//this.uielms.buyForm.setAttribute('onsubmit', 'return false;');
		//this.uielms.buyForm.addEvent('submit', this.buyFormSubmitHandler.bindAsEventListener(this));
		
		this.originalDescriptionHeight = this.uielms.descriptionContainer.getStyle('height').toInt();
		
		this.uielms.createYourOwnInfo.addEvent('mouseover', this.infoOverHanler.bindAsEventListener(this));
		this.uielms.createYourOwnInfo.addEvent('mouseleave', this.infoOutHanler.bindAsEventListener(this));
		
		this.uielms.createYourOwnInput.addEvent('focus', this.createYourOwnInputFocusHandler.bindAsEventListener(this));
		this.uielms.createYourOwnInput.addEvent('blur', this.createYourOwnInputBlurHandler.bindAsEventListener(this));
		this.uielms.createYourOwnInput.addEvent('blur', this.createYourOwnInputBlurHandler.bindAsEventListener(this));
		this.uielms.createYourOwnInput.addEvent('keypress', this.createYourOwnInputPressHandler.bindAsEventListener(this));
		this.uielms.createYourOwnInput.addEvent('keyup', this.createYourOwnInputPressHandler.bindAsEventListener(this));
		this.uielms.createYourOwnInput.addEvent('keydown', this.createYourOwnInputPressHandler.bindAsEventListener(this));
		
		this.setUpCreateYourOwn();
				
	},
	
	infoOverHanler: function() {
		
		this.uielms.createYourOwnInfo.setStyle('backgroundImage', 'url(\'Images/productpage/info_hover.gif\')');
		
	},
	
	infoOutHanler: function() {
		this.uielms.createYourOwnInfo.setStyle('backgroundImage', 'url(\'Images/productpage/info.gif\')');		
	},
	
	buyFormSubmitHandler: function() {
		
		
		// Check if create your own is filled if active
		if(this.isCreateYourOwn == true) {
			 if(this.uielms.createYourOwnInput.value == '' || this.uielms.createYourOwnInput.value == this.options.defaultCreateYourOwnText) {
				this.uielms.createYourOwnInput.value = this.options.defaultCreateYourOwnText;
				this.uielms.createYourOwnInput.setStyle('color','#F00');
				alert(this.options.warningFillOutCreateYourOwnText);
				return;
			}
		}
		
		this.disableBuyForm();
		this.uielms.buyIndicator.setStyles({'visibility':'visible', 'display':'block'});
		this.uielms.reposeSuccessIndicator.setStyles({'visibility':'hidden', 'display': 'none'});
		this.uielms.reposeFailureIndicator.setStyles({'visibility':'hidden', 'display': 'none'});
		
		HKM.addToBasket(
					this.currentProductId, 
					this.currentVariantId, 
					this.getSelectedQuantity(),
					(this.uielms.createYourOwn.getStyle('display') !== 'none') ? this.uielms.createYourOwnInput.value : null,
					this.buyFormSuccessHandler.bindAsEventListener(this),
					this.buyFormFailureHandler.bindAsEventListener(this),
					this.getSelectedColour(),
					this.getSelectedSize()
					);
					
		return false;
	},
	
	buyFormSuccessHandler: function() {
		this.enableBuyForm();
		this.uielms.buyIndicator.setStyles({'visibility':'hidden', 'display':'none'});
		this.uielms.reposeSuccessIndicator.setStyles({'visibility':'visible', 'display': 'block'});
		this.uielms.reposeFailureIndicator.setStyles({'visibility':'hidden', 'display': 'none'});
			
		this.hideSuccessIndicator.delay(1500, this);
	},
	
	hideSuccessIndicator: function() {
		var disappearFX = new Fx.Styles(this.uielms.reposeSuccessIndicator);
		disappearFX.start({'opacity':[1, 0]});	
	},

	buyFormFailureHandler: function() {
		
		this.enableBuyForm();
		
		this.uielms.buyIndicator.setStyles({'visibility':'hidden', 'display':'none'});
		this.uielms.reposeSuccessIndicator.setStyles({'visibility':'hidden', 'display': 'none'});
		this.uielms.reposeFailureIndicator.setStyles({'visibility':'visible', 'display': 'block'});
	
		this.hideFailureIndicator.delay(3000, this);
		
		this.options.delegate.displayException(arguments[0]);
	},
	
	hideFailureIndicator: function() {
		var disappearFX = new Fx.Styles(this.uielms.reposeFailureIndicator);
		disappearFX.start({'opacity':[1, 0]});	
	},

	buyButtonClickHandler: function() {
		this.buyFormSubmitHandler();
	},
	
	tmpImageList: null,
	
	renderData: function(productData) {
		
		this.currentProductId = productData.productId;
		
		this.uielms.description.setText(productData.description);
		
		this.displayPrice(productData.price)
		
		// Reload formBoxes
		this.uielms.sizeSelection.empty();
		this.quatityLists = null;
		this.quatityLists = [];
		
		// Create unique size and colour list
		var sizeList = [];
		var colourList = [];
		var defaultVariant = null;
		var defaultVariantIndex = 0;
		
		for(var i=0;i<productData.variantList.length;i++) {
			if(!colourList.contains(productData.variantList[i].colourName)) {
				colourList.push(productData.variantList[i].colourName);
			}
			if(!sizeList.contains(productData.variantList[i].size)) {
				sizeList.push(productData.variantList[i].size);
			}
			if(productData.variantList[i].autoSelect === true) {
				defaultVariant = productData.variantList[i].variantId;
				defaultVariantIndex = i;
			}
		}
		
		// Set the default values
		this.currentColour = productData.variantList[defaultVariantIndex].colourName;
		this.currentSize = productData.variantList[defaultVariantIndex].size;
		this.currentVariantId = productData.variantList[defaultVariantIndex].variantId;
		
		//
		for(var i=0;i<sizeList.length;i++) {
			var sizeLabel = sizeList[i];
			var newOption = new Element('option');

			newOption.setText(sizeLabel);
			newOption.setAttribute('value', sizeLabel);
			
			newOption.injectInside(this.uielms.sizeSelection);
			
			if(this.currentSize == sizeLabel) {
				newOption.setAttribute('selected', 'selected');
			}
			
			// Store corresponding quantity list
			this.quatityLists.push(productData.variantList[i].quantityList);
		}

		if(sizeList.length <= 0 || !$chk(sizeList[0])) {
			this.uielms.sizeSelection.setStyles({'visibility':'hidden', 'display':'none'});
		} else {
			this.uielms.sizeSelection.setStyles({'visibility':'visible', 'display':'inline'});
		}
		
		this.setQuantityList();
		
		// Store a copy of the variant list
		this.variantList = productData.variantList.slice();
		
		// Set initial color
		var variantColorValue = (productData.variantList.length > 0) ? productData.variantList[0].colourName : 0;
		this.currentColour = variantColorValue;
		
		// Set initial size
		var variantSizeValue = (productData.variantList.length > 0) ? productData.variantList[0].size : 0;
		this.currentSize = variantSizeValue;
		
		// Set initial variant value
		this.uielms.variantIdInput.value = this.currentVariantId;

		// Related products
		var releatedListFX = new Fx.Styles(this.uielms.relatedProductContainer);

		if(productData.relatedProductList.length === 0) {
			releatedListFX.start({'opacity':[this.uielms.relatedProductContainer.getStyle('opacity'), 0.2]});
		} else {
			releatedListFX.start({'opacity':[this.uielms.relatedProductContainer.getStyle('opacity'), 1]});
			// Reload releated products
			this.tmpImageList = [];
			for(var i=0;i<Math.min(productData.relatedProductList.length, 3);i++) {
				var releatedProduct = productData.relatedProductList[i];
			
				// Create new html
				var listElm = new Element('li');
				var linkElm = new Element('a');
				var imgPath = releatedProduct.smallThumbImageUrl;
				var productId = releatedProduct.productId;
				var productDisplayName = releatedProduct.displayName;
			
				linkElm.injectInside(listElm);
				listElm.injectInside(this.uielms.relatedProductList);
			
				linkElm.addEvent('click', HKM.displayShopProduct.bind(window, [productId, productDisplayName, true]));

				var relatedImage = new Asset.image(imgPath, {title:productDisplayName, onload: this.relatedImageLoaded.bind(this, [i, linkElm])});
				this.tmpImageList[i] = relatedImage;
			}
			
		}
		
		if(productData.hasPersonalPrint === true) {
			this.isCreateYourOwn = true;
			this.displayCreateYourOwn();
		} else {
			this.isCreateYourOwn = false;
			this.hideCreateYourOwn();
		}
		
		//this.uielms.createYourOwnInput.value = '';
		
		this.enableBuyForm();
		
		this.uielms.buyIndicator.setStyles({'visibility':'hidden', 'display':'none'});
		this.uielms.reposeSuccessIndicator.setStyles({'visibility':'hidden', 'display':'none'});
		this.uielms.reposeFailureIndicator.setStyles({'visibility':'hidden', 'display': 'none'});     
		
	},
	
	relatedImageLoaded:function(relatedImageIndex, relatedImageContainer) {
		var newImage = this.tmpImageList[relatedImageIndex];
		newImage.injectInside(relatedImageContainer);
	},
	
	prepareReload: function(productId, productLabel, showLoadProgress) {
		this.disableBuyForm();
		this.uielms.priceDisplay.setText('');
		this.uielms.relatedProductList.empty();
		
		this.uielms.buyIndicator.setStyles({'visibility':'hidden', 'display':'none'});
		this.uielms.reposeSuccessIndicator.setStyles({'visibility':'hidden', 'display':'none'});
		this.uielms.reposeFailureIndicator.setStyles({'visibility':'hidden', 'display': 'none'});

	},
	
	disableBuyForm: function() {
		
		this.uielms.buyButton.removeEvents('click');
		//this.uielms.buyForm.removeEvents('submit');
		
		for(node = this.uielms.buyButton.getParent().getParent().getFirst();node!=null;node=node.getNext()) {
			if(node != this.uielms.buyIndicator) {
				node.setStyle('opacity', 0.5);
			}
		}
		
		this.uielms.createYourOwnInput.disabled = true;
		
		var selects = $ES('select', this.uielms.buyForm);
		for(var i=0;i<selects.length;i++) {
			if(selects[i].getTag() == 'select') {
				selects[i].disabled = true;
			}
		}
	},
	
	setUpCreateYourOwn: function() {
		this.createYourOwnHadFocus = false;
		this.uielms.createYourOwnInput.setAttribute('maxlength', this.options.createYourOwnMaxCharacter);
		this.uielms.createYourOwnInput.value = this.options.defaultCreateYourOwnText;
		this.uielms.createYourOwnInput.setStyles({'color':'#CCC'});
		this.uielms.createYourOwnCharacterCount.setText(this.options.createYourOwnMaxCharacter);
	},
	
	createYourOwnInputFocusHandler: function() {
		if(!this.createYourOwnHadFocus) {
			this.uielms.createYourOwnInput.value = '';
			this.createYourOwnHadFocus = true;
		}
		this.uielms.createYourOwnInput.setStyle('color', '#000');
		this.uielms.createYourOwnCharacterCount.setStyles({'display':'block', 'visibility':'visible'});
	},
	
	createYourOwnInputPressHandler: function() {
		this.uielms.createYourOwnCharacterCount.setText((this.options.createYourOwnMaxCharacter-(this.uielms.createYourOwnInput.value.length)));
	},
	
	createYourOwnInputBlurHandler: function() {
		if(this.uielms.createYourOwnInput.value == '') {
			this.setUpCreateYourOwn();			
		}
		this.uielms.createYourOwnCharacterCount.setStyles({'display':'none', 'visibility':'hidden'});
	},
	
	displayCreateYourOwn: function() {

		this.setUpCreateYourOwn();

		if($chk(this.uielms.createYourOwn) && this.uielms.createYourOwn.getStyle('display') == 'none') {
			this.uielms.createYourOwn.setStyles({'display':'block', 'visibility':'visible', 'overflow':'hidden', 'height':this.currentCreateYourOwnHeight});
			this.uielms.relatedProductContainer.setStyle('margin-top', (this.createYourOwnHeightOffset-this.currentCreateYourOwnHeight));
		}
		if(this.createYourOwnTimer !== null) {
			clearInterval(this.createYourOwnTimer);
			this.createYourOwnTimer = null;
		}
		this.createYourOwnTimer = this.createYourOwnFx.periodical(20, this, [this.createYourOwnHeightOffset]);
	},
	
	hideCreateYourOwn: function() {
		if(this.createYourOwnTimer !== null) {
			clearInterval(this.createYourOwnTimer);
			this.createYourOwnTimer = null;
		}
		this.createYourOwnTimer = this.createYourOwnFx.periodical(20, this, [0]);		
	},
		
	createYourOwnFx: function(targetHeight) {
		
		this.currentCreateYourOwnHeight += Math.round((targetHeight - this.currentCreateYourOwnHeight) * 0.2);
		if(this.currentCreateYourOwnHeight%2 !== 0) {
			this.currentCreateYourOwnHeight-=1;
		}

		if(Math.abs(this.currentCreateYourOwnHeight - targetHeight) <= 1) {
			this.currentCreateYourOwnHeight = targetHeight;
			clearInterval(this.createYourOwnTimer);
			this.createYourOwnTimer = null;
			if(targetHeight === 0) {
				this.uielms.createYourOwn.setStyles({'display':'none', 'visibility':'hidden'});
			}
		}

		var halfHeight = Math.abs(this.currentCreateYourOwnHeight/2);
		

		this.uielms.relatedProductContainer.setStyle('margin-top', (this.createYourOwnHeightOffset-this.currentCreateYourOwnHeight/2));
		this.uielms.descriptionContainer.setStyles({
								'height': (this.originalDescriptionHeight-this.currentCreateYourOwnHeight/2)
								});		
		
		this.uielms.createYourOwn.setStyles({'height':this.currentCreateYourOwnHeight});
	},
	
	enableBuyForm: function() {
		
		this.uielms.buyButton.addEvent('click', this.buyButtonClickHandler.bindAsEventListener(this));
		//this.uielms.buyForm.addEvent('submit', this.buyFormSubmitHandler.bindAsEventListener(this));
		
		for(node = this.uielms.buyButton.getParent().getParent().getFirst();node!=null;node=node.getNext()) {
			if(node != this.uielms.buyIndicator) {
				node.setStyle('opacity', 1);	
			}
		}
		
		this.uielms.createYourOwnInput.disabled = false;
		
		var selects = $ES('select', this.uielms.buyForm);
		for(var i=0;i<selects.length;i++) {
			if(selects[i].getTag() == 'select') {
				selects[i].disabled = false;
			}
		}
		
	},
	
	setupBuyForm: function(e) {
		
		var evt = new Event(e);
		
		if(evt.target != this.uielms.quantitySelection) {
			this.setQuantityList();
		}
		
		this.currentSize = this.getSelectedSize();
		var currentVariant = this.getCurrentVariant();		

		this.currentVariantId = currentVariant.variantId;
		this.currentColor = currentVariant.colourName;
		this.currentSize = currentVariant.colorSize;
		
		// Set the variantId in its form input
		this.uielms.variantIdInput.value = this.currentVariantId;
		
		// Set variant price display
		var newDisplayPrice = currentVariant.price * this.getSelectedQuantity().toInt();

		this.displayPrice(newDisplayPrice);

	},
	
	getSelectedColour: function() {
		return 	(this.uielms.colourSelection != null) ? this.uielms.colourSelection.value : this.currentColour;
	},
	
	getSelectedSize: function() {
		return 	(this.uielms.sizeSelection != null) ? this.uielms.sizeSelection.value : this.currentSize;	
	},
	
	getSelectedQuantity: function() {

		return 	(this.uielms.quantitySelection != null) ? this.uielms.quantitySelection.value : 1;	
	},	
	
	getCurrentVariant: function() {
		// Find the correct id
		for(var i=0;i<this.variantList.length;i++) {
			if(this.variantList[i].colourName == this.currentColour && this.variantList[i].size == this.currentSize) {
				return this.variantList[i];
			}
		}
	},
	
	setQuantityList: function() {

		var index = $chk(this.uielms.sizeSelection.selectedIndex) ? this.uielms.sizeSelection.selectedIndex : 0;
		
		this.uielms.quantitySelection.empty();
		
		var quantityList = this.quatityLists[index];
		
		for(var i=0;i<quantityList.length;i++) {
			var quantityLabel = quantityList[i];
			var newOption = new Element('option');
			newOption.setAttribute('value', quantityLabel);
			newOption.setText(quantityLabel);
			newOption.injectInside(this.uielms.quantitySelection);
		}
	},
	
	displayPrice: function(price) {

		var priceString = price.toString();
		var priceParts = priceString.split('.');
		
		var absPrice = priceParts[0];
		var restPrice = ($chk(priceParts[1])) ? priceParts[1] : '00';
		var restNumber = parseFloat(restPrice.substr(0, 2)+'.'+restPrice.substr(2, 3));
		restPrice = Math.round(restNumber).toString();
		while(restPrice.length < 2) {
			restPrice += '0';
		}
		var priceString = absPrice+','+restPrice;
		this.uielms.priceDisplay.setText(priceString);
	}
	
});

HKM.ZoomPage = HKM.ShopPage.extend({

	options: {
		visibleAtStartUp: false,
		
		uielmSelectors: {
		
		}
				
	},
	
	uielms: {
	
	},
	
	preloadImages: [
					'Images/productpage/product_image_loader.gif'
					],
	
	loaded: false,
	
	isZoomImageLoaded: false,
	
	currentProductId: null,
	
	loadedProductId: null,	
	
	currentProductZoom: null,
	
	loadImage: null,
	
	currentImagePath: null,
	
	smallImageTarget: null,
	
	zoomDragger: null,
	
	currentDrag: null,
	
	scaleFactor: null,
	
	setupGUI: function() {
	},
	
	prepareReload: function(productId, productLabel, showLoadProgress) {
		
		if(this.currentProductId == productId) {
			return;
		}
		this.pageTarget.setStyles({'backgroundImage':'none'});
		this.currentProductId = productId;
		
		 this.pageTarget.setStyles({
		 	'backgroundRepeat': 'no-repeat',
		 	'backgroundPosition': 'left top'
		});
	},
	
	renderData: function(productData) {
		// Load the new image
		var newImagePath = productData.detailImageUrl;
		this.isZoomImageLoaded = (newImagePath == this.currentImagePath);
		this.currentProductId = productData.productId;
		this.currentImagePath = newImagePath;
		this.pageTarget.setStyles({'backgroundImage':'none'});
	},
	
	startZoom: function(smallImageTarget) {
		
		this.smallImageTarget = smallImageTarget;
		
		if(!this.isZoomImageLoaded) {
			this.loadImage = new Asset.image(this.currentImagePath, {onload: this.zoomImageLoaded.bind(this)});
			this.pageTarget.setStyles({
			 	'backgroundRepeat': 'no-repeat',
			 	'backgroundPosition': 'center center',
				'backgroundImage':'url(\''+this.preloadImages[0]+'\')'
			});
		} else {
			this.zoomImageLoaded();
		}
	},
	
	zoomImageLoaded: function() {
		
		this.pageTarget.setStyles({
								'backgroundImage':'url(\''+this.loadImage.getAttribute('src')+'\')', 
								'backgroundPosition': 'left top'
								});
		this.setUpZoom();
	},
	
	didHide: function() {
		this.removeDragger();
	},
	
	removeDragger: function() {
		if(this.zoomDragger !== null) {
			this.zoomDragger.remove();
			this.zoomDragger = null;
		}
	},
	
	setUpZoom: function() {
		
			var smallImageWidth = this.smallImageTarget.width;
			var smallImageHeight = this.smallImageTarget.height;
			var imgx = this.smallImageTarget.getPosition().x;
			var imgy = this.smallImageTarget.getPosition().y;

			
			this.scaleFactor = (smallImageWidth/this.loadImage.width);
			
			// Create the dragger
			if(this.zoomDragger !== null) {
				this.zoomDragger.remove();
				this.zoomDragger = null;
			}
			
			var startLeft = (this.getBaseLeft()+50)
			var startTop = (this.getBaseTop()+50)
			
			this.zoomDragger = new Element('div');
			this.zoomDragger.addClass('zoomDragger');
			this.zoomDragger.setStyles({
										'position': 'absolute',
										'z-index': 10,
										'opacity': 0,
										'width': 1,
										'height': 1,
										'cursor': 'move'
										});
		// 								
		if(!window.ie6) {
			this.zoomDragger.injectAfter(this.smallImageTarget);
		} else {
			this.zoomDragger.injectBefore(this.smallImageTarget);
		}

	   // if(!window.ie6) {
		this.zoomDragger.setStyles({
									'left': (imgx+((smallImageWidth/2) - ((this.pageTarget.getSize().size.x*this.scaleFactor)/2))),
									'top': (imgy+((smallImageHeight/2) - ((this.pageTarget.getSize().size.y*this.scaleFactor)/2)))
								});
		//}
		
		var appearFX = new Fx.Styles(this.zoomDragger);
		appearFX.start({
				'opacity':[this.zoomDragger.getStyle('opacity'), 0.5], 
				'width': [this.zoomDragger.getStyle('width'), (this.pageTarget.getSize().size.x*this.scaleFactor)],
				'height': [this.zoomDragger.getStyle('height'), (this.pageTarget.getSize().size.y*this.scaleFactor)]
				});
			

		if(!window.ie6) {
			this.currentDrag = new Drag.Move(this.zoomDragger, {
																onDrag:this.handleZoomDrag.bindAsEventListener(this),
																limit: {
																	x:[imgx, imgx+(smallImageWidth-(this.pageTarget.getSize().size.x*this.scaleFactor))], 
																	y:[imgy, imgy+(smallImageHeight-(this.pageTarget.getSize().size.y*this.scaleFactor))]
																		}
																	});
		} else {
		
			 this.currentDrag = new Drag.Move(this.zoomDragger, {
			 															onDrag:this.handleZoomDrag.bindAsEventListener(this),
																		limit: {
																			x:[imgx, imgx+(smallImageWidth-(this.pageTarget.getSize().size.x*this.scaleFactor))], 
																			y:[imgy, imgy+(smallImageHeight-(this.pageTarget.getSize().size.y*this.scaleFactor))]
																				}
			 														});
		}
		
		this.handleZoomDrag();
		
	},
		
	handleZoomDrag: function() {
		
		var dragx = this.zoomDragger.getPosition().x;
		var dragy = this.zoomDragger.getPosition().y;
		var imgx = this.smallImageTarget.getPosition().x;
		var imgy = this.smallImageTarget.getPosition().y;
		
		var newXPos = Math.round((imgx-dragx)/this.scaleFactor);
		var newYPos = Math.round((imgy-dragy)/this.scaleFactor);    
		
		window.status = newXPos;
		
		this.pageTarget.setStyles({'backgroundPosition':newXPos+'px '+newYPos+'px'})
		
	},
	
	getBaseTop: function() {
		return this.smallImageTarget.offsetTop;
	},
	
	getBaseLeft: function() {
		return this.smallImageTarget.offsetLeft;
	}
	
});