/* accompanied by /css/ui.css */


/* braces / brackets */
$.fn.extend({
	brace: function(labelImagePath){
		var wrap = $('<div class="braced"></div>');
		$(this).wrap(wrap);
		$(this).parent().append('<div class="brace"><div class="brace-top"></div><div class="brace-bottom"></div></div>');
		
		var label = new Image();
		$(label).load(function(){
			$(this).data('wrap').append('<div class="brace-label" style="background-image:url('+this.src+');"></div>');
		});
		$(label).data('wrap', $(this).parent());
		label.src = labelImagePath;
	}
});


/* showcase */
$.fn.extend({
	showcase: function(width){
		var elem = $(this);
		//var isHovered = false;
		var itemWidth = elem.find('li:eq(0)').outerWidth();
		
		elem.wrap('<div style="overflow:hidden; width:'+width+'px; height:90px; position:relative;"></div>');
		elem.width((itemWidth * elem.find('li').length)+10);
		elem.css({
			position:'absolute',
			left:'0px',
			top:'0px'
		});
		
		if(elem.width() <= width){
			return;
		}
		
		//elem.mouseover(function(){ isHovered = true; });
		//elem.mouseout(function(){ isHovered = false; });
		
		var elemOperator = '-';
		setInterval(function(){
			//if(isHovered){ return; }
			var left = elem.css('left').replace('px', '');
			if(left >= 0){ elemOperator = '-'; }
			if(((left * -1) + width) >= elem.width()-10){ elemOperator = '+'; }
			elem.animate({left: elemOperator+'='+itemWidth+'px'}, 500);
		}, 3000);
	}
});