$(document).ready(function(){
	$('#largepreview img').load(function(){
		resize();
	});
	resize();
	
	$(window).resize(function(){
		resize();
	});
	$('#thumbs').jScrollPane({showArrows:true,scrollbarWidth: 20});
	
	$('.jScrollPaneContainer').append('<div class="top_left"><img src="template/images/top_left.gif" /></div><div class="bottom_left"><img src="template/images/bottom_left.gif" /></div>');
});

function resize(){
	// Setting for split screen
	var leftPercent = 0.4;
	var rightPercent = 0.6;
	var middleGap = 10;
	var padding = 5;
	
	// Thumbnail settings
	var maxWidth = 200;
	var minWidth = 100;
	var thumbnailGap = 5;
	
	// Calculated variables
	var leftWidth = (($('#main').width() - middleGap)*leftPercent)-(padding);
	var rightWidth = (($('#main').width() - middleGap)*rightPercent)-(padding*2);
	
	if($('#thumbs').attr('scrollHeight')>0){
		var thumbBoxWidth = (leftWidth-(padding*2))-20;
	}else{
		var thumbBoxWidth = leftWidth-padding;
	}
	
	// Set widths
	$('#left').width(leftWidth);
	if($('.jScrollPaneContainer').length>0){
		$('#thumbs').width(leftWidth-(20+padding));
	}else{
		$('#thumbs').width(leftWidth);
	}
	$('.jScrollPaneContainer').width(leftWidth);
	
	$('#left').height($('#right').height());
	$('#thumbs').height($('#right').height()-67);
	$('.jScrollPaneContainer').height($('#right').height()-67);
	$('.jScrollPaneContainer .jScrollPaneTrack').height($('#right').height()-97);
	
	$('#right').width(rightWidth);
	$('#largepreview').width(rightWidth);
	$('#largepreview img').width(rightWidth);
	
	// Set thumbnails
	var thumbnailCols = Math.floor(thumbBoxWidth/(thumbnailGap+minWidth));
	var thumbnailWidth = Math.floor((thumbBoxWidth/thumbnailCols)-thumbnailGap);
	
	//console.log(thumbnailCols+' - '+thumbnailWidth);
	
	$('.thumbnail').width(thumbnailWidth);
	$('.thumbnail img').width(thumbnailWidth);
	
	$('.thumbnail').height(thumbnailWidth);
	$('.thumbnail img').height(thumbnailWidth);
	
	$('#thumbs').jScrollPane({showArrows:true,scrollbarWidth: 20});
	
	$('#searchbox').width($('#left').width()-20);
	
	$('#overlay').width($('#largepreview img').width());
	$('#overlay').height($('#right').height());
}