var PopupGallery = Class.create
({
	initialize: function(options)
	{
		this.options = {};
		Object.extend(this.options, options || {});

		this.popup				= null;
		this.link				= null;
		this.close_link			= null;
		this.image_title		= null;
		this.gallery_container	= null;
		this.big_img			= null;
		this.position			= null;
		this.max_left_offset	= null;
		this.left_over			= 20;
		this.step				= 89; // thumb_width + margin-right:7px
		this.loader 			= new Element('img', {src: this.options.public_url+'images/site_images/loading.gif', id: 'thumb_loader'}).setStyle({display: 'none'});

		$$('a.popup_gallery').invoke('observe', 'click', this.show_popup_gallery.bind(this));

		this.create_popup();
	},

	show_popup_gallery: function (evt)
	{
		this.thumbs_holder.innerHTML = '';

		link = Event.element(evt);
		this.news_id = link.id.replace('news_', '');

		MAG.Mask.show(45);
		this.reposition_popup()

		this.show_images();

		if($('fog')) {
			$('fog').observe('click', this.hide_popup.bind(this));
		}
	},

	show_images: function()
	{
		new Ajax.Request(this.options.url, {
			method: 'get',
			parameters: 'method=get_gallery_images&news_id=' + this.news_id,
			onComplete: this.prepare_images.bind(this)
		});
	},

	prepare_images: function(req)
	{
		//load thumbs into container
		this.thumbs_holder.insert({top: req.responseText});
		this.thumbs_holder.insert({bottom: this.loader});
		this.all_thumbs = this.thumbs_holder.select('img');

		//calculate thumbs_holder width
		this.thumbs_holder.setStyle({width: + (this.all_thumbs.size() - 1) * this.step + this.left_over + 'px'})
		this.max_left_offset = -(parseInt(this.thumbs_holder.getStyle('width')) - this.left_over - 6 * this.step);

		//enable/disable navigation buts
		this.prepare_navigation();

		//load the first image title and change its border to mark it as selected
		this.image_title.update(this.all_thumbs.first().readAttribute('title'));
		this.all_thumbs.first().addClassName('selected');

		this.big_image = new Element('img', {
			src: this.all_thumbs.first().readAttribute('src').replace('_80x60', '_560x420') + "?" + (Math.random().toString().substring(2))
		}).setStyle({display: 'none'});
		this.gallery_container.update(this.big_image);

		this.load_images();
	},

	/**
	 * enable/disable the left/right scroller
	 */
	prepare_navigation: function()
	{
		!parseInt(this.thumbs_holder.getStyle('left')) ? this.gallery_left.addClassName('inactive') : this.gallery_left.removeClassName('inactive');

		if(parseInt(this.thumbs_holder.getStyle('left')) == this.max_left_offset || parseInt(this.thumbs_holder.getStyle('width')) < parseInt($('gallery_mask').getStyle('width'))) {
			this.gallery_right.addClassName('inactive')
		}
		else {
			 this.gallery_right.removeClassName('inactive');
		}

	},

	scroll_left: function()
	{
		if(!this.gallery_left.hasClassName('inactive'))
		{
			new Effect.Move(this.thumbs_holder, {
				x: (this.step + parseInt(this.thumbs_holder.getStyle('left'))),
				duration: .5,
				mode: 'absolute',
				afterFinish: function(){this.prepare_navigation()}.bind(this)
			});
		}
	},

	scroll_right: function()
	{
		if(!this.gallery_right.hasClassName('inactive'))
		{
			new Effect.Move(this.thumbs_holder, {
				x: (-this.step + parseInt(this.thumbs_holder.getStyle('left'))),
				duration: .5,
				mode: 'absolute',
				afterFinish: function(){this.prepare_navigation()}.bind(this)
			});
		}
	},

	load_images: function ()
	{
		var self = this;
		new Effect.Appear(this.popup, {
			afterFinish: function()
			{
				new Effect.Grow(self.big_image,
				{
					afterFinish: function()
					{
						new Effect.Appear(self.image_title, {
							afterFinish: function()
							{
								new Effect.Parallel([
									new Effect.BlindDown(self.thumbs_holder),
									new Effect.Appear(self.gallery_left),
									new Effect.Appear(self.gallery_right)
								]);
							}, duration: .5
						});
					}, duration: .5
				});
			}, duration: .5
		});

		$$('#thumbs_holder img').invoke('observe', 'click', this.thumb_click.bind(this))
	},

	thumb_click: function(evt)
	{
		el = Event.element(evt);
		this.all_thumbs.each(function(elem){
			elem.removeClassName('selected');
		});
		el.addClassName('selected')

		this.position = {left: (el.cumulativeOffset().left - this.gallery_container.cumulativeOffset().left), top: (el.cumulativeOffset().top - this.gallery_container.cumulativeOffset().top)};
		this.loader.setStyle({
			zIndex: 650,
			top:	(el.cumulativeOffset().top - this.thumbs_holder.cumulativeOffset().top + 25) + 'px',
			left:	(el.cumulativeOffset().left - this.thumbs_holder.cumulativeOffset().left) + 'px',
			display:'block'
		});

		this.load_big_image(el);
	},

	load_big_image: function(thumb)
	{
		// generate big img path also Prevent IE Image caching bug...
		var img_path = thumb.src.replace('_80x60', '_560x420') + "?" + (Math.random().toString().substring(2));
		this.image_title.update(thumb.readAttribute('title'));

		this.big_img = new Element('img', {src: img_path}).hide();
		this.gallery_container.insert({bottom: this.big_img});
		this.big_img.observe('load', this.show_big_image.bind(this));
	},

	show_big_image: function()
	{
		var anim_duration = 0.6;
		var img_width = this.big_img.getDimensions().width;
		var img_height = this.big_img.getDimensions().height;

		var to_top = (this.gallery_container.getDimensions().height - img_height)/2;
		var to_left = (this.gallery_container.getDimensions().width - img_width)/2;

		this.big_img.setStyle({
			position: 'absolute',
			top: this.position.top + 'px',
			left: this.position.left + 'px',
			zIndex: '600',
			width: '80px',
			height: '60px'
		});

		new Effect.Fade(this.gallery_container.down(), {
			duration: anim_duration,
			afterFinish: function() {
				this.gallery_container.down().remove()
			}.bind(this)
		});
		new Effect.Appear(this.big_img, {duration: anim_duration});
		new Effect.Morph(this.big_img, {
			duration: anim_duration,
			style: {
				width: img_width + 'px',
				height: img_height + 'px',
				top: to_top + 'px',
				left: to_left + 'px'
			}
		});

		this.loader.hide();
	},

	create_popup: function ()
	{
		this.popup = new Element('div', {id: 'popup_gallery'}).setStyle({
			display: 'none'
		});

		this.close_link = new Element('a', {id: 'popup_close_but'}).observe('click', this.hide_popup.bind(this)).update('&nbsp;');
		this.gallery_container = new Element('div', {id: 'popup_gallery_container'});

		this.image_title = new Element('div', {id: 'popup_image_title'}).setStyle({display: 'none'});
		this.gallery_mask = new Element('div', {id: 'gallery_mask'});
		this.thumbs_holder = new Element('div', {id: 'thumbs_holder'}).setStyle({display: 'none', left: 0});

		this.gallery_left = new Element('div', {
				id: 'gallery_left'
			}).setStyle({
				display: 'none'
			}).observe('click', this.scroll_left.bind(this));

		this.gallery_right = new Element('div', {
				id: 'gallery_right'
			}).setStyle({
				display: 'none'
			}).observe('click', this.scroll_right.bind(this));

		document.body.appendChild(this.popup);
		this.popup.appendChild(this.close_link);
		this.popup.appendChild(this.gallery_container);

		this.popup.appendChild(this.image_title);
		this.popup.appendChild(this.gallery_left);
		this.popup.appendChild(this.gallery_mask);
		this.popup.appendChild(this.gallery_right);

		this.gallery_mask.appendChild(this.thumbs_holder);
		this.thumbs_holder.insert({bottom: this.loader});

	},

	hide_popup: function ()
	{
		var self = this;
		new Effect.Parallel([
			new Effect.Fade(self.thumbs_holder),
			new Effect.Fade(self.gallery_left),
			new Effect.Fade(self.gallery_right)
		],
		{
			afterFinish: function(){
				new Effect.Fade(self.image_title, {
					afterFinish: function(){
						new Effect.Fade(self.popup, {
							afterFinish: function(){MAG.Mask.hide();}
						});
					},
					duration: .5
				});
			},
			duration: .5
		});

		 //SIMPLE HIDING
		/*new Effect.Fade(this.popup, {
			afterFinish: function() {
				this.thumbs_holder.hide();
				this.gallery_left.hide();
				this.gallery_right.hide();
				this.image_title.hide();
				MAG.Mask.hide();
			}.bind(this)
		});*/
	},

	reposition_popup: function()
	{
		screen_dims = MAG.Mask.getDimensions();
		offsets = document.viewport.getScrollOffsets();

		this.popup.setStyle({
			left: screen_dims.width / 2 - this.popup.getWidth() / 2  - offsets.left / 2 + 'px',
			top: screen_dims.height / 2 - this.popup.getHeight() / 2 + offsets.top + 'px'
		})
	}

});