/* WorkDetail 1.0 - 2011.04.22
/*
/* Created by Luca Pillonel
/* copyright www.oxima.ch
--------------------------------------*/

var WorkDetail = new Class({

	Implements : Options,

	options : {
		width : 960,
		height : 451,
		padding: 11,
		setWrapper : true
	},
	
	initialize : function(el, data, way, options){
		
		this.setOptions(options);
	
		//set right size
		this.options.rWidth = this.options.width - 2 * this.options.padding;
		this.options.rHeight = this.options.height - 2 * this.options.padding;
		
		this.targetThumb = el;
		this.setWrapper(way);
		this.setContent(data);
		
		//get thumbs
		this.imagesLength = this.element.getElements('.slider img').length;
		this.imagesPosition = 0;
		
		this.setBehaviour();
	},
	
	toElement : function(){
		return this.element;
	},
	
	setContent : function(data){
		if(this.options.setWrapper) this.element.set('html', data);
		var el = this.element.getFirst().setStyle('opacity', 0);
		
		(function(){
			el.fade(0, 1);
			imageLoader.load(this.element);
		}).delay(650, this);
		
		//prepare some elements for apparition
		$('work-detail-desc').getElement('.slider').setStyle('opacity', 0);
		
		this.animateApparition.delay(800, this);
	},
	
	animateApparition : function(){
		if(this.imagesLength > 3) {
			//animate arrows
			$('thumbs-previous').setStyle('opacity', 0.3).tween('left', 6);
			$('thumbs-next').tween('right', 6);
		} else {
			//remove arrows
			$('thumbs-previous').setStyle('display', 'none');
			$('thumbs-next').setStyle('display', 'none');
		}
		
		
		$('work-detail-desc').getElement('.slider').fade(0,1);
	},
	
	setWrapper : function(way){
		if(this.options.setWrapper) {
			//set style according to way
			if(way == undefined) {
				var coord = this.targetThumb.getPosition();
				var styles = {
					left : coord.x,
					top : coord.y,
					opacity: 0
				}
			} else if(way == 'left') {
				var styles = {
					width : this.options.rWidth,
					height : this.options.rHeight,
					left : window.getWidth(),
					top : (window.getHeight() - this.options.height) / 2,
					opacity: 1
				}
			} else if(way == 'right') {
				var styles = {
					width : this.options.rWidth,
					height : this.options.rHeight,
					left : -this.options.width,
					top : (window.getHeight() - this.options.height) / 2,
					opacity: 1
				}
			}
		
			//set a element on top
			this.element = new Element('div', {
				id : 'work-detail',
				styles : styles
			}).inject(document.body);
			
			//once done make a BIIG morph
			this.fxPosition = new Fx.Morph(this.element, {
				link : 'cancel',
				duration : 700,
				transition: 'expo:in:out'
			}).start({
				opacity : 1,
				width : this.options.rWidth,
				height : this.options.rHeight,
				top : (window.getHeight() - this.options.height) / 2,
				left : (window.getWidth() - this.options.width) / 2
			});
		} else {
			this.element = this.targetThumb;
		}
	},
	
	setBehaviour : function(){
		if(this.options.setWrapper) {
			this.resizeFunction = function(){
				this.fxPosition.start({
					top : (window.getHeight() - this.options.height) / 2,
					left : (window.getWidth() - this.options.width) / 2
				});
			}.bind(this);
			window.addEvent('resize', this.resizeFunction);
		}
		
		//thumbs events and settings
		if(this.imagesLength <= 3) {
			$('thumbs-next').addClass('disabled');
			$('thumbs-next').tween('opacity', 0.3);
		}
		
		$('thumbs-previous').addEvent('click', function(){
			if( !$('thumbs-previous').hasClass('disabled') && !this.fxRunning || this.bypassControls) {
				this.fxRunning = true;
				this.imagesPosition -= 3;
				this.element.getElement('.slider').tween('left', this.imagesPosition/3 * -276).get('tween').chain(function(){
					this.fxRunning = this.bypassControls;
					this.bypassControls = false;
				}.bind(this));
				if(this.imagesLength > 3) $('thumbs-next').removeClass('disabled').tween('opacity', 1);
				
				//disable previous?
				if(this.imagesPosition/3 == 0 && this.imagesLength > 3) {
					$('thumbs-previous').addClass('disabled').tween('opacity', 0.3)
				}
			}
		}.bind(this));
		
		$('thumbs-next').addEvent('click', function(){
			if( !$('thumbs-next').hasClass('disabled') && !this.fxRunning || this.bypassControls) {
				this.fxRunning = true;
				this.imagesPosition += 3;
				this.element.getElement('.slider').tween('left', this.imagesPosition/3 * -276).get('tween').chain(function(){
					this.fxRunning = this.bypassControls;
					this.bypassControls = false;
				}.bind(this));
				if(this.imagesLength > 3) $('thumbs-previous').removeClass('disabled').tween('opacity', 1);
				
				//disable next?
				if(this.imagesPosition/3+1 == Math.ceil(this.imagesLength/3) && this.imagesLength > 3) {
					$('thumbs-next').addClass('disabled').tween('opacity', 0.3)
				}
			}
		}.bind(this));
		
		this.element.getElements('.slider img').each(function(thumb, i){
			thumb.store('position', i).addClass('t_'+(i+1)).addEvent('click', function(){
				if(this.fxRunning) return;
				this.fxRunning = true;
				var currImg = $('work-detail-big-image').getElement('img');
				this.currentImage = thumb;
			
				//open new image over previous
				var image = new Element('img', {
					src : thumb.get('rel')
				}).inject(currImg, 'after');
				
				imageLoader.load(image, function(){
					currImg.destroy();
					this.fxRunning = false;
				}.bind(this));
				
				//set url
				if(typeof urlController != 'undefined') urlController.setImage(i+1);
				
			}.bind(this));
		}, this);
		
		
		//prevous / next image
		this.currentImage = this.element.getElement('.slider img');
		var fx = new Fx.Tween($('img-next'), {
			property: 'background-position',
			duration : 'short',
			link : 'cancel'
		});
		var fx2 = new Fx.Tween($('img-previous'), {
			property: 'background-position',
			duration : 'short',
			link : 'cancel'
		});
		$('img-next').addEvents({
			click : function(){
				if(this.currentImage.getNext() && !this.fxRunning) {
					this.currentImage.getNext().fireEvent('click');
					fx.start('285px 3px');
					
					//slide thumbs?
					if(this.currentImage.retrieve('position')%3 == 0) {
						this.bypassControls = true;
						$('thumbs-next').fireEvent('click');
					}
				}
			}.bind(this),
			mouseenter : function(){
				if(this.currentImage.getNext())
					fx.start('78px 3px');
			}.bind(this),
			mouseleave : function(){
				fx.start('285px 3px');
			}
		}).setStyle('backgroundPosition','285px 3px');
		$('img-previous').addEvents({
			click : function(){
				if(this.currentImage.getPrevious() && !this.fxRunning) {
					this.currentImage.getPrevious().fireEvent('click');
					fx2.start('-200px 3px');
					
					//slide thumbs?
					if(this.currentImage.retrieve('position')%3 == 2) {
						this.bypassControls = true;
						$('thumbs-previous').fireEvent('click');
					}
				}
			}.bind(this),
			mouseenter : function(){
				if(this.currentImage.getPrevious())
					fx2.start('3px 3px');
			}.bind(this),
			mouseleave : function(){
				fx2.start('-200px 3px');
			}
		}).setStyle('backgroundPosition','-200px 3px');
	},
	
	removeEvents : function(){
		window.removeEvent('resize', this.resizeFunction);
	},
	
	close : function(way){
		this.removeEvents();
		//$(this).destroy.delay(500, this);
		var el = this.element;
		(function(){
			el.removeEvents();
			Element.empty(el);
			Element.dispose(el);
			delete el;
		}).delay(500);
		
		if(way == undefined) {
			$(this).fade(0);
		} else if(way == 'left') {
			this.fxPosition.start({ left : -960 });
		} else if(way == 'right') {
			this.fxPosition.start({ left : window.getWidth() });
		}
	}
});