/*
 * Home Page process animation
 * 
 */
var ProcessMap = new Class({
	
	Implements: [Options],  
	
	options: {				
	
		duration_ditch_fade_in: 500,
		duration_card_fade_in: 300,
		duration_content_scroll: 200,
		duration_buttons_scroll_in: 200,
				
		ditch_pos_top: -80,
		ditch_pos_left: -31,
		ditch_width: 261,
		ditch_height: 352,
		
		ditch_first_pos_left_offset: 37,
		ditch_last_pos_left_offset: -30,
		
		canvas_margin_top_end: 120,
		canvas_margin_bottom_end: 120,
		
		buttons_scroll_margin_top: -60,
		
		teaser_interval: 1000,
		teaser_fade_duration: 250
		
	},
	
	initialize: function (options) {
		this.setOptions(options);
		
		this.canvas = $('process-map');		
		this.container = $('process-block');
		
		this.tabs = [];
		this.activeTab = null;
			
		this.animating = false;
		
		this.initTabs();
		
		this.canvasMorph = new Fx.Morph(this.canvas, {
		    duration: this.options.duration_ditch_fade_in,
		    transition: Fx.Transitions.Sine.easeOut
		});
		
		this.canvasMarginTopStart = this.canvas.getStyle('margin-top');
		this.canvasMarginBottomStart = this.canvas.getStyle('margin-bottom');
		
		this.ditch = this.canvas.getElement('#ditch');
		this.ditchMorph = new Fx.Morph(this.ditch, {
			link: "ignore",
		    duration: this.options.duration_ditch_fade_in,
		    transition: Fx.Transitions.Bounce.easeOut
		});
		
		
		this.container.addEvent('mousedown', function(e) {
			if (!$(e.target).getParent('.process-tab')) {
				this.closeCanvas();
			}
		}.bind(this));

		this.canvasMorph = new Fx.Morph(this.canvas, {
		    duration: this.options.duration_ditch_fade_in,
		    transition: Fx.Transitions.Sine.easeOut
		});
		
		this.canvasMarginTopStart = this.canvas.getStyle('margin-top');
		this.canvasMarginBottomStart = this.canvas.getStyle('margin-bottom');
		
		this.initTeaser();
		this.startTeaser();
		
	},
	
	initTabs: function() {
		
		this.tabScroll = [];
		this.buttonTween = [];
		
		this.canvas.getElements('.process-tab').each(function(tab, index) { 
			
			// remove the link on the a
			tab.getElement('a.pointer').href = '';
			
			// add click event on tab
			tab.addEvent('click', function(event) {
				event.preventDefault();
				this.activateTab(index);					
			}.bind(this));	
			
			// cancel teaser
			tab.addEvent('mouseover', function(event) {
				event.preventDefault();
				this.endTeaser();			
			}.bind(this));			
			
			
			// create effects
			
			// scroll the image
			this.tabScroll[index] = new Fx.Scroll(tab.getElement('div.card-content'), {
				duration: this.options.duration_content_scroll
			});
			
			// open the buttons
			this.buttonTween[index] = new Fx.Tween(tab.getElement('div.card-buttons ul'), {
				'duration': this.options.duration_buttons_scroll_in,
				onComplete: function() {
					this.endOpenAnimation(index);
				}.bind(this)
			});
			
			
			// add click events on buttons
			var read_button = tab.getElement('li.read a');
			var see_button = tab.getElement('li.see a');
			read_button.addEvent('click', function(event) {
				event.preventDefault();
				this.tabScroll[index].start(0, 0);
				read_button.addClass('active');
				see_button.removeClass('active');
				
			}.bind(this));
			see_button.addEvent('click', function(event) {
				event.preventDefault();
				this.tabScroll[index].start(204, 0);		
				read_button.removeClass('active');
				see_button.addClass('active');
						
			}.bind(this));
			
			
			
			// push
			this.tabs.push(tab);
				
		}, this);
		
	},
	
	
	activateTab: function(index) {
		
		// queue the event if the animation is running
		if (this.animating == true) {
			this.activateTab.delay(100, this, index);
			return;
		} 
		
		// open the canvas at first run
		if (this.activeTab == null) {
			this.expandCanvas();
		} 
		
		// if the 	
		if (this.activeTab != index) {
			this.animating = true;
			if (this.activeTab != null) {
				this.tabs[this.activeTab].removeClass('active');
				this.animateClose(this.activeTab);		
			}
			this.tabs[index].addClass('active');
			this.animateOpen(index);					
		}		
		
	},
	
	expandCanvas: function() {
						
		this.canvasMorph.start({
			'margin-top': this.options.canvas_margin_top_end,
			'margin-bottom': this.options.canvas_margin_bottom_end
		})
		
	},
	
	closeCanvas: function() {	
	
		// can't close if animating
		if (this.animating == true) {
			return;
		} 
		
		
		if (this.activeTab == null) {
			return;			
		}
		
		this.animating = true;
		
		this.animateShowPointer(this.activeTab);
		
		this.animateCloseCard(this.activeTab);
		
		(function(){
			this.animateCloseDitch(this.activeTab);
			this.canvasMorph.start({
				'margin-top': this.canvasMarginTopStart,
				'margin-bottom': this.canvasMarginBottomStart
			});
		}).delay(this.options.duration_card_fade_in, this);
		
		
		(function(){
			this.tabs[this.activeTab].removeClass('active');
			this.activeTab = null;
			this.animating = false;
		}).delay(this.options.duration_card_fade_in + this.options.duration_ditch_fade_in, this);
		
		
		
	},
	
	animateOpen: function (index) {				
		this.animateOpenDitch(index);
		this.animateHidePointer.delay(this.options.duration_ditch_fade_in * 0.6, this, index);	
		this.animateOpenCard.delay(this.options.duration_ditch_fade_in, this, index);		
		this.animateOpenCardButtons.delay(this.options.duration_ditch_fade_in + this.options.duration_card_fade_in, this, index);
	},
	
	animateClose: function (index) {
			
		this.animateShowPointer(index);
		this.animateCloseCard(index);
	},
	
	
	animateOpenDitch: function(index) {
			
		var morphOptions = 	this.getDitchMorphOptions(index);
		this.ditchMorph.start(morphOptions);
		return this.ditchMorph;
		
	},
	
	animateCloseDitch: function(index) {
		var morphOptions = 	this.getDitchMorphOptions(index, true);
		this.ditchMorph.start(morphOptions);		
		return this.ditchMorph;
	},
	
	getDitchMorphOptions: function (index,close) {
		
		if (close != true) {
			close = false;
		}
		
		var tab = this.tabs[index];
		var tab_pos = tab.getPosition(this.canvas);
		var tab_size = tab.getSize();
		
		var ditch_top_start =  tab_pos.y + tab_size.y - 15;
		var ditch_left_start = (tab_size.x / 2) + tab_pos.x ;		
		var ditch_top_end = tab_pos.y + this.options.ditch_pos_top;
		var ditch_left_end = tab_pos.x + this.options.ditch_pos_left;
		
		var ditch_width_start = 0;
		var ditch_height_start = 0;		
		var ditch_width_end = this.options.ditch_width;
		var ditch_height_end = this.options.ditch_height;
		
		// first or last?
		this.ditch.removeClass("first");
		this.ditch.removeClass("last");
		if (index == 0) {
			this.ditch.addClass("first");		
			ditch_left_start += this.options.ditch_first_pos_left_offset;
			ditch_left_end   += this.options.ditch_first_pos_left_offset;
		} else if (index == (this.tabs.length - 1)) {
			this.ditch.addClass("last");	
			ditch_left_start += this.options.ditch_last_pos_left_offset;
			ditch_left_end   += this.options.ditch_last_pos_left_offset;
		}
		
		
		var morphOptions;
		
		if (close) {
			this.ditchMorph.setOptions({
				transition: Fx.Transitions.Expo.easeInOut
			});
			morphOptions = {
				'top': [ditch_top_end, ditch_top_start],
				'left': [ditch_left_end, ditch_left_start],
				'width': [ditch_width_end, ditch_width_start],
				'height': [ditch_height_end, ditch_height_start]
			};			
		} else if (this.activeTab == null) {
			this.ditchMorph.setOptions({
				transition: Fx.Transitions.Bounce.easeOut
			});
			morphOptions = {
				'top': [ditch_top_start, ditch_top_end],
				'left': [ditch_left_start, ditch_left_end],
				'width': [ditch_width_start, ditch_width_end],
				'height': [ditch_height_start, ditch_height_end]
			};
			
		} else {
			this.ditchMorph.setOptions({
				transition: Fx.Transitions.Expo.easeInOut
			});
			morphOptions = {
				'top': ditch_top_end,
				'left': ditch_left_end
			};
		}	
		return morphOptions;
	},
	
	animateHidePointer: function (index) {
		
		var tab = this.tabs[index];
		var pointer = tab.getElement("a.pointer");
		
		pointer.set('tween', {
			'duration': this.options.duration_ditch_fade_in * 0.4
		});
		pointer.tween('opacity', 0);
		return pointer.get('tween');
		
	},
	
	animateShowPointer: function (index) {
		
		var tab = this.tabs[index];
		var pointer = tab.getElement("a.pointer");
		pointer.set('tween', {
			'duration': this.options.duration_ditch_fade_in
		});
		pointer.tween('opacity', 1);
				
	},
	
	animateOpenCard: function (index) {
		
		var tab = this.tabs[index];
		var card = tab.getElement("div.card");
		card.setStyle('opacity', 0);
		card.setStyle('display', 'block');
		
		// reset the scroll and tweens
		this.tabScroll[index].set(0, 0);
		var read_button = tab.getElement('li.read a').addClass('active');
		var see_button = tab.getElement('li.see a').removeClass('active');
			
		
		if (this.activeTab != null) {
			this.buttonTween[index].set('margin-top', 0);
		} else {
			this.buttonTween[index].set('margin-top', this.options.buttons_scroll_margin_top);
		}
		
		card.set('tween', {
			'duration': this.options.duration_card_fade_in
		});
		card.tween('opacity', 1);
		
	},
	
	animateCloseCard: function (index) {
		this.tabs[index].getElement("div.card").tween('opacity', 0);
		
	},
	
	animateOpenCardButtons: function (index) {
		
		var tab = this.tabs[index];
		var buttons = tab.getElement("div.card-buttons ul");
		
		if (this.activeTab != null) {
			this.endOpenAnimation(index);
		} else {
			this.buttonTween[index].start('margin-top', 0);
		}
		
	},
	
	endOpenAnimation: function(index) {
		this.activeTab = index;
		this.animating = false;
	},
	
	
	initTeaser: function() {
		
		this.teasers = [];		
				
		this.tabs.each(function (tab, index) { 
				
			var teaser = new Element('span', { 'class': 'teaser', 'styles': { 'opacity': 0, 'display': 'block'}});
			tab.appendChild(teaser);
			this.teasers[index] = teaser;		
					
		}, this);
		
		this.teaserFx = new Fx.Elements(this.teasers, {
			link: 'chain'
		})
		
		this.teaserSteps = [];
		
		this.teasers.each(function (teaser, index) { 			
			var step = {};
			var current = index;
			var last = current - 1;
			if (current == 0) {
				var last = this.teasers.length - 1;
			}		
			step[current] = { 
				'opacity': [1]
			};
			step[last] = {
				'opacity': [0]			
			};
			this.teaserSteps[index] = step;		
		}, this);
		
		
	},
	
	startTeaser: function() {
		
		var ret = this.teaserFx;
		this.teaserSteps.each(function (step, index) {
			ret = ret.start(step);
			ret = ret.wait(this.options.teaser_interval);
		}, this)
		
		// loop it
		this.teaserFx.chain(
			function() { 
				this.startTeaser();
			}.bind(this)
		);
	},
	
	endTeaser: function() {
		
		this.teaserFx.cancel();
		this.teaserFx.clearChain();
		
		var step = {};
		this.teasers.each(function (teaser, index) {			
			step[index] = {'opacity': [0]}
		}, this);
		
		this.teaserFx.set(step);
	}
	
	
	
	
});


window.addEvent('domready', function() {
	var process_map = new ProcessMap();
});