/*
Project transitie code
(C) 2008 - Keeple vof - Robin van Mourik
*/

window.addEvent('load', function() {
	var thumbBar = $('thumbbar');
	var thumbElems = thumbBar.getElements('a');

	// assign random background color per project thumb.
	thumbElems.each(function(elem) {
		elem.setStyle('background-color', randomColors.getRandom());
	});
	
	// give projects to thumb elements
	projects.each(function(projectDetails, projectKey) {

		elem = thumbElems.getRandom();
		thumbElems.erase(elem);
		
		elem.setStyles({
			'background': 'url(/site/img/thumbs102h/' + projectDetails['thumb'] + ')',
			'opacity': .85
		});	
		
		elem.set('title', projectKey);
		
		var randomTransitions = ['back:in:out']; 
		
		elem.addEvent('mouseover', function() {
			if (!this.myEffect) this.myEffect = new Fx.Morph(this, {link: 'cancel', duration:400, transition: randomTransitions.getRandom()})
			this.myEffect.start({'background-position': -50, 'opacity': 1});
		});
		
		elem.addEvent('mouseout', function() {
			this.myEffect.start({'background-position': 0, 'opacity': .85});
		});			
		
		elem.addEvent('click', function(e) {
			new Event(e).stop();
			loadProject(projectKey);
		});
		
	});

});


function loadProject(projectKey, pageNum) {

	if (!pageNum) pageNum = 0;
	var projectDetails = projects.get(projectKey);
	
	if (pageNum >= projectDetails.images.length) {
		var nextProjectNum = projects.getKeys().indexOf(projectKey) + 1;
		if (nextProjectNum >= projects.getKeys().length) nextProjectNum = 0;
		var nextProjectKey = projects.getKeys()[nextProjectNum];
		
		var projectDetails = projects.get(nextProjectKey);
		pageNum = 0;
		
	} else {
		var nextProjectKey = projectKey;
	}
	
	var imageDiv = $('bigthumb');
	var captionDiv = $('projectCaption');
		
	var imageUrl = '/site/img/big-thumbs/' + projectDetails.images[pageNum].url
	var captionText = captionDiv.getElement('h3');
	var captionTitle = captionDiv.getElement('h4');
	


	// Image Effect
	if (!imageDiv.myEffect) imageDiv.myEffect = new Fx.Morph(imageDiv, {link: 'cancel', duration:850, transition: 'back:in:out'});
	imageDiv.myEffect.start({'background-position': -275}).chain(function() {
		imageDiv.setStyle('background-image', 'url(' + imageUrl + ')');
		(imageDiv.myEffect.start({'background-position': 0})).delay(1500, imageDiv);
	});

	// Text Effect
	if (!captionDiv.myEffects) captionDiv.myEffects = new Fx.Elements([captionDiv, captionText, captionTitle], {link: 'cancel', duration:550, transition: 'sine:in:out'});
	captionDiv.myEffects.start({
		'0': (pageNum!=0) ? {} : {'opacity': 0},
		'1': (pageNum!=0) ? {} : {'height': 1, 'margin-top': 42},
		'2': (pageNum!=0) ? {} : {'height': 1}
		
	}).chain(function() {
		
		// Change caption text
		captionText.empty().set('html', projectDetails.images[pageNum].caption);
		
		// Change caption title and insert page nav button
		captionTitle.empty().set('html', nextProjectKey + ' (' + projects.get(nextProjectKey).year + ')');
		new Element('a', {
			'class': 'next',
			html: (pageNum == projectDetails.images.length-1) ? '»' : '›',
			events: {'click': loadProject.pass([nextProjectKey, pageNum + 1])},
			href: 'javascript://void'
		}).injectTop(captionTitle);
		
		captionDiv.myEffects.start({
			'0': {'opacity': 1},
			'1': {'height': 43, 'margin-top': 0},
			'2': {'height': 16}
		})
	});		
}