I have my function (function($) { jQuery.fn.progresbar = function(procent_val,manual) { var non_dinamic=manual; var procent=procent_val; if (non_dinamic==false) { var auto_refresh = setInterval( function() { var current = new Date(); var current_time=current.getTime(); var time_max=(end_time-start_time); var time_elapsed=(current_time-start_time);
var procent_to_calculate=(time_elapsed*100)/time_max; var procent=procent_to_calculate.toFixed(0); if (current_time>end_time) procent=100; var new_top=parseInt(((100-procent)*progresbar_height)/100); $("#progresbar-bar").css('top',new_top+'px'); $("#procent").css('top',new_top-10+'px'); var new_height=parseInt((procent*progresbar_height)/100); $("#progresbar-bar").height(new_height); $("#procent").html(procent+"<span>%</span>"); $("#progresbar-bar").show(); $("#procent").show(); } , 1000); } else { var new_top=parseInt(((100-procent)*progresbar_height)/100); $("#progresbar-bar").css('top',new_top+'px'); $("#procent").css('top',new_top-10+'px'); var new_height=parseInt((procent*progresbar_height)/100); $("#progresbar-bar").height(new_height); $("#procent").html(procent+"<span>%</span>"); $("#progresbar-bar").show(); $("#procent").show(); } }; })(jQuery); Now when i call i do it so <script type="text/javascript"> $(document).ready(function() { $("#progresbar-bar").hide(); $("#procent").hide(); $("#progresbar-bar").progresbar(procent=0,manual=false); }); </script> My question: how can i make this to be a good writed structured plugin, and to call like <script type="text/javascript"> $(document).ready(function() { $("#progresbar-bar").hide(); $("#procent").hide(); $("#progresbar-bar").progresbar({ procent:0, manual:false)}; </script>