/*
    ~ Dedicado à Mee, no aniversário dela (L)
    
    Copyright (C) 2009  Alessandro Ramos dos Santos
    edenfall@gmail.com
    http://alessandrosantos.com.br
    
    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
    
    Olhe, estude, melhore... mas não copie descaradamente e diga que é seu!
*/

(function(){
	
	// Atalho de programador preguiçoso
	window.$o = function(i) { return document.getElementById(i); };
	
	// Carrega tudo ao terminar de carregar a página
	window.onload = function()
	{
		// Gera os seletores de cor
		mkut.criaGrid('seletorBackgroundColor','backgroundColor');
		mkut.criaGrid('seletorBorderColor','borderColor');
		mkut.criaGrid('seletorColor','color');
		
		// Atribui o evento onchange nos inputs
		var input = document.getElementsByTagName('input');
		for ( var a in input )
		{
			input[a].onchange = function() { mkut.mkuta(); };
		}; delete(a);
		
		// Atribui o evento onchange nos selects
		var select = document.getElementsByTagName('select');
		for ( var a in select )
		{
			select[a].onchange = function() { mkut.mkuta(); };
		}; delete(a);
		
		// Atribui o evento onchange nos textareas
		var textarea = document.getElementsByTagName('textarea');
		for ( var a in textarea )
		{
			textarea[a].onchange = function() { mkut.mkuta(); };
		}; delete(a);
		
		// Carrega a primeira vez
		mkut.mkuta();
	};
	
	// O script
	window.mkut = {
		
		// Versão
		versao : '0.4',
		
		// Paleta de cores
		cor : [
			'000','003','006','009','00c','00f',
			'030','033','036','039','03c','03f',
			'060','063','066','069','06c','06f',
			'090','093','096','099','09c','09f',
			'0c0','0c3','0c6','0c9','0cc','0cf',
			'0f0','0f3','0f6','0f9','0fc','0ff',
			'300','303','306','309','30c','30f',
			'330','333','336','339','33c','33f',
			'360','363','366','369','36c','36f',
			'390','393','396','399','39c','39f',
			'3c0','3c3','3c6','3c9','3cc','3cf',
			'3f0','3f3','3f6','3f9','3fc','3ff',
			'600','603','606','609','60c','60f',
			'630','633','636','639','63c','63f',
			'660','663','666','669','66c','66f',
			'690','693','696','699','69c','69f',
			'6c0','6c3','6c6','6c9','6cc','6cf',
			'6f0','6f3','6f6','6f9','6fc','6ff',
			'900','903','906','909','90c','90f',
			'930','933','936','939','93c','93f',
			'960','963','966','969','96c','96f',
			'990','993','996','999','99c','99f',
			'9c0','9c3','9c6','9c9','9cc','9cf',
			'9f0','9f3','9f6','9f9','9fc','9ff',
			'c00','c03','c06','c09','c0c','c0f',
			'c30','c33','c36','c39','c3c','c3f',
			'c60','c63','c66','c69','c6c','c6f',
			'c90','c93','c96','c99','c9c','c9f',
			'cc0','cc3','cc6','cc9','ccc','ccf',
			'cf0','cf3','cf6','cf9','cfc','cff',
			'f00','f03','f06','f09','f0c','f0f',
			'f30','f33','f36','f39','f3c','f3f',
			'f60','f63','f66','f69','f6c','f6f',
			'f90','f93','f96','f99','f9c','f9f',
			'fc0','fc3','fc6','fc9','fcc','fcf',
			'ff0','ff3','ff6','ff9','ffc','fff'
		],
		
		// Criador de seletor de cor
		criaGrid : function(alvo,input)
		{
			var HTML = '';
			for ( var a in this.cor )
			{
				var id = input+'_'+this.cor[a];
				HTML += '<div id="'+id+'" class="gridCor"></div>';
			}; delete(a);
			$o(alvo).innerHTML = HTML;
			for ( var a in this.cor )
			{
				var cx = $o(input+'_'+this.cor[a]);
				cx.style.backgroundColor = '#'+this.cor[a];
				cx.cor = '#'+this.cor[a];
				cx.onclick = function()
				{
					$o(input).value=this.cor;
					mkut.mkuta();
				};
			}; delete(a);
		},
		
		// Processador de texto
		mkuta : function()
		{
			
			// Pega o valor de entrada
			var texto = $o('entrada').value;
			
			// Variável para acomodar o código
			var codigo = '';
			
			if ( texto != '' )
			{
				
				// ... let the fun begin :)
				codigo = '<div style="';
				
				// fontFamily
				if ( $o('fontFamily').value != '' )
					codigo += 'font-family:\''+$o('fontFamily').value+'\';';
				
				// fontSize
				if ( $o('setFontSize').checked == false )
					codigo += 'font-size:'+$o('fontSize').value+$o('fontSizeUnits').value+';';
				
				// fontStyle
				if ( $o('fontStyle').value != '' )
					codigo += 'font-style:'+$o('fontStyle').value+';';
				
				// fontWeight
				if ( $o('fontWeight').value != '' )
					codigo += 'font-weight:'+$o('fontWeight').value+';';
				
				// fontVariant
				if ( $o('fontVariant').value != '' )
					codigo += 'font-variant:'+$o('fontVariant').value+';';
				
				// color
				if ( $o('color').value != '' )
					codigo += 'color:'+$o('color').value+';';
				
				// letterSpacing
				if ( $o('setLetterSpacing').checked == false )
					codigo += 'letter-spacing:'+$o('letterSpacing').value+$o('letterSpacingUnits').value+';';
				
				// wordspacing
				if ( $o('setWordSpacing').checked == false )
					codigo += 'word-spacing:'+$o('wordSpacing').value+$o('wordSpacingUnits').value+';';
				
				// lineHeight
				if ( $o('setLineHeight').checked == false )
					codigo += 'line-height:'+$o('lineHeight').value+$o('lineHeightUnits').value+';';
				
				// textAlign
				if ( $o('textAlign').value != '' )
					codigo += 'text-align:'+$o('textAlign').value+';';
				
				// textDecoration
				if ( $o('textDecoration').value != '' )
					codigo += 'text-decoration:'+$o('textDecoration').value+';';
				
				// textIndent
				if ( $o('setTextIndent').checked == false )
					codigo += 'text-indent:'+$o('textIndent').value+$o('textIndentUnits').value+';';
				
				// textTransform
				if ( $o('textTransform').value != '' )
					codigo += 'text-transform:'+$o('textTransform').value+';';
				
				// backgroundColor
				if ( $o('backgroundColor').value != '' )
					codigo += 'background-color:'+$o('backgroundColor').value+';';
				
				// borderColor
				if ( $o('borderStyle').value != 'none' && $o('borderColor').value != '' )
					codigo += 'border-color:'+$o('borderColor').value+';';
				
				// borderStyle
				if ( $o('borderStyle').value != 'none' )
					codigo += 'border-style:'+$o('borderStyle').value+';';
				
				// borderWidth
				if ( $o('borderStyle').value != 'none' )
					codigo += 'border-width:'+$o('borderWidth').value+'px;';
				
				// width
				if ( $o('setWidth').checked == false )
					codigo += 'width:'+$o('width').value+$o('widthUnits').value+';';
				
				// height
				if ( $o('setHeight').checked == false )
					codigo += 'height:'+$o('height').value+$o('heightUnits').value+';';
				
				// margin
				if ( $o('margin').value != 0 )
					codigo += 'margin:'+$o('margin').value+'px;';
				
				// padding
				if ( $o('padding').value != 0 )
					codigo += 'padding:'+$o('padding').value+'px;';
				
				// ... let the fun end :(
				codigo += '">'+texto+'</div>';
				
			};
			
			// mostra a previsão
			$o('previsao').innerHTML = codigo;
			
			// exibe o código
			$o('saida').value = codigo;
			
			// para usuários preguiçosos, deixa o texto selecionado
			$o('saida').select();
			
		},
		
	};
	
})();