function singleImageHandler(){
				$hiddenField = document.getElementById('hidFileID');
				//file upload path
				$filevalue = $hiddenField.value;
				//alert($filevalue);
				//split the filename on the | separator - value 1 is id value 2 is filename
				$fileArray = $filevalue.split('|');
				$imageID = $fileArray[0];
				$filename = $fileArray[1];
				$uniqID= $fileArray[2];
				$w= $fileArray[3];
				$h= $fileArray[4];
				
				$filetypeArray = $filename.split('.');
				
				if($filetypeArray[1] == 'swf')
				{
					$('singleImage').innerHTML = "<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0' width='"+$w+"' height='"+$h+"'><param name='movie' value='/image/"+$imageID+"/"+$w+"/"+$h+"/"+$filename+"'><param name='quality' value='high'><embed src='/image/"+$imageID+"/"+$w+"/"+$h+"/"+$filename+"' quality='high' pluginspage='http://www.macromedia.com/go/getflashplayer' type='application/x-shockwave-flash' width='"+$w+"' height='"+$h+"'></object><br/><a href=\"javascript:unlinkSingleImage('"+$uniqID+"');\">Delete</a>";
				}
				else
				{
				
				//Do this my way echo the html and a delete link!, appendChild only confuses me!
				$('singleImage').innerHTML = 
				"<img src = '/image/"+$imageID+"/"+$w+"/"+$h+"/"+$filename+"' width = '75' alt=''/><br/><a href=\"javascript:unlinkSingleImage('"+$uniqID+"');\">Delete</a>";
				}
				
				
				$('btnBrowse').disabled = false;
	}

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': '/image/'+$imageID+'/0/75/'+$filename ,
								'height': '75',
								style : ''
												}
									);
								
				//use prototype.js dhtml prototype 1.6
				var float = new Element('li', { 'class': 'float','style':'float:left;position:relative'});
				$('sortableList').appendChild(float);
				//new Insertion.Before('closeImageBrowser', float);
				//insert( $('closeImageBrowser') , {'before' : float.innerHTML});
				
				var $deleteP = new Element('p');
				var $deleteLink = new Element('a', {
											  'href' : '/UploadedFiles/delete/'+$imageID ,
											  'onclick' : 'unlinkProductImage('+$imageID+'); return false'
											  		}
											  ).update("Delete");
				
				/*$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');
		//alert('here');
		new Ajax.Request('/UploadedFiles/delete/'+id, {'method':'get'});
		
		$('image_'+id).remove();
	}
	
	function unlinkSingleImage(uniqID){
		//alert('TODO unlink the image');
		document.getElementById('hidFileID').value = "";
		new Ajax.Request($webroot+'UploadedFiles/delete/'+uniqID, {'method':'get'});
		$('singleImage').innerHTML = "";
	}
	
	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);
		//alert(poststring);
		new Ajax.Request(
			$webroot+'UploadedFiles/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 ++;
		}
			
	}