/* ThumbsWork 1.1 - 2011.04.22
/*
/* Created by Luca Pillonel
/* copyright www.oxima.ch
--------------------------------------*/

var ThumbsWork = new Class({

	options : {
		thumbsWidth : 331,
		translation : 150,
		fxDuration : 800,
		fxDelay : 200
	},
	
	initialize : function(){
		if(!document.body.hasClass('page-portfolio')) return;
		
		this.index = urlController.getIndex();
		this.fxRunning = false;
		this.previous = false;
		this.next = true;
		
		this.setIndex(0);
		this.showThumbs('left');
		this.constructTags();
		this.activateTags();
		this.setBehaviour();
		this.setProgressBar();
		
		urlController.setPage('index');
	},
	
	showThumbs : function(way){
		//get all elements
		$('works').getElements('.work:not([class~="disabled"])').each(function(work, i){
			if(i < this.index || i > this.index + 2) return false;

			this.showThumb(work, i%3, way);
		}, this);
	},
	
	hideThumbs : function(way){
		//get all elements
		$('works').getElements('.work:not([class~="disabled"])').each(function(work, i){
			if(i < this.index || i > this.index + 2) return false;
			
			this.hideThumb(work, i%3, way);
		}, this);
	},
	
	showThumb : function(el, pos, way){
		var targetPos = pos*this.options.thumbsWidth + 5;
		
		if(way == 'left') {
			var initPos = targetPos + this.options.translation;
			var delay = pos * this.options.fxDelay
		} else {
			var initPos = targetPos - this.options.translation;
			var delay = (2 - pos) * this.options.fxDelay
		}
		
		el.setStyles({
			opacity: 0,
			left: initPos
		});
		
		el.addClass('visible').store('position', pos);
		
		(function(){
			new Fx.Tween(el, {
				duration : this.options.fxDuration,
				transition : 'cubic:out'
			}).start('left',targetPos);
			
			new Fx.Tween(el, {
				duration : this.options.fxDuration
			}).start('opacity',1);

		}).delay(delay, this);
	},
	
	
	hideThumb : function(el, pos, way){
		if(way == 'left') {
			var destPos = el.getStyle('left').toInt() - this.options.translation;
			var delay = pos%3 * this.options.fxDelay
		} else {
			var destPos = el.getStyle('left').toInt() + this.options.translation;
			var delay = (2 - pos%3) * this.options.fxDelay
		}
		
		el.removeClass('visible');
		
		(function(){
			new Fx.Tween(el, {
				duration : this.options.fxDuration,
				transition : 'cubic:in',
				onComplete : function(){
					el.setStyle('left', 1100);
				}
			}).start('left', destPos);
			
			new Fx.Tween(el, {
				duration : this.options.fxDuration
			}).start('opacity',0);

		}).delay(delay, this);
	},
	
	moveThumb : function(el, pos){
		(function(){
			new Fx.Tween(el).start('left', pos * 331 + 5);
			el.store('position', pos);
		}).delay(el.retrieve('position') * this.options.fxDelay);
	},
	
	setProgressBar : function(){
		var length = $('works').getElements('.work:not([class~="disabled"])').length;
		
		//set progressbar
		var width = Math.ceil((this.index/3 + 1) / Math.ceil(length/3) * 960);
		if(width > 960) width = 0;
		
		new Fx.Tween('progress', {
			property : 'width',
			duration : this.options.fxDuration + this.options.fxDelay
		}).start(width);
		
		if(width != 960) {
			$('progress').addClass('resizable');
		} else {
			$('progress').removeClass('resizable');
		}
	},
	
	setIndex : function(id){
		this.index += id;
		
		var length = $('works').getElements('.work:not([class~="disabled"])').length;
		
		if(this.index + 3 >= length) {
			this.next = false;
			$('next-works').addClass('disabled');
		} else {
			this.next = true;
			$('next-works').removeClass('disabled');
		}
		
		if (this.index - 3 < 0) {
			this.previous = false;
			$('previous-works').addClass('disabled');
		} else {
			this.previous = true;
			$('previous-works').removeClass('disabled');
		}
	},
	
	setFxRunning : function(method){
		this.fxRunning = true;
		$('previous-works').addClass('disabled');
		$('next-works').addClass('disabled');
		
		if(method == 'tags') {
			var delay = this.options.fxDuration + this.options.fxDelay;
			this.setProgressBar();
		} else {
			var delay = 2*this.options.fxDuration + this.options.fxDelay;
		}
		
		(function(){
			this.fxRunning = false;
			this.setIndex(0);
		}).delay(delay, this);
	},
	
	setBehaviour : function(){
		$('next-works').addEvent('click', function(e){
			e.preventDefault();
			
			//get number of works
			if(this.next && !this.fxRunning) {
				this.hideThumbs('left');
				this.setIndex(3);
				this.setProgressBar();
				this.showThumbs.delay(this.options.fxDuration, this, 'left');
				this.setFxRunning();
			}
		}.bind(this));
		
		$$('.work a').each(function(a){
			a.addEvent('click', function(e){
				e.preventDefault();
			});
		});
		
		$('previous-works').addEvent('click', function(e){
			e.preventDefault();
			
			if(this.previous && !this.fxRunning) {
				this.hideThumbs('right');
				this.setIndex(-3);
				this.setProgressBar();
				this.showThumbs.delay(this.options.fxDuration, this, 'right');
				this.setFxRunning();
			}
		}.bind(this));
		
		$$('.work').each(function(work){
			var page = 'page_' + work.getElement('a').get('href').replace(urlController.options.pageURL, '').replace(urlController.options.extention, '');
			work.addEvents({
				mouseenter : function(){
					this.setOverlay(work)
				}.bind(this),
				mouseleave : function(){
					this.removeOverlay(work)
				}.bind(this),
				click : function(){
					workDetailController = new WorkDetailController(work);
				}.bind(this)
			});//.addClass(page);
		}, this);
	},
	
	setOverlay : function(work) {
		if (!work.retrieve('overlay')) {
			//create overlay
			var overlayWrapper = new Element('div', {
				'class' : 'overlay-wrapper',
				opacity : 0
			}).inject(work);
			
			var overlay = new Element('div', {
				'class' : 'overlay'
			}).inject(overlayWrapper);
			
			var o = new Element('div', {
				'class' : 'bigo'
			}).inject(overlay);
			
			new Element('span', {
				html : '[ detail ]',
				'class' : 'detail'
			}).inject(overlay);
			
			var fx = new Fx.Tween(overlayWrapper, {
				property : 'opacity',
					link : 'cancel'
			}).start(1);
			
			(function(){o.addClass('rotate')}).delay(50);
			
			work.store('overlay', fx);
		} else {
			work.retrieve('overlay').start(1);
			work.getElement('.bigo').addClass('rotate');
		}
	},
	
	
	removeOverlay : function(work){
		work.retrieve('overlay').start(0);
		work.getElement('.bigo').removeClass('rotate');
	},
	
	constructTags : function(){
		//prepare array
		var tags = [];
		
		//get all tags from works
		$('works').getElements('.work').each(function(work){
			work.getProperty('rel').split(' ').each(function(tag){
				if(!tags.contains(tag)) tags.push(tag);
			});
		});
		
		//order works
		tags.sort()
		
		//create links
		tags.each(function(tag){
			var li = new Element('li').inject($('middler').getElement('ul.tags'));
			new Element('a', {
				href : '#',
				html : tag.replace('-',' ')
			}).inject(li);
		});
	},
	
	activateTags : function(){
		var selectedTag = false;
		$$('.tags a').each(function(tag){
			tag.addEvent('click', function(e){
				e.preventDefault();
				
				if(this.fxRunning) return;
				
				tag.toggleClass('selected');
				
				if(!tag.hasClass('selected')) {
					selectedTag = false;
				} else {
					selectedTag = tag;
				}
				
				//deselect all other tags
				$$('.tags a').each(function(link){
					if(link != selectedTag) {
						link.removeClass('selected');
					}
				});
				
				//prepare selector
				var selector = '';
				
				if(selectedTag) selector = '[rel~="'+ tag.get('html').replace(' ', '-') +'"]';
				
				//get works
				var selected = $('works').getElements('.work'+ selector);
				
				//now get unused
				var disabled = $('works').getElements('.work').filter(function(work){
					return !selected.contains(work);
				});
				
				disabled.each(function(work, i){
					work.addClass('disabled');
					
					//hide only in displayed
					if(work.hasClass('visible'))
						this.hideThumb(work, i, 'left');
				}, this);
				
				selected.each(function(work, i){
					work.removeClass('disabled');
					
					//Show only 3 first
					if( i < 3) {
						if(!work.hasClass('visible')) {
							//show thumb
							this.showThumb(work, i, 'left');
						} else {
							//move thumb
							this.moveThumb(work, i);
						}
					} else {
						this.hideThumb(work, 0, 'left');
					}
				}, this);
				
				this.index = 0;
				this.setProgressBar();
				this.setFxRunning('tags');
				
			}.bind(this))
		}, this);
	}
	
	/*
	activateTags : function(){
		var selectedTags = [];
		$$('.tags a').each(function(tag){
			tag.addEvent('click', function(e){
				e.preventDefault();
				
				if(this.fxRunning) return;
				
				tag.toggleClass('selected');
				
				if(!tag.hasClass('selected')) {
					selectedTags.erase(tag.get('html'));
				} else {
					selectedTags.push(tag.get('html'));
				}
				
				//prepare selector
				var selector = '';
				Array.each(selectedTags, function(tag){
					//add tag to selector
					selector += '[rel~="'+ tag.replace(' ', '-') +'"]';
				});
				
				//get works
				var selected = $('works').getElements('.work'+ selector);
				
				//now get unused
				var disabled = $('works').getElements('.work').filter(function(work){
					return !selected.contains(work);
				});
				
				disabled.each(function(work, i){
					work.addClass('disabled');
					
					//hide only in displayed
					if(work.hasClass('visible'))
						this.hideThumb(work, i, 'left');
				}, this);
				
				selected.each(function(work, i){
					work.removeClass('disabled');
					
					//Show only 3 first
					if( i < 3) {
						if(!work.hasClass('visible')) {
							//show thumb
							this.showThumb(work, i, 'left');
						} else {
							//move thumb
							this.moveThumb(work, i);
						}
					} else {
						this.hideThumb(work, 0, 'left');
					}
				}, this);
				
				this.index = 0;
				this.setProgressBar();
				this.setFxRunning('tags');
				
			}.bind(this))
		}, this);
	}
	*/
});