/*
 * ASC.Chrysler.FAD.DealerList
 * 
 */
ASC.namespace('ASC.Chrysler.FAD.DealerList');
ASC.Chrysler.FAD.DealerList = ASC.extend(Ext.util.Observable,{
	renderTo: null,
	dealerData: null,
	pageBarSize:3,
	currentDealerIndex: -1,
	isPrint:false,
	constructor: function (dealerData,cfg)
	{
		ASC.Chrysler.FAD.DealerList.superclass.constructor.apply(this);
		this.addEvents({"render":true,"clickDealerInfo":true,"mouseOverDealerInfo":true,"mouseOutDealerInfo":true});		
		ASC.apply(this, cfg);
		this.dealerData = dealerData;	
		this.dealerTpls.init(this);
		this.render();
		if(this.renderToPageBar)
		{
			this.renderPageBar(this.pageIndex, this.pageCount)
		}
	},
	render: function()
	{
		if(this.isPrint)
		{
			this.dealerTpls.printDealerListTpl.overwrite(this.renderTo, this.dealerData);
		}
		else
		{
		this.dealerTpls.dealerListTpl.overwrite(this.renderTo, this.dealerData);
		this._bindHoverEvent(ASC.getEl(this.renderTo));
		}
		this.currentDealerIndex = -1;

		this.fireEvent("render");
	},
	renderDirectionDealer: function(selectedDealerIndex)
	{
		this.currentDealerIndex = selectedDealerIndex;
		this.dealerTpls.directionDealerTpl.overwrite(this.renderTo,this.dealerData[this.currentDealerIndex]);
	},
	renderPageBar: function(pageIndex,pageCount)
	{
		this.pageIndex = pageIndex;
		this.pageCount = pageCount;
		var startIndex = pageIndex-1<1?1:pageIndex-1;
		startIndex = pageIndex ==pageCount?pageCount-this.pageBarSize+1:startIndex;
		if(startIndex<1)
		{
			startIndex = 1;
		}
		//var pageBarPageCount=0;//= pageCount%this.pageBarSize ==0? parseInt(pageCount/this.pageBarSize):parseInt(pageCount/this.pageBarSize)+1;
		
		//var pageBarPageIndex = pageIndex%this.pageBarSize == 0 ? parseInt(pageIndex/this.pageBarSize):parseInt(pageIndex/this.pageBarSize)+1;
		var showPageCount = startIndex+this.pageBarSize-1>pageCount?pageCount-startIndex+1:this.pageBarSize;//pageBarPageIndex<pageBarPageCount?this.pageBarSize:pageCount%this.pageBarSize==0?this.pageBarSize:pageCount%this.pageBarSize;
	
		this.dealerTpls.pageBarTpl.overwrite(this.renderToPageBar,{pageIndex:pageIndex,showPageCount:new Array(showPageCount),pageCount:pageCount,
			startIndex:startIndex});
	},
	clickDealerInfo:function(xindex, isFromMap)
	{
	    // We use extra parameter to differentiate whether we clicked on the top row 
	    // or on the map pin. 
	    if (typeof clickMarker == 'undefined') {
	       clickMarker = false;
	    }
	    
		var container = ASC.getEl('dealers').dom;
		if(this.currentDealerIndex > -1)
		{
			if(container.childNodes[this.currentDealerIndex])
			{
				if(container.childNodes[this.currentDealerIndex].isSelected)
				{
					this._unselectedClass(container.childNodes[this.currentDealerIndex]);
				}
				container.childNodes[this.currentDealerIndex].isClick = false;		
			}
		}
		if(container.childNodes[xindex])
		{
			if(!container.childNodes[xindex].isSelected)
			{
				this._selectedClass(container.childNodes[xindex]);
			}
			container.childNodes[xindex].isClick = true;
		}
		var oldDealerIndex = this.currentDealerIndex
		this.currentDealerIndex = xindex;
		
		var dealer = this.dealerData[xindex];
		this.fireEvent("clickDealerInfo",{xindex:xindex,oldIndex:oldDealerIndex,dealer: dealer, isFromMap: isFromMap});
	},
	unClickDealerInfo: function(xindex)
	{
		var container = ASC.getEl('dealers').dom;
		if(container.childNodes[xindex])
		{
			if(container.childNodes[xindex].isSelected)
			{
				this._unselectedClass(container.childNodes[xindex]);
				if(xindex == this.currentDealerIndex)
				{
					this.currentDealerIndex = -1;
				}
			}
			container.childNodes[xindex].isClick = false;		
		}		
	},
	_bindHoverEvent: function(container)
	{
		var child = container.down('div');
		while(child != null){
//			child.hover(onMouseOver,onMouseOut, child);
			child.on('mouseover',this._onMouseOver,this,{el:child.dom});
			child.on('mouseout',this._onMouseOut,this,{el:child.dom});
			child = child.next();
		}
	},
	_onMouseOver: function(evt, el, options)
	{
		if(evt.within(options.el, true) || options.el.isClick) return;
		ASC.log("mouse_over:"+el.tagName+el.id+el.type+el.className);
		if(!options.el.isSelected)
		{
			this._selectedClass(options.el);
		}
	},
	_onMouseOut: function(evt, el, options)
	{
		if(evt.within(options.el, true) || options.el.isClick) return;
		ASC.log("mouse_out:"+el.tagName+el.id+el.type+el.className);
		if(options.el.isSelected)
		{
			this._unselectedClass(options.el);
		}
	},	
	_selectedClass: function(el)
	{
		el.isSelected = true;
		this._changeClass(el, true);
		this._accessNodes(el, true);
	},
	_unselectedClass: function(el)
	{
		el.isSelected = false;
		this._changeClass(el, false);
		this._accessNodes(el, false);
	},
	_accessNodes: function(dom,selected)
	{		
		for(var i = 0;i<dom.childNodes.length;i++)
		{
			this._changeClass(dom.childNodes[i],selected);
			if(dom.childNodes[i].hasChildNodes)
			{
				this._accessNodes(dom.childNodes[i],selected);
			}
		}
	},
	_changeClass: function(dom,selected)
	{
		if(dom && dom.tagName == 'DIV' && !dom.getAttribute('nochange') && dom.className)
		{
			if(selected)
			{
				dom.className += '_selected';
			}
			else
			{
				dom.className = dom.className.replace('_selected','');
			}
		}
	},
	dealerTpls: {
		init: function(scope)
		{
			this.me = scope;
			if(scope.isPrint)
			{
				this.initPrintDealerListTpl();
			}
			else
			{
			this.initDealerListTpl();
			}
			this.initDirectionDealer();
			this.initPageBar();
		},
		initDealerListTpl: function(){		
			this.dealerListTpl = new Ext.XTemplate(
					'<tpl for=".">',
					'<div class="sub_navigation_middle_common"><div id="preferred_dealer_header_{dealerCode}" class="preferred_dealer_header{[this.isShowPreferredDealerHeader(values.dealerCode) ? "" : "_hidden"]}"><div class="preferred_dealer_header_sub">{[this.translate("fad_findDealers_preferredDealer")]}</div></div>',
		                '<div class="sub_navigation_middle_top" onclick="Page.dealersList.clickDealerInfo({[xindex - 1]}, false);">',
			            	'<div class="sub_navigation_middle_leftupimg" nochange="true" ><div class="number"><div class="number_num">{[xindex + (this.el.pageIndex-1)*this.el.pageSize]}</div></div></div>',
	                        '<div class="sub_navigation_middle_onelinetext" title="{name}">{name:this.subStr}</div>',
	                        '<div class="sub_navigation_middle_otherlinetext">',
	                        	'<tpl if="this.isValidDistance(distance)">',
	                        		'<div class="distanceDesc" nochange="true" >{distance} {[this.translate("fad_findDealers_distanceDesc")]}</div>',
	                        	'</tpl>',
	                        	'<tpl if="fiveStar == \'Y\'">',
	                        		'<div class="smallFiveStar" nochange="true" style="background:transparent url( {[ASC.cfg.getBaseIofUrl()]}?IMG=Fivestar.jpg&width=64 ) no-repeat scroll 0 0;"></div>',
	                        	'</tpl>',
	                        '</div>',
	                        '<div class="sub_navigation_middle_otherlinetext" title="{address1}">{address1:this.subAndLowerCase}</div>',
	                        '<div class="sub_navigation_middle_otherlinetext" title="{city}, {state} {[this.formatZip(values.zip)]}">{[this.subStr(this.lowerCase(values.city)+", "+values.state+" "+this.formatZip(values.zip))]}</div>',
	                        '<div class="sub_navigation_middle_phonetext">{[this.translate("fad_findDealers_phone")]}: {[this.formatPhone(values.phone)]}</div>',
			            '</div>',
						'<div id = "visitDealerWebsite" class="sub_navigation_middle_bottom" onclick="Page.dealersList.clickDealerInfo({[xindex - 1]});ASC.Chrysler.trackLinkMetrics(\'content\',\'dealer_site_{dealerCode}\');"><a href="javascript:void(0);">{[this.translate("fad_findDealers_dealInfoButton")]}</a></div>',
		            '</div>',
					'</tpl>', {					
						translate: function (key)
						{
							return ASC.message(key);
						},
						subAndLowerCase : function(str){
							if(str.length > 18)
							{
								str = str.toLowerCase();
								return str.substr(0,18) + '...';
							}
							else
							{
								return str.toLowerCase();
							}
						},
						lowerCase: function(str){
							return str.toLowerCase();
						},
						subStr: function (str)
						{
							if(str.length > 18)
							{
								return str.substr(0,18) + '...';
							}
							else
							{
								return str;
							}
						},
						isShowPreferredDealerHeader:function(dealerCode){
							var preferredDealerCode = ASC.Chrysler.getPreferredDealer();//ASC.Cookies.get("pd");
							
							if(preferredDealerCode && preferredDealerCode==dealerCode){
								return true;
							}	
							return false;
						},
						formatPhone: function(phone){
							return ASC.Chrysler.formatPhoneNumberUseHyphen(phone);
						},
						formatZip: function(zip){
							return ASC.util.formatZipPostalCode(zip);
						},
						isValidDistance: function(distance){
								if( distance ){
									return true;
								}
								return false;
							}
					});
			this.dealerListTpl.el = this.me;
			this.dealerListTpl.compile();
		},
		initPrintDealerListTpl: function(){		
			this.printDealerListTpl = new Ext.XTemplate(
					'<tpl for=".">',
					'<div class="sub_navigation_middle_common"><div id="preferred_dealer_header_{dealerCode}" class="preferred_dealer_header{[this.isShowPreferredDealerHeader(values.dealerCode) ? "" : "_hidden"]}"><div class="preferred_dealer_header_sub">{[this.translate("fad_findDealers_preferredDealer")]}</div></div>',
		                '<div class="sub_navigation_middle_top">',
			            	'<div class="sub_navigation_middle_leftupimg" nochange="true" ><div class="number"><div class="number_num">{[xindex + (this.el.pageIndex-1)*this.el.pageSize]}</div></div></div>',
	                        '<div class="sub_navigation_middle_onelinetext" title="{name}">{name:this.subStr}</div>',
	                        '<div class="sub_navigation_middle_otherlinetext">',
	                        	'<tpl if="this.isValidDistance(distance)">',
	                        		'<div class="distanceDesc" nochange="true" >{distance} {[this.translate("fad_findDealers_distanceDesc")]}</div>',
	                        	'</tpl>',
	                        	'<tpl if="fiveStar == \'Y\'">',
	                        		'<div class="smallFiveStar" nochange="true" style="background:transparent url( {[ASC.cfg.getBaseIofUrl()]}?IMG=Fivestar.jpg&width=64 ) no-repeat scroll 0 0;"></div>',
	                        	'</tpl>',
	                        '</div>',
	                        '<div class="sub_navigation_middle_otherlinetext" title="{address1}">{address1:this.subAndLowerCase}</div>',
	                        '<div class="sub_navigation_middle_otherlinetext" title="{city}, {state} {[this.formatZip(values.zip)]}">{[this.subStr(this.lowerCase(values.city)+", "+values.state+" "+this.formatZip(values.zip))]}</div>',
	                        '<div class="sub_navigation_middle_phonetext">{[this.translate("fad_findDealers_phone")]}: {[this.formatPhone(values.phone)]}</div>',
			            '</div>',
		            '</div>',
					'</tpl>', {					
						translate: function (key)
						{
							return ASC.message(key);
						},
						subAndLowerCase : function(str){
							if(str.length > 18)
							{
								str = str.toLowerCase();
								return str.substr(0,18) + '...';
							}
							else
							{
								return str.toLowerCase();
							}
						},
						lowerCase: function(str){
							return str.toLowerCase();
						},
						subStr: function (str)
						{
							if(str.length > 18)
							{
								return str.substr(0,18) + '...';
							}
							else
							{
								return str;
							}
						},
						isShowPreferredDealerHeader:function(dealerCode){
							var preferredDealerCode = ASC.Chrysler.getPreferredDealer();//ASC.Cookies.get("pd");
							
							if(preferredDealerCode && preferredDealerCode==dealerCode){
								return true;
							}	
							return false;
						},
						formatPhone: function(phone){
							return ASC.Chrysler.formatPhoneNumberUseHyphen(phone);
						},
						formatZip: function(zip){
							return ASC.util.formatZipPostalCode(zip);
						},
						isValidDistance: function(distance){
								if( distance ){
									return true;
								}
								return false;
							}
					});
			this.printDealerListTpl.el = this.me;
			this.printDealerListTpl.compile();
		},
		initDirectionDealer: function()
		{
			this.directionDealerTpl = new Ext.XTemplate(
					'<div class="sub_navigation_middle_common_selected">',
		                '<div class="sub_navigation_middle_top_selected">',
			            	'<div class="sub_navigation_middle_leftupimg"><div class="number_selected"><div class="number_num_selected">{[this.translate("fad_findDealers_b")]}</div></div></div>',
	                        '<div class="sub_navigation_middle_onelinetext_selected" title="{values.name}">{name:this.subStr}</div>',
	                        '<div class="sub_navigation_middle_otherlinetext_selected">',
	                        	'<tpl if="this.isValidDistance(values.distance)">',
		                        	'<div class="distanceDesc" nochange="true" >{values.distance} {[this.translate("fad_findDealers_distanceDesc")]}</div>',
		                        '</tpl>',
	                        	'<tpl if="values.fiveStar == \'Y\'">',
	                        		'<div class="smallFiveStar" nochange="true" style="background:transparent url( {[ASC.cfg.getBaseIofUrl()]}?IMG=Fivestar.jpg&width=64 ) no-repeat scroll 0 0;"></div>',
	                        	'</tpl>',
	                        '</div>',
	                        '<div class="sub_navigation_middle_otherlinetext_selected" title="{values.address1}">{address1:this.subAndLowerCase}</div>',
	                        '<div class="sub_navigation_middle_otherlinetext_selected" title="{values.city}, {values.state} {[this.formatZip(values.zip)]}">{[this.subStr(this.lowerCase(values.city)+", "+values.state+" "+ this.formatZip(values.zip))]}</div>',
	                        '<div class="sub_navigation_middle_otherlinetext_selected">{[this.translate("fad_findDealers_phone")]}: {[this.formatPhone(values.phone)]}</div>',
			            '</div>',
						'<div class="sub_navigation_middle_bottom_selected" ></div>',
		            '</div>',
		            '<div class="backToMapView"><a href="javascript:ASC.Chrysler.trackLinkMetrics(\'content\',\'back_to_map_view\');Page.backToMapView();">{[this.translate("fad_findDealers_backToMapView")]}</a></div>',{					
						translate: function (key)
						{
							return ASC.message(key);
						},
						subAndLowerCase: function (str)
						{
							if(str.length > 18)
							{
								str = str.toLowerCase();
								return str.substr(0,18) + '...';
							}
							else
							{
								return str.toLowerCase();
							}
						},
						lowerCase:function(str){
							return str.toLowerCase();
						},
						subStr: function (str)
						{
							if(str.length > 18)
							{
								return str.substr(0,18) + '...';
							}
							else
							{
								return str;
							}
						},
						formatPhone: function(phone){
							return ASC.Chrysler.formatPhoneNumberUseHyphen(phone);
						},
						formatZip: function(zip){
							return ASC.util.formatZipPostalCode(zip);
						},
						
						isValidDistance: function(distance){
								if( distance ){
									return true;
								}
								return false;
							}
					});
			this.directionDealerTpl.compile();
		},
		initPageBar: function()
		{
			/*this.pageBarTpl = new Ext.XTemplate(
					'{[this.translate("fad_findDealers_moreDealers")]}',
					'<tpl if="values.pageBarPageIndex!=1"><a href="javascript:Page.dealersData.setPageBarSelectedIndex(-1,{pageBarPageIndex},{pageBarSize});"><<</a></tpl><tpl for="showPageCount">',	
						' <a {[parent.pageBarSize*(parent.pageBarPageIndex-1)+xindex === parent.pageIndex ? "":"class=unselected"]} ',
							'href="javascript:ASC.Chrysler.trackLinkMetrics(\'content\',\'page{[parent.pageBarSize*(parent.pageBarPageIndex-1)+xindex]}\');{[parent.pageBarSize*(parent.pageBarPageIndex-1)+xindex === parent.pageIndex ? "javascript:void(0);":"javascript:Page.dealersData.setPageIndex("+(parent.pageBarSize*(parent.pageBarPageIndex-1)+xindex)+");"]}">{[parent.pageBarSize*(parent.pageBarPageIndex-1)+xindex]}</a> |',
					'</tpl><tpl if="values.pageBarPageCount&gt;1&amp;&amp;values.pageBarPageIndex!=values.pageBarPageCount"><a href="javascript:Page.dealersData.setPageBarSelectedIndex(1,{pageBarPageIndex},{pageBarSize});">>></a></tpl>', {					
						translate: function (key)
						{
							return ASC.message(key);
						}
					}); */
			this.pageBarTpl = new Ext.XTemplate(
					'{[this.translate("fad_findDealers_moreDealers")]}',
					'<tpl if="values.pageIndex!=1"><a class="unselectedarrow" href="javascript:Page.dealersData.setPageIndex(1);" onclick="javascript:ASC.Chrysler.trackLinkMetrics(\'content\',\'first_set\');">&nbsp;<<&nbsp;</a></tpl><tpl for="showPageCount">',	
						' <a {[parent.startIndex+xindex-1 === parent.pageIndex ? "":"class=unselected"]} ',
							'href="javascript:ASC.Chrysler.trackLinkMetrics(\'content\',\'page{[parent.startIndex+xindex-1]}\');{[parent.startIndex+xindex-1 === parent.pageIndex ? "javascript:void(0);":"javascript:Page.dealersData.setPageIndex("+(parent.startIndex+xindex-1)+");"]}">{[parent.startIndex+xindex-1]}</a> |',
					'</tpl><tpl if="values.pageCount!=values.pageIndex"><a class="unselectedarrow" href="javascript:Page.dealersData.setPageIndex({values.pageCount});" onclick="javascript:ASC.Chrysler.trackLinkMetrics(\'content\',\'last_set\');">&nbsp;>>&nbsp;</a></tpl>', {					
						translate: function (key)
						{
							return ASC.message(key);
						}
					}); 
			this.pageBarTpl.compile();
		}
	},
	update: function (dealerData){
		this.dealerData = dealerData;
		this.render();
	}
});