$(document).ready(function(){
	

	
	/*
	1ST COLUMN
	*/
	
	$('div#col1')
		.wrapInner('<div class="scroll-content">')
		.children()
		.wrap('<div class="scroll-pane">')
		.parent()
		.append('<div class="scroll-bar-wrapper"><div class="scroll-bar">');
		
	var $scrollPane = $('.scroll-pane');
	var $scrollContent = $('.scroll-content');
	
	var $scrollbar = $('.scroll-bar').slider({
		orientation: "vertical",
		value: 0,
		range: "min",
		min: -100,
		max: 0,
		slide: function(event, ui){
			if($scrollContent.height() > $scrollPane.height()){
				$scrollContent.css('margin-top', Math.round(ui.value/-100 * ($scrollPane.height() - $scrollContent.height())) + "px" );
			}else{
				$scrollContent.css('margin-top', 0);
			}
		}
	});
	
	$scrollbar.find('.ui-slider-handle')
		.css({
			'cursor': 'pointer',
			'height': 30
		})
		.append("<span class='ui-icon ui-icon-grip-dotted-horizontal'>")
		.wrap('<div class="ui-hanlde-helper-parent">');
		
		
					



});