(function($){
	var initLayout = function() {
			
		$('#colorpickerHolder').ColorPicker({flat: true});
		
		$('#colorpickerHolder2').ColorPicker({
			flat: true,
			color: '#00ff00',
			onSubmit: function(hsb, hex, rgb) {
				$('#colorSelector2 div').css('backgroundColor', '#' + hex);
			}
		});
		
		$('#colorpickerHolder2>div').css('position', 'absolute');
		
		var widt = false;
		$('#colorSelector2').bind('click', function() {
			$('#colorpickerHolder2').stop().animate({height: widt ? 0 : 173}, 500);
			widt = !widt;
		});
		
		
		$('#colorpickerHolder1').ColorPicker({
			flat: true,
			color: '#00ff00',
			onSubmit: function(hsb, hex, rgb) {
				$('#colorSelector1 div').css('backgroundColor', '#' + hex);
			}
		});
		
		$('#colorpickerHolder1>div').css('position', 'absolute');
		
		var widt = false;
		$('#colorSelector1').bind('click', function() {
			$('#colorpickerHolder1').stop().animate({height: widt ? 0 : 173}, 500);
			widt = !widt;
		});
		
		
		
		$('#colorpickerField1').ColorPicker({
			onSubmit: function(hsb, hex, rgb) {
				$('#colorpickerField1').val(hex);
			},
			onBeforeShow: function () {
				$(this).ColorPickerSetColor(this.value);
			}
		})
		.bind('keyup', function(){
			$(this).ColorPickerSetColor(this.value);
		});
		$('#colorSelector').ColorPicker({
			color: '#0000ff',
			onShow: function (colpkr) {
				$(colpkr).fadeIn(500);
				return false;
			},
			onHide: function (colpkr) {
				$(colpkr).fadeOut(500);
				return false;
			},
			onChange: function (hsb, hex, rgb) {
				$('#colorSelector div').css('backgroundColor', '#' + hex);
			}
		});
	};
	

	EYE.register(initLayout, 'init');
})(jQuery)