(function($){
	var initLayout = function() {
		var hash = window.location.hash.replace('#', '');


                var widt = false;
		$('#colorpickerHolder1').ColorPicker({
			flat: true,
			color: '#000000',
			onSubmit: function(hsb, hex, rgb, el) {
				$('#colorSelector1 div').css('backgroundColor', '#' + hex);
                                $('#colorpickerHolder1 input').val('#' + hex);
                                $(el).hide();
                                widt = !widt;
			},
                        onBeforeShow: function () {
                                $(this).ColorPickerSetColor(this.value);
                        }

		});
		$('#colorpickerHolder1>div').css('position', 'absolute');
		
		$('#colorSelector1').bind('click', function() {
			$('#colorpickerHolder1').stop().animate({height: widt ? 0 : 173}, 500);
			widt = !widt;
		});
		
		var widt = false;
                $('#colorpickerHolder').ColorPicker({flat: true});
		$('#colorpickerHolder2').ColorPicker({
			flat: true,
			color: '#00ff00',
			onSubmit: function(hsb, hex, rgb, el) {
				$('#colorSelector2 div').css('backgroundColor', '#' + hex);
                                $('#colorpickerHolder2 input').val('#' + hex);
                                $(el).hide();
                                widt = !widt;
			},
                        onBeforeShow: function () {
                                $(this).ColorPickerSetColor(this.value);
                        }
		});
		$('#colorpickerHolder2>div').css('position', 'absolute');
		
		$('#colorSelector2').bind('click', function() {
			$('#colorpickerHolder2').stop().animate({height: widt ? 0 : 173}, 500);
			widt = !widt;
		});
				

                var widt = false;
                $('#colorpickerHolder3').ColorPicker({
			flat: true,
			color: '#00ff00',
			onSubmit: function(hsb, hex, rgb, el) {
				$('#colorSelector3 div').css('backgroundColor', '#' + hex);
                                $('#colorpickerHolder3 input').val('#' + hex);
                                $(el).hide();
                                widt = !widt;
			},
                        onBeforeShow: function () {
                                $(this).ColorPickerSetColor(this.value);
                        }
		});
		$('#colorpickerHolder3>div').css('position', 'absolute');
		
		$('#colorSelector3').bind('click', function() {
			$('#colorpickerHolder3').stop().animate({height: widt ? 0 : 173}, 500);
			widt = !widt;
		});
		
		var widt = false;
                $('#colorpickerHolder4').ColorPicker({
			flat: true,
			color: '#00ff00',
			onSubmit: function(hsb, hex, rgb, el) {
				$('#colorSelector4 div').css('backgroundColor', '#' + hex);
                                $('#colorpickerHolder4 input').val('#' + hex);
                                $(el).hide();
                                widt = !widt;
			},
                        onBeforeShow: function () {
                                $(this).ColorPickerSetColor(this.value);
                        }
		});
		$('#colorpickerHolder4>div').css('position', 'absolute');
		
		$('#colorSelector4').bind('click', function() {
			$('#colorpickerHolder4').stop().animate({height: widt ? 0 : 173}, 500);
			widt = !widt;
		});
		
	};
	
	
	
	EYE.register(initLayout, 'init');
})(jQuery)

//var hideit = function(e, ui) { $(this).val('#'+ui.hex); $('.ui-colorpicker').css('display', 'none'); };

