/** 
 * Johanna Hörrmann, johannahoerrmann.de / Nils Hörrmann, nilshoerrmann.de
 * Styles für die Bildschirmansicht
 *
 * @author hana+nils Büro für Web- und Textgestaltung, http://hananils.de
 */

// Pulsating animation for the navigation 
var Equalizer = {

	// Prepare equalizer
	init: function() {
		var items = $('#main a:not(.active)');
	
		// Store initial width
		items.each(function() {
			var item = $(this),
				width = item.width();
			item.attr('data-width', width);
		});
			
		// Events
		items.bind('mouseover', function() {
			var item = $(this);
			Equalizer.over(item);
		}).bind('mouseout', function() {
			var item = $(this);
			Equalizer.out(item);
		});
	},
	
	// Expand items on mouseover
	over: function(item) {
		item.stop(true, false).animate({
			'width': '100%' 
		}, 1000, 'easieEaseOutQuad');
	},
	
	// Slow down expansion first, then reduce items on mouseout
	out: function(item) {
		item.stop(true, false).animate({
			'width': item.width() + 50
		}, 500, 'easieEaseOutQuad').animate({
			'width': item.attr('data-width')
		}, 1000, 'easieEaseOutQuad');
	}

};

// Feature gallery
var Carrousel = {

	// Prepare carrousel
	init: function() {
		features = $('#features');
		nav = features.next('nav');
		items = features.find('> ul > li');
		
		if(nav.size() == 0 && !$('body').is('#message') && items.size() > 1) {
			Carrousel.build();
		}
	},
	
	build: function() {
		list = features.find('> ul');
		lang = $('html').attr('lang');
		root = $('script[src$="feel.js"]').attr('src').split('/workspace/')[0];
		position = null;
		
		// Create navigation
		nav = $('<nav class="pagination"><a class="next rounded">‹</a><a class="previous rounded">›</a></nav>').insertAfter(features).delegate('a', 'click', Carrousel.select);
		Carrousel.navigation(list.find('> li'), 0);
		
		// Touch navigation
		features.bind('touchstart', function(event) {
			position = event.originalEvent.touches[0].clientX;
		});
		features.bind('touchmove', function(event) {
			if(position === null) return;
	
			var distance = position - event.originalEvent.touches[0].clientX;
			
			if(distance > 50) {
				nav.find('.previous').click();
				position = null;
			}
			else if(distance < -50) {
				nav.find('.next').click();
				position = null;
			}
		});
		features.bind('touchend', function(event) {
			position = null;
		});
		
		// Keyboard navigation
		$(window).bind('keydown', function(event) {
			if(event.which == 37) {
				nav.find('a.next').click();
			}
			if(event.which == 39) {
				nav.find('a.previous').click();
			}
		});
	},
	
	select: function(event) {
		var target = $(event.target),
			pages = list.data('pages'),
			total = list.data('total'),
			position, width, count;
		
		// Next feature
		if(target.is('.next')) {
			position = parseInt(nav.find('a.active').attr('data-position')) - 1;
			
			if(position < 0) {
				Carrousel.cushion(0, 5);		
			}
			else {
				Carrousel.rotate(position);		
			}
		}
		
		// Previous feature
		else if(target.is('.previous')) {
			position = parseInt(nav.find('a.active').attr('data-position')) + 1;
			count = nav.find('a').size() - 3;
			
			if(position > count) {
				position = (position - 1) * -100;
				Carrousel.cushion(position, -5);		
			}
			else {
				Carrousel.rotate(position);		
			}
		}

		// Distict feature
		else {
			position = parseInt(target.attr('data-position'));
			Carrousel.rotate(position);
		}

		// Fetch more features
		if(position > pages * 3 - 3 && list.find('> li').size() < total) {
			Carrousel.fetch(pages);
		}
	},
	
	// Rotate carrousel
	rotate: function(position) {
	
		// Set active item
		nav.find('a[data-position="' + position + '"]').addClass('active').siblings().removeClass('active');
		
		// Move to active item
		if(Modernizr.csstransitions === true) {
			list.removeClass().css('left', (position * -100) + '%');
		}
		else {
			list.stop().animate({
				'left': (position * -100) + '%'
			}, 'normal', 'easieEaseOut');
		}
	},
	
	// Cushion left and right borders
	cushion: function(position, offset) {
		if(Modernizr.csstransitions === true) {
			list.removeClass().addClass('cushion').css('left', position + offset + '%');
			setTimeout(function() {
				if(list.is('.cushion')) {
					list.removeClass().addClass('revert').css('left', position + '%');
				}
			}, 250);
		}
		else {
			list.stop().animate({
				'left': position + offset + '%'
			}, 'fast', 'easieEaseOutQuint').animate({
				'left': position + '%'
			}, 'slow', 'easieEaseOutQuint');
		}
	},
	
	// Fetch more features
	fetch: function(pages) {
		list.data('pages', pages + 1);
		$.ajax({
			url: root + '/ajax/',
			data: {
				'features': pages + 1,
				'sprache': lang
			},
			success: function(result) {
				var items = $(result).find('> li'),
					base = list.find('> li').size();

				// Add navigation buttons
				Carrousel.navigation(items, base);
				
				// Add items
				items.appendTo(list);
			},
			dataType: 'html'
		});
	},
	
	// Add navigation buttons
	navigation: function(items, base) {
		items.each(function(index, feature) {
			var title = $(feature).find('h1').text(),
				item = $('<a data-position="' + (base + index) + '" title="' + title + '">' + title + '</a>');
			
			// Status
			if(index == 0 && base == 0) {
				item.addClass('active');
			}
			
			// Insert item
			item.hide().appendTo(nav).fadeIn('fast');
		});
	}

};

// Initialize webfonts
try {
	Typekit.load({
		active: function() {
			$('body').addClass('webfonts');
		}
	});
} 
catch(e) {}

// Stats
try {
	var stats;
	
	// Get context
	if(window.location.hostname == 'nilshoerrmann.de') {
		stats = Piwik.getTracker('http://stats.nilshoerrmann.de/piwik.php', 1);
	}
	else {
		stats = Piwik.getTracker('http://stats.johannahoerrmann.de/piwik.php', 2);
	}
	
	// Track
	stats.trackPageView();
	stats.enableLinkTracking();
} 
catch(e) {} 

// Initialise interface
$(document).ready(function() {
	Equalizer.init();
	Carrousel.init();
	
	// Scroll to top
	$('#up').click(function(event) {
		event.preventDefault();
		$('body, html').animate({
			'scrollTop': 0
		}, 'slow', 'easieEaseInOut');
	});
	
	// Image resizing
	$(window).resize(function(event) {
		var window = $(this),
			width = window.width(),
			current = window.data('width'),
			images = $('#features img');
		
		// Adjust images
		images.each(function() {
			image = $(this),
			size = image.width();
	
			// Landscape
			if(width >= 989 && (current < 989 || !current) && size != 990) {
				image.hide().attr({
					width: 990,
					height: 660,
					src: image.attr('data-landscape')
				}).load(function() {
					$(this).fadeIn('fast');
				});
			}
			
			// Portrait
			else if(window.width() < 989 && (current >= 989 || !current) && size != 660) {
				image.hide().attr({
					width: 660,
					height: 800,
					src: image.attr('data-portrait')
				}).load(function() {
					$(this).fadeIn('fast');
				});
			}
		});
		
		// Store width
		window.data('width', width);
	}).resize();
	
	// Cancel comment
	$('#comments form a').click(function(event) {
		event.preventDefault();
		event.stopPropagation();
		
		$('#comments form input, #comments form textarea').val('');
	});
});