var ocontainer;
	var ocontent;
	var spaceToScroll;
	$(document).ready(
		function () 
		{
			// Image Box
			$.ImageBox.init(
				{
					border				: 10,
					loaderSRC: 'loading.gif',
					closeHTML: '<img src="close.gif" />',
					overlayOpacity		: 0.8,
					textImage			: 'Image',
					textImageFrom		: 'of',
					fadeDuration		: 400
				}
			);
			
			
			// Scrolling
			ocontainer = $('div.container');
			ocontent = $('div.content');
			
			containerSize = jQuery.iUtil.getSize(ocontainer.get(0));
			containerPosition = jQuery.iUtil.getPosition(ocontainer.get(0));
			containerInner = jQuery.iUtil.getClient(ocontainer.get(0));
			
			contentSize = jQuery.iUtil.getSize(ocontent.get(0));

			// pause can be used if the images do not have sizes
			$('div.slider1').pause(0)
				// slider left is container left
				.css('left', containerPosition.x +'px')
				// slider width = length of container.
				.css('width', containerSize.wb + 'px')
				// slider top is container top plus height of container
				.css('top', containerPosition.y + containerSize.hb + 'px');

			// area to scroll = width of content - width of inside of container
			spaceToScroll = contentSize.wb - containerInner.w;
			
			$('div.indicator')
				// indicator width = width of inside of container * (width of outside of container / width of content)
				.css('width', containerInner.w * containerSize.wb / contentSize.wb + 'px')
			
			$('.slider1').Slider(
				{
					accept : '.indicator',
					onSlide : function( cordx, cordy, x , y)
					{
						ocontent
							//
							//.css('top', - spaceToScroll * cordy / 100 + 'px');
							//
							.css('left', - spaceToScroll * cordx / 100 + 'px');
					}
				}
			);
		}
	);