var MooGallery = new Class({
	Implements: [Options],
	
	options: {
		preloadImage: false,
		waitTime: 5000,
		imgSrc: new Array(),
		objMap: new Array(),
		current: null,
		imgIndex: -1,
		totalImages: 0,
		slideInterval: null
	},
	
	initialize: function(options){
		this.setOptions(options);
		this.initGallery();
	},
	
	initGallery: function(){
		var fn = this;
		var list = $$("#thumbList a");
		var holder = $("imageFrame");
		
		holder.addClass("loading");
		list.each(function(btn, i){
			btn.store("index", i);
			btn.addEvent("click", function(e){
				e.stop();
				clearInterval(fn.options.slideInterval);
				fn.showImage(this.retrieve("index"), this.href);
			});
			fn.options.imgSrc[i] = btn.href;
		});
		fn.options.totalImages = list.length;
		fn.autoSlide();
	},
	
	showImage: function(i, src) {
		var fn = this;
		var holder = $("imageFrame");
		
		if (fn.options.current != null) {
			fn.options.current.set('tween', {duration: "long"}).tween("opacity", 0);
			fn.options.current.store("show", false);
		}
		
		if (!fn.options.objMap[i]) {
			fn.options.objMap[i] = new Element("img").set("opacity", 0).inject(holder);
			new Asset.image(src, {
				"onload": function(){
					if (fn.options.objMap[i].retrieve("show") == true) {
						fn.options.objMap[i].set("src", src);
						fn.options.objMap[i].set('tween', {duration: "long"}).tween("opacity", 1);
						fn.options.objMap[i].store("loaded", true);
						fn.options.current = fn.options.objMap[i];
						setTimeout(function(){
							var w = fn.options.objMap[i].clientWidth;
							var h = fn.options.objMap[i].clientHeight;
							var s = w / h;
							if (w > 768) {
								w = 768;
								h = 768 / s;
							}
							if (h > 445) {
								w = 445 * s;
								h = 445;
							}
							var x = (768 - w) / 2;
							var y = (445 - h) / 2;
							fn.options.objMap[i].setStyles({
								width: w + "px",
								height: h + "px",
								top: y + "px",
								left: x + "px"
							});
						}, 100);
						holder.removeClass("loading");
					}
				}
			});
			fn.options.objMap[i].store("index", i);
			fn.options.objMap[i].store("show", true);
			fn.options.objMap[i].store("loaded", false);
		} else if (fn.options.objMap[i].retrieve("loaded") == false) {
			fn.options.objMap[i].store("show", true);
			fn.options.imgIndex--;
			holder.addClass("loading");
		} else {
			fn.options.objMap[i].store("show", true);
			fn.options.objMap[i].set('tween', {duration: "long"}).tween("opacity", 1);
			fn.options.current = fn.options.objMap[i];
			holder.removeClass("loading");
		}
		
		fn.options.imgIndex = i;
	},
	
	autoSlide: function() {
		var fn = this;
		clearInterval(fn.options.slideInterval);
		fn.slide();
		fn.options.slideInterval = setInterval(function(){
			fn.slide();
		}, fn.options.waitTime);
	},
	
	slide: function() {
		var fn = this;
		fn.options.imgIndex++;
		if (fn.options.imgIndex == fn.options.totalImages) {
			fn.options.imgIndex = 0;
		}
		fn.showImage(fn.options.imgIndex, fn.options.imgSrc[fn.options.imgIndex]);
	},
	
	pauseSlide: function() {
		var fn = this;
		clearInterval(fn.options.slideInterval);
	}
});

document.addEvent("domready", function(e){
	var slide = new MooGallery();
	$("slidePlay").addEvent("click", function(e){
		slide.autoSlide();
		e.stop();
	});
	
	$("slideStop").addEvent("click", function(e){
		slide.pauseSlide();
		e.stop();
	});
});