var gs = {
    currentImagePos: 0,
    images: [],
    imageholderid: 'largeimageholder',
    thumbholderid: 'slider',
    scrollerUpId: 'arrowup',
    scrollerDownId: 'arrowdown',
    currentImageOffset: 0,

    getImageId: function(dir) {
        if (dir == 'down') {
            if (this.currentImageOffset > 0) {
                this.currentImageOffset -= 1;
            } else {
                this.currentImageOffset = 0;
            }
        } else {
            if (this.currentImageOffset < this.images.length - 1) {
                this.currentImageOffset += 1;
            } else {
                this.currentImageOffset = this.images.length - 1;
            }
        }

        if (this.currentImageOffset <= 0) {
            $$('.button_left').set('opacity', gs.arrowstates['inactive']);
            this.currentImageOffset = 0;
        } else {
            $$('.button_left').set('opacity', gs.arrowstates['active']);
        }

        if (this.currentImageOffset >= this.images.length - 1) {
            $$('.button_right').set('opacity', gs.arrowstates['inactive']);
            this.currentImageOffset = this.images.length - 1;
        } else {
            $$('.button_right').set('opacity', gs.arrowstates['active']);
        }

        return this.currentImageOffset;

    },

    gotoNextImage: function() {
        this.showImage(this.getImageId('up'));
        return false;
    },
    gotoPreviousImage: function() {
        this.showImage(this.getImageId('down'));
        return false;
    },

    setCurrentImageOffset: function(offset) {
        this.currentImageOffset = offset * 1;
    },

    showImage: function(offset) {
        offset = offset * 1; // to make it numeric

        var myFx = new Fx.Scroll($(gs.imageholderid), { offset: { 'y': -1, 'x': -1 }, wheelStops: false }).toElement('image' + offset);

        //check for max scroll
        if (offset + 2 >= gs.images.length) {
            scrollthumb = gs.images.length - 3;
        } else {
            scrollthumb = offset;
        }

        var myFx = new Fx.Scroll($(gs.thumbholderid), { offset: { 'y': -10, 'x': -102 }, wheelStops: false }).toElement('thumb' + scrollthumb);


        this.setCurrentImageOffset(offset);

        if (this.currentImageOffset == 0) {
            $$('.button_left').set('opacity', gs.arrowstates['inactive']);
        } else {
            $$('.button_left').set('opacity', gs.arrowstates['active']);
        }

        if (this.currentImageOffset == this.images.length - 1) {
            $$('.button_right').set('opacity', gs.arrowstates['inactive']);
        } else {
            $$('.button_right').set('opacity', gs.arrowstates['active']);
        }

        $each(this.images, function(object, key) {
            if (key == offset) {
                $('thumb' + key).set('opacity', 1);
            } else {
                $('thumb' + key).set('opacity', 0.5);
            }
        });

        return false
    },

    addImage: function(thumbimagelink, largeimagelink) {
        new Element('div', {
            'styles': {
                'background': 'url(' + unescape(largeimagelink) + ') no-repeat center'
            },
            'class': 'largeimage',
            'id': 'image' + this.images.length
        }).inject('fotoholder');

        new Element('div', {
            'styles': {
                'background': 'url(' + unescape(thumbimagelink) + ') no-repeat center'
            },
            'class': 'thumbimage',
            'id': 'thumb' + this.images.length
        }).addEvent('click', function() {
            offset = this.id.split('thumb');

            gs.showImage(offset[1]);
        }
		).inject('thumbnailholder');

        this.images[this.images.length] = [largeimagelink, thumbimagelink, this.images.length];
    },

    arrowstates: { 'active': 0.8, 'hover': 1, 'inactive': 0.3 },

    init: function() {
        $$('.button_left').set('opacity', gs.arrowstates['active']).addEvent('mouseover', function() { if (gs.currentImageOffset != 0) this.set('opacity', gs.arrowstates['hover']) }).addEvent('mouseout', function() { if (gs.currentImageOffset == 0) this.set('opacity', gs.arrowstates['inactive']); else this.set('opacity', gs.arrowstates['active']) });
        $$('.button_right').set('opacity', gs.arrowstates['active']).addEvent('mouseover', function() { if (gs.currentImageOffset != gs.images.length - 1) this.set('opacity', gs.arrowstates['hover']) }).addEvent('mouseout', function() { if (gs.currentImageOffset == gs.images.length - 1) this.set('opacity', gs.arrowstates['inactive']); else this.set('opacity', gs.arrowstates['active']) }); ;
        this.showImage(0);
    },

    setDefaultImage: function(id) {
        $('image').set('style', 'background:url(/image.php?ent=msprojectsettings&id=' + id + '&w=720) no-repeat center');
        var myFx = new Fx.Scroll($(gs.imageholderid), { wheelStops: false }).toElement('image');
        this.init = function() { return true }
    }
};

window.addEvent('load', function() {
    gs.init();
});