function makingCorners(cornerImage,cornerPosition,cornerID,xPos,yPos,imageSideLength){
  var corner = document.createElement('div');
  corner.id = cornerID;
  corner.style.backgroundImage = cornerImage; 
  corner.style.backgroundRepeat = 'no-repeat';
  corner.style.backgroundPosition = cornerPosition;
  //corner.style.backgroundColor = 'blue';
  corner.style.width = imageSideLength  + 'px';
  corner.style.height = imageSideLength  + 'px';
  corner.style.position = 'absolute';
  corner.style.left = (xPos) + 'px';
  corner.style.top = (yPos) + 'px';
   
  return corner;
}

function findElementInfo(targetElement){

  var Xpos = 0;
  var Ypos = 0;
  var currentParent = targetElement.offsetParent;
  
  var MarkFactor = 8; //DEFAULT MARK FACTOR FOR THE SITE
  
  if (targetElement.markFactor)
    var MarkFactor = targetElement.markFactor;
  
  var baseDivMultiplyer = Math.floor((((targetElement.offsetWidth + targetElement.offsetHeight)/2)/100)-MarkFactor) 
  if (baseDivMultiplyer < 1) baseDivMultiplyer = 1; /*HERE'S WHERE WE DON'T GO BELOW 0*/
  if (baseDivMultiplyer > 9) baseDivMultiplyer = 9; /*HERE'S WHERE WE DON'T GO ABOVE 900PX..IF WE WANT TO DO THAT WE'LL NEED MORE IMAGES*/
  if (targetElement.offsetHeight <= 100) baseDivMultiplyer = 1; /*HERE'S THE FIX FOR LONG SKINNY BOXES*/    
    
  var scalingFactor = 14;
  var baseCornerImageLength = 28;
  var cornerImageSideLength = ((baseDivMultiplyer - 1) * scalingFactor) + baseCornerImageLength;
  
  var divWidthRounded = baseDivMultiplyer * 100;
   
  while (currentParent) /*THIS LOOP IS TO GET THE TOTAL OFFSET VALUES IN THE CASE OF NESTED DIVS*/
  {
    Xpos += currentParent.offsetLeft;
    Ypos += currentParent.offsetTop 
    currentParent = currentParent.offsetParent
  }
  
  targetElement.TLXpos = targetElement.offsetLeft + Xpos;
  targetElement.TLYpos = targetElement.offsetTop + Ypos;
  targetElement.TRXpos = Xpos + targetElement.offsetLeft + targetElement.offsetWidth - cornerImageSideLength ;  /*THE 14 IS THE CORNER IMAGE PIXEL WIDTH*/
  targetElement.TRYpos = targetElement.offsetTop + Ypos;
  targetElement.BLXpos = targetElement.offsetLeft + Xpos;
  targetElement.BLYpos = Ypos + targetElement.offsetTop + targetElement.offsetHeight - cornerImageSideLength ;
  targetElement.BRXpos = Xpos + targetElement.offsetLeft + targetElement.offsetWidth - cornerImageSideLength ;
  targetElement.BRYpos = Ypos + targetElement.offsetTop + targetElement.offsetHeight - cornerImageSideLength ;
  
  targetElement.Xpos = Xpos;
  targetElement.Ypos = Ypos;
  targetElement.cornerImageSideLength = cornerImageSideLength;
  targetElement.divWidthRounded = divWidthRounded;
  targetElement.folderNumber = divWidthRounded;
  targetElement.fileNumber = divWidthRounded;

  return targetElement;
}

function rounding(elementToRound){

  var elementInfo = findElementInfo(elementToRound);
    
  var topLeftCorner = makingCorners('url("src/corner_images/box_' + elementInfo.folderNumber + '/top_left_corner_' + elementInfo.fileNumber + '.png")','top left','topLeft',elementInfo.TLXpos,elementInfo.TLYpos,elementInfo.cornerImageSideLength);
  var topRightCorner = makingCorners('url("src/corner_images/box_' + elementInfo.folderNumber + '/top_right_corner_' + elementInfo.fileNumber + '.png")','top right','topRight',elementInfo.TRXpos,elementInfo.TRYpos,elementInfo.cornerImageSideLength);
  var bottomLeftCorner = makingCorners('url("src/corner_images/box_' + elementInfo.folderNumber + '/bottom_left_corner_' + elementInfo.fileNumber + '.png")','bottom left','bottomLeft',elementInfo.BLXpos,elementInfo.BLYpos,elementInfo.cornerImageSideLength);
  var bottomRightCorner = makingCorners('url("src/corner_images/box_' + elementInfo.folderNumber + '/bottom_right_corner_' + elementInfo.fileNumber + '.png")','bottom right','bottomRight',elementInfo.BRXpos,elementInfo.BRYpos,elementInfo.cornerImageSideLength);
 
  elementToRound.appendChild(topLeftCorner);
  elementToRound.appendChild(topRightCorner);
  elementToRound.appendChild(bottomLeftCorner);
  elementToRound.appendChild(bottomRightCorner);
}

function repositionCorners(element){

  var elementInfo = findElementInfo(element);
  var children = element.childNodes;
  var x;
  
  for (x=0; x<children.length; x++)
  {
    switch (children[x].id)
    {
      case "topLeft":
        children[x].style.left = (elementInfo.TLXpos) + 'px';
        children[x].style.top = (elementInfo.TLYpos) + 'px';      
        break;
      case "topRight":
        children[x].style.left = (elementInfo.TRXpos) + 'px';
        children[x].style.top = (elementInfo.TRYpos) + 'px';      
        break;
      case "bottomLeft":
        children[x].style.left = (elementInfo.BLXpos) + 'px';
        children[x].style.top = (elementInfo.BLYpos) + 'px';      
        break;
      case "bottomRight":
        children[x].style.left = (elementInfo.BRXpos) + 'px';
        children[x].style.top = (elementInfo.BRYpos) + 'px';      
        break;
      default:
        break;
    }
    
  }
  
}

function fixCorners(element){

  var children = element.childNodes;
  var x;
  
  for ( x=0; x<children.length; x++ )
  {
    if (children[x].childNodes)
    {
      var c;
      var nextChild = children[x].childNodes
      for ( c = 0; c < nextChild.length; c++ )  /*THIS IS FOR LOOKING ONE ELEMENT DEEPER....IT'S A BIT UGLY AND I'M SORRY ABOUT THAT*/
      {
        if (nextChild[c].className == 'boxes')
        { repositionCorners(nextChild[c]); }      
      }    
    }
    
    if (children[x].className == 'boxes')
      { repositionCorners(children[x]); }
  }

}

function loadCorners(element){

  var children = element.childNodes;
  var x;
  
  for ( x=0; x<children.length; x++ )
  {
    if (children[x].childNodes)
    {
      var c;
      var nextChild = children[x].childNodes
      for ( c = 0; c < nextChild.length; c++ )  /*THIS IS FOR LOOKING ONE ELEMENT DEEPER....IT'S A BIT UGLY AND I'M SORRY ABOUT THAT*/
      {
        if (nextChild[c].className == 'boxes')
        { rounding(nextChild[c]); }      
      }    
    }
    
    if (children[x].className == 'boxes')
      { rounding(children[x]); }
  }
  
  
}
  




window.onload = function(evt) {

var this_page = document.getElementById('all')
loadCorners(this_page);
window.onresize = function(evt){ if (this_page) fixCorners(this_page); } /*THIS IS TO ALLOW THE PAGE TO BE RESZIED AND KEEP THE ROUNDED CORNERS POSITIONED*/ /* boxes.js */
//loadCorners(document.getElementById('body'));
//createFloatingDiv();

}

/*
A NOTE FROM THE AUTHOR:

Hi there, 
	Thanks for taking an intrest in my work. Feel free to use my code in your projects.
If you have any comments, questions or just want to chat e-mail me at jay@jayscorner dot com. 

Thanks,

J
*/