
<div class="row">
    <!--La Ruleta-->
    <div class="col-md-8" >
        <div class="box box-info box-solid" style="text-transform:uppercase;">
            <div class="box-body" style="">
                <div id="div-ruleta"></div>
            </div>
        </div>
    </div>
    <!--Los TAbs-->
    <div class="col-md-4" >        
        <div class="box box-info box-solid" style="text-transform:uppercase;">
            <div class="box-header with-border bg-aqua">
                <h3 class="box-title ">Ruleta de la Suerte</h3>
                <div class="pull-right">
                    <button type="button"onclick="paraRuleta();" id="btn-pararuleta" class="btn btn-warning" style="border-color:#fff;" disabled ><i class="fa fa-stop"></i> Para Ruleta </button>
                    <button type="button"onclick="abrirSorteosActivos();" class="btn" style="border-color:#fff;"><i class="fa fa-home"></i></button>
                    <button type="button"onclick="iniciarRuleta(<?= $Sorteo->sorteoID ?>);" class="btn" style="border-color:#fff;"><i class="fa fa-refresh"></i></button>
                    <button type="button"onclick="cargarConfiguracion();" class="btn" style="border-color:#fff;"><i class="fa fa-cog"></i></button>
                </div>
            </div>
            <div class="box-body" style="">
                
                      <div class="panel panel-default">
                          <div class="panel-body">
                              <div class="col-md-3">
                               <img id="imagenPremio"  src="vistas/rifas/img/premio.png" class="img-thumbnail" />
                               <img id="imagenGanador" src="<?= URL_SICAM32 ?>archivo/colaboradores/fotos/sin-foto.png" class="img-thumbnail" />
                             </div>
                             <div class="col-md-9">
                                 <h5>Jugando por <strong id="premioEnJuego" style="font-size: 150%" ></strong></h5>
                                 <h6>Ganador</h6>
                                 <h4 id="nombreGanador" style="color:red;"></h4>
                             </div>
                        </div>
                    </div>

                
                
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#tab_Premios" data-toggle="tab">PREMIOS</a></li>
                        <li><a href="#tab_Participantes" data-toggle="tab">PARTICIPANTES</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="tab_Premios">
                            <div>
                                <div id="div-premios"></div>
                            </div>
                        </div>
                        <div class="tab-pane" id="tab_Participantes">
                            <div>
                                <div id="div-participantes"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>        
    </div>
</div>
    
<script type="text/javascript">

    var sorteoRuleta = "<?= $Sorteo->sorteoID ?>";
    $(document).ready(function () {
        cargarParticipantes();
        cargarPremios();
    });

    var Ruleta;
    var ctx;
    var yaSeCargo = false;
    function cargarConfiguracion(){
         cargarDivisionSicam('div-ruleta', 'tienda-apps', 'Rifas', 'verConfiguracion', "sorteo="+sorteoRuleta);
    }
    function cargarPremios() {
        cargarDivisionSicam('div-premios', 'tienda-apps', 'Rifas', 'todosPremios', "sorteo="+sorteoRuleta);
    }
    
    var PremioEnJuego;
    function cargarParticipantes(premio) {
        ejecutarOperacion("tienda-apps", "Rifas", "asistentes",  "sorteo="+sorteoRuleta+"&premio="+premio,
            function (datos) {
                if( datos ){
                    leerParticipantes(datos.Asistentes);
                    if(datos.Premio){
                        PremioEnJuego = datos.Premio;
                    }
                }
            }
        );
        cargarDivisionSicam('div-participantes', 'tienda-apps', 'Rifas', 'todosParticipantes', "sorteo="+sorteoRuleta);
    }
    function cargarParticipantesSinGanar(premio) {
        ejecutarOperacion("tienda-apps", "Rifas", "asistentesSinGanar", "sorteo="+sorteoRuleta+"&premio="+premio,
            function (datos) {
                if( datos ){
                    console.log(datos);
                    leerParticipantes(datos.Asistentes);
                    if(datos.Premio){
                        PremioEnJuego = datos.Premio;
                    console.log(PremioEnJuego);
                    }
                }
            }
        );
        cargarDivisionSicam('div-participantes', 'tienda-apps', 'Rifas', 'todosParticipantes', "sorteo="+sorteoRuleta);
    }
    
    function leerParticipantes(Asistentes) {
        var ParticipantesRuleta = [];
        for (i = 0; i < Asistentes.length; i++) {
            ParticipantesRuleta.push({
                'fillStyle': "#" + ((1 << 24) * Math.random() | 0).toString(16), 
                'id': Asistentes[i].participanteID ,
                'cedula': Asistentes[i].personaIDENTIFICACION ,
                'foto': "<?= URL_SICAM32 ?>"+Asistentes[i].colaboradorFOTO ,
                'text': Asistentes[i].personaNOMBRES+" "+Asistentes[i].personaAPELLIDOS
            });
        }
        pintarRuleta(ParticipantesRuleta);
    }
    function pintarRuleta(ArraydeParticipantes) {
        
        cargarDivisionSicam('div-ruleta', 'tienda-apps', 'Rifas', 'cargarRuleta', "sorteo="+sorteoRuleta, function(){
            bloqueoCargando();
            Ruleta = new Winwheel({
                'canvasId': 'myCanvas',
                'fillStyle'   : '#e7706f',
                'innerRadius': 75,
                'lineWidth': 1,
                
                'textOrientation' : 'horizontal',    // Set orientation. horizontal, vertical, curved.
                'textFontFamily'  : 'arial',
                'textFontSize': 10,
                'textFillStyle': "white",
                'textMargin': 5,
                'textAlignment'  : 'outer', 
                
                'numSegments': ArraydeParticipantes.length,
                'outerRadius': 320,
                'segments': ArraydeParticipantes,
                
                'animation':
                        {
                            'type': 'spinToStop',
                            'duration': 2 + parseInt(Math.random()*5),
                            'spins': 2 + parseInt( Math.random()*ArraydeParticipantes.length),
                            'callbackFinished': 'pintarGanador(); anunciarGanador();',
                            'callbackAfter': 'pintarTriangulo()'
                        },
                'pins': true
            });
            pintarTriangulo();
            if(yaSeCargo){
                $("#imagenPremio").attr('src', "vistas/rifas/img/"+PremioEnJuego.sorteoPremioURLIMG);  
                $("#premioEnJuego").text(PremioEnJuego.sorteoPremioTITULO);  
                girarRuleta(null);
            }
            yaSeCargo = true;
            desbloqueoCargando();
        });
    }
    
    function pintarTriangulo() {
        ctx = Ruleta.ctx;
        ctx.strokeStyle = '#000000';
        ctx.fillStyle = 'silver';
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(320, 55);
        ctx.lineTo(380, 55);
        ctx.lineTo(350, 90);
        ctx.lineTo(321, 55);
        ctx.stroke();
        ctx.fill();
    }
    function pintarGanador() {
        var ganadorID = Ruleta.getIndicatedSegmentNumber();
        for (var x = 1; x < Ruleta.segments.length; x++) {
            Ruleta.segments[x].fillStyle = 'gray';
        }
        Ruleta.segments[ganadorID].lineWidth = 3;
        Ruleta.segments[ganadorID].fillStyle = 'yellow';
        Ruleta.segments[ganadorID].textFillStyle = 'red';
        Ruleta.segments[ganadorID].textFontSize = '15';
        Ruleta.draw();
        pintarTriangulo();
    }
    function anunciarGanador() {
        var ganadorID = Ruleta.getIndicatedSegment();
        ejecutarOperacionOculta( 
            'tienda-apps', 'rifas', 'registrarGanador', 
            'participante='+Ruleta.getIndicatedSegment().id+'&premio='+PremioEnJuego.sorteoPremioID 
        );
         
         Ruleta.stopAnimation(false);
         Ruleta.draw();
         pintarTriangulo();
        $("#nombreGanador").text(ganadorID.text);    
        $("#imagenGanador").attr('src',ganadorID.foto);                
                        
        swal({
            title: "¡FELICITACIONES " + ganadorID.text + " [" + ganadorID.cedula + "] !",
            html: " <img src='"+ ganadorID.foto + "' style='width:64px' /> ",
            icon: "success"
        });
        
        
        cargarPremios();
    }
    function elegirSiempre() {
        // This formula always makes the wheel stop somewhere inside prize 3 at least
        // 1 degree away from the start and end edges of the segment.
        var stopAt = (91 + Math.floor((Math.random() * 43)))
        alert(stopAt);
        // Important thing is to set the stopAngle of the animation before stating the spin.
        Ruleta.animation.stopAngle = 259;

        // May as well start the spin from here.
        Ruleta.startAnimation();
    }
    function girarRuleta(premioID) {
        //$("#" + panel).attr("style", "background-color: rgba(158, 158, 158, 0.3)");
        //$("#" + boton).attr("disabled", "disabled");
        //$("#imagenPremio").attr("src", premioID);
        //$("#premioEnJuego").text(nombrePremio);
        //$("#nombreGanador").text("En juego....");
        $("#btn-pararuleta").removeAttr('disabled');
        alert("Ya se preparó la ruleta. \r\n Aceptar para girar.");
        Ruleta.startAnimation();
    }
    
    function paraRuleta() {
        Ruleta.stopAnimation();
        $("#btn-pararuleta").attr('disabled','');
    }

            /*function addSegment(){
             // Use a date object to set the text of each added segment to the current minutes:seconds
             // (just to give each new segment a different label).
             var date = new Date();
             
             // The Second parameter in the call to addSegment specifies the position,
             // in this case 1 meaning the new segment goes at the start of the wheel.
             theWheel.addSegment({
             'text' : date.getMinutes() + ':' + date.getSeconds(),
             'fillStyle' : 'aqua'
             }, 1);
             
             // The draw method of the wheel object must be called in order for the changes
             // to be rendered.
             theWheel.draw();
             drawArrow();
             }
             
             function deleteSegment(){
             // Call function to remove a segment from the wheel, by default the last one will be
             // removed; you can pass in the number of the segment to delete if desired.
             theWheel.deleteSegment();
             
             // The draw method of the wheel object must be called to render the changes.
             theWheel.draw();
             drawArrow();
             }*/

</script>

