var BertaGallery = new Class({
	
	Implements: Options,
	
	options: {
		type: 'slideshow',
		playerPath: null
	},
	
	type: 'slideshow',
	container: null,
	imageContainer: null,
	navContainer: null,
	rowClearElement: null,
	
	newObjectInjectWhere: null,
	newObjectInjectPosition: null,

	currentSrc: null,
	currentType: null,
	currentVideoPath: null,
	preload: null,
	phase: null,
	
	imageFadeOutFx: null,
	imageResizeFx: null,
	imageShowFx: null,
	
	initialize: function(container, options) {
		this.setOptions(options);
		
		this.attach(container);
		this.loadFirst();
	},
	
	
	attach: function(container) {
		this.container = container;
		this.type = this.container.get('x_type');
		this.container.addClass('galleryType-' + this.type);
		
		this.imageContainer = this.container.getElement('div.entryGallery');
		this.navContainer = this.container.getElement('ul.nav');
		
		if(this.navContainer && this.navContainer.getElements('a').length > 0) {
			this.imageFadeOutFx = new Fx.Tween(this.imageContainer, { duration: 'short', transition: Fx.Transitions.Sine.easeInOut });
			this.imageShowFx = new Fx.Tween(this.imageContainer, { duration: 'normal', transition: Fx.Transitions.Sine.easeInOut });
			
			if(this.type == 'slideshow') {
				this.imageResizeFx = new Fx.Morph(this.imageContainer, { duration: 'short', transition: Fx.Transitions.Sine.easeInOut });
				this.navContainer.getElements('a').each(function(item) {
					item.addEvent('click', this.onNavItemClick.bindWithEvent(this));
				}.bind(this));
				
				this.newObjectInjectWhere = this.imageContainer;
				this.newObjectInjectPosition = 'bottom';
				
			} else {
				this.rowClearElement = new Element('br', { 'class': 'clear' }).inject(this.imageContainer);
				
				this.newObjectInjectWhere = this.rowClearElement;
				this.newObjectInjectPosition = 'before';
			}
			
		
			
		} else 
			this.navContainer = null;
	},
	
	
	detach: function() {
		if(this.navContainer) {
			this.navContainer.getElements('a').each(function(item) {
				item.removeEvents('click');
			});
		
			this.imageFadeOutFx.cancel();
			if(this.imageResizeFx) this.imageResizeFx.cancel(); 
			this.imageShowFx.cancel();
			this.imageFadeOutFx = this.imageResizeFx = this.imageShowFx = null;
		}
		this.container = this.imageContainer = this.navContainer = null;
		this.currentSrc = null;
	},
	
	onNavItemClick: function(event) {
		event.stop();
		
		var linkElement = $(event.target);
		this.selectNavElement(linkElement.getParent('li'));
		this.load(linkElement.get('href'), linkElement.get('x_type'), linkElement.get('x_w'), linkElement.get('x_h'), linkElement.get('x_videohref'));
	},
	selectNavElement: function(liElement) {
		this.navContainer.getElements('li').removeClass('selected');
		liElement.addClass('selected');
	},
	
	updateImageContainer: function() {
		if(this.type == 'row') {
			var totalWidth = 0;
			var maxHeight = 0;
			var itmSize, numImages = 0;
			this.imageContainer.getChildren().each(function(item) {
				if(!item.hasClass('xGalleryEditButton')) {
					itmSize = item.getSize();
					
					totalWidth += itmSize.x;
					if(itmSize.y > maxHeight) maxHeight = itmSize.y;
					numImages++;
				}
			});
			this.imageContainer.setStyle('width', (totalWidth + numImages /* for "em" discrepancy */) + 'px');
			this.imageContainer.setStyle('height', maxHeight + 'px');
		}
	},
	
	
	
	
	///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	///////////////| Loading  |////////////////////////////////////////////////////////////////////////////////////////////////////////////
	///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////	
	
	loadFirst: function() {
		if(this.navContainer) {
			this.selectNavElement(this.navContainer.getElement('li'));
			var aEl = this.navContainer.getElement('li a');
			this.load(aEl.get('href'), aEl.get('x_type'), aEl.get('x_w'), aEl.get('x_h'), aEl.get('x_videohref'));
		}
	},
	
	loadNext: function() {
		if(this.navContainer) {
			var selectedLi = this.navContainer.getElement('li.selected');
			if(selectedLi) {
				var nextLi = selectedLi.getNext();
				if(nextLi) {
					this.selectNavElement(nextLi);
					var aEl = nextLi.getElement('a');
					this.load(aEl.get('href'), aEl.get('x_type'), aEl.get('x_w'), aEl.get('x_h'), aEl.get('x_videohref'));
				}
			} else {
				this.loadFirst();
			}
		}
	},
	
	load: function(src, mType, mWidth, mHeight, videoPath) {
		switch(this.phase) {
			case 'fadeout': this.imageFadeOutFx.cancel(); break;
			case 'fadein': this.imageResizeFx.cancel(); this.imageShowFx.cancel(); break;
		}
		
		
		if(this.currentSrc && this.type == 'slideshow') {
			this.currentSrc = null;
			this.phase = "fadeout";
			this.imageFadeOutFx.start('opacity', 0).chain(this.load2.bind(this, [ src, mType, mWidth, mHeight, videoPath ]));
			
		} else {
			this.currentSrc = null;
			this.load2(src, mType, mWidth, mHeight, videoPath);
		}
	},
	
	load2: function(src, mType, mWidth, mHeight, videoPath) {
		this.currentSrc = src;
		this.currentType = mType;
		this.currentVideoPath = videoPath;
		
		if(this.type == 'slideshow') {
			var obj;
			if(obj = this.imageContainer.getElement('div.item')) obj.destroy();
		}
		
		switch(mType) {
			case 'image':
				this.phase = "preload";
				this.preload = new Asset.image(src, {
					'onload': this.load3.bind(this, [ src, mType, mWidth, mHeight ])
				});
				this.preload = new Element('div', { 'class': 'item image' }).adopt(this.preload);
				if(this.type == 'row') {
					if(mWidth) this.preload.setStyle('width', mWidth + 'px');
					if(mHeight) this.preload.setStyle('height', mHeight + 'px');
				}
				break;
			
			case 'video':
				this.preload = new Element('div', { 'class': 'item video' }).inject(this.newObjectInjectWhere, this.newObjectInjectPosition);
				if(mWidth) this.preload.setStyle('width', mWidth + 'px');
				if(mHeight) this.preload.setStyle('height', mHeight + 'px');
				new Swiff(this.options.engineRoot + 'jwplayer/player.swf', {
					container: this.preload,
					width: mWidth,
					height: mHeight,
					params: {
						'allowFullScreen': true
					},
					vars: {
						'file': videoPath,
						'image': src,
						'controlbar': 'over'/*,
						'skin': '/' + this.options.engineRoot + 'jwplayer/bekle.swf'*/
					}
				});
				
				this.load3(src, mType, mWidth, mHeight);
				
				break;
			
		}
		
	},
	
	load3: function(src, mType, mWidth, mHeight) {
		
		// test if the loaded image's src is the last invoked image's src
		if(src == this.currentSrc) {
			if(this.type == 'slideshow') {
				this.phase = "fadein";
				this.imageResizeFx.start({
					'width': mWidth,
					'height': mHeight
				}).chain(function() {
					this.preload.inject(this.newObjectInjectWhere, this.newObjectInjectPosition);
					this.updateImageContainer();
					this.imageShowFx.set('opacity', 0).start('opacity', 1);
				}.bind(this));
			} else {
				this.phase = "done";
				this.preload.inject(this.newObjectInjectWhere, this.newObjectInjectPosition);
				this.updateImageContainer();
				new Fx.Tween(this.preload, { duration: 'normal', transition: Fx.Transitions.Sine.easeInOut }).set('opacity', 0).start('opacity', 1);
				
				this.loadNext();
			}
		}
	}
	
	
	
});