Need help for converting mootools code to jquery

Need help for converting mootools code to jquery

Hi all,
I am working on a photo gallery. I got a nice photo gallery in mootools. It works really good. I want to convert this mootools code to jquery as my full site is in Jquery. I have some issues.
This is original Mootools code
var number_of_pictures = 34;
var no_of_panels = 1;
var temp = 1;
var temp2 = 0;
function show_pictures () {
   var while_pictures = 1;
    while (no_of_panels <= 3) {
      temp = 0;
      while ( temp <=15 && temp  <= (number_of_pictures-temp) && (while_pictures + temp) <= number_of_pictures ) {
      var new_image = new Element('img', {
         'src': 'thumbs/' + (temp + while_pictures) + '.jpg',
         'id': 'image_' + (temp + while_pictures),
         'class': 'thumbs',
         'events': {
            'click': function(){
               $('display_picture_img').innerHTML = "<img src=\"" + this.src.replace('thumbs/', 'pictures/') + "\" id=\"big_picture\" class=\"" + this.id + "\" />";
               $('display_picture_container').fade(1);
               $('big_picture').fade(.999999);
               $('controls_vert').setStyle('display', 'none');
               
               if(this.id.replace('image_', '')==1) {
                  $('left').set('class', 'deactivated');   
                  $('right').erase('class');   
               } else if(this.id.replace('image_', '')==number_of_pictures) {
                  $('left').erase('class');   
                  $('right').set('class', 'deactivated');   
               } else {
                  $('left').set('class', 'activated');   
                  $('right').erase('class');
               }
               
               $('controls_horz').setStyle('display', 'block');
               
               if(Browser.Engine.trident4) { $('left').tween('margin-left', '143px'); }
               else { $('left').tween('margin-left', '230px'); }
            }
         
          }
      });

      // preload all of the images
      var preload_image = new Element('img', {
         'src': 'pictures/' + while_pictures + '.jpg',
         'class': 'hide'
         
      });
      preload_image.inject($('photo_gallery'));
      if (no_of_panels == 1) {new_image.inject($('panel_1'));}
      if (no_of_panels == 2) {new_image.inject($('panel_2'));}
      if (no_of_panels == 3) {new_image.inject($('panel_3'));}
      
      temp++;
      }
      temp2 += temp;
      while_pictures = temp2;
      no_of_panels++;
       }
      
      // NOTE: I didn't create an alt attribute because it won't be seen by anyone here anyway.
   
}
window.addEvent('domready', function() {   
                           
   show_pictures();
   
   $('display_picture_container').fade('hide');
   
   var vertical_moves = 0;
   var cols = no_of_panels;
   
   if(cols>3) {
   
      $('up').addEvent('click', function(event){
         if(!$('up').hasClass('deactivated')) {
            vertical_moves--;
            $('down').erase('class');
            $('inside').tween('margin-left', '-'+ (478 * vertical_moves) +'px');
            if (vertical_moves==0) {
               $('up').set('class', 'deactivated');   
            }
         }
      });
      
      
      $('down').addEvent('click', function(event){
         if(!$('down').hasClass('deactivated')) {
            vertical_moves++;
            $('up').erase('class');   
            $('inside').tween('margin-left', '-'+ (478 * vertical_moves) +'px');
            if(vertical_moves == (cols-2)) {
               $('down').set('class', 'deactivated');   
            }
         }
      });
   } else {
      $('up').set('class', 'deactivated');   
      $('down').set('class', 'deactivated');   
   }
   
   var current_id = 1;
   
   $('left').addEvent('click', function(){
      if(!$('left').hasClass('deactivated')) {
         current_id = $('big_picture').get('class').replace('image_', '');
         current_id--;
         $('big_picture').fade('hide');
         $('big_picture').set('src', 'pictures/' + current_id + '.jpg');
         $('big_picture').fade(1);
         $('big_picture').set('class', 'image_' + current_id);
         if(current_id==1) { $('left').set('class', 'deactivated'); }
         if(current_id==(number_of_pictures-1)) { $('right').erase('class');  }
      }
   });
   
   $('right').addEvent('click', function(){
      if(!$('right').hasClass('deactivated')) {
         current_id = $('big_picture').get('class').replace('image_', '');
         current_id++;
         $('big_picture').fade('hide');
         $('big_picture').set('src', 'pictures/' + current_id + '.jpg');
         $('big_picture').fade(1);
         $('big_picture').set('class', 'image_' + current_id);
         if(current_id==2) { $('left').erase('class'); }
         if(current_id==number_of_pictures) { $('right').set('class', 'deactivated'); }
      }
   });
   
   $('display_picture_img').addEvent('click', function(){
      $('display_picture_container').fade(0);
      $('big_picture').fade(0);
      if(Browser.Engine.trident4) { $('up').setStyle('margin-left', '143px'); } else { $('up').setStyle('margin-left', '230px'); }
      $('controls_horz').setStyle('display', 'none');
      $('controls_vert').setStyle('display', 'block');
      $('left').tween('margin-left', '7px');
      $('up').tween('margin-left', '7px');
   });

});


and this is my converted jquery code

var number_of_pictures = 34;
var no_of_panels = 1;
var temp = 1;
var temp2 = 0;
function show_pictures () {
   var while_pictures = 1;
    while (no_of_panels <= 3) {
      temp = 0;
      while ( temp <=15 && temp  <= (number_of_pictures-temp) && (while_pictures + temp) <= number_of_pictures ) {
      var new_image = document.createElement('img', {
         'src': 'thumbs/' + (temp + while_pictures) + '.jpg',
         'id': 'image_' + (temp + while_pictures),
         'class': 'thumbs',
         'events': {
            'click': function(){
               $('display_picture_img').innerHTML = "<img src=\"" + this.src.replaceWith('thumbs/', 'pictures/') + "\" id=\"big_picture\" class=\"" + this.id + "\" />";
               $('display_picture_container').fadeIn();
               $('big_picture').fadeTo(.999999);
               $('controls_vert').css('display', 'none');
               
               if(this.id.replaceWith('image_', '')==1) {
                  $('left').addClass('deactivated');   
                  $('right').removeClass();   
               } else if(this.id.replaceWith('image_', '')==number_of_pictures) {
                  $('left').removeClass();   
                  $('right').addClass('deactivated');   
               } else {
                  $('left').addClass('activated');   
                  $('right').removeClass();
               }
               
               $('controls_horz').css('display', 'block');
               
               if(Browser.Engine.trident4) { $('left').animate('margin-left', '143px'); }
               else { $('left').animate('margin-left', '230px'); }
            }
         
          }
      });

      // preload all of the images
      var preload_image = new document.createElement('img', {
         'src': 'pictures/' + while_pictures + '.jpg',
         'class': 'hide'
         
      });
      preload_image.after($('photo_gallery'));
      if (no_of_panels == 1) {new_image.after($('panel_1'));}
      if (no_of_panels == 2) {new_image.after($('panel_2'));}
      if (no_of_panels == 3) {new_image.after($('panel_3'));}
      
      temp++;
      }
      temp2 += temp;
      while_pictures = temp2;
      no_of_panels++;
       }
      
      // NOTE: I didn't create an alt ibute because it won't be seen by anyone here anyway.
   
}
$(document).ready( function() {   
                           
   show_pictures();
   
   $('display_picture_container').fadeOut();
   
   var vertical_moves = 0;
   var cols = no_of_panels;
   
   if(cols>3) {
   
      $('up').click(function(event){
         if(!$('up').hasClass('deactivated')) {
            vertical_moves--;
            $('down').removeClass();
            $('inside').animate('margin-left', '-'+ (478 * vertical_moves) +'px');
            if (vertical_moves==0) {
               $('up').addClass('deactivated');   
            }
         }
      });
      
      
      $('down').click( function(event){
         if(!$('down').hasClass('deactivated')) {
            vertical_moves++;
            $('up').removeClass();   
            $('inside').animate('margin-left', '-'+ (478 * vertical_moves) +'px');
            if(vertical_moves == (cols-2)) {
               $('down').addClass('deactivated');   
            }
         }
      });
   } else {
      $('up').addClass('deactivated');   
      $('down').addClass('deactivated');   
   }
   
   var current_id = 1;
   
   $('left').click( function(){
      if(!$('left').hasClass('deactivated')) {
         current_id = $('big_picture').get('class').replaceWith('image_', '');
         current_id--;
         $('big_picture').fadeOut();
         $('big_picture').attr({src: "pictures/" + current_id + ".jpg"});
         $('big_picture').fadeIn();
         $('big_picture').addClass('image_' + current_id);
         if(current_id==1) { $('left').addClass('deactivated'); }
         if(current_id==(number_of_pictures-1)) { $('right').removeClass('class');  }
      }
   });
   
   $('right').addEvent('click', function(){
      if(!$('right').hasClass('deactivated')) {
         current_id = $('big_picture').get('class').replaceWith('image_', '');
         current_id++;
         $('big_picture').fadeOut();
         $('big_picture').attr({ src: "pictures/" + current_id + ".jpg"});
         $('big_picture').fadeIn();
         $('big_picture').addClass('image_' + current_id);
         if(current_id==2) { $('left').removeClass(); }
         if(current_id==number_of_pictures) { $('right').addClass('deactivated'); }
      }
   });
   
   $('display_picture_img').addEvent('click', function(){
      $('display_picture_container').fadeOut();
      $('big_picture').fadeOut();
      if(Browser.Engine.trident4) { $('up').css('margin-left', '143px'); } else { $('up').css('margin-left', '230px'); }
      $('controls_horz').css('display', 'none');
      $('controls_vert').css('display', 'block');
      $('left').animate('margin-left', '7px');
      $('up').animate('margin-left', '7px');
   });

});


I have following issues
1. var new_image = document.createElement('img', {. I am not sure whether createElement function is there is jquery or not.
2. $('big_picture').attr({src: "pictures/" + current_id + ".jpg"});. I am not sure whether this is a correct way of setting src of element img.

Please help me out.
Thanks in advance