$.extend functionality doesn't seem to work properly
<p>I have written a small plugin to change the text size but it doesn't seem to work properly.
$('#mypara').changeTextSize('30px'); doesn't set the size to 30px but instead sets to 10px</p>

<h2>jquery.myPlugin.js</h2>

<pre><code>jQuery.fn.changeTextSize = function(size){
alert(size);    //shows 30px        

var config = {
    'size' : '10px'
};
if(size) {
    $.extend(config,size);
}

alert(config.size); //shows 10px

return $(this).each(function() {
    $(this).css('font-size',config.size);
});

};
</code></pre>

<h2>HTML</h2>

<pre><code>&lt;script type = "text/javascript" src="jquery-1.7.1.js"&gt;&lt;/script&gt;
&lt;script type = "text/javascript" src="jquery.myPlugin.js"&gt;&lt;/script&gt;

&lt;script&gt;
$(document).ready(function() {
    $('#mypara').changeTextSize('30px');    
}); 
&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;p id="mypara"&gt;dsfdsfdsf&lt;/p&gt;

&lt;/body&gt;
</code></pre>
