var Gallery = {

    screenWidth: 0,
    
    screenHeight: 0,
    
    galleryId: false,
    
    listId: false,
    
    imgMaxWidth: 0,
    
    imgMaxHeight: 0,
    
    imgMinWidth: 0,
    
    imgMinHeight: 0,
    
    current: 1,
    
    count: false,
    
    speed: 400,
    
    animation: 'swing',
    
    create: function(galleryId, listId, imgMaxWidth, imgMaxHeight, imgMinWidth, imgMinHeight){
        this.current = 1;
        this.galleryId = galleryId;
        this.listId = listId;
        this.imgMaxWidth = imgMaxWidth;
        this.imgMaxHeight = imgMaxHeight;
        this.imgMinWidth = imgMinWidth;
        $("#" + this.galleryId + " img").width(this.imgMinWidth);
		this.windowResized();
		this.count = $("#" + this.galleryId + " img.image").length;
    },
	
	getShadow: function(i) {
        c = $(i).attr('id').substring(6);
        s = $("#shadow-" + c);
		return s;
	},
    
    show: function(i){
        $('img.image').each(function(i){
            if ($(this).width() != Gallery.imgMinWidth) 
                Gallery.shrink(this);
        });
        
        if ($(i).width() == this.imgMaxWidth) 
            this.shrink(i);
        else 
            this.grow(i);
    },
    
    shrink: function(i){
        $(i).css('padding-bottom', 2).animate({
            'width': this.imgMinWidth
        }, this.speed, this.animation, function(){
            $(this).css('padding-bottom', 0).css('display', 'inline');
        });
        s = this.getShadow(i);
        s.animate({
            'width': this.imgMinWidth
        }, this.speed, this.animation);
        this.center($(i).attr('id').substring(6), false);
    },
    
    grow: function(i){
		$('#nav').css('zIndex', 1);

        this.current=$(i).attr('id').substring(6);
        this.center(this.current, true);

        $(i).css('padding-bottom', 2).animate({
            'width': this.imgMaxWidth,
			'marginBottom': 0
        }, this.speed, this.animation, function(){
            $(this).css('padding-bottom', 0).css('display', 'inline');
			$('#nav').css('zIndex', 100);
        });
        s = this.getShadow(i);
        s.animate({
            'width': this.imgMaxWidth,
			'marginTop': 0
        }, this.speed, this.animation);
    },
    
    hover: function(i){
        if ($(i).width() == this.imgMinWidth) {
			$(i).css('display', 'block').css('padding-bottom', 2).animate({
				'marginBottom': 10
			}, 100, 'linear', function(){
			});
	        s = this.getShadow(i);
			s.animate({
				'marginTop': 10
			}, 100, 'linear');
		}
    },
    
    unhover: function(i){
        if ($(i).width() != this.imgMaxWidth) {
            $(i).animate({
				'marginBottom': 0
            }, this.speed, this.animation, function(){
                $(this).css('display', 'inline').css('padding-bottom', 0);
            });
	        s = this.getShadow(i);
            s.animate({
				'marginTop': 0
            }, this.speed, this.animation);
        }
    },
    
    windowResized: function(){
        var h = w = 0;
        if (typeof(window.innerWidth) == 'number') {
            h = window.innerHeight;
            w = window.innerWidth;
        }
        else 
            if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
                h = document.documentElement.clientHeight;
                w = document.documentElement.clientWidth;
            }
            else 
                if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
                    h = document.body.clientHeight;
                    w = document.body.clientWidth;
                }
        
        if (h >= 560) {
			$('#' + this.galleryId).width(w).css('top', h - 560);
			$('#nav').width(w).css('top', h - 560);
		}
		else {
			$('#' + this.galleryId).width(w).css('top', 0);
			$('#nav').width(w).css('top', 0);
		}
		    
        this.screenWidth = w;
        this.screenHeight = h;
		
		if ($("#image-"+this.current).width() == this.imgMinWidth)
			this.center(this.current, false)
		else
			this.center(this.current, true)
    },
    
    center: function(current, big){
		
		if (big)
	        scrCenter = (this.screenWidth / 2) - ((this.imgMaxWidth + 20) / 2);
		else
	        scrCenter = (this.screenWidth / 2) - ((this.imgMinWidth + 20) / 2);

        curPos = (this.imgMinWidth + 20) * (current - 1);

		var left = scrCenter - curPos;
		
        $("#" + this.listId).stop().animate({
            'marginLeft': left
        }, 400);
    },
	
	left: function(){
		if (Gallery.current>1) {		
			if ($("#image-"+Gallery.current).width() == Gallery.imgMaxWidth) 
				Gallery.shrink("#image-"+Gallery.current)
			
			Gallery.current--;
			Gallery.center(Gallery.current, false)
		}
	},
	
	right: function(){
		if (Gallery.current<Gallery.count) {		
			if ($("#image-"+Gallery.current).width() == Gallery.imgMaxWidth) 
				Gallery.shrink("#image-"+Gallery.current)
			Gallery.current++;
			Gallery.center(Gallery.current, false)
		}
	}
    
};


$(window).resize(function(){
    Gallery.windowResized();
});

$(window).ready(function(){

    Gallery.create('gallery', 'list', 666, 500, 160, 120);
    
    $('img.image').each(function(i){
        $(this).click(function(){
            Gallery.show(this);
        }).mouseenter(function(){
            Gallery.hover(this);
        }).mouseleave(function(){
            Gallery.unhover(this);
        });
    });
	
	$('#left').click(Gallery.left).animate({'backgroundPosition': '-1000000px 0px'}, 50000000, 'linear');
	$('#right').click(Gallery.right).animate({'backgroundPosition': '1000000px 0px'}, 50000000, 'linear');
});