/* 
 * British Council - Venice Biennale
 *
 * @package		BCVB
 * @author		Oskar Krawczyk (o.krawczyk@keepthinking.it)
 * @version		1.2
 * @dependecies	MooTools 1.2+
 * @copyright	Copyright (c) 2009-2010, Oskar Krawczyk (Keepthinking Ltd.)		
 * @link		http://keepthinking.it
 * 
 ======================================================================= */

Timeline.Small = new Class({
	Implements: [Options, Timeline],

	// initialize all needed methods
	initialize: function(options) {
		this.setOptions(options);

		this.timeline 		= $('timeline');
		this.timelineBlock 	= $$('#timeline li a');
		this.timelineTip 	= $('timeline-tip');
		this.timelineAction = $('timeline-action') || $('timeline-action-alt');
		this.timelineLoader = $('timeline-loader');
		this.acquiredEl 	= $('acquired');
		
		// set preloaded assets
		this.preloadedAssets = [
			this.options.baseUrl + 'static/img/timeline-small/reflections.png',
			this.options.baseUrl + 'static/img/timeline-small/bg.png'
		];
		
		// set the animation for each block inside the timeline
		this.timelineBlock.set('morph', {duration: 100, link: 'chain', transition: 'sine:in'});
		
		// store the title inside an Element Storage
		this.acquiredEl.store('default:title', this.acquiredEl.get('title'));
		
		// make invisible
		this.acquiredEl.getElement('span').set('styles', {opacity: 0, visibility: 'visible'});
		
		// remove the property afterwards
		this.acquiredEl.removeProperty('title');
		
		this.timelineBlock.each(function(el) {
			// store the title inside an Element Storage
			el.store('default:title', el.get('title'));
			
			// store the type of event inside Element Storage
			if(el.getParent().get('class').test(/noHighlight(.*?)$/)) {
				el.store('default:noHighlightType', el.get('rel'));	
			}
			
			// remove the property afterwards
			el.removeProperty('title');
		});
		
		// remove margin from the last block
		this.timeline.getElement('ul.tl').getLast('li').setStyle('margin', 0);
		
		// make invisible
		this.timeline.set('styles', {opacity: 0, visibility: 'visible'});

		// hide the KEY menu
		this.timelineAction.set('styles', {visibility: 'visible', opacity: 0});

		// show the progress bar
		this.timelineLoader.fade('show');

		// preload assets
		this.loadAssets();
		
		this.acquired();
	},

	/* 
	 ======================================================================= */
	acquired: function() {
		var toggleTip = function(e) {
			// toggle opacity
			this.acquiredEl.getElement('span').fade(e.type.test(/out/) ? 'out' : 'in');
			
			// show the tip
			this.timelineTip.tip(this.acquiredEl.retrieve('default:title'), e);
		};
		
		// show and hide the tip underneath the timeline
		this.acquiredEl.addEvents({
			mouseenter: toggleTip.bind(this),
			mouseleave: toggleTip.bind(this)
		});
	},

	/* 
	 ======================================================================= */
	showAction: function() {
		this.timelineAction.fade('in');
	},

	/* load needed assets and show the timeline when done
	 ======================================================================= */
	loadAssets: function() {
		// set the defaults for the timeline
		this.timeline.set({
			'styles': $merge({display: 'block'}, this.options.showFrom),
			'tween': {transition: 'cubic:out', duration: this.options.duration}
		});
		
		// preload assets
		new Asset.images(this.preloadedAssets, {
		    onComplete: function() {

				// show the timeline
		   		this.showTimeline.delay(400, this);
				
				// show the KEY menu				
				this.showAction.create({delay: this.options.duration-800, bind: this}).run();
				
				// hide the loader
				this.timelineLoader.fade('out');
				(function() {
					this.timelineLoader.destroy();
				}).delay(500, this);
				
		    }.bind(this),
			onProgress: function(counter, index) {
				// set the current progress
				this.timelineLoader.getElement('div').tween('width', (counter+1) * this.timelineLoader.getSize().x);
			}.bind(this)
		});
	},

	/* 
	 ======================================================================= */
	highlightExists: function() {
		var highlightExsists = this.timelineBlock.some(function(item) {
		    return item.retrieve('default:noHighlightType');
		});
		return highlightExsists;
	},

	/* slide in the timeline
	 ======================================================================= */
	showTimeline: function() {
		this.fireEvent('onShowTimeline', this.timeline);
		
		// slide in the timeline
		this.timeline.morph(this.options.showTo);
		
		// attach mouseover/mouseout events
		this.attachBehavior();
		
		// resize currently highlighted blocks	
		if(this.highlightExists()) {
			(function() {
				this.timelineBlock.each(function(el) {
					this.highlighted = !el.retrieve('default:noHighlightType');
					if(this.highlighted) {
						el.morph(this.options.animateTo);
					}
				}, this);
			}).delay(this.options.duration-200, this);
		}
	},

	/* attach mouseenter/mouseleave events
	 ======================================================================= */
	attachBehavior: function() {
		this.hasHighlight = this.highlightExists();
		
		// toggle animations
		this.timelineBlock.addEvents({
			mouseenter: this.toggleBlock.bind(this),
			mouseleave: this.toggleBlock.bind(this)
		});
	},

	/* toggle block information and animation
	 ======================================================================= */
	toggleBlock: function(e) {
		// get the block
		var target = $(e.target);
		var el = target.get('tag').contains('a') ? target : target.getParent();
		
		// set the text for the tooltip and show or hide it
		this.timelineTip.tip(el.retrieve('default:title'), e);
		
		// toggle the color
		this.noHighlightType = el.retrieve('default:noHighlightType');
		if(this.noHighlightType) {
			el.getParent()[e.type.test(/out/) ? 'addClass' : 'removeClass']('noHighlight_'+this.noHighlightType);
			if(el.get('rev')) {
				el.getParent()[e.type.test(/out/) ? 'addClass' : 'removeClass']('preWatershed_noHighlight_'+this.noHighlightType);
			}
		}

		// resize the block
		if((this.hasHighlight ? $chk(this.noHighlightType) : true)) {
			el.morph(e.type.test(/out/) ? this.options.animateFrom : this.options.animateTo);
		}
	}
});