// contreforme v2.0 js
// © s.rossetti / contreforme sàrl / info@contreforme.ch
// this scripts makes extensive use of mootools javascript library http://www.mootools.net
// -------------------------------------------- //
// main vars
// list,scroller,_IE<=6
var act, descs, list, smooth, squares, _IE;

var _collapse = false;

// fx container
var fx		 = [];

// at first no project is open
var _active	 = null;

// no project is being opened
var _opening = false;

// project starts at 1
// used to store displayed image
var _img	 = null;

// -------------------------------------------- //


// check browser stuff
function check_browser_support(){
	if (!document.getElementById) return false;
	if (!document.createElement) return false;
	if (!document.createTextNode) return false;
	if (!document.getElementsByTagName) return false;
	
	return true;
}


// initialisation
function init(){
	//if(!check_browser_support()) return false;
	browser_detection();
	var_init();		// get list childnodes & populate fx array
	nav_init();		// this is where the real thing happens
	tips_init();	// tips over project's small squares
}


// here's the real thing
function browser_detection(){
	var version = 0;
	
	if (navigator.appVersion.indexOf("MSIE")!=-1) {
		var temp = navigator.appVersion.split("MSIE");
		version = parseFloat(temp[1]);
	}

	_IE = (version>5 && version < 7); // _IE v5.5 or _IE v6.0?
}


// populate list variable
function var_init() {
	list = $('list').getChildren();	// get the whole list children
	descs = $$('ul.description li');
	squares = $$('ul.thumbs li');
	toggles = $$('.toggle');
}


// creates scroll and assign elements behaviour
// if a project is passed in scrolls and opens it
function nav_init(){
	if ( !list ) return;													// if we aren't on the project page
	
	smooth = (_IE)																// assign scrolling fx
		? new Fx.Scroll($('list').getParent(),{duration:500,transition:Fx.Transitions.Circ.easeInOut})
		: new Fx.Scroll(window,{duration:500,transition:Fx.Transitions.Circ.easeInOut});
	
	// add event for each square
	$each(squares,function (li_tag,i) {
		square = li_tag;
		square.index = i;
		square.addEvent('click',function(){										// on clicking this square
			var desc, el, num, rel, size;										// var stuff...
			
			li_tag = this.getParent().getParent();
			
			square = this;
			desc = li_tag.getElement('ul.description').getChildren();				// get descriptions as an array
			num	 = li_tag.num;														// get project index (variable scope is to be solved here)
			rel	 = this.getFirst().getProperty('rel').split('/');				// get this image infos stored in the name attribute, split --> rel[0] == project file / rel[1] == width:height
			size = rel[1].split(':');											// split --> size[0] == width && size[1] == height
			
			openproject(li_tag);
			
			// launch effects
			fx[li_tag.num].start({'opacity':0}).chain( function () {					// opacity
				li_tag.getFirst().getFirst().setProperty('src',rel[0]);					// change src and...
				this.start({'width':size[0],'height':size[1]});							// resize
				li_tag.getLast().setStyle('margin-left',0);								// change margin-left to stick to the image's width for text
			}).chain( function () {
				this.start.delay(500,this,{'opacity':1});								// opacity
				
				if ( square.index!=_img ) {												// if the associated project isn't already open
					if (_img!=null) {
						squares[_img].setStyle('background-color','#e6e6e6'); 			// revert former active square color back
						descs[_img].setStyle('display','none');							// hide former active image description
					}
					
					square.setStyle('background-color','#666666');						// set this bg-color
					descs[square.index].setStyle('display','block');						// display this desccription
					
					fx[num].start({
						'opacity':0														// opacity
					}).chain(function(){												// then...
						// change image source
						square.getParent().getPrevious().getPrevious().getFirst().setProperty('src',rel[0]);	// set image src to target
						// change size,
						fx[num].start({													// change size according to image
							'width':size[0],											// in w
							'height':size[1]											// in h
						});
					}).chain(function(){												// then...
						fx[num].start({
							'opacity':1													// set opacity back to 1
						});
					});
					
					_img = square.index;												// set this as active square
				}
			});
		});
	});
	
	// assign behaviour for each list's element
	$each(list, function (el,i) {													// for each element
		fx[i]  = new Fx.Styles(el.getFirst().getFirst(),{duration:500});			// create fx on img element
		el.num = i;																	// set inner var num == element index	
	});
}


function openproject(el) {
	act = _active;																	// prevent _active value to be lost during this function
	
	toggleButtonOf(el);
	
	if ( _opening == false ) {														// element is not open && no element is being opened
		_opening = !_opening;														// 1st of all prevent another click
		
		// close active element if needed
		if ( ( act!=null && act!=el.num ) || _collapse) {							// if a project is already opened
			var src	= list[act].getFirst().getFirst().getProperty('name');			// get open project's thumb src and...
			fx[act].start({'opacity':0}).chain(function(){							// hide image
				list[act].getFirst().getFirst().setProperty('src',src);				// set src back
				list[act].getLast().getChildren().each(function(e){					// hide all descriptions & links
					e.setStyle('display','none');
				});
				list[act].getLast().setStyle('margin-left',50);						// change margin-left back to default for text
				list[act].getFirst().getNext().getNext().getChildren().each(function(e){
					e.setStyle('background-color','#e6e6e6');						// revert small squares bg-color
				});
				this.start({'width':150,'height':90});								// get size back to 75/75
			}).chain(function(){
				this.start.delay(500,this,{'opacity':1})							// show image (delay is to let the resizing finish before starting opacity for slow browser)
				smooth.scrollTo(0,el.getTop()-242);									// scroll window to newly opened element
			});
		} else {
			smooth.scrollTo(0,el.getTop()-242);										// scroll window to target element
		}
		
		_opening = !_opening;														// and we allow for another click
		_active = el.num;															// we may now set active to clicked element
	}
}


function collapse() {
	_collapse = true;
	
	li_tag = this.getParent().getParent();
	openproject(li_tag);
	
	_active = null;
	_collapse = false;
}


function toggleButtonOf(el) {
	if (_collapse || _active!=el.num) {
		button = toggles[el.num];
		button.temp = button.getProperty('src');
		button.setProperty('src',button.name);
		button.setProperty('name',button.temp);
		button.setStyle('cursor','pointer');
		button.addEvent('click', collapse);
		
		if (_collapse) {
			button.setStyle('cursor','default');
			button.removeEvents();
			return;
		}
		
		if (_active!=null) {
			button = toggles[_active];
			button.temp = button.getProperty('src');
			button.setProperty('src',button.name);
			button.setProperty('name',button.temp);
			button.setStyle('cursor','default');
			button.removeEvents();
		}
	}
}


function tips_init() {
	var tips = $$( '.tips' );															// get all tips elements
	
	var mytips = new Tips(tips,{														// make a new tips object
		maxTitleChars: 250,																// huge limit for tip text content...
		initialize:function(){															// Fx for fade-in/fade-out
			this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
		},
		onShow: function(toolTip){														// ... as its name implies ...
			this.fx.start(0.8);
		},
		onHide: function(toolTip){														// ... as its name implies ...
			this.fx.start(0);
		}
	});
}

// showtime!
window.addEvent( 'domready', init );