document.write(unescape('%3Cstyle type="text/css"%3Ediv.galleryimage { width: 100%; position: absolute; display: none; }%3C/style%3E'));
document.write(unescape('%3Cstyle type="text/css"%3Ediv#thumbnails { overflow: hidden }%3C/style%3E'));

var mainimages;
var thumbnails;
var scroll_timer;
var play_timer;
var is_playing = true;
var view_time = 5000;
var scroll_increment = 10;
var scroll_interval = 10;
var fade_increment = 0.02;
var fade_interval = 10;
var obj_out;
var obj_in;

function setOpacity(obj) {
	if(obj.xOpacity>1) {
		obj.xOpacity = 1;
		return;
	}
	obj.set({'opacity': obj.xOpacity});
}

function crossFade() {
	fadeOut(obj_out);
	fadeIn(obj_in);
}
function fadeIn(obj) {
	obj.xOpacity += fade_increment;

	obj.style.display = "block";

	setOpacity(obj);

	if(obj.xOpacity>=1) {
		obj.addClass('shown');
	} else {
		setTimeout(function(){fadeIn(obj)}, fade_interval);
	}
}
function fadeOut(obj) {
	obj.xOpacity -= fade_increment;

	if(obj.hasClass('shown')) obj.removeClass('shown');

	setOpacity(obj);

	if(obj.xOpacity<0) {
		obj.style.display = 'none';
	} else {
		setTimeout(function(){fadeOut(obj)}, fade_interval);
	}
}

function transition_to(idx_in) {
	if(!$('images').getElement('.shown')) { // force finish the transition
		obj_in.xOpacity = 1;
		setOpacity(obj_in);
		obj_in.style.display = 'block';
		obj_in.addClass('shown');
		obj_out.xOpacity = 0;
		setOpacity(obj_out);
		obj_out.style.display = 'none';
	}
	if(!mainimages[idx_in].hasClass('shown')) {
		obj_out = obj_in;
		obj_in = mainimages[idx_in];
		crossFade();

		$('thumbnails').getElement('.active').removeClass('active');
		var current_x = thumbnails[idx_in].getPosition(thumbnails[idx_in].getParent()).x;
		if(is_playing) {
			var myFx = new Fx.Scroll('thumbnails', {
				onComplete: function(){
					thumbnails[idx_in].addClass('active');
					this_x = $('thumbnails').getPosition($('gallery')).x;
					if(this_x==0) {
						$('scrollerLeft').style.display = 'none';
						if($('thumbnails').getElement('ul').getSize().x > $('thumbnails').getSize().x) {
							$('scrollerRight').style.display = 'block';
						}
					} else if(this_x==($('thumbnails').getSize().x-$('thumbnails').getElement('ul').getSize().x)) {
						$('scrollerRight').style.display = 'none';
					} else {
						$('scrollerLeft').style.display = 'block';
						$('scrollerRight').style.display = 'block';
					}
				}
			}).start(current_x, 0);
		} else {
			thumbnails[idx_in].addClass('active');
		}
	}
}

function transition_next() {
	if($('images').getElement('.shown')) {
		var current_idx = $('images').getElement('.shown').get('id').substr(3);
		var next_idx = ++current_idx;
		if(next_idx > mainimages.length-1) next_idx = 0;
		transition_to(next_idx);
	}
}

function moveThumbnails(direction) {
	var this_x = -this.getPosition(this.getParent()).x;
	if(direction=='left') {
		this_x -= scroll_increment;
	} else {
		this_x += scroll_increment;
	}
	var move = new Fx.Scroll(this, { 
		duration: scroll_interval/2,
		onComplete: function () {
			this_x = $('thumbnails').getPosition($('gallery')).x;
			if(this_x==0) {
				$('scrollerLeft').style.display = 'none';
				if($('thumbnails').getElement('ul').getSize().x > $('thumbnails').getSize().x) {
					$('scrollerRight').style.display = 'block';
				}
				$clear(scroll_timer);
			} else if(this_x==($('thumbnails').getSize().x-$('thumbnails').getElement('ul').getSize().x)) {
				$('scrollerRight').style.display = 'none';
				$clear(scroll_timer);
			} else {
				$('scrollerLeft').style.display = 'block';
				$('scrollerRight').style.display = 'block';
			}
		}
	}).start(this_x, 0);
}

window.addEvent('domready', function() {

	thumbnails = $('thumbnails').getElements('li');
	mainimages = $('images').getElements('div.galleryimage');

	$each(mainimages, function (mainimage, index) {
		if(index == 0) { 
			mainimage.xOpacity = 0;
			obj_in = mainimage;
			fadeIn(obj_in);
			thumbnails[index].addClass('active');
		} else {
			mainimage.xOpacity = 0;
			setOpacity(mainimage);
			mainimage.style.display = "none";
		}
	});
	$each(thumbnails, function (thumbnail, index) {
		thumbnail.addEvent('click', function (e) {
			e.stop();
			$clear(play_timer);
			is_playing = false;
			transition_to(index);
		});
		thumbnail.addEvent('mouseover', function (e) {
			$clear(play_timer);
			is_playing = false;
		});
		thumbnail.addEvent('mouseout', function (e) {
			play_timer = transition_next.periodical(view_time);
			is_playing = true;
		});
		mainimages[index].addEvent('mouseover', function (e) {
			$clear(play_timer);
			is_playing = false;
		});
		mainimages[index].addEvent('mouseout', function (e) {
			play_timer = transition_next.periodical(view_time);
			is_playing = true;
		});
	});

	var scrollerLeft = new Element('div', {
		'id': 'scrollerLeft',
		'styles' : {
			'display' : 'none',
			'position' : 'absolute',
			'left' : '0',
			'top' : $('thumbnails').getPosition($('gallery')).y
		},
		'events': {
			'mouseover' : function () {
				$clear(play_timer);
				scroll_timer = moveThumbnails.periodical(scroll_interval, $('thumbnails'), 'left');
			},
			'mouseout' : function () {
				$clear(scroll_timer);
			}
		}
	});
	var scrollerRight = new Element('div', {
		'id': 'scrollerRight',
		'styles' : {
			'display' : $('thumbnails').getElement('ul').getSize().x > $('thumbnails').getSize().x ? 'block' : 'none',
			'position' : 'absolute',
			'right' : '0',
			'top' : $('thumbnails').getPosition($('gallery')).y
		},
		'events': {
			'mouseover' : function () {
				$clear(play_timer);
				scroll_timer = moveThumbnails.periodical(scroll_interval, $('thumbnails'), 'right');
			},
			'mouseout' : function () {
				$clear(scroll_timer);
			}
		}
	});
	
	$('gallery').grab(scrollerLeft);
	$('gallery').grab(scrollerRight);

});

window.addEvent('load', function () {
	if(is_playing) play_timer = transition_next.periodical(view_time);
});