/* vi:ts=4 sw=4:
 */
function ImageChanger(){
	var timer;
	var thumbnails;
	var image0 = $('#image-0');
	var image1 = $('#image-1');
	var currentImage = image0;
	var currentImageData = ImageChanger.data[0];
	var nextImage = image1;
	var nextImageIndex = 0;
	var nextImageData;
	var stopChanger = false;
	/* initialise everything */

	ImageChanger.pathToRoot = getRoot();
	
	$(image0).css('z-index', 101);
	$(image1).css('z-index', 100);

	/* setup the helper functions */
	this.autoChangeImage = function(){
		if(stopChanger){
			clearInterval(timer);
		}else{
			if(++nextImageIndex >= ImageChanger.data.length)
				nextImageIndex = 0;
		}
		nextImageData = ImageChanger.data[nextImageIndex];
		$(currentImage)
					.css({'z-index':101,'opacity':1.0})
					.fadeOut(ImageChanger.FADE_DURATION);
		$(nextImage)
					.stop()
					.css({'z-index': 100})
					.css({'opacity':1.0})	/* ensure that the opacity is reset *after* the z-index change */
					.attr({'src':ImageChanger.pathToRoot+nextImageData[ImageChanger.FULL],'title':nextImageData[ImageChanger.DESCRIPTION]})
					.show();

		// switch the images (next -> current, current -> next)
		var tmp = currentImage;
		currentImage = nextImage;
		nextImage = tmp;

		};
	
	this.changeImage = function(index){
			if(1){
				clearInterval(timer);
				nextImageData = ImageChanger.data[index];
				$(currentImage)
							.stop()
							.css({'z-index': 101})
							.css({'opacity':1.0})	/* ensure that the opacity is reset *after* the z-index change */
							.attr({'src':ImageChanger.pathToRoot+nextImageData[ImageChanger.FULL],'title':nextImageData[ImageChanger.DESCRIPTION]})
							.show();
				$(nextImage)
							.css({'z-index':100,'opacity':1.0})
							.hide();
			}else{
				nextImageIndex = index;
				stopChanger = true;
				ImageChanger.FADE_DURATION = ImageChanger.MANUAL_FADE_DURATION;
				this.autoChangeImage();	// update immediately.
			}
		};
	
	/* Populate the #thumbnails images */
	thumbnails = $('#image-changer #thumbnails').empty();

	$(ImageChanger.data).each(function(index, value){
			if(0){
				$(thumbnails).append('<li id="thumbnail-'+index+'"><a href="'+$(value)[ImageChanger.TARGET]+'" onclick="imageChanger.changeImage('+index+');return(false);">'+
						'<img src="'+$(value)[ImageChanger.THUMBNAIL]+'" title="'+$(value)[ImageChanger.DESCRIPTION]+'" width="64" height="37" />'+
						'</a></li>');
			}else{
				$(thumbnails).append('<li id="thumbnail-'+index+'"><a href="'+($(value)[ImageChanger.TARGET] == '#' ? '#' : ImageChanger.pathToRoot+$(value)[ImageChanger.TARGET])+'" onclick="imageChanger.changeImage('+index+');return(false);">'+
						'<img src="'+ImageChanger.pathToRoot+$(value)[ImageChanger.THUMBNAIL]+'" title="'+$(value)[ImageChanger.DESCRIPTION]+'" width="64" height="37" />'+
						'</a></li>');
			}
		});

	// kick the image changer off
	timer = window.setInterval(this.autoChangeImage, ImageChanger.CHANGE_INTERVAL);

	$('.jscrollpane').jScrollPane({showArrows: true});	// hook in the nice shiny scrollbars
}

ImageChanger.FULL= 0;
ImageChanger.THUMBNAIL = 1;
ImageChanger.DESCRIPTION = 2;
ImageChanger.TARGET = 3;
ImageChanger.FADE_DURATION = 3000;
ImageChanger.MANUAL_FADE_DURATION = 200;
ImageChanger.CHANGE_INTERVAL = 6000;

var imageChanger;
ImageChanger.pathToRoot = '';
$(document).ready(function(){
	imageChanger = new ImageChanger();
 });

ImageChanger.data = new Array(
	new Array('/images/pc/expression001-pc.jpg', '/images/pc/expression001-pc-th.jpg', 'Expression Garden Office', 'target url2'),
	new Array('/images/pc/pinnacle001-pc.jpg', '/images/pc/pinnacle001-pc-th.jpg', 'Pinnacle Garden Studio', '#'),
	new Array('/images/pc/inspiration001-pc.jpg', '/images/pc/inspiration001-pc-th.jpg', 'Inspiration Garden Room', 'target url3'),
	new Array('/images/pc/internal001-pc.jpg', '/images/pc/internal001-pc-th.jpg', 'Inspiration Garden Room Interior', 'target url4'),
	new Array('/images/pc/inspiration002-pc.jpg', '/images/pc/inspiration002-pc-th.jpg', 'Inspiration Garden Room', 'target url5'),
	new Array('/images/pc/expression002-pc.jpg', '/images/pc/expression002-pc-th.jpg', 'Expression Garden Office', 'target url6'),
	new Array('/images/pc/internal002-pc.jpg', '/images/pc/internal002-pc-th.jpg', 'Pinnacle Garden Studio Interior', 'target url7'),
	new Array('/images/pc/pinnacle002-pc.jpg', '/images/pc/pinnacle002-pc-th.jpg', 'Pinnacle Garden Studio', 'target url8')
	);