

<!--CROP DE IMAGENES-->
<link href="lib-crop/assets/css/main.css" rel="stylesheet">
<link href="lib-crop/assets/css/croppic.css" rel="stylesheet">
<script>
	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
		(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
		m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
		})(window,document,'script','lib/analytics.js','ga');
		ga('create', 'UA-10627690-5', 'auto');
		ga('send', 'pageview');
</script>
<!--FIN DE CROP DE IMAGENES-->      
<center>	
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td width="49%"><div id="croppic"></div></td>
      <td width="3%">&nbsp;</td>
      <td width="48%" valign="bottom">
		<span class="btn" id="cropContainerHeaderButton">Obtener imagen</span><br><br>
		<span class="agregarSlideButton" onClick="registrarSlide($('.croppedImg').attr('src'));">
		Guardar Imagen
		</span>
   	  </td>
    </tr>
  </tbody>
</table>
</center>



<script src="lib/jquery.min.js"></script>
<!--CROP DE IMAGENES-->
<script src="lib-crop/assets/js/jquery.mousewheel.min.js"></script>
<script src="lib-crop/croppic.min.js"></script>
<script src="lib-crop/assets/js/main.js"></script>
<script>
function registrarSlide(val){
	alert(val);	
}
var croppicHeaderOptions = {
	cropData:{"dummyData":1,"dummyData2":"asdas"},
	cropUrl:'img_crop_to_file.php',
	customUploadButtonId:'cropContainerHeaderButton',
	modal:false,
	processInline:true,
	loaderHtml:'<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ',
	onBeforeImgUpload: function(){ console.log('onBeforeImgUpload') },
	onAfterImgUpload: function(){ console.log('onAfterImgUpload') },
	onImgDrag: function(){ console.log('onImgDrag') },
	onImgZoom: function(){ console.log('onImgZoom') },
	onBeforeImgCrop: function(){ console.log('onBeforeImgCrop') },
	onAfterImgCrop:function(){ console.log('onAfterImgCrop') },
	onReset:function(){ console.log('onReset') },
	onError:function(errormessage){console.log('onError:'+errormessage)}
}	
var croppic = new Croppic('croppic', croppicHeaderOptions);
		
var croppicContainerModalOptions = {
	uploadUrl:'img_save_to_file.php',
	cropUrl:'img_crop_to_file.php',
	modal:true,
	imgEyecandyOpacity:0.4,
	loaderHtml:'<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ',
	onBeforeImgUpload: function(){ console.log('onBeforeImgUpload') },
	onAfterImgUpload: function(){ console.log('onAfterImgUpload') },
	onImgDrag: function(){ console.log('onImgDrag') },
	onImgZoom: function(){ console.log('onImgZoom') },
	onBeforeImgCrop: function(){ console.log('onBeforeImgCrop') },
	onAfterImgCrop:function(){ console.log('onAfterImgCrop') },
	onReset:function(){ console.log('onReset') },
	onError:function(errormessage){console.log('onError:'+errormessage)}
}
var cropContainerModal = new Croppic('cropContainerModal', croppicContainerModalOptions);
		
var croppicContaineroutputOptions = {
	uploadUrl:'img_save_to_file.php',
	cropUrl:'img_crop_to_file.php', 
	outputUrlId:'cropOutput',
	modal:false,
	loaderHtml:'<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ',
	onBeforeImgUpload: function(){ console.log('onBeforeImgUpload') },
	onAfterImgUpload: function(){ console.log('onAfterImgUpload') },
	onImgDrag: function(){ console.log('onImgDrag') },
	onImgZoom: function(){ console.log('onImgZoom') },
	onBeforeImgCrop: function(){ console.log('onBeforeImgCrop') },
	onAfterImgCrop:function(){ console.log('onAfterImgCrop') },
	onReset:function(){ console.log('onReset') },
	onError:function(errormessage){ console.log('onError:'+errormessage)}
}
var cropContaineroutput = new Croppic('cropContaineroutput', croppicContaineroutputOptions);
		
var croppicContainerEyecandyOptions = {
	uploadUrl:'img_save_to_file.php',
	cropUrl:'img_crop_to_file.php',
	imgEyecandy:false,				
	loaderHtml:'<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ',
	onBeforeImgUpload: function(){ console.log('onBeforeImgUpload') },
	onAfterImgUpload: function(){ console.log('onAfterImgUpload') },
	onImgDrag: function(){ console.log('onImgDrag') },
	onImgZoom: function(){ console.log('onImgZoom') },
	onBeforeImgCrop: function(){ console.log('onBeforeImgCrop') },
	onAfterImgCrop:function(){ console.log('onAfterImgCrop') },
	onReset:function(){ console.log('onReset') },
	onError:function(errormessage){ console.log('onError:'+errormessage)}
}
var cropContainerEyecandy = new Croppic('cropContainerEyecandy', croppicContainerEyecandyOptions);
		
var croppicContaineroutputMinimal = {
	uploadUrl:'img_save_to_file.php',
	cropUrl:'img_crop_to_file.php', 
	modal:false,
	doubleZoomControls:false,
	rotateControls: false,
	loaderHtml:'<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ',
	onBeforeImgUpload: function(){ console.log('onBeforeImgUpload') },
	onAfterImgUpload: function(){ console.log('onAfterImgUpload') },
	onImgDrag: function(){ console.log('onImgDrag') },
	onImgZoom: function(){ console.log('onImgZoom') },
	onBeforeImgCrop: function(){ console.log('onBeforeImgCrop') },
	onAfterImgCrop:function(){ console.log('onAfterImgCrop') },
	onReset:function(){ console.log('onReset') },
	onError:function(errormessage){console.log('onError:'+errormessage)}
}
var cropContaineroutput = new Croppic('cropContainerMinimal', croppicContaineroutputMinimal);
		
var croppicContainerPreloadOptions = {
	uploadUrl:'img_save_to_file.php',
	cropUrl:'img_crop_to_file.php',
	loadPicture:'assets/img/night.jpg',
	enableMousescroll:true,
	loaderHtml:'<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ',
	onBeforeImgUpload: function(){ console.log('onBeforeImgUpload') },
	onAfterImgUpload: function(){ console.log('onAfterImgUpload') },
	onImgDrag: function(){ console.log('onImgDrag') },
	onImgZoom: function(){ console.log('onImgZoom') },
	onBeforeImgCrop: function(){ console.log('onBeforeImgCrop') },
	onAfterImgCrop:function(){ console.log('onAfterImgCrop') },
	onReset:function(){ console.log('onReset') },
	onError:function(errormessage){ console.log('onError:'+errormessage)}
}
var cropContainerPreload = new Croppic('cropContainerPreload', croppicContainerPreloadOptions);
</script>  
<!-- FIN CROP DE IMAGENES-->
