var minCanvasHeight = 300;

function JQescape(str) {
	var chars = '\\'+'#;&,.+*~\':"!^$[]()=>|/'.split();
	for(i=0;i<chars.length;i++) {
		str = str.replace(chars[i], '\\'+chars[i]);
	}
	return str;
}

$(document).ready(
	function(){
		$('body').addClass('js');
		$(window).resize(recalcsize);
		$('#contentcanvas img.bgimage').load(recalcsize);
		recalcsize();
		initScroll();
		initAjxReel();
		
		if(VideoJS && $('video').length) {
			VideoJS.setup();
			window.setTimeout(recalcsize, 400);
		}
	}
);

function recalcsize() {
	var ctHeight = $('#contentholder').height();
	var canvasHeight = $(window).height() - $('#header').height();
	if(canvasHeight < minCanvasHeight) {
		canvasHeight = minCanvasHeight;
	}
	if(canvasHeight < ctHeight + 30) {
		canvasHeight = ctHeight + 30;
	}
	$('#canvas').css('height', canvasHeight + 'px');

	if($('#contentcanvas img.bgimage').height() < $('#contentcanvas').height()) {
		$('#contentcanvas img.bgimage').css({height:'100%',width:'auto'});
	} else if($('#contentcanvas img.bgimage').width() < $('#contentcanvas').width()) {
		$('#contentcanvas img.bgimage').css({height:'auto',width:'100%'});
	}
	
/*
	var top = Math.floor((canvasHeight-ctHeight)/2);
	if(top > 0) {
		$('#contentholder').css({top: top+'px'});
	}
*/	
}

function initAjxReel() {
	var reel = $('#reel');
	/**
	 * Capture inital HTML for no-hash-case
	 */
	var initHTML = $('#contentcanvas').html() + '<!--init-->';
	var setHTML = function(html) {
		$('#contentcanvas').fadeOut(50, function() {
			$('#contentcanvas').empty().html(html).fadeIn(50, function(){
				VideoJS.setup();
				recalcsize();
			});
			$('#contentcanvas img.bgimage').load(recalcsize);
			window.setTimeout(recalcsize, 400);
		});
	}
	var loadHTML = function(url) { $.get(url,{ajax:1,content:1},setHTML);}
	if(reel.length) {
		// All reel urls are prefixed with a hash
		$('a', reel).each(function(){
			$(this).attr('href','#'+$(this).attr('href'));
		});
		/**
		 * Monitor hash changes to load HTML. This keeps the browser history
		 * working and allows bookmarking 
		 */
		var activeHash='';
		window.setInterval(
			function(){
				var hash = location.hash;
				if(hash != activeHash) {
					if(hash.length == 0) {
						setHTML(initHTML);
					} else if($('a[href$='+hash+']',reel).length > 0) {
						loadHTML(hash.slice(1));
					}
					activeHash = hash;
				}
			}
			,30
		);
	}
}


function initScroll() {
	var reel = $('#reel');
	
	var scrollbuffer = 0;
	var scrolling = 0;
	var iv;
	
	if(reel.length) {
		$('#reel>*').wrapAll('<div id="reelinner"/>');
		var scroll = $('<div id="reelscroll"/>');
		scroll.fadeTo(0,0); 
		$('#reel').append(scroll);
		var inner = $('#reelinner');
		var i = 0;
		var scrollReel = function() {
			++i;
			var nodetop = inner.position().top;
			var rh = reel.height();
			var ih = inner.height();
			var scrollmax = rh - ih
						
			if(scrollmax<0) {
				var speed = 1 + Math.floor( Math.abs(scrollbuffer) / 2);
				if (scrollbuffer < 0) {
					dir = -1;
					scrollbuffer = Math.round(scrollbuffer + speed);
				} else {
					dir = +1;
					scrollbuffer = Math.round(scrollbuffer - speed);
				}
				var delta = dir * speed * speed * 3;
				nodetop += delta;
				inner.css({top: nodetop+'px'});
			} else {
				scrollbuffer = 0;
			}
						
			if(scrollbuffer == 0) {
				window.clearInterval(iv);
				iv = false;
							
				if(scrollmax > 0 || nodetop > 0) {
					inner.animate({top: 0}, 100);
				} else if (nodetop < scrollmax) {
					inner.animate({top: scrollmax},100);
				}
			}
			scrollIndicatorPos();
		}
		
		var scrollIndicatorPos = function(){
			var rh = $('#reel').height();
			var ih = $('#reelinner').height()
			var t = $('#reelinner').position().top;
			var scrollmax = rh - ih;
			if(scrollmax < 0) {
				var fraction = t / scrollmax;
				if(fraction < 0) {
					fraction = 0;
				} else if (fraction > 1) {
					fraction = 1;
				}
				var top = 5 + Math.round( (rh - 14 - $('#reelscroll').height()) * fraction);
				 $('#reelscroll').css({top: top+'px'});
			}
		}
		
		scrollvis = false;
		keepshowing = false;
		var showScroll = function() {
			if(!scrollvis) {
				scrollvis = true;
				if($('#reel').height() < $('#reelinner').height()) {
					$('#reelscroll').fadeTo(400, 0.8);
				}
			}
		}
		var hideScroll = function() {
			if(scrollvis && !keepshowing) {
				scrollvis = false;
				$('#reelscroll').fadeTo(400, 0);
				
			}
		}
		reel.hover(showScroll,hideScroll);
		reel.mousewheel(function(e, delta){
			if(Math.abs(delta) > 4) { delta = (delta > 0) ? 4 : -4; }
			scrollbuffer += delta;
			if(!iv) {
				iv = window.setInterval(scrollReel, 20);
			}
		});
		
		scroll.mousedown(function(e){
			e.stopPropagation();
			keepshowing = true;
			var startY = 1 * e.pageY;
		

			//start position
			var start = scroll.position().top;
			var maxtop = $('#reel').height() - (10+scroll.height());
			
			var rh = reel.height();
			var ih = inner.height();
			var scrollmax = rh - ih
			
			if(scrollmax < 0) {
				scrollbuffer = 0;
				$('body').bind('mousemove',function(ev) {
					ev.stopPropagation();
					ev.returnValue = false;
					// $('h1').html('tst');
					var top = start - (startY - ev.pageY);

					if(top < 5) {
						top = 5;
					} else if( top > maxtop) {
						top = maxtop;
					}
					itop = scrollmax * (top-5) / (maxtop-5);
					scroll.css({top: top});
					inner.css({top: itop});
					return false;
				});
				$('body').bind('mouseup',function(){
					keepshowing = false;
					$('body').unbind('mousemove');
					$('body').unbind('mouseup'); hideScroll();
				});
			}
		});
		$(window).resize(scrollIndicatorPos);
	}
}