//CREATIVE LIFEFORM VERTICAL CAROUSEL
//Copyright © 2009. Creative Lifeform™ All rights reserved.
//Code written by Rohan Deshpande for Creative Lifeform™.

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

//FIXES Moomore 1.2.3 and Moocore 1.2 conflict. We are using Mootools 1.2 because slideshow.js uses it.

//document.id	=	$;

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

//HASHIN!

//preload images
	
var siteURL		=	"http://www.creativelifeform.com/site-v2/images/",
	rightOn		=	new Image(77,45),
	rightOff	=	new Image(77,45),
	leftOn		=	new Image(77,45),
	leftOff		=	new Image(77,45);

rightOn.src		=	siteURL + "carousel-right-on.png";
rightOff.src	=	siteURL + "carousel-right-off.png";
leftOn.src		=	siteURL + "carousel-left-on.png";
leftOff.src		=	siteURL + "carouse-left-off.png";	

document.addEvent('domready' , function ()
{

	//global variables
	
	var carousel	=	$('carousel'),
		container	=	$('container'),
		items		=	$$('#carousel .item'),
		firstItem	=	$(items[0]),
		step		=	110,
		maxShown	=	(container.getStyle('height').toInt())/step,
		projects	=	items.length,
		remaining	=	projects - maxShown,
		moveDown	=	$$('#carousel .left-off'),
		moveUp		=	$$('#carousel .right-off'),
		transition	=	Fx.Transitions.Expo.easeInOut,
		carGreen	=	'#429D68',
		carGrey		=	'#181818';
	
	//init
	
	handleItemClick(firstItem);
	handleBorder(firstItem,'over');
	
	//rollover events

	items.each(function(item)
	{
		item.addEvent('mouseenter' , function()
		{
			handleBorder(this,'over');
		});
		item.addEvent('mouseleave' , function()
		{
			handleBorder(this,'out');
		});
		item.addEvent('click' , function ()
		{
			items.removeClass('selected');
			handleItemClick(item);
			items.each(function(obj){handleBorder(obj,'out')});
		});
	});
	
	moveDown.addEvents(
	{
		'mouseenter':function(){this.addClass('left-on')},
		'mouseleave':function(){this.removeClass('left-on')}
	});
	
	moveUp.addEvents(
	{
		'mouseenter':function(){this.addClass('right-on')},
		'mouseleave':function(){this.removeClass('right-on')}
	});
	
	//click events
	
	
	moveDown.addEvent('click' , function ()
	{
		runCarousel(this, "down")
	});
	
	moveUp.addEvent('click' , function ()
	{
		runCarousel(this, "up")
	});
		
	//wheel event
	
	container.addEvent('mouseenter' , function()
	{
		this.focus();
	});
	
	container.addEvent('mousewheel' , function(e)
	{
		e.stop();
		var	positions		=	container.getScroll(),
			yPos			=	positions.y,
			moveFx			=	new Fx.Scroll(container, {duration:'normal',link:'chain',transition:transition,wheelStops:false});
		
		if(e.wheel < 0)
		{
			container.scrollTo(0,yPos - e.wheel*50);
		}
		
		if(e.wheel > 0)
		{
			container.scrollTo(0,yPos - e.wheel*50);
		}
	});
	
	//functions
	
	function runCarousel(element, direction)
	{
		var	positions		=	container.getScroll(),
			yPos			=	positions.y,
			moveFx			=	new Fx.Scroll(container, {duration:'normal',link:'chain',transition:transition,wheelStops:false});
						
		if(direction == "down")
		{
			if(remaining/maxShown <= 1)
			{
				moveFx.toBottom();
			}
			else
			{
				moveFx.start(0,(yPos + maxShown*step));
			}
		}
		else
		{
			if(remaining/maxShown <= 1)
			{
				moveFx.toTop();
			}
			else
			{
				moveFx.start(0,(yPos - maxShown*step));
			}
		}
		
	}
	
	function handleBorder(element,state)
	{
			var tweenOptions	=	{link:'cancel',duration:'short',transition:Fx.Transitions.Sine.easeOut};
			
			element.set('tween',tweenOptions);
			
			if(state == 'over')
			{
				element.tween('border-color' , carGreen);
			}
			else if(state == 'out')
			{
				if(element.hasClass('selected') != true)
				{
					element.tween('border-color' , carGrey);
				}
			}
				
	}
	
	function handleItemClick(element)
	{
		element.addClass('selected');
		
		//set variables depending on which work page we're on
		
		//the ajax fetches the pages depending on the source of the image file which is contained within the carousel.
		
		var project_page	=	element.getFirst().src;
		
		if(element.getFirst().src.contains("web"))
		{
			var	project_init	=	project_page.split("web/"),
				project_name	=	project_init[1].split(".")[0],
				project_html	=	"projects-web/" + project_name + ".html";
		}
		
		if(element.getFirst().src.contains("identity"))
		{
			var	project_init	=	project_page.split("identity/"),
				project_name	=	project_init[1].split(".")[0],
				project_html	=	"projects-identity/" + project_name + ".html";
		}
		
		if(element.getFirst().src.contains("interactive"))
		{
			var	project_init	=	project_page.split("interactive/"),
				project_name	=	project_init[1].split(".")[0],
				project_html	=	"projects-interactive/" + project_name + ".html";
		}
				
		var project_node	=	$('project-node'),
			loading_node	=	$('loading-node');

		new Request.HTML(
		{
			url:project_html,
			noCache:true,
			onRequest:function()
			{
				project_node.set('html',"Loading...");
				project_node.setStyle('opacity' , '1');
				loading_node.addClass('loading');
			},
			onSuccess:function(tree, els, html, js)
			{
				var temp = new Element('div').set('html', html),
					assets = temp.getElement('$SlideshowAssets'),
					images = assets.getElements('img'),
					loaded = 0,
					onLoad = function() {
						loaded++;
						if(loaded < images.length) return;
						project_node.set('html',"")
						project_node.adopt(temp.getChildren());
						eval(js);
						fader(project_node);
						loading_node.removeClass('loading');
					};
				//$log(images);
				images.each(function(img) {
					new Asset.image( img.get('src'), {onload:onLoad} );
				});
			},
			onFailure:function()
			{
				this.options.update.set('html',"We're real sorry, but that page isn't here right now, please check back later.");
			}
		}).send();
			
	}
	
	function fader(element)
	{
				element.setStyle('opacity' , '0');
				var fadeInFx = new Fx.Tween(element, {link:'chain',duration:'long',transition:Fx.Transitions.Sine.easeOut});
				fadeInFx.start('opacity' , '0' , '1');
	}
				
});