function createCustomRect(e,o,s) {

/*
//USAGE:
	<script type="text/javascript" src="/JavaScript/prototype.js" ></script>
	<script type="text/javascript" src="/JavaScript/domready.js" ></script>
	<script type="text/javascript" src="/JavaScript/customRect/customRect.js" ></script>
<script type="text/javascript" >
<!-- // --><![CDATA[
Event.domReady.add(function(){
 createCustomRect(
  'element_id',
  {},
  {
   box_full            :'/images/cs/box/bg_cs_full.gif',
   box_middle          :'/images/cs/box/bg_cs_middle.gif',
   corner_width        :10,
   corner_height       :10,
   top_corner_width    :30,
   top_corner_height   :22,
   middle_right_width  :10,
   bottom_corner_height:10,
   bottom_corner_width :10
  }
 )
})
// ]]>
</script>

//WHILE:
e = element or id
o = {
 container_id       :[id],   // or defaults to e.id + '__container'
 container_className:[className],
 top_className      :[className],
 middle_className   :[className],
 bottom_className   :[className]
}
s = {
 box_full            :[uri],  // box full image
 box_middle          :[uri],  // box middle image
 corner_width        :[Num],  // box default widths and heights; these effect below
 corner_height       :[Num],  // below are optional
 top_corner_width    :[Num],
 top_corner_height   :[Num],
 middle_right_width  :[Num],
 middle_left_width   :[Num],
 bottom_corner_height:[Num],
 bottom_corner_width :[Num]
}

generates:
+------------------------------------------------------------------------------------------+
| container                                                                                |
| +--------------------------------------------------------------------------------------+ |
| | div (top) height = top_corner_height                                                 | |
| |                         +----------------------------------------------------------+ | |
| | <- top_corner_width ->  | empty div                                                | | |
| |                         +----------------------------------------------------------+ | |
| +--------------------------------------------------------------------------------------+ |
|                                                                                          |
| +--------------------------------------------------------------------------------------+ |
| | div (middle)                                                                         | |
| |                        +----------------------------------+                          | |
| |                        |  e_container                     |                          | |
| |                        | +------------------------------+ |                          | |
| | <- middle_left_width-> | | original element passed as e | | <- middle_right_width->  | |
| |                        | +------------------------------+ |                          | |
| |                        +----------------------------------+                          | |
| +--------------------------------------------------------------------------------------+ |
|                                                                                          |
| +--------------------------------------------------------------------------------------+ |
| | div (bottom) height = bottom_corner_width                                            | |
| |                           +--------------------------------------------------------+ | |
| | <- bottom_corner_width -> | empty div                                              | | |
| |                           +--------------------------------------------------------+ | |
| +--------------------------------------------------------------------------------------+ |
+------------------------------------------------------------------------------------------+

*/

 e = $(e)? $(e) : null; if (!e) { return e };
 
 o = o? o : {};
 s = s? s : {};
 
 var insert = createElementWithAttrs('span', { id:'_costomRectInsert' });
 e.parentNode.insertBefore(insert,e);
 
 var container_className   = isTrue(o.container_className)? o.container_className : 'customRect_container';
 var top_className         = isTrue(o.top_className)? o.top_className : 'customRect_top';
 var middle_className      = isTrue(o.middle_className)? o.middle_className : 'customRect_middle';
 var e_container_className = isTrue(o.e_container_className)? o.e_container_className : 'e_container';
 var bottom_className      = isTrue(o.bottom_className)? o.bottom_className : 'customRect_bottom';
 var container_id          = isTrue(o.container_id)? o.container_id : function() {
//  return 'customRect_' + (parseInt(document.getElementsByClassName(container_className).length) + 1);
  return e.id + '__container';
  } (); 

 var default_exposure = 12;
 var unit_pixel = 'px';
 
 var corner_height        = appendStyleUnit(isTrue(s.corner_height)? s.corner_height : default_exposure, unit_pixel);
 var corner_width         = appendStyleUnit(isTrue(s.corner_width)? s.corner_width : default_exposure, unit_pixel);
 
 var top_corner_width     = appendStyleUnit(isTrue(s.top_corner_width)? s.top_corner_width : corner_width, unit_pixel);
 var middle_right_width   = appendStyleUnit(isTrue(s.middle_right_width)? s.middle_right_width : corner_width, unit_pixel);
 var middle_left_width    = appendStyleUnit(isTrue(s.middle_left_width)? s.middle_left_width : middle_right_width, unit_pixel);
 var bottom_corner_width  = appendStyleUnit(isTrue(s.bottom_corner_width)? s.bottom_corner_width : corner_width, unit_pixel);

 var top_corner_height    = appendStyleUnit(isTrue(s.top_corner_height)? s.top_corner_height : corner_height, unit_pixel);
 var bottom_corner_height = appendStyleUnit(isTrue(s.bottom_corner_height)? s.bottom_corner_height : corner_width, unit_pixel);

 var box_full_url    = isTrue(s.box_full)?   'url(' + s.box_full + ')' : '';
 var box_middle_url  = isTrue(s.box_middle)? 'url(' + s.box_middle + ')' : '';
 
 var bgstyle_top    = isTrue(box_full_url)? '; background:' + box_full_url + ' no-repeat '    : '';
 var bgstyle_middle = isTrue(box_middle_url)? '; background:' + box_middle_url + ' repeat-y ' : '';
 var bgstyle_bottom = isTrue(box_full_url)? '; background:' + box_full_url + ' no-repeat '    : '';

// e.style.border = '1px solid red';

 var container = createElementWithAttrs('div', {
   id:container_id,
   className:container_className,
   children:[
     [ 'div', {
        className:top_className,
        style:'padding-left: ' + top_corner_width + '; height: ' + top_corner_height + bgstyle_top + ' top left',
        children:[ 'div', { style:'height: ' + top_corner_height + bgstyle_top + 'top right' } ]
       }
     ],
     [ 'div', {
       className:middle_className,
       style:'margin-right:0px; padding-left:' + middle_left_width + bgstyle_middle + ' top left',
       children:[
        [ 'div', {
          className:e_container_className,
          style:(isTrue(box_middle_url)? 'background:' + box_middle_url + ' top right' : '')
                 + '; margin-right:0; padding-left:0; padding-right:' + middle_right_width,
          children:e
         }
        ]
       ]
      }
     ],
     ['div', {
       className:bottom_className,
       style:'padding-left: ' + bottom_corner_width + '; height: ' + bottom_corner_height + bgstyle_top + 'bottom left',
       children:[ 'div', { style:'height: ' + bottom_corner_height + bgstyle_top + 'bottom right' } ]
      }
     ]
   ]
  }
 );

 insert.parentNode.insertBefore(container, insert);
 insert.parentNode.removeChild(insert);
 

}


function appendStyleUnit(n,u) {
 var unit = u? u : 'px';
 var regex = new RegExp('(' + unit + ')?$', '');
 var n = new String(n)
 return n.replace(regex,u);alert (regex);
}