//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 0px 2px 4px 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);}}
$(document).ready(function(){
calcW();$(window).on("resize", function(){calcW();});
$("#ButIma").click(function (){if (parseInt($("#imaBar").css("marginRight"))<0){$("#bottomBar").css("borderLeftStyle","dashed");$("#bottomBar").css("box-shadow","-2px 0px 2px 2px rgba(50, 50, 50, 0.2)");$("#imaBar").animate({ "marginRight":$("#bottomBar").css("width") });}else{$("#bottomBar").css("border-left-style",cssLineSty);$("#bottomBar").css("box-shadow",cssShadow);$("#imaBar").animate({"marginRight":"-"+$("#imaBar").css("width").replace(/[^-\d\.]/g, "")+10+"px"});}});
$("#ButTxt").click(function (){if (parseInt($("#txtBar").css("marginRight"))<0){$("#bottomBar").css("borderLeftStyle","dashed");$("#bottomBar").css("box-shadow","-2px 0px 2px 2px rgba(50, 50, 50, 0.2)");$("#txtBar").animate({ "marginRight":$("#bottomBar").css("width") });}else{$("#bottomBar").css("border-left-style",cssLineSty);$("#bottomBar").css("box-shadow",cssShadow);$("#txtBar").animate({"marginRight": "-70px"});}});
$("#ButPlu").click(function (){if (parseInt($("#pluBar").css("marginRight"))<0){$("#bottomBar").css("borderLeftStyle","dashed");$("#bottomBar").css("box-shadow","-2px 0px 2px 2px rgba(50, 50, 50, 0.2)");$("#pluBar").animate({ "marginRight":$("#bottomBar").css("width") });}else{$("#bottomBar").css("border-left-style",cssLineSty);$("#bottomBar").css("box-shadow",cssShadow);$("#pluBar").animate({"marginRight": "-370px"});}});
$("#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 x0; var y0; var x2; var y2;
$("#xira").draggable({
   start: function(e) {
      idName=$(selected).attr("id");
      idImage="IMGdrag"+idName.substring(8, idName.length);
      hideButtons();
      var cssObj = {"visibility" : "visible"};
      $("#xira").css(cssObj);
      var dW =$(selected).width();
      var dH =$(selected).height();
      x0=findPosX(selected)+dW/2;
      y0=(-1)*(findPosY(selected)+dH/2);
   },
   drag: function(e) {
      obj=document.getElementById("xira");
      x2=findPosX(obj)+10;
      y2=(-1)*(findPosY(obj)+10);
      if ((x2==x0)&&(y2>y0)){angulo=0;}
      if ((y2>y0) && (x2>x0)){
         angTan=(y2-y0)/(x2-x0);
         angulo=90-(Math.atan(angTan)*180/Math.PI);
      };
      if ((x2>x0)&&(y2==y0)){angulo=90;}
      if ((y2<y0) && (x2>x0)){
         angTan=(y0-y2)/(x2-x0);
         angulo=90+(Math.atan(angTan)*180/Math.PI);
      };
      if ((x2==x0)&&(y2<y0)){angulo=180;}
      if ((y2<y0) && (x2<x0)){
         angTan=(y0-y2)/(x0-x2);
         angulo=-180+90-(Math.atan(angTan)*180/Math.PI);
      };
      if ((x2<x0)&&(y2==y0)){angulo=-90;}
      if ((y2>y0) && (x2<x0)){
         angTan=(x0-x2)/(y2-y0);
         angulo=-(Math.atan(angTan)*180/Math.PI);
      };
      var cssObj = {
         "-webkit-transform" : "rotate("+angulo+"deg)",
         "-moz-transform" : "rotate("+angulo+"deg)",
         "-o-transform" : "rotate("+angulo+"deg)"
      };
      $(selected).css(cssObj);
   },
   stop: function() { 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/2-10+"px",
      "top" : y-42+"px",
      "visibility" : "visible"
   };
   $("#xira").css(cssObj);
    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);
$("#xira").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);
};
function calcW(){$("#imaBar").css("overflow","scroll");$("#imaBar").css("width","60px");var wP=parseInt($("#imaBar").css("width").replace(/[^-\d\.]/g, ""));
while (document.getElementById("imaBar").scrollHeight>document.getElementById("imaBar").clientHeight){var wIB=parseInt($("#imaBar").css("width").replace(/[^-\d\.]/g, ""));$("#imaBar").css("overflow","hidden");$("#imaBar").css("width",String(wIB+wP)+"px");}
$("#imaBar").css("overflow","hidden");
$("#imaBar").css("marginRight", "-"+$("#imaBar").css("width").replace(/[^-\d\.]/g, "")+10+"px");
}
