var ImageSlider = {

	// imagestore
	images : [],

	// where is what?
	divs : {
		'thumblist' 	: '.thumbslider',
		'imagelist' 	: '.imageslider',
		'thumbslider'	: '.thumbslider',
		'imageslider'   : '.imageslider',
		'imagewidth'	: 560
	},

	currentImage 		: 0,

	// add a new image to the gallery (must be called before init()
	addImage : function (thumb, large, extra)
	{
		this.images[ this.images.length ] = {'thumb' : thumb, 'large' : large, 'extra' : extra };
	},

	// initfunction.. places all images in the right boxes
	init : function()
	{
		for (var i = 0; i < this.images.length; i++) {
			$('<div>')
			 .addClass('thumb')
			 .attr('id', 'thumb_' + i)
			 .css({
					'background-image' 	: 'url(' + this.images[i]['thumb'] + ')',
					'cursor'			: 'pointer'
				})
			 .click(function() { ImageSlider.fadeToImage((this.id.substr(6))); return false; })
			 .appendTo( $(this.divs['thumblist'])[0] );

			$('<div>')
			 .addClass('image')
			 .attr('id', 'image_' + i)
			 .css({
					'background-image' 	: 'url(' + this.images[i]['large'] + ')'
				})
			 .appendTo( $(this.divs['imagelist'])[0] );
		}

		this.setSelectedState(0);
	},

    fadeToImage : function (imageno)
    {

		if (this.currentImage == imageno) return;

		$(ImageSlider.divs.imageslider).fadeOut(500, function () {
    		ImageSlider.currentImage = imageno;
            $(ImageSlider.divs.imageslider).css('left', ImageSlider.currentImage * ImageSlider.divs.imagewidth * -1);
            $(ImageSlider.divs.imageslider).fadeIn(500);
		});

    },

    setSelectedState : function (imageno)
    {
    	$('.thumb').removeClass('selected')

    	$('#thumb_' + imageno).addClass('selected');
    }
}