/* [/web/js/gallery.js] */

var pageStarted = true;
var ready_images = 0;
var current_image = 0;

var auto_change = 1;
var auto_change_interval = null;

var scrolling = false;

var containerWidth = 1000;

function imageReady(noincrement) {
	noincrement = noincrement ? 0 : 1;	
	ready_images = ready_images ? ready_images + noincrement : 1;
	
	var ctab = $("Contents").select("div.Slider")[0];
	var imgs = ctab.select("img.Image");
	
	$$(".Loading span")[0].innerHTML = ready_images + " of " + imgs.length;

	if (ready_images == imgs.length && !pageStarted) {
		setTimeout(function() { imageReady(true); }, 1000);
		return;
	}
	
	if (ready_images == imgs.length) {
		var ch = ctab.getHeight();
		$$(".Loading")[0].addClassName("Hidden");

		for (var i=0; i<imgs.length; i++) {
			var h = - imgs[i].getHeight() + ch;
			
			imgs[i].addClassName("ImageOff");
		}
		imgs[0].removeClassName("ImageOff");
		imgs[0].addClassName("ImageOn");
		
		// OPEN THE DOOR
		var newWidth = imgs[0].getWidth();
		var doorWidth = Math.floor((containerWidth - newWidth) / 2);
		
		$("LeftButton").setStyle({ "left": doorWidth + "px", "width": (newWidth / 2) + "px" });
		$("RightButton").setStyle({ "left": (doorWidth + newWidth / 2) + "px", "width": (newWidth / 2) + "px" });
		
		new Effect.Parallel ([
			new Effect.Scale($("PhotoWindow"), null, {
				scaleY: false,
				scaleContent: false,
				duration: 1,
				scaleFrom: 100,
				scaleTo: newWidth * 100 / $("PhotoWindow").getWidth(),
				sync: true
			}),
						
			new Effect.Scale($("LeftDoor"), null, {
				scaleY: false,
				scaleContent: false,
				duration: 1,
				scaleFrom: 100,
				scaleTo: doorWidth * 100 / $("LeftDoor").getWidth(),
				sync: true
			}),
			
			new Effect.Scale($("RightDoor"), null, {
				scaleY: false,
				scaleContent: false,
				duration: 1,
				scaleFrom: 100,
				scaleTo: (containerWidth-doorWidth-newWidth) * 100 / $("RightDoor").getWidth(),
				sync: true
			})
		]);

		var f = function(pos) {
			current_image = current_image ? current_image : 0;

			if (!scrolling && current_image + pos < imgs.length && current_image + pos >= 0) {
				imgs[current_image].removeClassName("ImageOn");
				imgs[current_image].addClassName("ImageOff");
				
				scrolling = true;

				var w = imgs[current_image].getWidth();
				current_image = current_image + pos;
				imgs[current_image].removeClassName("ImageOff");
				imgs[current_image].addClassName("ImageOn");
				
				var newWindowWidth = imgs[current_image].getWidth();
				var newDoorWidth = Math.floor((containerWidth - newWindowWidth) / 2);
				
				var moveTo = -1 * pos * w - ((pos < 0) ? ($("PhotoWindow").getWidth() - newWindowWidth) : 0);
				
				$("LeftButton").setStyle({ "left": newDoorWidth + "px", "width": (imgs[current_image].getWidth() / 2) + "px" });
				$("RightButton").setStyle({ "left": (newDoorWidth + $("LeftButton").getWidth()) + "px", "width": $("LeftButton").getWidth() + "px" });
		
				new Effect.Parallel ([
					/*
					new Effect.Scale($("PhotoWindow"), null, {
						sync: true,
						scaleY: false,
						scaleContent: false,
						duration: .7,
						scaleFrom: 100,
						scaleTo: newWindowWidth * 100 / $("PhotoWindow").getWidth()
					}),
					
					new Effect.Scale($("LeftDoor"), null, {
						sync: true,
						scaleY: false,
						scaleContent: false,
						duration: .7,
						scaleFrom: 100,
						scaleTo: newDoorWidth * 100 / $("LeftDoor").getWidth() 
					}),
					
					new Effect.Scale($("RightDoor"), null, {
						sync: true,
						scaleY: false,
						scaleContent: false,
						duration: .7,
						scaleFrom: 100,
						scaleTo: (containerWidth-newDoorWidth-newWindowWidth) * 100 / $("RightDoor").getWidth(),
					}),*/
					
					new Effect.Move(imgs[current_image + ((pos > 0) ? -1 : 0)], {
						sync: true,
						x: moveTo,
						duration: 1,
						transition: function(pos) {
							pos = pos - 1;
							return 1 - Math.abs(pos * pos * pos);
						},
						afterFinish: function() { scrolling = false; }
					})
				], {});
			} else if (!scrolling) {
				auto_change = auto_change * -1;
			}
		}
		
		Event.observe($("LeftButton"), 'click', function() {
			f(-1);
			if (auto_change_interval) {
				clearInterval(auto_change_interval);
				auto_change_interval = setInterval(function() { f(auto_change); }, 2000 );
			}
		});
		
		Event.observe($("RightButton"), 'click', function() {
			f(1);
			if (auto_change_interval) {
				clearInterval(auto_change_interval);
				auto_change_interval = setInterval(function() { f(auto_change); }, 2000 );
			}
		});
		
		auto_change_interval = setInterval(function() { f(auto_change); }, 2000 );
	}
}