<?php
defined('_JEXEC') or die();
define('TEMPLATE', 'rt_solarsentinel');
jimport('joomla.form.formfield');
include_once('../templates/'.TEMPLATE.'/styles.php');

class JFormFieldColorChooser extends JFormField{
	

	protected $type = 'colorchooser';
	
	function getInput()
	{
		global $stylesList;
		$output = '';
		$document 	=& JFactory::getDocument();
		
		$name = $this->element['name'];
		$value = $this->element['value'];
		$node = $this->element['node'];
		$control_name = $this->element['control_name'];
		
		if (!defined('MOORAINBOW')) {
			
			$document->addStyleSheet('../templates/'.TEMPLATE.'/moorainbow/mooRainbow.css');
			$document->addScript('../templates/'.TEMPLATE.'/moorainbow/mooRainbow.js');
			$document->addStyleSheet('../templates/'.TEMPLATE.'/admin/preview/preview.css');
			
			$scriptconfig  = $this->populateStyles($stylesList);
			$scriptconfig .= $this->rainbowInit();
			
			$document->addScriptDeclaration($scriptconfig);
			
			define('MOORAINBOW',1);
		}
	
		$scriptconfig = $this->newRainbow($this->id);
		
		$document->addScriptDeclaration($scriptconfig);		

		$output .= "<input class=\"picker-input\" id=\"".$this->id."\" name=\"".$this->name."\" type=\"text\" size=\"7\" maxlength=\"7\" value=\"".$this->value."\" />";
		$output .= "<div class=\"picker\" id=\"myRainbow_".$this->id."_input\"><div class=\"overlay\"></div></div>\n";
		
		return $output;
	}
	
	function newRainbow($name)
	{
		return "window.addEvent('domready', function() {		
			var input = document.id('".$name."');
			var r_".$name." = new MooRainbow('myRainbow_".$name."_input', {
				id: 'myRainbow_".$name."',
				startColor: document.id('".$name."').get('value').hexToRgb(true),
				imgPath: '../templates/".TEMPLATE."/moorainbow/images/',
				transparent: false,
				onChange: function(color) {
					document.id('jform_params_presetStyle').selectedIndex = document.id('jform_params_presetStyle').getChildren().length - 1;
					input.getNext().getFirst().setStyle('background-color', color.hex);
					input.value = color.hex;
					
					if (this.visible) this.okButton.focus();
				}
			});
			$$('#jform_params_bodyStyle', '#jform_params_headerStyle', '#jform_params_bgStyle', '#jform_params_footerStyle').addEvent('change', function() {
				document.id('jform_params_presetStyle').selectedIndex = document.id('jform_params_presetStyle').getChildren().length - 1;
			});
			
			
			r_".$name.".okButton.setStyle('outline', 'none');
			document.id('myRainbow_".$name."_input').addEvent('click', function() {
				r_".$name.".okButton.focus();
			});
			input.addEvent('keyup', function(e) {
				e = new Event(e);
				if ((this.value.length == 4 || this.value.length == 7) && this.value[0] == '#') {
					var rgb = new Color(this.value);
					var hex = this.value;
					var hsb = rgb.rgbToHsb();
					var color = {
						'hex': hex,
						'rgb': rgb,
						'hsb': hsb
					}
					r_".$name.".fireEvent('onChange', color);
					r_".$name.".manualSet(color.rgb);
				};
			});
			document.id('jform_params_presetStyle').addEvent('change', function() {
				r_".$name.".backupColor = document.id('".$name."').get('value').hexToRgb(true);
				r_".$name.".currentColor = document.id('".$name."').get('value').hexToRgb(true);
				r_".$name.".layout.backup.setStyle('background-color', document.id('".$name."').get('value'));	
			});
			input.getNext().getFirst().setStyle('background-color', r_".$name.".sets.hex);
			rainbowLoad('myRainbow_".$name."');
		});\n";
	}
	
	function populateStyles($list)
	{
		$script = "
		var stylesList = new Hash({});
		var styleSelected = null;
		window.addEvent('domready', function() {
			styleSelected = document.id('jform_params_presetStyle').get('value');
			document.id('jform_params_presetStyle').empty();\n";
		
		foreach($list as $name => $style) {
			$js = "			stylesList.set('$name', ['{$style[0]}'";
			for ($i = 1, $l = count($style); $i < $l; $i++) {
				$js .= ", '{$style[$i]}'";
			}
			$js .= "]);\n";
			$script .= $js;
		}
			
		$script .= "		});";
		
		return $script;
	}
	
	function rainbowInit()
	{
		return "var rainbowLoad = function(name, hex) {				
				if (hex) {
					document.id(name+'_input').getPrevious().value = hex;
					document.id(name+'_input').getFirst().setStyle('background-color', hex);
				}
			};
			
			
			/* START_DEBUG ONLY */
			var debug_only = function() {
				var td = new Element('li', {'id': 'toolbar-colorstyle', 'class': 'button'}).inject('toolbar-cancel', 'before');
				var a = new Element('a', {'class': 'toolbar', 'href': '#'}).inject(td).set('text', 'Custom style');
				new Element('span', {'class': 'icon-32-colorstyle', 'title': 'Output custom style'}).inject(a, 'top');
				
				var li = new Element('li').inject(document.id('jform_params_primaryColor').getParent(), 'after');
				var label = new Element('label', {id: 'jform_params_list_value-lbl'}).set('html', 'Custom style output').inject(li);
				var tarea = new Element('textarea', {id: 'jform_params_list_value', 'styles': {width: '60%', height: '100px'}}).inject(li);

				//var td1 = new Element('div', {'class': 'jform_params_list_key', 'styles': 'width: 40%;'}).inject(tr);
				//var span = new Element('label', {'class': 'hasTip'}).inject(td1).set('html', 'Custom style output');
				
				//var td2 = new Element('td', {'class': 'jform_params_list_value'}).inject(tr);
				//var tarea = new Element('textarea', {'styles': 'width: 100%; height: 100px'}).inject(td2);
				
				var scroll = new Fx.Scroll(window, {offset: {x: false, y: -5}});
				a.addEvent('click', function(e) {
					new Event(e).stop();
					var arr = [];
					
					var output = [
						document.id('jform_params_headerStyle').get('value'),
						document.id('jform_params_bodyStyle').get('value'),
						document.id('jform_params_bgStyle').get('value'),
						document.id('jform_params_footerStyle').get('value'),
						document.id('jform_params_primaryColor').get('value')
					];
					
					output = output.join('\', \'');
					
					tarea.set('html', '\'style_name\' => array(\''+output+'\')');
					
					tarea.focus();
					tarea.select();
					
					scroll.toElement(tarea);
				});
			};
			
			/* END_DEBUG ONLY */
			
			window.addEvent('domready', function() {
				
				debug_only();
				
				// Styles Combo
				var stylesCombo = document.id('jform_params_presetStyle');
				var header = document.id('jform_params_headerStyle');
				var body = document.id('jform_params_bodyStyle');
				var bg = document.id('jform_params_bgStyle');
				var footer = document.id('jform_params_footerStyle');
				
				stylesList.each(function(key, value) {
					var option = new Element('option', {'value': value.toLowerCase()}).set('html', value.capitalize());
					if (value == styleSelected) option.setProperty('selected', 'selected');
					option.inject(stylesCombo);
				});
				var option = new Element('option', {'value': 'custom'}).set('html', 'Custom').inject(stylesCombo);
				if (styleSelected == 'custom') option.setProperty('selected', 'selected');
				
				stylesCombo.addEvent('change', function(e) {
					new Event(e).stop();
					if (this.value == 'custom') return;
					header.getChildren().each(function(el) {
						if (el.value == stylesList.get(this.value)[0]) el.selected = true;
					}, this);
					body.getChildren().each(function(el) {
						if (el.value == stylesList.get(this.value)[1]) el.selected = true;
					}, this);
					font.getChildren().each(function(el) {
						if (el.value == stylesList.get(this.value)[2]) el.selected = true;
					}, this);
					
					rainbowLoad('myRainbow_jform_params_primaryColor', stylesList.get(this.value)[4]);
				});				
			});
		";
	}
}

?>