var BMSlideshow = new Class({
	Implements: [Options, Events],
	options: {
		width: 450,
		fullWidth: 800,
		thumbSize: 50
	},
	
	images: [],
	
	initialize: function(el, options){
		this.setOptions(options);
		
		this.create(el);
	},
	
	init: function(){
		// preloading
		var done = 0;
		var complete = function(){
			done++;
			if(done === this.images.length){
				this.createThumbs();
			}
		};
		
		this.images.each(function(image){
			this.preload(image, complete.bind(this));
		}, this);
	},
	
	create: function(el){
		this.wrapEl = document.id(el).addClass('bm-slideshow-wrap').setStyle('width', this.options.width);
		this.imageWrapEl = new Element('div.bm-slideshow-image').setStyle('opacity', 0).inject(this.wrapEl);
		this.thumbWrapEl = new Element('ul.bm-slideshow-thumb').setStyle('opacity', 0).inject(this.wrapEl);
		this.loadingEl = new Element('div.bm-slideshow-loading', { html: '<span>Augnablik</span>' }).setStyle('opacity', 0).inject(this.wrapEl).fade(1);
		this.imageWrapFx = new Fx.Morph(this.imageWrapEl, { link: 'cancel' });
		
		this.imageWrapEl.addEvent('click', this.openFull.bind(this));
	},
	
	full: false,
	
	openFull: function(){
		if(!this.fullWrapEl)
			this.fullWrapEl = new Element('div.bm-slideshow-wrap.bm-slideshow-full');
		
		this.fullWrapEl.inject(document.body);
		this.fullWrapEl.setStyle('display','block');
		this.fullWrapEl.setStyle('left', window.getSize().x/2 - this.options.fullWidth/2);
		this.fullWrapEl.setStyle('width', this.options.fullWidth);
		
		this.wrapEl.setStyle('height', this.wrapEl.getSize().y);
		
		this.images.each(function(image){
			image.imageEl.setStyle('left', -image.fullOffset);
			image.imageEl.setStyle('width', (this.options.fullWidth+image.fullOffset));
			
			if(image.imageEl.hasClass('selected')){
				this.imageWrapEl.setStyle('height', image.imageEl.getSize().y);
			}
			
		}, this);
		
		if(!this.closeEl)
			this.closeEl = new Element('div.bm-slideshow-close', { html: 'Loka' });
		this.closeEl.inject(this.fullWrapEl);
		this.closeEl.addEvent('click', this.closeFull.bind(this));
		
		this.imageWrapEl.inject(this.fullWrapEl);
		this.thumbWrapEl.inject(this.fullWrapEl);
		
		// overlay
		if(!this.overlayEl)
			this.overlayEl = new Element('div.bm-slideshow-overlay');
		this.overlayEl.inject(document.body);
		this.overlayEl.addEvent('click', this.closeFull.bind(this));
		this.overlayEl.setStyles({
			display: 'block',
			opacity: .8,
			width: window.getSize().x,
			height: window.getScrollSize().y
		});
		
		this.full = true;
	},
	
	closeFull: function(){
		this.fullWrapEl.setStyle('display','none');
		
		this.wrapEl.setStyle('height', 'auto');
		
		this.imageWrapEl.inject(this.wrapEl);
		this.thumbWrapEl.inject(this.wrapEl);
		
		this.closeEl.removeEvent('click', this.closeFull.bind(this));
		this.overlayEl.removeEvent('click', this.closeFull.bind(this));
		
		this.images.each(function(image){
			image.imageEl.setStyle('left', -image.offset);
			image.imageEl.setStyle('width', (this.options.width+image.offset));
			
			if(image.imageEl.hasClass('selected')){
				this.imageWrapEl.setStyle('height', image.imageEl.getSize().y);
			}
		}, this);
		
		this.overlayEl.setStyle('display', 'none');
		
		this.full = false;
	},
	
	createThumbs: function(){
		this.images.each(function(image){
			image.imageEl.setStyle('width', this.options.width+image.offset);
			image.imageEl.erase('height');
			image.imageEl.setStyle('opacity', 0);
			image.imageEl.inject(this.imageWrapEl);
			
			image.thumbEl = new Element('li');
			image.thumbEl.setStyle('background-image', 'url('+ image.url +')');
			image.thumbEl.inject(this.thumbWrapEl);
		}, this);
		
		this.ready();
	},
	
	deSelectAll: function(current){
		this.images.each(function(image){
			if(current !== image){
				this.deSelect(image);
			}
		}, this);
	},
	
	deSelect: function(image){
		image.imageEl.fade(0);
		image.imageEl.removeClass('selected');
		image.thumbEl.removeClass('selected');
	},
	
	select: function(image){
		var height = image.imageEl.getSize().y;
		
		this.imageWrapFx.start({
			opacity: 1,
			height: height
		});
		
		image.imageEl.setStyle('left', (this.full ? - image.fullOffset : -image.offset));
		image.imageEl.fade(1);
		image.imageEl.addClass('selected');
		image.thumbEl.addClass('selected');
		
		this.deSelectAll(image);
	},
	
	ready: function(){
		this.thumbWrapEl.fade(1);
		this.loadingEl.fade(0);
		
		this.select(this.images[0]);
		
		this.images.each(function(image){
			image.thumbEl.addEvent('click', function(e){
				e.stop();
				this.select(image);
			}.bind(this));
		}, this);
	},
	
	add: function(url){
		var obj = {
			url: url,
			imageEl: null,
			thumbEl: null,
			size: null,
			offset: 0
		};
		
		this.images.push(obj);
	},
	
	preload: function(image, callback){
		var tmp = new Image();
		var done = function(){
			var size;
			
			image.size = { x: tmp.width, y: tmp.height };
			image.offset = (this.options.thumbSize / image.size.x) * (this.options.width + this.options.thumbSize) + 5;
			image.fullOffset = (this.options.thumbSize / image.size.x) * (this.options.fullWidth + this.options.thumbSize) + 5;
			image.imageEl = $(tmp);
			
			callback();
		};
		
		tmp.src = image.url;
		tmp.onload = done.bind(this);
	}
});