//
// If you need help with this, mug Brian in a dark alley
// and demand him to fix his code (brianreavis@inwo.com)
//

$(document).ready(function(){
	// ----------
	// image loader...
	// ----------
	var iLoader = $('<div></div>').attr('id', 'iLoader').css({
		position: 'absolute',
		top: -2000,
		left: -2000
	});
	$('body').append(iLoader);
	function loadImage(src, opts, callback){
		//unload existing loading attempts
		if (opts.className == 'spotty'){
			$('img.spotty', iLoader).remove();
		}
		//load the requested image
		var i;
		var placeIn = null;
		if (typeof src == 'string'){
			i = $(new Image());
			i.attr('src', src);
		}else{
			i = $(src).clone();
			placeIn = $(src).parent();
		}
		if (opts.className) i.addClass(opts.className);
		var afterLoad = function(){
			if (placeIn){
				placeIn.append(i);
				i.hide().fadeIn(500);
			}
			if (callback) callback(i);
		}
		iLoader.append(i);
		i.bind('load', afterLoad);
		if (i.complete || (typeof i.naturalWidth != undefined && i.naturalWidth > 0)){
			afterLoad();
		}
	}

	// ----------
	// handle nav selection
	// ----------
	function selectNav() {
		$(this)
			.parents('ul:first')
				.find('a')
					.removeClass('selected')
				.end()
			.end()
			.addClass('selected');
	}
		
	$('#thumbs .scroller').find('a').click(selectNav);
	
	// go find the navigation link that has this target and select the nav
	function trigger(data) {
		var el = $('.scroller .navigation').find('a[href$="' + data.id + '"]').get(0);
		selectNav.call(el);
	}

	if (window.location.hash) {
		trigger({ id : window.location.hash.substr(1) });
	} else {
		$('#thumbs .scroller a:first').click();
	}

	// ----------
	//go through and find the scrollers
	// ----------
	$('.scroller').each(function(){
		var $panels = $('.container > li', this);
		var $container = $('.container', this);
		
		$panels.css({
			'float' : 'left',
			'position' : 'relative' // IE fix to ensure overflow is hidden
		});
		$container.css('width', ($panels[0].offsetWidth + 6) * $panels.length);
		var $scroll = $(this).css('overflow', 'hidden');
		var offset = parseInt($container.css('paddingTop') || 0) * -1;
		var scrollOptions = {
			target: $scroll,
			items: $panels,
			prev: 'a.prev', 
			next: 'a.next',
			step: 2,
			axis: 'x',
			onAfter: trigger,
			offset: offset,
			duration: 150,
			easing: 'swing'
		};
		$(this).serialScroll(scrollOptions);
	});
	// ----------
	// start loading all the images
	// ----------
	
	$('#spotlight').addClass('loading');
	
	// ----------
	// bind the thumbnails to the main images in the spotlight slider
	// ----------
	var setupImage = function(fullsizeSrc){
		var s = $('#spotlight');
		fullsizeSrc = this.href ? this.href : fullsizeSrc;
		var loadInNew = function(){
			$('#spotlight').empty();
			loadImage(fullsizeSrc, {className: 'spotty'}, function(img){
				var h = img.height();
				s.append(img).hide().fadeIn(200);
				//resize the container
				s.animate({
					height: h
				}, 300);
				//reposition prev/next labels
				$('#spotlight_nav').animate({
						top: -h/2 - 6 
				}, 500);
			});
		};
		if ($('#spotlight img').length > 0){
			$('#spotlight img').fadeOut(200, loadInNew);
		}else{
			loadInNew();
		}
		$('#thumbs .scroller').trigger('gotoimg', $('img', this));
		return false;
	};
	
	
	$('#thumbs .scroller a').click(setupImage);
	
	// ----------
	// preload and show the thumbnails that are currently hidden
	// ----------
	$('#thumbs .scroller img').each(function(){
		var i = $(this);
		var p = $(this).parent().addClass('loading');
		loadImage(this, {}, function(){
			p.removeClass('loading');
		});
	});
	
	// ----------
	// bind the main prev/next links
	// ----------
	$(['next','prev']).each(function(){
		var a = this;
		$('#spotlight_nav .' + a).click(function(){
			var s = $('#thumbs .scroller');
			s.trigger(a+'_one');
			$(s.data('curElem')).find('a').trigger('click');
			return false;
		});
	});
	
	// ----------
	// load the main image
	// ----------
	$($('#thumbs .scroller a').get(0)).trigger('click');
	
});