// catalogue.js
/* 
 * This is the main javascript library that is used for generating the product
 * catalogue.
 */

window.addEvent('domready', function() {
	$('closebutton').addEvent('click',function(){
		closeCompare();
	});
	
	$('compareButton').addEvent('click',function(){
		var hasChecked = false;
		var product1 = null;
		var product2 = null;
		var product3 = null;
		var compareCount = 0;
	
		$$('.productCheckbox').each(function(box){
			if(box.getProperty('checked') == true){
				//Make sure that the background/styles aren't displayed unless if there was a product selected.
				$('compareBackground').setStyle('display', 'block');
				$('productWrapper').setStyle('display', 'block');
				
				hasChecked = true;
				//console.log('Selected: ' + box.id);
				//box.id.substring(6, box.id.length);
				//new Ajax('/product/detail?id=' + box.id.substring(6, box.id.length), {
				new Ajax('/product/detail?id=' + box.id, {
					method: 'get',
					onComplete: function(){			
						compareCount++;
						var productObj = Json.evaluate(this.response.text);
						var currentProd = productObj.product;
						
						if(compareCount == 1){
							$('product1').addClass('product');
							$('product1').setHTML('<img src=\"' + currentProd.imgPath + '_m.jpg\" />'
								+'<table>'
								+ '<tr><td class="detailHeading">Article #:</td><td>&nbsp;&nbsp;</td><td id="detailArticle">' + currentProd.productCode + '</td></tr>'
								+ '<tr><td class="detailHeading">Brand:</td><td>&nbsp;&nbsp;</td><td id="detailBrand">' + currentProd.brandName + '</td></tr>'
								+ '<tr><td class="detailHeading">Product Line:</td><td>&nbsp;&nbsp;</td><td id="detailNumber">' + currentProd.productNum + '</td></tr>'
								+ '<tr><td class="detailHeading">Category:</td><td>&nbsp;&nbsp;</td><td id="detailCategory">' + currentProd.category + '</td></tr>'
								+ '<tr><td class="detailHeading">Finishes:</td><td>&nbsp;&nbsp;</td><td id="detailFinish">' + currentProd.finishID + '</td></tr>'
								+ '<tr><td class="detailHeading">Sizes:</td><td>&nbsp;&nbsp;</td><td id="detailSize">' + currentProd.size + '</td></tr>'
								+ '<tr><td class="detailHeading">Colours:</td><td>&nbsp;&nbsp;</td><td id="detailColour">' + currentProd.colour + '</td></tr>'
								+ '<tr><td class="detailHeading">Description:</td><td>&nbsp;&nbsp;</td><td id="detailDesc">' + currentProd.desc + '</td></tr>'
								+ '<tr><td colspan="3"><p><a href="quote.jsp?article=' + currentProd.productCode + '">Inquire</a> or <a href="contact.jsp">call</a> for pricing and availability.</p></td></tr>'
								+ '<tr><td colspan="3"><span id="printVersion"><a href="javascript:openPrintLink(\'' + currentProd.id + '\')">Printable Version</a><img alt="printable version" src="images/printer.gif"/></span></td></tr>'
								+ '</table>');
							$('product2').removeClass('product');
							$('product3').removeClass('product');
							$('productPositioner').setStyle('width','283px');
						}else if(compareCount == 2){
							$('product2').addClass('product');
							$('product2').setHTML('<img src=\"' + currentProd.imgPath + '_m.jpg\" />'
								+'<table>'
								+ '<tr><td class="detailHeading">Article #:</td><td>&nbsp;&nbsp;</td><td id="detailArticle">' + currentProd.productCode + '</td></tr>'
								+ '<tr><td class="detailHeading">Brand:</td><td>&nbsp;&nbsp;</td><td id="detailBrand">' + currentProd.brandName + '</td></tr>'
								+ '<tr><td class="detailHeading">Product Line:</td><td>&nbsp;&nbsp;</td><td id="detailNumber">' + currentProd.productNum + '</td></tr>'
								+ '<tr><td class="detailHeading">Category:</td><td>&nbsp;&nbsp;</td><td id="detailCategory">' + currentProd.category + '</td></tr>'
								+ '<tr><td class="detailHeading">Finishes:</td><td>&nbsp;&nbsp;</td><td id="detailFinish">' + currentProd.finishID + '</td></tr>'
								+ '<tr><td class="detailHeading">Sizes:</td><td>&nbsp;&nbsp;</td><td id="detailSize">' + currentProd.size + '</td></tr>'
								+ '<tr><td class="detailHeading">Colours:</td><td>&nbsp;&nbsp;</td><td id="detailColour">' + currentProd.colour + '</td></tr>'
								+ '<tr><td class="detailHeading">Description:</td><td>&nbsp;&nbsp;</td><td id="detailDesc">' + currentProd.desc + '</td></tr>'
								+ '<tr><td colspan="3"><p><a href="quote.jsp?article=' + currentProd.productCode + '">Inquire</a> or <a href="contact.jsp">call</a> for pricing and availability.</p></td></tr>'
								+ '<tr><td colspan="3"><span id="printVersion"><a href="javascript:openPrintLink(\'' + currentProd.id + '\')">Printable Version</a><img alt="printable version" src="images/printer.gif"/></span></td></tr>'
								+ '</table>');
							$('productPositioner').setStyle('width','566px');
							$('product3').removeClass('product');
						}else{
							$('product3').addClass('product');
							$('product3').setHTML('<img src=\"' + currentProd.imgPath + '_m.jpg\" />'
								+'<table>'
								+ '<tr><td class="detailHeading">Article #:</td><td>&nbsp;&nbsp;</td><td id="detailArticle">' + currentProd.productCode + '</td></tr>'
								+ '<tr><td class="detailHeading">Brand:</td><td>&nbsp;&nbsp;</td><td id="detailBrand">' + currentProd.brandName + '</td></tr>'
								+ '<tr><td class="detailHeading">Product Line:</td><td>&nbsp;&nbsp;</td><td id="detailNumber">' + currentProd.productNum + '</td></tr>'
								+ '<tr><td class="detailHeading">Category:</td><td>&nbsp;&nbsp;</td><td id="detailCategory">' + currentProd.category + '</td></tr>'
								+ '<tr><td class="detailHeading">Finishes:</td><td>&nbsp;&nbsp;</td><td id="detailFinish">' + currentProd.finishID + '</td></tr>'
								+ '<tr><td class="detailHeading">Sizes:</td><td>&nbsp;&nbsp;</td><td id="detailSize">' + currentProd.size + '</td></tr>'
								+ '<tr><td class="detailHeading">Colours:</td><td>&nbsp;&nbsp;</td><td id="detailColour">' + currentProd.colour + '</td></tr>'
								+ '<tr><td class="detailHeading">Description:</td><td>&nbsp;&nbsp;</td><td id="detailDesc">' + currentProd.desc + '</td></tr>'
								+ '<tr><td colspan="3"><p><a href="quote.jsp?article=' + currentProd.productCode + '">Inquire</a> or <a href="contact.jsp">call</a> for pricing and availability.</p></td></tr>'
								+ '<tr><td colspan="3"><span id="printVersion"><a href="javascript:openPrintLink(\'' + currentProd.id + '\')">Printable Version</a><img alt="printable version" src="images/printer.gif"/></span></td></tr>'
								+ '</table>');
							$('productPositioner').setStyle('width','849px');
						}
					}
				}).request();
			}
		});
	
		
		//Hide and reset the compare window	
		$('compareBackground').addEvent('click', function(){
			closeCompare();
		});

	});
	
	//Populate the accordion with the product listings
	if($('sort_brand').getProperty('checked') == true){
		var url = "/product/lookup?sort=" + $('sort_brand').value;
	}else{
		var url = "/product/lookup?sort=" + $('sort_category').value;	
	}
	
	new Ajax(url, {
		method: 'get',
		onComplete: function() {
			$('accordion').setHTML(this.response.text);

			//Set the thumbnail event for the products
			setThumbnailEvent();
			
			//Create the accordion category list
			refreshAccordion();
		} 
	}).request();
	
	//Category Sorting Mechanism
	var sort_category = $('sort_category');
	sort_category.addEvent('click',function(){
		var sorturl = "/product/lookup?sort=" + sort_category.value;
		new Ajax(sorturl, {
			method: 'get',
			onComplete: function(){
				$('accordion').setHTML(this.response.text);
				
				//Refresh the thumbnail event for the products
				setThumbnailEvent();
				
				//Refresh the accordion category list
				refreshAccordion();
			}
		}).request();
	});
	
	//Brand Sorting Mechanism
	var sort_brand = $('sort_brand');
	sort_brand.addEvent('click',function(){
		var sorturl = "/product/lookup?sort=" + sort_brand.value;
		new Ajax(sorturl, {
			method: 'get',
			onComplete: function(){
				$('accordion').setHTML(this.response.text);
				
				//Refresh the thumbnail event for the products
				setThumbnailEvent();
				
				//Refresh the accordion category list
				refreshAccordion();
			}
		}).request();
	});
	
	//Set up the print-version popup
	/*
	var printLink = $('printVersion');
	printLink.addEvent('click',function(){
		window.open('print.jsp?id=' + $('selectedProductID').value,'Italyca Hardware - Suppliers of Fine European Hardware','width=300,height=400,resizeable=no,menubar=1');
		
	});
	*/
	
	
	//Product Lookup Mechanism
	/*
	var productLookup = $('productLookupSubmit');
	productLookup.addEvent('click',function(){
		alert('Lookup up product ' + $('productLookup').value);
	});
	*/
});

//Create the accordion category list
function refreshAccordion(){
	var accordion = new Accordion('h3.atStart', 'div.atStart', {
				opacity: false,
				fixedHeight: 213,
				
	       onActive: function(toggler, element){
				//element.setStyle('overflow', 'auto');
				element.setStyle('overflow-y', 'scroll');
				toggler.setStyle('background', 'url("images/minus.jpg")');
	    	},
	
	       onBackground: function(toggler, element){
				 //element.setStyle('overflow', 'hidden');
				 element.setStyle('overflow-y', 'scroll');
				 toggler.setStyle('background', 'url("images/plus.jpg")');
			}
	}, $('accordion'));
}

function openPrintLink(productID){
	window.open('print.jsp?id=' + productID,'printversion','width=450,resizeable=no,menubar=1');
}


//Set the click event/effects on the thumbnails
function setThumbnailEvent(){
	
	$$('.productCheckbox').removeEvents();
	$$('.productCheckbox').addEvent('click',function(product){
		var checkboxes = $$('.productCheckbox');
		var counter = 0;
		
		checkboxes.each(function(box){
			if(box.getProperty('checked') == true){
				counter++;
			}
		});
		
		if(counter > 3){
			alert('Sorry, you have selected more than 3 products to compare.');
			//$(product.target.id).setProperty('checked',false);
			$(product.currentTarget).setProperty('checked',false);
		}
	});
	
	
	var productDetailFX = new Fx.Style('productDetailWrapper', 'opacity',{duration: 850});
	var productThumbs = $$('.productThumbContent');	//.productThumbContent
	productThumbs.each(function(thumb){
		thumb.addEvent('click',function(){
			$('selectedProductID').value = thumb.id;
			var url = "/product/detail?id=" + thumb.id;
			new Ajax(url, {
				method: 'get',
				onComplete: function(){
					//this.response.text will return the ajax response
					var productObj = Json.evaluate(this.response.text);
					var product = productObj.product;
					
					//Mac Firefox bug to hide the scrollbar
					$$('div.atStart').setStyle('overflow-y', 'hidden');
					
					//Check for sizes
					if(product.size == null){
						var productSize = 'Please inquire for sizes.';
					}else{
						var productSize = product.size;
					}
					
					if(product.schematicImgPath == null || product.schematicImgPath.contains('noimage')){
						Slimbox.open(product.imgPath + '_l.jpg',
			                	'<div id="productDetailInfo"><table>'
								+ '<tr><td class="detailHeading">Article #:</td><td>&nbsp;&nbsp;</td><td id="detailArticle">' + product.productCode + '</td></tr>'
								+ '<tr><td class="detailHeading">Brand:</td><td>&nbsp;&nbsp;</td><td id="detailBrand">' + product.brandName + '</td></tr>'
								+ '<tr><td class="detailHeading">Product Line:</td><td>&nbsp;&nbsp;</td><td id="detailNumber">' + product.productNum + '</td></tr>'
								+ '<tr><td class="detailHeading">Category:</td><td>&nbsp;&nbsp;</td><td id="detailCategory">' + product.category + '</td></tr>'
								+ '<tr><td class="detailHeading">Finishes:</td><td>&nbsp;&nbsp;</td><td id="detailFinish">' + product.finishID + '</td></tr>'
								+ '<tr><td class="detailHeading">Sizes:</td><td>&nbsp;&nbsp;</td><td id="detailSize">' + productSize + '</td></tr>'
								+ '<tr><td class="detailHeading">Colours:</td><td>&nbsp;&nbsp;</td><td id="detailColour">' + product.colour + '</td></tr>'
								+ '<tr><td class="detailHeading">Description:</td><td>&nbsp;&nbsp;</td><td id="detailDesc">' + product.desc + '</td></tr>'
								+ '<tr><td colspan="3"><p><a href="quote.jsp?article=' + product.productCode + '">Inquire</a> or <a href="contact.jsp">call</a> for pricing and availability.</p></td></tr>'
								+ '<tr><td colspan="3"><span id="printVersion"><a href="javascript:openPrintLink(\'' + product.id + '\')">Printable Version</a> <img src="images/printer.gif" alt="printable version" /></span></td></tr>'
								+ '</table></div>');							
					}else{
						Slimbox.open([ [product.imgPath + '_l.jpg',
					                	'<div id="productDetailInfo"><table>'
										+ '<tr><td class="detailHeading">Article #:</td><td>&nbsp;&nbsp;</td><td id="detailArticle">' + product.productCode + '</td></tr>'
										+ '<tr><td class="detailHeading">Brand:</td><td>&nbsp;&nbsp;</td><td id="detailBrand">' + product.brandName + '</td></tr>'
										+ '<tr><td class="detailHeading">Product Line:</td><td>&nbsp;&nbsp;</td><td id="detailNumber">' + product.productNum + '</td></tr>'
										+ '<tr><td class="detailHeading">Category:</td><td>&nbsp;&nbsp;</td><td id="detailCategory">' + product.category + '</td></tr>'
										+ '<tr><td class="detailHeading">Finishes:</td><td>&nbsp;&nbsp;</td><td id="detailFinish">' + product.finishID + '</td></tr>'
										+ '<tr><td class="detailHeading">Sizes:</td><td>&nbsp;&nbsp;</td><td id="detailSize">' + productSize + '</td></tr>'
										+ '<tr><td class="detailHeading">Colours:</td><td>&nbsp;&nbsp;</td><td id="detailColour">' + product.colour + '</td></tr>'
										+ '<tr><td class="detailHeading">Description:</td><td>&nbsp;&nbsp;</td><td id="detailDesc">' + product.desc + '</td></tr>'
										+ '<tr><td colspan="3"><p><a href="quote.jsp?article=' + product.productCode + '">Inquire</a> or <a href="contact.jsp">call</a> for pricing and availability.</p></td></tr>'
										+ '<tr><td colspan="3"><span id="printVersion"><a href="javascript:openPrintLink(\'' + product.id + '\')">Printable Version</a> <img src="images/printer.gif" alt="printable version" /></span></td></tr>'
										+ '</table></div>'],
									[ product.schematicImgPath + '_sch.jpg', 
									  	'<div id="productDetailInfo"><table>'
										+ '<tr><td class="detailHeading">Article #:</td><td>&nbsp;&nbsp;</td><td id="detailArticle">' + product.productCode + '</td></tr>'
										+ '<tr><td class="detailHeading">Brand:</td><td>&nbsp;&nbsp;</td><td id="detailBrand">' + product.brandName + '</td></tr>'
										+ '<tr><td class="detailHeading">Product Line:</td><td>&nbsp;&nbsp;</td><td id="detailNumber">' + product.productNum + '</td></tr>'
										+ '<tr><td class="detailHeading">Category:</td><td>&nbsp;&nbsp;</td><td id="detailCategory">' + product.category + '</td></tr>'
										+ '<tr><td class="detailHeading">Finishes:</td><td>&nbsp;&nbsp;</td><td id="detailFinish">' + product.finishID + '</td></tr>'
										+ '<tr><td class="detailHeading">Sizes:</td><td>&nbsp;&nbsp;</td><td id="detailSize">' + productSize + '</td></tr>'
										+ '<tr><td class="detailHeading">Colours:</td><td>&nbsp;&nbsp;</td><td id="detailColour">' + product.colour + '</td></tr>'
										+ '<tr><td class="detailHeading">Description:</td><td>&nbsp;&nbsp;</td><td id="detailDesc">' + product.desc + '</td></tr>'
										+ '<tr><td colspan="3"><p><a href="quote.jsp?article=' + product.productCode + '">Inquire</a> or <a href="contact.jsp">call</a> for pricing and availability.</p></td></tr>'
										+ '<tr><td colspan="3"><span id="printVersion"><a href="javascript:openPrintLink(\'' + product.id + '\')">Printable Version</a> <img src="images/printer.gif" alt="printable version" /></span></td></tr>'
										+ '</table></div>'] ], 0);
					}
				}
			}).request();
		});
	});
}

function closeCompare(){
	$('compareBackground').setStyle('display', 'none');
	$('productWrapper').setStyle('display', 'none');
	$('product1').setHTML('');
	$('product1').removeClass('product');
	$('product2').setHTML('');
	$('product2').removeClass('product');
	$('product3').setHTML('');
	$('product3').removeClass('product');
	
	$$('.productCheckbox').each(function(box){
		if(box.getProperty('checked') == true){
			box.setProperty('checked',false);
		}
	});
}