window.addEvent('domready', function() {

	$$('.pg-rl').each(function(wrapper) {

		if(!wrapper.hasClass('pg-init')) new pgRibbonLightbox(wrapper);

		wrapper.addClass('pg-init');

	});

});



var pgRibbonLightbox = new Class({

																 

	Implements: [Options],

 

	options: {

		initial: 0,

		perPage: 7

	},

												

	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

		};

		

		//-----

		

		//thumbs

		this.thumbs = {

			images: this.wrapper.getElements('.thumbs img'),

			imagesSrc: []

		};

		

		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();

		

		//-----

		

		//ribbon

		this.ribbon = {

			page: 0,

			thumbWidth: 79,

			scroller: false,

			scrollerWrapper: this.wrapper.getElement('.thumbs-ribbon-scroller'),

			thumbsWrapper: this.wrapper.getElement('.thumbs-wrapper'),

			thumbs: this.wrapper.getElement('.thumbs'),

			prev: this.wrapper.getElement('.ribbon').getElement('.prev'),

			next: this.wrapper.getElement('.ribbon').getElement('.next')

		};

		

		//set widths

		if(this.thumbs.images.length > 0) {

			this.ribbon.thumbWidth = this.thumbs.images[0].getSize().x + this.thumbs.images[0].getStyle('margin-left').toInt() + this.thumbs.images[0].getStyle('margin-right').toInt();

			this.ribbon.thumbsWrapper.setStyle('width', (this.options.perPage * this.ribbon.thumbWidth + 1) + 'px');

			this.ribbon.thumbs.setStyle('width', (this.options.perPage * this.ribbon.thumbWidth) + 'px');

			this.ribbon.scrollerWrapper.setStyle('width', this.thumbs.images.length * this.ribbon.thumbWidth);

			var r = this.wrapper.getElement('.ribbon');

			this.wrapper.setStyle('width', (this.ribbon.prev.getSize().x + this.ribbon.next.getSize().x + this.ribbon.thumbsWrapper.getSize().x) + 'px');

		}

		else {

			this.ribbon.scrollerWrapper.setStyle('width', this.options.perPage * this.ribbon.thumbWidth);

		}



		//adjust scroller

		this.ribbon.scrollerWrapper.setStyle('width', (this.thumbs.images.length == 0 ? this.options.perPage : this.thumbs.images.length) * this.ribbon.thumbWidth);

	

		//create scroller

		this.ribbon.scroller = new Fx.Scroll(this.ribbon.thumbs, {

			wait: false,

			duration: 1000,

			transition: Fx.Transitions.Quad.easeInOut,

			wheelStops: false

		});

		

		//events

		this.ribbon.prev.addEvent('click', function() {

			this.scrollRibbon('prev');

			return false;

		}.bind(this));

		

		this.ribbon.next.addEvent('click', function() {

			this.scrollRibbon('next');

			return false;

		}.bind(this));

		

		//-----

		

		//tooltips

		this.tips = new Tips(this.thumbs.images, {

			className: 'pg-rl-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');

			}

		});

		

		//-----

		

		//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.thumbs.images.each(function(thumb) {

			this.thumbs.imagesSrc.push(thumb.getParent().get('href'));

		}.bind(this));

		

		new Asset.images(this.thumbs.imagesSrc);

		

		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;

	

		//trigger lightbox

		var a = this.thumbs.images[index].getParent();

		a.fireEvent('click');

		

		//adjust scroller

		this.ribbon.page = Math.floor(index / this.options.perPage);

		this.scrollRibbon();

				

		return this;

	},

	

	//scroll the ribbon by page

	scrollRibbon: function(how) {

		switch(how) {

			case 'prev':

				if(this.ribbon.page > 0) this.ribbon.page--;

				break;

			case 'next':

				if(this.ribbon.page < Math.floor((this.thumbs.images.length - 1) / this.options.perPage)) this.ribbon.page++;

				break;

		}



		var x = this.ribbon.page * (this.ribbon.thumbWidth * this.options.perPage);

		this.ribbon.scroller.start(x);

		

		return this;

	}

	

});