{% load i18n l10n %}
<style type="text/css">
	.ui-button-text {
		font-size: 1em !important;
	}
	.group_by_and_title
	{
		font-size: 10px;	
		font-weight: bold;
	}

	.group_and_select
	{
	border-radius: 4px;

	}
	.group_by_and_title_select
	{
		min-width: 60px;
		float:left;
		padding:5px 5px 5px 5px;
	}

</style>

{% get_current_language as LANGUAGE_CODE %}

{% if input_select == 'button' %}
	<div id="{{view_name}}_group_by_and_div" class="group_by_and_div">
		<form id="{{view_name}}_form_group_by" method ="GET" action ="">  
			<div id="{{view_name}}_group_by_div"> 
				<span id="{{view_name}}_group_by_text" class="group_by_and_title">  {% trans 'Group by:' %}</span>
				{% for f in group_by %}
					<input type="radio" name ="{{view_name}}_group_by" id="{{view_name}}_group_by_div_{{f.0}}" value="{{f.0}}" for="{{f.0}}"/>
					<label for="{{view_name}}_group_by_div_{{f.0}}" id="{{f.0}}_label1">{% trans f.1 %}</label>
				{% endfor %}
			</div>
			{% if col2 != 'None' %}
				<p class="clear-fix"></p>
				<div id="{{view_name}}_and_by_div">
					<span  id="{{view_name}}_group_by_text" class="group_by_and_title">{% trans 'And:' %}</span>
						{% for f in group_by %}
							<input type="radio" name ="{{view_name}}_and_by" id="{{view_name}}_and_by_div_{{f.0}}" value="{{f.0}}" for="{{f.0}}" />
							<label for="{{view_name}}_and_by_div_{{f.0}}" id="{{f.0}}_label2"> {% trans f.1 %}</label>
						{% endfor %}
				</div>
			{% endif%}
			<p class="clear-fix"></p>
		</form>
	</div><!-- / -->
{% else %}
	<div id="{{view_name}}_group_by_and_div" class="group_by_and_div">
		<form id="{{view_name}}_form_group_by" method ="GET" action ="">  
			<div id="{{view_name}}_group_by_div"> 
				<span class="group_by_and_title_select">{% trans 'Group by:' %}</span>
				<select name="group_by" class="group_and_select">
				{% for f in group_by %}
					{% if col1 == f.0 %}
						<option id ="{{f.0}}_label1" value="{{f.0}}" selected for="{{f.0}}"  >{% trans f.1 %}</option>
					{% else %}
						<option id ="{{f.0}}_label1" value="{{f.0}}" for="{{f.0}}"  >{% trans f.1 %}</option>
					{% endif %}
				{% endfor %}
				</select>
			</div>

			{% if col2 != 'None' %}
			<div id="{{view_name}}_and_by_div"> 
				<span class="group_by_and_title_select"> {% trans 'And:' %} </span>
				<select name="and_by" class="group_and_select">
				{% for f in group_by %}
					{% if col2 == f.0 %}
						<option id ="{{f.0}}_label2" value="{{f.0}}" selected for="{{f.0}}" name ="and_by" >{% trans f.1 %}</option>
					{% else %}
						<option id ="{{f.0}}_label2" value="{{f.0}}" for="{{f.0}}" name ="and_by" >{% trans f.1 %}</option>
					{% endif %}
				{% endfor %}
				</select>
			</div>
			{% endif%}
		</form>
	</div><!-- / -->

{% endif %}


<script type="text/javascript">
// var col1;
// var col2;
// var view_name = {% autoescape off %} '{{view_name}}' {% endautoescape %}
// var grid_name = {% autoescape off %} '{{grid_name}}' {% endautoescape %}	
// var input_select = {% autoescape off %} '{{input_select}}' {% endautoescape %}
// var index1 = {% autoescape off %} '{{index1}}' {% endautoescape %}
// var index2 = {% autoescape off %} '{{index2}}' {% endautoescape %}	


// $('#{{view_name}}_form_group_by').buttonset();

// $('#group_by_div_{{col1}}').attr('checked',true);
// $('#and_by_div_{{col2}}').attr('checked',true);

// $("#{{col1}}_label1").addClass('ui-state-active');


// if ('{{col2}}' != 'None')
// {	
// 	$("#{{col2}}_label2").addClass('ui-state-active');
// }

$('#{{view_name}}_form_group_by').buttonset();

$('#{{view_name}}_group_by_div_{{col1}}').attr('checked',true);
$("#{{col1}}_label1").addClass('ui-state-active');

if ('{{col2}}' != 'None')
{	
	$('#{{view_name}}_and_by_div_{{col2}}').attr('checked',true);
	$("#{{col2}}_label2").addClass('ui-state-active');
}





$('#{{view_name}}_form_group_by').change(function(){
	// col_model = $('#'+grid_name+'_table_grid').jqGrid('getGridParam','colModel');


	// if (input_select == 'button')
	// {
	// 	col1 = $("input[name='group_by']:checked").val();
	// 	if ('{{col2}}' != 'None')
	// 	{	
	// 		col2 = $("input[name='and_by']:checked").val();	
	// 	}		
	// }
	// else{
	// 	// Get first column value
	// 	col1 = $("option[name='group_by']:checked").val();
	// 	col2 = 'None'
	// 	// Get second column value if not null
	// 	if ('{{col2}}' != 'None'){	
	// 		col2 = $("input[name='and_by']:checked").val();	
	// 	}
	// }

	// for (i in col_model)
	// {	
	// 	$("#{{grid_name}}_table_grid").jqGrid('showCol',col_model[i].name)	
	// }

	// if (col1 == col2){
	// 	if(col_model[index1].name==col1)			
	// 		$("#{{grid_name}}_table_grid").jqGrid('hideCol',col_model[index2].name);
	// 	else
	// 		$("#{{grid_name}}_table_grid").jqGrid('hideCol',col_model[index1].name);

	// }
	// else{

	// 	col_model[index1]['name'] = col1;

	// 	if ('{{col2}}' != 'None'){
	// 		col_model[index2]['name'] = col2;
	// 	}
	// }

	// new_name = $("#" + col_model[index1]['name'] + "_label1").html()

	// if (new_name == undefined)
	// {
	// 	new_name = col_model[index1]['name'];
	// 	new_name = new_name.replace('Field','');
	// }

	// new_name = new_name.replace('_',' ')
	// $('#'+grid_name+'_table_grid').jqGrid().setLabel(col_model[index1]['name'],new_name);

	// if ('{{col2}}' != 'None'){

	// 	new_name = $("#" + col_model[index2]['name'] + "_label1").html()

	// 	if (new_name == undefined)
	// 	{
	// 		new_name = col_model[index2]['name'];
	// 		new_name = new_name.replace('Field','');
	// 	}

	// 	new_name = new_name.replace('_',' ')
	// 	$('#'+grid_name+'_table_grid').jqGrid().setLabel(col_model[index2]['name'],new_name);
	// }
	// // $('#'+grid_name+'_table_grid').jqGrid().trigger('reloadGrid');

	{{view_name}}_callback('group_by');
});

</script>


