$(document).ready(function(){
	var $doc = $(document);
	var $win = $(window);
	var isTouch = 'ontouchstart' in window;
	var isChrome = navigator.userAgent.indexOf('Chrome') > 0;
	
	// dimensions
	var windowHeight, windowWidth;
	var fullHeight, scrollHeight;
	var bgImgWidth = 660, bgImgHeight = 440;
	calculateDimensions();
	
	// states
	//var isNight = false;
	var currentPosition = getScrollTop() / scrollHeight;
	var targetPosition = currentPosition;
	
	// collect timeline elements
	var $videoImage = $('#video_container img');
	var $allNavAnchors = $('#navigation a');
	var $timeElements = $('[data-position]');
	var $naviPoints = $('.nav a');
	var timeElements = [];
	var hotspots = {};
	
	$timeElements.each(function(){
		var $view = $(this);
		var id = $view.attr('id');
		var elem = new TimeElement(this);
		timeElements.push(elem);
		
		if(id) hotspots[id] = elem;
		
		$view.css({position: 'fixed' , top: $view.offset.top });
	});
	
	// handle anchor links
	$('a[href^="#"]').click(function(event){
		event.preventDefault();
		var target = $(this).attr('href').substr(1);
		var hotspot = hotspots[target];
		if ( hotspot ) {
			var pos = hotspot.getPosition();
			setScrollTop(pos * scrollHeight);
		}
	});
	
	function setScrollTop(value) { $win.scrollTop(value); }
	
	function getScrollTop() { return $win.scrollTop() || (document.documentElement && document.documentElement.scrollTop); }
	
	function calculateDimensions() {
		windowWidth = $win.width();
		windowHeight = $win.height();
		fullHeight = $('#wrapper').height();
		scrollHeight = fullHeight - windowHeight;
	}
	
	function setTargetPosition(position , immediate) {
		targetPosition = position;
		if ( immediate ) currentPosition = targetPosition;
	}
	
	function handleResize() {
		calculateDimensions();
		renderBackgroundImage();
		renderTimeline(currentPosition);
		//renderNavigation();
		handleScroll();
	}
	
	function handleScroll() {
		setTargetPosition(getScrollTop() / scrollHeight);
		activateElement($('#navigation') , targetPosition < 0.001);
	}
	
	// rendering
	var scrollActivateTimeout;
	function renderTimeline(position) {
		var minY = -2500, maxY = windowHeight + 2500;
	
		// element position
		$.each(timeElements,function(index,element){
			var elemPosition = element.getPosition();
			var elemY = windowHeight/2 + element.speed * (elemPosition-position) * scrollHeight;
			var active = false;
			
			if (elemY < minY || elemY > maxY) {
				element.view.css({'visiblity':'none', top: '-1000px','webkitTransform':'none'});
			} else {
				element.view.css('visiblity','visible');
				positionElement(element.view,null,elemY);
				
				if(elemY < windowHeight/0.5) {
					var x = (windowHeight/2 - elemY) / 100;
					x = x*x * 10;
					
					if (element.view.hasClass('hotspot')) {
						if ( element.view.hasClass('right')) {
							element.view.css('margin-right',-x);
						} else if ( element.view.hasClass('left')) {
							element.view.css('margin-left',-x);
						}
					}
				} else if ( element.view.hasClass('hotspot') ) {
					element.view.css({'margin-left':0,'margin-right':0});
				}
				
				active = Math.abs(windowHeight/2 - elemY) < Math.max(windowHeight/5,100);
			}
			
			if (getElementActive(element.view) != active) {
				clearTimeout( element.scrollActivateTimeout );
				setElementActive(element.view,active);				
				activateElement(element.anchor, active);
			}
		});
		// video
		showImage(currentPosition);
	}
	
	function positionElement(elem, x, y) {
		if (Modernizr.csstransforms) {
			var xpos = ( x === null ? $.data(elem,'x') : x ) || 0;
			var ypos = ( y === null ? $.data(elem,'y') : y ) || 0;
			$.data(elem,'x',xpos);
			$.data(elem,'y',ypos);
		}
		
		if ( $.browser.safari && !isTouch && !isChrome ) {
			elem.css({top:-1000,webkitTransform:'translate3d('+(xpos)+'px,'+(ypos+1000)+'px,0px)'});
		} else if ( Modernizr.csstransforms ) {
			var transform = 'translate('+(xpos)+'px,'+(ypos+1000)+'px)';
			elem.css({ '-webkit-transform':transform, '-moz-transform':transform, '-o-transform':transform, '-ms-transform':transform });
		} else {
			if ( x !== null ) elem.css('left',x);
			
			if ( y !== null ) elem.css('top',y);
		}
	}
	
	function activateElement(elem, active) {
		$.data(elem, 'active', active);
		
		if(active) {
			elem.addClass('active');
			
			var naviElemText = elem.attr('rel');
			
			if(naviElemText) {
				$('#navi_text').text(naviElemText);
			}
		} else {
			elem.removeClass('active');
		}
	}
	
	function setElementActive(elem, active) { $.data(elem, 'active', active); }
	
	function getElementActive(elem) { return $.data(elem, 'active'); }
	
	function renderBackgroundImage(){
		// get image container size
		var scale = Math.max( windowHeight/bgImgHeight , windowWidth/bgImgWidth );
		var width = scale * bgImgWidth , height = scale * bgImgHeight;
		var left = (windowWidth-width)/2, top = (windowHeight-height)/2;
		
		if(($.browser.safari || isTouch) && !isChrome) {
			var transform = 'translate3d('+[-bgImgWidth/2,-bgImgHeight/2,0].join('px,')+'px) scale3d('+scale+','+scale+',1) translate3d('+[windowWidth/2/scale,windowHeight/2/scale,0].join('px,')+')';
			$videoImage.width(bgImgWidth).height(bgImgHeight).css('-webkit-transform',transform).css({'position':'fixed', top: 0, left: 0});
		} else if ( Modernizr.csstransforms ) {
			var transform = 'translate('+[-bgImgWidth/2,-bgImgHeight/2].join('px,')+'px) scale('+scale+') translate('+[windowWidth/2/scale,windowHeight/2/scale].join('px,')+'px)';
			$videoImage.width(bgImgWidth).height(bgImgHeight).css({ '-webkit-transform':transform, '-moz-transform':transform, '-o-transform':transform, '-ms-transform':transform }).css({'position':'fixed', top: 0, left: 0});
		} else {
			$videoImage.width(width).height(height).css('position','fixed').css('left',left+'px').css('top',top+'px');
		}
	}
	
	// main render loop
	window.requestAnimFrame = (function(){
		return window.requestAnimationFrame || window.webkitRequestAnimationFrame ||
		window.mozRequestAnimationFrame || window.oRequestAnimationFrame ||
		window.msRequestAnimationFrame || function(/* function */ callback, /* DOMElement */ element){
			window.setTimeout(callback, 1000 / 60);
		};
	})();
	
	function animloop(){
		requestAnimFrame(animloop);
		
		if ( Math.floor(currentPosition*5000) != Math.floor(targetPosition*5000) ) {
			var deaccelerate = Math.max( Math.min( Math.abs(targetPosition-currentPosition)*5000, 10), 2);
			currentPosition += (targetPosition - currentPosition) / deaccelerate;
			renderTimeline(currentPosition);
		}
	}
	
	animloop();
	
	// video handling
	var imageSeqLoader = new ImgLoader("/_gfx/video/low/{index}.jpg", 727, {
		indexSize: 4,
		onProgress: handleLoadProgress,
		onComplete: handleLoadComplete,
		stopAt: isSlowBrowser() ? (isTouch?4:8) : 1
	});
	
	//var imageSeqLoader = daySeqLoader;
	var loadCounterForIE = 0; // there seems to be a problem with ie calling the callback several times
	
	imageSeqLoader.loadPosition(currentPosition,function(){
		loadCounterForIE++;
		
		if (loadCounterForIE == 1) {
			showImage(currentPosition);
			imageSeqLoader.load();
			imageSeqLoader.load();
			imageSeqLoader.load();
			imageSeqLoader.load();
		}
	});
	
	var currentSrc, currentIndex;
	var highresTimeout;
	
	function showImage(position) {
		var index = Math.round(currentPosition * (imageSeqLoader.length-1));
		var img = imageSeqLoader.getNearest(index);
		var nearestIndex = imageSeqLoader.nearestIndex;
		
		if (nearestIndex < 0) nearestIndex = 0;
		
		var $img = $(img);
		var src;
		
		if (!!img) {
			src = img.src;
			if (src != currentSrc) {
				$videoImage[0].src = src;
				currentSrc = src;
			}
		}
		
		clearTimeout(highresTimeout);
		
		highresTimeout = setTimeout(function(){
			if (!!src) {
				$('#debug').text( nearestIndex + ' / ' + index + ' / ' + (Math.round( index / imageSeqLoader.length * 10000) / 100));
				var highSrc = src.split('/low/').join('/high/');
				loadHighres(highSrc);
			}
		},isSlowBrowser()?500:150);
	}
	
	var loadHighresCounter = 0;
	
	function loadHighres(src) {
		var videoImage = $videoImage[0];
		videoImage.src = src;
	}
	
	$('body').append('<div id="loading-bar" style="position:fixed; bottom:0; left:0; background-color: #DF0012; background-color: rgba(223,0,18,0.5); height: 1px;"></div>');
	
	function handleLoadProgress() {
		var progress = imageSeqLoader.getLoadProgress() * 100;
		$('#loading-bar').css({width:progress+'%',opacity:1});
	}
	
	function handleLoadComplete() { $('#loading-bar').css({width:'100%',opacity:0}); }
	
	$win.resize(handleResize);
	setTimeout(handleResize, 250);
	$win.scroll(handleScroll);
	
	handleResize();
	
	// helper classes
	function TimeElement(view, options) {
		options = options || {};
		var $view = $(view);
		this.id = $view.attr('id');
		this.view = $view;
		this.anchor = $allNavAnchors.filter('[href="#'+$view.attr('id')+'"]');
		this.anchor = this.anchor.closest('li');
		this.getPosition = function() { return options.dataPosition || Number($view.attr('data-position')/100) };
		this.speed = options.speed || Number($view.attr('data-speed')) || 1;
	}
	
	function easeCos(t) { return Math.cos( (x*Math.PI+Math.PI)+1 ) / 2; }
	
	function isSlowBrowser() { return isTouch || ($.browser.msie && Number($.browser.version) <= 8) ? true : false; }
	
	// Format Navigation Points
	$naviPoints.each(function(i) {
		var naviPointHeight = $(this).height();
		var linkHeight = $(this).children().first('span').outerHeight(true);
		
		$(this).children().first('span').css('margin-top', (naviPointHeight - linkHeight) / 2);
	});
	
	// Small Navigation RollOver
	var naviText;
	
	$('#navigation ul li a').bind('mouseover', function(event) {
		naviText = $('#navi_text').text();
		$('#navi_text').text($(this).parent('li').attr('rel'));
	});
	
	$('#navigation ul li a').bind('mouseout', function(event) {
		$('#navi_text').text(naviText);
	});
	
	$win.bind('load scroll', function(event) {
		if(window.pageYOffset > 0) $('#video_container div').hide();
		(window.pageYOffset >= scrollHeight) ? $('#btn_hidden_place').show() : $('#btn_hidden_place').hide();
	});
	
	// touch override
	if (isTouch) {
		(function(){
			$('#wrapper').css('height',1);
			var scrollPos = 0;
			var MAXSCROLL = 15000;
			var oldCalculateDimensions = calculateDimensions;
			
			calculateDimensions = function() {
				oldCalculateDimensions();
				scrollHeight = MAXSCROLL - windowHeight;
			};
			
			var oldGetScrollTop = getScrollTop;
			
			getScrollTop = function() { return scrollPos; };
			
			var oldSetScrollTop = setScrollTop;
			
			setScrollTop = function(value) {
				scrollPos = value;
				dispatchScroll();
			};
			
			function dispatchScroll() {
				targetPosition = scrollPos / scrollHeight;
				if(scrollPos > 0) $('#video_container div').hide();
				(scrollPos >= scrollHeight) ? $('#btn_hidden_place').show() : $('#btn_hidden_place').hide();
			}
			
			var d = document;
			var touchMoved, touchDown, touchBeginPosition, isLinkTouch;
			
			function onTouchStart(event) {
				var isNavigation = $(event.target).filter('a');
				
				if ( isNavigation.length ) {
					isNavigation = isNavigation.parents('#navigation').length >= 1;
					return;
				}
				
				if ( $(event.target).parents('a').length == 0 ) event.preventDefault();
				
				touchDown = true;
				var touch = event.touches[0];
				touchX = touch.clientX;
				touchY = touch.clientY;
				touchBeginPosition = { x: touchX , y: touchY , scroll: scrollPos };
				d.addEventListener('touchmove', onTouchMove, false);
				d.addEventListener('touchend', onTouchEnd, false);
			}
			
			function onTouchMove(event) {
				event.preventDefault();
				var touch = event.touches[0];
				touchX = touch.clientX;
				touchY = touch.clientY;
				var dy = (touchY-touchBeginPosition.y);
				
				if ( Math.abs(dy) > 3 ) touchMoved = true;
				
				scrollPos = touchBeginPosition.scroll - dy * 2;
				scrollPos = Math.min(MAXSCROLL, Math.max(0, scrollPos));
				dispatchScroll();
			}
			
			function onTouchEnd(event) {
				if ( touchMoved ) event.preventDefault();
				
				d.removeEventListener('touchmove', onTouchMove, false);
				d.removeEventListener('touchend', onTouchEnd, false);
				touchDown = false;
			}
			
			d.addEventListener('touchstart', onTouchStart, false);
		})();
	}
});

window.onunload = function() {  };