$(document).ready(function(){
	setPane();
	    $('#scroll-pane')
        .bind('mousewheel', function(event, delta) {
            var dir = delta > 0 ? 'Up' : 'Down';
            //$(this).text(dir + ' at a velocity of ' + vel);
			var cur = 	$("#slider-vertical").slider("value");
			cur = cur+delta*5;
			if(cur<0) { cur = 0; }
			if (cur>100) {cur = 100};
			$("#slider-vertical").slider("value", cur);
	        var scrollContent = $('#content');
	        var scrollPane = $('#scroll-pane');

			if( scrollContent.height() > scrollPane.height() ){
					scrollContent.css('margin-top', (Math.round( cur / 100 * ( scrollPane.height() - scrollContent.height() ))*-1) + (scrollPane.height() - scrollContent.height()) + 'px');
			} else {
					scrollContent.css('margin-top', 0);
			}
            return false;
        });

});

$(window).resize(function() {
	// afmetingen bijwerken
	setPane()
});


function setPane(){
		var minHeight = 585;
        var scrollPane = $('#scroll-pane');
        var scrollContent = $('#content');
		var winHeight = $(window).height();
		var defPanelHeight = 252;
		var defScrollPaneHeight = 220;
		var defSliderContainerHeight = 212;
		var defSliderVerticalHeight = 130;
		
		if (winHeight>minHeight){
			// alles groter maken
			// panel
			// scrollpane
			// slider-container
			// slider-vertical
			var diff = winHeight-minHeight;
			$('#panel').height(defPanelHeight+diff);
			$('#scroll-pane').height(defScrollPaneHeight+diff);
			$('#slider-container').height(defSliderContainerHeight+diff);
			$('#slider-vertical').height(defSliderVerticalHeight+diff);
			
		}
		
        if(scrollPane.length && scrollContent.length){
                scrollPane.width(348);
                if( scrollContent.height() > scrollPane.height() ){
                        var scrollbar = $("#slider-vertical").slider({
                                orientation: "vertical",
                                range: "min",
                                min: 0,
                                max: 100,
                                value: 100,
                                slide:function(e, ui){
                                        if( scrollContent.height() > scrollPane.height() ){
                                                scrollContent.css('margin-top', (Math.round( ui.value / 100 * ( scrollPane.height() - scrollContent.height() ))*-1) + (scrollPane.height() - scrollContent.height()) + 'px');
                                        } else {
                                                scrollContent.css('margin-top', 0);
                                        }
                                }
                        });
                        $('#slider-container').css({'display':'block'});
                        scrollPane.width(318);
                } else {
					$('#slider-container').css({'display':'none'});
				}
        }
}