var Previewer = Class.create(
{
	initialize: function(id)
	{
		this.id = $(id);
		this.scroller = $(id).down(".previewer-scroller");
		this.window = $(id).down(".previewer-window");
		this.height = parseInt(this.window.getStyle("height"));
		this.width = parseInt(this.window.getStyle("width"));
		this.nb = this.window.select(".previewer-thumb").size();
		this.nb_x_page = parseInt(this.width / this.window.down(".previewer-thumb").getWidth());
		this.nb_y_page = parseInt(this.height / this.window.down(".previewer-thumb").getHeight());
		this.nb_by_page = this.nb_x_page * this.nb_y_page;
		this.nb_rows = Math.ceil(this.nb / this.nb_x_page);
		this.full_height = this.height * (this.nb_rows / this.nb_y_page) ;
		this.delta = this.height;
		this.isOn = false;
		this.setButtons();

		this.id.select("a[rel='next']", "a[rel='previous']").each((function(a)
		{
			a.observe("click", (function(e)
			{
				e.stop();
				this.move(a.readAttribute("rel"));
			}).bindAsEventListener(this));
		}).bind(this));

		this.window.observe("mouseenter", (function(e)
		{
			this.isOn = true;
			this.id.down(".previewer-navs").hide();
			this.id.down(".previewer-status").show();
		}).bindAsEventListener(this));

		this.window.observe("mouseleave", (function(e)
		{
			this.isOn = false;
			this.id.down(".previewer-navs").show();
			this.id.down(".previewer-status").hide();
			$$("a.previewer-thumb img").invoke("setOpacity", 0.9);
		}).bindAsEventListener(this));

		this.id.select("a.previewer-thumb").each((function(pt)
		{
			pt.observe("mouseenter", (function(e)
			{
				var txt = "";

				$$("a.previewer-thumb img").invoke("setOpacity", 0.8);

				if(img = pt.down("img"))
				{
					img.setOpacity(1);
					txt = "<span class='sector_" + pt.readAttribute("rel") + "'>" + img.readAttribute("alt").bold() + "</span>";
				}

				this.id.down(".previewer-status").update(txt);
			}).bindAsEventListener(this));
		}).bind(this));
	},

	getTop: function()
	{
		return parseInt(this.scroller.getStyle("top"));
	},

	setButtons: function()
	{
		if(this.getTop() >= 0)
		{
			this.id.select("a[rel='previous']").invoke("addClassName", "previewer-nav-disable");
		}
		else
		{
			this.id.select("a[rel='previous']").invoke("removeClassName", "previewer-nav-disable");
		}

		if(this.getTop() <= -(this.full_height - this.height))
		{
			this.id.select("a[rel='next']").invoke("addClassName", "previewer-nav-disable");
		}
		else
		{
			this.id.select("a[rel='next']").invoke("removeClassName", "previewer-nav-disable");
		}
	},

	move: function(dir)
	{
		var top = this.getTop();
		var delta = (dir == "next" ? -this.delta : this.delta);

		if(dir == "previous" && top >= 0)
		{
			return false;
		}
		else if(dir == "next" && top <= -(this.full_height - this.height))
		{
			return false;
		}
		else
		{
			var new_top = top + delta;

			if(new_top >= 0)
			{
				new_top = 0;
			}
			else if(new_top <= -(this.full_height - this.height))
			{
				new_top = -(this.full_height - this.height);
			}

			new Effect.Morph(this.scroller,
			{
				style: "top: " + new_top + "px;",
				queue:
				{
					scope: $(this.id).identify() + "_scope",
					position: "end",
					limit: 1
				},
				afterFinish: this.setButtons.bind(this)
			});
		}

		return true;
	}
});