/**
 * @author mba
 */
Ext.namespace('Ext.sfweb');
Ext.sfweb.ProductDetailPanel = function(conf){

	this.uuid = new Date().getTime();
	this.bodyStyle = 'padding:15px';
	this.autoScroll = true;
	this.langstore = conf.data.langstore || {};
	
	this.showDetailImg = function(e, img){
		Ext.get('idt_'+this.uuid).update('<img src="'+img.attributes.getNamedItem('rel').value+'" />');
	};

	this.template = new Ext.Template(
		'<div>',
			'<a href="{productgroup_link}">{productgroup_title}</a> / <a href="{categoriy_link}">{categoriy_title}</a>',
			'<hr>',
			'<div style="float:left; width:160px;">',
				'<div id="idt_{uuid}" style="height:150px; width:150px; align:left; margin:0px 5px 5px 0px;"></div>',
				'<div style="padding:10px 0px 0px 0px;">'+this.langstore.furtherProductImages+'<br>',
					'{images}',
				'</div>',
			'</div>',
			'<div style="float:left; width:190px;">',
				'<h1>{title} ({number})</h1><a href="{manufacturer_link}">({manufacturer_title})</a><br><br>',
				'<p>{decription}</p>',
				'<div style="float:right; font-weight:bold; font-size:20px;">{price}</div>',
			'</div>',
			'<div id="prel_{uuid}" style="clear:both; height:150px; width:100%; padding:10px 0px 0px 0px;"></div>',
		'</div>'
	);

	this.initMouseEvents = function(){
		var imgs = Ext.select('img[@class*=ith_'+this.uuid+']', true, 'pp_west_'+this.uuid);
		var i = 0;
		Ext.each(imgs.elements, function(el){
			if(i == 0){
				this.showDetailImg('e', el.dom);
			}
			el.addClass('fakeLink');
			el.on('click', this.showDetailImg.createDelegate(this), this);
			i++;
		}, this);
	};

	this.initRelatedContent = function(){
		var files 			= '';
		var videos 			= '';
		var documents 		= '';
		var relatedproducts = '';

		Ext.each(this.data.files, function(el){
			files += '<img src="'+el.thumb+'" rel="'+el.detail+'" title="'+el.title+'" alt="'+el.title+'" />'
		}, this);
		Ext.each(this.data.videos, function(el){
			videos += '<img src="'+el.thumb+'" rel="'+el.detail+'" title="'+el.title+'" alt="'+el.title+'" />'
		}, this);
		Ext.each(this.data.documents, function(el){
			documents += '<img src="'+el.thumb+'" rel="'+el.detail+'" title="'+el.title+'" alt="'+el.title+'" />'
		}, this);
		Ext.each(this.data.relatedproducts, function(el){
			relatedproducts += '<img src="'+el.thumb+'" rel="'+el.detail+'" title="'+el.title+'" alt="'+el.title+'" />'
		}, this);

		this.relatedContentPanel = new Ext.TabPanel({
			activeTab: 0,
			border: false,
			renderTo: 'prel_'+this.uuid,
			height: 120,
			enableTabScroll: true,
			defaults: {
				layout: 'fit',
				autoScroll: true
			}
		});

		if(files != ''){
			this.relatedContentPanel.add({
				title: this.langstore.relatedContentTabTitle.files, html: files
			});
		}
		if(videos != ''){
			this.relatedContentPanel.add({
				title: this.langstore.relatedContentTabTitle.videos, html: videos
			});
		}
		if(documents != ''){
			this.relatedContentPanel.add({
				title: this.langstore.relatedContentTabTitle.documents, html: documents
			});
		}
		if(relatedproducts != ''){
			this.relatedContentPanel.add({
				title: this.langstore.relatedContentTabTitle.relatedproducts, html: relatedproducts
			});
		}
		this.relatedContentPanel.doLayout();
		this.relatedContentPanel.setActiveTab(0);
	};

	this.onPanelRendered = function(){
		/* render product */
		var images = '';
		this.body.update();

		Ext.each(this.data.images, function(el){
			images += '<img src="'+el.thumb+'" rel="'+el.detail+'" title="'+el.title+'" alt="'+el.title+'" class="ith_'+this.uuid+'" />'
		}, this);

		this.template.append(
			this.body.id, {
				uuid: this.uuid,
				title: this.data.title, 
				number: this.data.itemnumber, 
				decription: this.data.description, 
				price: formatEURCurrency(this.data.price),
				categoriy_title: this.data.productcategoriy.title,
				categoriy_link: this.data.productcategoriy.link,
				productgroup_title: this.data.productgroup.title,
				productgroup_link: this.data.productgroup.link,
				manufacturer_title: this.data.manufacturer.title,
				manufacturer_link: this.data.manufacturer.link,
				images: images
			}
		);
		this.initMouseEvents();
		this.initRelatedContent();
	};

	this.listeners = {
		'render': this.onPanelRendered.createDelegate(this)
	};
	Ext.sfweb.ProductDetailPanel.superclass.constructor.call(this, conf);
}
Ext.extend(Ext.sfweb.ProductDetailPanel, Ext.Panel);