var Galery = new Class({
	options: {
		duration: 400,
		displayed: 5,
		current: 0
	},
	initialize: function(container){
		this.container = container;
		this.thumbs = container.getElements('.thumbs img');
		this.thumbs.each( (function(item, index){
			item.addEvent('click', this.change.bind(this, item));						   
		}).bind(this));
		
		this.thumbSize = this.thumbs[0].getSize().x + 2;
		
		this.total = this.thumbs.length;
		this.current = this.options.current;
		this.currentPix = this.current;
		
		// Browse directly
		this.browse = this.container.getElement('.browse');
		this.browse.el = this.browse.getElements('div');
		this.browse.el.each( (function(item, index){
				if( !index ) item.addClass('none');
				item.addEvent('click', this.browseFN.bind(this, item));																		
			}).bind(this)
		);
		
		// left and right on nav bar
		this.thumbsBtn = this.container.getElements('.thumbs .left, .thumbs .right');
		if( this.thumbs.length <= this.options.displayed ) this.thumbsBtn[1].addClass('none');
		this.thumbsBtn.each( (function(item, index){
				if( !index ) item.addClass('none');
				item.addEvent('click', this.move.bind(this, item));																		
			}).bind(this)
		);
		
		this.loading = this.container.getElement('.load');
	},
	browseFN: function( item ){
		var next = this.currentPix + item.get('id').toInt();
		this.change(this.thumbs[ next ]);
		if( this.current + 4 < next || this.current  > next ) 
			this.move(this.thumbsBtn[ this.browse.el.indexOf(item) ]);

	},
	change: function(pict){
		this.thumbs.removeClass('selected');
		pict.addClass('selected');
		this.currentPix = this.thumbs.indexOf(pict);
		this.loading.setStyle('visibility', 'visible');
		var url = pict.get('src').replace('thumb', 'big');		
		var changed = new Asset.image(url, {
			'onload': (function(element){
				this.loading.setStyle('visibility', 'hidden');
				this.container.getElement('img').destroy();
				img = element.inject(this.browse ,'after');
			}).bind(this)
		});
		if( this.currentPix > 0 ) 
			this.browse.el[0].removeClass('none');
		else 
			this.browse.el[0].addClass('none');
		if( this.currentPix == this.thumbs.length - 1) 
			this.browse.el[1].addClass('none');
		else
			this.browse.el[1].removeClass('none');		
	},
	move: function(item){

		this.thumbsBtn.removeClass('none');
		
		var clicked = item.get('id').toInt();

		if( (!this.current && clicked < 0 ) || 
			( this.current == this.total - this.options.displayed && clicked > 0) )
			return;
		
		var from = this.thumbs[0].getParent().getStyle('margin-left').toInt();
		var to = this.current + ( this.options.displayed * clicked );
		
		if( to + this.options.displayed >= this.total  ){
			to = this.total - this.options.displayed;
			this.thumbsBtn[1].addClass('none');
		}else{
			if( to <= 0 ){ 
				to = 0;
				this.thumbsBtn[0].addClass('none');
			}
		}
		this.current = to;
		to = to * this.thumbSize * -1;

		new Fx.Morph( this.thumbs[0].getParent(), {
			duration: this.options.duration
		}).start({
			'margin-left': [from, to]
		});
	}
});