var SlideShow = {
	
	image:    document.getElementById('SlideShowImage'),
	thumb:    null,
	div:      null,
	images:   [],
	current:  0,
	interval: null,
	
	start: function()
	{
		if (!SlideShow.thumb)
		{
			SlideShow.thumb = document.getElementById('SlideShowThumb_' + (SlideShow.images.length - 1));
			SlideShow.thumb.className = 'on';
			SlideShow.div = document.getElementById('SlideShowDiv_' + (SlideShow.images.length - 1));
			// alert(SlideShow +', ' + SlideShow.div)
			SlideShow.div.className = 'on';
		}
		SlideShow.interval = setInterval('SlideShow.change()', 12000);
	},
	
	mouseover: function(src, element)
	{
		clearInterval(SlideShow.interval);
		
		for (var i=0; i<SlideShow.images.length; i++)
			if (src == SlideShow.images[i])
				SlideShow.current = i+1;
		
		SlideShow.image.src = src || '<% $TEMP{emotion_first} %>';
		
		element.className = 'on';
		SlideShow.thumb.className = '';
		// SlideShow.thumb = element;
		SlideShow.div.className = '';
		SlideShow.current = element.id.split('_').pop();
		SlideShow.thumb = document.getElementById('SlideShowThumb_' + SlideShow.current);
		SlideShow.thumb.className = 'on';
		SlideShow.div = document.getElementById('SlideShowDiv_' + SlideShow.current);
		SlideShow.div.className = 'on';
		
		
		SlideShow.start();
	},
	
	change: function(src)
	{
		if (SlideShow.current > SlideShow.images.length-1) SlideShow.current = 0;
		
		SlideShow.thumb.className = '';
		SlideShow.div.className = '';
		SlideShow.thumb = document.getElementById('SlideShowThumb_' + SlideShow.current);
		SlideShow.div = document.getElementById('SlideShowDiv_' + SlideShow.current);
		SlideShow.thumb.className = 'on';
		SlideShow.div.className = 'on';
		
		SlideShow.image.src = src || SlideShow.images[SlideShow.current++];
	}
};