var Bg = new Class({
	Implements: [Events,Options],
	options: {
		site: {
			container: "layer",
			height: 598
		},
		bg: {
			bgDiv: "site",
			delay: 4000,
			images: ["../images/layout/hint/startseite/2.jpg","../images/layout/hint/startseite/3.jpg"]
		},
		popup: {
			ids: ["footer_17","footer_18"]
		}
	},
	initialize: function(options) {
		this.setOptions(options);
		this.siteContainer = $(this.options.site.container);
		this.bgDiv = $(this.options.bg.bgDiv);
		this.addPopupEvents();
		this.centerSite();
		this.addPortfolio();
		window.addEvent("resize", this.centerSite.bind(this));
		this.curBgCounter = 0;
		this.bgImages = this.options.bg.images;
		this.changeBg.delay(this.options.bg.delay,this,[this.bgImages[this.curBgCounter]]); // erstes BG Bild wird schon im Stylesheet geladen!
	},
	addPortfolio: function() {
		this.request = new Request.JSON({url: "index.php?eID=tx_snilight_pi1", link: "cancel", method: "get", onSuccess: this.openMediabox.bind(this)})
		$$("a.sub").each(function(item) {
			item.addEvent("click",function(e) {
				e.stop();
				this.request.send("id="+item.get("title").toInt());
			}.bind(this));
		}.bind(this));
	},
	openMediabox: function(jsonData) {
		var mBoxData = [];
		if(jsonData.length) {
			jsonData.each(function(item,index) {
				mBoxData.push([item.pic,item.title+"::"+item.description,"100 100"]);
			});		
			Mediabox.open(mBoxData,0);
		}
		else {
			alert("No items in this page!");
		}
	},
	addPopupEvents: function() {
		this.options.popup.ids.each(function(id) {
			$(id).addEvent("click", function(e) {
				e.stop();
			    window.open(this.get("href"),'mywindow','width=754,height=600,status=0,menubar=0,scrollbars=1,resizable=0');
			});
		}.bind(this));
	},
	centerSite: function() {
        var windowHeight = window.getSize().y;
		if(windowHeight.toInt() > this.options.site.height) {
			// nur wenn die Seite nicht scrollbar ist zentrieren, daraus ergibt sich ausserdem dass window größer ist als site
			var mTop = (windowHeight / 2 - (this.options.site.height / 2)).toInt();
			this.siteContainer.setStyle("margin-top",mTop);
		}
		else {
			this.siteContainer.setStyle("margin-top","3em");
		}
	},
	changeBg: function(img) {
		new Asset.image(img, {
			"onload": function() {
				this.bgDiv.setStyle("background-image","url("+img+")");
			}.bind(this)
		});
		this.curBgCounter++;
        if(this.curBgCounter < this.bgImages.length) {
            this.changeBg.delay(this.options.bg.delay,this,[this.bgImages[this.curBgCounter]]); // erstes BG Bild wird schon im Stylesheet geladen!
        }
	}
});