var SiteThumbGallery = new Class({
    initialize: function(obj){
        this.obj = obj;
        this.FX = null;
        this.Images = new Array();
        this.Thumbs = new Array();
        this.registerImages();
        this.registerThumbs();
        this.loadThumbs();
        $(this.obj.imageTargetID).appendChild(this.Images[0]);
    },
    
    registerThumbs: function(){
        this.obj.thumbs.each(function(thumbSrc){
            var thumb = this.createThumb(thumbSrc);
            thumb.addEvent('click', this.thumbClick.bindWithEvent(this, thumb));
            //thumb.addEvent('mouseenter', this.thumbOver.bindWithEvent(this, thumb));
            //thumb.addEvent('mouseleave', this.thumbOut.bindWithEvent(this, thumb));
            this.Thumbs.push(thumb);
        }, this);
    
    },
    
    registerImages: function(){
        this.obj.images.each(function(imageSrc){
            var image = this.createImage(imageSrc);
            this.Images.push(image);
        }, this);
    
    },
    
    loadThumbs: function(){
        this.Thumbs.each(function(thumb){
            $(this.obj.thumbTargetID).appendChild(thumb);
        }, this);
        
    },
    
    thumbOver: function(){
        //$(this.obj.imageTargetID).appendChild( this.Images[ this.Thumbs.indexOf(arguments[1]) ] );
        if(this.FX) this.FX.cancel();
        this.FX = new Fx.Morph(arguments[1], {duration: 300, transition: Fx.Transitions.Circ.easeIn}).start({
            'width': 400,
            'height': 400
        });
    },
    
    thumbOut: function(){
        //$(this.obj.imageTargetID).appendChild( this.Images[ this.Thumbs.indexOf(arguments[1]) ] );
        if(this.FX) this.FX.cancel();
        this.FX = new Fx.Morph(arguments[1], {duration: 300, transition: Fx.Transitions.Circ.easeIn}).start({
            'width': 100,
            'height': 100
        });
    },
    
    thumbClick: function(){
        $(this.obj.imageTargetID).appendChild( this.Images[ this.Thumbs.indexOf(arguments[1]) ] );
    },
    
        
    createImage: function(path){
        return new Element('img', {
            'styles': {
                'position': 'absolute',
                'display': 'block',
                'border': '0px solid black',
                'z-index': 0
            },
            'class': 'mainImage',
            'src': this.obj.imagePathPrefix + path
        });
    },
    
    createThumb: function(path){
        return new Element('img', {
            'styles': {
                'display': 'block',
                'border': '1px solid #666'
            },
            'class': 'scrollThumb',
            'src': this.obj.thumbPathPrefix + path
        });
    },
    
    getScroll: function(){
        return {'x': $(this.obj.thumbTargetID).getParent().scrollLeft, 'y': $(this.obj.thumbTargetID).getParent().scrollTop};
    },
    
    scrollLeft: function(){
       this.FX = new Fx.Scroll($(this.obj.thumbTargetID).getParent(), {
            offset: {
                'x': 0,
                'y': 0
            },
            duration: 1000,
            transition: Fx.Transitions.Sine.easeOut
        }).start(this.getScroll().x - this.obj.scrollStep, 0);
    },
    
    scrollRight: function(){
        this.FX = new Fx.Scroll($(this.obj.thumbTargetID).getParent(), {
            offset: {
                'x': 0,
                'y': 0
            },
            duration: 1000,
            transition: Fx.Transitions.Sine.easeOut
        }).start(this.getScroll().x + this.obj.scrollStep, 0);
    },
    
    scrollUp: function(){
       this.FX = new Fx.Scroll($(this.obj.thumbTargetID).getParent(), {
            offset: {
                'x': 0,
                'y': 0
            },
            duration: 1000,
            transition: Fx.Transitions.Sine.easeOut
        }).start(this.getScroll().y - this.obj.scrollStep, 0);
    },
    
    scrollDown: function(){
       this.FX = new Fx.Scroll($(this.obj.thumbTargetID).getParent(), {
            offset: {
                'x': 0,
                'y': 0
            },
            duration: 1000,
            transition: Fx.Transitions.Sine.easeOut
        }).start(this.getScroll().y + this.obj.scrollStep, 0);
    }
    
  
 });