$(document).ready(function(){
    $(".popup").click(function(){
        var img = $(this);
        $("#inner_img_float").css("background-image","url("+img.attr("src").replace("_thumb","")+")");
        var alt = img.attr("alt").split(" ");
        var id = parseInt(alt[1]);
        var dir = alt[0];

        $("#left_arrow").attr("alt",dir+" "+(id-1))
        $("#right_arrow").attr("alt",dir+" "+(id+1))
        $('#showImage').show();
        $("#img_shower").fadeIn(1000);
        $("#xbox").fadeIn(1000);
        $("#img_arrows").fadeIn(1000);
    })

    $("#left_arrow").click(function(event){
        var alt=$("#left_arrow").attr("alt").split(" ");
        var dir = alt[0];
        var id = alt[1];
        var url = "./script/getContent.php?dir="+dir+"&id="+id
        $.get(url,function(data){
            data = data.split(" ");
            data[1] = data[1].replace("../","./");
            data[0] = parseInt(data[0]);
            $("#inner_img_float").css("background-image","url("+data[1].replace("_thumb","")+")");
            $("#left_arrow").attr("alt",dir+" "+(data[0]-1))
            $("#right_arrow").attr("alt",dir+" "+(data[0]+1))
        })
    });
    $("#right_arrow").click(function(event){
        var alt=$("#right_arrow").attr("alt").split(" ");
        var dir = alt[0];
        var id = alt[1];
        var url = "./script/getContent.php?dir="+dir+"&id="+id
        $.get(url,function(data){
            data = data.split(" ");
            data[1] = data[1].replace("../","./");
            data[0] = parseInt(data[0]);
            $("#inner_img_float").css("background-image","url("+data[1].replace("_thumb","")+")");
            $("#left_arrow").attr("alt",dir+" "+(data[0]-1))
            $("#right_arrow").attr("alt",dir+" "+(data[0]+1))
        })
    });

    $("#xbox_image").click(function(event){
        $('#showImage').hide();
        $('#img_shower').hide();
        var floatimg = document.getElementById("inner_img_float");
        floatimg.setAttribute("src", "");
   });
})