Ordenar imagenes

[mazaku]

Buenas tardes estimados, tengo el siguiente codigo para mostrar imagenes de una carpeta pero el problema es que me muestra las imagenes desordenadas y quisiera que las mostrara de forma descendente por ejemplo 1.jpg, 2.jpg, 3.jpg etc

Código:

<?php
$dir = "images/";
$i=0;

?>
<script>

var images = [<? if (is_dir($dir)){if ($dh = opendir($dir)){while (($file = readdir($dh)) !== false){if($file != '.' && $file != '..' && $file != 'Thumbs.db'){if($i==0){$firstpic=$file;}$i++;$filenames.="'".$file."', ";}}echo substr($filenames, 0, -2);closedir($dh);}} ?>];
var firstimage = images[0];
var nextimage = images[1];
var previousimage = '';
var lastimage = images[images.length - 1];

var nextmarker = 1;
var previousmarker = '';

var numberofImages = images.length

window.onload = 
window.onload = 

function first_displayimage()
{

	nextimage = images[1];
	previousimage = '';

	nextmarker = 1;
	previousmarker = 0
	
	document.getElementById("photo").src = 'mangas/School Rumble/266 - Mad Max/' + firstimage;
	
	document.getElementById("next").disabled = false;
	document.getElementById("last").disabled = false;

	if(previousmarker == 0)
	{
	
		document.getElementById("previous").disabled = true;
		document.getElementById("first").disabled = true;
	
	}

}

function previous_displayimage()
{

	if(previousmarker == 0)
	{
	
		document.getElementById("previous").disabled = true;
		document.getElementById("first").disabled = true;
	
	}	

	document.getElementById("photo").src = 'mangas/School Rumble/266 - Mad Max/' + previousimage;
	
	nextmarker = previousmarker + 1;
	previousmarker = previousmarker - 1
		
	nextimage = images[nextmarker];
	previousimage = images[previousmarker];	
	
	document.getElementById("next").disabled = false;
	document.getElementById("last").disabled = false;

}

function next_displayimage()
{

	document.getElementById("photo").src = 'mangas/School Rumble/266 - Mad Max/' + nextimage;
	
	previousmarker = nextmarker - 1;
	nextmarker = nextmarker + 1;
	
	nextimage = images[nextmarker];
	previousimage = images[previousmarker];	
	
	document.getElementById("first").disabled = false;
	document.getElementById("previous").disabled = false;
	
	if(nextmarker == images.length)
	{
	
		document.getElementById("next").disabled = true;
		document.getElementById("last").disabled = true;
	
	}
	

}

function last_displayimage()
{

	previousmarker = images.length - 2;
	
	nextimage = '';
	previousimage = images[previousmarker];

	nextmarker = images.length;
	
	document.getElementById("photo").src = 'mangas/School Rumble/266 - Mad Max/' + lastimage;	
	
	document.getElementById("first").disabled = false;
	document.getElementById("previous").disabled = false;
	
	if(nextmarker == images.length)
	{
	
		document.getElementById("next").disabled = true;
		document.getElementById("last").disabled = true;
	
	}

}

</script>

tambien si pudieran ayudarme de favor de que forma para poder mostrar en un select el numero de imagen que se esta viendo por ejemplo si estoy viendo la imagen 5.jpg que el select aparezca el numero y 5 y al dar clic en el select 6 pasar a la imagen 6 por ejemplo que el codigo muestre algo asi

<option value="5.jpg">5</option>
<option value="6" a href="6.jpg">6</option>


Perdonen si es mucho lo que pido pero se los agradezco de antemano la ayuda dada, saludos y gracias

[mazaku]

o si pudieran decirme de favor como mostrar las imagenes de forma descendente