window.addEvent("domready", function(){
	var album = $("galleryAlbums");
	var selector = $("galleryImageSelector");
	
	var scrolly = new Scroller(album, {area: 20, velocity: 0.5});
	var scrollyy = new Scroller(selector, {area: 50, velocity: 0.8});
	
	album.addEvent("mouseover", scrolly.start.bind(scrolly));
	album.addEvent("mouseout", scrolly.stop.bind(scrolly));
	
	album.scroller = new Fx.Scroll(album,
								   {
										duration: 300
								   }
								  );
	
	$("galleryAlbumTopArrow").addEvent("click", function(e)
									    {
											var scroller = new Fx.Scroll(album, {duration:300});
											scroller.scrollTo(0, album.getSize().scroll.y - 190);
									    });
	
	$("galleryAlbumBottomArrow").addEvent("click", function(e)
									    {
											var scroller = new Fx.Scroll(album, {duration:300});
											scroller.scrollTo(0, album.getSize().scroll.y + 190);
									    });
	
	$("imageSelectorLeftArrow").addEvent("click", function(e)
									    {
											var scroller = new Fx.Scroll(selector, {duration:500});
											scroller.scrollTo(selector.getSize().scroll.x - 700, 0);
									    });
	
	$("imageSelectorRightArrow").addEvent("click", function(e)
									    {
											var scroller = new Fx.Scroll(selector, {duration:500});
											scroller.scrollTo(selector.getSize().scroll.x + 700, 0);
									    });
	
	album.slider = new Fx.Slide(album, {
		mode: "horizontal",
		duration: 800
		}
		);
	album.sideBar = new Fx.Styles($("sidebar1"),
								{
									duration: 800
								}
								);
	album.handle = $("handle").effect("margin-left", {duration: 800});
	
	var slideHandle = $("handle");
	slideHandle.addEvent("click",
						function (e)
						{
							$("galleryAlbums").slider.toggle();
							if ($("sidebar1").getStyle("width") == "210px")
							{
								this.setStyle("background-image","url(/media/images/galleryTrayOpen.png)");
								album.handle.start(192, 0);
								if (!window.ie)
								{
									$("galleryAlbums").sideBar.start(
																	{
																		"width": [210, 0],
																		"opacity": [1, 0.5]
																	}
																	);
								} else {
									$("galleryAlbums").sideBar.start(
																	{
																		"width": [210, 0]
																	}
																	);
								}
							} else {
								this.setStyle("background-image","url(/media/images/galleryTrayClose.png)");
								album.handle.start(0, 192);
								if (!window.ie)
								{
									$("galleryAlbums").sideBar.start(
																	{
																		"width": [0, 210],
																		"opacity": [0.5, 1]
																	}
																	);
								} else {
									$("galleryAlbums").sideBar.start(
																	{
																		"width": [0, 210]
																	}
																	);
								}
							}
						}
						);
	
	selector.addEvent("mouseover", scrollyy.start.bind(scrollyy));
	selector.addEvent("mouseout", scrollyy.stop.bind(scrollyy));
	
	var thumbs = $$(".insideFrame img");
	
	for (var i = 0; i < thumbs.length; i++)
	{
		$("img" + i).addEvent("click", function(e)
		{
			var bigImage = this.getAttribute("orig");
			var img = new Element("img");
			img.setAttribute("src", "/media/images/ajax-loader.gif");
			img.setAttribute("id", "imageHere");
			img.setStyle("padding", "210px");
			$("imageHere").replaceWith(img);
			var loader = new Asset.image(bigImage, {id: "imageHere", title: this.getAttribute("title"), alt: this.getAttribute("alt"),
										onload: function()
										{
											$("imageHere").replaceWith(loader);
										}});
		});
	}
});