/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
 
var MX_THE = Ext.extend(Ext.util.Observable, {
    constructor: function(config){
        this.addEvents('finished'); // specify the events we're going to fire
        MX_THE.constructor.call(this, config);
    },
	
    create: function(pid, value){
		var inner = '';
		var min = '';
		var max = '';
		var begin = '';
		var end = '';
		if (value.length > 0){
			var jsonData = Ext.util.JSON.decode(value.substring(3,value.length-3));
			if (jsonData.labels[0] && jsonData.labels[0].length > 0){
				inner += '<div class="mt_detail_mx_the_main_title">';
				inner += jsonData.labels[0];
				inner += '</div>';
				
			}
			if (jsonData.type == 1) {	//images
				var i =0;
				while (i < jsonData.blocks.length){
					var themes = jsonData.blocks[i].list.split('|||');
					var j = 0;
					while (j < themes.length){
						inner += '<div class="mt_detail_mx_the_title">';
						inner += themes[j];
						inner += '</div>';
						
						j++;
					}
					
					
					var themes = jsonData.blocks[i].list2.split('|||');
					var j = 0;
					while (j < themes.length){
						var imageInfo = themes[j].split('+++');
						var url = 'http://'+window.location.hostname+'/'+imageInfo[0];
						var title = imageInfo[1];
						inner += '<img src="'+url+'" title="'+title+'">';
						
						j++;
					}
					
					i++;
				}
			}
			else if (jsonData.type == 2) {	//texte				
				var i =0;
				while (i < jsonData.blocks.length){
					var themes = jsonData.blocks[i].list.split('|||');
					var j = 0;
					while (j < themes.length){
						if (themes[j].length){
							inner += '<div class ="mt_detail_bloc">';
							inner += '<div class="mt_detail_mx_the_title">';
							inner += themes[j];
							inner += '</div>';
						}
						j++;
					}
					var themes = jsonData.blocks[i].list2.split('|||');
					var j = 0;
					while (j < themes.length){
						if (themes[j].length){
							var v = themes[j].split("||");
							if (v[1] && v[2]){
								inner += '<div class="mt_detail_mx_the_elem mt_detail_mx_the_elem_3">';
							}
							else {
								inner += '<div class="mt_detail_mx_the_elem">';
							}
								inner += '<div class="mt_detail_mx_the_elem_type">';
								inner += v[0];
								inner += '</div>';
									
								if (v[1]){
									inner += '<div class="mt_detail_mx_the_elem_value"> : ';
									inner += parseFloat(v[1]);
									inner += '</div>';
								}
								if (v[2]){
									inner += '<div class="mt_detail_mx_the_elem_unit">';
									inner += v[2];
									inner += '</div>';
								}
								inner += '</div>';

						}
						j++;
					}					
					i++;
											inner += '</div>';		
				}			
			}
		}
		
		this.panel = new Ext.Panel({ 
			id: 'mt_detail_mx_the',
			hideLabel: true,
			layout:'form',
			width:'auto',
			html: inner,
			mobiClass: 'MX_THE'
		});
		
		this.fireEvent('finished', this.panel);
	}	
});