window.addEvent('domready', function() {
	$$('.pg-gf').each(function(wrapper) {
		if(!wrapper.hasClass('pg-init')) new pgGridFullsize(wrapper);
		wrapper.addClass('pg-init');
	});
});

var pgGridFullsize = new Class({
																 
	Implements: [Options],
 
	options: {
		initial: 0
	},
												
	initialize: function(el, options) {
		//options
		this.setOptions(options);
		
		//main element reference
		this.wrapper = document.id(el);
		
		//last item to be clicked
		this.last = {
			clicked: false,
			index: 0
		};
		
		//-----
		
		//fullsize
		this.fullsize = {
			images: this.wrapper.getElement('.fullsize').getElements('img[class!="loader-image"]'),
			imagesSrc: [],
			width: this.wrapper.getElement('.fullsize').getStyle('width').toInt(),
			height: this.wrapper.getElement('.fullsize').getStyle('height').toInt(),
			title: this.wrapper.getElement('.title').getElement('.fullsize-title'),
			description: this.wrapper.getElement('.title').getElement('.fullsize-description'),
			loader: this.wrapper.getElement('.fullsize').getElement('.loader')
		};
		
		//hide all fullsize
		this.fullsize.images.fade('hide');
		this.fullsize.images.setStyle('display', 'block');
		
		//-----
		
		//thumbs
		this.thumbs = {
			images: this.wrapper.getElements('.thumbs img')
		};
		
		this.thumbs.images.each(function(thumb) {																		 
			//store thumbnail info
			var parts = thumb.get('title').split('##');
			
			thumb.set('title', '');
			thumb.store('index', parts[0]);
			thumb.store('title', parts[1].length > 0 ? parts[1] + ':' : ' ');
			thumb.store('tip:title', parts[1]);
			thumb.store('description', parts[2]);
			thumb.store('tip:text', parts[2]);
			
			//click
			thumb.addEvent('click', function() {
				this.showImage(arguments[0]);
				return false;
			}.bind(this, parts[0]));
		}.bind(this));
		
		
		//preload
		this.preload();
		
		//-----
		
		//nav
		this.nav = {
			prev: this.wrapper.getElement('.fullsize-wrapper').getElement('.prev'),
			next: this.wrapper.getElement('.fullsize-wrapper').getElement('.next')
		};
		
		this.nav.prev.addEvent('click', function(event) {
			event = new Event(event).stop();
			this.showImage(this.last.index - 1);
			return false;
		}.bind(this));
		
		this.nav.next.addEvent('click', function(event) {
			event = new Event(event).stop();
			this.showImage(this.last.index + 1);
			return false;
		}.bind(this));
		
		//-----
		
		//tooltips
		this.tips = new Tips(this.thumbs.images, {
			className: 'pg-gf-tip',
			offset: {'x': -100, 'y': -105},
			showDelay: 1,
			hideDelay: 1,
			onShow: function(tip) {
				this.options.offset.y = this.tip.getSize().y * -1 - 15;
				this.tip.setStyle('top', (pgMousePosition.y + this.options.offset.y) + 'px');
				this.tip.fade('show');
			},
			onHide: function(tip) {
				this.tip.fade('hide');
				this.tip.setStyle('top', '0px');
			}
		});
		
		//-----
		
		//keyboard navigation (if standalone)
		if(document.id(document.body).hasClass('pg')) {
			document.addEvent('keydown', function(event) {			
				switch(event.key) {
					//first
					case 'f':
					case 'up':
						this.showImage(0);
						break;
					//previous
					case 'p':
					case 'left':
						this.showImage(this.last.index - 1);
						break;
					//next
					case 'n':
					case 'right':
						this.showImage(this.last.index + 1);
						break;
					//last
					case 'l':
					case 'down':
						this.showImage(this.thumbs.images.length - 1);
						break;					
				}
			}.bind(this));
		}
		
		//get mouse coordinates
		document.id(document.body).addEvent('mousemove', function(event) {
			pgMousePosition = {x: event.page.x, y: event.page.y};
		});
	},
	
	//preload all images, adjust margins, trigger initial click
	preload: function() {
		this.fullsize.images.each(function(fs) {
			this.fullsize.imagesSrc.push(fs.get('src'));
		}.bind(this));
		
		new Asset.images(this.fullsize.imagesSrc, { 
			onProgress: function(counter, index) {
				var fs = this.fullsize.images[index];
				var fsWidth = fs.getStyle('width').toInt();
				var fsHeight = fs.getStyle('height').toInt();
				fs.setStyles({
					marginTop: Math.ceil((this.fullsize.height - fsHeight) / 2),
					marginLeft: Math.ceil((this.fullsize.width - fsWidth) / 2)
				});
				
				//trigger image
				if(index == this.options.initial) {
					if(this.fullsize.loader) this.fullsize.loader.setStyle('display', 'none');
					this.showImage(index);
				}
			}.bind(this)
		});
		
		return this;
	},
	
	//image changed (called when a thumb is clicked)
	showImage: function(index) {
		index = index.toInt();
		
		//adjust index if out of bounds
		if(index < 0) index = this.thumbs.images.length - 1;
		else if(index > this.thumbs.images.length - 1) index = 0;
	
		//fade last image out
		if(this.last.clicked) {
			this.last.clicked.fade('out');
			this.thumbs.images[this.last.index].removeClass('current');
		}
		
		this.thumbs.images[index].addClass('current');
		this.last.index = index;
		
		//fade new image in
		this.last.clicked = this.fullsize.images[this.last.index];
		this.last.clicked.fade('in');
		this.fullsize.title.set('html', this.thumbs.images[index].retrieve('title'));
		this.fullsize.description.set('html', this.thumbs.images[index].retrieve('description'));
				
		return this;
	}
	
});