$(document).ready(function() {
  $(function () {
      var img = new Image();
      $(img).load(function () {
          $(this).hide();
          $("#photo").removeClass("loading").append(this);
          $(this).fadeIn();
      }).attr({src: "/data/colorfull/images/colorfull-1.jpg", title: "photo 1", alt: "photo 1", id: "1"});
  });
  $('#next').click(function(){
    currentId = parseInt($("#content img").attr("id"));
    $("#photo img").fadeOut().remove();
    nextId = currentId + 1;
    if (nextId > $("#content").attr("class"))
      nextId = 1;
    $("#photo").addClass("loading");
    var img = new Image();
    $(img).load(function () {
        $(this).hide();
        $("#photo").removeClass('loading').append(this);
        $(this).fadeIn();
    }).attr({  src: "/data/colorfull/images/colorfull-" + nextId + ".jpg", title: "photo " + nextId, alt: "photo " + nextId, id: nextId});
  });
  $('#previous').click(function(){
    nextId = parseInt($("#photo img").attr("id")) - 1;
    $("#photo img").fadeOut().remove();
    if (nextId < 1)
      nextId = $("#content").attr("class");
    $("#photo").addClass("loading");
    var img = new Image();
    $(img).load(function () {
        $(this).hide();
        $("#photo").removeClass('loading').append(this);
        $(this).fadeIn();
    }).attr({  src: "/data/colorfull/images/colorfull-" + nextId + ".jpg", title: "photo " + nextId, alt: "photo " + nextId, id: nextId});
  });
  $(window).keydown(function(event){
    switch (event.keyCode) {
      case 39:
      currentId = parseInt($("#content img").attr("id"));
      $("#photo img").fadeOut().remove();
      nextId = currentId + 1;
      if (nextId > $("#content").attr("class"))
        nextId = 1;
      $("#photo").addClass("loading");
      var img = new Image();
      $(img).load(function () {
          $(this).hide();
          $("#photo").removeClass('loading').append(this);
          $(this).fadeIn();
      }).attr({  src: "/data/colorfull/images/colorfull-" + nextId + ".jpg", title: "photo " + nextId, alt: "photo " + nextId, id: nextId});

      break;
      
      case 37:
      nextId = parseInt($("#photo img").attr("id")) - 1;
      $("#photo img").fadeOut().remove();
      if (nextId < 1)
        nextId = $("#content").attr("class");
      $("#photo").addClass("loading");
      var img = new Image();
      $(img).load(function () {
          $(this).hide();
          $("#photo").removeClass('loading').append(this);
          $(this).fadeIn();
      }).attr({  src: "/data/colorfull/images/colorfull-" + nextId + ".jpg", title: "photo " + nextId, alt: "photo " + nextId, id: nextId});

      break
    }
  });

});