{% load i18n l10n %}

<style type="text/css">
/*button on / off*/
#stage {
  display: block;
  margin: 0;
  padding: 0;
  margin: 0 auto;
  float:left;
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#5c5f62', EndColorStr='#383839', GradientType=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#5c5f62', EndColorStr='#383839', GradientType=0))";
}
#stage .slider-frame {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  margin: 0px 0px 5px 25px;
  width: 42px;
  height: 15px;
  background-size: 100%;
  background-color: #404040;
  background-repeat: no-repeat;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#2b2b2b), to(#404040));
  background-image: -webkit-linear-gradient(#2b2b2b, #404040);
  background-image: -moz-linear-gradient(#2b2b2b, #404040);
  background-image: -o-linear-gradient(top, #2b2b2b, #404040);
  background-image: -khtml-gradient(linear, left top, left bottom, from(#2b2b2b), to(#404040));
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#2b2b2b', EndColorStr='#404040', GradientType=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#2b2b2b', EndColorStr='#404040', GradientType=0))";
  border-top: 1px solid #333333;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #666666;
  border-left: 1px solid #333333;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: inset 0px 1px 8px 0 rgba(0, 0, 0, 0.25);
  -moz-box-shadow: inset 0px 1px 8px 0 rgba(0, 0, 0, 0.25);
  box-shadow: inset 0px 1px 8px 0 rgba(0, 0, 0, 0.25);
}
#stage .slider-frame .slider-button {
  display: block;
  margin: 0;
  padding: 0;
  width: 21px;
  height: 13px;
  line-height: 13px;
  background: #d37a16;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #70430e;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  color: #fff;
  font-family:Helvetica;
  font-size:9px;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  text-align: center;
  cursor: pointer;
}
#stage .slider-frame .slider-button.on {
  margin-left: 20px;
  background: #2372c6;
  border: 1px solid #0f3f74;
}
#stage .slider-frame .slider-button:before {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  width: 21px;
  height: 6px;
  background: rgba(255, 255, 255);
  background: rgba(255, 255, 255, 0.25);
  content: '';
  -moz-border-radius: 15px;
  border-radius: 15px;
}
/*end button on / off*/
.interruptor{
  margin: 5px 5px 0px 10px;
  font-weight:bold;
  border: 1px solid grey;
  border-radius:5px;
  text-align:center;
  display: inline-block;

/*   width:390px;*/
/*  margin-right: auto;
  margin-left: auto;*/




}
.text_interruptor{
  margin: 2px 2px 4px 2px;



}
</style>


{% get_current_language as LANGUAGE_CODE %}


<div id='{{view_name}}_{{interruptor_name}}_button_on_off' class='interruptor'>
	<div id = '{{view_name}}_{{interruptor_name}}_text_interruptor' class='text_interruptor'> {% trans name_text %} </div> 
	<section id="stage">
		<div id='{{view_name}}_{{interruptor_name}}_interruptor' class="slider-frame">
      <span id='{{view_name}}_{{callback}}_button' class="slider-button">{% trans default_position %}</span>  </div>  
	</section>
  <p style= 'clear: both !important;'></p>
</div>

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

if ('{{default_position}}'=='{{default_name_ON}}')
{
    $('#{{view_name}}_{{callback}}_button').attr('valor','{{default_name_ON}}').html('{{default_name_ON}}');
    $('#{{view_name}}_{{callback}}_button').addClass('on');
   // $('#{{view_name}}_{{callback}}_button').trigger('click');
    //{{view_name}}_callback('{{callback}}_ON');
    $('#{{view_name}}_{{callback}}_button').toggle(
          function(){  
            $(this).removeClass('on');
            $(this).attr('valor','{{default_name_OFF}}').html('{{default_name_OFF}}');
          
            {{view_name}}_callback('{{callback}}');

          },function(){  
            $(this).addClass('on'); 
            $(this).attr('valor','{{default_name_ON}}').html('{{default_name_ON}}');

            {{view_name}}_callback('{{callback}}');
          });      
}
else
{
    $('#{{view_name}}_{{callback}}_button').attr('valor','{{default_name_OFF}}').html('{{default_name_OFF}}'); 
    //$('#{{view_name}}_{{callback}}_button').trigger('click'); 
    //{{view_name}}_callback('{{callback}}_OFF');
    $('#{{view_name}}_{{callback}}_button').toggle(
      function(){  
        $(this).addClass('on');
        $(this).attr('valor','{{default_name_ON}}').html('{{default_name_ON}}');
      
        {{view_name}}_callback('{{callback}}');

      },function(){  
        $(this).removeClass('on'); 
        $(this).attr('valor','{{default_name_OFF}}').html('{{default_name_OFF}}');

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


</script>

