var PhotoGallery = new Class({
	Implements: [Events, Options],

	options: {
		galleryId: 'photoGallery',
		
		displayThumbs: true,
		displayDetail: true,

		thumbsClass: 'photoThumbs',
		imageClass: 'photoLarge',
		fadeDuration: 100,
		popupCallback: function() {}
	},

	initialize: function( options )
	{
		this.setOptions(options);

		this.galleryContainer = $(this.options.galleryId);
		if( this.galleryContainer == null )
		    return;
		
		this.thumbsContainer = new Element( 'div', {
		    'class': this.options.thumbsClass,
		    'styles': { 'position': 'relative', 'overflow': 'hidden' }
		});
		this.processImages();
		if( this.options.displayThumbs == true ) {
			this.thumbsContainer.inject( this.galleryContainer );
		}
		
		this.imageContainer = new Element( 'div', {
		    'class': this.options.imageClass,
		    'styles': { 'position': 'relative', 'overflow': 'hidden' }
		});
		if( this.options.displayDetail == true ) {
			this.imageContainer.inject( this.galleryContainer );
		}
		
		this.maxWidth  = this.imageContainer.getStyle('width').toInt();
		this.maxHeight = this.imageContainer.getStyle('height').toInt();

		this.createControl();

		this.changeImage( 0 );
	},

	createControl: function()
	{
		var gallery = this;
		
		// create effect on large image
		this.fadeEffect = new Fx.Morph( this.imageContainer, { 'link': 'chain', 'duration': this.options.fadeDuration } );

		this.thumbsInner = new Element( 'div', {
			'styles': { 'overflow':'hidden', 'white-space': 'nowrap', 'position':'relative', 'width':'100%' }
		}).adopt( this.thumbsContainer.getChildren() ).inject( this.thumbsContainer );

		this.loadIndicator = new Element( 'div', {
			'class': 'loadIndicator',
			'styles': { 'width': this.maxWidth }
		});

		// vrstva tlacitek na nahledech
		this.thumbsLeftBtn = new Element( 'a', {
			'class': 'thumbsLeftButton',
			'styles': { 'display':'block', 'position':'absolute', 'top':'0px', 'left':'0px' },
			'events': {
				'mouseenter': function() { gallery.scrollEffect = gallery.scroll.periodical( 15, gallery, 'left' ); },
				'mouseout': function() { gallery.scrollEffect = $clear( gallery.scrollEffect ); }
			}
		}).inject( this.thumbsContainer );

		this.thumbsRightBtn = new Element( 'a', {
			'class': 'thumbsRightButton',
			'styles': { 'display':'block', 'position':'absolute', 'top':'0px', 'right':'0px' },
			'events': {
				'mouseenter': function() { gallery.scrollEffect = gallery.scroll.periodical( 15, gallery, 'right' ); },
				'mouseout': function() { gallery.scrollEffect = $clear( gallery.scrollEffect ); }
			}
		}).inject( this.thumbsContainer );


    		// text box
    		this.textArea = new Element( 'p', {
    			'class': 'textBox',
    			'styles': { 'display':'block', 'width':'100%', 'position':'absolute', 'bottom':'0px', 'left':'0px' },
			'events': { 'click': function() { gallery.options.popupCallback( gallery.images[gallery.currentImg] ); } }
    		} ).inject( this.imageContainer );

    		// prev button
    		this.largeLeftBtn = new Element( 'div', {
    			'class': 'leftButton',
    			'styles': { 'display':'block', 'position': 'absolute', 'top': '0px', 'left': '0px' },
    			'events': {
    				'click': function() { gallery.changeImage( gallery.currentImg - 1 ); },
    				'mouseover': function() { this.addClass('hover'); },
    				'mouseout': function() { this.removeClass('hover'); }
    			}
		} ).inject( this.imageContainer );

    		// next button
    		this.largeRightBtn = new Element( 'div', {
    			'class': 'rightButton',
    			'styles': { 'display':'block', 'position': 'absolute', 'top': '0px', 'right': '0px' },
    			'events': {
    				'click': function() { gallery.changeImage( gallery.currentImg + 1 ); },
    				'mouseover': function() { this.addClass('hover'); },
    				'mouseout': function() { this.removeClass('hover'); }
    			}
    		} ).inject( this.imageContainer );
	},

	processImages: function()
	{
		this.images = new Array(); this.imageSrc = new Array(); this.thumbs = new Array();

		this.galleryContainer.getChildren().each( function( item, idx ) {
			if( item.get('tag') == 'a' ) {
				var thumb = item.getChildren()[0];
				if( thumb.get('tag') == 'img' ) {
					thumb.largeHref = item.get('href');
					thumb.set( 'class', 'thumb' );
					thumb.addEvent('click', this.options.displayDetail == true ? this.changeImage.bind( this, idx ) : this.options.popupCallback.bind( this, thumb ) );
					thumb.inject( this.thumbsContainer );
					this.thumbs.push( thumb );
				}

				item.dispose();

			} else if( item.get('tag') == 'img' ) {
				item.addEvent('click', this.changeImage.bind( this, idx ) );
				item.largeHref = item.get('src');
				item.set( 'class', 'thumb' );
				item.inject( this.thumbsContainer );
				this.thumbs.push( item );

			} else {
			    item.dispose();
			}

		}, this);
	},

	changeImage: function( id )
	{
		if( this.running == true || ( this.currentImg == id ) )
			return false;

		this.thumbs[id+1] ? this.largeRightBtn.setStyle('display', 'block') : this.largeRightBtn.setStyle('display', 'none');
		this.thumbs[id-1] ? this.largeLeftBtn.setStyle('display', 'block') : this.largeLeftBtn.setStyle('display', 'none');

		var gallery = this;

		this.running = true;
		this.fadeEffect.start({	'opacity': 0 }).chain(
			gallery.loadImage.bind( gallery, id ),
			function() { this.start({ 'width': gallery.images[gallery.currentImg].get('width'), 'height': gallery.images[gallery.currentImg].get('height') }); },
			function() { this.start({ 'opacity': 1 }); }
		);
		this.running = false;
	},

	loadImage: function( id )
	{
		var gallery = this;

		if( !this.images[id] ) {
			// show load indicator
			//this.loadIndicator.replaces( this.imageContainer ).setStyle('height',
			//	this.imageContainer.getStyle('height').toInt() +
			//	this.imageContainer.getStyle('margin-top').toInt() +
			//	this.imageContainer.getStyle('margin-bottom').toInt() +
			//	this.imageContainer.getStyle('padding-top').toInt() +
			//	this.imageContainer.getStyle('padding-bottom').toInt() );

			// load image from server
			this.images[id] = new Asset.image( this.thumbs[id].largeHref, {
				onload: function( image ) {
					image.set( 'alt', gallery.thumbs[id].get('alt') );
					image.set( 'title', gallery.thumbs[id].get('title') );
					image.addEvent( 'click', function() { gallery.options.popupCallback( gallery.images[gallery.currentImg] ); } );
					gallery.resizeImage( image );
					//this.imageContainer.replaces( this.loadIndicator );
					this.displayImage( id );
				}.bind( this )
			});
		} else
			this.displayImage( id );
	},

	resizeImage: function( image )
	{
	    var width = image.get( 'width' ).toInt();
	    var height = image.get( 'height' ).toInt();

	    var xRatio = this.maxWidth / width;
	    var yRatio = this.maxHeight / height;

	    if ( this.maxWidth > 0 && xRatio < yRatio ) {
		image.set( 'width', width * xRatio );
		image.set( 'height', height * xRatio );
	    } else if ( this.maxHeight > 0 ) {
		image.set( 'width', width * yRatio );
		image.set( 'height', height * yRatio );
	    }
	},

	displayImage: function( id )
	{
		this.fadeEffect.set({ 'visibility': 'hidden' });

		// remove old image
		if ( this.images[this.currentImg] )
			this.images[this.currentImg].dispose();

		// setup current image
		this.currentImg = id;
		this.images[this.currentImg].inject( this.imageContainer, 'top' );

		// setup text box
		var alt = this.images[this.currentImg].get('alt');
		if( alt == null ) {
			this.textArea.setStyle( 'display', 'none' );
		} else {
			this.textArea.set( 'text', alt );
			this.textArea.setStyle( 'display', 'block' );
		}

		this.fadeEffect.set({ 'visibility': 'visible' });
		this.fadeEffect.callChain();
	},

	scroll: function( dir )
	{
		var scrollPos = this.thumbsInner.getScroll();

		// scroll left
		if ( dir == 'left' ) {
			this.thumbsInner.scrollTo( scrollPos.x - 3, scrollPos.y );

		// scroll right
		} else {
			this.thumbsInner.scrollTo( scrollPos.x + 3, scrollPos.y );
		}
	}

});