function multiImageHandler(){
				//console.debug('handlrr called '+document.getElementById("hidFileID").value);
				//hidden upload field should have been updated with the value entered
				//by the upload handler
				$hiddenField = document.getElementById('hidFileID');
				//file upload path
				$filevalue = $hiddenField.value;
				//split teh filename on the | separator - value 1 is id value 2 is filename
				$fileArray = $filevalue.split('|');
				$imageID = $fileArray[0];
				$filename = $fileArray[1];
				
				//console.debug('here with '.$filename);
				//add an image element to the image upload fieldset
				var image = new Element('img', { 
								'src': $imageUploadDir+$filename ,
								'width': '100',
								style : 'margin-top: 10px'
												}
									);
								
				//use prototype.js dhtml prototype 1.6
				var float = new Element('li', { 'class': 'float'});
				$('sortableList').appendChild(float);
				//new Insertion.Before('closeImageBrowser', float);
				//insert( $('closeImageBrowser') , {'before' : float.innerHTML});
				
				var $deleteP = new Element('p');
				var $deleteLink = new Element('a', {
											  'href' : '/assets/delete/'+$imageID ,
											  'onclick' : 'unlinkProductImage('+$imageID+'); return false'
											  		}
											  );
				
				$deleteIcon = new Element('img' , {
										  	'src': "/images/deleteIcon.png",
											'alt' : "/images/deleteIcon.png",
											'width' : "16"
										  		}
										  );
				
				//$deleteLink.onclick = 'unlinkProductImage('+$imageID+'); return false';
				$deleteLink.appendChild($deleteIcon);
				//console.debug($deleteLink);
				$deleteP.appendChild($deleteLink);
				
				float.appendChild(image);
				float.appendChild($deleteP);
				//console.debug(float);
				
				
				document.getElementById('multipleImages').value += ','+$imageID+'|'+$filename;
				$hiddenField.value = '';
				
				//re-index the sortable list
				Sortable.create('sortableList', {'overlap' : 'horizontal' , 'constraint' : 'none' , 'ghosting' : false, 'onUpdate' : function (container) {sortableCallback(container)} } );
				
				//console.debug($filename);
				
				//$('btnBrowse').disabled = false;
	}
	
	function unlinkProductImage(id){
		//alert('TODO unlink the image');
		new Ajax.Request($webroot+'assets/delete/'+id, {'method':'get'});
		$('image_'+id).remove();
	}
	
	function sortableCallback(container){
		var childElements = container.childElements();
		//clean up the styles - borders are assigned in position order
		//console.debug(domContainer.childElements());
		for($i=0;$i<childElements.length;$i++){
			//check teh element type - sometimes you get javascript elements
			if(childElements[$i].tagName == 'LI'){
				childElements[$i].style.border = '';
				childElements[$i].style.padding = '';
			}
		}
		//now set the styles for our special positions
		showGalleryPositions(container);
		
		poststring = Sortable.serialize(container.id);
		new Ajax.Request(
			$webroot+'product_images/ajaxSort',
			{'method':'post','parameters':poststring}
			);
		
	}
	
	function showGalleryPositions(container){

		
		var childElements = container.childElements();
		
			//sometimes the child element list includes
			//script tags so we cant just assume
			//childElement[$i] will be an li tag,
			//so we keep a child index counter going
			$childIndex = 0;
		
		for($i=0; $i<$positionStyles.length;$i++){
			if($childIndex+1 > childElements.length) return false;
			//console.debug($positionStyles[$i]);
			if(childElements[$childIndex].tagName!='LI'){
				//get it on the next loop
				$i--;
			}
			else{
				for(key in $positionStyles[$i]) {
					value = $positionStyles[$i][key];
			 		//console.debug(key+':'+value);
					eval('childElements[$childIndex].style.'+key+' = '+ '\''+value+'\'');
				}
			}
			$childIndex ++;
		}
			
	}