/* Rheinantik Gallery
 * 
 * 2009 - Martin Tillmann <mtillmann@gmail.com> / Mediamädel
 * */

String.implement({
	
	img : function(){
		return this.split("/").pop().substr(1);
	},
	
	path : function(){
		var tmp = this.split("/");
		tmp.pop()
		return tmp.join("/")+"/";
	}
	
});


var ragal = new Class({
	
	elem : null,
	id : null,
	target : null,
	path : null,
	pics : [],
	pcount : 0,
	
	initialize : function($elm,$id)
	{
			this.elem = $elm;
			this.id = $id;
			this.elem.getElements('img').each(function(item,index){
				
				//this.pics[item.get('src').img()] = index;
				item.store('pid',index);
				this.pics.push(item.get('src').img());
				this.path = item.get('src').path();
				//this.pcount++;
			},this);
			
			
			
			this.elem.getElements('img').store('gid',this.id).addEvents(
			{
				click : function()
				{
					rags[this.retrieve('gid')].appear(this);
				}
			});
			
	},
	
	appear : function($img)
	{
		curgal = this.id;
		this.target = $img.retrieve('pid');
		
		
		$("blackout").setStyles({
				'opacity' : 0,
				'display' : 'block',
				'height' : $(window).getScrollSize().y
		});
		
		$("blackout").set("morph",{onComplete : function()
		{
			$$("#galbox img").setStyle('display','block');
			rags[curgal].setup();
			
		}}).morph({'opacity':0.7});
			
	},
	
	setup : function()
	{
			
			var docCoords = $(document.body).getCoordinates();
			
			
			$("galbox").setStyles({
					width:200,
					left:(docCoords.width - 200) * 0.5,
					height:0,
					display:'block',
					top : $(window).getScroll().y + 100
				}).set('morph',{onComplete : function()
			{
				rags[curgal].loadAndShow();
			}}).morph({'height':200});
	},
	
	loadAndShow : function()
	{
		
		
		new Asset.image(this.path+"f"+this.pics[this.target], {id: 'tmp', title: 'tmp', onload: function()
		{
				
				var docCoords = $(document.body).getCoordinates();
				
				$("galbox").set('morph',{img : this, onComplete : function(){
					$("galbox").getElement("img").set({
						'src' : this.options.img.src,
						'height' : this.options.img.height,
						'width' : this.options.img.width
						}).set('morph',{onComplete : $empty}).morph({opacity:1});

		
		
		
						$("blackout").setStyles({
								'height' : $(window).getScrollSize().y
						});
						
						
				}}).morph({
					left:(docCoords.width - (this.width + 20)) * 0.5,
					width : this.width + 20,
					height : this.height + 40
				});
		}});

	},
	
	step : function($step)
	{
		this.target += $step;
		this.target = this.target < 0?this.pics.length -1:this.target == this.pics.length?0:this.target;
		
		$("galbox").getElement("img").set('morph',{
			
			onComplete : function()
			{
				rags[curgal].loadAndShow();
				this.element.set('width',100);//ie fix
			}
			
			}).morph({opacity:0});
		
		

	},
	
	close : function()
	{
		$$("#blackout, #galbox").setStyle("display","none");
		$$("#galbox img")[0].set({
			"src":"gfx/blank.gif",
			'width':180
		});
		curgal = null;
	}
	
	
	
	
	
	
});

var rags = [];
var curgal = null;

window.addEvent('load',function(){
	
	
	//html für bg/box!
	if($$(".infobox .gallery .thumbs").length > 0)
	{
		var blackout = new Element("div",{
			'id':'blackout',
			'events' : { click : function(){
				
				rags[curgal].close();
		
				
		}}}).inject($(document.body));
		
		var galbox = new Element("div",{
			'id':'galbox'
		}).inject($(document.body));

		var img = new Element("img",{
			src : 'gfx/blank.gif'
		}).inject($("galbox"));

		var prevbtn = new Element("a",{
			'id':'prevbtn',
			'href' :'#',
			'text' : 'vorheriges',
			'events' : { click : function(e){
				e.stop();
				rags[curgal].step(-1);
		
				
		}}
		}).inject($("galbox"));
		
		var nextbtn = new Element("a",{
			'id':'nextbtn',
			'href' :'#',
			'text' : 'n\u00E4chstes',
			'events' : { click : function(e){
				e.stop();
				rags[curgal].step(1);
		
				
		}}
		}).inject($("galbox"));

		var closebtn = new Element("a",{
			'id':'closebtn',
			'href' :'#',
			'text' : 'schliessen',
			'events' : { click : function(e){
				e.stop();
				rags[curgal].close();
		
				
		}}
		}).inject($("galbox"));
		
		$$(".infobox .gallery .thumbs").each(function(item,index){
			rags.push(new ragal(item,index));
		});
	}
	
});