Filtering the loop by category using Ajax in WordPress

Well, I have been looking everywhere for hours and hours and it seems like there’s so many ways to do this, since I have never used Ajax before and have little knowledge of havascript, its become too hard for me.

I have the loop on my front page (index) or wordpress and I want to have a filter, a dropdown menu with different categories, that when clicked, the only posts showing in that same screen are the ones from that category. I need the loop to be refreshed with ajax, so the whole page is still left intact while you use the filter.

this is what i have on my Index file:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.2.6")</script>
<script type="text/javascript">
$(function(){
     $('#main_cat').change(function(){
         var $mainCat=$('#main_cat').val();
          $("#sub_cat").empty();
              // call ajax
                  $.ajax({

              url:"<?php bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php",       
              type:'POST',
              data:'action=my_special_ajax_call&main_catid=' + $mainCat,
              success:function(results)
              {
            //  alert(results);
              $('#sub_cat *').fadeOut(500);
              $('#sub_cat + p').fadeOut(500);
              $("#sub_cat").append(results);
                  $('#sub_cat').load('http://localhost:8888/public_html/wp-content/themes/twentyten-child/templateloop.php');
              $('#sub_cat + p').fadeIn(1);
                  }
                      });

            }
    );
});

The dropdown with the categories goes like this:

<?php
wp_dropdown_categories('show_count=0&selected=-1&hierarchical=1&depth=1&hide_empty=0&exclude=1&show_option_none=Main Categories&name=main_cat');
?>

So, the dropdown works, and it’s supposed to ajax load a wp template file with a query filtering only one category (grabbed from the wp_dropdown_categories). And the loading works fine if I have a dummy text in the templateloop.php file, but when I have the wp query, nothing happens. the #sub_cat div, which is where the loop is located and was supposed to be switched by the template file just dissapears with all the post listing and im left only with the top half of the page (until where the #sub_cat div used to be).

There has been so much trial and error, ive tried with the query call in the template file, in the index file, in the functions, i never seem to get any result.

on my functions.php file ive got this:

function implement_ajax() {
if(isset($_POST['main_catid']))
            {
              echo '<?php $paged = (get_query_var("paged")) ? get_query_var("paged") : 1; query_posts("cat='.$_GET['maincatid'].'&paged=$paged"); ?>';

            die();
            } // end if
}
add_action('wp_ajax_my_special_ajax_call', 'implement_ajax');
add_action('wp_ajax_nopriv_my_special_ajax_call', 'implement_ajax');//for users that are not logged in.

and the query line i used to use before all this, in the index file is:

       <?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
 query_posts("cat=1,2,3,4,5&paged=$paged"); ?>

i’ve tried using the wp_query but it’s just going nowhere, i really need guidance. Any help is appreciated. thank you.