var React = require('react'),
	Field = require('../field'),
	Note  = require('../../components/note'),
	$     = require('jquery');

require('./lib/bootstrap-colorpicker');

module.exports = Field.create({
	componentDidMount: function() {
		$(this.refs.field.getDOMNode()).colorpicker();
	},

	renderUI: function() {
		var value = this.props.value;

		var field;
		if (this.props.noedit) {
			field = <div className='field-value'>{value}</div>;
		} else {
			field = <div className='input-group field-type-color'>
				<input ref='field' type='text' className='form-control' name={this.props.path} value={value} autocomplete='off' />
				<span className='input-group-addon' />
			</div>;
		}

		return <div className='field type-color'>
			<label className='field-label'>{this.props.label}</label>
			<div className='field-ui'>{field}</div>
			<Note note={this.props.note} />
		</div>;
	}
});

@@ -57,51 +57,8 @@
 '),%0A
-%09Note  = require('../../components/note'),%0A
 %09$  
@@ -194,10 +194,13 @@
 %7B%0A%09%09
-$(
+if (!
 this
@@ -214,37 +214,18 @@
 ield
-.getDOMNode()).colorpicker();
+) return;%0A
 %0A%09%7D,
@@ -237,10 +237,13 @@
 nder
-UI
+Field
 : fu
@@ -259,204 +259,17 @@
 %7B%0A%09%09
-var value = this.props.value;%0A%0A%09%09var field;%0A%09%09if (this.props.noedit) %7B%0A%09%09%09field = %3Cdiv className='field-value'%3E%7Bvalue%7D%3C/div%3E;%0A%09%09%7D else %7B%0A%09%09%09field = %3Cdiv className='input-group field-type-color'%3E%0A%09
+return %5B%0A
 %09%09%09%3C
@@ -322,16 +322,45 @@
 control'
+ onChange=%7Bthis.valueChanged%7D
  name=%7Bt
@@ -382,16 +382,27 @@
  value=%7B
+this.props.
 value%7D a
@@ -404,17 +404,17 @@
 ue%7D auto
-c
+C
 omplete=
@@ -425,18 +425,17 @@
 ' /%3E
+,
 %0A
-%09
 %09%09%09%3C
-span
+div
  cla
@@ -446,237 +446,67 @@
 me='
-input-group-addon' /%3E%0A%09%09%09%3C/div%3E;%0A%09%09%7D%0A%0A%09%09return %3Cdiv className='field type-color'%3E%0A%09%09%09%3Clabel className='field-label'%3E%7Bthis.props.label%7D%3C/label%3E%0A%09%09%09%3Cdiv className='field-ui'%3E%7Bfield%7D%3C/div%3E%0A%09%09%09%3CNote note=%7Bthis.props.note
+color-preview' style=%7B %7B color: this.props.value %7D 
 %7D /%3E%0A%09%09
-%3C/div%3E
+%5D
 ;%0A%09%7D

Simplify react color field