var ncmsGallery = new Class({
        'initialize': function(className, duration) {
            this.className = className;
            this.galleryNode = $$(className)[0];
            this.thumbs = [];
            this.thumbNodes = [];
            this.images = [];
            this.duration = duration;
            this._deactivateImageText = false;

            var description = this.galleryNode.getElements('.gallery-description');
            if(description.length > 0) {

                description = description[0];
                description.set('opacity', 0.8);
                //var period = this.changeToNext.periodical(8000, this);
                description.addEvent('click', function() {
                    description.fade(0);
                    //$clear(period);
                });
            }

            this.view = new Element('div', {
                                'class': 'view'
                               });
            this.view.inject(this.galleryNode.getElements('.gallery-contents')[0], 'top');
            var gallery = this;
            this.view.addEvent('click', function() { gallery.onGalleryClick();});
            this.index = new Element('div', {
                                'class': 'index'
                               });
            this.index.inject(this.galleryNode);


        },
        'changeToNext': function () {
            var newImage = (this.activeImage.number + 1) % this.thumbs.length;
            this.change('thumb_'+newImage, 5000);

        },
        'changeToPrev': function() {
            var newImage = (this.activeImage.number - 1) % this.thumbs.length;
            if(newImage < 0) {
                newImage = this.thumbs.length -1;
            }
            this.change('thumb_'+newImage, 5000);

        },
        'add': function(image, thumbnail, headline, description) {
            var gallery = this;
            var thumb = new Element('img', {
                                'class': 'thumbnail',
                                'src': thumbnail,
                                'id': "thumb_"+this.thumbs.length,
                                'events': {
                                    'click': function(el) { gallery.onThumbnailClick(el); }
                                   }
                                  });
            thumb.num = this.thumbs.length;
            if(this.thumbs.length == 0) {
                thumb.set('class', 'active');
                thumb.set('opacity', 0.75);
            }
            thumb.inject(this.index);
            var num = this.thumbs.length;
            this.thumbs[num] = image;
            this.thumbs[thumb.id] = num;
            this.thumbNodes[thumb.id] = thumb;
            this.setupImage(image, headline, description, thumb, num);
        },
        'show': function() {
            if(this.thumbs.length > 0) {
            //    $each(this.thumbs, this.setupImage, this);
                this.fadeIn(this.activeImage);
                this.index.scrollLeft = 0;
            }
        },
        'onThumbnailClick': function(el) {
            this.change(el.target.id, this.duration);
        },
        'change': function(id, duration) {
            var thumbs = this.index.getElements('img').set('class', '');
            var thumbs = this.index.getElements('img').set('opacity', 1.0);
            var thumb = this.thumbNodes[id];
            thumb.set('class', 'active');
            thumb.set('opacity', 0.5);
            var thumbId = this.thumbs[id];
            var newActiveImage = this.images[this.thumbs[thumbId]]
            if(newActiveImage != this.activeImage) {
                this.fadeOut(this.activeImage, duration);
                this.fadeIn(newActiveImage, duration);
            }
            // move thumbnail scrollbar
            var newPos = thumb.offsetLeft + (thumb.offsetWidth / 2);
            newPos = newPos - (this.index.clientWidth / 2);
            this.index.scrollLeft = newPos;


        },
        'deactivateImageText' : function(value) {
            this._deactivateImageText = value;
        },
        'onGalleryClick': function() {
            var nextNum = (this.activeImage.num + 1) % this.thumbs.length;
            this.change('thumb_'+nextNum, this.duration);
        },
        'setupImage': function(imageUrl, headline, description, thumbNode, thumbIndex) {
            var gallery = this;
            // setup div container
            params = {'z-index': -10, 'display': 'block'}
            if(thumbIndex == 0) {
                params['class'] = 'gallery-image';
            } else {
                params['class'] = 'gallery-image';
            }
            var container = new Element('div', params);

            var text = new Element('div', {'class': 'image-text'});
            // setup headline and description
            if(!this._deactivateImageText) {

                var headlineNode = new Element('h2', {'opacity': 0, 'class': 'fade', 'text': headline});
                var descriptionNode = new Element('p', {'opacity': 0, 'class': 'fade', 'text': description});
                headlineNode.inject(text);
                descriptionNode.inject(text);


            }
            text.inject(container);
            // setup img node
            var img = new Element('img', {'opacity': 0, 'class': 'fade',  'src': imageUrl
                           });
            img.inject(container, 'top');
            container.inject(this.view, 'top');
            container.number = thumbIndex;
            this.images[imageUrl] = container;
            if(thumbIndex == 0) {
                this.activeImage = container;
            }
            container.num = thumbIndex;
        },
        'fadeIn': function(el, duration) {
            this.activeImage = el;
            el.set('z-index', 10);
            //this.view.getElements('div').set('class', 'gallery-image');
            //el.set('class', 'gallery-image visible');
            //var ani = new Fx.Tween(el.getElements('img'), {'property': 'opacity', 'duration': this.duration});
            //ani.start(1.0);
            var gallery = this;
            el.getElements('.fade').each(function(el) {
                var ani = new Fx.Tween(el, {'property': 'opacity', 'duration': gallery.duration});
                ani.start(1.0);
            });
        },
        'fadeOut': function(el, duration) {
            el.set('z-index', -10);
            //var ani = new Fx.Tween(el, {'property': 'opacity', 'duration': this.duration * 0.75, 'transition': Fx.Transitions.Expo.easeOut});
            //ani.start(0.0);
            var gallery = this;
            el.getElements('.fade').each(function(el) {
                var ani = new Fx.Tween(el, {'property': 'opacity', 'duration': gallery.duration});
                ani.start(0);
            });

        }
    });