var showIntro = true;
var mouseInsideNav = false;
var xhrList = [];

$(document).ready(function() {	
	updateNav();
	
	// generate intro
	var imageImages = $('.intro .image');
	if(imageImages.length > 0) {
		var firstIntroImage = $('.intro .image:first-child img');
		loadIntroImage(firstIntroImage, 500);
	}

	$('#nav').click(function() {
		$(this).addClass('clicked');
		$('#site-content').click(function() {
			$('#nav').mouseleave();
			$('#site-content').unbind();
		});
	});
	
	$('#nav').mouseleave(onNavMouseOut).mouseenter(onNavMouseOver);
	
	$('#nav li a').click(function() {
		var article_id 	= parseInt($(this).attr('article_id'));
		var link 		= $(this);
		var li			= link.parent('li');
		
		// open if not already active	
		if(! li.hasClass('active')) {
			// is not active -> activate
			
			// collections, projects
			if(article_id == 1 || article_id == 2) {
				performGetJson('get_category.php?id=' + article_id, function(data) {	
					switch(article_id) {
						case 1:	// collections
							addList(li, '#collectionsTmpl', data);						
							break;
						case 2:	// projects
							addList(li, '#projectsTmpl', data);
							break;
					}
					
					return false;
				});
			} else if(article_id == 3) {
				// lookbooks
				performGetJson('get_article.php?id=' + article_id +'&pdf=1', function(data) {
					addList(li, '#lookbooksTmpl', data);
					
					$('#nav').removeClass('loading');
				});
			} else if(article_id == 4) {
				// news
				performGetJson('get_article.php?id=' + article_id +'&news=1', function(data) {
					addList(li, '#newsTmpl', data);
					
					$('#nav').removeClass('loading');
				});
			} else {
				// navi-content
				performGetJson('get_article.php?id=' + article_id, function(data) {	
					switch(article_id) {
						case 21: // credits
							addContent(li, '#creditsTmpl', data);						
							break;
						case 6:	// contact
							addContent(li, '#contactTmpl', data);
							break;
						case 5: // sales
							addContent(li, '#salesTmpl', data);
							break;
					}
					
					$('#nav').removeClass('loading');
					
					return false;
				});
			}
		}
		
		// close all others
		$('#nav li').each(function(i) {
			if($(this).find('.content').length > 0) closeContent($(this));
		});		
		
		return false;
	});
	
	$(window).resize(function() {
		$('.intro .image img').each(function() {
			onResize($(this));
		});
		
		updateGallery();
	});
	
	//window.setInterval("checkNavHeight()", 100);
	
	$('.newsbox .close').click(function() {
		$(this).parent().fadeOut('slow');
	});
});

function checkNavHeight() {	
	var navHeight = $('#nav').height() + parseInt($('#nav').css('padding-top'));
	if(navHeight > $(window).height() && mouseInsideNav) {
		$('body').css('overflow-y', 'auto');
		$('#scrolling-dummy').css('height', navHeight);
	} else {
		$('body').css('overflow-y', 'hidden');
		$('#scrolling-dummy').css('height', 10);
	}
}

function closeContent(menuItem) {
	$('#nav').unbind('mouseleave')
	
	menuItem.removeClass('active')
			.find('.content')
			.bind("webkitTransitionEnd transitionend OTransitionEnd", onTransitionEnd)
			.css({ height : 0 });
			
	// ie, no transition
	if($.browser.msie) onTransitionEnd();
	
	function onTransitionEnd() { 
		menuItem.addClass('no-content').find('.content').remove();
		$('#nav').unbind('mouseleave').mouseleave(onNavMouseOut);
	}
}

function addContent(menuItem, template, data) {
	// assign data to template in dom
	var tmplData = $(template).tmpl(data, {
		getValue: function() {
			return this.data.value1.replace(/<a/ig, '<a style="color:'+ this.data.value2 +'"');
		},
		getColor: function() {
			return this.data.value2;
		}
	});
	
	// no-content has a constant height, activate element
	menuItem.find('.content').remove();
	menuItem.removeClass('no-content')
			.addClass('active')
			.append(tmplData);
	
	// create clone element to calculate the targets height
	var cloneElement = menuItem.find('.content').clone().removeAttr('style').hide().appendTo('body');
	var contentHeight = cloneElement.height();
	//contentHeight += 10;
	cloneElement.remove();
	
	// assign new height to content - animated via css-transitions
	menuItem.find('.content').css('height', contentHeight);
}

function addList(menuItem, template, data) {
	// assign data to template in dom
	menuItem.find('.content').remove();
	$(template).tmpl(data).appendTo(menuItem);
	
	// no-content has a constant height, activate element
	menuItem.removeClass('no-content').addClass('active')
	
	// create clone element to calculate the targets height
	var cloneElement = menuItem.find('.content').clone().removeAttr('style').css({fontFamily: 'Arial, sans-serif', fontSize: 22}).hide().appendTo('body');
	var contentHeight = cloneElement.height();
	cloneElement.remove();
	
	// assign new height to content - animated via css-transitions
	menuItem.find('.content').css('height', contentHeight);		
}

function addGallery(target, template, data) {
	$(target).html('');
	$(template).tmpl(data).appendTo(target);
	
	var galleryContainer = target.children('#gallery');
	var imagesContainer = galleryContainer.children('.images');
	var controls = imagesContainer.children('.controls');
	
	galleryContainer.addClass('no-transition');
	
	var activeImage = imagesContainer.children('.image:first-child');
	
	activateImage(activeImage, function() {
		activeImage.css({
			opacity : 1
		});
	});
	
	controls.children('a.previous').click(function() {		
		activeImage.css({
			opacity : 0
		}).removeClass('active');
		
		activeImage = activeImage.prev('.image').length != 0 ? activeImage.prev('.image') : activeImage.parent().children('.image:eq('+ (imagesContainer.children('.image').length - 1) +')');
		
		activateImage(activeImage, function() {
			activeImage.css({
				opacity : 1
			});
		});	

		return false;		
	});
	
	controls.children('a.next').click(function() {		
		activeImage.css({
			opacity : 0
		}).removeClass('active');;
		
		activeImage = activeImage.next('.image').length != 0 ? activeImage.next('.image') : activeImage.parent().children('.image:first-child');
		
		activateImage(activeImage, function() {
			activeImage.css({
				opacity : 1
			});
		});
		
		return false;
	});
	
	imagesContainer.children('.image').click(function() {
		controls.children('a.next').click();
	});	
	
	function activateImage(target, callback) {
		target.addClass('active');
		var img = target.children('img');
		if(img.attr('src') == undefined) {
			var src = img.attr('loadUp');
			img.attr('src', src)
			   .load(onImageLoaded);			   
		} else {
			onImageLoaded();
		}
		
		function onImageLoaded() {			
			var newImg = new Image();
			newImg.src = img.attr('src');		
		
			img.css({
				width : newImg.width,
				height : newImg.height
			}).attr('org-width', newImg.width)
			  .attr('org-height',  newImg.height)
			

			var sizesMap = {
				width : newImg.width,
				height : newImg.height + 44 + 17
			}
			
			imagesContainer.css(sizesMap);
			galleryContainer.css({
				width : sizesMap.width,
				height : sizesMap.height,
				opacity : galleryOpacity,
				marginTop : ($(window).height() - galleryContainer.height()) / 2
			});
			
			galleryOpacity = 1;
			
			updateGallery();
			
			// update pages-view
			var c = target.index() + 1
			var a = imagesContainer.children('.image').length;
			controls.children('.pages').html(c +"/"+ a);
			
			if(callback) callback();
			
			return false;
		}
	}
	
}

function updateNav() {
	$('#nav').css({
		bottom : - ($('#nav').height())
	}).show();
}

var galleryOpacity = 1;

function getContent(href) {
	var article_id = href.split('#article_id=')[1];
	$('#nav').addClass('loading');
	performGetJson('get_article.php?id=' + article_id +"&gallery=1", function(data) {
		galleryOpacity = 0.5;
		addGallery($('#content'), '#galleryTmpl', data);
		$('#nav').removeClass('loading');
		if($('#gallery').length != 0) $('#gallery').css({opacity : 0.5});
	});
	
	hideIntro();
}

var curIntroImage;
var preIntroImage;

function loadIntroImage(img, delay) {
	if(img.attr('src') == undefined) {
		var src = img.attr('loadup');
		img.attr('src', src)
		   .load(onImageLoaded);			   
	} else {
		onImageLoaded();
	}
	
	function onImageLoaded() {		
		curIntroImage = img;
				
		$(this).data({
			width : $(this).width(),
			height : $(this).height()
		});
		
		onResize($(this));
		
		window.setTimeout(function() {			
			curIntroImage.parent().css({ opacity : 1 });
			
			if(preIntroImage) {
				preIntroImage.parent().css({ opacity : 0 });
			}

			var nextIntroImage = curIntroImage.parent().next('.image').children('img');
			if(nextIntroImage.length == 0) {
				nextIntroImage = $('.intro').children('.image:first-child').children('img');
			}

			preIntroImage = curIntroImage;
			if(showIntro && curIntroImage.attr('src') != nextIntroImage.attr('src')) loadIntroImage(nextIntroImage, 10000);			
		}, delay);
		
	}
}

function onResize(img) {
	if (img.width() / $(window).width() > img.height() / $(window).height()) {
		img.css({
			width : img.width() / img.height() * $(window).height(),
			height : $(window).height()
		});
	} else {
		img.css({
			width : $(window).width(),
			height : img.height() / img.width() * $(window).width()
		});
	}	
}

function updateGallery() {
	var galleryContainer = $('#gallery');
	var imagesContainer = galleryContainer.children('.images');
	if(galleryContainer.length > 0) {		
		// adjust margin
		galleryContainer.css({
			marginTop : Math.max(0, ($(window).height() - galleryContainer.height()) / 2)
		});	
		
		// scale image up/down
		var windowHeight = $(window).height() - 20;
		
		galleryContainer.find('.image.active').children('img[src!=""]').each(function() {
			var p = $(this).next('p');
			var controlsHeight = imagesContainer.find('.controls')[0].offsetHeight;
			
			//var pclone = p.clone().css({width: $(this).width(), fontFamily: 'Arial', fontSize: 14, paddingTop: 8}).appendTo('body');
			
			var newImageHeight = windowHeight - (p[0].offsetHeight + controlsHeight);
			var newImageWidth = newImageHeight / $(this).attr('org-height') * $(this).attr('org-width');
			
			if(newImageHeight <= $(this).attr('org-height')) {				
				$(this).css({ 
					width : newImageWidth,
					height : newImageHeight
				});
				imagesContainer.css({
					width : newImageWidth,
					height : windowHeight
				});
				
				galleryContainer.css({
					width : newImageWidth
				});
			} else {
				var imgHeight = $(this).attr('org-height') - $(this).next('p').height() + 35;
				var imgWidth = imgHeight / $(this).attr('org-height') * $(this).attr('org-width');
				$(this).css({
					width : imgWidth,
					height : imgHeight
				});
			}
		});
		
		galleryContainer.removeClass('no-transition');
	}
}

function hideIntro() {
	showIntro = false;
	$('#intro .intro').remove();
}

function onNavMouseOut(e) {
	$(this).removeClass('clicked');
	updateNav();
	
	if($('#gallery').length != 0) $('#gallery').css({opacity : 1});
	
	mouseInsideNav = false;
}

function onNavMouseOver(e) {
	updateNav();
	
	$('#nav').css({ bottom : 0 });
	
	if($('#gallery').length != 0) $('#gallery').css({opacity : 0.5});
	
	mouseInsideNav = true;
}

function performGetJson(url, onComplete) {
	var xhr = $.getJSON(url, onComplete);
	
	$('#nav').addClass('loading');
	
	xhr.complete(function() {
		$('#nav').removeClass('loading');
		
		for(var i=0; i < xhrList.length; i++) {
			try {
				xhrList[i].abort();
			} catch(e) {
				
			}
		}
		
		return false;
	});
	
	xhrList.push(xhr);
}