tojo = new Class({

	config: {
		backgroundOpacity: 0.8,
		infoOpacity: 0.8,
		iptcFile: 'libs/tojo/iptc.php',
		displayThumbs: false
	},
	
	iptc: [
		{id: "2#105", name: "headline"},
		{id: "2#120", name: "caption"},
		{id: "2#101", name: "country"},
		{id: "2#090", name: "city"},
		{id: "2#055", name: "date"},
		{id: "2#020", name: "category"},
		{id: "2#025", name: "tags"},
		{id: "2#080", name: "author"}
	],
	
	list: {
		i: 0,
		data: []
	},

	initialize: function(){
		
		// dodaję do drzewa DOM stukturę TOJO Viewera
				
		this.background = new Element('div', {'class': 'tojoBackground'});
		this.thumbnails = new Element('div', {'class': 'tojoThumbnails', html: '<div></div>'});
		this.info = new Element('div', {'class': 'tojoInfo', html: '<ul class="iptc"></ul>'});
		this.info.iptc = this.info.getElement('ul');
		this.photo = new Element('div', {'class': 'tojoPhoto'});
		this.photo.innerHTML = '<div id="img"></div><div class="tojoDesc"><div class="tojoButtons"><a href="#" id="prev">&laquo; poprzedni</a> | <a href="#" id="next">następny &raquo;</a> | <a href="#" id="close">koniec</a></div><span id="title"></span><br class="tojoClear"/></div>'
		this.loader = new Element('div', {'class': 'tojoLoader'});
		this.thumbnailsdiv = this.thumbnails.getElement('div');
		this.closeBtn = new Element('a', {'class': 'tojoClose'});
			
		this.background.inject($(document.body), 'top');
		this.info.inject($(document.body), 'top');
		this.photo.inject($(document.body), 'top');
		this.loader.inject($(document.body), 'top');
		//this.closeBtn.inject($(document.body), 'top');
		this.thumbnails.inject($(document.body), 'top');
		
		// tworzę animacje
		
		this.background.fx = new Fx.Tween(this.background, { duration: 'short' });
		this.info.fx = new Fx.Tween(this.info, { duration: 'short' });
		this.thumbnails.fx = new Fx.Tween(this.thumbnails, {});
		this.loader.fx = new Fx.Tween(this.loader, {duration: 'short'});
		this.photo.fx = new Fx.Tween(this.photo, {duration: 'short'});
		
		// ustalam wymiary i położenia
		
		this.setEl();
		window.addEvent('resize', function(){ tojo.setEl(); });
		
		// przemierzam drzewo DOM w poszukiwaniu linków skojarzonych z TOJO Viewerem
		
		$$('a').forEach(function(el){
			if(p = el.getProperty('rel')){
				if(p.test("^tojoViewer:(\w)*"))
					el.addEvent('click', function(e){
						
						// anuluję akcję
						new Event(e).stop();
						
						// otwieram TOJO Viewer
						r = new RegExp(/^tojoViewer:(\w*)/).exec(this.getProperty('rel'));
						tojo.open(r[1]);
						tojo.loadPhoto(el.href);
						
					});
			}
		});
		
		// przełączanie zdjęć
		this.photo.getElement('#prev').addEvent('click', function(e){
			new Event(e).stop();
			if(tojo.list.i > 0) tojo.list.i--;
			else tojo.list.i = tojo.list.data.length-1;
			tojo.loadPhoto(tojo.list.data[tojo.list.i][0]);
		});
		this.photo.getElement('#next').addEvent('click', function(e){
			new Event(e).stop();
			if(tojo.list.i < tojo.list.data.length-1) tojo.list.i++;
			else tojo.list.i = 0;
			tojo.loadPhoto(tojo.list.data[tojo.list.i][0]);
		});
		
		// zamykanie
		this.closeBtn.addEvent('click', function(e){
			new Event(e).stop();
			tojo.close();
		});
		this.photo.getElement('#close').addEvent('click', function(e){
			new Event(e).stop();
			tojo.close();
		});
		
	},
	
	
	setEl: function(){
		
	},
	
	
	
	open: function(set){
	
		// wczytanie zbioru
		
		this.hideEl(this.thumbnails);		
		this.load(set);
		
		// animacje
	
		this.background.fx.set('opacity', 0);
		this.background.fx.start('opacity', 0, this.config.backgroundOpacity);
		this.background.setStyle('display', 'block');
		
		if(this.config.displayThumbs){
			this.thumbnails.fx.set('top', -1*this.thumbnails.getSize().y);
			this.thumbnails.fx.start('top', -1*this.thumbnails.getSize().y, 0);
			this.showEl(this.thumbnails);
		}
		
		this.info.fx.set('opacity', this.config.infoOpacity);
		this.closeBtn.setStyle('display', 'block');
	},
	
	
	
	
	close: function(){
		
		this.background.fx.start('opacity', this.config.backgroundOpacity, 0);
		
		if(this.config.displayThumbs){
			this.thumbnails.fx.start('top', 0, -1*(this.thumbnails.getSize().y+this.thumbnails.getStyle('margin-top').toInt()));
		}
		
		this.photo.fx.start('opacity', 1, 0);
		this.info.fx.start('opacity', this.config.infoOpacity, 0);
		this.closeBtn.setStyle('display', 'none');
	},
	
	
	sets: [],
	load: function(set){
	
		this.thumbnailsdiv.innerHTML = '';
		this.thumbnailsdiv.setStyle('width', 0);
	
		if(!this.sets[set])
			this.sets[set] = $$('a[rel=tojoViewer:'+set+']');
			
		this.sets[set].forEach(function(el){
			src = new RegExp(/^url\((.*)\)/).exec(el.getParent().getStyle('background-image'));
			src = src[1];
			src = src.replace(',31',',1');
			thumb = new Element('a',{
				'href': el.href,
				'class': 'tojoThumb',
				'events': {
					'click': function(e){
						new Event(e).stop();
						tojo.loadPhoto(this.photo);
					}
				},
				html: '<img src="'+src+'" alt="" />'
			});
			thumb.photo = el.href;
			tojo.list.data[tojo.list.data.length] = Array(el.href,el.title);
			
			thumb.inject(tojo.thumbnailsdiv);
			tojo.thumbnailsdiv.setStyle('width', tojo.thumbnailsdiv.getSize().x + thumb.getSize().x);
		});
	
	},
	
	
	
	
	
	loadPhoto: function(src){
	
		// ustawiam indeks
		for(i=0;i<this.list.data.length;i++){
			if(this.list.data[i][0] == src){
				this.list.i = i;
				break;
			}
		}
	
		// pokazuję loader
		
		this.thumbnailsdiv.getElements('a').forEach(function(el){ el.removeClass('active'); });
		this.thumbnailsdiv.getElement('a[href='+src+']').addClass('active');
		this.hideEl(this.photo);
		this.photo.setStyle('padding-left', 0);
	
		this.hideEl(this.loader);
		this.setPosition(this.loader);
		this.loader.fx.set('opacity', 0);
		this.loader.fx.start('opacity', 0, 1);
		this.showEl(this.loader);
		
		//this.loadInfo(src);
		
		photo = new Image();
		photo.onload = function(){
			tojo.photo.getElement('#img').innerHTML = '<img src="'+this.src+'" />';
			tojo.photo.getElement('.tojoDesc').setStyle('width',tojo.photo.getElement("#img img").getSize().x-16);
			tojo.photo.getElement('#title').innerHTML = tojo.list.data[tojo.list.i][1];
			tojo.showEl(tojo.photo);
			tojo.photo.fx.set('opacity', 1);
			tojo.photo.setStyle('display', 'block');
			tojo.setPosition(tojo.photo, 'photo');
			tojo.loader.setStyle('display', 'none');
		};		
		this.photo.onclick = function(){
			if(tojo.list.i < tojo.list.data.length-1) tojo.list.i++;
			else tojo.list.i = 0;
			tojo.loadPhoto(tojo.list.data[tojo.list.i][0]);
		}
		photo.src = src;		
		
	},
	
	
	loadInfo: function(src){
	
		this.hideEl(this.info);
		new Request.JSON({url: this.config.iptcFile, onComplete: function(info){
			tojo.info.iptc.innerHTML = '';
			
			if(info.status){
				if(info.status == "error")
					alert("Error!\nCan't read the IPTC of this photo!");
			} else {					
				tojo.iptc.forEach(function(i){
					info[i.id] = tojo.parseIptc(i.id, info[i.id]);
					if(info[i.id])
						tojo.info.iptc.innerHTML += '<li><div class="tag">'+i.name + ':</div><div class="value">' + info[i.id]+"</div><br/></li>";
				});
				tojo.info.fx.set('top', tojo.thumbnails.getSize().y);
				tojo.info.fx.set('left', -1*tojo.info.getSize().x);
				tojo.info.fx.start('left', -1*tojo.info.getSize().x, 0);
				tojo.showEl(tojo.info);
			}
			tojo.photo.fx.start('padding-left', 0, tojo.info.getSize().x/2);
			
		}}).post({'src': src});
	
	},
	
	
	parseIptc: function(iptec, value){
	
		if(!value)
			return null;
	
		value = value.join(", ");
	
		// parsuję dane z IPTC - tutaj możesz dodać swoje funkcje
	
		switch(iptec){
			case "2#055":
				return value[0]+value[1]+value[2]+value[3]+"-"+value[4]+value[5]+"-"+value[6]+value[7];
			break;
			default:
				return value;
			break;		
		}
	
	},
	
	setPosition: function(el, mode){
	
		a = el.getPosition();
		b = el.getSize();
		w = window.getSize();
		c = ((tojo.config.displayThumbs)?this.thumbnails.getSize():{x:0,y:0});
		
		switch(mode){
			case "photo":
				l = (w.x-b.x)/2;
				t = (w.y-c.y-b.y)/2+c.y;
				
				el.setStyles({
					'left': (l>0)?l:0,
					'top': (t>c.y)?t:c.y+10
				})
			break;
			case "center":
			default:
				el.setStyles({
					'left': (w.x-b.x)/2,
					'top': (w.y-b.y)/2
				})
			break;
		}
		
	
	},
	
	// funkcje warstw
	
	hideEl: function(el){
		el.setStyles({
			'display': 'block',
			'visibility': 'hidden'
		});
	},
	
	showEl: function(el){
		el.setStyles({
			'visibility': 'visible'
		});
	}

})


window.addEvent('domready', function(){ tojo = new tojo; });