Javascript - append div in a container with random classes and positions

RandomClassesDivs.js

(function RandomClassesDivs(){
  
    // declare classes we want to apply
    var bubbleColors = ['bubble_color_1', 'bubble_color_2', 'bubble_color_3', 'bubble_color_4', 'bubble_color_5', 'bubble_color_6'];
    var bubbleSizes = ['bubble_1', 'bubble_2', 'bubble_3', 'bubble_4', 'bubble_5'];
	
	//find the highest key of the classes arrays
	var nbrSizes = (bubbleSizes.length) - 1,
		nbrColors = (bubbleColors.length) - 1;

	// define a random Size/Color	
	randomSize = Math.round(Math.random() * nbrSizes);
	whichSize = bubbleSizes[randomSize];
	randomColor = Math.round(Math.random() * nbrColors);
	whichColor = bubbleColors[randomColor];

	//create div
    $newdiv = $('<i/>');
	
	//combine base class and random Classes
	bubbleClasses = 'bubble '+ whichColor + " " + whichSize;
	//apply classes
 	$newdiv.addClass(bubbleClasses);

	// defines a random ratio to be applied to the container dimension
    var divsize = ((Math.random()*100) + 50).toFixed();

    // random position considering container height and width
    var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
    var posy = (Math.random() * ($(document).height() - divsize)).toFixed();
 	
   	//define position
    $newdiv.css({
        'position':'absolute',
        'left':posx+'px',
        'top':posy+'px',
        'display':'none'
    }).appendTo( 'body' ).fadeIn(100, function(){     
      makeDiv(); 
    }); 
    // .appendTo( 'body' ).fadeIn(100).delay(1000).fadeOut(500, function(){
    //   $(this).remove();
    //   makeDiv(); 
    // }); 
})();