/*
 * Cloudlet - jQuery plugin for adding cloud to link
 *  
 *
 */

(function($) {
    
    $.fn.cloudlet = function(options) {
			
			return this.each(function() {
				
				var self = this;
				
				var offset = $(self).offset();			
                
        /* TODO: This should not override CSS. */
        var settings = {
            width: 250,
						padding: 10,
						content: $(this).attr('rel') || 'No content',
						cloud: ''
        };
				
        if(options) {
					$.extend(settings, options || {});
        };				
				
				 var cloud = $("<div class=\"cloudlet\">")
													.css({
															"position": "absolute",
															"display": "none",
															"color": "#ffffff",
															"border": "1px solid #cccccc",
															"padding": settings.padding + 'px',
															"left":	offset.left + 'px'
													});

					
				cloud.html(settings.content);
												
				$(self).before(cloud);
				
				cloud.css("top", (offset.top - cloud.height() - 2*settings.padding) + 'px');
				
				$(self).bind("mouseover", function(){
					cloud.show();
				});
				
				$(self).bind("mouseout", function(){
					cloud.hide();
				});

    });
		
	}
    
})(jQuery);


$(document).ready(function(){
	
	$("a.cloud").cloudlet();
	
});