/**
 **************************************************************************
 * EASY-CV.COM
 * (c) RECRUTAE.COM - Xavier Grangier - Sophie-Antoine Dautremant
 **************************************************************************
 */
	// function gettext(value) {
	// 	return value;
	// } 
	
	iFrameShadowBox = function(url,title,self,width,height,callback) {
		options = {
			// onClose: function() {
			// 	if(callback) callback();
			// }  
		}
		ShadowBox.open({
			title:title,
			type:'iframe',
			content:url,
			width: width ? width : false
		},options);
	};
	
	/**
	 * @class Panel affichant la selection des modeles
	 * Objet gerant le panel de layout
	 */
	Layout = function() {
		// LAYOUT
		this.store_layout = new Ext.data.JsonStore({
			//url: '/Layout/list/',
			root: 'rows',
			id:'pk',
			fields: [
				{name: 'id', mapping: 'pk'},
				{name: 'template', mapping: 'fields.template'},
				{name: 'style4', mapping: 'fields.style4'},
				{name: 'style5', mapping: 'fields.style5'},
				{name: 'style7', mapping: 'fields.style7'},
				{name: 'style8', mapping: 'fields.style8'},
				{name: 'style9', mapping: 'fields.style9'}  
			]
		}),
		//
		this.startTpl = 0,
		this.store = new Ext.data.SimpleStore({
			id:0,
			fields: ['id','name','imgnum','format','display'],
			data: MainTemplates
		}),
		this.store_preview = new Ext.data.JsonStore({
			//url: '/TemplateStyles/list/',
			root: 'rows',
			id:'pk',
			fields: [
				{name: 'id', mapping: 'pk'},
				{name: 'template', mapping: 'fields.template'},
				{name: 'style4', mapping: 'fields.style4'},
				{name: 'style5', mapping: 'fields.style5'},
				{name: 'style7', mapping: 'fields.style7'},
				{name: 'style8', mapping: 'fields.style8'},
				{name: 'style9', mapping: 'fields.style9'},  
			]
		}),
		this.tpl = new Ext.XTemplate(
			'<p style="font-size:12px;padding:0px 0px 0px 5px;margin-bottom:10px;">{[this.trans1()]}</p>',
			'<tpl for=".">',
				'<div class="thumb-wrap-tpl">',
				'<div class="thumb-tpl" ><img src="{[this.img(values)]}"></div>',
				'<span class="x-editable">{name} - {[this.format(values)]}</span></div>', 
			'</tpl>',
			'<div class="x-clear"></div>',{
				format: function(values) {
					  return values.format == 1 ? Layout_text1 :  Layout_text2;
				},
				img: function(values) {
					return MediaUrl + '/share/img/tpl/1/l-'+ currentLanguage +'-' + values.imgnum + '.png';
				},
				trans1: function() {
					return Layout_text3;
				}
			}
		),
		this.tpl_preview = new Ext.XTemplate(
			'<tpl for=".">',
				'<div class="thumb-wrap-tplprev">',
				'<div class="thumb-tplprev" ><img src="{[this.img(values)]}"></div>',
				'<span class="x-editable" style="cursor:pointer;margin-top:5px;" onclick="Shadowbox.open({type:\'iframe\',content:\'{[this.url(values)]}index_{id}.html\',title:\'{[this.title(values)]}\'});">{[this.trans1()]}</span></div>', 
			'</tpl>',
			'<div class="x-clear"></div>',{
				img: function(values) {
					return MediaUrl + '/share/img/tpl/2/s-'+ currentLanguage +'-' + values.id + '.png';
				},
				trans1: function() {
					return Layout_text4;
				},
				url: function(values) {
					return userurl;
				},
				title: function(values) {
					return userurl;
				}
			}
		),
		this.view = new Ext.DataView({
			store: this.store,
			tpl: this.tpl,
			singleSelect: true,
			overClass:'x-view-over',
			itemSelector:'div.thumb-tpl',
			emptyText: '<div style="height:50px;padding:15px;"><p class="nocontent">'+ Layout_text5 +'</p></div>'
		}),
		this.view_preview = new Ext.DataView({
			store: this.store_preview,
			tpl: this.tpl_preview,
			singleSelect: true,
			overClass:'x-view-over',
			itemSelector:'div.thumb-tplprev',
			emptyText: '<div style="height:50px;padding:15px;"><p class="nocontent">'+ Layout_text5 +'</p></div>'
		}),

		this.panel = new Ext.Panel({
			id:'images-view',
			renderTo:'MainTplWarp',
			layout: 'border',
			title: Layout_text6,
			border: true,
			layout: 'border',
			//tbar:[this.tpl_combo], 
			height:260,
			width:945,
			//collapsible:true,  
			items: [
				// region center
				{
					id:'tplmain-center',
					border:false,
					bodyStyle:'padding:10px 5px 0px 5px;text-align:center;',
					width:840,
					height:230,
					region:'center',
					items:this.view
				},
				// region east
				{
					id:'tplmain-east',
					border:false,
					bodyStyle:'margin-top:100px;padding:0px 5px 0px 5px;',
					width:40,
					region:'east',
					html:'<div id="tplmain-east-butt"/>'
				},
				// region west
				{
					id:'tplmain-west',
					border:false,
					bodyStyle:'margin-top:100px;padding:0px 5px 0px 5px;',  //display:table-cell;
					width:40,
					region:'west',
					html:'west',
					html:'<div id="tplmain-west-butt"/>' 
				}
			]
		}),
		this.panel_preview = new Ext.Panel({
			id:'images-view-preview',
			renderTo:'PreviewTplWarp',
			layout: 'border',
			title: Layout_text6,
			bodyStyle:'padding:10px 10px 10px 35px;text-align:center;',
			border: true,
			layout: 'fit',
			//autoHeight:true,
			height:410,
			width:945,
			//collapsible:true,  
			items: this.view_preview
		}),
		this.template = false,
		// LAYOUT
		this.nextTpl = function() {
			this.store.clearFilter();
			for(i=0;i<this.store.getCount();i++) {
				this.store.getAt(i).set('display',false);
			}
			//
			max  = (this.store.getCount() - 4); 
			if( (this.startTpl) < max ) {
				this.startTpl = this.startTpl + 1; 
				this.prevButt.enable(); 
			} else {
				this.startTpl;
				this.nextButt.disable();
			}
			//
			range = this.store.getRange(this.startTpl,this.startTpl+3);
			for(i=0;i<range.length;i++) {
				range[i].set('display',1);
			}
			this.store.filter('display',1); 
		},
		//
		this.prevTpl = function() {
			this.store.clearFilter();
			for(i=0;i<this.store.getCount();i++) {
				this.store.getAt(i).set('display',false);
			}
			//
			if(this.startTpl > 3) {
				this.startTpl = this.startTpl - 1
				this.nextButt.enable();
				range = this.store.getRange(this.startTpl,this.startTpl-3); 
			} else {
				this.startTpl = 1;
				this.prevButt.disable();
				range = this.store.getRange(0,3);
			}
			// 
			for(i=0;i<range.length;i++) {
				range[i].set('display',1);
			}
			this.store.filter('display',1);  
		},
		//
		this.selectRange = function(value) {
			z = this.store.getCount();
			obj = this.store.getById(value);//this.store.getAt((value-1));
			idx = this.store.indexOf(obj);
			if(idx + 1 > z-3) {
				return [(idx-3),idx];
			} else {
				return [idx,(idx+3)];
			}   
		}, 
		//
		this.selectPreview = function() {
			var selNode = this.view.getSelectedNodes()[0];
			if(selNode) {
				rec = this.view.getRecord(selNode); 
				this.store_preview.filterBy(function(record,id,scope) {
					return record.data.template == rec.data.id ? true : false;
				},this);
				this.panel_preview.setTitle(Layout_text7 +' ' + rec.data.name);  
				//adm.highLight(Ext.getCmp('images-view-preview').body);
			}
		}, 
		//
		this.init = function() {
			var self = this;
			
			//
			this.nextButt = new Ext.Button({
				renderTo:'tplmain-east-butt',
				disabled:true,
				text: '&#187;',
				scope:this,
				handler: function() {
					this.nextTpl();
				}
			});
			this.prevButt = new Ext.Button({
				renderTo:'tplmain-west-butt',
				text: '&#171;',
				disabled:true,
				scope:this,
				handler: function() {
					this.prevTpl();
				}
			});
			
			//
         var newrecords = this.store_preview.reader.readRecords(jsonTpls);
			this.store_preview.add(newrecords.records);
			this.view_preview.refresh();
			// EVENTS 
			//
			this.view.on('selectionchange',function() {
				this.selectPreview();
			},this);
			
					this.template = 16;
					zz = this.selectRange(this.template); 
					range = this.store.getRange(zz[0],zz[1]);
					this.startTpl = zz[0];
					for(i=0;i<range.length;i++) {
						range[i].set('display',1);
					}
					//
					idx = this.store.find('id',this.template);
					this.view.select( idx ,false,false);
					//     
			
					this.store.filter('display',1);
					this.nextButt.enable();
					//
			this.view_preview.on('selectionchange',function(view,selections) {
				if(selections.length > 0) {
					selNode = selections[0];
					rec = self.view_preview.getRecord(selNode); 
					Shadowbox.open({type:'iframe',content:userurl + 'index_'+rec.id+'.html',title:userurl});
				}
			},this);
			//
			this.store_preview.on('load',function() { 
				this.selectPreview();
			},this);
		}
	};