/****************************
 *Written by : Jared Barrus
 *Date : Dec 2009
 *
 *This class creates a scrolling div for products.
 *
 *options:
 *
 */
var pScroll = new Class({
	Implements : Options,
	options:{
		productHeight	:	142,
		productWidth	:	186,
		numberOfProducts:	4,
		scrollFX		:	Fx.Transitions.Quart.easeInOut,
		duration		:	1000,
		parentDiv		:	null,
		orientation		:	'horizontal',
		url				:	location.href,
		func			:	'getRecentlyViewed',
		title			:	'',
		doAnimation		:	false,
		viewAllLink		:	''
	},
	contentTable	:	null,
	content			:	null,
	pagination		:	null,
	paginationBullets:	null,
	products		:	null,
	headerTable		:	null,
	leftArrowTop	:	null,
	leftArrow		:	null,
	rightArrowTop	:	null,
	rightArrow		:	null,
	viewAllLink		:	null,
	startingIndex	:	0,
	margin			:	0,
	generatedLIndex	:	0,
	generatedRIndex	:	0,
	totalLength		:	0,
	activePage		:	0,
	initialize:function(options){
		if(!options.parentDiv)
		{
			alert('You must supply the parentDiv ID!');
			return false;
		}
		this.setOptions(options);
//		this.totalLength = this.options.numberOfProducts*this.options.productWidth + (5*this.options.numberOfProducts);
		if(this.options.orientation=='horizontal')
		{
			this.totalLength = this.options.numberOfProducts*this.options.productWidth;
		}
		else
		{
			this.totalLength = this.options.numberOfProducts*this.options.productHeight;
		}
		this.setProducts('func='+this.options.func);
		this.setupPScroll();
		this.contentTable.set('tween',{
			duration	:	this.options.duration,
			transition	:	this.options.scrollFX
		});
	},
	setupPScroll:function(){
		if(this.options.orientation=='horizontal')
		{
			var table = new Element('table',{
				'cellspacing':0,'cellpadding':0,'align':'right','width':(this.totalLength + 48)+'px','style':'margin-bottom:10px; margin-left:10px; clear:both;','align':'left'
			}).inject(this.options.parentDiv);
			var tbody = new Element('tbody').inject(table);
			var tr = new Element('tr').inject(tbody);
			var td = new Element('td',{
				'colspan':10
			}).inject(tr);

			this.headerTable = new Element('table',{
				'class':'productSubSectionHeader'
			}).inject(td);

			var headerTbody = new Element('tbody').inject(this.headerTable);
			var headerTr = new Element('tr').inject(headerTbody);
			new Element('td',{'html':this.options.title}).inject(headerTr);
			this.paginationBullets = new Element('td',{'class':'paginationDots'}).inject(headerTr);
			this.pagination = new Element('td',{'class':'viewAllLink'}).inject(headerTr);

			tr = new Element('tr').inject(tbody);
			this.leftArrowTop = new Element('td',{
				'class':'topCapPieceLeft',
				'style':'height:4px;',
				'html':'<img src="images/pScrollHorizTop.jpg"/>',
				'events':{
					'click':this.scroll.bind(this,-1),
					'mouseover':this.hover.bind(this,[-1, 1]),
					'mouseout':this.hover.bind(this,[-1, 0])
				}
			}).inject(tr);
			td = new Element('td',{
				'style':'width:'+this.totalLength+'px;',
				'rowspan':2,
				'class':'scrollingProductContainer'
			}).inject(tr);
			div = new Element('div',{'style':'overflow:hidden;width:'+this.totalLength+'px;'}).inject(td);
			this.contentTable = new Element('table',{
				'class':'productScrollTable'
			}).inject(div);
			var tbody2 = new Element('tbody').inject(this.contentTable);
			this.content = new Element('tr').inject(tbody2);
			this.rightArrowTop = new Element('td',{
				'class':'topCapPieceRight',
				'style':'height:4px;',
				'html':'<img src="images/pScrollHorizTop.jpg"/>',
				'events':{
					'click':this.scroll.bind(this,1),
					'mouseover':this.hover.bind(this,[1, 1]),
					'mouseout':this.hover.bind(this,[1, 0])
				}
			}).inject(tr);
			tr = new Element('tr').inject(tbody);
			this.leftArrow = new Element('td',{
				'class':'horizontalPScroll',
				'style':'padding-right:5px;',
				'events':{
					'click':this.scroll.bind(this,-1),
					'mouseover':this.hover.bind(this,[-1, 1]),
					'mouseout':this.hover.bind(this,[-1, 0])
				}
			}).inject(tr);
			new Element('div',{
				'class':'leftArrow'
			}).inject(this.leftArrow);
			this.rightArrow = new Element('td',{
				'class':'horizontalPScroll',
				'style':'padding-right:5px;',
				'events':{
					'click':this.scroll.bind(this,1),
					'mouseover':this.hover.bind(this,[1, 1]),
					'mouseout':this.hover.bind(this,[1, 0])
				}
			}).inject(tr);
			new Element('div',{
				'class':'rightArrow'
			}).inject(this.rightArrow);
		}
		else
		{
			var table = new Element('table',{
				'cellspacing':0,'cellpadding':0,'align':'center','height':(this.totalLength+100)+'px','style':'clear:both;'
			}).inject(this.options.parentDiv);
			var tbody = new Element('tbody').inject(table);
			var tr = new Element('tr').inject(tbody);
			var td = new Element('td').inject(tr);
			var div = new Element('div',{
				'class':'verticalHeaderLine',
				'html':this.options.title
			}).inject(td);
			this.pagination = new Element('div',{
				'style':'text-align:center;',
				'html':'&nbsp;'
			}).inject(td);
			this.viewAllLink = new Element('div',{
				'class':'verticalViewAllProducts',
				'html':'<a href="'+this.options.viewAllLink+'">View All Products</a>'
			}).inject(td);

			this.leftArrow = new Element('tr').inject(tbody);
			new Element('td',{
				'html':'<div class="arrowButton"></div>',
				'events':{
					'click':this.scroll.bind(this,-1),
					'mouseover':this.hover.bind(this,[-1, 1]),
					'mouseout':this.hover.bind(this,[-1, 0])
				}
			}).inject(this.leftArrow);
			tr = new Element('tr').inject(tbody);
			td = new Element('td').inject(tr);
			div = new Element('div',{'class':'verticalScrollProductContainer','style':'height:'+(this.totalLength)+'px;'}).inject(td);
			this.contentTable = new Element('table',{
				'cellspacing':0,'cellpadding':0,'align':'right','style':'margin-bottom:10px; clear:both; float:none;'
			}).inject(div);
			this.content = new Element('tbody').inject(this.contentTable);
			this.rightArrow = new Element('tr').inject(tbody);
			new Element('td',{
				'class':'arrowButton',
				'html':'<div class="arrowButtonBottom"></div>',
				'events':{
					'click':this.scroll.bind(this,1),
					'mouseover':this.hover.bind(this,[1, 1]),
					'mouseout':this.hover.bind(this,[1, 0])
				}
			}).inject(this.rightArrow);
		}
	},
	scroll:function(direction){
		this.activePage+=direction;
		var tempIndex = this.startingIndex;
		var tempMargin = this.margin;
		this.startingIndex+=(direction*this.options.numberOfProducts);
		if(this.options.orientation == "vertical")
		{
//			this.margin = 1*(this.margin + (- direction * (this.options.numberOfProducts * this.options.productHeight )));
			this.margin = 1*(this.margin + (- direction * (this.totalLength )));
		}
		else
		{
//			this.margin = 1*(this.margin + (- direction * (this.options.numberOfProducts * this.options.productWidth + (20 + this.options.numberOfProducts*5 - 5))));
			this.margin = 1*(this.margin + (- direction * (this.totalLength )));
		}
		if(this.startingIndex >= this.products.length || this.startingIndex < 0)
		{

			this.startingIndex = tempIndex;
			this.margin = tempMargin;
			return false;
		}
		if((this.startingIndex < this.generatedLIndex) || (this.startingIndex > this.generatedRIndex))
			this.newContent();
		else
			this.setPagination();

		if(this.options.orientation == "vertical")
		{
			if(this.options.doAnimation)
				this.contentTable.tween('margin-top', 1*this.margin);
			else
				this.contentTable.style.marginTop = 1*this.margin;
		}
		else
		{
			if(this.options.doAnimation)
				this.contentTable.tween('margin-left', 1*this.margin);
			else
				this.contentTable.style.marginLeft = 1*this.margin;
		}
	},
	setPage:function(pageNumber){
		var currentPage = this.activePage;
		var direction = (pageNumber - currentPage)/Math.abs(pageNumber - currentPage);
		while(this.activePage != pageNumber)
		{
			this.scroll(direction);
		}
	},
	hover:function(direction, on){
		if(this.options.orientation=='horizontal')
		{
			if(direction < 0)
			{
				if(on==1 && !this.leftArrow.getElement('div.leftArrowInactive'))
				{
					this.leftArrowTop.getElement('img').src = 'images/pScrollHorizTopHover.jpg';
					this.leftArrow.className = 'horizontalPScrollHover';
				}
				else
				{
					this.leftArrowTop.getElement('img').src = 'images/pScrollHorizTop.jpg';
					this.leftArrow.className = 'horizontalPScroll';
				}
			}
			else
			{
				if(on==1 && !this.rightArrow.getElement('div.rightArrowInactive'))
				{
					this.rightArrowTop.getElement('img').src = 'images/pScrollHorizTopHover.jpg';
					this.rightArrow.className = 'horizontalPScrollHover';
				}
				else
				{
					this.rightArrowTop.getElement('img').src = 'images/pScrollHorizTop.jpg';
					this.rightArrow.className = 'horizontalPScroll';
				}
			}
		}
		else
		{
			if(direction < 0)
			{
				if(on==1 && !this.leftArrow.getElement('div.arrowButtonInactive'))
				{
					if(this.leftArrow.getElement('div.arrowButton'))
						this.leftArrow.getElement('div.arrowButton').className = 'arrowButtonHover';
				}
				else
				{
					if(this.leftArrow.getElement('div.arrowButtonHover'))
						this.leftArrow.getElement('div.arrowButtonHover').className = 'arrowButton';
				}
			}
			else
			{
				if(on==1 && !this.rightArrow.getElement('div.arrowButtonBottomInactive'))
				{
					if(this.rightArrow.getElement('div.arrowButtonBottom'))
						this.rightArrow.getElement('div.arrowButtonBottom').className = 'arrowButtonBottomHover';
				}
				else
				{
					if(this.rightArrow.getElement('div.arrowButtonBottomHover'))
						this.rightArrow.getElement('div.arrowButtonBottomHover').className = 'arrowButtonBottom';
				}
			}
		}
	},
	setProducts:function(func, products){
		if(func)
		{
			new Request({
				url:this.options.url,
				method:'post',
				onComplete:function(response){
					this.products = JSON.decode(response);

					if(this.products.length==0)
					{
						$(this.options.parentDiv).style.display='none';
					}
					else if(this.products.length <= this.options.numberOfProducts)
					{
						this.leftArrow.style.display='none';
						this.rightArrow.style.display='none';
						this.pagination.style.display='none';

						if(this.options.orientation=='vertical')
						{
//							this.viewAllLink.style.display='none';
							this.contentTable.getParent('.verticalScrollProductContainer').style.height = this.products.length*this.options.productHeight;
							this.contentTable.getParent('.verticalScrollProductContainer').getParent('table').style.height = this.products.length*this.options.productHeight+100;
						}
						else
						{
							this.leftArrowTop.style.display='none';
							this.rightArrowTop.style.display='none';
							this.paginationBullets.style.display = 'none';
							this.contentTable.getParent('div').style.width = this.products.length*this.options.productWidth;
							this.contentTable.getParent('div').getParent('td.scrollingProductContainer').style.width = this.products.length*this.options.productWidth;
							this.headerTable.style.width = this.products.length*this.options.productWidth;
							this.contentTable.getParent('table').width = this.products.length*this.options.productWidth;
						}
					}
					this.newContent();
				}.bind(this)
			}).send(func);
		}
		else
		{
			this.products = products;
		}
	},
	setPagination:function(){
		var pageIndex = (this.startingIndex+this.options.numberOfProducts)/this.options.numberOfProducts;
		var numpages = Math.ceil(this.products.length/this.options.numberOfProducts);
		if(this.options.orientation=='horizontal')
		{
			this.paginationBullets.set('html','');
//			this.pagination.set('html','Page '+(pageIndex+' of '+numpages+' <a href="'+this.options.viewAllLink+'">View All Products</a>'));
			this.pagination.set('html','<a href="'+this.options.viewAllLink+'">View All Products</a>');
			var bulletString = '';
			for(var i=0; i<(numpages*1);i++)
			{
				if((i+1)==pageIndex)
				{
					new Element('span',{'class':'active','html':' &bull; '}).inject(this.paginationBullets);
				}
				else
				{
					new Element('span',{
						'html':' &bull; ',
						'events':{'click':this.setPage.bind(this,i)}
					}).inject(this.paginationBullets);
				}
			}
			if(pageIndex == 1)
			{
				if(this.rightArrow.getElement('div.rightArrowInactive'))
					this.rightArrow.getElement('div.rightArrowInactive').className='rightArrow';
				this.leftArrow.getElement('div.leftArrow').className='leftArrowInactive';
			}
			else if(pageIndex == numpages)
			{
				if(this.leftArrow.getElement('div.leftArrowInactive'))
					this.leftArrow.getElement('div.leftArrowInactive').className='leftArrow';
				this.rightArrow.getElement('div.rightArrow').className='rightArrowInactive';
			}
			else
			{
				if(this.leftArrow.getElement('div.leftArrowInactive'))
					this.leftArrow.getElement('div.leftArrowInactive').className='leftArrow';
				if(this.rightArrow.getElement('div.rightArrowInactive'))
					this.rightArrow.getElement('div.rightArrowInactive').className='rightArrow';
			}
		}
		else
		{
			this.pagination.set('html','Page '+(pageIndex+' of '+numpages));
			if(pageIndex == 1)
			{
				if(this.rightArrow.getElement('div.arrowButtonBottomInactive'))
					this.rightArrow.getElement('div.arrowButtonBottomInactive').className='arrowButtonBottom';
				if(this.leftArrow.getElement('div.arrowButton'))
				{
					var ele = this.leftArrow.getElement('div.arrowButton');
				}
				else
				{
					var ele = this.leftArrow.getElement('div.arrowButtonHover');
				}
				ele.className='arrowButtonInactive';
			}
			else if(pageIndex == numpages)
			{
				if(this.leftArrow.getElement('div.arrowButtonInactive'))
					this.leftArrow.getElement('div.arrowButtonInactive').className='arrowButton';
				if(this.rightArrow.getElement('div.arrowButtonBottom'))
				{
					var ele = this.rightArrow.getElement('div.arrowButtonBottom');
				}
				else
				{
					var ele = this.rightArrow.getElement('div.arrowButtonBottomHover');
				}
				ele.className='arrowButtonBottomInactive';
			}
			else
			{
				if(this.leftArrow.getElement('div.arrowButtonInactive'))
					this.leftArrow.getElement('div.arrowButtonInactive').className='arrowButton';
				if(this.rightArrow.getElement('div.arrowButtonBottomInactive'))
					this.rightArrow.getElement('div.arrowButtonBottomInactive').className='arrowButtonBottom';
			}
		}

	},
	newContent:function(){
		var upperBound = ((this.startingIndex + this.options.numberOfProducts)>this.products.length)?this.products.length:(this.startingIndex + this.options.numberOfProducts);
		var productAddedCount = 0;
		for(var i=this.startingIndex; i < upperBound; i++)
		{
			this.buildProduct(this.products[i]).inject(this.content);
			if(i < this.generatedLIndex)this.generatedLIndex = i;
			if(i > this.generatedRIndex)this.generatedRIndex = i;
			productAddedCount++;
		}
		if(this.options.orientation=='horizontal')
		{
			var currWidth = this.contentTable.style.width.substring(0,this.contentTable.style.width.length-2)*1;
			this.contentTable.style.width = currWidth + (productAddedCount*this.options.productWidth);
		}
		else
		{
			var currHeight = this.contentTable.style.height.substring(0,this.contentTable.style.height.length-2)*1;
			this.contentTable.style.height = currHeight + (productAddedCount*this.options.productHeight);
		}
		this.setPagination();
	},
	buildProduct:function(productInfo){
		var className = (this.options.orientation=='vertical')?'verticalPScroll productContainer2':'productContainerScroll';
		var prod = new Element('td',{
			'id':'pScrollProd_'+productInfo.id,
			'class':className,
			'height':this.options.productHeight+'px'
		});
		var a = new Element('a',{
			'href':productInfo.href
		}).inject(prod);
		new Element('img',{
			'border':0,
			'src':productInfo.image,
			'alt':productInfo.alt
		}).inject(a);
		//only show the manufacturer name if it is contained in the product name, or if it is a bundle
		if((productInfo.productName.indexOf(productInfo.manufacturer) > -1) || (productInfo.id.indexOf('b') > -1))
		{
			new Element('div',{
				'class':'popularTitle',
				'html':productInfo.manufacturer
			}).inject(prod);
		}
		else//otherwise show the productName here
		{
			new Element('div',{
				'class':'popularTitle',
				'html':productInfo.productName
			}).inject(prod);
		}
		if((productInfo.productName.indexOf(productInfo.manufacturer) > -1) && (productInfo.id.indexOf('b') == -1))//dont show for bundles
		{
			new Element('span',{
				'class':'popularSubTitle',
				'html':productInfo.productName.replace(productInfo.manufacturer,'')
			}).inject(prod);
		}
		var div = new Element('div',{
			'class':'ratingAndCost'
		}).inject(prod);
		new Element('div',{
			'html':productInfo.rating
		}).inject(div);
//		new Element('img',{
//			'width':'60px',
//			'style':'margin:3px 0pt -3px -5px;',
//			'src':productInfo.rating
//		}).inject(div);
		new Element('text',{
			'html':'$'+productInfo.price
		}).inject(div);
		if(this.options.orientation=='vertical')
		{
			var temp = new Element('tr');
			prod.inject(temp);
			prod = temp;
		}
		return prod;
	}
});