var onVehicleEvent = new YAHOO.util.CustomEvent("VehicleEvent");
var onProductEvent = new YAHOO.util.CustomEvent("ProductEvent");

loadFragment = function(currentFragment){
	var currentFragment = (typeof currentFragment != 'undefined') ? currentFragment : '';
	//var fragment = window.location.hash.split('#')[1];
	var fragment = window.location.toString().split('#')[1];
	if(typeof fragment != 'undefined' && fragment != ''){
		if(fragment != currentFragment){
			loadHTML(fragment);
			currentFragment = fragment;
		};
	};
	setTimeout(function(){ loadFragment(currentFragment); }, 250);
};

YAHOO.util.Event.onDOMReady(loadFragment);

var lastURL = '';
loadHTML = function(url){
	if(URL == lastURL) return;
	$('content').domRCN();
	$('content').domAC(
		domCE('div').setStyle({
			position: 'relative'
		}).domAC(
			domCE('div').setStyle({
				height: '300px'
			})
		).domAC(
			domCE('img').setStyle({
				position: 'absolute',
				left: '350px',
				top: '135px'
			}).domSA({
				src: '/images/loadinglarge.gif',
				height: '48px',
				width: '48px'
			})
		).domAC(
			domCE('span').setStyle({
				position: 'absolute',
				left: '350px',
				top: '185px'
			}).domCTN('Loading...')
		)
	);
	lastURL = url;
	window.location.href='#'+url;
	ajax = new Ajax();
	// (IE6) ? true : false ;
	var IE6 = false /*@cc_on || @_jscript_version < 5.7 @*/;
	ajax.caching = !IE6;
	ajax.url = distributor.fitguide+url;
	ajax.requestXML(function(response){
		//import html
		//$('content').innerHTML = response.responseText;
		//DOM translation for MSIE
		$('content').domRCN();
		$('buffer').domRCN( temp = domCE('div') );
		temp.innerHTML = response.responseText;
		$('content').domAC( temp );

		//import scripts
		var scripts = response.responseText.extractScripts();
		for(var i=0; i<scripts.length; i++){
			if (!scripts[i]){ return; };
			//  Internet Explorer has a funky execScript method that makes this easy
			if(typeof scripts[i] == 'string'){
				try{
					if (window.execScript) {
						window.execScript( scripts[i] );
					}else{
						//window.setTimeout( eval(scripts[i]), 0 );
						window.eval(scripts[i]);
					};
				}catch(e){};
			};
		};

	});
};

loadVehicle = function(makeid, modelid, vehicleid){
	loadHTML(lang('/en','/fr')+'/vehicle/?makeid='+makeid+'&modelid='+modelid+'&vehicleid='+vehicleid);
};

loadPart = function(categoryid, productid){
	loadHTML(lang('/en','/fr')+'/product/?categoryid='+categoryid+'&productid='+productid);
};

ViewVehicle = Class.create();
Object.extend(ViewVehicle.prototype,  {
	initialize: function(elementView) {
		this.elementView = elementView;
		onVehicleEvent.subscribe(this.eventDispatch, this, true);
	},

	eventDispatch: function(event, args){
		this.makeid = args[0].makeid;
		this.modelid = args[0].modelid;
		this.vehicleid = args[0].vehicleid;
		this.fromDropDown = (args[1]) ? args[1] : false;
		if(this.fromDropDown == true){
			loadHTML(lang('/en','/fr')+'/vehicle/?makeid='+this.makeid+'&modelid='+this.modelid+'&vehicleid='+this.vehicleid);
		};
	}
});

ViewPart = Class.create();
Object.extend(ViewPart.prototype, {
	initialize: function(elementView) {
		this.elementView = elementView;
		onProductEvent.subscribe(this.eventDispatch, this, true);
	},

	eventDispatch: function(event, args){
		this.categoryid = args[0].categoryid;
		this.productid = args[0].productid;
		this.fromDropDown = (args[1]) ? args[1] : false;
		if(this.fromDropDown == true){
			loadHTML(lang('/en','/fr')+'/product/?categoryid='+this.categoryid+'&productid='+this.productid);
		};
	}
});

SearchVehicles = Class.create();
//Object.extend(SearchVehicles.prototype, Search.prototype);
Object.extend(SearchVehicles.prototype,  {
	initialize: function(elementDiv, preloadmakeid, preloadmodelid, preloadvehicleid) {
		this.rendered = false;
		this.elementDiv = elementDiv;
		this.preloadmakeid = (typeof preloadmakeid == 'undefined') ? 0 : preloadmakeid ;
		this.preloadmodelid = (typeof preloadmodelid == 'undefined') ? 0 : preloadmodelid ;
		this.preloadvehicleid = (typeof preloadvehicleid == 'undefined') ? 0 : preloadvehicleid ;
		this.makeLoader = new Loader(130, 90);
		this.modelLoader = new Loader(130, 90);
		this.yearLoader = new Loader(130, 90);
		this.text = 'SEARCH BY VEHICLE';
		this.eventStopBubble  = this.stopBubble.bindAsEventListener(this);
		onVehicleEvent.subscribe(this.eventDispatch, this, true);
		this.render();
	},

	eventDispatch: function(event, args){
		if(typeof args[1] == 'undefined' || args[1] == false){
			if(typeof args[0].makeid != 'undefined' && args[0].makeid != this.preloadmakeid){
				this.preloadmakeid = args[0].makeid;
				this.preloadmodelid = args[0].modelid;
				this.preloadvehicleid = args[0].vehicleid;
				this.loadMakes();
			}else if(typeof args[0].modelid != 'undefined' && args[0].modelid != this.preloadmodelid){
				this.preloadmodelid = args[0].modelid;
				this.preloadvehicleid = args[0].vehicleid;
				this.loadModels();
			}else if(typeof args[0].vehicleid != 'undefined' && args[0].vehicleid != this.preloadvehicleid){
				this.preloadvehicleid = args[0].vehicleid;
				this.loadYears();
			};
		};
	},

	stopBubble: function(event){
		try{ if(event && typeof(Event.stop) == 'function') Event.stop(event); }catch(e){};
	},

	render: function(){
		this.rendered = true;
		this.elementDiv.setStyle({
			position: 'relative',
			zIndex: 1
		}).domAC(
			domCE('div').domAC(
				domCTN(lang('Vehicle:','Véhicule:'))
			).domAC(
				this.ddMake = domCE('span').setStyle({
					position: 'relative',
					cursor: 'pointer'
				}).domSA({
					className: 'dd'
				}).domAC(
					this.eleMake = domCE('span').domAC(
						this.arrowMake = domCE('img').domSA({
							src: '/images/icons/arrow2_black.gif',
							align: 'top'
						})
					).domAC(
						this.txtMake = domCE('span').domCTN(lang('Make','Fabriquant'))
					)
				).domAC(
					this.eleMakes = domCE('div').domSA({
						className: 'menudropdown'
					}).hide()
				)
			).domAC(
				this.ddModel = domCE('span').setStyle({
					position: 'relative',
					cursor: 'pointer'
				}).domSA({
					className: 'dd subtle'
				}).domAC(
					this.eleModel = domCE('span').domAC(
						this.arrowModel = domCE('img').domSA({
							src: '/images/icons/arrow2_black.gif',
							align: 'top'
						})
					).domAC(
						this.txtModel = domCE('span').domCTN(lang('Model','Modèle'))
					)
				).domAC(
					this.eleModels = domCE('div').domSA({
						className: 'menudropdown'
					}).hide()
				)
			).domAC(
				this.ddYear = domCE('span').setStyle({
					position: 'relative',
					cursor: 'pointer'
				}).domSA({
					className: 'dd subtle'
				}).domAC(
					this.eleYear = domCE('span').domAC(
						this.arrowYear = domCE('img').domSA({
							src: '/images/icons/arrow2_black.gif',
							align: 'top'
						})
					).domAC(
						this.txtYear = domCE('span').domCTN(lang('Year','Année'))
					)
				).domAC(
					this.eleYears = domCE('div').domSA({
						className: 'menudropdown'
					}).hide()
				)
			)
		);

		Event.observe(this.eleMakes, "mousedown", this.eventStopBubble);
		Event.observe(this.eleModels, "mousedown", this.eventStopBubble);
		Event.observe(this.eleYears, "mousedown", this.eventStopBubble);

		this.eventToggleMakes  = this.toggleMakes.bindAsEventListener(this);
		this.eventToggleModels  = this.toggleModels.bindAsEventListener(this);
		this.eventToggleYears  = this.toggleYears.bindAsEventListener(this);

		this.eventShowMakes  = this.showMakes.bindAsEventListener(this);
		this.eventShowModels  = this.showModels.bindAsEventListener(this);
		this.eventShowYears  = this.showYears.bindAsEventListener(this);

		this.eventDocumentBlurMakes  = this.hideMakes.bindAsEventListener(this);
		this.eventDocumentBlurModels  = this.hideModels.bindAsEventListener(this);
		this.eventDocumentBlurYears  = this.hideYears.bindAsEventListener(this);

		this.loadMakes();
		this.enableMakes();
	},

	enableMakes: function(){
		if(this.ddMake.hasClassName('subtle')) this.ddMake.removeClassName('subtle');
		Event.observe(this.eleMake, "mousedown", this.eventToggleMakes);
		Event.observe(this.eleMake, "mouseover", this.eventShowMakes);
	},

	disableMakes: function(){
		if(!this.ddMake.hasClassName('subtle')) this.ddMake.addClassName('subtle');
		Event.stopObserving(this.eleMake, "mousedown", this.eventToggleMakes);
		Event.stopObserving(this.eleMake, "mouseover", this.eventShowMakes);
	},

	loadMakes: function(){
		this.txtMake.domRCN( domCTN(lang('Make','Fabriquant')) );
		this.eleMakes.domRCN().domAC( this.makeLoader.element );
		this.makes = new Ajax();
		this.makes.url = XMLDistributorVehicleMakes+'?distributorid='+distributor.id;
		this.makes.caching = true;
		this.makes.requestXML(function(response){
			XML = response.responseJSON.vehicles;
			this.eleMakes.domRCN();
			if(typeof XML.make != 'undefined'){
				XML.make.each(function(make, index){
					this.eleMakes.domAC(
						element = domCE('a').domSA({
							href: 'javascript:void(0);'
						}).domAC(
							element = domCE('div').domSA({ className: 'item' }).domCTN(make['-make'])
						)
					);
					Event.observe(element, "mousedown", function(event) {
						try{ if(event && typeof(Event.stop) == 'function') Event.stop(event); }catch(e){};
						this.chooseMake(make);
						this.showModels();
					}.bind(this));
					if(make['-id'] == this.preloadmakeid) this.chooseMake(make);
				}.bind(this));
			};
		}.bind(this));
	},

	toggleMakes: function(event){
		try{ if(event && typeof(Event.stop) == 'function') Event.stop(event); }catch(e){};
		if(!this.focusMakes){
			this.showMakes(event);
		}else{
			this.hideMakes(event);
		}
	},

	showMakes: function(event){
		this.focusMakes = true;
		this.hideModels(event);
		this.hideYears(event);
		this.eleMakes.show();
		this.arrowMake.domSA({
			src: '/images/icons/arrow3_black.gif'
		});
		Event.observe(document.body, "mousedown", this.eventDocumentBlurMakes);
	},

	hideMakes: function(event){
		this.focusMakes = false;
		this.eleMakes.hide();
		this.arrowMake.domSA({
			src: '/images/icons/arrow2_black.gif'
		});
		Event.stopObserving(document.body, "mousedown", this.eventDocumentBlurMakes);
	},

	chooseMake: function(make){
		this.make = make;
		this.make['-url'] = this.make['-make'].replace(/[\ ]/gi, '_').toLowerCase();
		this.txtMake.domRCN( domCTN(this.make['-make']) );
		this.hideMakes();
		this.loadModels();
		this.enableModels();
		this.disableYears();
		this.hideYears();
	},

	enableModels: function(){
		if(this.ddModel.hasClassName('subtle')) this.ddModel.removeClassName('subtle');
		Event.observe(this.eleModel, "mousedown", this.eventToggleModels);
		Event.observe(this.eleModel, "mouseover", this.eventShowModels);
	},

	disableModels: function(){
		if(!this.ddModel.hasClassName('subtle')) this.ddModel.addClassName('subtle');
		Event.stopObserving(this.eleModel, "mousedown", this.eventToggleModels);
		Event.stopObserving(this.eleModel, "mouseover", this.eventShowModels);
	},

	loadModels: function(){
		this.txtModel.domRCN( domCTN(lang('Model','Modèle')) );
		this.eleModels.domRCN( this.modelLoader.element );
		this.models = new Ajax();
		this.models.url = XMLDistributorVehicleModels+'?distributorid='+distributor.id+'&makeid='+this.make['-id'];
		this.models.caching = true;
		this.models.requestXML(function(response){
			XML = response.responseJSON.vehicles.make;
			XML.model = (typeof XML.model.length == 'undefined')
				? [XML.model]
				: XML.model;
			this.eleModels.domRCN();
			XML.model.each(function(model, index){
				this.eleModels.domAC(
					element = domCE('a').domSA({
						href: 'javascript:void(0);'
					}).domAC(
						domCE('div').domSA({ className: 'item' }).domCTN(model['-model'])
					)
				);
				Event.observe(element, "mousedown", function(event) {
					try{ if(event && typeof(Event.stop) == 'function') Event.stop(event); }catch(e){};
					this.chooseModel(model);
					this.showYears();
				}.bind(this));
				if(model['-id'] == this.preloadmodelid) this.chooseModel(model);
			}.bind(this));
		}.bind(this));
	},

	toggleModels: function(event){
		try{ if(event && typeof(Event.stop) == 'function') Event.stop(event); }catch(e){};
		if(!this.focusModels){
			this.showModels(event);
		}else{
			this.hideModels(event);
		}
	},

	showModels: function(event){
		this.focusModels = true;
		this.hideMakes(event);
		this.hideYears(event);
		this.eleModels.show();
		this.arrowModel.domSA({
			src: '/images/icons/arrow3_black.gif'
		});
		Event.observe(document.body, "mousedown", this.eventDocumentBlurModels);
	},

	hideModels: function(event){
		this.focusModels = false;
		this.eleModels.hide();
		this.arrowModel.domSA({
			src: '/images/icons/arrow2_black.gif'
		});
		Event.stopObserving(document.body, "mousedown", this.eventDocumentBlurModels);
	},

	chooseModel: function(model){
		this.model = model;
		this.model['-url'] = this.model['-model'].replace(/[\ ]/gi, '_').toLowerCase();
		this.txtModel.domRCN( domCTN(this.model['-model']) );
		this.hideModels();
		this.loadYears();
		this.enableYears();
	},

	enableYears: function(){
		if(this.ddYear.hasClassName('subtle')) this.ddYear.removeClassName('subtle');
		Event.observe(this.eleYear, "mousedown", this.eventToggleYears);
		Event.observe(this.eleYear, "mouseover", this.eventShowYears);
	},

	disableYears: function(){
		if(!this.ddYear.hasClassName('subtle')) this.ddYear.addClassName('subtle');
		Event.stopObserving(this.eleYear, "mousedown", this.eventToggleYears);
		Event.stopObserving(this.eleYear, "mouseover", this.eventShowYears);
	},

	loadYears: function(){
		this.txtYear.domRCN( domCTN(lang('Year','Année')) );
		this.eleYears.domRCN( this.yearLoader.element );
		this.years = new Ajax();
		this.years.url = XMLDistributorVehicleYears+'?distributorid='+distributor.id+'&makeid='+this.make['-id']+'&modelid='+this.model['-id'];
		this.years.caching = true;
		this.years.requestXML(function(response){
			XML = response.responseJSON.vehicles.make.model;
			XML.vehicle = (typeof XML.vehicle.length == 'undefined')
				? [XML.vehicle]
				: XML.vehicle;
			XML.vehicle.sort(function(a,b){
				if(a['-year'] == b['-year']){
					if(typeof a['-trim'] == 'undefined' || a['-trim'] == '') return -1;
					if(typeof b['-trim'] == 'undefined' || b['-trim'] == '') return 1;
					return (a['-trim'] > b['-trim']) ? 1 : -1;
				}else{
					return (a['-year'] < b['-year']) ? 1 : -1;
				};
			});
			this.eleYears.domRCN();
			XML.vehicle.each(function(vehicle, index){
				this.eleYears.domAC(
					element = domCE('a').domSA({
						href: 'javascript:void(0);'
					}).domAC(
						element = domCE('div').domSA({ className: 'item' }).domCTN(vehicle['-year']+((typeof vehicle['-trim'] != 'undefined') ? ' '+vehicle['-trim'] : ''))
					)
				);
				Event.observe(element, "mousedown", function(event) {
					try{ if(event && typeof(Event.stop) == 'function') Event.stop(event); }catch(e){};
					this.chooseYear(vehicle);
				}.bind(this));
				if(vehicle['-id'] == this.preloadvehicleid){
					this.txtYear.domRCN( domCTN(vehicle['-year']+((typeof vehicle['-trim'] != 'undefined') ? ' '+vehicle['-trim'] : '')) );
				};
			}.bind(this));
		}.bind(this));
	},

	toggleYears: function(event){
		try{ if(event && typeof(Event.stop) == 'function') Event.stop(event); }catch(e){};
		if(!this.focusYears){
			this.showYears(event);
		}else{
			this.hideYears(event);
		}
	},

	showYears: function(event){
		this.focusYears = true;
		this.hideMakes(event);
		this.hideModels(event);
		this.eleYears.show();
		this.arrowYear.domSA({
			src: '/images/icons/arrow3_black.gif'
		});
		Event.observe(document.body, "mousedown", this.eventDocumentBlurYears);
	},

	hideYears: function(event){
		this.focusYears = false;
		this.eleYears.hide();
		this.arrowYear.domSA({
			src: '/images/icons/arrow2_black.gif'
		});
		Event.stopObserving(document.body, "mousedown", this.eventDocumentBlurYears);
	},

	chooseYear: function(vehicle){
		this.vehicle = vehicle;
		this.vehicle['-url'] = this.vehicle['-year']+((typeof this.vehicle['-trim'] != 'undefined' && this.vehicle['-trim'] != '') ? '-'+this.vehicle['-trim'].replace(/[\ ]/gi, '_').toLowerCase() : '');
		this.txtYear.domRCN( domCTN(this.vehicle['-year']+((typeof this.vehicle['-trim'] != 'undefined') ? ' '+this.vehicle['-trim'] : '')) );
		this.hideYears();
		onVehicleEvent.fire({
			makeid: this.make['-id'],
			modelid: this.model['-id'],
			vehicleid: this.vehicle['-id']
		}, true);
	}
});

SearchPart = Class.create();
Object.extend(SearchPart.prototype,  {
	initialize: function(elementDiv, preloadcategoryid, preloadproductid) {
		this.rendered = false;
		this.elementDiv = elementDiv;
		this.preloadcategoryid = (typeof preloadcategoryid == 'undefined') ? 0 : preloadcategoryid ;
		this.preloadproductid = (typeof preloadproductid == 'undefined') ? 0 : preloadproductid ;
		this.text = 'SEARCH BY PARTNUMBER';
		this.eventStopBubble  = this.stopBubble.bindAsEventListener(this);
		onProductEvent.subscribe(this.eventDispatch, this, true);
		this.render();
	},

	eventDispatch: function(event, args){
		if(typeof args[1] == 'undefined' || args[1] == false){
			if(typeof args[0].categoryid != 'undefined' && args[0].categoryid != this.preloadcategoryid){
				this.preloadcategoryid = args[0].categoryid;
				this.preloadproductid = args[0].productid;
				this.loadCategories();
			}else if(typeof args[0].productid != 'undefined' && args[0].productid != this.preloadproductid){
				this.preloadproductid = args[0].productid;
				this.loadProducts();
			};
		};
	},

	stopBubble: function(event){
		try{ if(event && typeof(Event.stop) == 'function') Event.stop(event); }catch(e){};
	},

	render: function(){
		this.rendered = true;
		this.elementDiv.setStyle({
			position: 'relative',
			zIndex: 1
		}).domAC(
			domCE('div').domAC(
				domCTN(lang('Product:','Produit:'))
			).domAC(
				this.ddCategory = domCE('span').setStyle({
					position: 'relative',
					cursor: 'pointer'
				}).domSA({
					className: 'dd'
				}).domAC(
					this.eleCategory = domCE('span').domAC(
						this.arrowCategory = domCE('img').domSA({
							src: '/images/icons/arrow2_black.gif',
							align: 'top'
						})
					).domAC(
						this.txtCategory = domCE('span').domCTN('Category')
					)
				).domAC(
					this.eleCategories = domCE('div').domSA({
						className: 'menudropdown'
					}).hide()
				)
			).domAC(
				this.ddProduct = domCE('span').setStyle({
					position: 'relative',
					cursor: 'pointer'
				}).domSA({
					className: 'dd subtle'
				}).domAC(
					this.eleProduct = domCE('span').domAC(
						this.arrowProduct = domCE('img').domSA({
							src: '/images/icons/arrow2_black.gif',
							align: 'top'
						})
					).domAC(
						this.txtProduct = domCE('span').domCTN(lang('Product','Produit'))
					)
				).domAC(
					this.eleProducts = domCE('div').domSA({
						className: 'menudropdown'
					}).hide()
				)
			)
		);

		Event.observe(this.eleCategories, "mousedown", this.eventStopBubble);
		Event.observe(this.eleProducts, "mousedown", this.eventStopBubble);

		this.eventToggleCategories  = this.toggleCategories.bindAsEventListener(this);
		this.eventToggleProducts  = this.toggleProducts.bindAsEventListener(this);

		this.eventShowCategories  = this.showCategories.bindAsEventListener(this);
		this.eventShowProducts  = this.showProducts.bindAsEventListener(this);

		this.eventDocumentBlurCategories  = this.hideCategories.bindAsEventListener(this);
		this.eventDocumentBlurProducts  = this.hideProducts.bindAsEventListener(this);

		this.loadCategories();
		this.enableCategories();
	},

	enableCategories: function(){
		if(this.ddCategory.hasClassName('subtle')) this.ddCategory.removeClassName('subtle');
		Event.observe(this.eleCategory, "mousedown", this.eventToggleCategories);
		Event.observe(this.eleCategory, "mouseover", this.eventShowCategories);
	},

	disableCategories: function(){
		if(!this.ddCategory.hasClassName('subtle')) this.ddCategory.addClassName('subtle');
		Event.stopObserving(this.eleCategory, "mousedown", this.eventToggleCategories);
		Event.stopObserving(this.eleCategory, "mouseover", this.eventShowCategories);
	},

	loadCategories: function(){
		this.txtCategory.domRCN( domCTN('Category') );
		this.eleCategories.domRCN();
		this.categories = new Ajax();
		this.categories.url = XMLDistributorProductsCategories+'?distributorid='+distributor.id;
		this.categories.caching = true;
		this.categories.requestXML(function(response){
			if(typeof response.responseJSON.products.categories != 'undefined'){
				XML = response.responseJSON.products.categories;
				if(typeof XML.category != 'undefined'){
					XML.category = (typeof XML.category.length == 'undefined')
						? [XML.category]
						: XML.category;
					XML.category.each(function(category, index){
						this.eleCategories.domAC(
							element = domCE('a').domSA({
								href: 'javascript:void(0);'
							}).domAC(
								element = domCE('div').domSA({ className: 'item' }).domCTN(lang(category.name_en,category.name_fr))
							)
						);
						Event.observe(element, "mousedown", function(event) {
							try{ if(event && typeof(Event.stop) == 'function') Event.stop(event); }catch(e){};
							this.chooseCategory(category);
							this.showProducts();
						}.bind(this));
						if(category['-id'] == this.preloadcategoryid) this.chooseCategory(category, false);
					}.bind(this));
				};
			};
		}.bind(this));
	},

	toggleCategories: function(event){
		try{ if(event && typeof(Event.stop) == 'function') Event.stop(event); }catch(e){};
		if(!this.focusCategories){
			this.showCategories(event);
		}else{
			this.hideCategories(event);
		}
	},

	showCategories: function(event){
		this.focusCategories = true;
		this.hideProducts(event);
		this.eleCategories.show();
		this.arrowCategory.domSA({
			src: '/images/icons/arrow3_black.gif'
		});
		Event.observe(document.body, "mousedown", this.eventDocumentBlurCategories);
	},

	hideCategories: function(event){
		this.focusCategories = false;
		this.eleCategories.hide();
		this.arrowCategory.domSA({
			src: '/images/icons/arrow2_black.gif'
		});
		Event.stopObserving(document.body, "mousedown", this.eventDocumentBlurCategories);
	},

	chooseCategory: function(category){
		this.category = category;
		this.category['-url'] = lang(this.category.name_en.replace(/[\ ]/gi, '_').toLowerCase(),this.category.name_fr.replace(/[\ ]/gi, '_').toLowerCase())
		this.txtCategory.domRCN( domCTN(lang(this.category.name_en,this.category.name_fr)) );
		this.hideCategories();
		this.loadProducts();
		this.enableProducts();
	},

	enableProducts: function(){
		if(this.ddProduct.hasClassName('subtle')) this.ddProduct.removeClassName('subtle');
		Event.observe(this.eleProduct, "mousedown", this.eventToggleProducts);
		Event.observe(this.eleProduct, "mouseover", this.eventShowProducts);
	},

	disableProducts: function(){
		if(!this.ddProduct.hasClassName('subtle')) this.ddProduct.addClassName('subtle');
		Event.stopObserving(this.eleProduct, "mousedown", this.eventToggleProducts);
		Event.stopObserving(this.eleProduct, "mouseover", this.eventShowProducts);
	},

	loadProducts: function(){
		this.txtProduct.domRCN( domCTN(lang('Product','Produit')) );
		this.eleProducts.domRCN();
		this.products = new Ajax();
		this.products.url = XMLDistributorProductCategory+'?distributorid='+distributor.id+'&categoryid='+this.category['-id'];
		this.products.caching = true;
		this.products.requestXML(function(response){
			if(typeof response.responseJSON.products != 'undefined'){
				XML = response.responseJSON.products.categories.category.products;
				XML.product = (typeof XML.product.length == 'undefined')
					? [XML.product]
					: XML.product;
				XML.product.sort(function(a,b){
					return(a.partnumber > b.partnumber) ? 1 : -1;
				});
				XML.product.each(function(product, index){
					this.eleProducts.domAC(
						element = domCE('a').domSA({
							href: 'javascript:void(0);'
						}).domAC(
							element = domCE('div').domSA({ className: 'item' }).domCTN(product.partnumber)
						)
					);
					Event.observe(element, "mousedown", function(event) {
						try{ if(event && typeof(Event.stop) == 'function') Event.stop(event); }catch(e){};
						this.chooseProduct(product);
					}.bind(this));
					if(product['-id'] == this.preloadproductid){
						this.txtProduct.domRCN( domCTN(product.partnumber) );
					};
				}.bind(this));
			};
		}.bind(this));
	},

	toggleProducts: function(event){
		try{ if(event && typeof(Event.stop) == 'function') Event.stop(event); }catch(e){};
		if(!this.focusProducts){
			this.showProducts(event);
		}else{
			this.hideProducts(event);
		}
	},

	showProducts: function(event){
		this.focusProducts = true;
		this.hideCategories(event);
		this.eleProducts.show();
		this.arrowProduct.domSA({
			src: '/images/icons/arrow3_black.gif'
		});
		Event.observe(document.body, "mousedown", this.eventDocumentBlurProducts);
	},

	hideProducts: function(event){
		this.focusProducts = false;
		this.eleProducts.hide();
		this.arrowProduct.domSA({
			src: '/images/icons/arrow2_black.gif'
		});
		Event.stopObserving(document.body, "mousedown", this.eventDocumentBlurProducts);
	},

	chooseProduct: function(product){
		this.product = product;
		this.product['-url'] = this.product.partnumber.replace(/[\ ]/gi, '_').toLowerCase();
		this.txtProduct.domRCN( domCTN(this.product.partnumber) );
		this.hideProducts();
		onProductEvent.fire({
			categoryid: this.category['-id'],
			productid: this.product['-id']
		}, true);
	}
});

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;
	}

});

registerCompat = function (element, compatid, categoryid, product){
	try{
		element.onmouseover = function(){ };
		element.domRA('onMouseOver');
	}catch(e){ };
	new CompatProduct(element, compatid, categoryid, product);
};

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

	initialize: function(element, compatid, categoryid, delayRender) {
		this.element = element;
		this.compatid = compatid;
		this.categoryid = categoryid;
		this.delayRender = (delayRender) ? delayRender : false;
		this.focus = true;
		this.rendered = false;

		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);

		if(!delayRender) this.render();
	},

	over: function(event){
		this.focus = true;
		if(!this.rendered) this.render();
	},

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

	render: function(event){
		this.rendered = true;

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

			var compat = response.responseJSON.compat;
			var feature = compat.feature;
			var product = compat.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'
					}).domAC(
						domCE('img').domSA({
							src: '/images/gen/feature/'+this.categoryid+'.'+feature['-id']+'.png',
							align: 'left'
						})
					).domAC(
						domCE('p').domAC(
							domCTN(product.partnumber+' '+lang(feature.name_en+' Compatibility', 'Compatibilité '+feature.name_fr))
						)
					)
				)
			);

			this.tooltip.registerTooltipBody(
				domCE('div').domAC(
					domCE('p').setStyle({
						width: '235px',
						maxWidth: '235px'
					}).domSA({
						className: 'tooltipbody'
					}).domAC(
						this.tooltipBody = domCE('div').domCHTN(lang('Compatible with all versions of the ','Compatible avec toutes les versions du ')+product.partnumber+'.')
					)
				)
			);

			if(lang(compat.notes_en, compat.notes_fr)){
				this.tooltipBody.domRCN(
					domCE('div').domCHTN(lang(compat.notes_en, compat.notes_fr))
				);
			};

			if(typeof(compat.platform) != 'undefined'
				&& typeof(compat.platform.hardware) != 'undefined'
				&& typeof(compat.platform.hardware.firmware) != 'undefined'
			){
				var platform = compat.platform;
				var hardware = platform.hardware;
				var firmware = hardware.firmware;
				this.tooltipBody.domRCN(
					domCE('p').domCHTN(lang('Compatible with firmware version <strong>'+hardware['-version']+'.'+firmware['-version']+'</strong> of the ','Compatible avec la version <strong>'+hardware['-version']+'.'+firmware['-version']+'</strong> du logiciel du ')+product.partnumber+'.')
				);
			};


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

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

		}.bind(this));
	}
});

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 = XMLDistributorProduct+'?distributorid='+distributor.id+'&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('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'))
					)
				)
			);

			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;
	}
});

registerFile = function (element, fileid){
	try{
		element.onmouseover = function(){ };
		element.domRA('onMouseOver');
	}catch(e){ };
	new File(element, fileid);
};

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

	initialize: function(element, fileid, delayRender) {
		this.element = element;
		this.fileid = fileid;
		this.delayRender = (delayRender) ? delayRender : false;
		this.focus = true;
		this.rendered = false;

		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);

		if(!delayRender) this.render();
	},

	over: function(event){
		this.focus = true;
		if(!this.rendered) this.render();
	},

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

	render: function(event){
		this.rendered = true;

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

			var category = response.responseJSON.files.category;
			var file = category.file;

			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/extensions/'+file.extension+'.png',
						align: 'left'
					})
				).domAC(
					domCE('h4').setStyle({width: '235px' }).domSA({
						className: 'tooltiptitle'
					}).domAC(
						domCE('p').domAC(
							domCTN(lang('Download File','Téléchargement de Fichier'))
						)
					)
				)
			);

			this.tooltip.registerTooltipBody(
				domCE('div').domAC(
					domCE('p').setStyle({width: '235px'}).domSA({
						className: 'tooltipbody'
					}).domAC(
						this.tooltipBody = domCE('p')
					)
				)
			);

			this.tooltipBody.domAC(
				domCE('h2').domCHTN(file.size.humanbytes())
			);

			if(lang(category.description_en, category.description_fr)){
				this.tooltipBody.domAC(
					domCE('p').domCHTN(lang(category.description_en, category.description_fr).nl2br())
				);
			};

			if(lang(file.description_en, file.description_fr)){
				this.tooltipBody.domAC(
					domCE('p').domCHTN(lang(file.description_en, file.description_fr).nl2br())
				);
			};

			this.tooltipBody.domAC(
				domCE('br')
			).domAC(
				domCE('p').setStyle({
					color: '#ff0000',
					fontStyle: 'italic'
				}).domSA({
					align: 'center'
				}).domCTN(lang('Click to download','Cliquez pour télécharger'))
			);

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

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

		}.bind(this));
	}
});

rC = function(element, vehicleid_list, versionMin, versionMax){
	new CompatVehicle(element, vehicleid_list, versionMin, versionMax);
};

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

	initialize: function(element, vehicleid_list, versionMin, versionMax, isList){
		this.element = element;
		this.elements = Array();
		this.vehicleid_list = vehicleid_list;
		this.versionMin = (versionMin) ? versionMin : false ;
		this.versionMax = (versionMax) ? versionMax : false ;
		this.isList = (isList) ? isList : false;
		this.rendered = false;
		this.focus = true;
		this.notes = Array();

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

			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);

		}catch(e){};

		//if(this.versionMin && this.versionMax && !isList) onFirmwareEvent.subscribe(this.firmware, this, true);

	},

	over: function(event){
		this.focus = true;
		if(!this.rendered) this.render(event);
	},

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

	render: function(event){
		Event.stopObserving(this.element, "mouseover", this.eventMouseOver);
		Event.stopObserving(this.element, "mouseout", this.eventMouseOut);
		if(this.vehicleid_list.indexOf(',') == -1){
			//singular
			this.renderTooltip(event);
		}else{
			//many
			this.renderDropdown(event);
		};
	},

	renderDropdown: function(event){
		this.dropdown = new Dropdown();
		this.dropdown.initDropdown({
			quadrant: 12,
			timeoutDecay: 250
		});
		this.dropdown.registerDropdownElement(this.element);
		this.dropdown.registerDropdownBody(
			this.elementDropdown = domCE('div').domSA({
				className: 'dropdown'
			})
		);

		this.vehicleid_list.split(',').each(function(vehicleid, index){

			this.elements[index] = domCE('div');
			new CompatVehicle(this.elements[index], vehicleid, this.versionMin, this.versionMax, true);

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

				var index = response.argument[0];
				var make = response.responseJSON.vehicles.make;
				var model = make.model;
				var vehicle = model.vehicle;

				this.elementDropdown.domAC(
					this.elements[index].domAC(
						domCTN(vehicle['-year']+' '+make['-make']+' '+model['-model']+((vehicle['-trim']) ? ' '+vehicle['-trim'] : '' ))
					).domSA({
						rel: make['-id']+','+model['-id']+','+vehicle['-id'],
						onclick: function(){
							arrList = this.getAttribute('rel').split(',');
							loadVehicle(arrList[0], arrList[1], arrList[2]);
						}
					})
				);

				this.rendered = true;

			}.bind(this), [index]);

		}.bind(this));


	},

	renderTooltip: function(event){

		this.tooltip = new Tooltip();
		this.tooltip.initTooltip({
			timeoutRender: 100
		});

		this.tooltip.registerEvent(event);
		this.tooltip.registerTooltipElement(this.element);
		this.tooltip.registerTooltipTitle(
			domCE('div').domAC(
				this.elementTitle = domCE('h4').setStyle({ width: '235px' }).domSA({
					className: 'tooltiptitle'
				})
			)
		);
		this.tooltip.registerTooltipBody(
			domCE('div').domAC(
				this.elementBody = domCE('p').setStyle({ width: '235px'}).domSA({
					className: 'tooltipbody'
				})
			)
		);

		this.ajax = new Ajax();
		this.ajax.url = XMLProductVehicle+'?productid='+product.id+'&vehicleid='+this.vehicleid_list;
		this.ajax.caching = true;
		this.ajax.requestXML(function(response){
			this.make = response.responseJSON.products.product.vehicles.make;
			this.model = this.make.model;
			this.year = this.model.year;
			this.vehicle = this.year.vehicle;
			this.features = this.vehicle.features;

			this.element.domSA({
				rel: this.make['-id']+','+this.model['-id']+','+this.vehicle['-id'],
				onclick: function(){
					arrList = this.getAttribute('rel').split(',');
					loadVehicle(arrList[0], arrList[1], arrList[2]);
				}
			});

			this.features.feature = (typeof this.features.feature.length == 'undefined')
				? [this.features.feature]
				: this.features.feature ;

			this.features.feature.sort(function(a,b){
				return ( lang(a.name_en, a.name_fr) > lang(b.name_en, b.name_fr) ) ? 1 : -1;
			});

			this.elementTitle.domCTN(this.year['-year']+' '+this.make['-make']+' '+this.model['-model']+((this.vehicle['-trim']) ? ' '+this.vehicle['-trim'] : '' ));

			this.elementBody.domRCN();
			this.elementBody.domAC(
				domCE('table').domSA({
					className: 'compat',
					width: '100%',
					cellPadding: '0px',
					cellSpacing: '0px'
				}).domAC(
					this.elementTable = domCE('tbody').domAC(
						domCE('tr').domSA({
							className: 'label'
						}).domAC(
							domCE('td').domSA({
								colSpan: 2,
								width: '100%'
							}).domAC(domCTN('Feature'))
						).domAC(
							domCE('td').domAC(domCTN('Compatible'))
						)
					)
				)
			).domAC(
				this.elementNotes = domCE('div').domSA({
					className: 'notes'
				}).domAC(
					domCE('p').domSA({
						className: 'label'
					}).domAC(
						domCTN('Notes')
					)
				).hide()
			);


			var count=0;
			this.features.feature.each(function(feature){
				var index = this.features.length;
				this.features[index] = new CompatFeature(this, this.elementTable, feature);
				this.features[index].elementRow.addClassName('row'+(++count%2));
			}.bind(this));

			if(this.focus && !this.tooltip.hidden) this.tooltip.showTooltip();

			this.rendered = true;

		}.bind(this));


	},

	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.elementNotes.show();
		this.elementNotes.domAC(
			domCE('p').domSA({
				className: 'note'
			}).domAC(
				domCE('strong').domCTN('\u00a0['+(pointer+1)+']')
			).domAC(
				domCTN('\u00a0'+note)
			)
		)
		return pointer;
	},

	firmware: function(type, args){
		var version = args[0];
		if(isCompat(version, this.versionMax) == false){
			this.element.domRCN();
			this.element.domAC(
				domCE('img').domSA({
					src: '/images/icons/dot_red_up.gif'
				})
			);
		}else{
			this.element.domRCN();
			this.element.domAC(
				domCE('img').domSA({
					src: '/images/icons/dot_black.gif'
				})
			);
		};
	}

});

CompatFeature = Class.create();
Object.extend(CompatFeature.prototype, {
	initialize: function(parent, element, feature){
		this.parent = parent;
		this.element = element;
		this.feature = feature;
		this.version = '0.0.0.0';
		if(typeof this.feature.platform !== 'undefined'){
			this.version = this.feature.platform['-version']+'.'+this.feature.platform.hardware['-version']+'.'+this.feature.platform.hardware.firmware['-version'];
			this.textversion = this.feature.platform.hardware['-version']+'.'+this.feature.platform.hardware.firmware['-version'];
		}

		this.elementRow = domCE('tr').domSA({
			className: 'iscompat'
		}).domAC(
			this.elementNote = domCE('td').domSA({
				className: 'note'
			})
		).domAC(
			this.elementFeature = domCE('td').domSA({
				className: 'feature'
			})
		).domAC(
			this.elementVersion = domCE('td').domSA({
				className: 'version'
			})
		);
		this.element.domAC(this.elementRow);
		this.render();
		if($('firmwareversion')){
			if(typeof $('firmwareversion')[$('firmwareversion').selectedIndex].value != 'undefined') {
				this.eventDispatch(false, [$('firmwareversion')[$('firmwareversion').selectedIndex].value]);
			};
		};
	},

	eventDispatch: function(type, args){
		var version = args[0];
		if(isCompat(version, this.version) == false){
			this.elementRow.removeClassName('iscompat');
			this.elementRow.addClassName('nocompat');
		}else{
			this.elementRow.removeClassName('nocompat');
			this.elementRow.addClassName('iscompat');
		};
	},

	render: function(){
		if(lang(this.feature.notes_en, this.feature.notes_fr)){
			this.elementNote.domRCN(
				domCTN('['+(this.parent.addNote(lang(this.feature.notes_en, this.feature.notes_fr))+1)+']\u00a0')
			);
		}
		this.elementFeature.domSA({
			className: 'feature'
		}).domRCN(
			domCTN(lang(this.feature.name_en, this.feature.name_fr))
		);
		if(this.version == '0.0.0.0'){
			this.elementVersion.domRCN(
				domCE('img').domSA({
					src: '/images/checkmark.gif'
				}).setStyle({ 'padding': '0' })
			);
		}else{
			this.elementVersion.domSA({
				className: 'version'
			}).domRCN(
				domCTN(this.textversion)
			);
		}
	}

});

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 n\'importe où à l\'extérieur de cette fenêtre pour la 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){
			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: 'images'
						}).domAC(
							domCE('td').domSA({
								className: 'left'
							}).domAC(
								domCE('img').domSA({
									src: '/images/gen/make/'+this.make['-id']+'.png',
									height: '120',
									width: '120'
								})
							)
						).domAC(
							domCE('td').domSA({
								className: 'right'
							}).domAC(
								domCE('img').domSA({
									src: this.product.thumb,
									width: '100'
								})
							)
						)
					).domAC(
						domCE('tr').domSA({
							className: 'head'
						}).domAC(
							domCE('td').domSA({
								className: 'left'
							}).domAC(
								domCE('h4').domCTN(this.make['-make']+' '+this.model['-model']+' '+this.year['-year'])
							)
						).domAC(
							domCE('td').domSA({
								className: 'right'
							}).domAC(
								domCE('h4').domCTN(this.product.partnumber)
							)
						)
					)
				)
			).domAC(
				this.elementNotes = domCE('div').setStyle({
					width: '525px'
				}).domSA({
					className: 'wizardnotes'
				}).domAC(
					domCE('h4').domSA({
						className: 'subtitle'
					}).domCTN(lang('Compatability Notes','Notes Sur La Compatibilité'))
				).hide()
			).domAC(
				this.elementFiles = domCE('div').setStyle({
					width: '525px'
				}).domSA({
					className: 'wizardfiles'
				}).domAC(
					domCE('h4').domSA({
						className: 'subtitle'
					}).domCTN(lang('Installation Guides','Guides D\'Installation'))
				).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 CompatProduct(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.elementFiles.show();
						this.elementFiles.domAC(
							domCE('p').domSA({
								className: 'file row'+(index%2)
							}).domAC(
								row = domCE('a').domSA({
									href: lang('/en/download/'+file['-id']+'/'+file.name_en,'/fr/download/'+file['-id']+'/'+file.name_fr)+'.rev-'+file.revision+'.'+file.extension,
									target: '_blank'
								}).domAC(
									domCE('img').domSA({
										src: '/images/extensions/'+file.extension+'.png',
										height: '26',
										width: '24',
										border: '0'
									})
								).domAC(
									domCTN('\u00a0'+lang(file.name_en, file.name_fr))
								)
							)
						);
						new File(row, 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.elementNotes.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;
		this.overlay.hideOverlay();
	}

});