function InvisibleSlideshow(id) {

	/* Abstand zwischen einzelnen Bildern */
	this.spacing = 5;

	this.id = id;

	var self = this;

	/* aktuelles Bild */
	this.index = 0;

	/* alle Bilder */
	this.bilder;

	/* Nebel Ebene */
	this.fog;

	this.loader;

	this.load = false;

	this.firstshow = true;

	this.showing = false;

	this.imageHeight;

	this.imagesJSON = 23;

	this.container;

	this.controls;

	/* Konstruktor-Methode */
	this.construct = function() {

		/* Kontrollelemente erzeugen */
		this.generateControls();

		/* Container erzeugen und Dokument anhängen */
		this.container = $j(document.createElement("div"));
		this.container.attr("id", this.id+"Container");
		this.container.addClass("ISContainer");
		$j("body").append(this.container);

		/* Bilder in Container laden */
		this.setImageDiv();

		/* Kontrollelemente anfügen */
		this.container.append(this.controls);

		/* Alle Bilder im Container holen */
		this.bilder = $j("#"+this.id+"Container > img");

		/* onclick zuweisen um slideshow zu schließen */
		this.bilder.click( function() { self.hide(); } );

		/* Nebel Ebene erzeugen */
		this.fog = $j(document.createElement("div"));
		this.fog.addClass("ISFog");
		this.fog.css({"opacity": 0, "display": "none"});
		this.container.before(this.fog);

		/* Lade Animation laden :D */
		this.loader = document.createElement("img");
		this.loader.src = "pagetypes/images/InvisibleSlideshow/loader.gif";
		this.loader = $j(this.loader);
		this.loader.hide();
		this.container.after(this.loader);

		this.preload();
	}

	this.preload = function() {

		var load = true;
		//var load = false;

		for(var i=0; i<self.bilder.length; i++) {
			var bild = self.bilder[i];
			load = load & bild.complete;
		}

		if(load) {

			self.load = true;
			return;

		}

		window.setTimeout(function() { self.preload(); }, 500);
	}

	/*
	 * Bedienelemente für die Slideshow erzeugen
	 */
	this.generateControls = function() {

		/* Container div für die Buttons */
		var div = $j(document.createElement("div"));
		div.addClass("ISControls");

		/* Previous Button */
		var slideRImg = $j(document.createElement("img"));
		slideRImg.click(function() { self.slide('r'); });
		slideRImg.attr("src", "pagetypes/images/InvisibleSlideshow/previous.png");
		slideRImg.addClass("ISIcon");

		/* Next Button */
		var slideLImg = $j(document.createElement("img"));
		slideLImg.click(function() { self.slide('l'); });
		slideLImg.attr("src", "pagetypes/images/InvisibleSlideshow/next.png");
		slideLImg.addClass("ISIcon");

		/* versteckele Button */
		var hideImg = $j(document.createElement("img"));
		hideImg.click(function() { self.hide(); });
		hideImg.attr("src", "pagetypes/images/InvisibleSlideshow/exit.png");

		/* zusammenbauen */
		div.append(slideRImg);
		div.append(hideImg);
		div.append(slideLImg);

		div.hide();

		this.controls = div;

	}

	this.slide = function(direction) {
		/* nach links oder rechts und schon am Ende -> nix */
		if(direction == 'r' && this.index == 0) {
			return;
		}

		if(direction == 'l' && this.index == this.bilder.length-1) {
			return;
		}

		var slixel = 0;

		/* sonst Animation */
		if(direction == 'l') {
			slixel -= ($j(this.bilder[this.index]).width() / 2);
			slixel -= ($j(this.bilder[this.index+1]).width() / 2);
			slixel -= this.spacing;
			this.index++;
		}
		if(direction == 'r') {
			slixel += ($j(this.bilder[this.index]).width() / 2);
			slixel += ($j(this.bilder[this.index-1]).width() / 2);
			slixel += this.spacing;
			this.index--;
		}

		this.bilder.animate({"left": "+="+slixel+"px"}, {duration: 1500});
	}

	this.show = function() {

		if(!self.showing) {
			/* Hintergrund Höhe und Breite setzen */		
			self.fog.height(window.innerHeight);
			self.fog.width(window.innerWidth);

			self.fog.show();
			self.fog.animate({"opacity": "0.85"}, "slow");

			var containerHeight = 15+self.imageHeight+10+24+5;
			containerHeight += "px";

			self.container.css( { "height": containerHeight } );
			self.container.fadeIn(500);
		}

		/* showing und load false -> loader anzeigen */
		if(!self.showing && !self.load) {
			var loaderLeft = (window.innerWidth - 32) / 2;
			var loaderTop = (self.container.height() - 32) / 2 + 15;
			self.loader.css({ "position": "fixed", "top": loaderTop+"px", "left": loaderLeft+"px" });

			self.loader.show();
		}

		self.showing = true;

		/* checken, ob noch nicht fertig geladen */
		if(!self.load) {
			window.setTimeout(function() { self.show(); }, 500);
			return;
		}

		/* Positionieren und Anfangs-Animation bei erster Anzeige */
		if(self.firstshow) {
			self.loader.hide();
			self.controls.show();

			var pos = window.innerWidth;

			for(var i=0; i<self.bilder.length; i++) {
				var bild = $j(self.bilder[i]);
				bild.css({ "left": pos+"px" });
				pos += bild.width() + self.spacing;
			}

			var firstLeft = (window.innerWidth - $j(self.bilder[0]).width()) / 2 + $j(self.bilder[0]).width();

			self.bilder.animate({"left": "-="+firstLeft+"px"}, {duration: 2500});
			self.firstshow = false;
		}

		/* Bedienelemente positionieren */
		var conPos = (window.innerWidth - 87) / 2;
		self.controls.css({"left": conPos});

	}

	this.setImageDiv = function() {

		/* Browserfenster maximieren */
		window.moveTo(0,0);
		window.resizeTo(screen.availWidth,screen.availHeight);

		var height = 400;

		/* je nach verfügbarem Platz, Bilder laden */
		if(window.innerHeight > 1300) {
			height = 1200;
		}

		if(window.innerHeight > 1100) {
			height = 1000;
		}

		if(window.innerHeight > 900) {
			height = 800;
		}

		if(window.innerHeight > 700) {
			height = 600;
		}

		this.imageHeight = height;

		var images = $j("#"+this.id+ " > div.h"+height+" > a");

		for(var i=0; i<images.length; i++) {
			var image = images[i];
			var imageNode = document.createElement("img");
			imageNode.src = image.href;
			$j(imageNode).addClass("ISPic");
			$j(imageNode).css({ "left": screen.width+"px" });
			self.container.append(imageNode);
		}

	}

	this.hide = function() {
		self.showing = false;
		self.container.fadeOut(500, function() {});
		self.fog.fadeOut(1000, function() { self.fog.css({"opacity": 0}) });
	}

	/* Konstruktor-Methode uffrufe */
	this.construct();

}

/* Verwaltet die Slideshows, jede soll ja nur einma erzeugt werden und so.. */
function InvisibleSlideshowManager() {

	this.slideshows = new Object();

	this.show = function(id) {
		if(typeof this.slideshows[id] == "undefined") {
			this.slideshows[id] = new InvisibleSlideshow(id);
		}
		this.slideshows[id].show();
	}

}

var ISM = null;

function InvisibleSlideshow_init()
{
	ISM = new InvisibleSlideshowManager();
}