var cbbborders = [
/* 0 */  {'bg_box': 'box2.png', 'bg_border': 'borders2.png', inner: false, border: {top: 23, left: 23, bottom:23, right: 23 }},
/* 1 */  {'bg_box': 'box4.png', 'bg_border': 'borders4.png', inner: false, border: {top: 12, left: 2, bottom:12, right: 2 }},
/* 2 */  {'bg_box': 'box5.png', 'bg_border': 'borders5.png', inner: false, border: {top: 6, left: 1, bottom:6, right: 1 }}
];

var cbb = new Class({
  options: {
    selector: '.cbb',
    border: {top: 17, left: 12, bottom:14, right: 12 },
    bg_path: '/images/moo/tccb2/',
    bg_box: 'box.png',
    bg_border: 'borders.png'
  },

  initialize : function(sel, options) {
    this.setOptions(options);
    this.options.selector = sel || this.options.selector;
    $$(this.options.selector).each(this.build, this);
  },

  build: function(el0){
    el0 = $(el0);
    if(!el0.innerHTML.trim()) return;
    css = [];
    if (Browser.Engine.trident) (el0.getElements('link')||[]).each(function(el, i){
      if (el && el.href) css.push(el.href);
    });
    var styles = el0.get("html").stripStyles();
    var r = []; el0.getElements('input[type=radio]').each(function(el, i){r[i] = el.checked;});
    var b = this.options.border;
    var bgx = 'url('+this.options.bg_path+this.options.bg_box+') ';
    var bgb = 'url('+this.options.bg_path+this.options.bg_border+') ';
    el0.removeClass('cbb');
    var el= new Element('div').addClass('cb').injectBefore(el0);
    if (el0.id) el.id='cbb_'+el0.id;
      else el.id = 'cbb_'+cbb_counter++;
    //inject bottom divs
    var bb= new Element('div').addClass('bb')
                    .setStyles({'height'     : b.bottom,
                                'margin-left': b.bottom,
                                'background' : bgx+' no-repeat 100% 100%'})
                    .injectTop(el);
    var bbd = new Element('div')
                    .setStyles({'left'       : -1*(b.bottom),
                                'background' : bgx+' no-repeat 0% 100%',
                                'height'     : b.bottom,
                                'width'      : b.bottom})
                    .injectInside(bb);

    //inject content divs
    var i1 = new Element ('div').addClass('i1')
                    .setStyles({'padding-left': b.left,
                                'background' : bgb+' repeat-y 0% 0%'})
                    .injectTop(el);
    var i2 = new Element ('div').addClass('i2')
                    .setStyles({'padding-right': b.right,
                                'background' : bgb+' repeat-y 100% 0%'})
                    .injectInside(i1);
    var i3 = new Element ('div').addClass('i3')
                    .injectInside(i2);

    //inject top divs
    var bt= new Element('div').addClass('bt')
                    .setStyles({'margin-left': b.top+1,
                                'height'     : b.top,
                                'background' : bgx+' no-repeat 100% 0%'})
                    .injectTop(el);
    var btd = new Element('div')
                    .setStyles({'left'       : -1*(b.top+1),
                                'background' : bgx+' no-repeat 0% 0%',
                                'height'     : b.top,
                                'width'      : b.top+1})
                    .injectInside(bt);

    el0.injectInside(i3);

    el0.getElements('input[type=radio]').each(function(el, i){
      el.checked=r[i];
    });
    css.each(function(href){new Asset.css(href)});
    if (StyleWriter) new StyleWriter().createStyle(styles);
  }
});

cbb.implement(new Events, new Options);
var cbb_counter=0;