//Creado con Ardora - www.webardora.net
//bajo licencia Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)
//para otros usos contacte con el autor
var cssLineSty="solid";
var cssShadow="0px -4px 2px 0px rgba(50, 50, 50, 0.3)";
counter = 0;
valueZ=100;
var selected;
father= new Array();
var isFull=false;
function fullScreen() {var docElement,request;docElement = document.documentElement;request = docElement.requestFullScreen || docElement.webkitRequestFullScreen || docElement.mozRequestFullScreen || docElement.msRequestFullScreen;if(typeof request!="undefined" && request){request.call(docElement);}}
function fullScreenCancel() {var docElement, request;docElement=document;request = docElement.cancelFullScreen|| docElement.webkitCancelFullScreen || docElement.mozCancelFullScreen || docElement.msCancelFullScreen || docElement.exitFullscreen;if(typeof request!="undefined" && request){request.call(docElement);}}
function closeAll(imaDiv){if (imaDiv.localeCompare("imaBar")!=0) {$("#imaBar").animate({ "marginBottom": "-70px"})}if (imaDiv.localeCompare("txtBar")!=0) {$("#txtBar").animate({ "marginBottom": "-70px"})}if (imaDiv.localeCompare("pluBar")!=0) {$("#pluBar").animate({ "marginBottom": "-70px"})}}
$(document).ready(function(){
$("#ButIma").click(function (){closeAll("imaBar"); if (parseInt($("#imaBar").css("marginBottom"))<0){$("#bottomBar").css("borderTopStyle","dashed");$("#bottomBar").css("box-shadow","2px -1px 2px 0px rgba(50, 50, 50, 0.3)");$("#imaBar").animate({ "marginBottom":$("#bottomBar").css("height") });}else{$("#bottomBar").css("borderTopStyle",cssLineSty);$("#bottomBar").css("box-shadow",cssShadow);$("#imaBar").animate({ "marginBottom": "-70px"});}});
$("#ButTxt").click(function (){closeAll("txtBar"); if (parseInt($("#txtBar").css("marginBottom"))<0){$("#bottomBar").css("borderTopStyle","dashed");$("#bottomBar").css("box-shadow","2px -1px 2px 0px rgba(50, 50, 50, 0.3)");$("#txtBar").animate({ "marginBottom":$("#bottomBar").css("height") });}else{$("#bottomBar").css("borderTopStyle",cssLineSty);$("#bottomBar").css("box-shadow",cssShadow);$("#txtBar").animate({ "marginBottom": "-70px"});}});
$("#ButPlu").click(function (){closeAll("pluBar"); if (parseInt($("#pluBar").css("marginBottom"))<0){$("#bottomBar").css("borderTopStyle","dashed");$("#bottomBar").css("box-shadow","2px -1px 2px 0px rgba(50, 50, 50, 0.3)");$("#pluBar").animate({ "marginBottom":$("#bottomBar").css("height") });}else{$("#bottomBar").css("borderTopStyle",cssLineSty);$("#bottomBar").css("box-shadow",cssShadow);$("#pluBar").animate({ "marginBottom": "-70px"});}});
$("#ButFul").click(function (){if (isFull) {isFull=false;fullScreenCancel();}else{isFull=true;fullScreen()}})
   $(".drag").draggable({
      helper:"clone",
      containment: "pizarra",appendTo:"body",
      stop:function(ev, ui) {
         var pos=$(ui.helper).offset();
         objName = "#clonediv"+counter;
         $(objName).css({"left":pos.left,"top":pos.top});
         $(objName).removeClass("drag");
         $(objName).draggable({
            containment: "parent",
            stop:function(ev, ui) { var pos=$(ui.helper).offset();}
         });
      }
   });

   $("#pizarra").droppable({
      drop: function(ev, ui) {
         if ($(ui.draggable).attr("id").search(/drag[0-99]/) != -1){ //image
            counter++;
            //father[counter]=ui.helper.attr("id");
            var element=$(ui.draggable).clone();
            element.addClass("tempclass");
            $(this).append(element);
            $(".tempclass").attr("id","clonediv"+counter);
            $("#clonediv"+counter).removeClass("tempclass");
            numberId=$(ui.draggable).attr("id").substring(4);
            imgId = "drag" + counter;
            itemLayer = "ima" + numberId;
            layerClass=document.getElementById(itemLayer);
            valueZ++;
            newDiv=document.getElementById("clonediv"+counter);
            var cssObj = {
               "position" : "absolute",
               "z-index" : valueZ,
               "width" : layerClass.width,
               "height" : layerClass.height
            };
            $(newDiv).html("");$(newDiv).css(cssObj);
            newImg=document.createElement("img");
            newImg.setAttribute("id", "IMG"+imgId);
            newImg.setAttribute("width", layerClass.width);
            newImg.setAttribute("height", layerClass.height);
            newImg.src=layerClass.src;
            newDiv.appendChild(newImg);
            $("#clonediv"+counter).mousedown(function(e){
               showButtons(this);
               selected=this;
            });
            $("#clonediv"+counter).draggable({
               cursor: "move",
               start: function() {
                  valueZ++;
                  var cssObj = {"z-index" : valueZ};
                  $(this).css(cssObj);
                  hideButtons();
               },
               drag: function() {},
               stop: function() {}
            });
         };
    }
});

$("#borrar").mousedown(function(e){
   selected.parentNode.removeChild(selected);
   hideButtons();
});
var idName; var idImage; var xRT; var yLB;
});

function showButtons(obj){
   var x = findPosX(obj);
   var y = findPosY(obj);
   var dW =$(obj).width();
   var dY =$(obj).height();
   valueZ++;
    var cssObj = {
       "z-index": valueZ,
       "left" : x+dW+22+"px",
       "top" : y+"px",
       "visibility" : "visible"
    };
    $("#borrar").css(cssObj);
    };
function findPosX(obj){
   var curleft = 0;
   if(obj.offsetParent)
      while(1){
         curleft += obj.offsetLeft;
         if(!obj.offsetParent)
            break;
         obj = obj.offsetParent;
      }
   else if(obj.x)
      curleft += obj.x;
   return curleft;
};
function findPosY(obj){
   var curtop = 0;
   if(obj.offsetParent)
      while(1){
         curtop += obj.offsetTop;
         if(!obj.offsetParent)
            break;
         obj = obj.offsetParent;
      }
   else if(obj.y)
      curtop += obj.y;
   return curtop;
};

function hideButtons(){
   var cssObj = {"visibility" : "hidden"};
$("#borrar").css(cssObj);
$("#Agrande").css(cssObj);
$("#Apeque").css(cssObj);
$("#bold").css(cssObj);
$("#italic").css(cssObj);
$("#fontColor").css(cssObj);
$("#border0").css(cssObj);
$("#border1").css(cssObj);
$("#backColor").css(cssObj);
$("#backTrans").css(cssObj);
};

function sizeImages() {
   var scrollPane = $(".scroll-pane");
   var scrollContent = $(".scroll-content");
   var scrollbar = $(".scroll-bar").slider({
      slide:function(e, ui){
         if( scrollContent.width() > scrollPane.width() ){ scrollContent.css("margin-left", Math.round( ui.value / 100 * ( scrollPane.width() - scrollContent.width() )) + "px"); }
         else { scrollContent.css("margin-left", 0); }
      }
   });
   var handleHelper = scrollbar.find(".ui-slider-handle")
   .mousedown(function(){
      scrollbar.width( handleHelper.width() );
   })
   .mouseup(function(){
      scrollbar.width( "100%" );
   })
   .append('<span class="ui-icon ui-icon-grip-dotted-vertical"></span>')
   .wrap('<div class="ui-handle-helper-parent"></div>').parent();
   scrollPane.css("overflow","hidden");
   function sizeScrollbar(){
      var remainder = scrollContent.width() - scrollPane.width();
      var proportion = remainder / scrollContent.width();
      var handleSize = scrollPane.width() - (proportion * scrollPane.width());
      scrollbar.find(".ui-slider-handle").css({
         width: handleSize,
         "margin-left": -handleSize/2
      });
      handleHelper.width("").width( scrollbar.width() - handleSize);
   }

function resetValue(){
   var remainder = scrollPane.width() - scrollContent.width();
   var leftVal = scrollContent.css("margin-left") == "auto" ? 0 : parseInt(scrollContent.css("margin-left"));
   var percentage = Math.round(leftVal / remainder * 100);
   scrollbar.slider("value", percentage);
}
function reflowContent(){
   var showing = scrollContent.width() + parseInt( scrollContent.css("margin-left") );
   var gap = scrollPane.width() - showing;
   if(gap > 0){ scrollContent.css("margin-left", parseInt( scrollContent.css("margin-left") ) + gap);}
}
$(window)
.resize(function(){
   resetValue();
   sizeScrollbar();
   reflowContent();
});
setTimeout(sizeScrollbar,10);
};
