Ext.namespace("App.components");

Ext.BLANK_IMAGE_URL = '/demo/js/ext/resources/images/default/s.gif';
Ext.SSL_SECURE_URL='/demo/js/ext/resources/images/default/s.gif';

App.components.cToolBar=function(config){
	//this.start=0;
	this.limit=10;
	Ext.apply(this, config);		
	this.init();
};

App.components.cToolBar.prototype={
	init : function(config){		
		config=config||this.config;
		var currentObject=this;
		
 		var itemNumber='0';
 		var lastItemNumber='0'		
		this.pagingTextDetail = new Ext.Toolbar.TextItem('<div class="showrecord">Found <b>' + lastItemNumber + '</b> matching products</div>');		
		
 		/******************************Paging Toolbar********************************************/ 		 		
 		this.pagingToolBar = new Ext.PagingToolbar({id:'pagingToolBar',	
 			store:this.store, 
 			pageSize:this.limit, 	
 			border:false, 
 			cls:'pgToolbar'
 		}); 	
 			
 		this.store.addListener('load', function(){ 			
 			this.refresh();
 		}, this); 			 				 		 		
 		/********************************************************************************/
 		
 		/******************************ComboBox ASC DESC*********************************/
		this.simpleStore = new Ext.data.SimpleStore({
		    fields:[{name:'val'}, 
		            {name:'displayVal'}],
		    data:[	['Title', 'Title'], 
		          	['Price', 'Price']		          	
		         ]
		});
 
	    this.sortComboBox = new Ext.ux.SelectBox({
		    store: this.simpleStore,
		    displayField:'displayVal',
		    typeAhead: true,
		    mode: 'local',
		    triggerAction: 'all',
		    emptyText:'Sort By...',
		    selectOnFocus:true,
		    width:100	    		    
		});

		if( (typeof(this.productsCmp.orderBy)!="undefined")&&(this.productsCmp.orderBy!="")){
			this.sortComboBox.setValue(this.productsCmp.orderBy);
		}else{
			this.sortComboBox.setValue('Title');	
		} 
 		
 
 		this.sortComboBox.addListener('select', function(a,b,c,d){
 			this.store.orderBy=b.data.val; 			
 			this.productsCmp.reloadStore();
 			currentObject.productsCmp.orderBy=b.data.val;
 		}, this);
 
 		this.direction=new App.components.modeSelector({
 			dir:currentObject.productsCmp.orderByDir,
			allowBoth:false,
			text:'direction',
			xtype:'button',
			scope:this,
			handler:function(a,b,c){				
				currentObject.productsCmp.doOrderBy(a,b,c,this);										
			}												
		}); 
  		/********************************************************************************/
 
 		/******************************ToolBar*******************************************/
 		this.aToolbar = new Ext.Toolbar({
 			id:'toolBar',
			border:false,			
 			items:[this.pagingTextDetail, this.pagingToolBar, '->', this.sortComboBox, this.direction]
 		}); 		 	 		 		
  		/********************************************************************************/  						
	},
	
	refresh:function(){
		var currentObject = this;		  		  						
		currentObject.pagingTextDetail.getEl().innerHTML=('<div class="showrecord">Found <b>' + (currentObject.store.reader.jsonData.TOTAL) +'</b> matching products <div>');;			
	}
}
Ext.extend(App.components.cToolBar, Ext.util.Observable, App.components.cToolBar.prototype);


App.components.products=function(config){
	this.start=0;
	this.limit=10;	
	this.lastQueryParam="";
	this.currentQueryParam=""
	Ext.apply(this, config);		
	this.init();
};

App.components.products.prototype={
	init : function(config){
		config=config||this.config;
		var currentObject=this;
 	
		/***************************JSON STORE **********************************************************/
		this.cm = [
					{name:'ID', type:'int'},					
					{name:'TITLE', type:'string'},					
					{name:'SUMMARY', type:'string'},
					{name:'IMAGE', type:'string'},
					{name:'PRICEEXVAT', type:'string'},
					{name:'PRICEINCVAT', type:'string'}															
		]; 

		this.handler="/demo/include/graphic/productlisting/getProducts.cfm"
		this.action="getAllProducts";	
		
		this.record=new Ext.data.Record.create(this.cm);	
		this.reader=new Ext.data.JsonReader({id:'readerId', root:'RESULTS', totalProperty:'TOTAL'}, this.record);		 
		this.url=this.handler;			
		this.proxy = new Ext.data.HttpProxy({url: this.url, method: 'GET'});
		if( typeof(this.a_id)=="undefined"){					
			this.baseParameters ={action:this.action, orderBy:'Title', direction:'ASC'};			
		}
		else{			
				this.baseParameters ={ action:this.action, a_id:this.a_id, orderBy:'Title', direction:'ASC' };
		}	
		if(this.orderBy)
			this.baseParameters.orderBy=this.orderBy;
		
		if(this.orderByDir)		 				
			this.baseParameters.direction=this.orderByDir;

		if(this.items){
			this.baseParameters.items=this.items;
			this.baseParameters.action="getFilteredProducts" /* georgep 20090914 */			

/*	georgep 20090914			
			var itemsArr = this.items.split(",");									
			if(this.filterCmp)
			{
				if(itemsArr != null & itemsArr.length>0){
					this.baseParameters.action="getFilteredProducts"				
					for(var k=0; k<itemsArr.length; k++){
						for( var j = 0; j < this.filterCmp.arrCheckBoxes.length; j++){
							if (itemsArr[k]==this.filterCmp.arrCheckBoxes[j].getId())
								this.filterCmp.arrCheckBoxes[j].setValue(true);
								//this.filterCmp.arrCheckBoxes[j].checked=true;											
						} 
					}
				}
			}
*/						 
		}
									
		this.store = new Ext.data.Store({id:'productsStore', 
		                                 proxy: this.proxy,
		                                 reader: this.reader, 
		                                 autoLoad:false,
		                                 remoteSort:true, 
		                                 baseParams:this.baseParameters//, 
		                                 /*start:this.start, 
		                                 limit:this.limit*/});	
 		this.store.addListener('load', function(){ 			 			
 			setHistoryParameters();
 		}, this);		                                 			
		                                 			
		/********************************************************************************************/
	
		/*********************************XTEMPLATE & DATAVIEW***************************************/
		this.tpl = Ext.XTemplate.from("preview-tpl");
		
		this.dView = new Ext.DataView({
			id:'dView',	
			store: this.store, 		
			tpl: this.tpl,
			emptyText:'No Products Available',
			itemSelector: 'div.productListItemOuter',
			loadingText:'Loading'						
		}); 
				
 		this.dView.addListener('beforerender', function(){ 	

 			currentObject.cacheQueryParam();
 			var params=new Object();
 			if(currentObject.start){ 			 	
		 		currentObject.start= parseInt(currentObject.start);
 			 	params.start= currentObject.start;
 			}else{
 				currentObject.start=0;
 				params.start= currentObject.start;
 			}
 				 			 	
			if(currentObject.limit)
				params.limit=currentObject.limit;

 			this.store.load({params:params}); 	
			currentObject.lastQueryParam = currentObject.currentQueryParam; 					
 		})		  
				
		this.topCToolbar = new App.components.cToolBar({store:this.store, productsCmp:this});
		this.topCToolbar.productsCmp=currentObject; 
		this.topCToolbar.aToolbar.render("toolBarOuter");
 		 		
		this.bottomCToolbar = new App.components.cToolBar({store:this.store, productsCmp:this}); 
		this.bottomCToolbar.aToolbar.render("bottomToolBarOuter"); 
		
		this.topCToolbar.sortComboBox.addListener('select', function(a,b,c,d){
 			this.store.orderBy=b.data.val; 			
 			this.bottomCToolbar.sortComboBox.setValue(b.data.displayVal);
 			this.reloadStore();
 		}, this);						
 		
		this.bottomCToolbar.sortComboBox.addListener('select', function(a,b,c,d){
 			this.store.orderBy=b.data.val; 			
 			this.topCToolbar.sortComboBox.setValue(b.data.displayVal);
 			this.reloadStore();
 		}, this); 		
 		 		
		this.topCToolbar.direction.menu.items.items[0].addListener('click', function(a,b){
			this.topCToolbar.direction.menu.shadow=false;
			this.bottomCToolbar.direction.setIconClass(a.text.toLowerCase());
			this.bottomCToolbar.direction.setText(a.text);				
 		}, this); 		
		
		this.topCToolbar.direction.menu.items.items[1].addListener('click', function(a,b){
			this.topCToolbar.direction.menu.shadow=false;
			this.bottomCToolbar.direction.setIconClass(a.text.toLowerCase());
			this.bottomCToolbar.direction.setText(a.text);				
 		}, this); 		

		this.bottomCToolbar.direction.menu.items.items[0].addListener('click', function(a,b){
			this.topCToolbar.direction.menu.shadow=false;
			this.topCToolbar.direction.setIconClass(a.text.toLowerCase());
			this.topCToolbar.direction.setText(a.text);
 		}, this);
		 		 
		this.bottomCToolbar.direction.menu.items.items[1].addListener('click', function(a,b){
			this.topCToolbar.direction.menu.shadow=false;
			this.topCToolbar.direction.setIconClass(a.text.toLowerCase());
			this.topCToolbar.direction.setText(a.text);
 		}, this);		
		
		//add listeners to each and every checkbox
		//It is required to add listeners here instead of right when the checkbox component is
		//constructed because i need to check if there are items already selected
		//if listeners are added when the object is constructed and there are items already selected
		//then two queries are executed.
		if(this.filterCmp)
		{					
			this.filterCmp.addCheckBoxListeners();
		}		
			
		this.dView.render("productsOuter");			
							 		 		
	 	if(this.filterCmp && this.filterCmp !=""){
	 		this.filterCmp.productsCmp=this;
	 	}	 			
	},
	reloadStore:function(queryParam){
		var currentObject=this;
				
		if(typeof(this.store.orderBy) !="undefined" &&this.store.orderBy !="")
		{
			this.store.baseParams.orderBy=this.store.orderBy;
			this.currentQueryParam=this.currentQueryParam+","+"orderBy:"+this.store.orderBy; 
		}		
		
		if(typeof(this.store.direction) !="undefined" &&this.store.direction !="")
		{
			this.store.baseParams.direction=this.store.direction;
			this.currentQueryParam=this.currentQueryParam+","+"direction:"+this.store.direction;
		}		
		
		this.cacheQueryParam();
		if(this.currentQueryParam!=this.lastQueryParam){
					
			this.store.load();
				
		}
		
		this.lastQueryParam = this.currentQueryParam;			
	},
	
	doOrderBy:function(a,b,c,d){
		var currentObject=this;
		if(a.val==2)
		{
			this.store.direction="DESC";
			currentObject.orderByDir="DESC";
		}
		else{
			this.store.direction="ASC"
			currentObject.direction="ASC";
		}
		this.reloadStore();		
	},
	
	cacheQueryParam:function(){
		var currentObject=this;
		
		/****************BEG Cache Parameters***************************/		
		this.currentQueryParam="";
		if( typeof(this.store.baseParams.action) !="undefined" && this.store.baseParams.action!=""){
			this.currentQueryParam="action:"+this.store.baseParams.action;
		}						
		
		if( typeof(this.store.baseParams.a_id) !="undefined" && this.store.baseParams.a_id!=""){
			this.currentQueryParam=this.currentQueryParam+","+"a_id:"+this.store.baseParams.a_id;
		}
		
		if( typeof(this.store.baseParams.orderBy) !="undefined" && this.store.baseParams.orderBy!=""){
			this.currentQueryParam=this.currentQueryParam+","+"orderBy:"+this.store.baseParams.orderBy;
		}
		
		if( typeof(this.store.baseParams.direction) !="undefined" && this.store.baseParams.direction!=""){
			this.currentQueryParam=this.currentQueryParam+","+"direction:"+this.store.baseParams.direction;			
		}						
		
		if( typeof(this.store.baseParams.items) !="undefined" && this.store.baseParams.items!=""){
			this.currentQueryParam=this.currentQueryParam+","+"items:"+this.store.baseParams.items;
		}		
		/****************END Cache Parameters***************************/				 
	}							
}

Ext.extend(App.components.products, Ext.util.Observable, App.components.products.prototype);

App.components.formFilter=function(config){
	Ext.apply(this, config);	
	this.init();
};

App.components.formFilter.prototype={
	init : function(config){
		config=config||this.config;
		var currentObject=this;
		this.hasCheckboxListeners=false;
		this.arrCheckBoxes = new Array();
		this.arrFieldSet = new Array();				
		this.category=this.config.category;		
		//if there are no categories then just return
		if(this.category.length==0)
			return;
		
		this.form = new Ext.form.FormPanel({
			id:'filteredForm',			
			border:false
		});
 	
		for(j=0; j<this.category.length; j++)
		{
			this.arrFieldSet[this.arrFieldSet.length]= new Ext.form.FieldSet({
				id:this.category[j].ID,
				title:this.category[j].TITLE,
				collapsed:false,
				collapsible:false,
				autoHeight:true,	
				autoWidth:true, 							
				border:false,
				cls:'productsFieldSet'				
			});
			
			this.delayedTask = new Ext.util.DelayedTask();
			currentObject.myItems="";
			for(i=0; i<this.category[j].CHILD.length; i++){
				this.arrCheckBoxes[this.arrCheckBoxes.length]= new Ext.form.Checkbox({
					id:this.category[j].CHILD[i].ID,
					hideLabel:true,
					boxLabel:this.category[j].CHILD[i].TITLE,
					stateful:true,
					checked:false,					
					value:this.category[j].CHILD[i].ID,					
					scope:this//,
					//listeners:{
					//	check:function(a,b){							
					//		var d = new Date();							
					//		currentObject.delayedTask.delay(500, currentObject.doFilter, currentObject, [a,b] );																												 
					//	}
					//}						
				});
			
				this.arrFieldSet[this.arrFieldSet.length-1].add(this.arrCheckBoxes[this.arrCheckBoxes.length-1]);								
			}
			this.form.add(this.arrFieldSet[this.arrFieldSet.length-1]);									
		}
		
		this.selectCheckBox();		
			
		this.clearFiltering = new Ext.Button({
			text:'Clear Filtering',
			scope:currentObject,
			handler:currentObject.clearFiltering
		});		
														
		this.form.add(this.clearFiltering);
				
		this.form.addListener('beforeshow', function(){
				this.applyCss();
				if(typeof(window.products)!="undefined"){										
					this.productsCmp=window.products;
					this.addCheckBoxListeners();					 
				}								
		},this);		


		//if(!Ext.isIE6){}										
		this.form.hide();											
		this.form.render("narrowedSelection");	
		this.form.show();
	},
	
	buildQueryParam: function(){
		var currentObject=this;
		
		var queryParam=""; //"allProducts&";
		var sep="";
		var foundFstItem=false;
		
		for(i=0; i<this.form.getForm().items.items.length; i++){
			if(this.form.getForm().items.items[i].getValue()==true){
				
				queryParam= queryParam+sep+this.form.getForm().items.items[i].value;
				if(foundFstItem==false){
					sep=",";
					foundFstItem=true;
				}	
			}
		}
		return queryParam;		
	},
	
	doFilter: function(a,b){
		var currentObject=this;
		
		var queryParam = currentObject.buildQueryParam();							
	
		var queryParamArr = new Array(2);
		if(queryParam!=""){//there is at list one Product category selected
			currentObject.productsCmp.store.baseParams={a_id:currentObject.productsCmp.a_id, action:'getFilteredProducts', items:queryParam};						
		}
		else if(queryParam==""){//there are no product categories selected
			currentObject.productsCmp.store.baseParams={a_id:currentObject.productsCmp.a_id, action:'getAllProducts' /*, items:queryParam*/};						
		}
			
		currentObject.productsCmp.store.filterParams = queryParamArr;
		currentObject.productsCmp.reloadStore();
	},
	
	clearFiltering:function(){
		var currentObject=this;
		
		for(i=0; i<this.form.getForm().items.items.length; i++){
			if(this.form.getForm().items.items[i].getValue()==true)
				this.form.getForm().items.items[i].setValue(false);
		}
	},
	
	applyCss: function() {

		var arrLegend = Ext.query("form fieldset legend[class=x-fieldset-header x-fieldset-header-noborder x-unselectable]");
		
		for(var i=0; i < arrLegend.length; i++){
			if(Ext.isIE6 || Ext.isIE7){
				arrLegend[i].className="x-fieldset-header x-fieldset-header-noborder x-unselectable legendIE";
			}
		}

		var arrFieldsetLabel = Ext.query("#filteredForm .x-fieldset-header-text"); 				
		for(var i=0; i < arrFieldsetLabel.length; i++){
			if(Ext.isIE6 || Ext.isIE7){
				arrFieldsetLabel[i].className="x-fieldset-header-text fieldSetLabel fieldSetLabelIE";	
			}else{
				arrFieldsetLabel[i].className="x-fieldset-header-text fieldSetLabel";	
			}			
		}

		//var arrCheckBox = Ext.query("form fieldset *[class=x-form-item x-hide-label]"); 
		//var arrCheckBox = Ext.query("* div[class=x-form-item x-hide-label]");
		var arrCheckBox = Ext.query(".x-form-item");
		var arrLabel =    Ext.query("form fieldset [class=x-form-cb-label]");		
		
		for(var i=0; i<arrLabel.length; i++){
			arrCheckBox[i].className="x-form-item x-hide-label filterItemNarrow";
			if(arrLabel[i].innerHTML.length>6){
				arrCheckBox[i].className="x-form-item x-hide-label filterItemWide";
			}
		}	
	},
	
	addCheckBoxListeners:function(){
		var currentObject=this;

		for(var i=0; i < this.arrCheckBoxes.length; i++){
			if(!this.arrCheckBoxes[i].hasListener('check'))
			{				
				this.arrCheckBoxes[i].addListener('check', function(a,b){
					currentObject.delayedTask.delay(500, currentObject.doFilter, currentObject, [a,b] );		
				}, this.arrCheckBoxes[i])	
				
			}
		}				
	},
	
	selectCheckBox: function(){
		var currentObject = this;

		if(this.selectedCategoryIds){			
			var itemsArr = this.selectedCategoryIds.split(",");						
			if(itemsArr != null & itemsArr.length>0){				
				for(var k=0; k<itemsArr.length; k++){
					for( var j = 0; j < this.arrCheckBoxes.length; j++){
						if (itemsArr[k]==this.arrCheckBoxes[j].getId())
							this.arrCheckBoxes[j].setValue(true);											
					} 
				}
			}						 
		}				
	}	
}

Ext.extend(App.components.formFilter, Ext.util.Observable, App.components.formFilter.prototype);


//*************************************Mode Selector*******************************************************

	App.components.modeSelector=function(config){
		this.xtype='select';
		this.fieldLabel='direction'
		this.width=250;
		this.allowBoth=false; //allow switching from cse/ase or BOTH
		this.bothValue=""; //value when BOTH is selected
		this.nqnoselect=true;		
	    Ext.apply(this, config);	    	
		this.init();
//		if(this.xtype=="select"){
//			return this.modeCombo;
//		}
		if(this.xtype=="button"){			
			return this.modeButton;			
		}
			
	};
		
	App.components.modeSelector.prototype = {
		init:function(config){
			var currentObject=this;
			if(this.allowBoth){
				var defaultValue=this.bothValue;				
				this.modeStore=new Ext.data.SimpleStore({fields:['val','displayVal'],data:[[this.bothValue,'NONE'],[1,'ASC'],[2,'DESC']]});
			}else{
				var defaultValue='1';
				this.modeStore=new Ext.data.SimpleStore({fields:['val','displayVal'],data:[[1, 'ASC'],[2, 'DESC']]});				
			}

/*			
			this.modeCombo=new Ext.ux.SelectBox({
							config:config,
		                    width:this.width,
		                    value:defaultValue,
		                    resizable:true,
		                    store: this.modeStore,
		                    displayField: 'displayVal',
		                    valueField: 'val',
		                    hiddenName:'mode',
		                    fieldLabel:this.fieldLabel,
		                    hideParent:true
		                    
		                });
*/		                
			var randomGroup=Math.random();

			this.h1=function(a,b,c){				
				var buttonId=this.modeButton.id;
				var oButton=Ext.getCmp(buttonId)
				oButton.setText(a.text);
				
				if(a.val==1){
					oButton.setIconClass("asc")
				}
				else if(a.val==2)
				{
					oButton.setIconClass("desc")
				}
				else
				{
					oButton.setIconClass("asc")
				}
				this.handler(a,b,c)
			};

			var imgDir="/demo/css/graphic/nq_yaml/images/productlisting";
			var ascImg="/bullet_arrow_up.png";
			var descImg="/bullet_arrow_down.png";			
									
			var className="x-btn-text-icon"
			if(this.nqnoselect==true){
				className="x-btn-text-icon nqnoselect";
			}						
			
			if(this.allowBoth){
				this.menuViewItems=[
							{text:'NONE',val:this.bothValue,handler:function(a,b,c){currentObject.h1(a,b,c)},group:randomGroup,checked:true,icon:imgDir+ascImg,cls:className},
							{text:'ASC',val:'1',handler:function(a,b,c){currentObject.h1(a,b,c)},group:randomGroup,checked:false,icon:imgDir+ascImg,cls:className},
							{text:'DESC',val:'2',handler:function(a,b,c){currentObject.h1(a,b,c)},group:randomGroup,checked:false,icon:imgDir+descImg,cls:className}
				  ];
			}else{
				this.menuViewItems=[
							{ text:'ASC',val:'1',handler:function(a,b,c){currentObject.h1(a,b,c)},group:randomGroup,checked:true,icon:imgDir+ascImg,cls:className},
							{ text:'DESC',val:'2',handler:function(a,b,c){currentObject.h1(a,b,c)},group:randomGroup,checked:false,icon:imgDir+descImg,cls:className}
					];	
			}
			var txt='ASC';
			var flg="asc";
			if(this.allowBoth){
				txt='NONE'/*App.dictionary.get("bothmarkets")*/;
				flg="asc";

			}
			
			if(this.dir){
				if(this.dir=="ASC")
				{
					txt="ASC";
					flg="asc";	
				}
				else
				{
					txt="DESC";
					flg="desc";											
				}
			}
			
			//this.marketButton=new Ext.SplitButton({
			this.modeButton=new Ext.Button({
									//showText:true,
									text:txt,
									iconCls:flg,
									enableToggle:false,
									cls:"x-btn-text-icon",
									id:Math.random().toString(),
									//id:'dirBtn',//Math.random().toString(),									
									menu: this.menuViewItems																																								
			});																				
		}
	}
//********************************************************************************************************

//*************************************Product Photos Component*******************************************************

App.components.animatePictures=function(config){
	Ext.apply(this, config);
	this.init();
};

App.components.animatePictures.prototype={
	init : function(config){
		config=config||this.config;
		currentObject=this;
		this.popUpPicIndex=0;
	
	
		this.displayingPicture=0;
	
		this.mainImgStore = new Ext.data.SimpleStore({
			id:'mainImgStore',
			data:this.mainImg,
			fields:['id', 'cls', 'img', 'width', 'height', 'maxWidth', 'maxHeight', 'paddingLeftRight', 'paddingTopBottom']
		});
			
		this.mainImgTpl = new Ext.XTemplate(
			'<tpl for=".">',			
				'<div id="{id}" class="{cls}" style="padding-left:{paddingLeftRight}px; padding-top:{paddingTopBottom}px">',
					'<img src="{img}">',
				'</div>',
			'</tpl>'									
		);
		
		this.mainImgDView = new Ext.DataView({
			id:'mainImgDView',
			store:this.mainImgStore,
			tpl:this.mainImgTpl,
			itemSelector:'div.productPhoto'
		});
		
		this.mainImgDView.addListener('click', function(view, index, node, e){
			//alert('enlarged photo');
			this.openWindow();
		}, this);
		
		/*-----------------------------------------------------*/
		
		if(this.thumbImgs.length>1)
		{
			this.thumbImgStore = new Ext.data.SimpleStore({
				id:'thumbImgStore',
				data:this.thumbImgs,
				fields:['id', 'cls', 'img']
			});
			
		
			this.thumbImgTpl = new Ext.XTemplate(
				'<tpl for=".">',			
					'<div id="{id}" class="{cls}">',
						'<img src="{img}" >',
					'</div>',
				'</tpl>'									
			);
			
			this.thumbImgDView = new Ext.DataView({
				id:'thumbImgDView',
				store:this.thumbImgStore,
				tpl:this.mainImgTpl,
				itemSelector:'div.thumbPictureCls'
			});		
	
			this.thumbImgDView.addListener('click', function(view, index, node, e){
				
				var mainImgDiv = Ext.get('mainPicture');
	
				this.popUpPicIndex = index;
	
				//-----------------------scale-------------------------
				/*			
				mainImgDiv.update(
					//'<img src=' + this.bigImgs[index] + ' id=big_img_'+index + ' width=0 height=0 >',
					'<img src=' + this.bigImgs[index] + ' id=big_img_'+index + ' >',
					false,
					function(e){
						var imgImg = Ext.get('big_img_'+index);
	
						
						imgImg.scale(100,100,{
							duration:.5,
							easing:'easeOut'
						});
						
						imgImg.scale(100,undefined,{
							duration:.7,
							easing:'easeOut'
						});											
					}
				);
				 */
				//------------------------------------------------------
				
				//-----------------------FadeIn-------------------------sos
				//used when clicking on an image to change the main image
				//(typeof(this.productsCmp.orderBy)!="undefined")
				//var imgImg = Ext.get('big_img_'+index);
				
				//<div id="mainPicture" class="productPhoto" style="padding-left:100px; padding-top:100px">
				
				//fadeIn the image iff you clicked on a different img
				//if( Ext.get('big_img_'+index) == null){	
				if(this.displayingPicture != index){
					
					var thumbImage = Ext.get("thumbPicture"+(index+1)); 
					thumbImage.radioClass("selectedThumbPicture")
					
					this.displayingPicture=index;									
					var paddingLeft= (this.mainImg[0][3]-this.bigImgs[index][1])/2;
					var paddingTop= (this.mainImg[0][4]-this.bigImgs[index][2])/2;

					mainImgDiv.applyStyles("padding-left:"+paddingLeft+"px;"+ " padding-top:"+paddingTop+"px");
					
					mainImgDiv.update(						
						'<img src=' + this.bigImgs[index][0] + ' id=big_img_'+index + '>',
						false,
						function(e){
							var imgImg = Ext.get('big_img_'+index);
							
							imgImg.fadeIn({
							    endOpacity: 0, //can be any value between 0 and 1 (e.g. .5)
							    easing: 'easeOut',
							    duration: 2//,
							    //remove: false,
							    //useDisplay: false
							});
						}
					);
				}
						
				//-------------------------ghost------------------------
				/*
				mainImgDiv.update(
					'<img src=' + this.bigImgs[index] + ' id=big_img_'+index + '>',
					false,
					function(e){
						var imgImg = Ext.get('big_img_'+index);
											
						// default: slide the element downward while fading out
						//imgImg.ghost();
						
						// custom: slide the element out to the right with a 2-second duration
						//imgImg.ghost('r', { duration: 2 });
						
						// common config options shown with default values
						imgImg.ghost('b', {
						    easing: 'easeOut',
						    duration: .5,
						    remove: false,
						    useDisplay: false
						});					
						
						
					}
				);						
				*/			
				
				//-------------------------shift------------------------sos	
			    /*							
				mainImgDiv.update(
					'<img src=' + this.bigImgs[index] + ' id=big_img_'+index + '>',
					false,
					function(e){
						var imgImg = Ext.get('big_img_'+index);
											
						imgImg.shift({ x: 200, height: 50, opacity: .8 });					
						
						
					}
				);
				*/			 
				//------------------------------------------------------									
	
				//-------------------------slideIn------------------------
				/* 					
				mainImgDiv.update(
					'<img src=' + this.bigImgs[index] + ' id=big_img_'+index + '>',
					false,
					function(e){
						var imgImg = Ext.get('big_img_'+index);
											
						imgImg.slideIn( 't',{
	   							    		easing: 'easeOut',
	    									duration: .5
										});															
					}
				);
				*/ 
				//------------------------------------------------------																								
			}, this);		
		}
		
		this.mainImgDView.render('mainPictureOuter');
		if(this.thumbImgs.length>1){
			this.thumbImgDView.render('thumbPictures');
		}						
	},
	openWindow:function(){
		var currentObject = this;		

		this.popUpImgStore = new Ext.data.SimpleStore({
			id:'popUpImgStore',
			data:this.popUpImgs,
			fields:['img', 'width', 'height']
		});
			
		this.popUpImgTpl = new Ext.XTemplate(
			'<tpl for=".">',		
				'<tpl if="this.whichImg(xindex)">',	
					'<div>',
						'<img src="{img}" >',
					'</div>',
				'</tpl>',
			'</tpl>',{
		    	whichImg:function(i){		    						
					return i == (currentObject.popUpPicIndex+1);
		    	}				
			}									
		);
		
		this.popUpImgDView = new Ext.DataView({
			id:'popUpImgDView',
			store:this.popUpImgStore,
			tpl:this.popUpImgTpl,
			itemSelector:'img'
		});		
		
		this.pictureWnd = new Ext.Window({
			layout:'fit',
			width:this.popUpImgs[this.popUpPicIndex][1]+5,
			height:this.popUpImgs[this.popUpPicIndex][2]+5,
			border:false,
			closable:false,
			frame:false,
			shadow: false,
			modal:true,
			draggable:false,
			resizable:false,
			//bodyStyle:'border:1px solid #cccccc; background-color:white',
			cls:'popUpWnd',
			items:this.popUpImgDView						
		});

		this.popUpImgDView.addListener('click', function(a,b,c,d){
			this.close();
		},this.pictureWnd);
		
		this.pictureWnd.show();		
	}	
}
Ext.extend(App.components.animatePictures, Ext.util.Observable, App.components.animatePictures.prototype);



/*-----------------------------Support------------------------------------------------------------------------*/

App.components.support=function(config){
	Ext.apply(this, config);
	this.showSupport
	this.supportPanel=false;
	this.init();
};

App.components.support.prototype={
	init : function(config){
		config=config||this.config;
		currentObject=this;
		
		this.cm = [										
					{name:'ID', type:'int'},
					{name:'TITLE', type:'string'}
		]; 
		
		this.handler="/nqcontent.cfm";
		
		this.record=new Ext.data.Record.create(this.cm);	
		this.reader=new Ext.data.JsonReader({root:'ROWS', totalProperty:'RESULTS'}, this.record);		 
		this.url=this.handler;			
		this.proxy = new Ext.data.HttpProxy({url: this.url, method: 'GET'});		
		this.baseParameters ={ a_id:this.a_id, loadProductModels:this.loadProductModels};

		this.store = new Ext.data.Store({
		                                 proxy: this.proxy,
		                                 reader: this.reader, 
		                                 autoLoad:false,
		                                 remoteSort:true, 
		                                 baseParams:this.baseParameters 
		});
		
		this.products = new Ext.form.ComboBox({
			store: this.store,			
			displayField: 'TITLE',
			valueField:'ID',
			loadingText: 'Loading ...',
			emptyText:'Type Product Model',        	
			typeAhead: true,
			triggerAction: 'all',
			valueNotFoundText:'',
			minChars:1,
			maxHeight:300														
		});		
		
		this.label = new Ext.form.Label({
			text:'Product Model:'
		});
		
		this.products.addListener('select', function(combo, value, index){
			var productId = value.data.ID;
			if(this.supportPanel==false){
				this.supportPanel=true;
				this.setUpSupportPanel(productId);
			}
			this.showProductSupport(productId);										
						
		}, this);
		
		
 		/******************************ToolBar*******************************************/
 		this.aToolbar = new Ext.Toolbar({
 			//id:'toolBar',	/* georgep 20090914 */
			border:false,	
 			items:[this.label, this.products],
 			ctCls:'productsToolbar'
 		}); 		 	 		 		
  		/********************************************************************************/						
	},
	
	reloadStore:function(){
		var currentObject=this;
		
		this.store.baseParams.a_id = this.a_id;
		this.store.baseParams.loadProductModels = this.loadProductModels;								
		this.store.load();
	},
	
	setUpSupportPanel: function(productId){		
		var currentObject=this;		
/*		
		this.supportCm = [										
					{name:'ID', type:'int'},
					{name:'TEXT', type:'string'}
		]; 
		
		this.supportHandler="/nqcontent.cfm";
		
		this.supportRecord=new Ext.data.Record.create(this.supportCm);	
		this.supportReader=new Ext.data.JsonReader({root:'ROWS', totalProperty:'RESULTS'}, this.supportRecord);		 
		this.supportUrl=this.supportHandler;			
		this.supportProxy = new Ext.data.HttpProxy({url: this.supportUrl, method: 'GET'});		
		this.supportBaseParameters ={ a_id:this.a_id, productId:productId};

		this.supportItemsStore = new Ext.data.Store({
		                                 proxy: this.supportProxy,
		                                 reader: this.supportReader, 
		                                 autoLoad:false,
		                                 remoteSort:true, 
		                                 baseParams:this.supportBaseParameters 
		});		
				
		this.supportItemsTpl = new Ext.XTemplate(
		    '<tpl for=".">',
		        '<div>',
		        	'{TEXT}',	        	
		        '</div>',
		    '</tpl>'
		);
									
		this.supportDview = new Ext.DataView({		
			store:this.supportItemsStore,
			tpl:this.supportItemsTpl,
			itemSelector:'div'
		});
		
		this.supportDview.addListener('render', function(){
	       var currentObject = this;	
	        this.loadMask = new Ext.LoadMask(this.supportDview.id, {
	               //msg:'Loading. Please wait...',
	               msg:'Loading...',
	               //msgCls:'loading',
	               store:this.supportItemsStore
	        });    
	   	}, this);	
	
		this.support = new Ext.Panel({
			layout:'fit',
			border:false,
			items:[this.supportDview],
			height:'100%',
			renderTo:'supportOuter'				
		});
*/		
		this.reading = new Ext.Panel({
			html:'',
			border:false,
			renderTo:'supportOuter'						
		});						
		
	},	
	
	showProductSupport: function(productId){		
		var currentObject=this;	

//		this.supportBaseParameters.a_id = this.a_id;
//		this.supportBaseParameters.productId = productId;			
//		this.supportItemsStore.load();
 
		this.updateSupportList(productId); 			 								
	},
	
	updateSupportList:function(productId){
		var currentObject=this;

		var updater = this.reading.getUpdater();		
		updater.update({
			url: "/nqcontent.cfm", 
			method:'GET', 
			params:'a_id='+this.a_id+'&'+'productId='+productId,
			scripts:false,
			scope:this,
			discardUrl:false,
			timeout:10,			
			text:'Loading...',									
			nocache:true														
		});
	}		
}

Ext.extend(App.components.support, Ext.util.Observable, App.components.support.prototype);

/*-----------------------------Custom System------------------------------------------------------------------------*/

App.components.customSystem=function(config){
	Ext.apply(this, config);
	this.init();
};

App.components.customSystem.prototype={
	init : function(config){
		config=config||this.config;
		currentObject=this;

		this.reading = new Ext.Panel({
			html:'',
			border:false		
		});
				
		this.reading.addListener('render', function(){
			
        	this.loadMask = new Ext.LoadMask(this.reading.id, {msg:'xxx'});			
						
			var inputs = prepareFormParams();
			inputs = "&s="+document.forms['ConfigForm'].SelectedSystem.value + inputs;									
			this.updateSystem(inputs);			
		}, this);		

		this.reading.render('customized');				
	},

	updateSystem:function(urlParams){
		var currentObject=this;

		var updater = this.reading.getUpdater();		
		updater.update({
			url: "/nqcontent.cfm", 
			method:'GET', 
			params:'a_id=9790'+urlParams,
			scripts:false,
			scope:this,
			discardUrl:false,
			timeout:10,			
			text:'<div class="systemElements"><div class="loading">Recalculating...</div></div>',									
			nocache:true														
		});
	}	
}

Ext.extend(App.components.customSystem, Ext.util.Observable, App.components.customSystem.prototype);


/*-----------------------------/Custom System------------------------------------------------------------------------*/











//********************************************************************************************************

/*
App.components.sample=function(config){
	Ext.apply(this, config);
	this.init();
};

App.components.sample.prototype={
	init : function(config){
		config=config||this.config;
		currentObject=this;
	}
}

Ext.extend(App.components.sample, Ext.util.Observable, App.components.sample.prototype);
*/

//---------------------------Extending Components Model---------------------------------
/*
App.components.contentWindow=function(config){
	var currentObject=this;
	//this.addComponents();
	//this.items=[this.transPaging,this.transGrid];
	this.title=config.title?config.title:"george";
	this.addComponents();
	App.components.contentWindow.superclass.constructor.call(this, config);		
}
App.components.contentWindow.prototype={
	addComponents:function(){
		return;
	},
	onRender:function(ct,position){
		App.components.contentWindow.superclass.onRender.call(this,ct,position);			
	}
}

Ext.extend(App.components.contentWindow,Ext.Window,App.components.contentWindow.prototype)

Ext.reg('contentWindow', App.components.contentWindow);
*/