// ----------------------------------------------------------------------------
//
//   file:      uc.js
//   function:  Lytebox (früher HighSlide)
//   Erstellt:	14/07/11
//   copyright: © 2010 <i-D> internet + Design GmbH & Co. KG
//              Erfurter Str. 35
//              99423 Weimar
//              Deutschland
//              Fon:     03643 7785 0
//              Fax:     03643 7785 29
//              E-Mail:  office@i-d.de
//              Web:     http://www.i.d.de/
//   author:    Michael Waack <m.waack@i-d.de>
//
// ---------------------------------------------------------------------------

// strictmode kann man im FF testen, derzeit nur mit FF v8.0 geprüft. 3.6 geht nicht!
"use strict"

/* ---------------------------------------------------
 *	usercontrol Lytebox
 */
var ucLytebox = Class.create({
	// Zielgrösse
	size  : {},
	// Startposition
	start : {},
	// Zielposition
	end : {},
	// Array der Items
	items : [] ,
	// Auflistung der images für blättern
	gallery : [] ,
	options : {
			closeButton : true
		},
	Title : '',													// eval Ausdruck der auf das element angewendet wird
	TitleHTML : '<div class="lbFlickrTitle lbText">{TITLE}</div>',		// HTML für den Titel {TITLE} gilt als Platzhalter
	TitlePos : 'top', 											// top | bottom
	
	// Lupensymbol wenn gewünscht. cssClass 'idLupe' muss gesetzt sein
	Lupe : '<span class="magnifier" title="Vergrößern">Vergrößern</span>',
	
	OuterHTML : '<div>{ITEM}</div>',
	
	/* ------------------------------
	 * Konstruktor
	 */
	initialize : function(maxWidth,maxHeight,elem,duration) {
		var D = document;
		this.width = (maxWidth || -1);// || Math.max(D.body.clientWidth, D.documentElement.clientWidth) - 40);
		this.height = (maxHeight || -1) ;//Math.max(D.body.clientHeight, D.documentElement.clientHeight) - 40);
		this.obj = (elem || '');
		
		this.duration = (duration || 0.5);
		if (!$('lbExpander')) {
			var d = $$('body')[0];
			this.expander = new Element('div',{id:'lbExpander','class':'lbPreload'});
			$(d).insert(this.expander);
		} else {
			this.expander = $('lbExpander');
		}
		this.expanderClick = this.collapse.bindAsEventListener(this);

		// Hintergrundlayer
		if(!$('backLayer')) {
			var backLayer = new Element('div',{id:'backLayer'});//.update('<div>&nbsp;</div>');
			var d = $$('body')[0];
			d.insert({bottom : backLayer});
			backLayer.hide();
			//this.loadingGif = $('backLayer').down();
		}

		this.backLayer = $('backLayer');
		this.backLayerClick = this.collapse.bindAsEventListener(this);
		this.ESC = this.keydown.bindAsEventListener(this);

		// Loading-Gif
		if (!$('loader')) {
			this.loadingGif  = new Element('div',{'id':'loader','class':'loader'}).update('<div>&nbsp;</div>');;
			this.loadingGif.hide();
			this.expander.insert({top : this.loadingGif});
		} else {
			this.loadingGif = $('loader');
		}


		if (!this.backLayer.down()) {
		
			this.backLayerLoader = this.loadingGif.clone();
			this.backLayer.insert(this.backLayerLoader);
		} else {
			this.backLayerLoader = this.expander.down();
		}

		this.backLayerLoader.hide();
		if(document.all && !window.opera){
			this.objBody = (window.document.compatMode == "CSS1Compat")? window.document.documentElement : window.document.body || null;
		}else{
			this.objBody = document.documentElement;
		}
	},
	
	/* ------------------------------
	 * ESC-Taste schliesst lytebox
	 */
	keydown : function(ev) {
		var keycode;
		if(typeof event != 'undefined') {
			keycode = event.keyCode;
		} else {
			if (ev == null) { // ie
				keycode = event.keyCode;
			} else { // mozilla
				keycode = ev.which;
			}
		}
		if(keycode == 27){ // escape, close box, esc
			this.collapse();
		}
	},
	

	/* ------------------------------
	 * Hinzufügen eines Items
	 * Art des Items wird durch params.type bestimmt
	 * z.B.: Lytebox.add(s,{type:'image',url:s.href});
	 * Rückgabe is das erzeugte item
	 */
	add : function(el,params) {

		this.items[this.items.length] = {};
		this.items[this.items.length-1].item = el;
		this.items[this.items.length-1].options = Object.clone(this.options);
		/* ------------------------------
		 * Headline wird wie gesetzt/ erzeugt?
		 * Beispiel?
		 */
		if (this.Title!='') {
			// Titel setzen	
			this.items[this.items.length-1].title = this.TitleHTML.replace(/{TITLE}/,eval('el.'+this.Title));
		}

		switch (params.type) {
			case 'image':
				// Standard a href mit eingebettem image
				for(var i=0;i<this.items.length;i++) {
					// Bild wurd evtl. bereits geladen
					if ((this.items[this.items.length-1].img && this.items[this.items.length-1].img.src==params.url)) {
						this.items[this.items.length-1].img = new Element('img',{src:params.url});
						this.items[this.items.length-1].item = el;
						break;
					} else {
					}
				}
				if (!this.items[this.items.length-1].img) {
					// Preload
					this.items[this.items.length-1].img = new Image();
					this.items[this.items.length-1].img.notLoadedsrc = params.url;
				}

				this.items[this.items.length-1].collapse = this.collapse.bindAsEventListener(this);
				Event.observe(this.items[this.items.length-1].img, 'click', this.items[this.items.length-1].collapse);
				this.items[this.items.length-1].simpleExpand = this.simple_expand.bindAsEventListener(this,this.items.length-1);
				Event.observe(this.items[this.items.length-1].item, 'click', this.items[this.items.length-1].simpleExpand);
				if (el.hasClassName('idLupe')) {
					var imgTemp = el.select('img')[0];
					if (imgTemp.width>0) {
						el.setStyle({width:imgTemp.width+'px',height:imgTemp.height+'px'});
					}
					el.insert(this.Lupe);
				}
				break;
			case 'html':
				this.items[this.items.length-1].html = el.select('div')[0];//down();
				Event.observe(this.items[this.items.length-1].item, 'click', this.html_expand.bindAsEventListener(this,this.items.length-1));
				break;
			case 'ajax':
				this.items[this.items.length-1].ajax = params.url;//'DynamicLoader.ashx?type=ajax&app=newsDetail&thumb=1&id=27084202:1288700956000';
				Event.observe(this.items[this.items.length-1].item, 'click', this.ajax_expand.bindAsEventListener(this,this.items.length-1));
				break;			
			case 'swf':
				this.items[this.items.length-1].params = params;
				Event.observe(this.items[this.items.length-1].item, 'click', this.swf_expand.bindAsEventListener(this,this.items.length-1));
				break;	
			default:
				break;
		}
		this.items[this.items.length-1].type = params.type;
		this.items[this.items.length-1].index = this.items.length-1;

		return this.items[this.items.length-1] ;
	},
	
	/* ------------------------------
	 * 
	 */
	setGallery : function (params) {
		if (params.length==0) return;
		var host = '';
		if (params[0].select('a')[0].href.indexOf('http://')==-1) {
			host = 'http://localhost:8003';
		}
		var gList = new Element('ul');
		gList.items = new Array();
		gList.setStyle({'display':'inline-block'});
		// params enthält alle urls für die gallery
		for (var n=0;n<params.length;n++) {
			for(i=0;i<this.items.length;i++) {
				if (params[n].select('a')[0] == this.items[i].item) {
					this.items[i].gallery = gList;
					var li = new Element('li').insert({'top':this.items[i].img});
					li.setStyle({'position':'absolute','opacity':'0'});
					this.items[i].img.setStyle({'float':'left'});
					this.items[i].title = new Element('div',{'class':'lbFlickrTitle lbText'}).update(params[n].title);
					li.insert({ bottom : this.items[i].title});
					// Breite für den Titel setzen
					//this.expander.select('.lbFlickrTitle')[0].setStyle({width:this.expander.getWidth()-8+'px'});

					gList.insert({'bottom':li});
					gList.items.push(gList.select('img')[gList.childNodes.length-1]);
					this.items[i].img.pos = n;
					continue;
				}
			}
		}
		gList.down().setStyle({opacity:1});
		this.gallery.push(gList);
	},
	
	
	swf_expand : function(ev,i) {
		var D = document;
		if (!this.items[i].params.object.width) {
			this.items[i].params.object.width =  Math.max(D.body.clientWidth, D.documentElement.clientWidth)-100;
		}
		if (!this.items[i].params.object.height) {
			this.items[i].params.object.height =  Math.max(D.body.clientHeight, D.documentElement.clientHeight)-100;
		}		
		this.before_expand(ev);
		if(!this.items[i].swf || document.all) {
			this.items[i].swf = new Element('object',{type:'application/x-shockwave-flash',id:'irgendwas',style:'visibility:visible'});
			this.items[i].swf.writeAttribute('type','application/x-shockwave-flash');
			// url(data) und type setzen
			this.items[i].swf.writeAttribute('data',this.items[i].params.url);
			
			for ( var key in this.items[i].params.object ) {
				this.items[i].swf.writeAttribute(key,this.items[i].params.object[key]);
			}
			
			for ( key in this.items[i].params.params ) {
				var p = new Element('param',{ name:key,value:this.items[i].params.params[key]});
				this.items[i].swf.insert({bottom:p});
			}
			if (!document.all) {
				this.items[i].swf.insert({bottom:this.items[i].embed});
			} else {
				x =  '<object width="'+this.items[i].params.object.width+'" height="'+this.items[i].params.object.height+'"';
				x += ' type="application/x-shockwave-flash" id="irgendwas" style="visibility: visible;" data="' + this.items[i].params.url + '" ';
				x += 'allowfullscreen="true"><param name="allowfullscreen" value="true">';
				if (!this.items[i].item.hasClassName('wmodenone')) {
					x += '<param name="wmode" value="transparent">';
				}
				x += '<param name="flashvars" value="allowfullscreen=true&amp;amp;enablecsi=1">';
				x += '<param name="movie" value="'+this.items[i].params.url+'"><embed width="'+this.items[i].params.object.width+'" height="'+this.items[i].params.object.height+'" quality="high" ';
				x += ' type="application/x-shockwave-flash" name="irgendwas" pluginspage="http://www.macromedia.com/go/getflashplayer" href="'+this.items[i].params.url+'" allowfullscreen="true"></object>'
				this.items[i].swf = new Element('div').update(x);
			}
			
		}
		
		this.expander.insert({bottom : this.items[i].swf});
		this.expander.setStyle({height: this.items[i].params.object.height + 'px',width: this.items[i].params.object.width + 'px'});
		
		this.expand(ev,this.items[i]);
	},
	
	before_expand : function(ev) {
		if (ev) {
			this.stopEvent(ev);
		}
		this.loadingGif.show();
		var D = document;
		this.maxWidth = (this.width>-1 ? this.width : this.viewport.width() - 40);
		this.maxHeight = (this.height>-1 ? this.height : this.viewport.height()  - 40);
		if (!this.backLayer.visible()) {
			this.expander.update('');
			this.expander.insert({top : this.loadingGif});
			if (ev) {
				this.start.x = Event.pointerX(ev);
				this.start.y = Event.pointerY(ev);
			} else {
				this.start.x = this.maxWidth/2;
				this.start.y = this.maxHeight/2;
			}
			// Expander startstyles
			this.expander.setStyle({zIndex:9999, left: this.start.x + 'px', top: this.start.y+ 'px'});
			// Hintergrundlayer anzeigen
			this.backLayer.setStyle({left: '0px',top: '0px'});
			this.backLayer.setStyle({width: this.getDocWidth() +'px',height: this.getDocHeight()+'px'});
			this.backLayer.show();
			this.backLayerLoaderShow();
			
		}

	},
	
	backLayerLoaderShow : function() {
		var sh = this.objBody.scrollTop;
		this.end.top  = (document.all ? sh : pageYOffset ) + (this.objBody.clientHeight/2) - (32);
		this.backLayerLoader.setStyle({top:this.end.top+'px'});
		this.backLayerLoader.show();
	},
	
	expand : function (ev,item) {
		var img = this.expander.select('img')[0];
		if (img && item.type!='ajax' && item.type!='html') {
			img.setStyle({float:'left'});
		}
		
		this.currentItem = item;
		if (item.type!='ajax') {
			if (img) {
				if(img.height==0) {
					var that = this;
					var loader = new ImageLoader(img.src);
					loader.owner = this;
					loader.loadEvent = function(url, image){
						that.expand(ev,item);
					}
					loader.load();
					return;			
				}
				this.resize(img,this.maxHeight,this.maxWidth);
			}
		}
		this.closeButton(item);
		// Zielgrösse 
		// bei Opera muss zuvor auto: clip gesetzt werden
		if (Prototype.Browser.Opera) {
			this.expander.setStyle({clip:'auto'});	
		}
		this.size.width = this.expander.getWidth();//Math.max(this.expander.width, this.expander.clientHeight,this.expander.offsetWidth);
		this.size.height = this.expander.getHeight();//.offsetHeight;

		// Startstyles nur 1 mal setzen setzen
		this.expander.setStyle({height: '0px', width : '0px'});
		var D = document;

		if(!D.all) {
			this.expander.setStyle({clip:'auto'});
			//this.end.top  = (document.all ? document.documentElement.scrollTop : pageYOffset ) + ((self.innerHeight-this.size.height) / 2);
		} else {
			if (navigator.userAgent.indexOf("MSIE 8")>0 || navigator.userAgent.indexOf("MSIE 8")>0 || navigator.userAgent.indexOf("MSIE 9")>0) {
				this.expander.setStyle({clip:'auto'});	
			} else {
				this.expander.setStyle({clip:'rect(auto)'});
			}
			for(i=0;i<this.expander.all.length;i++) {
				this.size.width = (this.size.width<this.expander.all[i].offsetWidth?this.expander.all[i].offsetWidth:this.size.width );
			}
			//this.end.top  = Math.max(document.documentElement.scrollTop,D.body.scrollTop) + (Math.max(D.body.clientHeight, D.documentElement.clientHeight)/2)-(this.size.height/2);
		}
		// Zielposition ermitteln	
		var sh = this.objBody.scrollTop;
		this.end.top  = (document.all ? sh : pageYOffset ) + (this.objBody.clientHeight/2) - (this.size.height/2) ;//((self.innerHeight-g.img.height) / 2);
		this.end.left = (document.all ? document.body.scrollLeft : pageXOffset )+ ((Math.max(D.body.clientWidth, D.documentElement.clientWidth)-this.size.width) / 2);
		var that = this;
		
		this.expander.morph('left:' + this.end.left + 'px;top:' + this.end.top + 'px;height:' + this.size.height + 'px;width:' + this.size.width + 'px',
							{ 
								duration: this.duration,
								after : function(el) {
									that.loadingGif.hide();	
									that.backLayerLoader.hide();
								}	
							});
		Event.observe(this.backLayer, 'click', this.backLayerClick);
		Event.observe(document,'keydown',this.ESC);
		
				
	},
	/*
	 * Bildgrösse skalieren falls grösser als maxsize, sonst orginalgrösse
	 */
	resize : function(img, maxh, maxw,subText) {
  		/* Prüfung ob noch weiteres HTML vorhanden ist
  		 * Falls ja, wird die Breite dest subtextes angepasst und das Bild erneut berechnet
  		 */
		if (this.expander.select('div.lbSubHTML').length==1 && !subText) {
			var subEl = this.expander.select('div.lbSubHTML')[0];
			subEl.setStyle({'width': maxw +'px'});
			maxh -= subEl.getHeight();
			maxh -= parseInt(subEl.getStyle('margin-top'));
			maxh -= parseInt(subEl.getStyle('margin-bottom'));
			maxh -= parseInt(subEl.getStyle('padding-top'));
			maxh -= parseInt(subEl.getStyle('padding-bottom'));
			this.resize(img, maxh, maxw,true);
		}

		if (img) {
	  		var ratio = maxh/maxw;
	  		if (img.orgHeight) {
	  			img.height = img.orgHeight;
	  			img.width = img.orgWidth;
	  		} else {
	  			img.orgHeight = img.height;
	  			img.orgWidth = img.width;
	  		}
	  		if (img.height/img.width > ratio){
	     		// height is the problem
	    		if (img.height > maxh){
	      			img.width = parseInt(img.width*(maxh/img.height));
	      			img.height = maxh;
	    		}
	  		} else {
	    		// width is the problem
	    		if (img.width > maxh){
	      			img.height = parseInt(img.height*(maxw/img.width));
	      			img.width = maxw;
	    		}
  			} 
  		}
  		
	},
	html_expand : function(ev,i) {
		
		if (ev) {
			this.stopEvent(ev);
		}
		Event.observe(this.expander, 'click', this.expanderClick);
		this.expander.setStyle({cursor:'auto'});
		var dummy = new Element('div').update(this.items[i].html.innerHTML);
		if (!dummy.down().visible()) {
			dummy.down().show();
		}


		this.expander.setStyle({height:'',width:''});
		this.before_expand(ev);
		
		this.expander.update(dummy);
		/*
		 * Höhen und Brite in % angegeben
		 * muss im umschliessendem DIV mit den classen height bzw. width gekennzeichnet werden
		 */
		 /* Fehlerhaft!!!!!!! */
		if (this.items[i].html.hasClassName('width')) { //.length==1) {
			var w = parseInt(dummy.down().getStyle('width'));
			w = (document.body.getWidth()/100*w);
			this.maxWidth = w;
		}
		if (this.items[i].html.hasClassName('height')) {
			var h = parseInt(dummy.down().getStyle('height'));
			h = (document.body.getHeight()/100*h);
			this.maxHeight = h;
		}
		this.expand(ev,this.items[i]);		
	},
	
	ajax_expand : function(ev,i) {
		this.stopEvent(ev);
		if (typeof(uc)!='undefined') {
			this.ajaxUrl = uc.rootPath + this.items[i].ajax;
		} else {
			this.ajaxUrl = this.items[i].ajax;
		}
		Event.observe(this.expander, 'click', this.expanderClick);
		this.expander.setStyle({cursor:'auto'});
		if (ev) {
			this.before_expand(ev);
		}
		var request = new Ajax.Request(this.ajaxUrl, {
			method: 'get',
			evalJS: true,
			asynchronous: false
		});				
		this.expander.update(request.transport.responseText);
		/*
		 * Höhen und Brite in % angegeben
		 * muss im umschliessendem DIV mit den classen height bzw. width gekennzeichnet werden
		 */
		if (this.expander.select('div.width').length==1) {
			var w = parseInt(this.expander.select('div.width')[0].getStyle('width'));
			this.expander.select('div.width')[0].setStyle({'width': (document.body.getWidth()/100*w) + 'px'});
		}
		if (this.expander.select('div.height').length==1) {
			var h = parseInt(this.expander.select('div.height')[0].getStyle('height'));
			this.expander.select('div.height')[0].setStyle({'height': (document.body.getHeight()/100*h) + 'px'});
		}

		this.expand(ev,this.items[i]);
		
	},
	
	galleryArrows : function(ev) {
		ev = (ev) ? ev : ((window.event) ? window.event : "");
		if (this.expander.getWidth()/2 < ev.pageX - parseInt(this.expander.getStyle('left'))) {
			this.arrowRight.show();
			this.arrowLeft.hide();
		} else {
			this.arrowRight.hide();
			this.arrowLeft.show();
		}
	},
	
	
	getImageData : function(nextImage) {

		var titleHeight = 0;	
		var D = document;
		this.maxWidth = (this.width>-1 ? this.width : this.viewport.width() - 40);
		this.maxHeight = (this.height>-1 ? this.height : this.viewport.height()  - 80);
		this.resize(nextImage,this.maxHeight-titleHeight,this.maxWidth);
		var sh = this.objBody.scrollTop;
		this.end.top  = (document.all ? sh : pageYOffset ) + (this.objBody.clientHeight/2) - (nextImage.height/2) ;//((self.innerHeight-g.img.height) / 2);
		this.end.left = (document.all ? document.body.scrollLeft : pageXOffset )+ ((Math.max(D.body.clientWidth, D.documentElement.clientWidth)-nextImage.width) / 2);
	},
	
	/*
	 * Bildwechel nach rechts
	 */
	moveRight : function(ev,g,repeat) {
		
		if (g.curImage+1>=g.select('li').length) {
			g.nextImage=0;	
		} else {
			if (repeat===undefined) {
				g.nextImage = g.curImage+1;
			}
		}
		var that = this;
		var nextImage = g.select('li img')[g.nextImage];
		var curImage = g.select('li img')[g.curImage];
		if (nextImage.src=="") {
			this.loadingGif.show();
			// nachladen
			var loader = new ImageLoader(g.items[g.nextImage].notLoadedsrc);
			loader.loadEvent = function(url, image){
				g.select('li img')[g.nextImage].src = image.src;

				that.moveRight(ev,g,true);
			}
			loader.load();
			return;
		}
		this.loadingGif.hide();
		this.getImageData(nextImage);
		var currentLi = nextImage.up();
	
		this.expander.morph('left:' + this.end.left + 'px;top:' + this.end.top + 'px;height:' + nextImage.height + 'px;width:' + nextImage.width + 'px',{ 
			duration: this.duration,
			after : function(el) {
				that.expander.morph('height:'+currentLi.getHeight()+'px');
			}
			});

		curImage.up().morph('opacity:0',{duration: this.duration});
		nextImage.up().morph('opacity:1',{duration: this.duration});
		g.curImage = g.nextImage;
		
	},
	/*
	 * Bildwechel nach links
	 */
	moveLeft : function(ev,g,repeat) {
		if (g.curImage==0) {
			g.nextImage=g.select('li').length-1;
		} else {
			if (repeat===undefined) {
				g.nextImage = g.curImage-1;
			}
		}
		var nextImage = g.select('li img')[g.nextImage];
		var curImage = g.select('li img')[g.curImage];
		var that = this;
		if (nextImage.src=="") {
			// nachladen
			var loader = new ImageLoader(g.items[g.nextImage].notLoadedsrc);
			loader.loadEvent = function(url, image){
				g.select('li img')[g.nextImage].src = image.src;
				that.moveLeft(ev,g,true);
			}
			loader.load();
			return;
		}		
		this.getImageData(nextImage);
		var currentLi = nextImage.up();
		this.expander.morph('left:' + this.end.left + 'px;top:' + this.end.top + 'px;height:' + nextImage.height + 'px;width:' + nextImage.width + 'px',{ 
			duration: this.duration,
			after : function(el) {
				that.expander.morph('height:'+currentLi.getHeight()+'px');
			}			
			});
		g.select('li')[g.curImage].morph('opacity:0',{duration: this.duration});
		g.curImage = g.nextImage;
		g.select('li')[g.curImage].morph('opacity:1',{duration: this.duration});
	},



	openGallery : function(ev,g) {
		this.closeButton(g);
		this.stopEvent(ev);
		// Hintergrundlayer anzeigen
		this.backLayer.setStyle({left: '0px',top: '0px'});
		this.backLayer.setStyle({width: this.getDocWidth() +'px',height: this.getDocHeight()+'px'});
		this.backLayerLoader.setStyle({top:this.viewport.height()/2+'px'});
		this.backLayerLoaderShow();
		var that = this;
		if (g.img.src=='') {
			// nachladen
			var that = this;
			that.ev = ev;
			that.g = g;
			that.pos = g.img.pos;
			var loader = new ImageLoader(g.img.notLoadedsrc);
			loader.loadEvent = function(url, image){
				that.g.img.src = url;
				that.openGallery(that.ev,that.g);
			}
			loader.load();
			return;
		}
		//@edit 11.11.16: positionen stimmen hier nicht mehr?
		//g.img.pos = this.pos;

		var ul = new Element('ul').update(g.gallery.innerHTML);
		ul.items = g.gallery.items;
		ul.setStyle({'display':'inline-block',cursor:'auto'});
		this.expander.insert({bottom : ul});
		if (ul.select('li').length>1) {
			// pfeil rechts
			this.arrowRight = new Element('div',{'class':'btnRight'});	
			this.arrowRight.hide();
			this.expander.insert({top: this.arrowRight});
			Event.observe(this.expander, 'mousemove', this.galleryArrows.bindAsEventListener(this));
			this.arrowLeft = new Element('div',{'class':'btnLeft'});	
			this.arrowLeft.hide();
			this.expander.insert({top: this.arrowLeft});
			ul.curImage=g.img.pos;//i;
			
			this.arrowRightClick = this.moveRight.bindAsEventListener(this,ul);
			Event.observe(this.arrowRight, 'click', this.arrowRightClick);
			this.arrowLeftClick = this.moveLeft.bindAsEventListener(this,ul);
			Event.observe(this.arrowLeft, 'click', this.arrowLeftClick);
			for (var n=0;n<ul.select('li img').length;n++) {
				ul.select('li')[n].setStyle({'opacity':'0'});
			}
		}
		Event.observe(this.backLayer, 'click', this.backLayerClick);
		Event.observe(document,'keydown',this.ESC);
		this.expander.setStyle({height: '0px', width : '0px'});
		this.stopEvent(ev);
		this.getImageData(g.img);
		var D = document;
		

		//this.expander.update('');
		this.start.x = Event.pointerX(ev);
		this.start.y = Event.pointerY(ev);
		// Expander startstyles
		this.expander.setStyle({zIndex:9999, left: this.start.x + 'px', top: this.start.y+ 'px'});

		if (navigator.userAgent.indexOf("MSIE 7")>0) {
			this.expander.setStyle({clip:'rect(auto)'});
		} else {
			this.expander.setStyle({clip:'auto'});
		}
		var sh = this.objBody.scrollTop;
		this.end.top  = (document.all ? sh : pageYOffset ) + (this.objBody.clientHeight/2) - (g.img.height/2) ;//((self.innerHeight-g.img.height) / 2);
		this.end.left = (document.all ? document.body.scrollLeft : pageXOffset )+ ((Math.max(D.body.clientWidth, D.documentElement.clientWidth)-g.img.width) / 2);
		this.backLayer.show();
		this.expander.morph('left:' + this.end.left + 'px;top:' + this.end.top + 'px;height:' + g.img.height + 'px;width:' + g.img.width + 'px',{ duration: this.duration});
		
		ul.morph('left:' + this.end.left + 'px;top:' + this.end.top + 'px;height:' + g.img.height + 'px;width:' + g.img.width + 'px',{ duration: this.duration});
		var currentLi = this.expander.select('li')[ul.curImage];
		var curImg = currentLi.select('img')[0];
		curImg.height = g.img.height;
		curImg.width = g.img.width;

		this.expander.select('li')[ul.curImage].morph('opacity:1',
			{
				duration: this.duration,
				after : function(el) {
							that.loadingGif.hide();	
							that.backLayerLoader.hide();
							that.expander.morph('height:'+currentLi.getHeight()+'px');
						}	
			});
	},
	
	/*
	 * Schliessen-Button einfügen
	 * item.options.closeButton muss true sein
	 */	
	closeButton : function(item) {
		if (item.options.closeButton) {
			// X oben rechts in die ecke
			var cb = new Element('div');//,{ class : 'closeButton' }); da spinnt der IE
			cb.addClassName('closeButton');
			Event.observe(cb, 'click', this.expanderClick);
			this.expander.insert({top : cb});
		}
	},
	
	simple_expand : function(ev,i) {
		this.activeItem = this.items[i];
		if (this.items[i].gallery) {
			this.openGallery(ev,this.items[i]);
			return;	
		}
		if (ev) {
			this.stopEvent(ev);
		}
		this.before_expand(ev);
		

		if(this.items[i].img.src=='') {
			
			var that = this;
			that.g = this.items[i];
			var loader = new ImageLoader(this.items[i].img.notLoadedsrc);
			loader.loadEvent = function(url, image){
				that.g.img.src = url;
				that.simple_expand(ev,i);
			}
			loader.load();
			return;			
		}


		// Bild in expander laden
		if (this.OuterHTML != '') {
			var dummy = new Element('div').insert(this.items[i].img);
			var dummy2 = this.OuterHTML.replace(/{ITEM}/,dummy.innerHTML);
			dummy = new Element('div').update(dummy2);
			this.expander.insert({bottom : dummy.down()});
		} else {
			this.expander.insert({bottom : this.items[i].img});
		}
		if (this.items[i].title) {
			if (this.TitlePos=='top') {
				this.expander.insert({ top : this.items[i].title});
			} else {
				this.expander.insert({ bottom : this.items[i].title});
			}
			// Breite für den Titel setzen
			this.expander.select('.lbFlickrTitle')[0].setStyle({width:this.expander.getWidth()-8+'px'});
		}

		Event.observe(this.expander, 'click', this.expanderClick);

		this.expand(ev,this.items[i]);
	},
	
	collapse : function() {
		this.btnPreview = null;
		var that = this;
		this.expander.morph('left:' + this.start.x + 'px;top:' + this.start.y + 'px;height:0px;width:0px',{ 
			duration: this.duration,
			after : function () {
				that.expander.update('');
				that.expander.insert({top : that.loadingGif});
				that.expander.setStyle({zIndex:0,height:'',width:'','clip':'rect(0px 0px 0px 0px)'});
				}
			});
		this.backLayer.hide();
		Event.stopObserving(this.backLayer, 'click', this.backLayerClick); 
		Event.stopObserving(this.expander, 'click', this.expanderClick); 
		//document.stopObserving('click', this.ESC);
		Event.stopObserving(document, 'keydown', this.ESC); 
		if (this.arrowRight) {
			Event.stopObserving(this.arrowRight, 'click', this.arrowRightClick);
			Event.stopObserving(this.arrowLeft, 'click', this.arrowLeftClick);
		}
		this.expander.setStyle({cursor:'auto'});
		
	},
	stopEvent: function (ev) {
		
		if (!ev) { // falls IE
			ev = window.Event;
			ev.cancelBubble = true;
			ev.returnValue = false;
		} else {
			ev.preventDefault();
			ev.stopPropagation();
		}
		if(typeof event != 'undefined') {
			if (event.cancelBubble) {
			        event.cancelBubble = true;
			}
			if (event.returnValue) {
			        event.returnValue = false;
			}
			if (event.stopPropagation) {
			        event.stopPropagation();
			}
			if (event.preventDefault) {
			        event.preventDefault();
			}
		}		
	},
	/*
	 * Ermittelt die Gesammthöhe des Documents
	 */
	getDocHeight : function () {
	    var D = document;
	    return Math.max(
	        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
	        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
	        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
	    );
	},
	/*
	 * Ermittelt die Gesammtbreite des Documents
	 */
	getDocWidth : function () {
	    var D = document;
	    return Math.max(
	        Math.max(D.body.scrollWidth, D.documentElement.scrollWidth),
	        Math.max(D.body.offsetWidth, D.documentElement.offsetWidth),
	        Math.max(D.body.clientWidth, D.documentElement.clientWidth)
	    );
	},
	viewport : function () {
		var viewportwidth;
		var viewportheight;
		function __viewportRender(){
		 if (typeof window.innerWidth != 'undefined')
		 {
		      viewportwidth = window.innerWidth,
		      viewportheight = window.innerHeight
		 }
		 else if (typeof document.documentElement != 'undefined'
		     && typeof document.documentElement.clientWidth !=
		     'undefined' && document.documentElement.clientWidth != 0)
		 {
		       viewportwidth = document.documentElement.clientWidth,
		       viewportheight = document.documentElement.clientHeight
		 }
		 else
		 {
		       viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
		       viewportheight = document.getElementsByTagName('body')[0].clientHeight
		 }
		}	
		 return {
		 	height : function() { __viewportRender(); return viewportheight; },
		 	width : function() { __viewportRender(); return viewportwidth; }
		 	
			}			
	}()

});

/* -----------------------------------------------------------------------
 *  Loader für Lytebox
 */
var Lytebox ;// = new ucLytebox();
document.observe('dom:loaded', function(){
	Lytebox = new ucLytebox();
	build("highslide");
	build("idLytebox");
	
});


function build(cssName) {
$$('.'+cssName).each(function(s) {

			if (s.hasClassName('swf')) {
				// w: und h: für übergabe der höhe und breite
				var cssClasses =  $w(s.className);
				var sfwObjectPara = {allowfullscreen: 'true'};
				for (var i=0;i<cssClasses.length;i++) {
					var rx = /w:(\d+)/;
					if(cssClasses[i].match(rx)) {
						sfwObjectPara.width = RegExp.$1;
					} 
					rx = /h:(\d+)/;
					if(cssClasses[i].match(rx)) {
						sfwObjectPara.height = RegExp.$1;
					} 
				}
				var curItem = Lytebox.add(s,{
						type : 'swf',
						url : s.href,
						object : sfwObjectPara,
						params : {
							allowfullscreen : 'true',
							wmode : (s.hasClassName('wmodenone')?'':'transparent'),
							flashvars : 'allowfullscreen=true&amp;enablecsi=1',
							movie: s.href
							}
						});				
				if (s.hasClassName('openStart')) {
					Lytebox.swf_expand(null,curItem.index);
				}
			}  else if (s.hasClassName('ajax')) {
				var curItem = Lytebox.add(s,{type:'ajax',url:s.href});
				if (s.hasClassName('openStart')) {
					Lytebox.ajax_expand(null,curItem.index);
					// cookie?
//					var c = s.className.match(/c:(\w*)/);
//					if (c.length>0) {
//						if (!idTools.Cookie.get(c[1])) {
//							Lytebox.ajax_expand(null,0);
//							idTools.Cookie.set(c[1],1,1);
//						}						
//					}
				}
			} else if (s.hasClassName('html')) {
				var curItem = Lytebox.add(s,{type:'html'});
				if (s.hasClassName('openStart')) {
					// cookie?
					var c = s.className.match(/c:(\w*)/);
					if (c && c.length>0) {
						if (!idTools.Cookie.get(c[1])) {
							Lytebox.html_expand(null,curItem.index);
							idTools.Cookie.set(c[1],1,1);
						}
					} else {
						Lytebox.html_expand(null,curItem.index);
					}
				}
			} else {
				// class 'gallery' muss zusätzlich gesetzt werden!!!!!!!!
				// param 'OuterHTML' zum setzen des äusseren HTML's

				var curItem = Lytebox.add(s,{type:'image',url:s.href});
				if (s.hasClassName('openStart')) {
					// cookie?
					Lytebox.simple_expand(null,curItem.index);
				}
			}
		});	
}


/* ---------------------------------------------------------
 *	loader für Images
 */
function addListener(element, type, expression, bubbling) {
	bubbling = bubbling || false;
	if(window.addEventListener)	{ // Standard
		element.addEventListener(type, expression, bubbling);
		return true;
	} else if(window.attachEvent) { // IE
		element.attachEvent('on' + type, expression);
		return true;
	} else return false;
}

var ImageLoader = function(url){
	this.url = url;
	this.image = null;
	this.loadEvent = null;
};

ImageLoader.prototype = {
	load:function(){
		
		this.image = document.createElement('img');
		var url = this.url;
		var image = this.image;
		var loadEvent = this.loadEvent;
		addListener(this.image, 'load', function(e){
			if(loadEvent != null){
				loadEvent(url, image);
			}
		}, false);
		this.image.src = this.url;
	},
	getImage:function(){
		return this.image;
	}
};