if(typeof com == 'undefined') com = {};
if(typeof com.alpinebikes == 'undefined') com.alpinebikes = {};
if(typeof com.alpinebikes.classes == 'undefined') com.alpinebikes.classes = {};

com.alpinebikes.classes.MailingList = function()
{
	var mailing = document.getElementById('mailing-list');
	Shine.addElementClass(mailing, 'js-enabled');
	this.formLabel = mailing.getElementsByTagName('label')[0];
	this.formInput = document.getElementById('mailinglist');
	Shine.addEventHandler(this.formLabel, 'click', { host: this, handler: this.hideLabel });
	Shine.addEventHandler(this.formInput, 'click', { host: this, handler: this.hideLabel });
	Shine.addEventHandler(this.formInput, 'blur', { host: this, handler: this.showLabel });
}
com.alpinebikes.classes.MailingList.prototype.hideLabel = function()
{
	this.formLabel.style.display = 'none';
	this.formInput.focus();
}
com.alpinebikes.classes.MailingList.prototype.showLabel = function()
{
	if(this.formInput.value == '')
	{
		this.formLabel.style.display = 'block';
	}					
}



com.alpinebikes.classes.Carousel = function()
{
	this.productsVisible = 3;
	if(!(this.container = document.getElementById('products-carousel'))) return;
	// products container
	if(!(this.products = Shine.getElementsByClass(this.container, 'div', 'products-row')[0])) return;
	// number of products within container
	var productsCount = this.products.getElementsByTagName('dl').length;
	if(productsCount <= this.productsVisible) return;
	Shine.addElementClass(this.container, 'js-enabled');
	
	this.carousel = Shine.createHTMLElement('div');
	Shine.addElementClass(this.carousel, 'carousel');
	this.pageScroll = Shine.createHTMLElement('span');
	Shine.addElementClass(this.pageScroll, 'pageScroll');
	this.cursor = Shine.createHTMLElement('span');
	Shine.addElementClass(this.cursor, 'cursor');
	cursorLeft = Shine.createHTMLElement('span');
	Shine.addElementClass(cursorLeft, 'cursor-left');
	cursorRight = Shine.createHTMLElement('span');
	Shine.addElementClass(cursorRight, 'cursor-right');
	this.shiftLeft = Shine.createHTMLElement('span');
	Shine.addElementClass(this.shiftLeft, 'shifter');
	Shine.addElementClass(this.shiftLeft, 'left');
	this.shiftRight = Shine.createHTMLElement('span');
	Shine.addElementClass(this.shiftRight, 'shifter');
	Shine.addElementClass(this.shiftRight, 'right');
	this.carousel.appendChild(this.pageScroll);
	this.cursor.appendChild(cursorLeft);
	this.cursor.appendChild(cursorRight);
	this.carousel.appendChild(this.cursor);
	this.carousel.appendChild(this.shiftLeft);
	this.carousel.appendChild(this.shiftRight);
	this.container.appendChild(this.carousel);

	if(productsCount <= this.productsVisible) return;
	// size of each product to shift when pressing left/right arrow buttons
	this.productShift = this.container.offsetWidth / this.productsVisible;
	var margin = this.products.getElementsByTagName('dl')[0].offsetWidth - this.productShift;
	// maximum dragable width of product container
	this.productsRange = this.productShift * productsCount - this.container.offsetWidth;// - margin;
	
	this.cursorArea = 418;
	var cursorSize = Math.round(this.cursorArea * this.productsVisible / productsCount);
	this.minCursorX = this.cursorX = 30;
	this.maxCursorX = this.cursorArea - cursorSize + this.minCursorX;
	this.cursorRange = this.maxCursorX - this.minCursorX;
	this.cursor.style.width = cursorSize + 'px';
	cursorLeft.style.width = cursorSize - cursorRight.offsetWidth + 'px';
	this.productsX = 0;

	Shine.addEventHandler(this.cursor, 'mousedown', {host: this, handler: this.cursorClick});
	Shine.addEventHandler(document, 'mouseup', {host: this, handler: this.cursorRelease});
	Shine.addEventHandler(document, 'mousemove', {host: this, handler: this.cursorDrag});
	Shine.addEventHandler(this.shiftLeft, 'click', {host: this, handler: this.shiftProducts});
	Shine.addEventHandler(this.shiftRight, 'click', {host: this, handler: this.shiftProducts});
	Shine.addEventHandler(this.pageScroll, 'click', {host: this, handler: this.shiftPages});
}
/* shift products left or right page by page */
com.alpinebikes.classes.Carousel.prototype.shiftPages = function(Shine, sender, ev, data)
{
	this.mouseX = this.getMouseX(ev);

	var cursorLeft = 0;
	var obj = this.cursor;
	if(obj.offsetParent)
	{
		do {
			cursorLeft += obj.offsetLeft;
		} while (obj = obj.offsetParent);
	}
	if(this.mouseX < cursorLeft)
	{
		this.productsX += this.container.offsetWidth;
		if(this.productsX > 0) this.productsX = 0;
	}
	else
	{
		this.productsX -= this.container.offsetWidth;
		if(this.productsX < -this.productsRange) this.productsX = -this.productsRange;
	}
	this.refreshProducts();
}
/* shift products left or right one by one */
com.alpinebikes.classes.Carousel.prototype.shiftProducts = function(Shine, sender, ev, data)
{
	if(Shine.hasElementClass(sender, 'left'))
	{
		this.productsX += this.productShift;
		if(this.productsX > 0) this.productsX = 0;
	}
	else
	{
		this.productsX -= this.productShift;
		if(this.productsX < -this.productsRange) this.productsX = -this.productsRange;
	}
	this.refreshProducts();
}
/* return the X position of the mouse on the screen */
com.alpinebikes.classes.Carousel.prototype.getMouseX = function(event)
{
	return (event.clientX ? event.clientX : event.pageX);
}
/* initialise min and max mouse positions starting draging the cursor */
com.alpinebikes.classes.Carousel.prototype.cursorClick = function(Shine, sender, ev, data)
{
	this.clicked = true;
	this.mouseX = this.getMouseX(ev);
	this.minMouseX = this.mouseX - (this.cursorX - this.minCursorX);
	this.maxMouseX = this.minMouseX + this.cursorRange;
}
/* reset the min and max mouse positions once cursor released */
com.alpinebikes.classes.Carousel.prototype.cursorRelease = function()
{
	if(!this.clicked) return;
	this.clicked = false;
	this.minMouseX = this.maxMouseX = 0;
}
/* calculate the new position of the cursor while dragging */
com.alpinebikes.classes.Carousel.prototype.cursorDrag = function(Shine, sender, ev, data)
{
	if(!this.clicked) return;
	this.mouseX = this.getMouseX(ev);
	if(this.mouseX < this.minMouseX)
	{
		this.cursorX = this.minCursorX;
	}
	else if(this.mouseX > this.maxMouseX)
	{
		this.cursorX = this.maxCursorX;
	}
	else
	{
		this.cursorX = this.minCursorX + (this.mouseX - this.minMouseX);
	}
	this.refreshCarousel();
}
/* refreshes the position of products, calculate new position of cursor and refreshes it */
com.alpinebikes.classes.Carousel.prototype.refreshProducts = function()
{
	this.products.style.left = this.productsX + 'px';
	if(this.productsX == -this.productsRange)
	{
		this.cursorX = this.maxCursorX;
	}
	else
	{
		var percent = (-this.productsX / this.productsRange);
		this.cursorX = this.minCursorX + this.cursorRange * percent;
	}
	this.cursor.style.left = this.cursorX + 'px';
}
/* refreshes the position of cursor, calculate new position of products and refreshes them */
com.alpinebikes.classes.Carousel.prototype.refreshCarousel = function()
{
	this.cursor.style.left = this.cursorX + 'px';
	var percent = ((this.cursorX - this.minCursorX) / this.cursorRange);
	this.productsX = -this.productsRange * percent;
	this.products.style.left = this.productsX + 'px';
}



com.alpinebikes.classes.StartShopping = function()
{
	this.container = document.getElementById('shop-nav');
	Shine.addElementClass(this.container, 'js-enabled');
	var dts = this.container.getElementsByTagName('dt');
	for(var i = 0, size = dts.length ; i < size ; i++)
	{
		var dt = dts[i];
		if((a = dt.getElementsByTagName('a')[0]))
		{
			dt.innerHTML = a.innerHTML;
		}
		if(i == 0)
		{
			Shine.addElementClass(dt.parentNode, 'active');
			this.active = dt;
		}
		var arrow = Shine.createHTMLElement('span');
		Shine.addElementClass(arrow, 'arrow');
		dt.appendChild(arrow);
		
		Shine.addEventHandler(dt, 'click', {host: this, handler: this.toggle});
	}
}
com.alpinebikes.classes.StartShopping.prototype.toggle = function(Shine, sender, ev, data)
{
	if(this.active == sender)
	{
		Shine.removeElementClass(sender.parentNode, 'active');
		this.active = null;
		return;
	}
	if(this.active)
	{
		Shine.removeElementClass(this.active.parentNode, 'active');
	}
	Shine.addElementClass(sender.parentNode, 'active');
	this.active = sender;	
}