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

HKM.CategorySliderPage = HKM.ShopPage.extend({
	
	options: {
		
		visibleAtStartUp: true,
		
		uielmSelectors: {
			previousButtonSelector: '.naHeaderBar .previousButton',
			nextButtonSelector: '.naHeaderBar .nextButton',
			titleContainerSelector: '.naHeaderBar h4',
			categorySliderContainerSelector: '.categorySliderContainer'
		},

		limit: 4,

		onRequestNewProducts: Class.empty,
		onChanged: Class.empty
	},
	
	uielms: {
		previousButton: null,
		nextButton: null,
		titleContainer: null,
		categorySliderContainer: null
	},
	
	productList: [],
	
	currentOffset: 0,
	
	totalProductCount: 0,
	
	preloadImages: [
					'Images/newArrivals/na_previous_hover.jpg',
					'Images/newArrivals/na_next_hover.jpg',
					'Images/newArrivals/product_loader.gif'
				],
				
	productSlider: null,
	
	setupGUI: function() {

		this.uielms.previousButton.setAttribute('allowed', false);		
		this.uielms.nextButton.setAttribute('allowed', false);
		this.currentPage = 1;
		
		this.setButtonActivity();
		
		this.productSlider = new Element('div');
		this.productSlider.setStyles({
										'display': 'block',
										'width': this.uielms.categorySliderContainer.getStyle('width'),
										'height': this.uielms.categorySliderContainer.getStyle('height')
									});

		this.productSlider.injectInside(this.uielms.categorySliderContainer);
		
		this.uielms.categorySliderContainer.scrollTo(0, 0);
		
	},
	
	setButtonActivity: function() {

		if(this.currentPage > 1) {
			this.uielms.previousButton.removeEvents();
			this.uielms.previousButton.addEvent('mouseover', this.previousButtonMouseOverHandler.bindAsEventListener(this));
			this.uielms.previousButton.addEvent('mouseleave', this.previousButtonMouseOutHandler.bindAsEventListener(this));
			this.uielms.previousButton.addEvent('click', this.previousButtonClickHandler.bindAsEventListener(this));
			this.uielms.previousButton.setStyles({
												'opacity':1, 
												'cursor':'pointer',
												'backgroundImage':'url(Images/newArrivals/na_previous.jpg)'});
			this.uielms.previousButton.setAttribute('allowed', true);
		} else {

			this.uielms.previousButton.removeEvents();	
			this.uielms.previousButton.setStyles({
												'opacity':0.5, 
												'cursor':'default',
												'backgroundImage':'url(Images/newArrivals/na_previous.jpg)'
												});
			this.uielms.previousButton.setAttribute('allowed', false);
		}
		
		if(this.currentPage < this.maxPages) {
			this.uielms.nextButton.removeEvents();
			this.uielms.nextButton.addEvent('mouseover', this.nextButtonMouseOverHandler.bindAsEventListener(this));
			this.uielms.nextButton.addEvent('mouseleave', this.nextButtonMouseOutHandler.bindAsEventListener(this));
			this.uielms.nextButton.addEvent('click', this.nextButtonClickHandler.bindAsEventListener(this));	
			this.uielms.nextButton.setStyles({
											'opacity':1, 
											'cursor':'pointer',
											'backgroundImage':'url(Images/newArrivals/na_next.jpg)'});
			this.uielms.nextButton.setAttribute('allowed', true);
		} else {
			this.uielms.nextButton.removeEvents();
			this.uielms.nextButton.setStyles({
										'opacity':0.5, 
										'cursor':'default', 
										'backgroundImage':'url(Images/newArrivals/na_next.jpg)'
										});
			this.uielms.nextButton.setAttribute('allowed', false);
		}
		
	},
	
	gotoNextPage: function() {
		if(this.currentPage <= this.maxPages) {
			this.displayItemSetAtIndex(++this.currentPage);


			this.fireEvent('onChanged', [this.productList[((this.currentPage-1)*this.options.limit)]]);
		}
	},
	
	gotoPreviousPage: function() {
		if(this.currentPage > 0) {
			this.displayItemSetAtIndex(--this.currentPage);

			this.fireEvent('onChanged', [this.productList[((this.currentPage-1)*this.options.limit)]]);

		}
	},
	
	previousButtonClickHandler: function(e) {
		
		var evt = new Event(e);
		evt.stopPropagation();
		if((evt.target.getAttribute('allowed') === false) || (evt.target.getAttribute('allowed') == 'false'))
		return;
		
		this.currentOffset = Math.max((this.currentOffset - this.options.limit), 0);
		this.gotoPreviousPage();
		this.setButtonActivity();
	},
	
	nextButtonClickHandler: function(e) {
		
		var evt = new Event(e);
		evt.stopPropagation();
		if((evt.target.getAttribute('allowed') === false) || (evt.target.getAttribute('allowed') == 'false'))
		return;
		
		if(this.currentPage < this.maxPages) {
			this.currentOffset += this.options.limit;
			if(!(this.productList.length == this.totalProductCount) && !$chk(this.productList[this.currentOffset])) {
				this.fireEvent('onRequestNewProducts', [this.options.limit, this.currentOffset]);				
			} else {
				this.currentOffset += this.options.limit;
				this.gotoNextPage();
				this.setButtonActivity();
			}
		}


	},
	
	previousButtonMouseOverHandler: function(e) {

		var evt = new Event(e);
		evt.stopPropagation();
		if((evt.target.getAttribute('allowed') === false) || (evt.target.getAttribute('allowed') == 'false'))
		return;		
	
		evt.target.setStyle('backgroundImage', 'url(Images/newArrivals/na_previous_hover.jpg)');		
		evt.stop();
		
	},

	previousButtonMouseOutHandler: function(e) {

		var evt = new Event(e);
		evt.stopPropagation();		
		if((evt.target.getAttribute('allowed') === false) || (evt.target.getAttribute('allowed') == 'false'))
		return;

		evt.target.setStyle('backgroundImage', 'url(Images/newArrivals/na_previous.jpg)');		
		evt.stop();		
	},
	
	nextButtonMouseOverHandler: function(e) {
		
		var evt = new Event(e);

		evt.stopPropagation();		
		
		if((evt.target.getAttribute('allowed') === false) || (evt.target.getAttribute('allowed') == 'false'))
		return;
		
		evt.target.setStyle('backgroundImage', 'url(Images/newArrivals/na_next_hover.jpg)');
		evt.stop();				
	},

	nextButtonMouseOutHandler: function(e) {

		var evt = new Event(e);
		evt.stopPropagation();
		evt.target.setStyle('backgroundImage', 'url(Images/newArrivals/na_next.jpg)');
		evt.stop();						
	},
	
	prepareReload: function(productId, productLabel) {
		

		// this.uielms.categorySliderContainer
		this.uielms.categorySliderContainer.getParent().setStyles({
									'backgroundImage':'url(Images/newArrivals/product_loader.gif)',
									'backgroundRepeat':'no-repeat',
									'backgroundPosition':'center center'								
								});
		
	},
	
	renderData: function(productData) {		


		
		if($chk(productData.displayName)) {
			this.uielms.titleContainer.setText(productData.displayName)
		}

		this.totalProductCount = productData.totalProductCount;
		this.maxPages = Math.ceil(this.totalProductCount/this.options.limit);
		//this.productList.extend(productData.productList);
		
		for(var e=0;e<productData.productList.length;e++) {

			this.productList.push(productData.productList[e]);
		}

		this.uielms.categorySliderContainer.getParent().setStyles({
									'backgroundImage':'none'
									});

		this.layOutProducts(productData.productList);
		
		this.setButtonActivity();
		
	},
	
	productLayoutForData: function(productData) {
		
		var productLayout = new Element('div');

		productLayout.setStyles({
									'width': 110,
									'height':150,
									'display':'block',
									'float': 'left',
									'textAlign': 'center',
									'textAlign': 'center',
									'cursor': 'pointer',
									'margin': '2px 8px 0 14px'
								});
		if(window.ie6) {
			productLayout.setStyle('margin', '2px 4px 0 7px');
			productLayout.setStyle('padding-top', 3);
		}
		
		var productImage = Asset.image(productData.smallThumbImageUrl/*, {onload: this.loadDetailImageCompleteHandler.bind(this)}*/);
		productImage.injectInside(productLayout);
		
		
		// Label
		var productLabelContainer = new Element('span');
		productLabelContainer.setStyles({
									'width': 108,
									'height':27,
									'display':'block',
									'textAlign': 'left'
								});                       

		if(!window.ie) {
		productLabelContainer.setStyles({
									'position':'relative'
								});
		}
								
		var productLabel = new Element('span');
		productLabel.setStyles({
									'width': 100,
									'display':'block',
									'verticalAlign': 'bottom',
									'bottom': '0',
									'textAlign': 'center',
									'lineHeight': 14,
									'fontWeight': 'bold'
								});                     


		if(!window.ie) { 
			productLabel.setStyles({
									'position': 'absolute'
								}); 
		}
		productLabel.setText(productData.displayName);

		var priceLabel = new Element('span');
		priceLabel.setStyles({
									'width': 100,
									'display':'block',
									'textAlign': 'center',
									'lineHeight': 14,
									'marginTop': 2
								});
								
								

		priceLabel.setText('€ '+this.getDisplayPrice(productData.price));
	
		productLabel.injectInside(productLabelContainer);
		productLabelContainer.injectInside(productLayout);
		
		priceLabel.injectInside(productLayout);
				
		productLayout.addEvent('click', this.productClicked.bindAsEventListener(this, [productData.productViewUrl]));
		
		return productLayout;
	},
	
	productClicked: function(e, productURL) {
		window.location = productURL;
	},
	
	layOutProducts: function(productList) {

		var newProductGrid = new Element('div');

		newProductGrid.setStyles({
								'display':'block',
								'width':this.uielms.categorySliderContainer.getSize().size.x,
								'height':this.uielms.categorySliderContainer.getStyle('height'),
								'float': 'left'
							});

		for(var i=0;i<productList.length;i++) {
			var newProductLayout = this.productLayoutForData(productList[i]);
			newProductLayout.injectInside(newProductGrid);
		}
		
		var currentPosition = this.uielms.categorySliderContainer.getSize().scroll.x;

		newProductGrid.injectInside(this.productSlider);  

		// Correct product label position on ie7 
		if(window.ie) {
			var productsLabels = $ES('span span', newProductGrid);
			for(var i=0;i<productsLabels.length;i++) {
				if(productsLabels[i].getSize().scrollSize.y <= 15) {
					productsLabels[i].setHTML('<br/>'+productsLabels[i].getText());
				}
			}               
		}

		this.productSlider.setStyle('width', newProductGrid.getStyle('width').toInt()*this.productSlider.getChildren().length);
		
		this.uielms.categorySliderContainer.scrollTo(currentPosition, 0);

		if(this.productSlider.getChildren().length > 1) {
			this.gotoNextPage();
		}else {
			this.fireEvent('onChanged', [this.productList[0]]);
		}
		this.setButtonActivity();
		//this.displayItemSetAtIndex((this.productSlider.getChildren().length));

	},
	
	displayItemSetAtIndex: function(index) {
		var itemSize = this.uielms.categorySliderContainer.getSize().size.x;
		if(this.moveToIndexTimer !== null) {
			$clear(this.moveToIndexTimer);
			this.moveToIndexTimer = null;
		}
		
		this.moveToIndexTimer = this.moveToIndexHandler.periodical(2, this, (itemSize*(index-1)));

	},
	
	moveToIndexTimer: null,
	
	moveToIndexSpeed: 5,
	
	moveToIndexHandler: function(position) {
		
		var currentPosition = this.uielms.categorySliderContainer.getSize().scroll.x;
		var motion = Math.min(this.moveToIndexSpeed, Math.abs(currentPosition - position));
		
		if(position < currentPosition) {
			motion = 0-motion;
		}
		
		var newScrollPosition = currentPosition + motion;
		
		this.uielms.categorySliderContainer.scrollTo(newScrollPosition, 0);
		
		if(newScrollPosition == position) {
			$clear(this.moveToIndexTimer);
			this.moveToIndexTimer = null;
		}
		
	},
	
	getDisplayPrice: function(price) {

		var priceString = price.toString();
		var priceParts = priceString.split('.');
		
		var absPrice = priceParts[0];
		var restPrice = ($chk(priceParts[1])) ? priceParts[1] : '00';
		
		while(restPrice.length < 2) {
			restPrice += '0';
		}
		var priceString = absPrice+','+restPrice;
		
		return priceString;
		
	}
	
	
});