function addArrow(el, opts){
	// options
	var options = {
		height: 6,
		styles:{}
	};
	if(opts) $extend(options, opts);
	
	// arrow
	var width = (options.height*2)+2;
	
	var currBar = new Element('div', {
		'id':el.get('id')+"_bars", 
		'styles': {
			'height': options.height,
			'width': '100%',
			'position': 'absolute',
			'left': '0px',
			'right': '0px',
			'bottom': -options.height,
			'overflow': 'hidden'
		},
		'class': 'arrow arrow_'+options.height
	}).set('styles', options.styles);
	
	var currBarWrapper = new Element('div', {
		'id':el.getProperty('id')+"_bars", 
		'styles': {
			'height': options.height,
			'width': width,
			'position': 'relative',
			'margin-left': 'auto',
			'margin-right': 'auto'
		},
		'class': 'arrow_wrapper'
	}).inject(currBar, 'bottom').set('styles', options.styles);
	
	
	
	for(var i=1; i<=options.height; i++){
		var bar = new Element('div', {
			'styles': {
				'display': 'block',
				'width': 2*i,
				'height': '1px',
				'position': 'absolute',
				'left': width/2-i,
				'bottom': i-1,
				'border-left': el.getStyle('border-left'),
				'border-right': el.getStyle('border-right')
			},
			'class': 'bar'
		}).inject(currBarWrapper, 'bottom');
	}
	
	currBar.inject(el, 'top');
	var barHolder = currBar;
	
	barHolder.getElement('.arrow_wrapper').getElements('div').each(function(bar){
		copyBackground(el, bar);
	});
	
	// check to see if it's an anchor and add hover events
	if(el.get('tag') == 'a'){
		el.addEvents({
			'mouseenter': function(){
				var el = this;
				var copybg = function(){
					el.getElements('.arrow .arrow_wrapper div').each(function(bar){
						copyBackground(el, bar);
					});
				};
				copybg();
			},
			'mouseleave': function(){
				var el = this;
				var copybg = function(){
					el.getElements('.arrow .arrow_wrapper div').each(function(bar){
						copyBackground(el, bar);
					});
				};
				setTimeout(copybg,1);
			}
		});
	}
}
/* copy the background styles from one element to another */
function copyBackground(fromEl, toEl){
	fromEl = $(fromEl);
	toEl = $(toEl);
	var newStyles = new Object();
		
	// save background
	newStyles['background-color'] = fromEl.getStyle('background-color');

	var bgi = fromEl.getStyle('background-image');
	var bgy = fromEl.getStyle('background-position');
	if(bgi && bgi != "none" && bgy != "50%" && bgy != "50% 50%"){
		// save the backgroud image & repeat
		newStyles['background-image'] = bgi;
		newStyles['background-repeat'] = fromEl.getStyle('background-repeat');
		
		// save the background position
		//var bgy = bgy;
		if(!bgy){
			bgy = "0";
		}
		if(bgy.indexOf(" ") != -1) bgy = bgy.substring(bgy.indexOf(" ")+1);
		if(!bgy || bgy == ""){
			bgy = "0";
		}
		if(bgy.indexOf("%") == -1 || bgy == "0%"){
			var fromCords = fromEl.getPosition();
			var fromTop = fromCords.y;
			var fromLeft = fromCords.x;
			
			var toCords = toEl.getPosition();
			var toTop = toCords.y;
			var toLeft = toCords.x;
			
			newStyles['background-position'] = (fromLeft-toLeft)+"px "+(fromTop+bgy.toInt()-toTop)+"px";
		}
		
	}else{
		newStyles['background-image'] = 'none';
	}
	// set the styles
	toEl.setStyles(newStyles);
}

function updateRoundBackground(el){
	el.getElement('.rbtop').getElements('b').each(function(e){
		copyBackground(el, e);
	});
	el.getElement('.rbbottom').getElements('b').each(function(e){
		copyBackground(el, e);
	});
	//copyBackground(el, $E('b', $E('.rbbottom', el)));
}