var LB_Z_INDEX_MIN	= 0,
	LB_Z_INDEX_MAX	= 65,
	TYPE_IMAGE		= 'typeImage',
	TYPE_VIDEO		= 'typeVideo',
	OPEN_SPEED		= 300;

var Lightbox = new Class({
	Implements: [Events],
	Binds: ['closeClicked', 'keyUpEvent', 'onScroll', 'checkLoadedImages'],
	initialize: function(__element) {
		this.el		= __element;
		this.setup();
	},
	
	container			: 0,
	currentSlideshow	: 0,
	currentNumImages	: 0,
	currentLoadedImages	: 0,
	currentHtml			: '',
	isOpen				: false,
	
	setup: function() {
		if (!SUPPORT_OPACITY) {
			this.el.setStyle('opacity', 0);
		}
		
		this.el.setAnimationProperties(['opacity'], [OPEN_SPEED], ['ease-in-out'], [0]);
		
		this.el.set('html', '<div class="bg"></div><div class="content_container"></div>');
		this.container	= this.el.getElement('.content_container');
		
		this.el.getChildren('.bg')[0].addEvent('click', this.closeClicked);
		window.addEvent('keyup', this.keyUpEvent);
		//this.open();
		
		if (!SUPPORT_POSITION_FIXED) {
			window.addEvent('scroll', this.onScroll);
		}
	},
	
	onScroll: function(e) {
		var scrolled	= window.getScroll().y;
		this.el.setStyle('top', scrolled + 'px');
	},
	
	keyUpEvent: function(e) {
		if (e.code == 27) this.closeClicked();
	},
	
	closeClicked: function(e) {
		this.close();
		this.currentSlideshow	= 0;
		
		/*var thisRef				= this;
		setTimeout(function() {
			thisRef.container.set('html', '');
		}, OPEN_SPEED);*/
	},
	
	open: function(_imgName, _numImgs, _fileType) {
		this.isOpen	= true;
		this.setContent(_imgName, _numImgs, _fileType);
		
		this.el.setStyle('z-index', LB_Z_INDEX_MAX);
		this.el.animateStyle('opacity', 1);
	},
	
	close: function () {
		this.el.animateStyle('opacity', 0);
		
		var thisRef				= this;
		setTimeout(function() {
			thisRef.container.set('html', '');
			thisRef.el.setStyle('z-index', LB_Z_INDEX_MIN);
			thisRef.isOpen	= false;
		}, OPEN_SPEED);
	},
	
	checkLoadedImages: function() {
		log('checkLoadedImages()');
		
		this.currentLoadedImages++;
		
		if (this.currentLoadedImages >= this.currentNumImages) {
			this.allImagesLoaded();
		}
	},
	
	allImagesLoaded:function() {
		//log('allImagesLoaded()');
		
		this.container.set('html', this.currentHtml);
		
		var slidesDiv			= this.container.getElement('.slideshow')[0];
		this.currentSlideshow	= new SlideshowBase(slidesDiv);
		
		this.resize(windowWidth, windowHeight);
	},
	
	setContent: function(_imgName, _numImgs, _fileType) {
		this.currentLoadedImages	= 0;
		this.currentNumImages		= _numImgs;
		
		this.currentHtml			= this.buildHtmlFor(_imgName, _numImgs, _fileType);
		
		//start loading images
		for (var i=0; i<_numImgs; i++) {
			var url		= 'img/' + _imgName + (i+1) + _fileType;
			var image	= new Image();
			image.onload= this.checkLoadedImages;
			image.src	= url;
		}
		
	},
	
	buildHtmlFor: function (_imgName, _numImgs, _fileType) {
		//log('buildHtmlFor(' + _imgName + ',' + _numImgs + ',' + _fileType + ')');
		var html	= '<div class="slideshow">';
		
		for (var i=0; i<_numImgs; i++) {
			var url		= 'img/' + _imgName + (i+1) + _fileType;
			html += '<div class="slide"><img src="' + url + '"/></div>';
			
			/*var image	= new Image();
			image.onload= this.checkLoadedImages;
			image.src	= url;*/
		}
		
		html += '<a href="#previous" id="prevSlideBtn" class="slide_nav_button"></a><a href="#next" id="nextSlideBtn" class="slide_nav_button"></a><div class="nav_bar"></div></div>';
		return html;
	},
	
	resize: function(_w, _h) {
		this.el.setStyle('height', _h + 'px');
		
		var top		= -Math.round(_h  * .5) - Math.round(this.container.getSize()[0].y * .5);
		
		this.container.setStyle('margin-top', top + 'px');
		
		if (this.currentSlideshow) this.currentSlideshow.resize(_w, _h);
	}
	
});