/**
 * ImageLightbox
 *
 * Zeigt ein Bild oder ein Set von mehreren Bildern in einer Lightbox an
 */
var imageLightBox = Class.create(lightBox, {

	/**
	 * Image-Set
	 *
	 */
	_imageset: [],

	/**
	 * Container für das Bild
	 * 
	 */
	_lbcontent: null,

	/**
	 * Konstruktor
	 * 
	 */
	initialize: function($super){
		$super('imageLightBox');
	},

	/**
	 * Initialisiert alle Bilder, die in einer Lightbox angezeigt werden sollen
	 *
	 * Bsp.:
	 * 
	 * Einzelnes Bild:
	 * <a rel="lightbox" href="#"><img src="image.jpg" alt="" /></a>
	 *
	 * Bilderreihe (Set):
	 * <a rel="lightbox.set" href="#"><img src="image.jpg" alt="" /></a>
	 * <a rel="lightbox.set" href="#"><img src="image2.jpg" alt="" /></a>
	 * 
	 */
	initLinks: function(){
		
		$$('a[rel^=lightbox]').invoke('observe', 'click', function(e){
			var img = e.findElement('a[rel^=lightbox]').down('img');
							
			if (img) {
				e.stop();
				this.open(img);
			}
		}.bind(this));
		
	},

	/**
	 * Öffnet die Lightbox
	 *
	 * @param {lightBox} $super Parent
	 * @param {Object} img Bild-Element
	 */
	open: function($super,img){
		$super();

		var c = '<img class="lightBoxClose" src="gfx/lightbox.close.gif" alt="Schließen" title="Schließen" />';
		var n = null;
		var p = null;

		// Image-Set?
		var rel = img.up().rel;
		
		if(rel.match(/^lightbox\.(.+)/)){
			this._imageset = $$('a[rel=lightbox.' + RegExp.$1 + ']');
			var pos = 0;
			while(this._imageset[pos].down('img').src !== img.src){
				pos++;
			}

			if(pos < this._imageset.length - 1){
				n = new Element('img', {
					"class": "lightBoxNext",
					src: "gfx/lightbox.next.gif",
					alt: "Nächstes Bild",
					titel: "Nächstes Bild"
				}).observe('click', function(e){
					this.open(this._imageset[pos+1].down('img'));
					e.stop();
				}.bind(this));
			}

			if(pos > 0){
				p = new Element('img', {
					"class": "lightBoxPrev",
					src: "gfx/lightbox.prev.gif",
					alt: "Vorheriges Bild",
					titel: "Vorheriges Bild"
				}).observe('click', function(e){
					this.open(this._imageset[pos-1].down('img'));
					e.stop();
				}.bind(this));
			}
		}
		
		this._lb.observe('click',this.close.bind(this));
		
		this._center();
		
		var i = $(new Image());
		i.onload = function(){
			this._lb.update(c);

			if(!this._lbcontent){
				this._lbcontent = new Element('div').addClassName('lightBoxContent');
			}
			
			this._lb.insert(this._lbcontent.update(i)).setStyle({
				width: i.getWidth() + 40 + "px",
				height: "auto"
			});

			if(n || p){
				var pos = i.positionedOffset();

				/* FIXME:
				 * pos.left ist im IE8 und Opera kaputt
				 * https://prototype.lighthouseapp.com/projects/8886/tickets/188-element-cumulativeoffset-and-positionedoffset-need-to-check-for-offsettop-and-offsetleft-bugs
				 */
								
				if(p){
					this._lb.insert(p.setStyle({
						top: pos.top + 100 + "px",
						left: "20px"
					}));
				}
				
				if(n){
					this._lb.insert(n.setStyle({
						top: pos.top + 100 + "px",
						left: 20 + i.getWidth() - 45 + "px"
					}));
				}

			}

			this._center();
		}.bind(this);

		i.title = img.title;
		i.src = img.src.replace(/_t/,'');
	}
	
});