<?

include("../Librerias/ConfNivel2.inc");

$Nivel=$_Nivel2;

$ObjSesion=new Sesiones();   //Clase Sesin

$ObjSesion->MVerifica($Nivel);

$Conexion=new DBAccess();

$Conexion->Acceso($Servidor,$UsuarioBD,$ClaveBD,$BaseDatos);

$Formulario=new Formulario();

$FechaActual = date("Y-m-d");

//FEncabezado($Nivel);

/*Obtenemos los valores por get*/ 

	   $tags2 = array_keys($_GET); // obtiene los nombres de las variables

$valores2 = array_values($_GET);// obtiene los valores de las variables

$i=0;

foreach ($_GET as $valores){

 ${$tags2[$i]}=$valores;

 $i++;	

}

//valores del post	  

if ($_POST){ 

$tags2 = array_keys($_POST); // obtiene los nombres de las variables

$valores2 = array_values($_POST);// obtiene los valores de las variables

$i=0;

foreach ($_POST as $valores){

 ${$tags2[$i]}=$valores;

 $i++;	

}

}

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

    <head> 

		<meta name="viewport" content="width=device-width, initial-scale=1, charset=utf-8">

		<link rel="stylesheet" type="text/css" href="<? echo $Nivel ?>bootstrap/css/bootstrap.css">      

         <?

	   if ($_JQuery == 1)

echo '<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>';

else

echo '<script src="'.$Nivel.'bootstrap/js/jquery.min.js"></script>';

	   ?>

        <script src="<? echo $Nivel ?>bootstrap/js/bootstrap.min.js"></script>

        <link rel="stylesheet" type="text/css" href="<? echo $Nivel ?>Librerias/DataTables-1.10.13/media/css/jquery.dataTables.css">

        <script type="text/javascript" language="javascript" src="<? echo $Nivel ?>Librerias/DataTables-1.10.4/media/js/jquery.dataTables.js"></script>

        <link rel="stylesheet" type="text/css" href="<? echo $Nivel ?>Librerias/DataTables-1.10.13/media/css/jquery.dataTables.css">

         <link rel="stylesheet" href="<? echo $Nivel ?>Librerias/multicombos/docsupport/prism.css">

	            <link rel="stylesheet" href="<? echo $Nivel ?>Librerias/multicombos/chosen.css">

				 <style type="text/css" media="all">

				     .chosen-rtl .chosen-drop { left: -9000px; }

					 .btn-file {

        position: relative;

        overflow: hidden;

    }

    .btn-file input[type=file] {

        position: absolute;

        top: 0;

        right: 0;

        min-width: 100%;

        min-height: 100%;

        font-size: 100px;

        text-align: right;

        filter: alpha(opacity=0);

        opacity: 0;

        outline: none;

        background: white;

        cursor: inherit;

        display: block;

    }

	#lightbox .modal-content {

    display: inline-block;

    text-align: center;   

}



#lightbox .close {

    opacity: 1;

    color: rgb(255, 255, 255);

    background-color: rgb(25, 25, 25);

    padding: 5px 8px;

    border-radius: 30px;

    border: 2px solid rgb(255, 255, 255);

    position: absolute;

    top: -15px;

    right: -55px;

    

    z-index:1032;

}

                  </style>

<SCRIPT language="JavaScript" type="text/JavaScript">

///////////////////////////////////////////////////funcion de insercion

function Guarda(){

 if(Formulario.Usuario.value == '')

 alert('No hay usuario');

 else{

  Formulario.Accion.value='Guardar';

  Formulario.submit();

 }

}//Fin Guarda

/////////////////////////////////////////////////fin

</script>

		<title>Cambiar Avatar</title>

	</head>

    <body style="padding-top: 60px;">

<?

include $Nivel."menu1.php";

echo '<br>';

if ($_SESSION["IdUsuario"])

   $RowUsuarios=$Conexion->MSelectRegistro("Select * from usuarios where IdUsuario=".$_SESSION["IdUsuario"]);

?>

<div class="container">

  <div class="panel panel-primary"> 

     <div class="panel-heading"><strong><i class="fa fa-user-plus" aria-hidden="true"></i>  Cambiar Avatar</strong></div>

      <form class="form-horizontal" role="form" name="Formulario" method="Post" action="AccionCambiarAv.php" enctype="multipart/form-data">

      <input name="Accion" id="Accion" type="hidden" value="">

      <input type="hidden" name="Usuario" id="Usuario" value="<?php echo $RowUsuarios["Usuario"] ?>" />

        <div class="row" style="margin-left: 10px; margin-right: 10px;">

            <div class="form-group" >

 <div class="col-md-8"> 

  <label class="btn btn-default btn-file">

 Elija la Foto <input type="file" id="Imagen" name="Imagen"> 

 </label>

  </div> 

  </div>

 <div class="form-group" align="center">

 <div class="col-md-8"><output id="list"> 

 <?php

 if (!empty($RowUsuarios["foto"]))

    $ruta = $Nivel.'img/fotos/'.$RowUsuarios["foto"];

	else

	 $ruta = $Nivel.'img/fotos/sin_nombre.jpg';?>

	<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox"> 

            <img src="<?php echo $ruta ?>" width="100" height="100">

        </a> 

		</output></div></div>

 

        </div>

      </form>

 </div>

</div>

 <div class="form-group" align="center">

  <fieldset><i> tama&ntilde;o m&aacute;ximo: 2 mb.</i></fieldset>

 </div>

 <div class="form-group" align="center">

   <?php

    $EventoG='Guarda()';

	 $Formulario->MBotonScript("Guardar",'Guardar',$EventoG,"btn btn-success","fa fa-floppy-o");

    echo '&nbsp;&nbsp;';

   ?>

 </div>

<div class="spacer"></div>

<div id="lightbox" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">

    <div class="modal-dialog">

        <button type="button" class="close hidden" data-dismiss="modal" aria-hidden="true">X</button>

        <div class="modal-content">

            <div class="modal-body">

                <img src="" alt="" />

            </div>

        </div>

    </div>

</div>

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

function archivo(evt) {

      var files = evt.target.files; // FileList object

       

        //Obtenemos la imagen del campo "file". 

      for (var i = 0, f; f = files[i]; i++) {         

           //Solo admitimos imágenes.

           if (!f.type.match('image.*')) {

                continue;

           }

       

           var reader = new FileReader();

           

           reader.onload = (function(theFile) {

               return function(e) {

               // Creamos la imagen.

                      document.getElementById("list").innerHTML = ['<img class="thumb" src="', e.target.result,'" title="', escape(theFile.name), '"/>'].join('');

               };

           })(f);

 

           reader.readAsDataURL(f);

       }

}

             

      document.getElementById('Imagen').addEventListener('change', archivo, false);



</script>

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

$(document).ready(function() {

    var $lightbox = $('#lightbox');

    

    $('[data-target="#lightbox"]').on('click', function(event) {

        var $img = $(this).find('img'), 

            src = $img.attr('src'),

            alt = $img.attr('alt'),

            css = {

                'maxWidth': $(window).width() - 100,

                'maxHeight': $(window).height() - 100

            };

    

        $lightbox.find('.close').addClass('hidden');

        $lightbox.find('img').attr('src', src);

        $lightbox.find('img').attr('alt', alt);

        $lightbox.find('img').css(css);

    });

    

    $lightbox.on('shown.bs.modal', function (e) {

        var $img = $lightbox.find('img');

            

        $lightbox.find('.modal-dialog').css({'width': $img.width()});

        $lightbox.find('.close').removeClass('hidden');

    });

});

</script>