Cambiar imagen al cambiar tamaño ventana

Estoy con una paginita una foto y un texto, al cambiar el tamaño de la ventana quiero cambiar la imagen

Al cargar la pagina la primera vez lo hace bien, el problema es si reduzco el tamaño

Le paso a la funcion el nombre de la imagen "src" (luego quiero cojer una parte de ese texto para cambiar la imagen poner un -500, -360 etc despues de ese texto y antes de la extension .jpg, pero eso es otra historia)

a lo que vamos le paso el src a la funcion, esa funcion tienen un bucle donde reviso el tamaño de la ventana y cargo una imagen u otra segun tamaño, lo hace bien al cargar la pagina pero si "redimensiono" la ventana, la consola me dice como valor de la imagen Object y claro no la encuentra


aqui el codigo desde el html

Código :

<article id="foto">
     <figure>
   <a href="img/enfilando-ok.jpg" rel="shadowbox" title="Enfilando el horizonte">
        <img src="img/enfilando-ok.jpg" width="221" height="330" alt="Enfilando el horizonte"></a>
   <script type="text/javascript">
               $(window).on("ready", inicio)
         {
         size=$(window).width();
         nomPhoto=$("#foto img").attr("src")
         tamanoNavegador(nomPhoto,size);
         }
        </script>
     </figure>
</article>

y aqui el Javascript

Código :

$(window).on("ready", inicio);
$(window).resize(tamanoNavegador);
function inicio()
{
   var w = $(window).width();
}
function tamanoNavegador(nomPhoto,size)
{
   if(size<501)
   {
      cambiaFoto(nomPhoto,"-500");
      }
                else
      {
         cambiaFoto(nomPhoto,"-ok");
      }
}
function cambiaFoto(nom,tamanio)
{
    $("#foto img").attr("src", nom);
         console.log(tamanio); // tamanio lo utilizaria para cambiar solo la parte entre el nombre 
                                       // de la imagen y la extension
}

Tienes dos $(document).ready, dos funciones iniciar y cuando redimensionas no le pasas parámetros a la función y los necesita, al menos de entrada. Eso a simple vista.
Yo haría algo así:
- Quita el javascript del HTML
- En el js pon:

Código Javascript :

$(document).on('ready',inicio);                            

function inicio() {
  $(window).on('resize',redimensiona);
  redimensiona(); //Para que te lo ajuste como quieres de entrada
  // El resto del código aparte de lo de la imagen
}

function redimensiona() {
  var $nomFoto = $("#foto img").attr("src");  
  var size = $(window).width();
  if(size<=500)   {
        cambiaFoto(nomPhoto,"-500");
      } else {
         cambiaFoto(nomPhoto,"-ok");
      }
}

function cambiaFoto(nom,tamanio)
{
    $("#foto img").attr("src", nom.split('.').join(tamanio+"."); // Así tendrías el nombre correcto de la imagen aunque puedes usar la misma foto cambiándole el ancho. $('#foto_img").css('width',tamanio) y así te quitas de exportar el doble de imagenes         
}

Cuéntame qué tal te ha ido.