$("#right-arrow").click(function() {
    if ($(".photos").is(":animated")==false) {
        $(".photos").animate({left: "-212px"}, 300).promise().done(
            function(){
                var elements = $(".photos .photo")
                var current = elements.first()
                var lst = elements.last();
                current.detach();
                current.insertAfter(lst);
                $(".photos").css({left: "0px"});
        });
    }
});

$("#left-arrow").click(function(){
    if ($(".photos").is(":animated")==false) {
        $(".photos").animate({left: "212px"}, 300).promise().done(
            function(){
                var elements = $(".photos .photo")
                var current = elements.last();
                var lst = elements.first();
                current.detach();
                current.insertBefore(lst);
                $(".photos").css({left: "0px"});
            });
    }
});


$(".photo img").click(function() {
    $("#hidden").fadeIn();
    $("#visual").fadeIn();
    $("#closed").fadeIn();
    $("#closed img").fadeIn();

    $("#loaded").show();
    var imgSrc = $(this).attr("src");
    $("#container").attr({src: imgSrc});
    $("#container").fadeIn();
    $("#container").load(function() {
        $("#loaded").hide();
    });
});

$("#closed").click(function() {
    $("#hidden").fadeOut();
    $("#visual").fadeOut();
    $("#closed").fadeOut();
    $("#closed img").fadeOut();
    $("#container").fadeOut();
});

$("#container").click(function(){
    if ($("#container").is(":visible")) {
        var currSrc = $("body #visual").find("img").last().attr("src");
        var strNumber = currSrc.split(/\D/).join("");
        var name = currSrc.split(/\d/)[0];
        var type = currSrc.split(/\d/)[currSrc.split(/\d/).length-1];
        var number = parseInt(strNumber);
        if (number < 10) {
            number += 1;
        }
        else {
            number = 1;
        }
        currSrc = name + number + type;
        $("#container").attr({src: currSrc});
    }
    if ($(".photos").is(":animated")==false) {
        $(".photos").animate({left: "-212px"}, 300).promise().done(
            function(){
                var elements = $(".photos .photo")
                var current = elements.first()
                var lst = elements.last();
                current.detach();
                current.insertAfter(lst);
                $(".photos").css({left: "0px"});
        });
    }
});