registerFeature = function (element, featureid, categoryid){
	try{
		element.onmouseover = function(){ };
		element.domRA('onMouseOver');
	}catch(e){ };
	new Feature(element, featureid, categoryid);
};

Feature = Class.create();
Object.extend(Feature.prototype, {

	initialize: function(element, featureid, categoryid){
		this.element = element;
		this.featureid = featureid;
		this.categoryid = categoryid;
		this.focus = true;

		this.eventMouseOver  = this.over.bindAsEventListener(this);
		Event.observe(this.element, "mouseover", this.eventMouseOver);
		this.eventMouseOut   = this.out.bindAsEventListener(this);
		Event.observe(this.element, "mouseout", this.eventMouseOut);

		this.ajax = new Ajax();
		this.ajax.url = XMLProductFeature+'?featureid='+this.featureid;
		this.ajax.caching = true;
		this.ajax.requestXML(function(response){

			var feature = response.responseJSON.products.features.feature;

			this.tooltip = new Tooltip();
			this.tooltip.initTooltip();
			this.tooltip.registerTooltipElement(this.element);

			this.element.setStyle('cursor:help;');

			this.tooltip.registerTooltipTitle(
				domCE('div').domAC(
					domCE('img').domSA({
						src: '/images/gen/feature/'+this.categoryid+'.'+feature['-id']+'.png',
						align: 'left'
					})
				).domAC(
					domCE('h4').setStyle({width: '235px' }).domSA({
						className: 'tooltiptitle'
					}).domCTN(lang(feature.name_en, feature.name_fr))
				)
			);
			this.tooltip.registerTooltipBody(
				domCE('div').domAC(
					domCE('p').setStyle({width: '235px'}).domSA({
						className: 'tooltipbody'
					}).domAC(
						domCE('p').domCHTN(lang(feature.description_en, feature.description_fr))
					)
				)
			);

			if(this.focus) this.tooltip.showTooltip();

			Event.stopObserving(this.element, "mouseover", this.eventMouseOver);
			Event.stopObserving(this.element, "mouseout", this.eventMouseOut);

		}.bind(this));
	},

	over: function(event){
		this.focus = true;
	},

	out: function(event){
		this.focus = false;
	}

});


registerProduct = function (element, productid){
	try{
		element.onmouseover = function(){ };
		element.domRA('onMouseOver');
	}catch(e){ };
	new Product(element, productid);
};

Product = Class.create();
Object.extend(Product.prototype, {

	initialize: function(element, productid) {
		this.element = element;
		this.productid = productid;
		this.focus = true;

		this.eventMouseOver  = this.over.bindAsEventListener(this);
		Event.observe(this.element, "mouseover", this.eventMouseOver);
		this.eventMouseOut   = this.out.bindAsEventListener(this);
		Event.observe(this.element, "mouseout", this.eventMouseOut);

		this.ajax = new Ajax();
		this.ajax.url = XMLProduct+'?productid='+this.productid;
		this.ajax.caching = true;
		this.ajax.requestXML(function(response){
			var product = response.responseJSON.products.product;

			this.tooltip = new Tooltip();
			this.tooltip.initTooltip();
			this.tooltip.registerTooltipElement(this.element);

			this.element.setStyle('cursor:help;');

			this.tooltip.registerTooltipTitle(
				domCE('div').domAC(
					domCE('h4').setStyle({
						width: '235px',
						maxWidth: '235px'
					}).domSA({
						className: 'tooltiptitle',
						align: 'center'
					}).domAC(
						domCE('p').domAC(
							domCTN(product.partnumber)
						)
					)
				)
			);

			this.tooltip.registerTooltipBody(
				domCE('div').domAC(
					domCE('div').setStyle({
						width: '225px',
						maxWidth: '225px',
						padding: '5px'
					}).domSA({
						className: 'tooltipbody'
					}).domAC(
						this.elementAvailability = domCE('div').domSA({
							align: 'center'
						}).setStyle({
							fontSize: '8pt'
						})
					)
				).domAC(
					domCE('p').setStyle({
						width: '235px',
						maxWidth: '235px'
					}).domSA({
						className: 'tooltipbody'
					}).domAC(
						domCE('img').domSA({
							src: product.thumb,
							align: 'left',
							width: '50'
						})
					).domAC(
						domCE('p').domSA({
							style: 'font-weight:bold;'
						}).domCHTN(lang(product.name_en, product.name_fr))
					).domAC(
						domCE('p').domCHTN(lang(product.shortdescription_en, product.shortdescription_fr))
					).domAC(
						domCE('br')
					).domAC(
						domCE('p').setStyle({
							color: '#ff0000',
							fontStyle: 'italic'
						}).domSA({
							align: 'center'
						}).domCTN(lang('Click for more information','Cliquez pour plus d\'information'))
					)
				)
			);

			switch(product.availability){
				case 'local':
				case 'distributor':
					this.elementAvailability.domSA({
						className:'local'
					}).domCTN(lang('The '+product.partnumber+' is available.','Le '+product.partnumber+' est disponible.'))
					break;
				case 'deprecate':
					this.elementAvailability.domSA({
						className:'deprecate'
					}).domCTN(lang('The '+product.partnumber+' is in final clearance.','Le '+product.partnumber+' est en vente finale.'))
					break;
				case 'discontinued':
					this.elementAvailability.domSA({
						className:'discontinued'
					}).domCTN(lang('The '+product.partnumber+' is no longer available.','Le '+product.partnumber+' n\'est plus disponible.'))
					break;
				default:
					this.elementAvailability.hide();
			};

			if(this.focus) this.tooltip.showTooltip();

			Event.stopObserving(this.element, "mouseover", this.eventMouseOver);
			Event.stopObserving(this.element, "mouseout", this.eventMouseOut);

		}.bind(this));
	},

	over: function(event){
		this.focus = true;
	},

	out: function(event){
		this.focus = false;
	}
});


registerMake = function(element, makeid){
	try{
		element.onmouseover = function(){ };
		element.domRA('onMouseOver');
	}catch(e){ };
	new Make(element, makeid);
};

Make = Class.create();
Object.extend(Make.prototype, {

	initialize: function(element, makeid){
		this.element = element;
		this.makeid = makeid;
		this.focus = true;
		this.eventMouseOver  = this.over.bindAsEventListener(this);
		Event.observe(this.element, "mouseover", this.eventMouseOver);
		this.eventMouseOut   = this.out.bindAsEventListener(this);
		Event.observe(this.element, "mouseout", this.eventMouseOut);
		this.ajax = new Ajax();
		this.ajax.url = XMLVehicleMake+'?makeid='+this.makeid;
		this.ajax.caching = true;
		this.ajax.requestXML(function(response){
			if(typeof response.responseJSON.vehicles != 'undefined'){
				var make = response.responseJSON.vehicles.make;
				this.tooltip = new Tooltip();
				this.tooltip.initTooltip();
				this.tooltip.registerTooltipElement(this.element);
				this.element.setStyle('cursor:help;');
				this.tooltip.registerTooltipTitle(
					domCE('div').domAC(
						domCE('h4').setStyle({width: '235px' }).domSA({
							className: 'tooltiptitle'
						}).domCTN(make.name+' Compatability')
					)
				);
				this.tooltip.registerTooltipBody(
					domCE('div').domAC(
						domCE('p').setStyle({width: '235px'}).domSA({
							className: 'tooltipbody'
						}).domAC(
							domCE('div').domSA({
								align: 'center'
							}).domAC(
								domCE('img').domSA({
									src: make.image
								})
							)
						).domAC(
							domCE('div').domSA({
								align: 'center'
							}).domAC(
								domCE('p').domCTN('Click to view this new vehicle.')
							)
						)
					)
				);
				if(this.focus) this.tooltip.showTooltip();
				Event.stopObserving(this.element, "mouseover", this.eventMouseOver);
				Event.stopObserving(this.element, "mouseout", this.eventMouseOut);
			};
		}.bind(this));

	},

	over: function(event){
		this.focus = true;
	},

	out: function(event){
		this.focus = false;
	}

});


registerProductVehicle = function (element, productid, vehicleid, producturl){
	try{
		element.domRA('onMouseOver');
	}catch(e){ };
	//prevent dups from race condition
	if(!element.hasClassName('ol')){
		element.addClassName('ol');
		new Product(element, productid);
		new ProductVehicle(element, productid, vehicleid, producturl);
	};
};

ProductVehicle = Class.create();
Object.extend(ProductVehicle.prototype, {

	initialize: function(element, productid, vehicleid, producturl) {
		this.element = element;
		this.productid = productid;
		this.vehicleid = vehicleid;
		this.producturl = (producturl) ? producturl : false ;
		this.rendered = false;
		this.notes = Array();
		this.eventMouseDown  = this.showOverlay.bindAsEventListener(this);
		Event.observe(this.element, "mousedown", this.eventMouseDown);
	},

	renderOverlay: function(event){
		this.elementOverlay = domCE('div').setStyle({
			position: 'relative'
		}).domSA({
			className: 'overlay'
		}).domAC(
			this.elementClose = domCE('img').setStyle({
				position: 'absolute',
				left: '502px',
				top: '-8px',
				cursor: 'pointer',
				zIndex: 5
			}).domSA({
				src: ((pngBug) ? '/images/overlay_close.gif' : '/images/overlay_close.png'),
				height: '46px',
				width: '40px'
			})
		).domAC(
			this.elementHeader = domCE('div').domSA({
				className: 'head'
			}).domAC(
				domCE('h1').domCTN(lang('Product Compatibility','Compatibilité du Produit'))
			)
		).domAC(
			this.elementBody = domCE('div').setStyle({
				position: 'relative'
			}).domSA({
				className: 'body'
			}).domAC(
				domCE('div').setStyle({
					height: '300px'
				})
			).domAC(
				domCE('img').setStyle({
					position: 'absolute',
					left: '250px',
					top: '135px'
				}).domSA({
					src: '/images/loadinglarge.gif',
					height: '48px',
					width: '48px'
				})
			)
		).domAC(
			this.elementFooter = domCE('div').domSA({
				className: 'foot'
			}).domAC(
				domCE('img').domSA({
					src: '/images/spacer.gif',
					width: '10px',
					height: '10px'
				})
			).domCTN(lang('Click anywhere outside this window to close.','Cliquez à l\'extérieur de cette fenêtre pour fermer'))
		);

		this.overlay = new Overlay({ width: 550, reposition: false });
		this.overlay.registerOverlay(this.elementOverlay);
		this.overlay.showOverlay();

		this.eventClose  = this.hideOverlay.bindAsEventListener(this);
		Event.observe(this.elementClose, "mousedown", this.eventClose);

		this.ajax = new Ajax();
		this.ajax.url = XMLProductVehicle+'?productid='+this.productid+'&vehicleid='+this.vehicleid;
		this.ajax.caching = true;
		this.ajax.requestXML(function(response){
			if(typeof response.responseJSON == 'undefined') return;
			if(typeof response.responseJSON.products == 'undefined') return;
			if(typeof response.responseJSON.products.product == 'undefined') return;

			this.product = response.responseJSON.products.product;
			this.make = this.product.vehicles.make;
			this.model = this.make.model;
			this.year = this.model.year;
			this.vehicle = this.year.vehicle;
			this.vehicle.features.feature = (typeof this.vehicle.features.feature.length == 'undefined')
				? [this.vehicle.features.feature]
				: this.vehicle.features.feature;
			this.vehicle.features.feature.sort(function(a,b){
				return (lang(a.name_en, a.name_fr) > lang(b.name_en, b.name_fr)) ? 1 : -1;
			});

			this.elementBody.domRCN();
			this.elementBody.domAC(
				this.elementTable = domCE('table').setStyle({
					width: '525px'
				}).domSA({
					className: 'wizardtable',
					border: '0',
					cellSpacing: '0',
					cellPadding: '0'
				}).domAC(
					this.elementTbody = domCE('tbody').domAC(
						domCE('tr').domSA({
							className: 'head'
						}).domAC(
							domCE('td').domSA({
								className: 'left',
								width: '50%'
							}).domAC(
								domCE('img').domSA({
									src: '/images/gen/make/'+this.make['-id']+'.png',
									height: '60',
									width: '60'
								})
							).domAC(
								domCE('h2').domCTN(this.make['-make']+' '+this.model['-model']+' '+this.year['-year'])
							)
						).domAC(
							domCE('td').domSA({
								className: 'right',
								width: '50%'
							}).domAC(
								domCE('img').domSA({
									src: this.product.thumb,
									width: '50'
								})
							).domAC(
								domCE('h2').domCTN(this.product.partnumber)
							)
						)
					).domAC(
						domCE('tr').domSA({
							className: 'files'
						}).domAC(
							domCE('td').domSA({
								colSpan: '2'
							}).domAC(
								this.elementWizardNotes = domCE('div').domSA({
									className: 'wizardnotes'
								}).domAC(
									domCE('h4').domCTN(lang('Compatability Notes:','Notes Sur La Compatibilité:'))
								).domAC(
									this.elementNotes = domCE('div')
								).hide()
							)
						)
					).domAC(
						domCE('tr').domSA({
							className: 'files'
						}).domAC(
							domCE('td').domSA({
								colSpan: '2'
							}).domAC(
								this.elementWizardFiles = domCE('div').domSA({
									className: 'wizardfiles'
								}).domAC(
									domCE('h4').domCTN(lang('Installation Guides:','Guides D\'Installation:'))
								).domAC(
									domCE('table').setStyle({
										width: '525px'
									}).domSA({
										border: '0',
										cellSpacing: '0',
										cellPadding: '0'
									}).domAC(
										this.elementFiles = domCE('tbody')
									)
								).hide()
							)
						)
					)
				)
			);

			this.vehicle.features.feature.each(function(feature, index){
				elementVersion = domCE('p');
				if(lang(feature.notes_en, feature.notes_fr)){
					elementVersion.domAC(
						domCE('strong').domSA({
							className: 'note'
						}).domCTN('['+(this.addNote(lang(feature.notes_en, feature.notes_fr))+1)+']\u00a0')
					);
				};
				if(typeof feature.platform != 'undefined'){
					this.platform = feature.platform;
					this.hardware = this.platform.hardware;
					this.firmware = this.hardware.firmware;
					elementVersion.domAC(
						domCE('font').domSA({
							className: 'h_col'
						}).domCTN(this.hardware['-version']+'.')
					).domAC(
						domCE('font').domSA({
							className: 'f_col'
						}).domCTN(this.firmware['-version'])
					)
				}else{
					elementVersion.domAC(
						domCE('img').domSA({
							src: '/images/checkmark.gif',
							width: '15',
							height: '12',
							alt: 'Compatible'
						})
					);
				};
				this.elementTbody.domAC(
					row = domCE('tr').domSA({
						className: 'compat row'+(index%2)
					}).domAC(
						domCE('td').domSA({
							className: 'left'
						}).domAC(
							domCTN(lang(feature.name_en,feature.name_fr))
						)
					).domAC(
						domCE('td').domSA({
							className: 'right'
						}).domAC(
							elementVersion
						)
					)
				);
				new Compat(row, feature['-compatid'], 0, true);
			}.bind(this));

			if(this.producturl){
				this.elementTbody.domAC(
					domCE('tr').domAC(
						domCE('td').domSA({
							className: 'left'
						}).domAC(
							domCTN('\u00a0')
						)
					).domAC(
						domCE('td').domSA({
							className: 'right'
						}).domAC(
							this.elementButton = domCE('button').domCHTN(lang('More Information','Plus d\'Information ')+' <strong>&gt;&gt;</strong>')
						)
					)
				);
				this.eventGotoProduct  = this.gotoProduct.bindAsEventListener(this);
				Event.observe(this.elementButton, "mousedown", this.eventGotoProduct);

			};

			if(typeof this.product.files != 'undefined'){
				this.files = this.product.files;
				this.files.category = (typeof this.files.category.length == 'undefined')
					? [this.files.category]
					: this.files.category;
				this.files.category.each(function(category){
					category.file = (typeof category.file.length == 'undefined')
						? [category.file]
						: category.file;
					category.file.each(function(file, index){
						this.elementWizardFiles.show();
						this.elementFiles.domAC(
							domCE('tr').domSA({
								className: 'file row'+(index%2)
							}).domAC(
								download = domCE('td').domAC(
									domCE('a').domSA({
										href: lang('/download/'+file['-id']+'/'+file.name_en.cleanurl(),'/download/'+file['-id']+'/'+file.name_fr.cleanurl())+'.rev-'+file.revision+'.'+file.extension,
										target: '_blank'
									}).domAC(
										domCE('img').domSA({
											src: '/images/extensions/'+file.extension+'.png',
											height: '26',
											width: '24',
											border: '0'
										})
									)
								)
							).domAC(
								preview = domCE('td').domSA({
									width: '100%'
								}).domAC(
									domCE('a').domSA({
										href: lang('/en/download/','/fr/download/')+file['-id']+'/preview.html',
										target: '_blank'
									}).domAC(
										domCTN('\u00a0'+lang(file.name_en, file.name_fr))
									)
								)
							)
						);
						new File(download, file['-id'], false);
						new File(preview, file['-id'], true);
					}.bind(this));
				}.bind(this));
			};
			this.overlay.positionOverlay();
		}.bind(this));
		this.rendered = true;
	},

	showOverlay: function(event){
		try{ if(event && typeof(Event.stop) == 'function') Event.stop(event); }catch(e){};
		if(!this.rendered){
			this.renderOverlay();
		}else{
			this.overlay.showOverlay();
		};
	},

	hideOverlay: function(event){
		if(!this.rendered) return;
		this.overlay.hideOverlay();
	},

	addNote: function(note){
		for(var i=0; i<=this.notes.length; i++){
			if(this.notes[i] == note) return i;
		};
		var pointer = this.notes.length
		this.notes[pointer] = note;
		this.elementWizardNotes.show();
		this.elementNotes.domAC(
			domCE('p').domSA({
				className: 'note row'+(pointer%2)
			}).domAC(
				domCE('strong').domCTN('\u00a0['+(pointer+1)+']')
			).domAC(
				domCTN('\u00a0'+note)
			)
		);
		return pointer;
	},

	gotoProduct: function(event){
		window.location.href = this.producturl;
	}

});