//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 t_color=["#000000","#000000","#000000","#000000","#000000","#000000"];
var t_borderWidth=["1","1","1","1","1","1"];
var t_fontSize=["100","100","100","100","100","100"];
var t_fontWeight=["normal","normal","normal","normal","normal","normal"];
var t_fontFamily=["Verdana, Geneva, sans-serif","Verdana, Geneva, sans-serif","Verdana, Geneva, sans-serif","Verdana, Geneva, sans-serif","Verdana, Geneva, sans-serif","Verdana, Geneva, sans-serif"];
var t_textAlign=["justify","justify","justify","justify","justify","justify"];
var t_Width=["200","200","200","200","200","200"];
var t_Height=["100","100","100","100","100","100"];
var t_BackColor=["rgba(255,255,255,0)","rgba(255,255,255,0)","rgba(255,255,255,0)","rgba(255,255,255,0)","rgba(255,255,255,0)","rgba(255,255,255,0)"];
var t_borderWidth=["0","0","0","0","0","0"];
var cssLineSty="solid";
var cssShadow="0px -4px 2px 0px rgba(50, 50, 50, 0.3)";
counter = 0;
valueZ=100;
var selected;
father= new Array();
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": "-120px"});}});
$("#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": "-120px"});}});
$("#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": "-120px"});}});
$("#ButAdd").click(function (){newText()})
   $(".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();}
         });
      }
   });

   $(".textDrag").draggable({
      helper:"clone",
      containment: "pizarra",appendTo:"body",
      stop:function(ev, ui) {
         var pos=$(ui.helper).offset();
         objName = "#cloneText"+counter
         $(objName).css({"left":pos.left,"top":pos.top});
         $(objName).removeClass("textDrag");
         $(objName).draggable({
         containment: "parent",
         stop:function(ev, ui) {
            var pos=$(ui.helper).offset();
         }
      });
     }
   });

   $(".newTextDrag").draggable({
      helper:"clone",
      containment: "pizarra",
      stop:function(ev, ui) {
         var pos=$(ui.helper).offset();
         objName = "#cloneNewText"+counter
         $(objName).css({"left":pos.left,"top":pos.top});
         $(objName).removeClass("newTextDrag");
         $(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() {}
            });
         };
         if ($(ui.draggable).attr("id").search(/textA[0-9]/) != -1){ //Texto
            counter++;numberId=$(ui.draggable).attr("id").substring(5);
            var element=$(ui.draggable).clone();
            element.addClass("tempclass");
            $(this).append(element);
            $(".tempclass").attr("id","cloneText"+counter);
            $("#cloneText"+counter).removeClass("tempclass");
            newDiv=document.getElementById("cloneText"+counter);
            var cssObj = {
               "position" : "absolute",
               "color" :t_color[parseInt(numberId)],
               "font-size" :t_fontSize[parseInt(numberId)]+"px",
               "font-weight" :t_fontWeight[parseInt(numberId)],
               "font-style" :"normal",
               "font-family" :t_fontFamily[parseInt(numberId)],
               "text-align" :t_textAlign[parseInt(numberId)],
               "border-style" : "solid",
               "border-width" :t_borderWidth[parseInt(numberId)]+"px",
               "padding":"10px",
               "width" :t_Width[parseInt(numberId)]+"px",
               "height" :t_Height[parseInt(numberId)]+"px",
               "background-color" :t_BackColor[parseInt(numberId)]
            };
            $(newDiv).css(cssObj);
            $("#cloneText"+counter).mousedown(function(e){
               hideButtons();
               showButtonsText(this);
               selected=this;
            });
            $("#cloneText"+counter).draggable({
               cursor: "move",
               start: function() {
                  valueZ++;
                  var cssObj = {"z-index" : valueZ};
                  $(this).css(cssObj);
                  hideButtons();
               },
               drag: function() {},
               stop: function() {}
            });
         }

    }
});

$("#restaura").mousedown(function(e){
   hideButtons();
   idName=$(selected).attr("id");
   if (idName.search(/clonediv[0-99]/) != -1){ //image
      idImage="IMGdrag"+idName.substring(8, idName.length);
      newImg=document.getElementById(idImage);
      newImg.setAttribute("width", $(selected).width);
      newImg.setAttribute("height", $(selected).height);
      widthDIV=$(newImg).css("width");
      heightDIV=$(newImg).css("height");
   };
   var cssObj = { "position" : "absolute", "width" : widthDIV, "height" : heightDIV };
   $(selected).css(cssObj);
   showButtons(selected);
});
$("#borrar").mousedown(function(e){
   selected.parentNode.removeChild(selected);
   hideButtons();
});
   $("#Agrande").mousedown(function(e){
      size=$(selected).css("font-size");
      size=size.replace("px","");
      size++;
      var cssObj = {"font-size" : size+"px"};
      $(selected).css(cssObj);
   });
   $("#Apeque").mousedown(function(e){
      size=$(selected).css("font-size");
      size=size.replace("px","");
      if (size>5){ size--;}
      var cssObj = {"font-size" : size+"px"};
      $(selected).css(cssObj);
   });
   $("#bold").mousedown(function(e){
      weight=$(selected).css("font-weight");
      if (weight=="bold"){ var cssObj = {"font-weight" : "normal"};}
      else{ var cssObj = {"font-weight" : "bold"};}
      $(selected).css(cssObj);
   });
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;
$("#lefttop").draggable({
   start: function(e) {
      hideButtons();
      idName=$(selected).attr("id");
      idImage="IMGdrag"+idName.substring(8, idName.length);
      var cssObj = {"visibility" : "visible"};
      $(this).css(cssObj);
   },
   drag: function(e) {
      obj=document.getElementById("rightbottom");
      xRT=findPosX(obj);
      obj=document.getElementById("leftbottom");
      yLB=findPosY(obj);
      sizeX=xRT-e.pageX+20;
      if (sizeX<0){sizeX=sizeX*(-1);}
      sizeY=yLB-e.pageY+20;
      if (sizeY<0){sizeY=sizeY*(-1);}
      var cssObj = { "left" : e.pageX+20, "top" : e.pageY+20, "width" : sizeX, "height" : sizeY }
      $(selected).css(cssObj);
      if (idName.substr(0,8)=="clonediv"){
         obj=document.getElementById(idImage);
         obj.setAttribute("width", sizeX);
         obj.setAttribute("height", sizeY);
      }
   },
   stop: function() { hideButtons();}
});
$("#righttop").draggable({
   start: function(e) {
      hideButtons();
      idName=$(selected).attr("id");
      idImage="IMGdrag"+idName.substring(8, idName.length);
      var cssObj = {"visibility" : "visible"};
      $(this).css(cssObj);
   },
   drag: function(e) {
      var dW =$(selected).width();
      obj=document.getElementById("lefttop");
      xRT=findPosX(obj);
      obj=document.getElementById("leftbottom");
      yLB=findPosY(obj);
      sizeX=e.pageX+20-xRT;
      if (sizeX<0){sizeX=sizeX*(-1);}
      sizeY=yLB-e.pageY+20;
      if (sizeY<0){sizeY=sizeY*(-1);}
      var cssObj = { "left" : e.pageX+20-dW, "top" : e.pageY+20, "width" : sizeX, "height" : sizeY }
      $(selected).css(cssObj);
      if (idName.substr(0,8)=="clonediv"){
         obj=document.getElementById(idImage);
         obj.setAttribute("width", sizeX);
         obj.setAttribute("height", sizeY);
      }
   },
stop: function() { hideButtons();}
});
$("#leftbottom").draggable({
   start: function(e) {
      hideButtons();
      idName=$(selected).attr("id");
      idImage="IMGdrag"+idName.substring(8, idName.length);
      var cssObj = {"visibility" : "visible"};
      $(this).css(cssObj);
   },
   drag: function(e) {
      var dH =$(selected).height();
      obj=document.getElementById("rightbottom");
      xRT=findPosX(obj);
      obj=document.getElementById("lefttop");
      yLB=findPosY(obj);
      sizeX=xRT-e.pageX+20;
      if (sizeX<0){sizeX=sizeX*(-1);}
      sizeY=e.pageY-20-yLB;
      if (sizeY<0){sizeY=sizeY*(-1);}
      var cssObj = { "left" : e.pageX+20, "top" : e.pageY-20-dH, "width" : sizeX, "height" : sizeY}
      $(selected).css(cssObj);
      if (idName.substr(0,8)=="clonediv"){
         obj=document.getElementById(idImage);
         obj.setAttribute("width", sizeX);
         obj.setAttribute("height", sizeY);
      }
   },
   stop: function() { hideButtons();}
});
$("#rightbottom").draggable({
   start: function(e) {
      hideButtons();
      idName=$(selected).attr("id");
      idImage="IMGdrag"+idName.substring(8, idName.length);
      var cssObj = {"visibility" : "visible"};
      $(this).css(cssObj);
   },
   drag: function(e) {
      var dW =$(selected).width();
      var dH =$(selected).height();
      obj=document.getElementById("lefttop");
      xRT=findPosX(obj);
      obj=document.getElementById("righttop");
      yLB=findPosY(obj);
      sizeX=e.pageX+20-xRT;
      if (sizeX<0){sizeX=sizeX*(-1);}
      sizeY=e.pageY-20-yLB;
      if (sizeY<0){sizeY=sizeY*(-1);}
      var cssObj = { "left" : e.pageX-dW, "top" : e.pageY-dH, "width" : sizeX, "height" : sizeY}
      $(selected).css(cssObj);
      if (idName.substr(0,8)=="clonediv"){
         obj=document.getElementById(idImage);
         obj.setAttribute("width", sizeX);
         obj.setAttribute("height", sizeY);
      }
   },
   stop: function() { hideButtons()}
   });
});

function newText() {
   textAdd=document.getElementById("textNew").value;
   counter++;
   valueZ++;
   var element=$("#addTextNew").clone();
   element.addClass("tempclass");
   $("#pizarra").append(element);
   $(".tempclass").attr("id","cloneNewText"+counter);
   $("#cloneNewText"+counter).removeClass("tempclass");
   newDiv=document.getElementById("cloneNewText"+counter);
   document.getElementById("cloneNewText"+counter).innerHTML=textAdd;
   var cssObj = {
      "position" : "absolute",
      "color" :"#000000",
      "left" : "150px",
      "top" : "150px",
      "font-size" : "100px",
      "font-weight" :"normal",
      "font-style" :"normal",
   "font-family":"Verdana, Geneva, sans-serif",
      "text-align" :"justify",
      "border-style" : "solid",
      "border-width" :"0px",
      "padding" : "10px",
      "width" :"200px",
      "height" :"100px",
      "z-index" : valueZ,
"background-color":"rgba(255,255,255,0)"
   };
   $(newDiv).css(cssObj);
   $(newDiv).mousedown(function(e){
      hideButtons();
      showButtonsText(this);
      selected=this;
   });
   $(newDiv).draggable({
      cursor: "move",
      start: function() {
         valueZ++;
         var cssObj = {"z-index" : valueZ};
         $(newDiv).css(cssObj);
      hideButtons();
      },
      drag: function() {},
      stop: function() {}
   });
};

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);
    var cssObj = {
       "z-index": valueZ,
       "left" : x+dW+22+"px",
       "top" : y+22+"px",
       "visibility" : "visible"
    };
    $("#restaura").css(cssObj);
   var cssObj = {
      "z-index": valueZ,
      "left" : x-20+"px",
      "top" : y-20+"px",
      "visibility" : "visible"
   };
   $("#lefttop").css(cssObj);
    var cssObj = {
       "z-index": valueZ,
       "left" : x-20+"px",
       "top" : y+dY+"px",
       "visibility" : "visible"
    };
    $("#leftbottom").css(cssObj);
    var cssObj = {
       "z-index": valueZ,
       "left" : x+dW+"px",
       "top" : y-20+"px",
       "visibility" : "visible"
    };
    $("#righttop").css(cssObj);
    var cssObj = {
       "z-index": valueZ,
       "left" : x+dW+"px",
       "top" : y+dY+"px",
       "visibility" : "visible"
    };
    $("#rightbottom").css(cssObj);
    };
   function showButtonsText(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-20+"px", "top" : y-20+"px","visibility" : "visible"};
      $("#lefttop").css(cssObj);
      var cssObj = {"z-index": valueZ, "left" : x-20+"px", "top" : y+dY+"px",	"visibility" : "visible"};
      $("#leftbottom").css(cssObj);
      var cssObj = {"z-index": valueZ, "left" : x+dW+"px","top" : y-20+"px", "visibility" : "visible"};
      $("#righttop").css(cssObj);
      var cssObj = {"z-index": valueZ, "left" : x+dW+"px", "top" : y+dY+"px", "visibility" : "visible"};
      $("#rightbottom").css(cssObj);

      var cssObj = {"z-index": valueZ, "left" : x-70,	"top" : y+"px",	"visibility" : "visible"};
      $("#Agrande").css(cssObj);
      var cssObj = {"z-index": valueZ,"left" : x-70, "top" : y+22+"px", "visibility" : "visible"};
      $("#Apeque").css(cssObj);

      var cssObj = {"z-index": valueZ, "left" : x-70-22, "top" : y+"px", "visibility" : "visible"};
      $("#bold").css(cssObj);
      var cssObj = {"z-index": valueZ, "left" : x+dW+22+"px", "top" : y+"px","visibility" : "visible"};
      $("#borrar").css(cssObj);
      var cssObj = {"z-index": valueZ, "left" : x+dW+22+"px", "top" : y+22+"px", "visibility" : "visible"};
      $("#restaura").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"};
   $("#lefttop").css(cssObj);
   $("#righttop").css(cssObj);
   $("#leftbottom").css(cssObj);
   $("#rightbottom").css(cssObj);
$("#borrar").css(cssObj);
$("#restaura").css(cssObj);
$("#xira").css(cssObj);
$("#Agrande").css(cssObj);
$("#Apeque").css(cssObj);
$("#bold").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 sizeText() {
   var scrollPane = $(".scroll-paneText");
   var scrollContent = $(".scroll-contentText");
   var scrollbar = $(".scroll-bar-text").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);
  };
