$(document).ready(function() {
    //Alle Thumbnails auf Transparenz 40% setzten
    $("div.galleryPics img").each(function() {
        $(this).fadeTo("fast", 0.4);
    });
    //Erstes Bild auswählen und anzeigen
    $("div.galleryPics").each(function() {
        $(this).children("img:first").fadeTo("fast", 1);
        selectedImg = this;
        $(this).parent().parent().children("img.galleryViewPic").attr("src", $(this).children("img:first").attr("large")); ;
        $(this).parent().parent().children("h4").html($(this).children("img:first").attr("alt"));
    });
    //Beim anklicken des Thumbnails
    $("div.galleryPics img").click(function() {
        if ($(this).attr("large") != $(this).parent().parent().parent().children("img.galleryViewPic").attr("src")) {
            $(this).attr("viewed", "true");
            var selectedImg = this;
            //Alle Thumbnails auf Transparenz 40%, außer dem ausgewählten
            $(this).parent().children("div.galleryPics img").each(function() {
                if (this != selectedImg) {
                    $(this).fadeTo("fast", 0.4);
                    $(this).attr("viewed", "false");
                }
            });
            //Angeklicktes Thumbnail auf Transparenz 100% setzten
            $(this).fadeTo("fast", 1);
            selectedImg = this;
            //Ausgewähltes Bild anzeigen
            $(this).parent().parent().parent().children("div.galleryLoading").show();
            $(this).parent().parent().parent().children("img.galleryViewPic").fadeTo(1000, 0, function() {
                $(this).attr("src", $(selectedImg).attr("large")).fadeTo(1000, 1, function() {
                    $(this).parent().children("div.galleryLoading").hide();
                });
            });
            $(this).parent().parent().parent().children("h4").html($(this).attr("alt"));
        }
    });

    $("img.galleryViewPic").load(function() {
        $(this).fadeIn("slow");
        $("div.galleryLoading").hide();
    });

    //Thumbnail Hover
    $("div.galleryPics img").hover(
    //Over
    function() {
        if ($(this).attr("viewed") != "true") {
            $(this).fadeTo("fast", 1);
        }
    },
    //Out
    function() {
        if ($(this).attr("viewed") != "true") {
            $(this).fadeTo("fast", 0.4);
        }
    });

    //Thumbnails weiter blättern
    $("img.galleryButtonRight").click(function() {
        var imgCount = $(this).parent().children("div.galleryPreview").children("div.galleryPics").children("img").length;
        var imgPreview = $(this).parent().attr("preview");
        if (imgPreview < (imgCount - 5) && $(this).parent().attr("locked") != "true") {
            $(this).parent().attr("locked", "true");
            locked = true;
            imgPreview++;
            $(this).parent().attr("preview", imgPreview);
            var position = $(this).parent().children("div.galleryPreview").children("div.galleryPics").css("margin-left");
            position = parseInt(position.replace(/px/, ""));
            position = position - 85;
            $(this).parent().children("div.galleryPreview").children("div.galleryPics").animate({
                marginLeft: position + "px"
            }, 700, function() { $(this).parent().parent().attr("locked", "false"); });

        }
    });

    //Thumbnails zurück blättern
    $("img.galleryButtonLeft").click(function() {
        var imgPreview = $(this).parent().attr("preview");
        if (imgPreview > 0 && $(this).parent().attr("locked") != "true") {
            $(this).parent().attr("locked", "true");
            imgPreview--;
            $(this).parent().attr("preview", imgPreview);
            var position = $(this).parent().children("div.galleryPreview").children("div.galleryPics").css("margin-left");
            position = parseInt(position.replace(/px/, ""));
            position = position + 85;
            $(this).parent().children("div.galleryPreview").children("div.galleryPics").animate({
                marginLeft: position + "px"
            }, 700, function() { $(this).parent().parent().attr("locked", "false"); });
        }
    });

});