var T = 0, R = 1, B = 2, L = 3;
var X = 0, Y = 1, W = 0, H = 1;
var ie = /MSIE ((5\.5)|[6])/.test(navigator.userAgent)
      && navigator.platform == "Win32"
      && navigator.userAgent.indexOf("Opera") == -1;


function addCustomBorder(image, el, borderClass, imageSize, borderDef) {

  if(el && el.length && typeof el != "string" && !el.tagName &&
     !el.alert && typeof el[0] != "undefined") {

     for(i in el) {
         if(typeof el[i] == 'object') {
           addElementCustomBorder(image, el[i], borderClass, imageSize, borderDef);
         }
     }

  } else if(typeof el == "string") {

    addElementCustomBorder(image, document.getElementById(el), borderClass, imageSize, borderDef);
  }
}


function ce(p, tag, pos, size) {
  var e = p.appendChild(document.createElement(tag));
  var s = e.style;
  s.position = "absolute";
  s.left   = pos[X]  + "px";
  s.top    = pos[Y]  + "px";
  s.width  = size[W] + "px";
  s.height = size[H] + "px";
  return e;
}

function cs(p, image, iSize, iPos, pos, size) {

  var s = ce(p, "span", pos, size);
  s.style.overflow = "hidden";

  var img = ce(s, "img", [-iPos[X], -iPos[Y]], iSize);
  img.alt = '';
  if(ie) {
    img.src = "images/blank.gif";
    img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + image + "', sizingMethod='scale')";
  } else {
    img.src = image;
  }
}

function notEmpty(e) {
  return !(e[W] == 0 && e[H] == 0);
}
function m(x, y) {
 return Math.floor(x * y);
}

function addElementCustomBorder(img, el, borderClass, is, border, clear) {

  if(clear) {

    var be;
    for(i in el.childNodes) {
      if(el.childNodes[i].className == "borderElements") {
        be = el.childNodes[i];
      }
    }
    if(be) el.removeChild(be);

  } else {

    el.className += " " + borderClass + "Border bordered";
    el.style.position = "relative";
  }


  var d = el.appendChild(document.createElement("div"));
      d.className = "borderElements";
      d.style.display = "none";


  var c = border.content;
  var ct = c[T], cr = c[R], cb = c[B], cl = c[L];

  var o = border.offset;
  var ot = o[T], or = o[R], ob = o[B], ol = o[L];
  var otb = ot + ob, olr = ol + or;

  var w = el.offsetWidth, h = el.offsetHeight;
  var iw = is[W], ih = is[H];

  var tr = border.tr, br = border.br, bl = border.bl, tl = border.tl;
  var trw = tr[W], trh = tr[H],
      brw = br[W], brh = br[H],
      blw = bl[W], blh = bl[H],
      tlw = tl[W], tlh = tl[H];

  if(notEmpty(tr)) {
    cs(d, img, is, [iw - trw, 0], [w - trw + or, -ot], tr);
  }
  if(notEmpty(br)) {
    cs(d, img, is, [iw - brw, ih - brh], [w - brw + or, h - brh + ob], br);
  }
  if(notEmpty(bl)) {
    cs(d, img, is, [0, ih - blh], [-ol, h - blh + ob], bl)
  }
  if(notEmpty(tl)) {
    cs(d, img, is, [0, 0], [-ol, -ot], tl);
  }

  var pad, ratio;

  if(ct != 0) {

    pad = tlw + trw;
    ratio = (w - pad + olr) / (iw - pad);

    cs(d, img, [m(iw, ratio), ih], [m(tlw, ratio), 0],
      [-ol + tlw, -ot], [w - pad + olr, ct]);
  }

  if(cr != 0) {

    pad = trh + brh;
    ratio = (h - pad + otb) / (ih - pad);

    cs(d, img, [iw, m(ih, ratio)], [iw - cr, m(trh, ratio)],
      [w + or - cr, -ot + trh], [cr, h - pad + otb]);
  }
  if(cb != 0) {

    pad = blw + brw;
    ratio = (w - pad + olr) / (iw - pad);

    cs(d, img, [m(iw, ratio), ih], [m(blw, ratio), ih - cb],
      [-ol + blw, h + ob - cb], [w - pad + olr, cb]);
  }
  if(cl != 0) {

    pad = tlh + blh;
    ratio = (h - pad + otb) / (ih - pad);

    cs(d, img, [iw, m(ih, ratio)], [0, m(tlh, ratio)],
      [-ol, -ot + tlh], [cl, h - pad + otb]);
  }

  el.info = {
    width: w,
    height: h,
    image: img,
    imageSize: is,
    border: border
  };

  if(!clear) {

    window.setInterval(
      function() {
        checkSize(el);
      }, 1000);
  }

  d.style.display = "block";
}


function checkSize(e) {

  var i = e.info;
  if(e.offsetWidth != i.width || e.offsetHeight != i.height) {

    addElementCustomBorder(i.image, e, '', i.imageSize, i.border, true);
  }
}