window.addEvent('domready', function() {
	$$('.pg-rl').each(function(wrapper) {
		new pgRibbonLightbox(wrapper);
	});
});

var pgRibbonLightbox = new Class({
																 
	Implements: [Options],
 
	options: {
		initial: 0
	},
												
	initialize: function(el, options) {
		//options
		this.setOptions(options);
		
		//main element reference
		this.wrapper = $(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));
		
		$('screenshots-link').addEvent('click',function(){
			this.thumbs.images[0].fireEvent('click');			
			return false;
		}.bind(this));
		
		//preload
		this.preload();
		
		//-----
		
		//ribbon
		this.ribbon = {
			perPage: 2,
			page: 0,
			thumbWidth: 107,
			scroller: false,
			scrollerWrapper: this.wrapper.getElement('.thumbs-ribbon-scroller'),
			thumbs: this.wrapper.getElement('.thumbs'),
			prev: this.wrapper.getElement('.ribbon').getElement('.prev'),
			next: this.wrapper.getElement('.ribbon').getElement('.next')
		};

		//adjust scroller
		this.ribbon.scrollerWrapper.setStyle('width', (this.thumbs.images.length == 0 ? 10 : 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.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.ribbon.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 / this.ribbon.perPage)) this.ribbon.page++;
				break;
		}

		var x = this.ribbon.page * (this.ribbon.thumbWidth * this.ribbon.perPage);
		this.ribbon.scroller.start(x);
		
		return this;
	}
	
});