/**
 * Component to navigate among all products and categories
 * properties: 
 */		 
GmSoft.components.ProductViewer = function(config) {
 
 	//i18n texts
	var showProductsProductesTitleText = getLanguageForElement("showProductsProductesTitleText", selectedLangId);
	var showProductsCategoriesTitleText = getLanguageForElement("showProductsCategoriesTitleText", selectedLangId); 
 	var showProductsFilterProductTitleText  = getLanguageForElement("showProductsFilterProductTitleText", selectedLangId);
	var elementNavigatorAllProductsTitleText = getLanguageForElement("elementNavigatorAllProductsTitleText", selectedLangId);
 
 	this.queryProductURL = 'XmlGMServlet?action_type=product_actions&action=get_all_product_descriptions_under_category';
	this.queryCategoryURL = 'XmlGMServlet?action_type=product_actions&action=get_all_categories_descriptions_under_category';
 
 	this.config = config;
 	this.imageID = config.comboID + 'image';
 
  	/**
 	 * STORE AND OTHER OBJECT TO ADMINISTRATE THE CATEGORIES
 	 */
 	//create the store to query all products
	this.categoryRecord = new Ext.data.Record.create([
			{name: 'id', mapping: 'id', type:'string'},
			{name: 'image', mapping: 'image', type:'string'},
			{name: 'order', mapping: 'order', type:'string'},
			{name: 'header', mapping: 'header', type:'string'},
			{name: 'content', mapping: 'content', type:'string'}
			
	]);	
	this.proxyCategories = new Ext.data.HttpProxy({url: this.queryCategoryURL});
	// create the Data Store
	this.categoryStore = new Ext.data.Store({
        // load using HTTP
        proxy: this.proxyCategories,
        // the return will be XML, so lets set up a reader
        reader: new Ext.data.XmlReader({
               // records will have a "category" tag
               record: 'product_category'
           }, this.categoryRecord)
    });			
	this.tplCategories = new Ext.XTemplate(
	    '<tpl for=".">',
	        '<div class="thumb-wrap">',
			'<div class="thumb" align=\'center\'><div><img src="{image}" title="{header}" ></div></div>',
	       	'<span style=\'padding-top: 5px;\'>{header}</span>',
			'</div>',
	    '</tpl>',
	    '<div class="x-clear"></div>'
	);
	this.categoryStore.load({
		params: {
			lang: selectedLangId
		}
	});
	
 	/**
 	 * STORE AND OTHER OBJECT TO ADMINISTRATE THE ITEMS
 	 */
 	//create the store to query all products
	this.productRecord = new Ext.data.Record.create([
			{name: 'id', mapping: 'id', type:'string'},
			{name: 'image', mapping: 'image', type:'string'},
			{name: 'order', mapping: 'order', type:'string'},
			{name: 'product_id', mapping: 'product_id', type:'string'},
			{name: 'technical_document', mapping: 'technical_document', type:'string'},
			{name: 'header', mapping: 'header', type:'string'},
			{name: 'content', mapping: 'content', type:'string'},
			{name: 'shortDesc', mapping: 'shortDesc', type:'string'}
			
	]);	
	this.proxyProducts = new Ext.data.HttpProxy({url: this.queryProductURL});
	// create the Data Store
	this.productStore = new Ext.data.Store({
        // load using HTTP
        proxy: this.proxyProducts,
        // the return will be XML, so lets set up a reader
        reader: new Ext.data.XmlReader({
               // records will have a "category" tag
               record: 'product_item'
           }, this.productRecord)
    });			
	this.tplProducts = new Ext.XTemplate(
	    '<tpl for=".">',
	        '<div class="thumb-wrap">',
			'<div class="thumb" align=\'center\'><table><tr><td><img src="{image}" title="{header}"/></td></tr></table></div>',
	       	'<span style=\'padding-top: 5px;\'>{header}</span>',
			//'<span>{shortDesc}</span>',
			'</div>',
	    '</tpl>',
	    '<div class="x-clear"></div>'
	);
	
	this.productStore.load({params: {category : -1, lang:selectedLangId}});
	
	this.filterTextField = new getTextFieldComponent('product_filter_text_field',showProductsFilterProductTitleText,'product_filter_text_field', 300);
	
	this.filterTextField.on('keyup', function(){
		var filterValue = this.filterTextField.getValue();
		this.productStore.filter('header',filterValue,true,false);
	}, this, {buffer:500});	

 
	this.navigator = new GmSoft.components.ElementNavigator({scopeID: 'product_viewer'},new this.categoryRecord({id: -1,header: elementNavigatorAllProductsTitleText}));
	
	/**
	 * Dataviews
	 */
	this.categoriesDataView = new Ext.DataView({
						            store: this.categoryStore,
						            tpl: this.tplCategories,
						            autoHeight:true,
						            multiSelect: true,
						            overClass:'x-view-over',
						            itemSelector:'div.thumb-wrap',
						            //emptyText: 'No categories under this category',				
						            plugins: [
						                //new Ext.DataView.DragSelector(),
						                //new Ext.DataView.LabelEditor({dataIndex: 'name'})
						            ],
						
						            prepareData: function(data){
						                //data.shortName = Ext.util.Format.ellipsis(data.name, 15);
						                //data.sizeString = Ext.util.Format.fileSize(data.size);
						                //data.dateString = data.lastmod.format("m/d/Y g:i a");
						                return data;
						            }
						});
	
	this.categoriesDataView.on('dblclick', function( dataView, index, node, e ){
		var categoryID = this.categoryStore.getAt(index).get('id');
		this.categoryStore.load({params: {category : categoryID, lang: selectedLangId}});
		this.productStore.load({params: {category : categoryID, lang: selectedLangId}});
		this.navigator.pushElement(this.categoryStore.getAt(index));
		
		this.filterTextField.setValue('');
		this.productStore.filter('header','');
	},this);
						
						
	this.productsDataView = new Ext.DataView({
						            store: this.productStore,
						            tpl: this.tplProducts,
						            autoHeight:true,
						            multiSelect: true,
						            overClass:'x-view-over',
						            itemSelector:'div.thumb-wrap',
						            emptyText: 'No images to display',				
						            plugins: [
						                //new Ext.DataView.DragSelector(),
						                //new Ext.DataView.LabelEditor({dataIndex: 'name'})
						            ],
						
						            prepareData: function(data){
						                //data.shortName = Ext.util.Format.ellipsis(data.name, 15);
						                //data.sizeString = Ext.util.Format.fileSize(data.size);
						                //data.dateString = data.lastmod.format("m/d/Y g:i a");
										//alert(short);
						                return data;
						            }
						});
						
	this.productsDataView.on('dblclick', function( dataView, index, node, e ){
		var productRecord = this.productStore.getAt(index);
		showProductPanel(productRecord);		
		
	},this);
 
    // Create a config object that will be passed to the Panel constructor.
    // The use of Ext.apply preserves the properties passed in the config object
    this.initialConfig = Ext.apply(config, {
		//object elements
		scope: this,		
        id:'product_viewer',
        width:520,
        autoHeight:true,
        collapsible:false,
		border: false,
		bodyBorder: false,
		bodyStyle: 'text-align: left;',
        layout:'form',

		items : [{
					title: showProductsCategoriesTitleText,
			        layout:'form',
					autoHeight:true,
					border: true,
					bodyBorder: false,					
					bodyStyle:'padding:10px 10px 10px 10px',
					items: [
						this.navigator,
						this.categoriesDataView										
					]
				},
				{
					title: showProductsProductesTitleText,
			        layout:'form',
					autoHeight:true,
					border: true,
					bodyBorder: false,					
					bodyStyle:'padding:10px 10px 10px 10px',
					items: [
						{
					        layout:'form',
							autoHeight:true,
							border: true,
							bodyBorder: false,											
							bodyStyle:'padding:10px 10px 10px 10px',
							items: [this.filterTextField]
						},this. productsDataView					
					]
				}
		]				
	});
 
    // Create a Panel instance and bind it to this DeskIcon instance
    this.panel = new Ext.Panel(this.initialConfig);
//	var xxx = Ext.getCmp('product_viewer');
//	alert(xxx);
}; 
// The DeskIcon prototype defines all the methods shared by the DeskIcon instances
GmSoft.components.ProductViewer.prototype = {
    myApplicationSpecificFunction: function(p1, p2, p3) {
        // Perform application-specific processing
    },
 
    // Make this class usable by a Container, so that we can add and remove it.
    // Create delegates in the scope of our contained Panel which reference Panel's methods
    render: Ext.Panel.prototype.render.createDelegate(this.panel),
    destroy: Ext.Panel.prototype.destroy.createDelegate(this.panel),
	fireEvent: Ext.Panel.prototype.destroy.createDelegate(this.panel)
};


function showProductPanel(productRecord){
	
	var showProductsShowProductTitleText = getLanguageForElement("showProductsShowProductTitleText", selectedLangId);
	
	var showProductsProductImageTitleText = getLanguageForElement("showProductsProductImageTitleText", selectedLangId);
	var showProductsProductIDTitleText = getLanguageForElement("showProductsProductIDTitleText", selectedLangId);
	var showProductsProductDescriptionTitleText = getLanguageForElement("showProductsProductDescriptionTitleText", selectedLangId);
	var showProductsProductTechDocTitleText = getLanguageForElement("showProductsProductTechDocTitleText", selectedLangId);
	var showProductsProductNameTitleText = getLanguageForElement("showProductsProductNameTitleText", selectedLangId);	
	var closeButtonText = getLanguageForElement("closeButtonText", selectedLangId);
	
	var productDescriptionID = new getTextFieldComponent(null,showProductsProductIDTitleText,null,290);
	productDescriptionID.setValue(productRecord.get('product_id'));
	productDescriptionID.readOnly = true;
	
	var productDescriptionName = new getTextFieldComponent(null,showProductsProductNameTitleText,null,290);
	productDescriptionName.setValue(productRecord.get('header'));
	productDescriptionName.readOnly = true;	
	
	var productDescriptionDescription = new getTextAreaComponent(null,showProductsProductDescriptionTitleText,null,290);
	productDescriptionDescription.setValue(productRecord.get('content'));
	productDescriptionDescription.readOnly = true;
	
    var win = new Ext.Window({
		title: showProductsShowProductTitleText,
        layout:'form',
        width:450,
		autoHeight:true,
        closeAction:'hide',
        plain: true,
        modal: true,
		bodyStyle:'padding:10px 10px 10px 10px',
        items: [
			new Ext.BoxComponent({
			        xtype: 'box',
					fieldLabel: showProductsProductImageTitleText,
					isFormField: true,
			        autoEl: {
			            tag: 'img',
						width: '100px',
						src: productRecord.get('image')
			        }
			}),		
			productDescriptionID,
			productDescriptionName,			
			productDescriptionDescription	
		],
        buttons: [{
            text: closeButtonText,
            handler: function(){
                win.hide();
            }
        }]
    });	
	
	var document = productRecord.get('technical_document');
	if(document != ""){
		win.add(
			new Ext.BoxComponent({
			        xtype: 'box',
					fieldLabel: showProductsProductTechDocTitleText,
					isFormField: true,
			        autoEl: {
			            tag: 'a',
						href: productRecord.get('technical_document'),
						target: "_blank",						
						html: 'specification document'
			        }
			})				
		);
	}else{
		win.add(
			new Ext.BoxComponent({
			        xtype: 'box',
					fieldLabel: showProductsProductTechDocTitleText,
					isFormField: true,
			        autoEl: {
			            tag: 'a',
						html: 'no documentation available'
			        }
			})				
		);		
	}
	
	win.show();	
}