/* WorkDetailController 1.0 - 2011.04.23
/*
/* Created by Luca Pillonel
/* copyright www.oxima.ch
--------------------------------------*/

var WorkDetailController = new Class({
	options : {
		works : '.work:not([class~="disabled"])'
	},
	
	initialize : function(el){
		this.fxRunning = true;
	
		this.targetThumb = el;
		this.setTips();
		this.setMask();
		
		this.thumbs = document.getElements(this.options.works);
		this.length = this.thumbs.length;
		
		//get content with ajax
		new Request.HTML({
			url : el.getElement('a').get('href'),
			onSuccess : function(tree, elements, html){
				this.openedDetail = new WorkDetail(el, html);
				this.fxRunning = false;
				
				this.addArrows();
				this.setArrows();
				this.setBehaviour();
				
				//set url
				urlController.setPage(el.getElement('a').get('href'));
			}.bind(this)
		}).send();

	},
	
	setTips : function(){
		this.tips = new Tips(false, {
	        onShow: function(tip){
	        	if(this.fxRunning) return false;
	            tip.setStyles({
	                visibility: 'hidden',
	                display: 'block',
	                opacity: 0
	            }).fade(1);
	        }.bind(this),
	        onHide: function(tip){
	        	tip.fade(0).get('tween').chain(function(){
					tip.setStyle('display', 'none');
	            });
	        }
	    });
	},
	
	setMask : function(){
		this.mask = new Mask(document.body, {
			'id' : 'work-mask',
			onShow : function(){
				$(this.element).setStyle('opacity', 0).fade(0.7);
				//document.body.setStyle('overflow', 'hidden');
			},
			onClick : function(){ 
				//close the detail
				this.closeDetail();
			}.bind(this),
			onDestroy : function(){
				//document.body.setStyle('overflow', 'inherit');
			}
		}).show();
		
		$(this.mask).setProperty('rel', 'Close detail');
		
		this.tips.attach($(this.mask));
	},
	
	addArrows : function(){
		this.previous = new Element('div', {
			id : 'work-previous',
			rel : 'previous',
			events : {
				click : this.previousWork.bind(this)
			},
			styles : {
				opacity : 0,
				top:(window.getHeight() - 125) / 2,
				left : -67
			}
		}).inject(document.body).fade(1);
	
		this.next = new Element('div', {
			id : 'work-next',
			rel : 'next',
			events : {
				click : this.nextWork.bind(this)
			},
			styles : {
				opacity : 0,
				top: (window.getHeight() - 125) / 2,
				left : window.getWidth()
			}
		}).inject(document.body).fade(1);
		
		//position 
		this.arrowPreviousFx = new Fx.Morph(this.previous, {
			link : 'cancel',
			duration : 700,
			transition: 'expo:in:out'
		});
		this.arrowNextFx = new Fx.Morph(this.next, {
			link : 'cancel',
			duration : 700,
			transition: 'expo:in:out'
		});
		
		this.arrowsResizeFunction = function(){
			this.arrowPreviousFx.start({
				left : (window.getWidth() - 960) / 2 - 67 - 30,
				top : (window.getHeight() - 125) / 2
			});
			
			this.arrowNextFx.start({
				left : (window.getWidth() + 960) / 2,
				top : (window.getHeight() - 125) / 2
			});
		}.bind(this);
		
		//this.tips.attach([this.previous, this.next]);
		
		this.arrowsResizeFunction();
		window.addEvent('resize', this.arrowsResizeFunction);
	},
	
	setArrows : function(){		
		//disable previous
		if(!this.targetThumb.getPrevious(':not([class~="disabled"])')) {
			this.previous.fade(0.2);
			this.previous.addClass('disabled');
		} else {
			this.previous.fade(1);
			this.previous.removeClass('disabled');
		}
		
		//disable next
		if(!this.targetThumb.getNext(':not([class~="disabled"])')) {
			this.next.fade(0.2);
			this.next.addClass('disabled');
		} else {
			this.next.fade(1);
			this.next.removeClass('disabled');
		}
	},
	
	setBehaviour : function(){
		this.maskResizeFunction = function(){
			this.mask.position();
		}.bind(this);
		
		this.keyPressedFunction = function(e){
			switch(e.key) {
				case 'left' :
					this.previousWork();
					break;
				case 'right' :
					this.nextWork();
					break;
				case 'esc' :
					this.closeDetail();
					break;
			}
		}.bind(this);
		
		window.addEvents({
			resize : this.maskResizeFunction,
			keydown : this.keyPressedFunction
		});
	},
	
	previousWork : function(){
		//get previous thumb
		var thumb = this.targetThumb.getPrevious(':not([class~="disabled"])');
		
		if(!thumb || this.fxRunning) return false;
		this.fxRunning = true;
		this.targetThumb = thumb;
		this.openedDetail.close('right');
		this.tips.hide();
		
		//new detail ajax
		new Request.HTML({
			url : this.targetThumb.getElement('a').get('href'),
			onSuccess : function(tree, elements, html){
				var myFunction = function(){
					if(!$$('.ajax-load').length) {
						this.openedDetail = new WorkDetail(this.targetThumb, html, 'right');
						this.fxRunning = false;
					} else {
						myFunction.delay(300, this);
					}
				}.bind(this);
				myFunction();
				
				//need to click on previos-thumbs in the background?
				if(this.targetThumb.getCoordinates().left > 1000)
					$('previous-works').fireEvent('click', new Event());
			}.bind(this)
		}).send();
		
		//set url
		urlController.setPage(this.targetThumb.getElement('a').get('href'));
		
		this.setArrows();
	},
	
	nextWork : function(){
		//get next thumb
		var thumb = this.targetThumb.getNext(':not([class~="disabled"])');
		
		if(!thumb || this.fxRunning) return false;
		this.fxRunning = true;
		this.targetThumb = thumb;
		this.openedDetail.close('left');
		this.tips.hide();
		
		//new detail ajax
		new Request.HTML({
			url : this.targetThumb.getElement('a').get('href'),
			onSuccess : function(tree, elements, html){
				var myFunction = function(){
					if(!$$('.ajax-load').length) {
						this.openedDetail = new WorkDetail(this.targetThumb, html, 'left');
						this.fxRunning = false;
					} else {
						myFunction.delay(300, this);
					}
				}.bind(this);
				myFunction();
				
				//need to click on next-thumbs in the background?
				if(this.targetThumb.getCoordinates().left > 1000)
					$('next-works').fireEvent('click', new Event());
			}.bind(this)
		}).send();
		
		//set url
		urlController.setPage(this.targetThumb.getElement('a').get('href'));
		
		this.setArrows();
	},
	
	closeDetail : function(){
		
		//remove Event
		window.removeEvent('resize', this.maskResizeFunction);
		window.removeEvent('resize', this.arrowsResizeFunction);
		window.removeEvent('keydown', this.keyPressedFunction);
		
		//remove tips
		this.tips.detach($(this.mask));
		$$('.tip-wrap').destroy();
		$(this.tips).fade(0).get('tween').chain(function(){
			$(this.tips).hide().destroy();
			delete this.tips;
		}.bind(this));
		
		
		//remove arrows
		this.arrowPreviousFx.start({
			left : - 67
		});
		this.arrowNextFx.start({
			left : window.getWidth()
		}).chain(function(){
			this.previous.removeEvents();
			this.next.removeEvents();
			Element.dispose(this.previous);
			Element.dispose(this.next);
			delete this.previous;
			delete this.next;
		}.bind(this));
		
		
		//close detail
		this.openedDetail.close();
		delete this.openedDetail;
		
		
		//remove mask
		var el = $(this.mask);
		el.fade.delay(300, $(this.mask), 'out');
		(function(){
			el.removeEvents();
			Element.empty(el);
			Element.dispose(el);
		}).delay(500);
		
		//destruction
		delete workDetailController;
		
		//set url
		urlController.setPage('index');
		
	}
});