/*
 * pingfix
 */
 
$(function()
{
	// this initialises the demo scollpanes on the page.
	$('#pane1').jScrollPane({showArrows:true});
	$('#pane2').jScrollPane({showArrows:true});
	$('#pane3, #pane4').jScrollPane({
		scrollbarWidth:20, 
		scrollbarMargin:10
	});
    
	/* 
	 * this allows you to click a link to add content to #pane4 and shows how to 
	 * reinitialise the scrollbars when you have done this.
	 */
	 
	$('#add-content').bind(
		'click',
		function()
		{
			$('#pane4').append($('<p></p>')
			.html($('#intro').html())).jScrollPane({
				scrollbarWidth:20, 
				scrollbarMargin:10
			});
		}
	);
	
	/*
	 * and this allows you to click the link to reduce the amount of content in
	 * #pane4 and reinitialise the scrollbars.
	 */
	 
	$('#remove-content').bind(
		'click',
		function()
		{
			$('#pane4').empty().append($('<p></p>')
			.html($('#intro').html())).jScrollPane({
				scrollbarWidth:20, 
				scrollbarMargin:10
			});
		}
	);
});

$(document).ready(function() {

	var cssObj = {
		width:16,
		height:16
	};
	var cssObj2 = {
		width:186,
		height:300
	};
	var cssObj3 = {
		width:166,
		height:160
	};

	$(".jScrollPaneDrag").css(cssObj);
	$("#leftBox .jScrollPaneContainer").css(cssObj2);
	$("#pane2").css("width","180px");

	$("#rightBox .jScrollPaneContainer").css(cssObj3);
	$("#pane1").css("width","160px");
	//$(".jScrollPaneDrag").pngfix();
	//DD_belatedPNG.fix(".jScrollPaneDrag");

});