// $(window).load(function ()
$(document).ready(function ()
{
	$('.scroll-handle').load(function ()
	{
		// console.log('load');
		
		var $container = $('.scroll-container');
		var $content = $container.find('.scroll-content');
		var $box = $container.find('.scroll-box');
		var $handle = $container.find('.scroll-handle');
		
		var box_height = $box.height();
		var content_height = $content.height();
		var container_top = $container.offset().top;
		var container_height = $container.height();
		var handle_height = $handle.height();
		
		// console.log(scrollzone_height);
		
		var scrollzone_height = container_height - handle_height;
		
		// console.log('bind');
		$handle
			.unbind('drag')
			.bind('drag', function (event)
			{
				// console.log('drag');
				
				var container_top = $container.offset().top;
				var new_ypos = event.offsetY - container_top;
				var new_yscroll = new_ypos / scrollzone_height * (content_height - box_height + 20);
				
				if (new_ypos > 0 && new_ypos+handle_height < container_height)
				{
					$(this).css({top: new_ypos});
					$box.scrollTop(new_yscroll);
				}
			});
	});
	$('.scroll-handle').attr('src', $('.scroll-handle').attr('src') + '?v=' + (new Date()).getMilliseconds());
	// console.log('ready');
	
	positiontocenter();
});

$(window).resize(function ()
{
	positiontocenter();
});

function positiontocenter()
{
	$container = $('.scroll-container, .box-title, .pic-container, .home-container, .contact-container, .moviecontainer');
	$main = $('#main');

	$container.css({
		'margin-top': ($(window).height() > $main.offset().top + $container.height()) ? ($(window).height() - $main.offset().top - $container.height()) / 2 - 20 : 0
	});

	$container.css({
		'margin-top': ($(window).height() > $main.offset().top + $container.height()) ? ($(window).height() - $main.offset().top - $container.height()) / 2 - 20 : 0
	})
}