$(function(){
      $(".avg").children().not(":input").hide();
      $("#rat").children().not("select, #messages").hide();
      $(".avg").stars(); // Create stars for: Average rating

      // Create stars for: Rate this
      $("#rat").stars({
         inputType: "select",
         cancelShow: false,
         captionEl: $("#caption"),
         callback: function(ui, type, value){
            ui.disable(); // Disable Stars while AJAX connection is active
            // Display message to the user at the begining of request
            $("#messages").text("...Saving...").stop().css("opacity", 1).fadeIn(30);
            // Send request to the server using POST method
            /* NOTE: The same PHP script is used for the FORM submission when Javascript
               is not available. The only difference in script execution is the returned value. 
               For AJAX call we expect an JSON object to be returned. 
               The JSON object contains additional data we can use to update other elements
               on the page. To distinguish the AJAX request in PHP script, check if the
               $_SERVER['HTTP_X_REQUESTED_WITH'] header variable is set.(see: demo5.php)*/
            $.post("ajaxRatingProcess.php", {rate:value, rType:rType, IPAddress:IPAddress,recId:recId}, function(db) {
               // Select stars from "Average rating" control to match the returned average rating value
               $(".avg").stars("select", Math.round(db.avg));
               // Update other text controls...
               $("#all_votes").text(db.votes);
               $("#all_avg").text(db.avg);
               // Display confirmation message to the user
               $("#messages").text("Rating saved (" + value + "). Thanks!").stop().css("opacity", 1).fadeIn(30);
               // Hide confirmation message and enable stars for "Rate this" control, after 2 sec...
               setTimeout(function(){
                  $("#messages").fadeOut(1000, function(){ui.enable()})
               }, 2000);
            }, "json");
         }
      });
      // Since the <option value="3"> was selected by default, we must remove selection from Stars.
      $("#rat").stars("selectID", -1);
      // Create element to use for confirmation messages
      $('<div id="messages"/>').appendTo("#rat");
   });