var Wrap = Class.create();
Wrap.prototype = {
	
	initialize: function(wrap_style, borderWidth, borderHeight, tightenT,tightenR,tightenB,tightenL) {
		this.wrap_style = wrap_style;
		this.borderWidth = borderWidth;
		this.borderHeight = borderHeight;
		this.tightenT = tightenT;
		this.tightenR = tightenR;
		this.tightenB = tightenB;
		this.tightenL = tightenL;
		this.imagesAreLoaded = false;
		
		this.BorderImageTop= '/images/'+ wrap_style +'_top.png';
		this.BorderImageRight= '/images/'+ wrap_style +'_right.png';
		this.BorderImageBottom= '/images/'+ wrap_style +'_bottom.png';
		this.BorderImageLeft= '/images/'+ wrap_style +'_left.png';
		this.BorderImageTopLeft= '/images/'+ wrap_style +'_tl.png';
		this.BorderImageTopRight= '/images/'+ wrap_style +'_tr.png';
		this.BorderImageBottomLeft= '/images/'+ wrap_style +'_bl.png';
		this.BorderImageBottomRight= '/images/'+ wrap_style +'_br.png';
		
		this.preloadImages(wrap_style);
	},
	
	borderImages: function() {
		return $A([
			
		this.BorderImageTop,
		this.BorderImageRight,
		this.BorderImageBottom,
		this.BorderImageLeft,
		
		this.BorderImageTopLeft,
		this.BorderImageTopRight,
		this.BorderImageBottomLeft,
		this.BorderImageBottomRight
		]);
	},
		
	preloadImages: function() {
		if (!this.imagesAreLoaded) {
			this.borderImages().each(function(src) {
				var image = new Image();
				image.src = src;
			});
			this.imagesAreLoaded = true;
		}
	},
	
	buildWrapper: function(element){
    	el = $(element);
		
		var htmlRipper = $span();
		el.wrap(htmlRipper)
		html = htmlRipper.innerHTML;
		
		var content = $div({style: 'margin:'+ this.tightenT +'px '+ this.tightenR +'px '+ this.tightenB +'px '+ this.tightenL +'px; padding: 0px '+ this.borderWidth +'px 0px '+ this.borderWidth +'px;'});
		content.innerHTML = html;
		
		var top = $div({style: 'height:'+ this.borderHeight +'px; background-image:url('+ this.BorderImageTop +'); background-position:left; background-repeat:repeat-x; background-position: top;'});
		var tl = $div({style: 'width:'+ this.borderWidth +'px; height:'+ this.borderHeight +'px; float:left; background-image:url('+ this.BorderImageTopLeft +'); background-repeat:no-repeat; background-position: top left;'});
		var tr = $div({style: 'width:'+ this.borderWidth +'px; height:'+ this.borderHeight +'px; float:right; background-image:url('+ this.BorderImageTopRight +'); background-repeat:no-repeat; background-position: top right;'});
		top.insert(tl);
		top.insert(tr);
		
		var bottom = $div({style: 'height:'+ this.borderHeight +'px; background-image:url('+ this.BorderImageBottom +'); background-position:left; background-repeat:repeat-x; background-position: bottom;'});
		var bl = $div({style: 'width:'+ this.borderWidth +'px; height:'+ this.borderHeight +'px; float:left; background-image:url('+ this.BorderImageBottomLeft +'); background-repeat:no-repeat; background-position: bottom left;'});
		var br = $div({style: 'width:'+ this.borderWidth +'px; height:'+ this.borderHeight +'px; float:right; background-image:url('+ this.BorderImageBottomRight +'); background-repeat:no-repeat; background-position: bottom right;'});
		bottom.insert(bl);
		bottom.insert(br);
		
		var outer_r = $div({style: 'background-image:url('+ this.BorderImageRight +'); background-position:right; background-repeat:repeat-y;'});
		outer_r.insert(top);
		outer_r.insert(content);
		outer_r.insert(bottom);
		
		var outer_l = $div({style: 'background-image:url('+ this.BorderImageLeft +'); background-position:left; background-repeat:repeat-y;'});
		outer_l.insert(outer_r);
		
		el.replace(outer_l);
	}
};

function initSink(){
	var wrapper = new Wrap('sink', 20,20,-25,-10,-25,-10);
	els = getElementsByClassName(document, '*', 'sink');
	
	for(i=0; i<els.length; i++){
		wrapper.buildWrapper(els[i]);
	}
}
addLoadEvent(initSink);