<script type="text/javascript">

	var model = {
		
		renderAt: '#containerDemo',

		title: 'Colorpicker Demos',
		
		demos: [

			{
				title: 'Inline colorpicker',
				desc: 'With few lines of code you could build a colorpicker. You can try more options on the fly!',
				html: '<div id="colorpicker" />',
				destroy: '$("#colorpicker").colorpicker("destroy");',
				options: [
					{ desc: 'Make a colorpicker', source: '$("#colorpicker").colorpicker({flat:true});' }
				]
			},

			{
				title: 'Triggered colorpicker',
				desc: 'With few lines of code you could build a colorpicker. You can try more options on the fly!',
				html: '<input id="colorpicker2" />',
				destroy: '$("#colorpicker2").colorpicker("destroy");',
				options: [
					{ desc: 'Make a colorpicker', source: '$("#colorpicker2").colorpicker( {submit: function(e,ui) {		$("#colorpicker2").val(ui.hex);} });' },
					{ desc: 'Fade in/out a colorpicker', source: '$("#colorpicker2").colorpicker( {show: function (e,ui) { $(this).data("colorpicker").picker.fadeIn(500);return false; }, hide: function (e,ui) { $(this).data("colorpicker").picker.fadeOut(500);return false; }, change: function(e,ui) { $("#colorpicker2").val(ui.hex); } });' }
				]
			}

		]
	};

	$(function(){

		uiRenderDemo(model);

	});

</script>