ASC.namespace('ASC.Chrysler.Towing.VehicleSelector');
ASC.Chrysler.Towing.VehicleSelector = ASC.extend(
				Ext.util.Observable,
				{

					window :null,
					constructor : function() {
						ASC.Chrysler.Towing.VehicleSelector.superclass.constructor
								.apply(this);

						this.addEvents( {
							vehicleselected :true
						});

						this.initTemplates();
					},

					show : function(vehData, options) {
						if (vehData.data && vehData.data.filterGroups) {
							if (this.window) {
								this.destroyWindow();
							}
							
							var html = this.sampleTemplate.applyTemplate( {
								model :this.sortTrimByMsrp(this.getFilterGroup(
										vehData.data.filterGroups,
										Page.variationType.trimTypeId)),
								engine :this.getFilterGroup(
										vehData.data.filterGroups,
										Page.variationType.engineTypeId),
								transmission :this.getFilterGroup(
										vehData.data.filterGroups,
										Page.variationType.transmissionTypeId),
								drive :this.getFilterGroup(
										vehData.data.filterGroups,
										Page.variationType.driveTypeId),
								cab :this.getFilterGroup(
										vehData.data.filterGroups,
										Page.variationType.cabTypeId),
								wheelBase :this.getFilterGroup(
										vehData.data.filterGroups,
										Page.variationType.wheelBaseTypeId),
								cabWheel :this.getFilterGroup(
										vehData.data.filterGroups,
										Page.variationType.cabWheelTypeId),
								boxLength:this.getFilterGroup(
										vehData.data.filterGroups,
										Page.variationType.boxLengthTypeId),
								combinations :vehData.data.combinations,
								imgLocalePath :ASC.cfg.getImgLocalePath(),
								brand :options.brand,
								selectedModel :options.selectedModel
							});

							this.initWindow(html);
							this.window.show();
							Page.initSelectedRadioIds();
						} else {
							alert(ASC.message("towing_noTowingInformation"));
						}
					},
					getFilterGroup : function(filterGrous, variationTypeID) {
						for ( var i = 0; i < filterGrous.length; i++) {
							if (filterGrous[i].variationTypeID == variationTypeID) {
								return filterGrous[i];
							}
						}
						return null;
					},
					sortTrim : function(group) {
						group.filters.sort(this.sortDescription);
						return group;
					},
					sortDescription : function(a, b) {
						var ac = a.description;
						var bc = b.description;
						if (ac < bc) {
							return -1;
						}
						if (ac == bc) {
							return 0;
						}
						if (ac > bc) {
							return 1;
						}
					},
					
					sortTrimByMsrp : function(group) {
						group.filters.sort(this.sortMsrp);
						return group;
					},
					
					sortMsrp: function( a, b ){
						var ac = a.MSRP;
						var bc = b.MSRP;
						if (ac < bc) {
							return -1;
						}
						if (ac == bc) {
							return 0;
						}
						if (ac > bc) {
							return 1;
						}
					},
					
					initTemplates : function() {
						this.sampleTemplate = new Ext.XTemplate(
								'<div id="shadow-container"> ',
								' <div class="shadow1">',
								' <div class="shadow2">',
								'   <div class="shadow3">',
								'   <div class="popup_frame">',
								'	<div class="towPopUpWindow">',
								
								
								'<table cellpadding="0" cellspacing="0" class="towPopUpWindow-Body">',
			  					  '<tr>',
									'<td class="towPopUpWindow-leftCell" rowspan="{[this.getRowSpan(values)]}">',
										'<div class="towPopUpWindow-OptionTitle">{values.selectedModel.year} {values.selectedModel.description} {[this.translate("towing_models")]} </div>',
										'<div class="towPopUpWindow-OptionDesc">',
											'<table cellspacing="0" cellpadding="0">',
												'<tbody>',
													/* '<sampleTemplate for="model">', */
													'{model:this.RenderDesc}',
													/* '</sampleTemplate>', */
												'</tbody>',
											'</table>',
										'</div>',
										'<div class="towPopUpWindow_left_car">',
											'<img src="{[this.getImagePath()]}{values.selectedModel.image}&width=190&height={[this.getImageHeight(values.selectedModel.modelType)]}&NOIMG=not_found_{Page.brand}.gif" style="width:190px;height:{[this.getImageHeight(values.selectedModel.modelType)]}px;"/>',
										'</div>',
										' <div class="towPopUpWindow_left_carName">',
											'{values.selectedModel.year} <span id="towingResultsDescription">{values.selectedModel.description}</span>',
										'</div>',
										'<div class="towPopUpWindow_left_cardes">',
											'{[this.translate("towing_startingAt")]} {[this.formatCurrency(this.getStartingAtPrict(values.selectedModel.startAtConfiguredPrice,values.combinations))]}<br />',											
											'{[this.translate("towing_towingRange")]} {[this.formatNumber(values.selectedModel.towingRangeLow)]} lbs. ',
											'<tpl if="values.selectedModel.towingRangeLow!=values.selectedModel.towingRangeHigh">- {[this.formatNumber(values.selectedModel.towingRangeHigh)]} lbs.</tpl>',
										'</div>',
									'</td>',
									'<td class="towPopUpWindow-rightCell">',
										'<div class="towPopUpWindow-OptionTitle"> {[this.translate("towing_engines")]} </div>',
										'<div  class="towPopUpWindow-OptionDesc">',
											'<table class="towingTable" cellspacing="0" cellpadding="0" border="0">',
													'{engine:this.RenderDesc}</table></div>',
												'</td></tr>',												
												'<tr>',
													'<td class="towPopUpWindow-rightCell">',
														'<div class="towPopUpWindow-OptionTitle">{[this.translate("towing_transmissions")]}</div>',
														'<div  class="towPopUpWindow-OptionDesc">',
															'<table cellspacing="0" cellpadding="0" border="0" class="towingTable">{transmission:this.RenderDesc}</table>',
														'</div>',
													'</td>',
												'</tr>',
												'<tr>',
													'<td class="towPopUpWindow-rightCell">',
														'<tpl if="drive != null">',
															'<div class="towPopUpWindow-OptionTitle"> {[this.translate("towing_drive")]} </div>',
															'<div class="towPopUpWindow-OptionDesc">',
																'<table cellspacing="0" cellpadding="0" border="0">{drive:this.RenderDriverDesc}</table>',
															'</div>',
														'</tpl>',
														'<tpl if="drive == null">',
															'<div class="towPopUpWindow-OptionTitle">&nbsp;</div>',
														'</tpl>',
													'</td>',
												'</tr>',
												'<tpl if="this.checkBoxStyle(values.cab)">',
												'<tr>',
													'<td class="towPopUpWindow-rightCell">',
														'<div class="towPopUpWindow-OptionTitle"> {[this.translate("towing_carBox")]} </div>',
														'<div class="towPopUpWindow-OptionDesc">',
															'<table cellspacing="0" cellpadding="0" border="0">{cab:this.RenderCabBoxDesc}</table>',
														'</div>',
													'</td>',
												'</tr>',
												'</tpl>',
												
												
												'<tpl if="values.selectedModel.modelType==&quot;T&quot;&&values.boxLength">',
												'<tr>',
												'<td class="towPopUpWindow-rightCell">',

												'<div class="towPopUpWindow-OptionTitle"> {[this.translate("bobLength")]} </div>',
												'<div class="towPopUpWindow-OptionDesc">',
												'<table cellspacing="0" cellpadding="0" border="0">{boxLength:this.RenderCabBoxDesc}</table></div>',

												'</tr>',
												'</tpl>',
												
												'<tpl if="values.selectedModel.modelType==&quot;H&quot;&&values.cabWheel">',
												'<tr>',
												'<td class="towPopUpWindow-rightCell">',

												'<div class="towPopUpWindow-OptionTitle"> {[this.translate("towing_wheelBase")]} </div>',
												'<div class="towPopUpWindow-OptionDesc">',
												'<table cellspacing="0" cellpadding="0" border="0">{cabWheel:this.RenderCabBoxDesc}</table></div>',

												'</tr>',
												'</tpl>',
												
												'<tpl if="values.selectedModel.modelType==&quot;H&quot;&&values.wheelBase&&!values.cabWheel">',
												'<tr>',
													'<td class="towPopUpWindow-rightCell">',
													'<div class="towPopUpWindow-OptionTitle"> {[this.translate("towing_wheelBase")]} </div>',
													'<div class="towPopUpWindow-OptionDesc">',
														'<table cellspacing="0" cellpadding="0" border="0"><tr><td>{wheelBase:this.RenderCabBoxDesc}</td></tr></table>',
													'</div>',
												'</tr>',
												'</tpl>',
												'<tr>',
													'<td class="towPopUpWindow-rightCell_msg">',
														'<div id="changedInfoContainer" style="display:none;"><img src="{imgLocalePath}/towing/exclamation.gif" class="info"/>&nbsp;<span id="changedInfo">&nbsp;</span></div>',
													'</td>',
												'</tr>',
												'<tr>',
													'<td class="towPopUpWindow-footerCell">',
														'<a href="javascript:ASC.Chrysler.trackLinkMetrics(\'content\',\'get_towing_results\');Page.redirect();"><img id="get_towing_results" alt="Get Towing Results" src="{imgLocalePath}/towing/get-towing-results.gif" /></a>',
													'</td>',
												'</tr>',
											'</table>',
										'</div>',
									'</td>',
								  '</tr>',
								  '<tr>',
								    '<td colspan="2" class="towPopUpWindow-footer">',
								    	'{[this.translate("towing_startingAtPriceRefers")]}',
								    '</td>',
								  '</tr>',
								  '</table>',
								'</div>',
								'</div>',
								'</div>',
								'</div>',
								{
									translate : function(key) {
										return ASC.message(key);
									},
									getImagePath : function() {										
										return ASC.cfg.getIofUrl();
									},
									getRowSpan:function(v)
									{
										var rowSpan = 5;
										
										if(v.cab)
										{
											rowSpan++;
										}
										if(v.wheelBase)
										{
											rowSpan++;
										}
										if(v.cabWheel)
										{
											rowSpan++;
										}
										if(v.boxLength)
										{
											rowSpan++;
										}
										return rowSpan;
									}
									,

									formatCurrency : function(str)

									{

										var val = ASC.util.getFloat(str);

										if (isNaN(val)) {

											return;

										}

										return ASC.util.formatCurrency(val, 0);

									},
									checkBoxStyle : function(boxStyle) {
										if (boxStyle) {
											/*
											 * for(var i=0;i<boxStyle.filters.length;i++) {
											 * 
											 * if(boxStyle.filters[i].description.indexOf("No")>-1&&boxStyle.filters[i].description.indexOf("Box")>-1) {
											 * return false; } }
											 */
											return true;
										}
										return false;
									},
									formatNumber : function(str) {
										var val = ASC.util.getFloat(str);

										if (isNaN(val)) {

											return str;

										}
										return ASC.util.formatNumber(val, 0);
									},
									getStartingAtPrict : function(basePrice,
											combinations) {//this.getStartingAtPrict(values.selectedModel.startingAtPrice,values.combinations)
										if (combinations) {
											//find the baseprice
											var destination=0;
											var found=false;
											for (var obj in combinations) {
												var vehicle=combinations[obj];																								
												if (vehicle.MSRP==basePrice) {
													found=true;
													if (destination==0 || vehicle.destination<destination) {
														destination=vehicle.destination;
													}
												}
											}
											if (found) 
												return basePrice + destination;
												
											return basePrice + combinations[0].destination;
										} else {
											return basePrice;
										}
									},
									getImageHeight : function(modelType) {
									switch (modelType) {
									case "C":
									case "S":
									case "V":
									case "T":
									case "H":
										return "118";
										break;
									}
									return "118";
								}
								});
						this.sampleTemplate.RenderDesc = function(objFilter,
								comObj) {
							if (objFilter == null)
								return '';
							var reText = '';
							var tdClass = '';
							if(objFilter.variationTypeID == Page.variationType.engineTypeId
									||objFilter.variationTypeID == Page.variationType. transmissionTypeId)
							{
								tdClass = 'class="rivetWidth"';
							}
							else if(objFilter.variationTypeID == Page.variationType.trimTypeId)
							{
								tdClass = 'class="towingTrim"';
							}
							var imgLocalePath = ASC.cfg.getImgLocalePath();
							var eId;
							for ( var i = 0; i < objFilter.filters.length; i++) {
								eId = objFilter.filters[i].id;

								reText += '<tr id="tr_'
										+ objFilter.id
										+ eId
										+ '" class="radioSelectedStyle"><td class="towingOption">'
										+ '<input class="radioStyle" type="radio" id="img_'
										+ objFilter.id
										+ eId
										+ '" name="'
										+ objFilter.id
										+ '" onclick="Page.RadioControlSelectedItem(\''
										+ objFilter.id + '\',' + eId + ')"/>'
										+ '<label id="lab_'
										+ objFilter.id + eId + '" for="img_'
										+ objFilter.id + eId + '">'
										+ objFilter.filters[i].description
										+ '</label></td></tr>';
							}
							return reText;
						}
						this.sampleTemplate.RenderDriverDesc = function(
								objFilter, comObj) {
							if (!objFilter || objFilter.filters.length < 0)
								return '';
							var reText = '<tr><td colspan="2"><table cellpadding="0" cellspacing="0" border="0"><tr >';

							var imgLocalePath = ASC.cfg.getImgLocalePath();
							var all = ASC.message("all");
							var eId;
							for ( var i = 0; i < objFilter.filters.length; i++) {
								eId = objFilter.filters[i].id;

								reText += '<td id="tr_'
										+ objFilter.id
										+ eId
										+ '" class="radioSelectedStyle">'
										+ '<input class="radioStyle" type="radio" id="img_'
										+ objFilter.id
										+ eId
										+ '" name="'
										+ objFilter.id
										+ '" onclick="Page.RadioControlSelectedItem(\''
										+ objFilter.id + '\',' + eId + ')"/>'
										+ '<label id="lab_' + objFilter.id
										+ eId + '" for="img_' + objFilter.id
										+ eId + '">'
										+ objFilter.filters[i].description
										+ '</label></td>';
							}
							reText += '</tr></table></td></tr>';
							return reText;
						}
						this.sampleTemplate.RenderCabBoxDesc = function(
								objFilter, comObj) {
							if (!objFilter || objFilter.filters.length < 0)
								return '';
							var reText = '<tr><td colspan="2"><table cellpadding="0" cellspacing="0" border="0">';

							var imgLocalePath = ASC.cfg.getImgLocalePath();
							var all = ASC.message("all");
							var eId;
							for ( var i = 0; i < objFilter.filters.length; i++) {
								eId = objFilter.filters[i].id;
								if (i % 2 == 0) {
									reText += "<tr>";
								}
								reText += '<td id="tr_'
										+ objFilter.id
										+ eId
										+ '" class="radioSelectedStyle">'
										+ '<input class="radioStyle" type="radio" id="img_'
										+ objFilter.id
										+ eId
										+ '" name="'
										+ objFilter.id
										+ '" onclick="Page.RadioControlSelectedItem(\''
										+ objFilter.id + '\',' + eId + ')"/>'
										+ '<label id="lab_' + objFilter.id
										+ eId + '" for="img_' + objFilter.id
										+ eId + '">'
										+ objFilter.filters[i].description
										+ '</label></td>';

								if (i % 2 == 1) {
									reText += "</tr>"
								}
							}
							if (objFilter.filters.length % 2 != 0) {
								reText += "</tr>";
							}
							reText += '</table></td></tr>';

							return reText;
						}
						this.sampleTemplate.compile();
					},

					initWindow : function(windowHtml) {
						ASC.log('initWindow');
						var windowId = Ext.id();

						this.window = new Ext.Window( {
							id :windowId,
							cls :'towing',
							title :ASC.message('popupWindowTitle'),
							constrainHeader :true,
							draggable :true,
							closable :true,
							autoHeight: true,							
							header :true,
							width :570,
							modal :true,
							resizable :false,
							plain :true,
							layout :'fit',
							border :false,
							items : {
								html :windowHtml,
								border :false
							}

						});

						this.window.on('hide', this.destroyWindow, this);
					},

					destroyWindow : function() {
						ASC.Chrysler.trackLinkMetrics('content','close');
						this.window.suspendEvents();
						this.window.destroy();
						delete this.window;
					}
				});

ASC.apply(Page,
				{
					selectedYear :'',
					selectedVehicle :'',
					selectedVehicleImage :'',
					selectedModel :null,
					models :null,
					brand :'',
					variationType : {
						trimTypeId :"5",
						engineTypeId :"8",
						transmissionTypeId :"9",
						driveTypeId :"1",
						cabTypeId :"2",
						wheelBaseTypeId:"7",
						cabWheelTypeId:"11",
						boxLengthTypeId:"4"
					},
					detailsCache :new Ext.util.MixedCollection(false, function(
							field) {
						return field.key;
					}),
					vehicleSelector :new ASC.Chrysler.Towing.VehicleSelector(),

					init : function() {
						this.initBrand();
						var ae = this.ajax;

						ae.registerRequest(
										'DETAILS',
										ASC.cfg.getContextPath() + '/towing/vehicleDetails.ajax');
						ae.registerAjaxObject('combinations',
								new ASC.Ajax.Response( {
									events : {
										success :this.ajaxCB.vehicleDetails,
										scope :Page
									}
								}));
					},

					ajaxCB : {
						vehicleDetails : function(response, ioArgs) {
							var myc = ioArgs.options.params.modelYearCode;
							// Because the vehicleDetails data remains unchanged
							// between calls
							// the ajax response
							// can be cached to prevent having to go all the way
							// to the server
							// if the user
							// requests to view the same vehicle details pop up
							this.detailsCache.add( {
								key :myc,
								response :response,
								ioArgs :ioArgs
							});
							
							Page.eventCB.vehicleSelected(myc);
						}
					},

					eventCB : {
						vehicleSelected : function(modelYearCode, vehicle) {
							//-------------------------------------------------------
							var cacheObj = Page.detailsCache.get(modelYearCode);
							if (!cacheObj) {
								Page.getVehicleDetails(modelYearCode);
								return;
							}
							var vehData = cacheObj.response;
							if (vehData.data && vehData.data.filterGroups) {	
								Page.comObj = vehData.data.combinations;
								Page.filterGroups = vehData.data.filterGroups;
								Page.vehicleSelector.show(vehData, {
									brand :Page.brand,
									selectedModel :Page.selectedModel
								});
							} else {
								alert(ASC.message("towing_noTowingInformation"));
							}
						}
					},
					towingVehicle :null,
					modeType :null,

					showSelected : function(index, vehicle) {
						index = parseInt(index);
						this.selectedModel = this.models[index];
						this.modeType = this.selectedModel.modelType;
						
						if (this.selectedModel){
							//---- set mlc to specialMlc after opening vehicle window
							ASC.Chrysler.trackPageMetrics(String.format(ASC.message("specialMlc"),this.selectedModel.year, vehicle));
							this.eventCB.vehicleSelected(this.selectedModel.modelYearCode, vehicle);
						}
						// 15,Auguest 2008, get the current selected vehicle for
						// [ADBS-415]
						this.towingVehicle = this.selectedModel.description;
					},

					getVehicleDetails : function(modelYearCode) {
						this.ajax.sendRequest('DETAILS', {
							params : {
								modelYearCode :modelYearCode,
								selectorType :"T"
							}
						});
					},
					filterGroups :null,
					/**
					 * persist the combinations array that in response
					 * JsonObject
					 */
					comObj :null,
					/** persist the id array of checked items */
					selectedRadioIds :null,
					getFilterGroup : function(filterGrous, variationTypeID) {
						for ( var i = 0; i < filterGrous.length; i++) {
							if (filterGrous[i].variationTypeID == variationTypeID) {
								return filterGrous[i];
							}
						}
						return null;
					},
					redirect : function() {
						var engineId = Page.getFilterGroup(Page.filterGroups,
								this.variationType.engineTypeId);
						engineId = engineId.id;
						var transmissionId = Page.getFilterGroup(
								Page.filterGroups,
								this.variationType.transmissionTypeId);
						transmissionId = transmissionId.id;
						window.location.href = ASC.cfg.getContextPath()
								+ '/towing/capacities.do?ccode='
								+ Page.selectedRadioIds.ccode
								+ '&lowLevelPackageCode='
								+ Page.selectedRadioIds.lowerLevelPackageCode
								+ '&vehicleEngineCode='
								+ Page.getOptionCode(engineId,
										Page.selectedRadioIds.cids[engineId])
								+ '&vehicleTransmissionCode='
								+ Page
										.getOptionCode(
												transmissionId,
												Page.selectedRadioIds.cids[transmissionId])
								+ '&vehicle='
								+ escape(this.towingVehicle)
								+ '&modeType='
								+ this.modeType
								+ '&towingResultsDescription='
								+ escape(ASC.getEl('towingResultsDescription').dom.innerHTML)
								+ '&modelYearCode='
								+ this.selectedModel.modelYearCode;
					},
					getOptionCode : function(groupId, optId) {
						if (Page.filterGroups) {
							for ( var j = 0; j < Page.filterGroups.length; j++) {
								if (Page.filterGroups[j].id == groupId) {
									var filters = Page.filterGroups[j].filters;
									for ( var i = 0; i < filters.length; i++) {
										if (filters[i].id == optId) {
											return filters[i].optionCode;
										}
									}
								}
							}
						}
						return "";
					},
					/**
					 * when the window popup at first time with the selected
					 * model, execute this function to set default checked
					 * itmes.
					 */
					initSelectedRadioIds : function() {
						if (Page.filterGroups) {
							
							var trimGroup = this.getFilterGroup(
									Page.filterGroups,
									this.variationType.trimTypeId);
							if (trimGroup) {
								var trim = trimGroup.filters[0];
							
								Page.selectedRadioIds = this.getCombinationByTrimId(trim.id,
												trimGroup.id);
							}
						}
						if (Page.selectedRadioIds)
							Page.setImgToCheck(Page.selectedRadioIds);

					},
					getCombinationByTrimId : function(trimId, trimGroupId) {
						if (Page.comObj) {
							for ( var i = 0; i < Page.comObj.length; i++) {
								var v = Page.comObj[i].cids[trimGroupId];
								if (v == trimId) {
									return Page.comObj[i];
								}
							}
						}
						return null;
					},
					/**
					 * set the src attribute of corresponding images point to
					 * checked image if the image is unchecked.
					 * 
					 * @param {json
					 *            Object} the cids array which in one item of
					 *            the combinations array
					 * 
					 */
					setImgToCheck : function(combination) {
						
						var trimGroupId = this
								.getFilterGroupIdByType(this.variationType.trimTypeId);
						if (combination) {
							var el;
							for ( var p in combination.cids) {
								el = ASC.getEl('img_' + p + combination.cids[p]);
							
								
								if (el) {
									el.dom.checked = true;
									if (this.brand == 'dodge') {
										
										var tr = ASC.getEl('tr_' + p
												+ combination.cids[p]);
										if (tr) {
											tr.dom.className = 'radioSelectedStyleOn';
										}

										if (p == this.getFilterGroupIdByType(this.variationType.driveTypeId)
												|| p == this.getFilterGroupIdByType(this.variationType.cabTypeId)
												|| p == this.getFilterGroupIdByType(this.variationType.cabWheelTypeId)
												|| p == this.getFilterGroupIdByType(this.variationType.wheelBaseTypeId)
												|| p == this.getFilterGroupIdByType(this.variationType.boxLengthTypeId)
										) {
											var lab = ASC.getEl('lab_' + p
													+ combination.cids[p]);
											if (tr) {
												tr.dom.className = 'radioSelectedStyle';
											}
											if (lab) {
												lab.dom.className = "driveSelectedStyleOn";
											}
										}
										/*else
										{
											el.dom.checked = false;
											el.dom.className="radioSelectedStyle";
										}*/
									}
								
								}
							}
							
						}
					},
					/**
					 * set the src attribute of corresponding images point to
					 * unchecked image if the image is checked.
					 * 
					 * @param {json
					 *            Object} the cids array which in one item of
					 *            the combinations array
					 * 
					 */
					setImgToUnCheck : function(combination) {
						if (combination) {
							var el;
							
							var trimGroupId = this.getFilterGroupIdByType(this.variationType.trimTypeId);
							for ( var p in combination.cids) {
								el = ASC.getEl('img_' + p + combination.cids[p]);

								if (el) {
									if (this.brand == 'dodge') {
										var td = ASC.getEl('tr_' + p
												+ combination.cids[p]);
										if (td) {
											td.dom.className = 'radioSelectedStyle';
										}

										if (p == this.getFilterGroupIdByType(this.variationType.driveTypeId)
												|| p == this.getFilterGroupIdByType(this.variationType.cabTypeId)
												|| p == this.getFilterGroupIdByType(this.variationType.cabWheelTypeId)
												|| p == this.getFilterGroupIdByType(this.variationType.wheelBaseTypeId)
												|| p == this.getFilterGroupIdByType(this.variationType.boxLengthTypeId)
										) {
											var lab = ASC.getEl('lab_' + p
													+ combination.cids[p]);
											if (lab) {
												lab.dom.className = "driveSelectedStyle";
											}
										}
										/*else
										{
											el.dom.className="radioStyle";
										}*/

									}
									el.dom.checked = false;
									
								}
							}
							
						}
					},
					/**
					 * when a image is clicked,search from combinations array to
					 * get the corresponding id array.
					 * 
					 * @param {integer}
					 *            the id in filterGroups item.
					 * @param {integer}
					 *            the id in filters item.
					 */
					RadioControlSelectedItem : function(groupId, eId) {
						//var el = ASC.getEl('img_' + groupId +eId);
						
						var oldSelectedRadioIds;
						if (Page.selectedRadioIds) {
							if(Page.selectedRadioIds.cids[groupId] == eId)
							{
								return;
							}
							oldSelectedRadioIds = Page.selectedRadioIds;
							Page.setImgToUnCheck(Page.selectedRadioIds);
							Page.selectedRadioIds = null;
						}

						if (Page.comObj) {
							var trimGroupId = this
									.getFilterGroupIdByType(this.variationType.trimTypeId);

							var trimFilterItem = null;
							if (trimGroupId == groupId) {
								trimFilterItem = this.getFilterItem(groupId,
										eId);
							}

							var weights = [];
							var obj;
							Page.setArrayWeight();
							var maxWeightIndex = -1;
							var maxWeightTemp = 0;
							// set weight for per combinations item.
							for ( var i = 0; i < Page.comObj.length; i++) {
								weights[i] = 0;
								obj = Page.comObj[i];
								if (obj.cids[groupId] == eId) {
									
									for ( var p in obj.cids) {
										
										if (oldSelectedRadioIds) {
											if (obj.cids[p] == oldSelectedRadioIds.cids[p]) {
												if (typeof Page.arrayWeight[p] != 'undefined') {
													weights[i] += Page.arrayWeight[p];
												}
											}
										}
									}
					
									if (maxWeightTemp < weights[i]) {
										maxWeightTemp = weights[i];
										maxWeightIndex = i;
									} else if (maxWeightIndex == -1) {
										maxWeightIndex = i;
									}
								}
							}
							if (maxWeightIndex > -1) {
								Page.selectedRadioIds = Page.comObj[maxWeightIndex];
							}

						}

						if (Page.selectedRadioIds) {
							Page.setImgToCheck(Page.selectedRadioIds);

							Page.compareChanged(groupId, oldSelectedRadioIds,
									Page.selectedRadioIds);
						} else {
							ASC.getEl("changedInfoContainer").setDisplayed(
									'none');
						}
					},
					arrayWeight :new Array(),
					setArrayWeight : function() {
						if (!Page.arrayWeight.length && Page.comObj) {
							// set item's weight,the first one in cids array has
							// maximum
							// weight.
							var cids = Page.comObj[0].cids;
							var trimGroup = Page.getFilterGroup(Page.filterGroups,
									this.variationType.trimTypeId);
							var engineGroup = Page.getFilterGroup(Page.filterGroups,
									this.variationType.engineTypeId);
							var transmissionGroup = Page.getFilterGroup(Page.filterGroups,
									this.variationType.transmissionTypeId);
							var driveGroup   = Page.getFilterGroup(Page.filterGroups,
									this.variationType.driveTypeId);
							if(trimGroup)
							{
								Page.arrayWeight[trimGroup.id] = 32;
							}
							if(engineGroup)
							{
								Page.arrayWeight[engineGroup.id] = 16;
							}
							if(transmissionGroup)
							{
								Page.arrayWeight[transmissionGroup.id] = 8;
							}
							if(driveGroup)
							{
								Page.arrayWeight[driveGroup.id] = 4;
							}

						}
					},
					compareChanged : function(groupId, oldRadioIds, newRadioIds) {
						var changeInfo = '';
						if (oldRadioIds && newRadioIds && Page.filterGroups) {
							var filter = null;
							for ( var p in oldRadioIds.cids) {
								if (p == groupId)
									continue;
								if (oldRadioIds.cids[p] != newRadioIds.cids[p]) {
									var filters = Page.getFiltersById(
											Page.filterGroups, p);
									changeInfo += ' and '
											+ Page.getFilterDescription(
													filters,
													oldRadioIds.cids[p])
											+ ' to '
											+ Page.getFilterDescription(
													filters,
													newRadioIds.cids[p]);
								}
							}

						}
						if (changeInfo.length > 0) {
							changeInfo = 'Changed ' + changeInfo.substring(4);
						
							ASC.getEl("changedInfoContainer").setDisplayed('');
							ASC.getEl("changedInfo").setValue(changeInfo);
						} else {
							ASC.getEl("changedInfoContainer").setDisplayed(
									'none');
						}

					},
					getFilterDescription : function(filters, id) {
						for ( var i = 0; i < filters.length; i++) {
							if (filters[i].id == id) {
								return filters[i].description;
							}
						}
						return '';
					},
					getFilterItem : function(groupId, itemId) {
						var filters = this.getFiltersById(this.filterGroups,
								groupId);

						if (filters) {
							for ( var i = 0; i < filters.length; i++) {
								if (filters[i].id == itemId) {
									return filters[i];
								}
							}
						}
						return null;
					},
					getFiltersById : function(filterGroups, id) {
						for ( var i = 0; i < filterGroups.length; i++) {
							if (filterGroups[i].id == id)
								return filterGroups[i].filters;
						}
						return null;
					},
					getFilterGroupIdByType : function(typeId) {
						for ( var i = 0; i < this.filterGroups.length; i++) {
							if (this.filterGroups[i].variationTypeID == typeId)
								return this.filterGroups[i].id;
						}
						return '';
					},
					getFilterGroupByType : function(typeId) {
						for ( var i = 0; i < this.filterGroups.length; i++) {
							if (this.filterGroups[i].variationTypeID == typeId)
								return this.filterGroups[i];
						}
						return null;
					},
					swapClass : function(src, oldClass, newClass) {
						if (src != null && src.className != oldClass) {
							src = src.parentNode;
						}
						if (src != null) {
							src.className = newClass;
						}
					},
					
					destroyWindow: function ()
					{
						this.window.suspendEvents();
						this.window.destroy();
						delete this.window;
					},
					
					initExtWindow: function ()
					{
						var windowId = Ext.id();
						var html = '<iframe src="' + ASC.cfg.getContextPath() + '/bmo/pricingDisclosure.do?hideClose=true" style="border: none;width:100%;height:100%;" id = "disclaimerFrame" name="disclaimerFrame" frameborder="0"></iframe>';
						
						this.window = new Ext.Window({
							id: windowId,
							cls: '',
							title: Page.returnImportDisclosureInfoTitle(),
							closable: true,
							closeAction: 'hide',
							draggable: false,
							header:true,
							width: 600,
							height: 290,			
							modal: true,
							resizable: false,
							plain: true,			
							layout: 'fit',
							border: false,
							items: {
								html: html,
								border: false
							}
						});
					},
					
					importDisclosureInfo: function()
					{
						//var html = ASC.get('midupdiv').		
						if (this.window == null) {
							this.initExtWindow();
						}
						this.window.show();	
					},
					OnItemMouseOver:function(index)
					{
						var el = ASC.getEl("item_body_"+index);
						if(el)
						{
							ASC.util.removeClass(el,"car_list_item_body");
							ASC.util.addClass(el,"itemBodyMouseOver");
						}
					},
					OnItemMouseOut:function(index)
					{
						var el = ASC.getEl("item_body_"+index);
						if(el)
						{
							ASC.util.removeClass(el,"itemBodyMouseOver");
							ASC.util.addClass(el,"car_list_item_body");
						}
					}
				});

ASC.onReady(Page.init, Page);