function show(A) {
    var B = new Fx.Style(A, "opacity", {
        duration: 500,
        wait: false
    }).set(0).addEvent("onStart", function (C) {
        C.style.display = "block"
    });
    B.start(0, 1)
}
function hide(A) {
    this.fx = new Fx.Style(A, "opacity", {
        duration: 500,
        wait: false
    }).addEvent("onComplete", function () {
        A.style.display = "none"
    });
    this.fx.start(1, 0)
}
function check(A) {
    if (A.style.display == "block") {
        hide(A)
    } else {
        show(A)
    }
}
function loadImg() {
    var A = new Image(32, 32);
    A.src = "./Grafiken/2.gif";
    A.style.paddingTop = "10px";
    return A
}
var Bmenu = {
    datei: "./DATEIEN/BilderMenu.js",
    bildWidth: "100",
    bilderWidth: "1250",
    Images: new Array(),
    initialize: function () {
        var A = new Ajax(Bmenu.datei, {
            method: "get",
            evalScripts: false,
            onComplete: function (B) {
                Bmenu.schreiben(B)
            }
        });
        A.request()
    },
    schreiben: function (DA) {
        DA = eval(DA);
        var Div = $("PHOTONAVIGATION").empty();
        var Vor = new Element("div", {
            "class": "vor"
        }).inject(Div);
        var Zurueck = new Element("div", {
            "class": "zurueck"
        }).inject(Div);
        var Bilder = new Element("div", {
            id: "BilderNavi"
        }).inject(Div);
        var Bilder1 = new Element("div").inject(Bilder);
        var UL = new Element("ul").inject(Bilder1);
				var w = 0, imgs = 0, limg = 0;
        DA.each(function (image, number) {
            imgs++;
						var li = new Element("li", {
                "class": "Bild load"
            }).inject(UL).addEvent("mouseover", function (event) {
                fx.start(0.55, 0.99)
            }).addEvent("mouseleave", function (event) {
                fx.start(0.99, 0.55)
            }).addEvent("click", function (event) {
                Bmenu.seePicture(image, number)
            });
						
            var fx = new Fx.Style(li, "opacity", {
                duration: 400
            }).start(0, 0.55);
            new Asset.image(image + "_klein.jpg", {
                name: image,
                style: "height:100px;",
                onload: function () {
										limg++;
                    li.removeClass("load");
                    this.inject(li);
                    Bmenu.Images.include(this);
										w += li.offsetWidth;
										if( limg >= imgs ) {
											images_loaded(w)
										}		
                },
								onerror: function(){
									limg++;
									if( limg >= imgs ) {
										images_loaded(w)
									}
								}
            })
        });
        if (!Bilder.style.left) {
            Bilder.style.left = "0px"
        }
        var scroll = new Fx.Scroll(Bilder1, {
            wait: false,
            duration: 800,
            offset: {
                x: 0,
                y: 0
            },
            transition: Fx.Transitions.Quad.easeInOut
        });
				function images_loaded( maxw ){
					maxw -= 650;
					var curr = 0, perStep = 650 / 2;
					Vor.addEvent("click", function (event) {
	            event = new Event(event).stop();
							curr += perStep;
							if( curr > maxw ) curr = maxw; 
	            scroll.scrollTo(curr,0)
	        });
	        Zurueck.addEvent("click", function (event) {
	            event = new Event(event).stop();
							curr -= perStep;
							if( curr < 0 ) curr = 0;
	            scroll.scrollTo(curr,0)
	        })
				}
    },
    Voraus: function (C, E) {
        var D = (C * Bmenu.bildWidth) - Bmenu.bilderWidth;
        var B = parseInt(E.style.left);
        if (-D >= B) {
            return
        } else {
            Style.Variation(E, 200, 1, {
                left: function (A) {
                    if (-D >= parseInt(E.style.left)) {
                        return E.style.left
                    } else {
                        return (B - (A * 2)) + "px"
                    }
                }
            })
        }
    },
    Zurueck: function (C, D) {
        var B = parseInt(D.style.left);
        if (0 <= B) {
            return
        }
        Style.Variation(D, 200, 1, {
            left: function (A) {
                if (0 <= parseInt(D.style.left)) {
                    return "0px"
                } else {
                    return (B + (A * 2)) + "px"
                }
            }
        })
    },
    seePicture: function (A, C) {
        var B = Bmenu.Canvas();
        new Asset.image(A + ".jpg", {
            style: "height:360px;",
            align: "middle",
            "class": "picture",
            name: A,
            onload: function () {
                B.removeClass("load");
                this.inject(B)
            }
        })
    },
    CFade: false,
    CFade2: false,
    Canvas: function () {
        var E = {};
        if ($("BilderCanvas")) {
            $("BilderCanvas").empty();
            E.Canvas = $("BilderCanvas")
        } else {
            E.Canvas = new Element("div", {
                id: "BilderCanvas"
            });
            var D = (parseInt(window.getWidth()) / 2) - 300;
            E.Canvas.setAttribute("style", "left:" + D + "px;");
            $("TEXT").insertBefore(E.Canvas, $("TEXT").firstChild)
        }
        var A = new Element("div", {
            id: "BilderCanvasSchliessen"
        });
        A.inject(E.Canvas);
        var B = new Element("div", {
            id: "BilderCanvasTEXT",
            "class": "load"
        }).inject(E.Canvas);
        E.TEXT = B;
        show(E.Canvas);
        A.addEvent("click", function () {
            check(E.Canvas)
        });
        return B
    }
};
window.addEvent("domready", function () {
    $("PHOTONAVIGATION").appendChild(loadImg());
    Bmenu.initialize()
});