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


	var quoteUL = $('quotes');
	var quotes = quoteUL.getElements('li');
	var quoteULHeight = quoteUL.getScrollSize().y;
	var i=0;
	var quoteFX = new Fx.Morph(quoteUL, {duration: 500, transition: Fx.Transitions.Back.easeInOut});
	var periodLength = 8000;

	// ---------------------------------
	// Scroll some quotes
	// ---------------------------------	
	
	function scrollQuotes(){
		i++;
		if (i == quotes.length){
			quoteFX.start({top: 0});
			i = 0;
		} else{
			var newTop = quoteUL.getStyle('top').toInt() -quotes[i].getScrollSize().y;
			quoteFX.start({top: newTop})
		}
	
		// start it all again
		$clear(thePeriod);
		thePeriod = scrollQuotes.periodical(periodLength);
	}
	
	// start the periodical
	var thePeriod = scrollQuotes.periodical(periodLength);
	
	
	// ---------------------------------
	// Popups
	// ---------------------------------	
	$('portfolioOL').getElements('.toggle').each(function(a){
		var rel = a.get('rel');
		a.addEvent('click', function(e){
			e.stop();
			$(rel).setStyle('display', 'block');
			$(rel).fade('in');
			var scrollFx = new Fx.Scroll(window).toElement(rel);
		});
	});

	//setup
	$$('.thePopup').each(function(popup){
		popup.setStyle('display','block');
		popup.fade('hide');		
	});

	/* close */
	$$('.closeButton').each(function(a){
		a.addEvent('click', function(e){
			e.stop();
			a.getParent('.thePopup').fade('out');
		});		
	});
	
	// scroll images
	$$('.scrollableImages').each(function(theContainer){
	
		var cont = theContainer.getElement('.inner');
		var anchors = cont.getElements('li');
		var contHeight = cont.getScrollSize().y;
		var i=0;
		var contFX = new Fx.Morph(cont, {duration: 300, transition: Fx.Transitions.Sine.easeInOut});
		var periodLength = 7000;

		function scrollImg(e){
			e.stop();
			i++;
			if (i == anchors.length){
				contFX.start({top: 0});
				i = 0;
			} else{
				var newTop = cont.getStyle('top').toInt() -375;
				contFX.start({top: newTop})
			}
		
		}
		
		// mouseovers and scroll
		anchors.each(function(a){
			a.addEvents({
				'click': scrollImg,
				'domready': function(){
					a.getElement('span').fade('hide');	
				},
				'mouseenter': function(){
					a.getElement('span').fade('in');	
				},
				'mouseleave': function(){
					a.getElement('span').fade('out');	
				}
			});
		});
	
	});	
			

	// ---------------------------------
	// Grid overlay
	// ---------------------------------	
	
	var gridFX = new Fx.Morph($('gridOverlay'), {duration: 500, transition: Fx.Transitions.Sine.easeInOut});

	$('gridTrigger').addEvent('click', function(e){
		e.stop();
		gridFX.start({height: window.getScrollSize().y});
	});

	$('gridOverlay').addEvent('click', function(e){
		e.stop();
		gridFX.start({height: 0});	
	});


});