jQuery(document).ready(function() {
  var layer = jQuery('<div id="dl-layer"><strong>Imagen:</strong> <input type="text" id="dl-fichero" style="width: 200px;" /> <strong>Opacidad:</stron> <input type="text" id="dl-opacidad" style="width: 40px;" value="0.7" /> <strong>Top:</stron> <input type="text" id="dl-top" style="width: 40px;" value="0" /> <strong>Left:</stron> <input type="text" id="dl-left" style="width: 40px;" value="0" /></div><div id="dl-persiana"><a href="#">ocultar</a></div>');
  jQuery(document.body).prepend(layer);
  dl_layer = jQuery('#dl-layer')
    .css({
      position: 'fixed',
      height: '30px',
      background: '#CCC',
      width: '100%',
      margin: '0',
      top: '0px',
      padding: '10px',
      opacity: '0.7',
      zIndex: 1200
    })
    .hover(
      function() {
        jQuery(this).css({opacity: 1})
      }, 
      function() {jQuery(this).css({opacity: 0.7})});
  dl_layer.find('#dropbox')
    .css({border: '1px solid #AAA', background: '#FFF', display: 'block', float: 'left', width: '30px', height: '30px'})
  dl_layer.find('strong').css({color: '#333', paddingLeft: '10px'});
  dl_layer.find('input:text').css({border: '2px solid #333'});
  jQuery('#dl-fichero').keyup(function() {
    jQuery('#dl-imagen').remove();
    var img = jQuery('<img src="'+this.value+'" id="dl-imagen" />');
    jQuery(document.body).prepend(img);
    dl_layer.hide();
    persiana.css({top: '0px'}).find('a').html('MOSTRAR');
    img.css({opacity: jQuery('#dl-opacidad').val(), position: 'absolute', top: '0px', zIndex: 900});
  });
  jQuery('#dl-opacidad').keyup(function() {jQuery('#dl-imagen').css({opacity: this.value})});
  jQuery('#dl-top').keyup(function() {jQuery('#dl-imagen').css({top: this.value+'px'})});
  jQuery('#dl-left').keyup(function() {jQuery('#dl-imagen').css({left: this.value+'px'})});
  
  var persiana = jQuery('#dl-persiana')
    .css({
      position: 'fixed',
      width: '100%',
      margin: '0',
      top: '50px',
      textAlign: 'center',
      opacity: '0.7',
      zIndex: 1200
    })
    .click(function() {
      dl_layer.toggle(); 
      jQuery(this)
        .css({top: dl_layer.is(':visible')?'50px':'0px'})
        .find('a').each(function() {jQuery(this).html(dl_layer.is(':visible')?'OCULTAR':'MOSTRAR');});
    });
  persiana.find('a').css({
      color: '#333', textTransform: 'uppercase', fontFamily: 'Arial', fontWeight: 'bold', textDecoration: 'none', background: '#aaa', padding: '3px 6px'
    }).html(dl_layer.is(':visible')?'OCULTAR':'MOSTRAR');



  // Drag & Drop de Firefox
  // http://demos.hacks.mozilla.org/openweb/DnD/main.js
  var dropbox;
  window.addEventListener("dragenter", dragenter, true);
  dropbox = document.getElementById("dl-layer");
  window.addEventListener("dragleave", dragleave, true);
  dropbox.addEventListener("dragover", dragover, true);
  dropbox.addEventListener("drop", drop, true);
  
  
  function dragenter(e) {
      dropbox.setAttribute("dragenter", true);
      jQuery(dropbox).css({background:'#BBB'});
  }
  
  function dragleave(e) {
      dropbox.removeAttribute("dragenter");
      jQuery(dropbox).css({background:'#CCC'});
  }
  
  function dragover(e) {
      e.preventDefault();
  }
  
  function drop(e) {
      var dt = e.dataTransfer;
      var files = dt.files;
      e.stopPropagation()
      e.preventDefault();

      for (var i = 0; i < files.length; i++) {
          var file = files[i];
          handleFile(file);
          break; // solo permito una imagen
      }

  }
  
  function handleFile(file) {
      var imageType = /image.*/;
  
      var bag = document.getElementById("dl-fichero");

      if (!file.type.match(imageType)) {
          return false;
      }
  
      jQuery('#dl-imagen').remove();
      var img = document.createElement("img");
      img.id = "dl-imagen";
      var reader = new FileReader();
      reader.onloadend = function() {
          img.src = reader.result;
          persiana.after(img);
      }
      reader.readAsDataURL(file);
      dl_layer.hide();
      persiana.css({top: '0px'}).find('a').html('MOSTRAR');
      jQuery(img).css({opacity: jQuery('#dl-opacidad').val(), position: 'absolute', top: '0px', zIndex: 900});
      jQuery('#dl-fichero').attr('value', 'UPLOADED');

      return true;
  }
    
});