function makeScrollable(wrapper, scrollable, upButton, downButton)
{
	var wrapper = jQuery(wrapper), scrollable = jQuery(scrollable), upButton = jQuery(upButton), downButton = jQuery(downButton);
	
	// Hide images until they are not loaded
	scrollable.hide();
	var loading = jQuery('<div class="loading"><img src="/media/indicator.gif" alt="" /></div>').appendTo(wrapper);
		
	// Set function that will check if all images are loaded
	var interval = setInterval(function(){
		var images = scrollable.find('img');
		var completed = 0;
		
		// Counts number of images that are succesfully loaded
		images.each(function(){
			if (this.complete) completed++;	
		});
		
		if (completed == images.length){
			clearInterval(interval);
			// Timeout added to fix problem with Chrome
			setTimeout(function(){
				loading.hide();
				// Remove scrollbars	
				wrapper.css({overflow: 'hidden'});						
				
				scrollable.slideDown('slow', function(){
					enable();	
				});					
			}, 1000);	
		}
	}, 100);

	function enable()
	{
		var iPosition = 0;
		var scrollableDivHeight = scrollable.height() - wrapper.height();

		upButton.mousedown(function(){
			iPosition -= 100;
			
			if( iPosition < 0 )
			{
				iPosition = 0;
			}
			wrapper.scrollTop(iPosition);
		});
		
		downButton.mousedown(function(){
			iPosition += 100;
			
			if( iPosition > scrollableDivHeight )
			{
				iPosition = scrollableDivHeight;
			}
			wrapper.scrollTop(iPosition);
		});
	}
}


jQuery(document).ready(function(){
	makeScrollable( "#scrollableDivWrapper", "#scrollableDiv", '#scrollUp' ,'#scrollDown' );
	
	var images = jQuery('#scrollableDiv').find('img');
	
	images.each(function(){
		image = jQuery(this);
		image.click(function(){
			setImage(jQuery(this).attr('rel'));
			images.css('border','1px #fff solid');
			jQuery(this).css('border','1px #cbb79d solid');
		})
	});
	
});

function setImage(sPath)
{
	var container = jQuery('#galleryImageFrame');
	container.css('background-image', 'url(/media/indicator.gif)');
	var loadingImg = jQuery('<div id="loadingImg"><img src="'+sPath+'" alt="" /></div>').appendTo(container);
	
	var interval = setInterval(function(){
		var images = loadingImg.find('img');
		var completed = 0;
		
		// Counts number of images that are succesfully loaded
		images.each(function(){
			if (this.complete) completed++;	
		});
		
		if (completed == images.length){
			clearInterval(interval);
			// Timeout added to fix problem with Chrome
			setTimeout(function(){
				container.css('background-image', 'url(/'+sPath+')');				
			}, 1000);	
		}
	}, 100);
	
}