	(function ($){
		templatesFromJson = {};
		$.fn.json2template = function(jsonDataSource){
			var fnHide, fnShow, testaDataSource, elementoDonoDoTemplate, i, j, objJson, strHtmlTemplate, elementoDonoDoTemplate, htmlItens;


			return this.each(function(){
			/*	Um mesmo template pode ser usado para mais de um elemento. Nesses casos, utiliza-se o atributo "usingTemplate"
				para definir qual template será utilizado para preenchimento do elemento com os dados contidos no dataSource.
				Por exemplo:
				  <table>
					<tbody id="OutraTab" dataSource="Filmes" imgLoad="../_img/gridLoad.gif" dataSourceKey="ID" usingTemplate="FilmesTbl"></tbody>
				  </table>
				Neste caso o elemento "OutraTab" será preenchido conforme o template "FilmesTbl"  */
				elementoDonoDoTemplate = $(this).attr('usingTemplate') ? $(this).attr('usingTemplate') : this.id; // Recuperando o id do dono do template
				elementoDonoDoTemplate = $('#'+elementoDonoDoTemplate)[0]; // Recuperando o elemento DOM do dono do template


				// Testando se o dataSource a ser usado foi passado como parâmetro, ou se devemos ler do atributo do template
				if(typeof(jsonDataSource)!='undefined'){
					this.data = jsonDataSource;
				}else{
				/*	A variável JS que possui o JSON data source deste template é indicada pelo atributo "dataSource"
					do template lido. Para atribuir o JSON data source a variável "testaDataSource", precisamos usar
					o "eval()" pois lemos o nome da variável dinamicamente por meio da expressão "$(this).attr('dataSource')"  */
					testaDataSource = eval($(elementoDonoDoTemplate).attr('dataSource'));
	
		
					// Caso não tenha sido definido um data source, preenche-se "data" com um array de um objeto "vazio"
					this.data = $(testaDataSource) ? testaDataSource  : [{}];
				}


				// Este "if" verifica se este template já foi usado, onde em caso negativo, inicia-se os objetos necessários
				if(typeof(elementoDonoDoTemplate.template)=='undefined'){
					this.id = $(this).attr('id');

					// Lendo qual é a chave do dataSource
					this.dataKey = $(elementoDonoDoTemplate).attr('dataSourceKey');

					// Definindo o campo chave do dataSource
					this.dataKey = $(elementoDonoDoTemplate).attr('dataKey');
					this.dataKey = (typeof(this.dataKey)=='undefined') ? '' : this.dataKey;
	
					// Guardando no próprio objeto DOM do template, a string HTML que forma novos templates (se necessário)
					this.template = $(elementoDonoDoTemplate).html();
				}


				// Este primeiro for, repete-se para cada item existente dentro do JSON, o que em uma tabela (por exemplo) representaria cada linha
				htmlItens = '';
				
				
				if(typeof(console)!='undefined'){
					console.groupCollapsed('json2template');
						console.groupCollapsed('elemento destino');
							console.debug(this);
						console.groupEnd();
						console.groupCollapsed('informações do template (elemento fonte / dataSource )');
							console.debug(elementoDonoDoTemplate);
							console.dir(this.data);
						console.groupEnd();
					console.groupEnd();
				}
				
				
				for (i=0,j=this.data.length; i<j; i++){ 
					// Atribuindo o template à variável [this.strHtmlTemplate]
					strHtmlTemplate = elementoDonoDoTemplate.template;

					// Atribuindo a [objJson] o item "i" do DataSource
					objJson = this.data[i];

					// Para cada item existente dentro do JSON DataSource, fazemos o replace no template
					for(atributo in objJson){
						expReg = '/@@'+atributo+'@@/gi';
						strHtmlTemplate = strHtmlTemplate.replace(eval(expReg), objJson[atributo]);
					}

					// Preenchendo a linha "i" do html final baseada no elemento de índice "i" do JSON DataSource
					htmlItens += strHtmlTemplate;
				}


				$(this).html(htmlItens);
				eval( 'templatesFromJson.'+this.id +'= this' );
			});
		};
	})(jQuery);


	/*
		Este plugin quando usado, registra automaticamente uma variável global chamada [templatesFromJson] onde você encontrará todos os 
		elementos DOM que foram utilizados por ele.

		Como usar:
		
		## Exemplos de templates na interface (código HTML) ------------------------------------------------------------------------------
			<select id="slcVeiculos" dataSource="Veiculos" dataSourceKey="cod_veiculo" firstOptBlank="true">
			  <option value="@cod_veiculo@">@marca@ - @modelo@</option>
			</select>
			
			<table>
			  <thead>
				<tr>
				  <th>Código</th>
				  <th>Descrição</th>
				  <th>Ações</th>
				</tr>
			  </thead>
			  <tbody id="FilmesTbl" dataSource="Filmes" imgLoad="../_img/gridLoad.gif" dataSourceKey="ID">
				<tr>
				  <td>{#id#}</td>
				  <td title="@titulo@">@titulo@ - @genero@</td>
				  <td title='acoes'>
					<a href="#" fncName="editar"><img /></a>
					<a href="#" fncName="excluir"><img /></a>
				  </td>
				</tr>
			  </tbody>
			</table>
			
			<table>
			  <tbody id="OutraTab" dataSource="Filmes" imgLoad="../_img/gridLoad.gif" dataSourceKey="ID" usingTemplate="FilmesTbl">
			  </tbody>
			</table>
		----------------------------------------------------------------------------------------------------------------------------------


		## Exemplo de chamada do plugin que preenche o elemento com os dados do JSON baseado no template (código JS) ---------------------
			var Filmes = [
				{
					"id"	  : "1",	
					"titulo"  : "X-Men Origens: Wolverine",
					"genero"  : "Aventura",
					"duracao" : "107",
					"ano"     : "2009",
					"elenco"  : [
						"Hugh Jackman (Logan / Wolverine)",
						"Ryan Reynolds (Wade Wilson / Deadpool)",
						"Liev Schreiber (Victor Creed / Dentes-de-sabre)",
						"Dominic Monaghan (Bradley)"
					]
				},
				{
					"id"	  : "2",
					"titulo"  : "Velozes & Furiosos 4",
					"genero"  : "Acao",
					"duracao" : "107",
					"ano"     : "2009",
					"elenco"  : [
						"Vin Diesel (Dominic \"Dom\" Toretto)",
						"Paul Walker (Brian O'Conner)",
						"Jordana Brewster (Mia Toretto)",
						"Michelle Rodriguez (Letty)"
					]
				}
			]
			
			var Veiculos = [
				{
					"cod_veiculo"  	: "1",
					"marca"  		: "VolksWagen",
					"modelo" 		: "Gol",
					"ano" 	 		: "2009",	
				},
				{
					"cod_veiculo"  	 : "2",
					"marca" 		 : "Fiat",
					"modelo"		 : "Uno",
					"ano" 			 : "2009",	
				},
				{
					"cod_veiculo"  	: "3",
					"marca"  		: "Renault",
					"modelo" 		: "Sandero",
					"ano" 	 		: "2009",	
				},
				{
					"cod_veiculo"  	: "4",
					"marca"  		: "BMW",
					"modelo" 		: "X5",
					"ano" 	 		: "2009",	
				},
				{
					"cod_veiculo"  	: "5",
					"marca"  		: "Ferrari",
					"modelo" 		: "F-350",
					"ano" 	 		: "2009",	
				}			
			] 
			
			
			$(function(){
				$('[dataSource!=""]').json2template();

				// também poderia ser: 
				// $('#OutraTab').json2template();
			})
		----------------------------------------------------------------------------------------------------------------------------------
	*/