/**
 * @author Eike Pierstorff 
 *
 * Gallery-Skript . Benötigt Mootools 1.2+
 *
 * Verwandelt eine Unordered List in eine Bildgalerie. Die Items werden
 * dazu via CSS aufeinandergelegt und dann nacheinander sichtbar gemacht.
 *   
 * 	#gallery li {
 *		position:absolute;
 *		height:130px;
 *	}
 *	
 * <ul id="gallery">
 *	<li><img width="154" height="100" src="files/jpg1/clouds3_175x140.jpg" /></li>
 *	<li><img width="154" height="100"  src="files/jpg1/mauritius-05_small.jpg" /></li>
 *	<li><img width="154" height="100"  src="files/jpg1/aegeri-lake-switzerland_small1.jpg" /></li>	
 *	<li><img width="154" height="100" src="files/jpg1/clouds3_175x140.jpg" /></li>
 *	<li><img width="154" height="100"  src="files/jpg1/mauritius-05_small.jpg" /></li>
 *	<li><img width="154" height="100"  src="files/jpg1/aegeri-lake-switzerland_small1.jpg" /></li>							
 *</ul>
 *
 */
var kakoii_gallery = new Class({
    Implements: [Options],
    options: {
        galleryname: 		'slideshow',						
		offsetZindex: 		1         
	},
	
    initialize: function(options){
		
		this.setOptions(options);  
		this.ImgPath = ""; // current url 	      
		this.gallery = $(this.options.galleryname);
			
		if(!$chk(this.gallery)) { // wenn es keine Galerie gibt steigen wir aus
		
			return;
		}
				
		this.galleryItems = this.gallery.getElements('li');
	
				
		this.count = this.galleryItems.length;   
		z = this.options.offsetZindex; // z-index 
		this.galleryItems.each(function(n) {
			this._setTween(n,1000);
			n.setStyle('opacity',0); 
			n.setStyle('z-index',z++); // damit ist das erste Bilder der Liste auch das erste Bild der Galerie
		}, this);
	  	
				
		this.galleryItems[0].setStyle('opacity',1);	
		
		if (this.galleryItems.length < 2) { // Wenn es weniger als 2 Bilder gibt muss nichts rotieren
			return;
		}

		this.navigation();	
		$("curnav0").addClass('active');	
		// this.rotationTimer = this.rotate.periodical(6000, this);			
	},
	
	navigation: function() {		

		wrapper = new Element('div');		
		wrapper.set('id','wrapper');
		navContainer = new Element('div');
		navContainer.set('id','kakoii_gallery_navContainer');
		navContainer.inject(wrapper);
		
		navArea 	=  new Element('div');
		navArea.set('id','kakoii_gallery_navArea');
					
   		var prevLnk = new Element('a');
		prevLnk.set("html","&laquo;");
		prevLnk.set("id","kakoii_gallery_prev");
       
   		$(prevLnk).addEvent('click', function(e){
			  this.previous();	
         }.bind(this));
		 	
		$(prevLnk).inject(navArea); 	
			
		var curnav = new Element('span');
		curnav.set('id','kakoii_gallery_curnav');
	
		lnks = new Array();
		for(i=0;i<this.count;i++) {			
			lnks[i] = new Element('a');	
			lnks[i].setProperties({
				href: '#',
				html: (i+1),
				id:	   'curnav' + i	
			})	
		}
   		
		lnks.each(function(lnk) {
			lnk.addEvent('click', function(e){ 				
				this.clr();		   		
		   		this.byNum(parseInt(lnk.get("html"))-1);	
				$$('#curnav a').removeClass('active');
				lnk.addClass('active');
				return false;	 						        
        	}.bind(this)); 	
			
			lnk.inject(curnav);					
		}.bind(this))

		$(curnav).inject(navArea); 	
						
   		var nextLnk = new Element('a');
		nextLnk.set("html","&raquo;");
		nextLnk.set("id","kakoii_gallery_next");        
		
   		$(nextLnk).addEvent('click', function(e){ 		   
		   this.next();		 						        
        }.bind(this));           
		
		$(nextLnk).inject(navArea); 	
					
		wrapper.wraps(this.gallery);
		navContainer.inject(wrapper);
		navArea.inject(navContainer);
		
	},
	
	show: function(index) {
		$$('#kakoii_gallery_curnav a').removeClass('active');
		$("curnav"+index).addClass('active');		
		this.galleryItems[index].get('tween').start(0,1);
		// swf = this.galleryItems[index].getElements('object');
		
	},
	
	hide: function(index) {				
		$$('#kakoii_gallery_curnav a').removeClass('active');
		$("curnav"+index).addClass('active');		
		this.galleryItems[index].get('tween').start(1,0);
	},
	
	next: function() {
		this.clr();	
		offset = this._getCur();		
		offset++;
				
		if (offset  >= (this.count)) {
			  offset  = 0;
			  this.hide(this.count-1);	
		}	

		if($chk(this.galleryItems[offset].getPrevious())) {
			this.hide(offset -1);
		}
	
		this.show(offset);
	},
	
	previous: function() {
		this.clr();		
		offset  = this._getCur();
		offset--;
		
		if (offset < 0) {
			  offset = (this.count-1);	
			  this.hide(0);
		}
		
		if($chk(this.galleryItems[offset].getNext())) {
			 this.hide(offset+1);	
		} else {
			this.hide(0);
		}

		this.show(offset);
	 
	},
	
	byNum: function(index) {
		this.clr();		
		offset  = this._getCur();

		this.hide(offset);
		this.show(index);
	 
	},	
	
	clr: function() {
		 $clear(this.rotationTimer);				
	},
	
	rotate: function() {
		offset  = this._getCur();	
		offset++;
		if (offset >= (this.count)) {
			offset = 0;
		}
		if($chk(this.galleryItems[offset].getPrevious())) {
			this.hide(offset-1);			 
		} else if($chk(this.galleryItems.getLast())) {
			this.hide(this.count-1);	
		}				
		this.show(offset);	
		
	},
	
	_setTween: function(obj,dur) {
		obj.set('tween', {
            property: 'opacity',
            duration: dur,
			onComplete: function() {
				// this.pagecount();
			}.bind(this)
        },this);
	},
	
	_getCur: function() {
		for(i=0,l=this.galleryItems.length;i<l;i++) {
			op = this.galleryItems[i].getStyle('opacity');
			if(op > 0.5)
				return i;
		}
		return 0;
	}	
});

window.addEvent('domready', function(){
	if(document.getElement('ul') !== null) {
		document.getElement('ul').set('id','slideshow');		
	}
	kakoii_gal = new kakoii_gallery();
});