<script>
		jQuery(function($) {
			$('#id-disable-check').on('click', function() {
				var inp = $('#form-input-readonly').get(0);
				if (inp.hasAttribute('disabled')) {
					inp.setAttribute('readonly', 'true');
					inp.removeAttribute('disabled');
					inp.value = "This text field is readonly!";
				} else {
					inp.setAttribute('disabled', 'disabled');
					inp.removeAttribute('readonly');
					inp.value = "This text field is disabled!";
				}
			});


			if (!ace.vars['touch']) {
				$('.chosen-select').chosen({
					allow_single_deselect: true
				});
				//resize the chosen on window resize

				$(window)
					.off('resize.chosen')
					.on('resize.chosen', function() {
						$('.chosen-select').each(function() {
							var $this = $(this);
							$this.next().css({
								'width': $this.parent().width()
							});
						})
					}).trigger('resize.chosen');
				//resize chosen on sidebar collapse/expand
				$(document).on('settings.ace.chosen', function(e, event_name, event_val) {
					if (event_name != 'sidebar_collapsed') return;
					$('.chosen-select').each(function() {
						var $this = $(this);
						$this.next().css({
							'width': $this.parent().width()
						});
					})
				});


				$('#chosen-multiple-style .btn').on('click', function(e) {
					var target = $(this).find('input[type=radio]');
					var which = parseInt(target.val());
					if (which == 2) $('#form-field-select-4').addClass('tag-input-style');
					else $('#form-field-select-4').removeClass('tag-input-style');
				});
			}


			$('[data-rel=tooltip]').tooltip({
				container: 'body'
			});
			$('[data-rel=popover]').popover({
				container: 'body'
			});

			autosize($('textarea[class*=autosize]'));

			$('textarea.limited').inputlimiter({
				remText: '%n character%s remaining...',
				limitText: 'max allowed : %n.'
			});



			$("#input-size-slider").css('width', '200px').slider({
				value: 1,
				range: "min",
				min: 1,
				max: 8,
				step: 1,
				slide: function(event, ui) {
					var sizing = ['', 'input-sm', 'input-lg', 'input-mini', 'input-small', 'input-medium', 'input-large', 'input-xlarge', 'input-xxlarge'];
					var val = parseInt(ui.value);
					$('#form-field-4').attr('class', sizing[val]).attr('placeholder', '.' + sizing[val]);
				}
			});

			$("#input-span-slider").slider({
				value: 1,
				range: "min",
				min: 1,
				max: 12,
				step: 1,
				slide: function(event, ui) {
					var val = parseInt(ui.value);
					$('#form-field-5').attr('class', 'col-xs-' + val).val('.col-xs-' + val);
				}
			});



			//"jQuery UI Slider"
			//range slider tooltip example
			$("#slider-range").css('height', '200px').slider({
				orientation: "vertical",
				range: true,
				min: 0,
				max: 100,
				values: [17, 67],
				slide: function(event, ui) {
					var val = ui.values[$(ui.handle).index() - 1] + "";

					if (!ui.handle.firstChild) {
						$("<div class='tooltip right in' style='display:none;left:16px;top:-6px;'><div class='tooltip-arrow'></div><div class='tooltip-inner'></div></div>")
							.prependTo(ui.handle);
					}
					$(ui.handle.firstChild).show().children().eq(1).text(val);
				}
			}).find('span.ui-slider-handle').on('blur', function() {
				$(this.firstChild).hide();
			});


			$("#slider-range-max").slider({
				range: "max",
				min: 1,
				max: 10,
				value: 2
			});

			$("#slider-eq > span").css({
				width: '90%',
				'float': 'left',
				margin: '15px'
			}).each(function() {
				// read initial values from markup and remove that
				var value = parseInt($(this).text(), 10);
				$(this).empty().slider({
					value: value,
					range: "min",
					animate: true

				});
			});

			$("#slider-eq > span.ui-slider-purple").slider('disable'); //disable third item


			$('#id-input-file-1 , #id-input-file-2').ace_file_input({
				no_file: 'No File ...',
				btn_choose: 'Choose',
				btn_change: 'Change',
				droppable: false,
				onchange: null,
				thumbnail: false //| true | large
				//whitelist:'gif|png|jpg|jpeg'
				//blacklist:'exe|php'
				//onchange:''
				//
			});
			//pre-show a file name, for example a previously selected file
			//$('#id-input-file-1').ace_file_input('show_file_list', ['myfile.txt'])


			$('#id-input-file-3').ace_file_input({
				style: 'well',
				btn_choose: 'Drop files here or click to choose',
				btn_change: null,
				no_icon: 'ace-icon fa fa-cloud-upload',
				droppable: true,
				thumbnail: 'small' //large | fit
					//,icon_remove:null//set null, to hide remove/reset button
					/**,before_change:function(files, dropped) {
						//Check an example below
						//or examples/file-upload.html
						return true;
					}*/
					/**,before_remove : function() {
						return true;
					}*/
					,
				preview_error: function(filename, error_code) {
					//name of the file that failed
					//error_code values
					//1 = 'FILE_LOAD_FAILED',
					//2 = 'IMAGE_LOAD_FAILED',
					//3 = 'THUMBNAIL_FAILED'
					//alert(error_code);
				}

			}).on('change', function() {
				//console.log($(this).data('ace_input_files'));
				//console.log($(this).data('ace_input_method'));
			});


			//$('#id-input-file-3')
			//.ace_file_input('show_file_list', [
			//{type: 'image', name: 'name of image', path: 'http://path/to/image/for/preview'},
			//{type: 'file', name: 'hello.txt'}
			//]);




			//dynamically change allowed formats by changing allowExt && allowMime function
			$('#id-file-format').removeAttr('checked').on('change', function() {
				var whitelist_ext, whitelist_mime;
				var btn_choose
				var no_icon
				if (this.checked) {
					btn_choose = "Drop images here or click to choose";
					no_icon = "ace-icon fa fa-picture-o";

					whitelist_ext = ["jpeg", "jpg", "png", "gif", "bmp"];
					whitelist_mime = ["image/jpg", "image/jpeg", "image/png", "image/gif", "image/bmp"];
				} else {
					btn_choose = "Drop files here or click to choose";
					no_icon = "ace-icon fa fa-cloud-upload";

					whitelist_ext = null; //all extensions are acceptable
					whitelist_mime = null; //all mimes are acceptable
				}
				var file_input = $('#id-input-file-3');
				file_input
					.ace_file_input('update_settings', {
						'btn_choose': btn_choose,
						'no_icon': no_icon,
						'allowExt': whitelist_ext,
						'allowMime': whitelist_mime
					})
				file_input.ace_file_input('reset_input');

				file_input
					.off('file.error.ace')
					.on('file.error.ace', function(e, info) {


					});

			});

			$('#spinner1').ace_spinner({
					value: 0,
					min: 0,
					max: 200,
					step: 10,
					btn_up_class: 'btn-info',
					btn_down_class: 'btn-info'
				})
				.closest('.ace-spinner')
				.on('changed.fu.spinbox', function() {
					//console.log($('#spinner1').val())
				});
			$('#spinner2').ace_spinner({
				value: 0,
				min: 0,
				max: 10000,
				step: 100,
				touch_spinner: true,
				icon_up: 'ace-icon fa fa-caret-up bigger-110',
				icon_down: 'ace-icon fa fa-caret-down bigger-110'
			});
			$('#spinner3').ace_spinner({
				value: 0,
				min: -100,
				max: 100,
				step: 10,
				on_sides: true,
				icon_up: 'ace-icon fa fa-plus bigger-110',
				icon_down: 'ace-icon fa fa-minus bigger-110',
				btn_up_class: 'btn-success',
				btn_down_class: 'btn-danger'
			});
			$('#spinner4').ace_spinner({
				value: 0,
				min: -100,
				max: 100,
				step: 10,
				on_sides: true,
				icon_up: 'ace-icon fa fa-plus',
				icon_down: 'ace-icon fa fa-minus',
				btn_up_class: 'btn-purple',
				btn_down_class: 'btn-purple'
			});

			//$('#spinner1').ace_spinner('disable').ace_spinner('value', 11);
			//or
			//$('#spinner1').closest('.ace-spinner').spinner('disable').spinner('enable').spinner('value', 11);//disable, enable or change value
			//$('#spinner1').closest('.ace-spinner').spinner('value', 0);//reset to 0


			//datepicker plugin
			//link
			$('.date-picker').datepicker({
					autoclose: true,
					todayHighlight: true
				})
				//show datepicker when clicking on the icon
				.next().on(ace.click_event, function() {
					$(this).prev().focus();
				});

			//or change it into a date range picker
			$('.input-daterange').datepicker({
				autoclose: true,
				format: 'dd/mm/yyyy',
				startDate: '1d',
				defaultDate: new Date()
			});


			//to translate the daterange picker, please copy the "examples/daterange-fr.js" contents here before initialization
			$('input[name=date-range-picker]').daterangepicker({
					'applyClass': 'btn-sm btn-success',
					'cancelClass': 'btn-sm btn-default',
					locale: {
						applyLabel: 'Apply',
						cancelLabel: 'Cancel',
					}
				})
				.prev().on(ace.click_event, function() {
					$(this).next().focus();
				});



		});
	</script>