Javascript-форум - Загрузка и обрезка трех фотографий

Здравствуйте!

Имеется вот такой скрипт - http://www.bewebdeveloper.com/tutori...php-and-jquery

Подключил его к сайту и все хорошо, но на другой странице нужно сделать загрузку не одной фотографии а трех.
К сожалению в javascript не разбираюсь и как сделать тоже самое для нескольких форм просто не понимаю, буду очень сильно благодарен за помощь, так как бьюсь над этим уже неделю!

скрипт который вызывает popup форму для загрузки

<script>
// the target size
var TARGET_W = 167;
var TARGET_H = 167;

// show loader while uploading photo
function submit_photo() {
	// display the loading texte
	$('#loading_progress').html('Загрузка вашей фотографии...');
}

// show_popup : show the popup
function show_popup(id) {
	// show the popup
	$('#'+id).show();
}

function show_popup2(id) {
	// show the popup
	$('#'+id).show();
}

function show_popup3(id) {
	// show the popup
	$('#'+id).show();
}

// close_popup : close the popup
function close_popup(id) {
	// hide the popup
	$('#'+id).hide();
}

// show_popup_crop : show the crop popup
function show_popup_crop(url) {
	// change the photo source
	$('#cropbox').attr('src', url);
	// destroy the Jcrop object to create a new one
	try {
		jcrop_api.destroy();
	} catch (e) {
		// object not defined
	}
	// Initialize the Jcrop using the TARGET_W and TARGET_H that initialized before

   $('#cropbox').Jcrop({
	boxWidth: 800, 
	boxHeight: 600,
      aspectRatio: TARGET_W / TARGET_H,
      setSelect:   [ 100, 100, TARGET_W, TARGET_H ],
      onSelect: updateCoords
    },function(){
        jcrop_api = this;
    });

    // store the current uploaded photo url in a hidden input to use it later
	$('#photo_url').val(url);
	// hide and reset the upload popup
	$('#popup_upload').hide();
	$('#loading_progress').html('');
	$('#photo').val('');

	// show the crop popup
	$('#popup_crop').show();
}

// crop_photo : 
function crop_photo() {
	var x_ = $('#x').val();
	var y_ = $('#y').val();
	var w_ = $('#w').val();
	var h_ = $('#h').val();
	var photo_url_ = $('#photo_url').val();

	// hide thecrop  popup
	$('#popup_crop').hide();

	// display the loading texte
	$('#photo_container2').html('В работе...');
	// crop photo with a php file using ajax call
	$.ajax({
		url: '../system/crop_photo.php',
		type: 'POST',
		data: {x:x_, y:y_, w:w_, h:h_, photo_url:photo_url_, targ_w:TARGET_W, targ_h:TARGET_H},
		success:function(data){
			// display the croped photo
			$('#photo_container2').html(data);
		}
	});
}

// updateCoords : updates hidden input values after every crop selection
function updateCoords(c) {
	$('#x').val(c.x);
	$('#y').val(c.y);
	$('#w').val(c.w);
	$('#h').val(c.h);
}
</script>

сама форма popup

<!-- The popup for upload new photo -->
    <div id="popup_upload">
        <div class="form_upload">
            <span class="close" onclick="close_popup('popup_upload')">x</span>
            <h2>Загрузка фотографии</h2>
            <form action="../system/upload_photo.php" method="post" enctype="multipart/form-data" target="upload_frame" onsubmit="submit_photo()">
                <input type="file" name="photo" id="photo" class="file_input">
                <div id="loading_progress"></div>
                <input type="submit" value="Загрузить" id="upload_btn">
            </form>
            <iframe name="upload_frame" class="upload_frame"></iframe>
        </div>
    </div>
    <!-- The popup for crop the uploaded photo -->
    <div id="popup_crop">
        <div class="form_crop">
            <span class="close" onclick="close_popup('popup_crop')">x</span>
            <h2>Обрезка фотографии</h2>
            <!-- This is the image we're attaching the crop to -->
            <img id="cropbox" />

            
            <!-- This is the form that our event handler fills -->
            <form>
                <input type="hidden" id="x" name="x" />
                <input type="hidden" id="y" name="y" />
                <input type="hidden" id="w" name="w" />
                <input type="hidden" id="h" name="h" />
                <input type="hidden" id="photo_url" name="photo_url" />
                <input type="button" value="Обрезать фото" id="crop_btn" onclick="crop_photo()" />
            </form>
        </div>
    </div>

ну и сама кнопка которая вызывает все это и заменяет стандартную картинку на загруженную

<span class="upload_btn" onclick="show_popup('popup_upload')">
<div class="pole_s_fotografiei-holder">
<div id="photo_container">
{photo1}
</div>
<div class="pri_navodke_na_pole_fotog fileinput type="text" -button">
<img class="plus_zagruzit_fotografiu" src="images/plus_zagruzit_fotografiu.png" alt="" width="42" height="40" />
</div>
</div>
</span>

Заранее спасибо!

P.S. Первый раз в жизни прошу помощи, если что-то не так сильно не ругайте) Правда, обыскал уже все что можно...