<?php
//include("funciones/funciones.php");
$id_formulario = "58";
$ancho = "500";

$tags = array();
$tags[] = "milfs/addon/logis/images/logos/c.png";

foreach ($tags as &$valor) {
    $imagen  .= "<td  onclick=\" document.getElementById('marca').src='$valor' ; marcar('top-left') \" ><a href='#medio'  class='' >
    					<img class='img  ' src='$valor'>
    					</a></td>";
}

$imagen = "
	<div class='table-responsive'>
		<table class='table table table-condensed text-center '>
			<tr > 
				$imagen 
			</tr>
		</table>
	</div>";

?>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<div>
<style type="text/css">
.fa{
font-size:60px important!;
}
#imagen_origina{
width: <?echo $ancho ?>px;
}
body{
background-color:white !important;

}


.pin {
 text-align: center;
 /*border: solid 1px red;*/
  opacity: 0.5;
}
.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
    width: 80%;
   
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 10;
    padding: 0;
    font-size: 50px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
    
}
.ing-touch{
border: solid 1px red;
width:20% !important;
}

</style>

<div class='container' style='backgroun-color:white;' >
		<div class='fileUpload btn btn-primary center-block'>
		<span><h1><i class="fa fa-camera"></i></h1></span>
		  <input class='upload'  type="file" id="file-input"  /></span>
		  <div id="original" ></div>
		  </div> 

<!-- <p><input type="file" id="file-input"></p>  -->
<div id="actions" style="display:none;">
<img class="center-block"  src= "<?php echo $tags[0]; ?>" style='display:none' id="marca" name="marca">
<img class="center-block"  style='' id="image_output" name="image_output">
<img class="center-block"  style='' id="otra_imagen" name="otra_imagen">


<div id="result" class="result">
    <p></p>
</div>
<a name="arriba"></a>
<div style="position:relative">
	<div style="position:absolute;  width:100%; height:100%;" >
				<table style="width:100%; height:100%;" class="">
        	<tr  >
        	<td class="pin" ><a href="#arriba" onclick=" javascript: marcar('top-left')"><img class="ing-touch img img-circle img-responsive center-block " style="width:20%;"  src="milfs/images/oscuro40.png"></a></td>
        	<td class="pin"><a href="#arriba" onclick=" javascript: marcar('top-center')"><img class="ing-touch img img-circle img-responsive center-block " style="width:20%;"  src="milfs/images/oscuro40.png"></a></td>
        	<td class="pin"><a href="#arriba" onclick=" javascript: marcar('top-rigth')"><img class="ing-touch img img-circle img-responsive center-block " style="width:50%;"  src="milfs/images/oscuro40.png"></a></td>
        	</tr>
        	<tr>
        	<td class="pin"><a name="medio"></a><a href="#arriba" onclick=" javascript: marcar('middle-left')"><img class="ing-touch img img-circle img-responsive center-block " style="width:50%;"  src="milfs/images/oscuro40.png"></a></td>
        	<td class="pin" ><a href="#medio" onclick=" javascript: marcar('middle-center')"><img class="ing-touch img img-circle img-responsive center-block " style="width:50%;"  src="milfs/images/oscuro40.png"></a></td>
        	<td class="pin"><a href="#medio" onclick=" javascript: marcar('middle-rigth')"><img class="ing-touch img img-circle img-responsive center-block " style="width:50%;"  src="milfs/images/oscuro40.png"></td>
        	</tr>
        	<tr>
        	<td class="pin"><a href="#medio" onclick=" javascript: marcar('bottom-left')"><img class="ing-touch img img-circle img-responsive center-block " style="width:50%;"  src="milfs/images/oscuro40.png"></a></td>
        	<td class="pin"><a href="#medio" onclick=" javascript: marcar('bottom-center')"><img class="ing-touch img img-circle img-responsive center-block " style="width:50%;"  src="milfs/images/oscuro40.png"></a></td>
        	<td class="pin"><a href="#medio" onclick=" javascript: marcar('bottom-rigth')"><img class="ing-touch img img-circle img-responsive center-block " style="width:50%;"  src="milfs/images/oscuro40.png"></a></td>
        	</tr>

        	</table>
	</div>
	<canvas id="micanvas"  style="position:absolute" >
	Tu navegador no soporta canvas.
	</canvas>

</div>
		<div class="row " style="position:relative">

		
		<form id='formulario_brigadistas' name='formulario_brigadistas' >
			<input class='form-control' type='' id="debugConsole" name="debugConsole" >
			<input type='' id="identificador" name="identificador" >
			<input type='hidden' id="formulario_id" name="formulario_id" value="<?php echo $id_formulario; ?>">
			<input type='hidden' id="imagen" name="imagen" value="">
			
			<?php $formulario = formulario_areas("$id_formulario",'campos','','');
			echo $formulario; ?>
		</form>
	
	</div>
	<div id='aviso'>Aviso</div>
		<div class="row">
		<div class="col-md-12">
		
	<!--  this.disabled= true;  xajax_wait('aviso','Grabando... un momento por favor...'); 	-->
	<button  class='fileUpload btn btn-success  btn-block' onclick="  xajax_brigadistas_grabar(xajax.getFormValues('formulario_brigadistas'))">
		<span><i class="fa fa-save"></i> <span class='fa'> Grabalo! </span></span>
	</button> 

		
		</div>
	</div>
</div>
</div>
<script language="javascript">
    
$(function () {
    'use strict';

    var result = $('#result'),
        exifNode = $('#exif'),
        thumbNode = $('#thumbnail'),
        actionsNode = $('#actions'),
        currentFile,
        replaceResults = function (img) {
            var content;
            if (!(img.src || img instanceof HTMLCanvasElement)) {
                content = $('<span>Loading image file failed</span>');
            } else {
                content = $('<img />').append(img)
                    //.attr('download', currentFile.name)
                    .attr('src', img.src || img.toDataURL())
                    .attr('width', '<?echo $ancho ?>px')
                    .attr('style', 'width:100%')
                    .attr('id', 'imagen_original');

            }
            //document.getElementById('image_output').src =  img.src;
            result.children().replaceWith(content);
            if (img.getContext) {
                actionsNode.show();
                window.setTimeout("marcar('middle-center');", 500); 
                
            }
        },
        displayImage = function (file, options) {
            currentFile = file;
            if (!loadImage(
                    file,
                    replaceResults,
                    options
                )) {
                result.children().replaceWith(
                    $('<span>Your browser does not support the URL or FileReader API.</span>')
                );
            }
        },
        displayExifData = function (exif) {
            var thumbnail = exif.get('Thumbnail'),
                tags = exif.getAll(),
                table = exifNode.find('table').empty(),
                row = $('<tr></tr>'),
                cell = $('<td></td>'),
                prop;
            if (thumbnail) {
                thumbNode.empty();
                loadImage(thumbnail, function (img) {
                    thumbNode.append(img).show();
                }, {orientation: exif.get('Orientation')});
            }
            for (prop in tags) {
                if (tags.hasOwnProperty(prop)) {
                    table.append(
                        row.clone()
                            .append(cell.clone().text(prop))
                            .append(cell.clone().text(tags[prop]))
                    );
                }
            }
            exifNode.show();
        },
        dropChangeHandler = function (e) {
            e.preventDefault();
            e = e.originalEvent;
            var target = e.dataTransfer || e.target,
                file = target && target.files && target.files[0],
                options = {
                    maxWidth: result.width(),
                    canvas: true
                };
            if (!file) {
                return;
            }
            exifNode.hide();
            thumbNode.hide();
            loadImage.parseMetaData(file, function (data) {
                if (data.exif) {
                    options.orientation = data.exif.get('Orientation');
                    displayExifData(data.exif);
                }
                displayImage(file, options);
            });
        },
        coordinates;
    // Hide URL/FileReader API requirement message in capable browsers:
    if (window.createObjectURL || window.URL || window.webkitURL || window.FileReader) {
        result.children().hide();
    }
    
    $(document)
        .on('dragover', function (e) {
            e.preventDefault();
            e = e.originalEvent;
            e.dataTransfer.dropEffect = 'copy';
        })
        .on('drop', dropChangeHandler);
    $('#file-input').on('change', dropChangeHandler);
    $('#edit').on('click', function (event) {
        event.preventDefault();
        var imgNode = result.find('img, canvas'),
            img = imgNode[0];
        imgNode.Jcrop({
            setSelect: [40, 40, img.width - 40, img.height - 40],
            onSelect: function (coords) {
                coordinates = coords;
            },
            onRelease: function () {
                coordinates = null;
            }
        }).parent().on('click', function (event) {
            event.preventDefault();
        });
    });
    $('#crop').on('click', function (event) {
        event.preventDefault();
        var img = result.find('img, canvas')[0];
        if (img && coordinates) {
            replaceResults(loadImage.scale(img, {
                left: coordinates.x,
                top: coordinates.y,
                sourceWidth: coordinates.w,
                sourceHeight: coordinates.h,
                minWidth: result.width()
            }));
            coordinates = null;
        }
    });

});
       


</script>
<script language="javascript">
function cargaContextoCanvas(idCanvas){
   var elemento = document.getElementById(idCanvas);
   if(elemento && elemento.getContext){
      var contexto = elemento.getContext('2d');
      if(contexto){
         return contexto;
      }
   }
   return FALSE;
}


function marcar(ubicacion){
	//if (ubicacion == 'arriba'){ var x = '0';var y = '0';}
	//if (ubicacion == 'abajo'){ var x = '10';var y = '50';}





   //Recibimos el elemento canvas
   var ctx = cargaContextoCanvas('micanvas');

   if(ctx){
      //Creo una imagen conun objeto Image de Javascript
      var img = new Image();
      var img2 = new Image();
      //img.src = document.getElementById("image_output2").src;
      //readAsDataURL(
      img.src = document.getElementById("imagen_original").src;
      document.getElementById("imagen_original").style.display="none"; 
      //img2.src = 'images/logos/a.png';
      img2.src = document.getElementById("marca").src;
      if (ubicacion =='') {
      	ubicacion ='middle-center';
      }
			x = 0,
			y = 0;
			if(ubicacion.indexOf("top")!=-1)
				y = 10;
			else if(ubicacion.indexOf("middle")!=-1)
				y = (micanvas.height - img2.height)/2;
			else
				y = micanvas.height-img2.height-10;
			
			if(ubicacion.indexOf("left")!=-1)
				x = 10;
			else if(ubicacion.indexOf("center")!=-1)
				x = (micanvas.width - img2.width) /2;
			else
				x = micanvas.width-img2.width-10;
				
				      
      
      var proporcion = ( img.height / img.width );
			var ancho  = <?echo $ancho ?>;
			micanvas.width =ancho;
			micanvas.height = (micanvas.width * proporcion);
         micanvas.setAttribute('width', ancho);
         micanvas.setAttribute('height', micanvas.height);
         micanvas.setAttribute('style',"width:100%");

      img.onload = function(){
         ctx.drawImage(img, 0, 0,micanvas.width,micanvas.height);
         ctx.drawImage(img2, x, y);
   var debugConsole= document.getElementById("debugConsole");
	var testCanvas = document.getElementById("micanvas");
	var canvasData = testCanvas.toDataURL("image/png");
	var postData = "canvasData="+canvasData;
	
	debugConsole.value=canvasData;
	var identificador = Math.random();
			document.getElementById('identificador').value= identificador;
      }
   }
}


     
$(function () {
    'use strict';

    var result = $('#result'),
        exifNode = $('#exif'),
        thumbNode = $('#thumbnail'),
        actionsNode = $('#actions'),
        currentFile,
        replaceResults = function (img) {
            var content;
            if (!(img.src || img instanceof HTMLCanvasElement)) {
                content = $('<span>Loading image file failed</span>');
            } else {
                content = $('<img />').append(img)
                    //.attr('download', currentFile.name)
                    .attr('src', img.src || img.toDataURL())
                    .attr('width', '<?echo $ancho ?>')
                    .attr('style', 'width:100%')
                    .attr('id', 'imagen_original');

            }
            //document.getElementById('image_output').src =  img.src;
            result.children().replaceWith(content);
            if (img.getContext) {
                actionsNode.show();
                window.setTimeout("marcar('middle-center');", 500); 
                
            }
        },
        displayImage = function (file, options) {
            currentFile = file;
            if (!loadImage(
                    file,
                    replaceResults,
                    options
                )) {
                result.children().replaceWith(
                    $('<span>Your browser does not support the URL or FileReader API.</span>')
                );
            }
        },
        displayExifData = function (exif) {
            var thumbnail = exif.get('Thumbnail'),
                tags = exif.getAll(),
                table = exifNode.find('table').empty(),
                row = $('<tr></tr>'),
                cell = $('<td></td>'),
                prop;
            if (thumbnail) {
                thumbNode.empty();
                loadImage(thumbnail, function (img) {
                    thumbNode.append(img).show();
                }, {orientation: exif.get('Orientation')});
            }
            for (prop in tags) {
                if (tags.hasOwnProperty(prop)) {
                    table.append(
                        row.clone()
                            .append(cell.clone().text(prop))
                            .append(cell.clone().text(tags[prop]))
                    );
                }
            }
            exifNode.show();
        },
        dropChangeHandler = function (e) {
            e.preventDefault();
            e = e.originalEvent;
            var target = e.dataTransfer || e.target,
                file = target && target.files && target.files[0],
                options = {
                    maxWidth: result.width(),
                    canvas: true
                };
            if (!file) {
                return;
            }
            exifNode.hide();
            thumbNode.hide();
            loadImage.parseMetaData(file, function (data) {
                if (data.exif) {
                    options.orientation = data.exif.get('Orientation');
                    displayExifData(data.exif);
                }
                displayImage(file, options);
            });
        },
        coordinates;
    // Hide URL/FileReader API requirement message in capable browsers:
    if (window.createObjectURL || window.URL || window.webkitURL || window.FileReader) {
        result.children().hide();
    }
    
    $(document)
        .on('dragover', function (e) {
            e.preventDefault();
            e = e.originalEvent;
            e.dataTransfer.dropEffect = 'copy';
        })
        .on('drop', dropChangeHandler);
    $('#file-input').on('change', dropChangeHandler);
    $('#edit').on('click', function (event) {
        event.preventDefault();
        var imgNode = result.find('img, canvas'),
            img = imgNode[0];
        imgNode.Jcrop({
            setSelect: [40, 40, img.width - 40, img.height - 40],
            onSelect: function (coords) {
                coordinates = coords;
            },
            onRelease: function () {
                coordinates = null;
            }
        }).parent().on('click', function (event) {
            event.preventDefault();
        });
    });
    $('#crop').on('click', function (event) {
        event.preventDefault();
        var img = result.find('img, canvas')[0];
        if (img && coordinates) {
            replaceResults(loadImage.scale(img, {
                left: coordinates.x,
                top: coordinates.y,
                sourceWidth: coordinates.w,
                sourceHeight: coordinates.h,
                minWidth: result.width()
            }));
            coordinates = null;
        }
    });

});
    
</script>

<br>
 <script src="milfs/addon/logis/js/load-image.all.min.js"></script> 
<!-- <script src="js/load-image.js"></script> -->
<!-- <script src="js/load-image-ios.js"></script> -->
<!-- <script src="js/load-image-orientation.js"></script> -->
<!-- <script src="js/load-image-meta.js"></script> -->
<!-- <script src="js/load-image-exif.js"></script> -->
<!-- <script src="js/load-image-exif-map.js"></script> -->
<!-- jQuery and Jcrop are not required by JavaScript Load Image, but included for the demo -->
<!--  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>  -->
<!-- <script src="js/vendor/jquery.Jcrop.js"></script> -->
<!-- <script src="js/demo.js"></script> -->
</div>
