/**
 * Marlon website 2007
 * project.js
 * 
 * Description:	animation and sliding functionality on the Marlon website.
 *
 * Author: 		Davy De Pauw
 * Created: 	19/03/2008
 * Modified:	19/03/2008
 * Copyright:	Marlon BVBA
 * URI:			http://www.marlon.be
 * 
 * MooTools Javascript Library was used as framework.
 * http://mootools.net/
 * 
 */

/**
 * Set global variables
 * 
 */



/**
 * Initialisation
 * 
 * Get the number of projects to scroll.
 * Call functions to do the fancy scroll and highlight stuff.
 * 
 */

function init() {
	
	// Initialize screenshot buttons
	initScreenshots();	

}


function initScreenshots() {
	
	// Get all li items in specified ol
	var list = $$('#screenshots ol li a');
	
	list.each(function(element) {
		
		// Attach event to mouseClick
		element.addEvent('click', function(evt) {

			resetScreenshotActiveStates();		

			element.getParent().className = 'selected';
			
			// return false in mootools
			new Event(evt).stop();
			
			// Set src of #screenshot to href of clicked item
			$$('#screenshot').setProperty('src', element.getProperty('href'));
		});
	});
}

function resetScreenshotActiveStates() {
	// Get all li items in specified ol
	var list = $$('#screenshots ol li');

	list.each(function(element) {
		element.className = '';
	});
}


/**
 * Highlights in sidebar which creates nicer looking :hover effects.
 * This piece of javascript makes the hovering work in IE 6 as well.
 *
 */

function highlightItems() {
	
	// Get all li items in specified ul
	var list = $$('#blog-recent li');
	
	// Iterate each li element
	list.each(function(element) {
		
		// Set fx variable
		var fx = new Fx.Styles(element, {duration:200, wait:false});
		
		// Attach event to mouseEnter (change background color)
		element.addEvent('mouseenter', function(){
			fx.start({
				'background-color': '#F5F4EE'
			});
		});
		
		// Attach event to mouseLeave (change background color back to #fff)
		element.addEvent('mouseleave', function(){
			fx.start({
				'background-color': '#FFFFFF'
			});
		});
		
	});	
}

/**
 * Handle the scrolling when clicked on next/previous button.
 * 
 */

function scrollProjects() {
	
	// Set scroll FX variable
	var scroll = new Fx.Scroll('projects', {
		wait: false,
		duration: 1250,
		offset: {'x': -20, 'y': 0},
		transition: Fx.Transitions.Quad.easeInOut
	});
	 
	// Add event listener to previous project button 
	$('project-previous').addEvent('click', function(event) {
		
		event = new Event(event).stop();
		
		// Check and see if scrolling is necessary
		if((currProject - 2) > 0) {
		
			// Scroll 2 images
			currProject -= 2;
			scroll.toElement('project-' + currProject);		
		
		} else if((currProject - 1) > 0) {
			// Scroll 1 image
			currProject -= 1;
			scroll.toElement('project-' + currProject);					
		} else {
		}
		
		// Set navigation states
		toggleProjectNavButtons();
	});
	 
	// Add event listener to next project button
	$('project-next').addEvent('click', function(event) {
		event = new Event(event).stop();
		
		// Check and see if scrolling is necessary
		if((currProject + 2) < numProjects) {
			
			// Scroll 2 images
			currProject += 2;
			scroll.toElement('project-' + currProject);		
		
		} else if((currProject + 1) < numProjects) {
			
			// Scroll 1 image
			currProject += 1;
			scroll.toElement('project-' + currProject);					
		}
		
		// Set navigation states
		toggleProjectNavButtons();
	});
	 
}

/**
 * Handle the active/inactive state of the project navigation
 * buttons. Assign the css class 'inactive' to inactive ones.
 */

function toggleProjectNavButtons() {
	
	// Assign html links to variables
	var previousButton = $('project-previous');
	var nextButton = $('project-next');
	
	// Check if previous button should be inactive
	if(currProject == 1) {
		previousButton.className = "inactive";
	} else {
		previousButton.className = "";
	}

	// Check if next button should be inactive	
	if(currProject == numProjects - 1) {
		nextButton.className = "inactive";
	} else {
		nextButton.className = "";
	}
}


/**
 * Attach window listener to call init function
 * on domready event
 * 
 * @param {Object} 'domready'
 * @param {Object} function(init())
 */ 

window.addEvent('domready', function(){
	init();
});