var Lightbox = Class.create({
	windowSize: [760, 605],
	
	initialize: function(container) {
		this.container = $(container);
		this.photos = container.select('.photo');
		this.photos.invoke('observe', 'click', this.showPhoto.bindAsEventListener(this));
		this.buildWindow();
		Lightbox.instances.push(this);
	},
	
	showPhoto: function(event) {
		if(Object.isNumber(event)) {
			var link = this.photos[event];
		} else {
			Event.stop(event);
			var link = Event.element(event).up('a');
		}
		
		if(!this.lightboxWindow.visible())
			Lightbox.instances.invoke('close');
		
		this.image.src = link.href;
		this.selectPhotoInList(link.href);
		this.positionWindow();
		this.showWindow();
	},
	
	showWindow: function() {
		if(!this.lightboxWindow.visible()) {
			this.lightboxWindow.show();
			//new Effect.BlindDown(this.lightboxWindow);
		}
	},
	
	selectPhotoInList: function(imgSrc) {
		this.photoList.select('a').invoke('removeClassName', 'selected');
		this.photoList.select('a').detect(function(el) { return el.href == imgSrc }).addClassName('selected');
	},
	
	buildWindow: function() {
		var wrapper = new Element('div', { 'style': 'display: none' });
		wrapper.className = 'lightbox-window';
		
		var html = '<div class="shadow"></div>\
			<div class="photo-container">\
				<div class="titlebar">\
				<a href="javascript:;" class="close-link">Затвори</a>\
				</div>\
				<img src="" alt="" class="image" />\
				<div class="list"></div>\
			</div>';
			
		$(document.body).insert({ top: wrapper });
		wrapper.innerHTML = html;
		
		this.lightboxWindow = wrapper;
		this.photoContainer = wrapper.down('.photo-container');
		this.closeLink = wrapper.down('.close-link');
		this.photoList = wrapper.down('.list');
		this.titlebar = wrapper.down('.titlebar');
		this.image = wrapper.down('.image');
		this.closeLink.observe('click', this.close.bind(this));
		
		// build the photo list
		this.photos.each(function(el) {
			var listItem = $(el.cloneNode(true));	
			this.photoList.insert({ bottom: listItem });
			
			if(el.hasClassName('thumb'))
				listItem.down('img').src = listItem.down('img').src.replace('default', 'small');
				
			listItem.observe('click', this.showPhoto.bind(this));
		}.bind(this));

		if(this.photos.length <= 1) {
			this.photoList.addClassName('hidden');
		} else {
			this.photoList.removeClassName('hidden');
		}
	},
	
	positionWindow: function() {
		var pageSize = document.viewport.getDimensions();
		var scrollOffsets = document.viewport.getScrollOffsets();
		if(scrollOffsets.top < 135) 
			scrollOffsets.top = 135;
			
		this.lightboxWindow.setStyle({
    	left: (((pageSize.width - this.windowSize[0]) / 2))+'px',
    	top: (scrollOffsets.top + (pageSize.height - this.windowSize[1]) / 2)+'px'
		});
	},
	
	close: function() {
		this.lightboxWindow.hide();
	}
});
Lightbox.instances = [];

Event.observe(document, 'dom:loaded', function() {
	setTimeout(function() { $$('.has-lightbox').each(function(el) { new Lightbox(el); }) }, 0);
});