var Gallery = new Class
({
	galleryElements: new Array(),
	
	position: 0,
	gallery: null,
	image: null,
	page: null,
	galleryDesc:  new Array(),
	
	initialize: function(galleryBox,pageBox)
	{
		if(!$(galleryBox))
		{
			this.error = 'brak galerii';
			return 0;
		}
		
		if($(pageBox))
		{
			this.page = $(pageBox);
			this.pageSize = this.page.getSize();
		}
		
		this.gallery = $(galleryBox);
		
		var galleryElements = this.gallery.getElements('.image');
		
		for(var i=0; i<galleryElements.length; i++)
		{
			var img = galleryElements[i].getElement('img');
			var desc = galleryElements[i].getElement('.desc').get('html');
			
			var id = img.get('id');
			this.galleryDesc[i] = desc;
			this.addElement(id);
			
			img.addEvent('click', this.showGallery.bind(this,id));
		}
		
		this.__build();
		
		//this.showGallery(this.galleryElements[0]);
	},
	
	__build: function()
	{
		this.bigImageContainer = new Element('div',{'class':'bigImageContainer hide'})
		this.bigImageContainer.inject(this.page);
		
		var menu = new Element('div',{'class':'menuImageContainer'})
		this.desc = new Element('div',{'class':'descImageContainer'})
		
		menu.inject(this.bigImageContainer)
		
		this.image = new Element('img');
		this.image.inject(this.bigImageContainer);
		this.desc.inject(this.bigImageContainer);
		
		var previous = new Element('span',{'text':'<< Poprzednie'}).inject(menu)
		var close = new Element('span',{'text':'Zamknij'}).inject(menu)
		var next = new Element('span',{'text':'Następne >>'}).inject(menu)
		
		close.addEvent('click', this.hideGallery.bind(this))
		previous.addEvent('click', this.previousElement.bind(this))
		next.addEvent('click', this.nextElement.bind(this))
		
		this.shadow = new Element('div',{'class':'imageShadow hide'});
		this.shadow.inject(this.page);
		
		this.__addEvents();
	},
	
	__addEvents: function()
	{	
		this.image.addEvent('load', this.__bigImageContainerPosition.bind(this))	
	},
	
	addElement: function(id)
	{
		this.galleryElements.push(id);
	},
	
	showGallery: function(id)
	{
		this.hideGallery();
		
		this.bigImageContainer.removeClass('hide');
		this.position = this.__getPositionById(id)
		
		this.shadow.setStyle('width', this.pageSize['x']);
		this.shadow.setStyle('height', this.pageSize['y']);
		
		this.shadow.removeClass('hide');
		
		this.__setImage(id)
		window.scrollTo(0, 0);

		this.bigImageContainer.removeClass('hide');
	},
	
	__setImage: function(id)
	{
		this.image.set('opacity','0');
		
		this.image.set('src','uploads/images/big/'+id);
		
		
		//this.__bigImageContainerPosition()
	},
	
	hideGallery: function()
	{
		if(this.bigImageContainer)
		{
			this.bigImageContainer.addClass('hide');
		}	
		this.shadow.addClass('hide');
		this.gallery.setStyle('height','auto');
	},
	
	nextElement: function()
	{
		this.position++;
		this.__checkPosition();
		this.__setImage(this.galleryElements[this.position])
	},
	
	previousElement: function()
	{
		this.position--;
		this.__checkPosition();
		this.__setImage(this.galleryElements[this.position])
	},
	setDesc: function(desc)
	{
		this.desc.set('html',desc);
	},
	__checkPosition: function()
	{
		if(this.position < 0)
			this.position = this.galleryElements.length - 1;
		
		if(this.position >= this.galleryElements.length)
			this.position = 0;
	},
	
	__getPositionById: function(id)
	{
		for(var i=0; i<this.galleryElements.length; i++)
		{
			if(this.galleryElements[i] == id)
				return i;
		}
		
		return 0;
	},
	
	__bigImageContainerPosition: function()
	{
		var size = this.bigImageContainer.getSize();
		var left = (this.pageSize['x'] - size['x'])/2;
		
		this.bigImageContainer.setStyle('top','100px');
		//this.bigImageContainer.setStyle('left',left+'px');
		
		this.bigImageContainer.tween('left', left);
		
		this.image.fade(1)

		this.setDesc(this.galleryDesc[this.position]);
		//alert('1');
		
		//var myFx = new Fx.Tween(this.image);
		//myFx.start('opacity', '100');

		
		
	}

	
})