(function($){
$.fn.colabsBar = function(options) {

	// Default options
    var defaults = { message: "Hello Colorlabs" },
    	options = $.extend(defaults, options),
    	obj	= $(this);
    
    /* CSS Rule
	---------------*/
	var cssStyle = "\
		#colabsbar {\
		margin: 0;\
		padding: 0;\
		position: relative;\
		overflow: hidden;\
		width: 100%;\
		z-index: 10;\
		height: 30px;\
		border-bottom: 5px solid white;\
		display: block;\
		background: #C0DFE2;\
		color: #015965;\
		-webkit-box-shadow: 0 1px 5px rgba(0,0,0,.2);\
		-moz-box-shadow: 0 1px 5px rgba(0,0,0,.2);\
		box-shadow: 0 1px 5px rgba(0,0,0,.2);\
	}\
	#colabsbar-container {\
		padding: 7px;\
		position: absolute;\
		display: block;\
		text-align:center;\
		width:100%;\
		text-shadow:0 1px 0 #fff;\
		font-weight:bold;\
		font-size:14px;\
	}\
	#bar-close {\
		position:absolute;\
		right: 48px;\
	}\
	#bar-open{\
		position: absolute;\
		right: 30px;\
		background: #C0DFE2;\
		padding: 10px;\
		font-size: 14px;\
		font-weight:bold;\
		text-shadow:0 1px 0 #fff;\
		border: 5px solid white;\
		border-width: 0 5px 5px;\
		border-radius: 0 0 10px 10px;\
		display:none;\
	}";
	$('<style>' + cssStyle + '</style>').prependTo(obj);

	/* Create bar at top of element
	--------------------------------------*/
	var barSkeleton = [
        "<div id='colabsbar-container'>",
        "	<span class='bar-content'>",
        		$.trim( options.message ),
        "	</span>",
        "	<a href='#close' id='bar-close'>Close</a>",
        "</div>"
    ].join("");
    $('<div>',{ 
	    'id': 'colabsbar', 
	    'html': barSkeleton
	}).prependTo(obj);
	$('<a href="#open" id="bar-open">Open</a>').insertAfter('#colabsbar');

	$('#bar-close').click(function(e){
		e.preventDefault();
		$('#colabsbar').slideUp('fast', function(){
			$('#bar-open').slideDown('fast');
		});
	});
	$('#bar-open').click(function(e){
		e.preventDefault();
		$('#bar-open').slideUp('fast', function(){
			$('#colabsbar').slideDown('fast');
		});
	});
}
})(jQuery);