function initLightbox(sTargetSelector)
{
		$(sTargetSelector).each(function() {
			// lightbox the image in the default case info
			$(this).find('div.defaultCaseInfo a[rel="lbox"]').lightBox();
			thisPanelID = $(this).attr("id");

			// lightbox the images grouped by media category in separated galleries
			$(this).find('ul.selectbox > li').each(function(){
				val = $(this).find('a:first').attr("value");
				if(val != 0)
				{
					target = '#' + thisPanelID + ' div.AssetCat' + val + ' a[rel="lbox"]';
					$(target).lightBox();
				}
			});
		});
}

function initScrollPreparation() {
	$('<div id="carrouselIndexes"></div>').appendTo($('body'));
	$('<input type="hidden" id="scrollDirection"></input>').appendTo($('#carrouselIndexes'));
	var highestIndex = parseInt($('#highestIndex').text());
	$('<input type="hidden" id="scrollHighestIndex"></input>').val(highestIndex).appendTo($('#carrouselIndexes'));
	var lastReqIndex = parseInt($('#lastRequestedIndex').text());
	$('<input type="hidden" id="scrollLastRequestedIndex"></input>').val(lastReqIndex).appendTo($('#carrouselIndexes'));
	$('#slider .scrollContainer #indexes').remove();
	
	
	var lri = lastReqIndex;
	var hi = highestIndex;
	var firstItem = lri -1;
	var lastItem = lri + 1;
	
	if ( lri >= 1 && lri <= hi - 1)
	{
		// requested not the first item, and not the last item...
		var i = 0;
		for(i = firstItem -1; i >= 0; i--)
		{
			$('<div id="ind_' + i + '" class="panel preload in_' + i + '">&nbsp;</div>').prependTo('#slider .scrollContainer');
		}
		var j = 0;
		for(j = lastItem + 1; j <= hi; j++)
		{
			$('<div id="ind_' + j + '" class="panel preload in_' + j + '">&nbsp;</div>').appendTo('#slider .scrollContainer');
		}
		// array is nu  van 0 tot max,  (laatste item moet nog voorop geplaatst worden.
		var $lastPanel = $('#slider .scrollContainer > div:last').prependTo('#slider .scrollContainer');
	}
	else if(lri == 0)
	{
		// requested  the first item...
		var x = 0;
		for (x = lastItem + 1;  x <= (hi-1); x++)
		{
			$('<div id="ind_' + x + '" class="panel preload in_' + x + '">&nbsp;</div>').appendTo('#slider .scrollContainer');
		}
	}
	else if (lri == hi)
	{
		// requested last item
		lastItem = 0;
		var y = 0;
		for (y = lastItem + 1;  y <= (hi-2); y++)
		{
			$('<div id="ind_' + y + '" class="panel preload in_' + y + '">&nbsp;</div>').appendTo('#slider .scrollContainer');
		}
		// array is nu  van  voorlaatste - laatste - eerste - 1 - 2 - 3 ... - derde laatste    ,  (1e item moet nog achterop geplaatst worden.
		var $firstPanel = $('#slider .scrollContainer > div:first').appendTo('#slider .scrollContainer');
	}
	else
	{
		// should never ever occure but you never know
	}
	
	scrollPos = lastReqIndex + 1;
	if(scrollPos > highestIndex) {scrollPos = 0}
	startCarrousel(scrollPos);
	initDropdowns("#slider ");
	$('div.loadingcarrousel').fadeOut(500);
	initLightbox("#slider div.panel");
	
	$('#slider .scrollContainer > div.preload').each(function(){
		var cont = '#slider .scrollContainer';
		var curId = $(this).attr('id');
		arr = curId.split("_");
		curId = arr[1];
		preloadNewItem(curId);
	});
	
	
	
}

function preloadNewItem(indexToRequest)
{
	$('<div id="newItem' + indexToRequest + '" class="case' + indexToRequest + '"></div>')
		.appendTo('body')
		.load("http://www.saatchi.be/funcs/?getCaseByIndex=true&theIndex=" + indexToRequest, function()
		{
			newID = $('#newItem' + indexToRequest + ' div.panel').attr('id');
			$('#ind_' + indexToRequest).text('');
			$('#newItem' + indexToRequest + ' div.panel > *').appendTo('#ind_' + indexToRequest);
			$('#newItem' + indexToRequest).remove();
			$('#ind_' + indexToRequest).removeClass('preload');
			initDropdowns("#slider ");
			$('#ind_' + indexToRequest).attr('id', newID);
			
			initLightbox("#slider div.panel");
		});
}

function startCarrousel(startAtIndex) {



//$(document).ready(function () {
	//var $lastPanel = $('#slider .scrollContainer > div:last').prependTo('#slider .scrollContainer');

	if($('#slider .scrollContainer > div').length > 0)
	{
		var $panels = $('#slider .scrollContainer > div');
		var $container = $('#slider .scrollContainer');

		// if false, we'll float all the panels left and fix the width 
		// of the container
		var horizontal = true;

		// float the panels left if we're going horizontal
		if (horizontal) {
			$panels.css({
				'float' : 'left',
				'position' : 'relative' // IE fix to ensure overflow is hidden
			});

			// calculate a new width for the container (so it holds all panels)
			$container.css('width', ($panels[0].offsetWidth * $panels.length) + 170);
		}

		// collect the scroll object, at the same time apply the hidden overflow
		// to remove the default scrollbars that will appear
		var $scroll = $('#slider .scroll').css('overflow', 'hidden');
		
		// handle all onafter stuff
		function functionOnAfter(){
			$('#slider').removeClass('scrolling');
		}
		// handle all onbefore stuff
		function functionOnBefore(){
			$('#slider').addClass('scrolling');
			// hide drop down menus
			$('ul.selectbox').hide();
		
			// stop flash movies on before scroll
			$("div.flashMovie object").each(function() { 
				var flashmovie = document.getElementById($(this).attr("id"));
				try
				{
					flashmovie.sendStopToFlash();
				}
				catch(err)
				{
					//Handle errors here
				}
			});
		}

		// offset is used to move to *exactly* the right place, since I'm using
		// padding on my example, I need to subtract the amount of padding to
		// the offset.  Try removing this to get a good idea of the effect
		var offset = parseInt((horizontal ? 
			$container.css('paddingTop') : 
			$container.css('paddingLeft')) 
			|| 0) * -1;
			offset = offset - 101;

			$('div.scrollLeftArea a').bind("click", function(){
				// fetch previous ...
				$('#scrollDirection').val('-1');
			});
			$('div.scrollRightArea a').bind("click", function(){
				// fetch next ...
				$('#scrollDirection').val('1');
			});

		var scrollOptions = {
			target: $scroll, // the element that has the overflow
			start: startAtIndex, 
			// can be a selector which will be relative to the target
			//items: '#slider .scrollContainer > div',
			items: '.panel',
			//items: $panels,
			prev: 'div.scrollLeftArea a', 
			next: 'div.scrollRightArea a',
			force: true, 
			lazy: true,
			// allow the scroll effect to run both directions
			axis: 'x', // 'xy'
			onBefore: functionOnBefore, 
			onAfter: functionOnAfter, // our final callback
			offset: offset,
			// duration of the sliding effect
			// duration: 500, 
			duration: 200, 
			// easing - can be used with the easing plugin: 
			// http://gsgd.co.uk/sandbox/jquery/easing/
			easing: 'swing'
		};
		
		// apply serialScroll to the slider - we chose this plugin because it 
		// supports// the indexed next and previous scroll along with hooking 
		// in to our navigation.
		$('#slider').serialScroll(scrollOptions);
		
		// now apply localScroll to hook any other arbitrary links to trigger 
		// the effect
		// $.localScroll(scrollOptions);

		// finally, if the URL has a hash, move the slider in to position, 
		// setting the duration to 1 because I don't want it to scroll in the
		// very first page load.  We don't always need this, but it ensures
		// the positioning is absolutely spot on when the pages loads.
		 scrollOptions.duration = 1;
		 $.localScroll.hash(scrollOptions);
		 
		 
		$('.AssetPosContainer').css('zIndex','9999');
	
	}
//});
}