/*
*	Dependencies:
*		MooTools 1.2.1
*		Custom Plugin: ThumbScroller
*		MooTools Plugin: Hash: Assets
*/

var PhotoGalleries = new Class({
	Implements: Options,
	options: {
		active: 1,
		prev: '.prev',
		next: '.next',
		url: ''
	},
	initialize: function(container, options){
		this.setOptions(options);
		this.container = $(container) || false;
		this.togglerPrev = $$(this.options.prev);
		this.togglerNext = $$(this.options.next);
		this.galleries = {};
		this.gallery = {};
		this.image = this.container.getElement('div.image img');
		this.pagination = this.container.getElement('div.pages');
		this.pages = this.pagination.getElements('a');
		this.ThumbScroller = new ThumbScroller(this.container.getElement('div.scroll'), {
			prev: this.container.getElement('a.up'),
			next: this.container.getElement('a.down'),
			active: this.options.active
		});
		this.title = this.container.getElement('div.description h2');
		this.description = this.container.getElement('div.description p');
		this.rating = this.container.getElement('div.average-rating div.rating');
		this.thumbs = this.ThumbScroller.thumbs;
		this.count = this.pages.length;
		this.active = this.options.active;
		this.setup();
	},
	setup: function(){
		this.loader = new Element('div');
		this.loader.inject($(document).getElement('body'));
		this.load(this.active);
		this.togglerPrev.addEvent('click', this.prev.bindWithEvent(this));
		this.togglerNext.addEvent('click', this.next.bindWithEvent(this));
		this.thumbs.each(function(el, i){
			el.addEvent('click', function(e){
				e.stop();
				if(i == (this.ThumbScroller.active - 1)) return false;
				this.load((i + 1));
			}.bind(this));
		}.bind(this));
		this.pages.each(function(el, i){
			el.addEvent('click', function(e){
				e.stop();
				this.show((i+1));
			}.bind(this));
		}.bind(this));
	},
	load: function(pos){
		var id = this.thumbs[pos - 1].getProperty('id');
		this.thumbs[this.ThumbScroller.active - 1].removeClass('active');
		if($defined(this.galleries[pos])){
			this.paginate(this.galleries[pos].response.json.gallery);
			this.show(this.options.active);
		} else {
			this.galleries[pos] = new Request.JSON({
				url: this.options.url,
				onRequest: function(){
					this.loader.setStyle('display','block');
				}.bind(this),
				onComplete: function(responseJSON){
					this.paginate(responseJSON.gallery);
					this.show(this.options.active);
					this.rating.set('class', 'rating rating-' + responseJSON.galleryDetails.roundedRating);
					this.rating.set('text', responseJSON.galleryDetails.rating);
					this.loader.setStyle('display','none');
				}.bind(this)
			}).get({id: id});
		}
		this.ThumbScroller.active = pos;
		this.thumbs[pos - 1].addClass('active');
	},
	show: function(pos){
		if(pos == this.active) return false;
		if(this.active != 0) this.deactivate(this.active);
		this.activate(pos);
		this.active = pos;
		(this.active == 1) ? this.togglerPrev.addClass('disable') : this.togglerPrev.removeClass('disable');
		(this.active == this.count) ? this.togglerNext.addClass('disable') : this.togglerNext.removeClass('disable');
		pos -= 1;
		this.image.fade('hide');
		if(this.gallery[this.ThumbScroller.active + '-' + pos]){
			this.gallery[this.ThumbScroller.active + '-' + pos].replaces(this.image);
			this.image = this.gallery[this.ThumbScroller.active + '-' + pos];
			this.image.fade('show');
		} else {
			this.gallery[this.ThumbScroller.active + '-' + pos] = new Asset.image(this.pages[pos].getProperty('href'), {
				title: this.pages[pos].getProperty('title'),
				onload: function(img){
					img.replaces(this.image);
					this.image = img;
					this.image.fade('show');
				}.bind(this),
				onerror: function(error){
					alert(this.title + ' image not found');
				}
			});
		}
		this.title.set('html', this.pages[pos].retrieve('title'));
		this.description.set('html', this.pages[pos].retrieve('description'));
	},
	activate: function(pos){
		pos -= 1;
		this.pages[pos].addClass('active');
	},
	deactivate: function(pos){
		pos -= 1;
		this.pages[pos].removeClass('active');
	},
	prev: function(e){
		if(e) e.stop();
		if(e && e.target.hasClass('disable')) return false;
		var active = this.active;
		(active > 1 ) ? active -= 1 : active = 1;
		this.show(active);
	},
	next: function(e){
		if(e) e.stop();
		if(e && e.target.hasClass('disable')) return false;
		var active = this.active;
		(active < this.count ) ? active += 1 : active = this.count;
		this.show(active);
	},
	paginate: function(gallery){
		this.active = 0;
		var pages = '';
		gallery.each(function(el, i){
			pages += '<a href="' + el.src + '" title="' + el.title + '">' + (i+1) + '</a>\n';
		})
		this.pagination.set('html', pages);
		this.pages = this.pagination.getElements('a');
		this.pages.each(function(el, i){
			el.store('title', gallery[i].title);
			el.store('description', gallery[i].description);
		});
		this.count = this.pages.length;
		this.pages.each(function(el, i){
			el.addEvent('click', function(e){
				e.stop();
				this.show((i+1));
			}.bind(this));
		}.bind(this));
	}
});