var MAG = Object.extend({}, MAG || {});
MAG.Preview = Class.create();
MAG.Preview.prototype = {
	initialize: function(options)
	{
		this.options = {
			preview_element: $('preview_image_container') ? $('preview_image_container').select('img').first() : null,
			objects: $$('#image_preview a'),
			move_up: $$('.gallery .navigation a.up').first(),
			move_down: $$('.gallery .navigation a.down').first(),
			gallery_content_height: $('gallery-content').getHeight(),//height of the gallery container - set in the CSS
			image_preview_height: $('image_preview').getHeight(),//calculated container height based on the picture number
			current_offset: 0,
			offset_step: 70
		};

		this.options.max_offset = -(this.options.image_preview_height - this.options.gallery_content_height) + this.options.offset_step;

		Object.extend(this.options, options || {});

		MAG.MagPreview = this;

		if(this.options.objects.length) {
			setTimeout(function(){MAG.MagPreview.attach_event()},0);
		}

		return true;
	},

	attach_event: function()
	{
		this.options.objects.each(function(el){
			el.observe('click', this.click_object.bind(this));
		}.bind(this));

		Event.observe(this.options.move_up, 'click', this.move_up.bind(this));
		Event.observe(this.options.move_down, 'click', this.move_down.bind(this));

	},

	click_object: function(e)
	{
		var el = Event.element(e);
		this.options.preview_element.src = el.src.toString().replace('_86x56', '_289x193');
		this.options.preview_element.parentNode.href = el.src.toString().replace('_86x56', '_800x600');
		this.options.preview_element.parentNode.title = el.alt;
		Event.stop(e);
	},

	move_up: function()
	{
		if(this.options.current_offset < 0) {
			$('image_preview').style.top = this.options.current_offset + this.options.offset_step + 'px';
			this.options.current_offset = this.options.current_offset + this.options.offset_step;
		}
		
	},

	move_down: function()
	{
		if(this.options.current_offset > this.options.max_offset) {
			$('image_preview').style.top = this.options.current_offset - this.options.offset_step + 'px';
			this.options.current_offset = this.options.current_offset - this.options.offset_step;
		}
	}
};

document.observe('dom:loaded', function(){new MAG.Preview;});