ASC.namespace('ASC.Chrysler.Configurator.Dialogs.MustHave');

(function () {
	
	ASC.loadBundle({
	    locale: 'en_CA',
	    
	    messages: {        
	        'musthave_title': 'YOUR SELECTION REQUIRES CHANGES',
	    	'musthave_cant_unselect_title': 'CANNOT DESELECT THE OPTION',       
	        'musthave_description': 'Description',
	        'musthave_msrp': 'MSRP*',
	        'musthave_required_option' : 'is required on the vehicle and cannot be deselected.',
	        'musthave_requires_selection' : 'requires the selection of one of the following options',
	        'musthave_helpMeHdr': 'Help me understand this',
	        'musthave_helpMeText': 'Some options are available only for certain models or in combination with other options. And there are some options of which you can only select one (like stereos or tires). If you change these, other selected options may no longer be available. If you make a change which requires another option to be added or removed, you will be offered the choice of continuing with the changes or cancelling'
	    }
	});
	
	ASC.loadBundle({
	    locale: 'fr_CA',
	    
	    messages: {    
	    	'musthave_title': 'YOUR SELECTION REQUIRES CHANGES',    
	    	'musthave_cant_unselect_title': 'CANNOT DESELECT THE OPTION',       
	        'musthave_description': 'Description',
	        'musthave_msrp': 'MSRP*',
	        'musthave_required_option' : 'is required on the vehicle and cannot be deselected.',
	        'musthave_requires_selection' : 'requires the selection of one of the following options',
	        'musthave_helpMeHdr': 'Help me understand this',
	        'musthave_helpMeText': 'Some options are available only for certain models or in combination with other options. And there are some options of which you can only select one (like stereos or tires). If you change these, other selected options may no longer be available. If you make a change which requires another option to be added or removed, you will be offered the choice of continuing with the changes or cancelling'
	    }
	});
	
	ASC.loadBundle({		
	    locale: 'en_US',
	    
	    messages: { 
	    	'musthave_title': 'YOUR SELECTION REQUIRES CHANGES',       
	    	'musthave_cant_unselect_title': 'CANNOT DESELECT THE OPTION',       
	        'musthave_description': 'Description',
	        'musthave_msrp': 'MSRP*',
	        'musthave_required_option' : 'is required on the vehicle and cannot be deselected.',
	        'musthave_requires_selection' : 'requires the selection of one of the following options',
	        'musthave_helpMeHdr': 'Help me understand this',
	        'musthave_helpMeText': 'Some options are available only for certain models or in combination with other options. And there are some options of which you can only select one (like stereos or tires). If you change these, other selected options may no longer be available. If you make a change which requires another option to be added or removed, you will be offered the choice of continuing with the changes or cancelling'
	    }
	});
	
	ASC.Chrysler.Configurator.Dialogs.MustHave = ASC.extend(Ext.Window, {
		
		selectBtn: null,
		closeBtn: null,
		
		mustHaveTpl: null,
		tableBodyTpl: null,
		
		id: null,
		cantUnselect: false,
		
		constructor: function (/*Object*/ configResponse, /*[Object]*/ cfg)
		{
			var me = this;
			
			this.configResponse = configResponse;
			this.cantUnselect = configResponse.options.length == 1;
			var closeBtnTitle = this.cantUnselect ? 'OK' : 'Cancel';
		
			var windowId =  this.id = Ext.id(); 
		
			this.initDlgTemplates();				
			var html = this.buildContents();
			
			this.closeBtn = new Ext.Button({
				text: closeBtnTitle, 
				cls: "x-btn-text",
				scope: this,
				ctCls: 'dlgBtn',
				handler: function () { me.fireEvent('cancel'); }
			});
			
			this.selectBtn = new Ext.Button({
				text: 'Select', 
				cls: "x-btn-text",
				scope: this,
				ctCls: 'dlgBtn',
				disabled: true,
				hidden: this.cantUnselect,
				handler: function () { 
					var opt = me.getSelectedOption();
					if (opt !== null) {
						me.fireEvent('optionSelected', opt);
					}			 
				}								
			});			
			
			var winCfg = ASC.apply({
				id: windowId,
				ctCls: 'ppweb-mustHaveDlg',
				title: ASC.message(this.cantUnselect ? 'musthave_cant_unselect_title' : 'musthave_title'),
				headerAsText: true,
				constrainHeader: true,
				draggable: true,
				closable: false,
				plain: true,
				layout: 'fit',
				border: false,
				modal: true,
				resizable: false,
				width: 550,
								
				items: {
					html: html
				},
				
				buttons: [
					this.selectBtn,
					this.closeBtn
				]	
			}, cfg);			
		
			ASC.Chrysler.Configurator.Dialogs.MustHave.superclass.constructor.call(this, winCfg);
			
			this.addEvents({
				optionSelected: true,
				cancel: true
			});			
		},
		
		//private
		getSelectedOption: function ()
		{			
			var inputs = document.getElementsByName(this.id + '_code');
			for (var i=0; i<inputs.length; i++) {
				var input = inputs[i];
				if (inputs[i].checked) {
					return inputs[i].value;				
				}
			}				
			return null;	
		},
		
		//private
		buildContents: function ()
		{	
			return this.mustHaveTpl.applyTemplate({
				firstOption: this.configResponse.options[0].description,
				options: this.configResponse.options,
				windowId: this.id
			});			
		},
		
		//private
		initDlgTemplates: function ()
		{
		    if (this.cantUnselect) {
			    this.mustHaveTpl = new Ext.XTemplate(
			        '<div class="a-mustHave-body">',			        	
			           '<div class="a-mustHave-requiredOption">{firstOption} ' + ASC.message('musthave_required_option') + '</div>',
			            '<div>',
							'<div class="a-helpMe-hdr">',
								'<a href="{[this.getHelpMeHref(values.windowId)]}">' + ASC.message('musthave_helpMeHdr') + '</a>',
								'<a href="{[this.getHelpMeHref(values.windowId)]}"><img src="{[ASC.cfg.getImgLocalePath()]}/bmo/bodycontainer_icon_09.gif" width="16" height="15" alt="" /></a>',
								'<a id="{windowId}_a-helpMe_close" href="{[this.getHelpMeHref(values.windowId)]}" style="visibility: hidden;">Close</a>',
							'</div>',
							'<div id="{windowId}_helpMe_text" class="a-help-me" style="display:none;">' + ASC.message('musthave_helpMeText') + '</div>',
						'</div>',
			        '</div>', {
						getHelpMeHref: function (windowId) {
							return 'javascript:var win=Ext.getCmp(\'' + windowId + '\'); if(win)win.toggleHelpMe();';
						}
					}					
			    );
		    } else {
				this.mustHaveTpl = new Ext.XTemplate(
					'<div class="a-mustHave-body">',
						'<h5>{firstOption} ' + ASC.message('musthave_requires_selection') + ':</h5>',					
							'<form action="javascript:void(0);" method="GET">',
								'<table class="tblMustHave" border="0" cellpadding="0" cellspacing="0">',								
									'<tr>',
										'<th class="input">&nbsp;</th>',
										'<th>'+ ASC.message('musthave_description') + '</th>',
										'<th class="number">'+ ASC.message('musthave_msrp') + '</th>',
									'</tr>',
									'<tpl for="options">',
										'<tpl if="xindex &gt; 1">',
											'<tr>',
												'<td class="input"><input type="radio" id="mh_{optCode}" name="{parent.windowId}_code" value="{optCode}" onclick="var w=Ext.getCmp(\'{parent.windowId}\'); if(w){ w.selectBtn.setDisabled(false); }" /></td>',
												'<td><label for="mh_{optCode}">{description}</label></td>',
												'<td class="number">{msrpFormatted}</td>',
											'</tr>',
										'</tpl>',
									'</tpl>',
								'</table>',	
								'<div>',
									'<div class="a-helpMe-hdr">',
										'<a href="{[this.getHelpMeHref(values.windowId)]}">' + ASC.message('musthave_helpMeHdr') + '</a>',
										'<a href="{[this.getHelpMeHref(values.windowId)]}"><img src="{[ASC.cfg.getImgLocalePath()]}/bmo/bodycontainer_icon_09.gif" width="16" height="15" alt="" /></a>',
										'<a id="{windowId}_a-helpMe_close" href="{[this.getHelpMeHref(values.windowId)]}" style="visibility: hidden;">Close</a>',
									'</div>',
									'<div id="{windowId}_helpMe_text" class="a-help-me" style="display:none;">' + ASC.message('musthave_helpMeText') + '</div>',
								'</div>',
							'</form>',
					'</div>', {
						getHelpMeHref: function (windowId) {
							return 'javascript:var win=Ext.getCmp(\'' + windowId + '\'); if(win)win.toggleHelpMe();';
						}					
					}
				);
			} 
			this.mustHaveTpl.compile();				
		},
		
		toggleHelpMe: function ()
		{		
			var el=Ext.get(this.id + '_helpMe_text');
			if(!el){ return; }
			
			if( el.dom.style.display == 'none' ){
				ASC.Chrysler.trackLinkMetrics('selection_requires_change','help_me_understand_this');
			}
			
			el.enableDisplayMode(); el.toggle();
			
			var close = Ext.get(this.id + '_a-helpMe_close');
			if (close) {
				close.setVisible(el.isDisplayed());
			}
			
			var o = this.getSize();
			o.height = (el.isDisplayed() ? o.height + 65 : o.height - 65);
			this.setSize(o);
		}
		
	});	
})();