var Gallery = new Class({
	initialize:function(element){

		this.element = element;
		var first = true;
		this.periodical_id = null;
		this.uebersicht_visible = false;
		this.element.setStyle('position','relative');
		this.element.getElements('div.image').each(function(el){
			el.setStyle('position','absolute');
			el.set('morph',{duration:'long'});
			if (first){ first=false;return;}

			el.get('morph').set({'opacity':0});
		});
		this.element.addEvent('mouseenter',this.stop.bind(this));
		this.element.addEvent('mouseleave',this.start.bind(this));

		this.pausecnt = new Element('div',{'style':'position:absolute;top:0px;left:0px;height:15px;opacity:0.7;filter:alpha(opacity=70);background:#005E59;color:#ffffff;z-index:100;padding:5px;text-align:center'});

		this.pause_link = new Element('a',{'href':'#','style':'color:#ffffff'});
		this.pause_link.set('text','Pause / Ãœbersicht');
		this.next_link = new Element('a',{'href':'#','style':'color:#ffffff;position:absolute;top:4px;right:5px'});
		this.next_link.set('text','vor');
		this.prev_link = new Element('a',{'href':'#','style':'color:#ffffff;position:absolute;top:4px;left:5px'});
		this.prev_link.set('text','zurück');
		
		this.pause_link.inject(this.pausecnt);
		this.next_link.inject(this.pausecnt);
		this.prev_link.inject(this.pausecnt);
		this.pausecnt.inject(this.element);

		this.pausecnt.set('slide',{'duration':'500'});
		this.pausecnt.slide('hide');
		
		this.next_link.addEvent('click',this.nextImage.bind(this));
		this.prev_link.addEvent('click',this.prevImage.bind(this));
		this.pause_link.addEvent('click',this.showUebersicht.bind(this));
		
		this.current_image =  this.element.getElements('div.image').filter(function(el){ return el.getStyle('opacity') == 1}).getRandom();
		
		this.uebersicht = null;
		
		this.showImage(this.current_image);
		
	},
	
	showUebersicht:function(){
		this.uebersicht_visible = true;
		uebersicht = this.getUebersicht();
		this.pausecnt.slide('out');
	},
	
	getUebersicht:function(){
		this.uebersicht = new Element('div',{'style':'padding:5px;position:absolute;top:0px;left:0px;z-index:150;'});
		this.uebersicht.setStyles({'width':(this.current_image.getSize().x-5)+"px",'height':(this.current_image.getSize().y-10)+'px','overflow-y':'scroll','overflow-x':'hidden'});
		this.element.getElements('div.image img').each(function(el){
			var cnt = new Element('div',{'style':'width:80px;height:80px;text-align:center;margin:5px;float:left'});
			img = el.clone();
			
			if (el.width > el.height){
				img.width = 80;
				img.height = 80/el.width*el.height;
			} else {
				img.height = 80;
				img.width = 80/el.height*el.width;
			}
			img.setStyles({'cursor':'pointer'});
			img.inject(cnt);
			cnt.inject(this.uebersicht);
			if (el.getParent() == this.current_image){
				img.setStyles({'border':'2px solid #9E264F'});
			}
			cnt.addEvent('click',function(e){
				this.showImage(el.getParent());
				this.uebersicht.destroy();
				this.uebersicht_bg.destroy();
				this.uebersicht_visible = false;
			}.bind(this));
		}.bind(this));
		(new Element('div',{'style':'clear:both;height:1px;'})).inject(this.uebersicht);
		this.uebersicht.inject(this.element);
		this.uebersicht_bg = (new Element('div',{'style':'background:#005E59;opacity:0.7;filter:alpha(opacity=70);position:absolute;left:0px;top:0px;z-index:10;width:'+(this.current_image.getSize().x)+'px;height:'+(this.current_image.getSize().y)+'px'}));
		this.uebersicht_bg.inject(this.element);
		return this.uebersicht;
	},
	
	showImage:function(image){
		var el = this.current_image;
		var el1 = image;
		
		if (el != el1){
			el.morph({'opacity':0});
			el1.morph({'opacity':1});
			this.current_image = el1;
		}
	
		var description = el1.getElement('span.description')
		if ($chk(description)){
			var description_cnt = document.getElement('div#gallery_description');
			if ($chk(description_cnt)){
				description_cnt.set('html',description.get('html'));
				description.setStyle('display','none');
			}
		} else {
			var description_cnt = document.getElement('div#gallery_description');
			if ($chk(description_cnt)){
				description_cnt.set('text','');
			}
		}
		try{
			e.stop()
		} catch(e){}
	},
	
	
	nextImage:function(e){
		var el = this.current_image;
		var el1 = el.getNext('div.image');
		if (!$chk(el1)){
			el1 = this.element.getElements('div.image')[0];
		}
		el.morph({'opacity':0});
		el1.morph({'opacity':1});
		this.current_image = el1;
	
		var description = el1.getElement('span.description')
		if ($chk(description)){
			var description_cnt = document.getElement('div#gallery_description');
			if ($chk(description_cnt)){
				description_cnt.set('html',description.get('html'));
				description.setStyle('display','none');
			}
		} else {
			var description_cnt = document.getElement('div#gallery_description');
			if ($chk(description_cnt)){
				description_cnt.set('text','');
			}
		}
		try{
			e.stop()
		} catch(e){}
	},
	
	prevImage:function(e){
		var el = this.current_image;
		var el1 = el.getPrevious('div.image');
		if (!$chk(el1)){
			el1 = this.element.getElements('div.image').getLast();
		}
		el.morph({'opacity':0});
		el1.morph({'opacity':1});
		this.current_image = el1;
		
		var description = el1.getElement('span.description')
		if ($chk(description)){
			var description_cnt = document.getElement('div#gallery_description');
			if ($chk(description_cnt)){
				description_cnt.set('html',description.get('html'));
				description.setStyle('display','none');
			}
		} else {
			var description_cnt = document.getElement('div#gallery_description');
			if ($chk(description_cnt)){
				description_cnt.set('text','');
			}
		}
		e.stop()
	},
	
	doswitch:function(){
		this.nextImage(null);
	
	},
	
	start:function(){
		if (!this.uebersicht_visible){
			this.pausecnt.slide('out');
			$clear(this.periodical_id);
			this.periodical_id = this.doswitch.periodical(5000,this);
		}
	},
	
	stop:function(){
		this.pausecnt.setStyles({'width':(this.current_image.getElement('img').getSize().x-10)+"px"});
		this.pausecnt.getParent().setStyles({'width':(this.current_image.getElement('img').getSize().x)+"px"});
		if (!this.uebersicht_visible){
			this.pausecnt.slide('in');
		}
		$clear(this.periodical_id);
	}
	
	
	
});