{% load i18n l10n %}

<style type= 'text/css'>

	.tag_moreless{
/*		border: 3px solid blue;*/
		color: #f6931f;
		font-weight:bold;
		
		width: 40px;
		margin: 2px 2px 5px 2px;
	}

	.text_moreless{
		font-weight: bold;
		padding: 2px 2px 5px 2px;

	}

	.tag_moreless_button{

		float: left;
		display: inline-block;

	}

	.slider_container{
		border:1px solid grey;
		padding:5px ;
		border-radius:5px;
  		text-align:center;
  		width:91px;
	}

	.more_plus_btn{
		border: 1px solid red;
		float: left;
		height: 20px;
		width: 20px;
		display: inline-block;
		margin: 5px;
		padding: 2px;
	}

</style>

{% get_current_language as LANGUAGE_CODE %}

<div id="{{view_name}}_div_moreless" class="slider_container">

		{% if rang == 'true' %}
			<div id ='{{name_moreless}}_title_moreless' class="text_moreless" >
				<label for="slider_range" class="text_moreless">{{text_moreless}}</label>
			</div>
				<input type="text" id="{{name_moreless}}_moreless_range" class='tag_moreless' />
			<div id="{{name_moreless}}_tag_moreless_range" class="tag_moreless_button"> </div>
		{% else %}

			

				{% if vertical == 'true' %}
					<div id ='{{name_moreless}}_title_moreless' class="text_moreless" >
						<label for="slider" >{{text_moreless}} </label>
					</div>
					<input type="text" id="{{name_moreless}}_moreless" class='tag_moreless' />
				{% else %}

					<div id ='{{name_moreless}}_title_moreless' class="text_moreless" >
						<label for="slider" >{{text_moreless}} </label>
						<input type="text" id="{{name_moreless}}_moreless" class='tag_moreless' />
					</div>
					
				{% endif %}
	
			<button id='{{name_moreless}}_less_btn' > </button> <button id='{{name_moreless}}_more_btn' > </button> 
			<p style= 'clear: both !important;'></p>

			<div id="{{name_moreless}}_tag_moreless" class="tag_moreless_button"></div>

		{% endif %}
</div><!-- /Shortcuts -->

<script type="text/javascript" lang="text/javascript">

$('#{{name_moreless}}_more_btn').button({icons:{primary:"ui-icon-minusthick"}});
$('#{{name_moreless}}_less_btn').button({icons:{primary:"ui-icon-plus"}});



$('#{{name_moreless}}_tag_moreless').hide();

var button_moreless_selected = ''

$('#{{name_moreless}}_less_btn').click(function(){
	// console.log('Click in button less')
	actual_value = parseInt($("#{{name_moreless}}_moreless" ).val())
	actual_value = actual_value -1;
	$("#{{name_moreless}}_moreless").val( String(actual_value)+' '+'{{unit}}'  );
	button_moreless_selected = 'less'
	{{view_name}}_callback('{{name_moreless}}_moreless');
});

$('#{{name_moreless}}_more_btn').click(function(){
	// console.log('Click in button more')
	actual_value = parseInt($("#{{name_moreless}}_moreless" ).val())
	actual_value = actual_value +1;
	$("#{{name_moreless}}_moreless").val( String(actual_value)+' '+'{{unit}}'  );
	button_moreless_selected = 'more'
	{{view_name}}_callback('{{name_moreless}}_moreless');
});




//	$("#{{view_name}}_div_shortcuts_radio label").removeClass('ui-state-active');

// def tag_moreless(view_name,name_moreless,position,rang,min_val,max_val,default_min,default_max,unit):

 $("#{{name_moreless}}_tag_moreless").mouseup(function(){
 	var slider_val = $("#{{name_moreless}}_moreless" ).val( );
 	{{view_name}}_callback('{{name_moreless}}_moreless');
})

 $("#{{name_moreless}}_tag_moreless_range").mouseup(function(){
 	var slider_val = $( "#{{name_moreless}}_moreless_range" ).val( );
 	{{view_name}}_callback('{{name_moreless}}_moreless');
})


// $(function() {

	 $( "#{{name_moreless}}_tag_moreless" ).slider({
		orientation: '{{position}}',
		range: "min",
		min: {{min_val}},
		max: {{max_val}},
		value: '{{default_min}}',
		slide: function( event, ui ) 
		{
			$( "#{{name_moreless}}_moreless" ).val( ui.value +' '+'{{unit}}'  );
		},
		change:function( event,ui )
		{
			// console.log('change');
		},
		create:function( event,ui)
		{
			// console.log('create');
		},
		start:function(event,ui)
		{
			// console.log('start');
			// {{name_moreless}}_tag_moreless_start();
			$('#{{view_name}}_div_grid_container').block();

		},
		stop:function(event,ui)
		{
			// {{name_moreless}}_tag_moreless_stop();

			$('#{{view_name}}_div_grid_container').unblock();

		}
	});

	$( "#{{name_moreless}}_moreless" ).val( $( "#{{name_moreless}}_tag_moreless" ).slider( "value" ) +' '+'{{unit}}');

	$( "#{{name_moreless}}_tag_moreless_range" ).slider({
		range: true,
		orientation:'{{position}}',
		min: {{min_val}},
		max: {{max_val}},
		values: ['{{default_min}}','{{default_max}}'],
		slide: function( event, ui ) 
		{
			$( "#{{name_moreless}}_moreless_range" ).val( ui.values[ 0 ] + '-' + ui.values[ 1 ]+' '+'{{unit}}' );
		}
	});

	$( "#{{name_moreless}}_moreless_range" ).val(  $( "#{{name_moreless}}_tag_moreless_range" ).slider( "values", 0 ) + '-'+
	+ $( "#{{name_moreless}}_tag_moreless_range" ).slider( "values", 1 ) +' '+'{{unit}}' );
// });




function {{view_name}}_tag_moreless_start(){};



function {{view_name}}_tag_moreless_stop(){};

</script>