$(document).ready(function() {
	// add vignet to page
	$('article').append('<div class="vignet"><img src="img/gui/vignet.png" alt=""></div>')
	function sizeVignet() {
		$('.vignet img').height($(window).height());
		$('.vignet img').width($(window).width());
	}
	sizeVignet()
	$(window).resize(function() {
		sizeVignet();
	});
	
	// click in filmpstrip, morph sub items
	$('#thumbs a.top').click(function() {
		closeBranche('#thumbs li.top', '.img1', 0.8, 0, 5, 170);
		closeBranche('#thumbs li.top ', '.img2', 0.6,  5, 10, 160);
		closeBranche('#thumbs li.top', '.img3', 0.4,  10, 15, 150);
		closeBranche('#thumbs li.top', '.img4', 0.2,  13, 20, 140);
		closeBranche('#thumbs li.top', '.img5', 0.05,  16, 25, 130)
		openBranche($(this).parent(), '.img1', 105);
		openBranche($(this).parent(), '.img2', 217);
		openBranche($(this).parent(), '.img3', 329);
		openBranche($(this).parent(), '.img4', 441);
		openBranche($(this).parent(), '.img5', 553);
	});
	
	// openBranche function
	function openBranche(liContext, imgTarget, liBottom) {
		$(imgTarget, liContext).animate({
			opacity: 1.0,
			bottom: liBottom,
			left: 0
		}, 200);
		$(imgTarget+' a', liContext).animate({
			borderTopColor: 'white',
			borderBottomColor: 'white',
			borderLeftColor: 'white',
			borderRightColor: 'white',
			width: 180
		}, 200);
		$(imgTarget+' img', liContext).delay(200).fadeIn(200);
	}

	// closeBranche function, these should match the rules in the CSS file
	function closeBranche(liContext, imgTarget, liOpacity, liBottom, liLeft, aWidth) {
		$(imgTarget+' img', liContext).fadeOut(200);
		$(imgTarget, liContext).delay(200).animate({
			opacity: liOpacity,
			bottom: liBottom,
			left: liLeft
		}, 200);
		$(imgTarget+' a', liContext).delay(200).animate({
			borderTopColor: '#d8faff',
			borderBottomColor: '#d8faff',
			borderLeftColor: '#d8faff',
			borderRightColor: '#d8faff',
			width: aWidth
		}, 200);
	}

	/* make a li.sub look active when clicked */
	
	/*function subActivate(subActivateLi) {
		$('a, img',subActivateLi).animate({
			width: 208,
			height: 130,
			bottom: 22,
			right: 14
		}, 100);		
	}
	function subDeActivate() {
		$('li.sub a, li.sub img').animate({
			width: 180,
			height: 113,
			right: 0
		}, 100);
		$('li.sub a').animate({
			height: 101
		}, 100);
	}
	
	$('li.sub').click(function() { 	
		subDeActivate();
		subActivate($(this));
	}) */

	// set width of thumbs ul
	var liWidth = $('#thumbs li').width();
	var thumbsUlWidth = liWidth * $('#thumbs li.top').length;
	$('#thumbs ul').width(thumbsUlWidth);

	// add arrow buttons to film strip
	var thumbsUlLeft = parseInt($('#thumbs ul').css('left'))
	$('#thumbs').prepend('<div id="thumbs_arrow_left"></div>');
	$('#thumbs').append('<div id="thumbs_arrow_right"></div>');
	$('#thumbs_arrow_left').click(function() {
		$('#thumbs ul.top').animate({
			left: 0
		}, 400); 	
	})
	$('#thumbs_arrow_right').click(function() {
		$('#thumbs ul.top').animate({
			left: -thumbsUlWidth/2
		}, 400); 	
	})
	
	// set width of thumbsContainer
	function thumbsContainerWidth() {$('#thumbsContainer').width($(window).width() - 240);}
	$(window).resize(function() {
		thumbsContainerWidth()
	});
	thumbsContainerWidth();
	
	// click on a thumb and show the page
	$('article.current').fadeIn(1000);
	$('#thumbs li.top a, #thumbs li.sub a').click(function(e) {
		e.preventDefault();
		$('article.current').fadeOut(500);
		$('article.current').removeClass();
		var currentArticle = $(this).attr('href');
		$(currentArticle).addClass('current');
		$('article.current').fadeIn(500);		
	})
	
	// Full screen backgrounds, based on supersized plugin
	
	//Default settings
	var settings = {
		start_slide				:	1,		//Start slide (0 is random) //Requires multiple background images
		vertical_center         :   1,		//Vertically center background
		horizontal_center       :   1,		//Horizontally center background
		min_width		        :   0,		//Min width allowed (in pixels)
		min_height		        :   0,		//Min height allowed (in pixels)
		fit_portrait         	:   0,		//Portrait images will not exceed browser height
		fit_landscape			:   0,		//Landscape images will not exceed browser width
		image_protect			:	1		//Disables image dragging and right click with Javascript
	}

	//Adjust image size
	function resizenow() {
		return element.each(function() {
		
			var t = $('img', element);
			
			//Resize each image seperately
			$(t).each(function(){
				
				var ratio = ($(this).height()/$(this).width()).toFixed(2);	//Define image ratio
				thisSlide = $(this);
				
				//Gather browser size
				var browserwidth = $(window).width();
				var browserheight = $(window).height();
				var offset;

				
				/**Resize image to proper ratio**/
				
				if ((browserheight <= options.min_height) && (browserwidth <= options.min_width)){	//If window smaller than minimum width and height
				
					if ((browserheight/browserwidth) > ratio){
						options.fit_landscape && ratio <= 1 ? resizeWidth(true) : resizeHeight(true);	//If landscapes are set to fit
					} else {
						options.fit_portrait && ratio > 1 ? resizeHeight(true) : resizeWidth(true);		//If portraits are set to fit
					}
				
				} else if (browserwidth <= options.min_width){		//If window only smaller than minimum width
				
					if ((browserheight/browserwidth) > ratio){
						options.fit_landscape && ratio <= 1 ? resizeWidth(true) : resizeHeight();	//If landscapes are set to fit
					} else {
						options.fit_portrait && ratio > 1 ? resizeHeight() : resizeWidth(true);		//If portraits are set to fit
					}
					
				} else if (browserheight <= options.min_height){	//If window only smaller than minimum height
				
					if ((browserheight/browserwidth) > ratio){
						options.fit_landscape && ratio <= 1 ? resizeWidth() : resizeHeight(true);	//If landscapes are set to fit
					} else {
						options.fit_portrait && ratio > 1 ? resizeHeight(true) : resizeWidth();		//If portraits are set to fit
					}
				
				} else {	//If larger than minimums
				
					if ((browserheight/browserwidth) > ratio){
						options.fit_landscape && ratio <= 1 ? resizeWidth() : resizeHeight();	//If landscapes are set to fit
					} else {
						options.fit_portrait && ratio > 1 ? resizeHeight() : resizeWidth();		//If portraits are set to fit
					}
					
				}
				
				/**End Image Resize**/
				
				
				/**Resize Functions**/
				
				function resizeWidth(minimum){
					if (minimum){	//If minimum height needs to be considered
						if(thisSlide.width() < browserwidth || thisSlide.width() < options.min_width ){
							if (thisSlide.width() * ratio >= options.min_height){
								thisSlide.width(options.min_width);
								thisSlide.height(thisSlide.width() * ratio);
							}else{
								resizeHeight();
							}
						}
					}else{
						if (options.min_height >= browserheight && !options.fit_landscape){	//If minimum height needs to be considered
							if (browserwidth * ratio >= options.min_height || (browserwidth * ratio >= options.min_height && ratio <= 1)){	//If resizing would push below minimum height or image is a landscape
								thisSlide.width(browserwidth);
								thisSlide.height(browserwidth * ratio);
							} else if (ratio > 1){		//Else the image is portrait
								thisSlide.height(options.min_height);
								thisSlide.width(thisSlide.height() / ratio);
							} else if (thisSlide.width() < browserwidth) {
								thisSlide.width(browserwidth);
								thisSlide.height(thisSlide.width() * ratio);
							}
						}else{	//Otherwise, resize as normal
							thisSlide.width(browserwidth);
							thisSlide.height(browserwidth * ratio);
						}
					}
				};
				
				function resizeHeight(minimum){
					if (minimum){	//If minimum height needs to be considered
						if(thisSlide.height() < browserheight){
							if (thisSlide.height() / ratio >= options.min_width){
								thisSlide.height(options.min_height);
								thisSlide.width(thisSlide.height() / ratio);
							}else{
								resizeWidth(true);
							}
						}
					}else{	//Otherwise, resized as normal
						if (options.min_width >= browserwidth){	//If minimum width needs to be considered
							if (browserheight / ratio >= options.min_width || ratio > 1){	//If resizing would push below minimum width or image is a portrait
								thisSlide.height(browserheight);
								thisSlide.width(browserheight / ratio);
							} else if (ratio <= 1){		//Else the image is landscape
								thisSlide.width(options.min_width);
								thisSlide.height(thisSlide.width() * ratio);
							}
						}else{	//Otherwise, resize as normal
							thisSlide.height(browserheight);
							thisSlide.width(browserheight / ratio);
						}
					}
				};
				
				/**End Resize Functions**/
				
				
				//Horizontally Center
				if (options.horizontal_center){
					$(this).css('left', (browserwidth - $(this).width())/2);
				}
				
				//Vertically Center
				if (options.vertical_center){
					$(this).css('top', (browserheight - $(this).height())/2);
				}
				
			});
			
			//Basic image drag and right click protection
			if (options.image_protect){
				
				$('img', element).bind("contextmenu",function(){
					return false;
				});
				$('img', element).bind("mousedown",function(){
					return false;
				});
			
			}
			
			return false;
			
		});
	};

	resizenow()
	
	//Adjust image when browser is resized
	$(window).resize(function(){
		resizenow();
	});
})