var fx, breadcrumb, categories, gallery;

window.addEvent('domready', function() {
	// Setup the event handlers
	$$('.category').each(function(item, index) {
		var selectedCategoryName = item.getElements('.catName').get('text');
		var galleryId = item.get('id').substr(3);
		item.addEvent('click', function() {
			hideCategories(selectedCategoryName, galleryId);
		});
	});

	$('aboutBtn').addEvent('click', function() {
		modalDialog.show('about');
	});
	
	$('scrollerUp').addEvent('click', function() {
		var scroll = gallery.getScroll();
		fx.scroll.chain(checkScrollers).start(0, Math.max(0, scroll.y - 180));
	});
	
	$('scrollerDown').addEvent('click', function() {
		var scroll = gallery.getScroll();
		var scrollSize = gallery.getScrollSize();
		fx.scroll.chain(checkScrollers).start(0, Math.min(scrollSize.y, scroll.y + 180));
	});
	
	$('homeLink').addEvent('click', function() {
		goHome();
	});
	
	// Fix contact email address
	// Format: test AT example DOT com -> test@example.com
	$('contactBtn').set('href', $('contactBtn').href.replace(/%20AT%20/, "@").replace(/%20DOT%20/, "."));
	
	categories = $('categories');
	breadcrumb = $('breadcrumb');
	gallery = $('gallery');
	
	// Setup the effects that we will use
	fx = {
		categories: new Fx.Tween(categories, {property: "opacity", duration: 500}).set(1),
		breadcrumb: new Fx.Tween(breadcrumb, {property: "left", duration: 600}).set(-breadcrumb.getWidth()),
		gallery: new Fx.Tween(gallery, {property: "opacity", duration: 600}).set(0),
		galleryTitle: new Fx.Tween('galleryTitle', {property: "opacity", duration: 600}).set(0),
		scrollerUp: new Fx.Tween('scrollerUp', {property: "opacity", duration: 600}).set(0),
		scrollerDown: new Fx.Tween('scrollerDown', {property: "opacity", duration: 600}).set(0),
		scroll: new Fx.Scroll(gallery, {wheelStops: false})
	};
});

// Checks to see if scrollers should be displayed and displays/hides them accordingly
function checkScrollers() {
	var scroll = gallery.getScroll();
	
	if(scroll.y <= 0) {
		if($('scrollerUp').getStyle('opacity').toInt() != 0)
			fx.scrollerUp.start(0);
	} else if($('scrollerUp').getStyle('opacity').toInt() != 1)
		fx.scrollerUp.start(1);
		
	
	var scrollSize = gallery.getScrollSize();
	var size = gallery.getSize();
	if(scroll.y >= scrollSize.y - size.y) {
		if($('scrollerDown').getStyle('opacity').toInt() != 0)
			fx.scrollerDown.start(0);
	} else if($('scrollerDown').getStyle('opacity').toInt() != 1)
		fx.scrollerDown.start(1);
}

/**
 * goHome() and showCategories() are both functions that are called to bring you back to the
 * initial screen showing the portfolio categories
 */
function goHome() {
	fx.breadcrumb.chain(showCategories).start(-breadcrumb.getWidth());
	fx.gallery.start(0);
	fx.galleryTitle.start(0);
	fx.scrollerUp.start(0);
	fx.scrollerDown.start(0);
}

function showCategories() {
	breadcrumb.setStyles({display: 'none'});
	categories.setStyle('display', '');
	fx.categories.start(1);
	
	$$('#scrollerUp', '#scrollerDown', '#galleryTitle', gallery).setStyles({display: 'none'});
	gallery.scrollTo(0, 0);
}

/**
 * hideCategories() and showBreadCrumb() are both functions that are called to show you the gallery
 * of projects in the category that was clicked
 */
function hideCategories(selectedCatName, galleryId) {
	// Set the selected category name in the breadcrumb
	$('selectedCatName').set('text', selectedCatName);
	// Setup the gallery data
	gallery.set('html', $('gallery' + galleryId).get('html'));
	
	fx.categories.chain(showBreadCrumb).start(0);
}

function showBreadCrumb() {
	// Hide categories
	categories.setStyle('display', 'none');
	
	// Show breadcrumb
	breadcrumb.setStyles({display: 'block', visibility: 'hidden'});
	breadcrumb.setStyles({left: -breadcrumb.getWidth(), visibility: 'visible'});
	
	// Show gallery
	$$('#scrollerUp', '#scrollerDown', '#galleryTitle', gallery).setStyles({display: 'block', opacity: 0});
	
	// Animate breadcrumb
	fx.breadcrumb.start(0);
	
	// Animate gallery
	fx.gallery.chain(checkScrollers).start(1);
	fx.galleryTitle.start(1);
	
	// Setup the gallery tooltips
	var myTips = new Tips(gallery.getElements('.tooltip'));
	$$(".tooltip").store('tip:text', '');

}