///////////////////////////////////////////////////////////////
// Most of these are for the main page only
// 01-11 Alt: remove dynamic update of text and head in upper left. (also removed from functions.php)

$(window).load(function() {
	if ($('#scroller-window').length) { 
	 	// when first loads, before it starts; secs X 1000 - note it is actually this
		// PLUS the interval delay for the first one, adjust acordingly.
		start_delay = 3000;
		intervals = 5000; // between changes.
		timeout=null;
		highlight_center('img3');
		st_timeout = start_animation();
	}
});

//////////////////////////////////////////////////////////////
// All for the main page.

$(function(){
	
	if ($('#scroller-window').length) {
	
		slots = 5;
		distance=200; // px
		scrollspeed = 800; //ms;
		running = false; // If the user clicks too fast, it will overrunb the animation and leave holes.
		var curr_left=img_count=0;

		image_data = Array();
		// Get the data from the thumbs classes, store in an array of objects.
		$('#scroller-window .thumbs').each(function (i) {
			
			var id		= $(this).contents('span').contents('a').contents('img').attr('id');
			var tn		= $(this).contents('span').contents('a').contents('img').attr('src');
			//var hd		= $(this).contents('h5').text();
			//var descr	= $(this).contents('p').text();
			var lnk		= $(this).contents('span').contents('a').attr('href');
			var url		= $(this).contents('span').contents('a').attr('rel');

			image_data[i] = {
				'id':		id,
				//'title':	hd,
				'image':	lnk,
				'thumb':	tn,
				'url':		url
				//'descr':	descr
			};
			// Immediately position anything after end so they are in place for reading the left property.
			if (img_count >= slots) {
				$(this).contents('span').contents('a').contents('img').css('left',curr_left);
			}
			curr_left+=distance;
			img_count++;
			$(this).contents('span').contents('a').click(function() { return highlight_center($(this).contents('img').attr('id')); });
		});
		abs_left = curr_left-distance; // minus last increment, this is so we can reposition the loop

		$('#scroll-arrow-left a').click(function(event) {
			if (running==true) { return false; }
			if (timeout || st_timeout) { 
				if (timeout) { clearTimeout(timeout); }
				if (st_timeout) { clearInterval(st_timeout); }
				timeout=st_timeout=null; 
				$('#slide-control a').text('PLAY'); 
			}
			rotate_images('right');
			event.preventDefault();
		});
		$('#scroll-arrow-right a').click(function(event) {
			if (running==true) { return false; }
			if (timeout || st_timeout) { 
				if (timeout) { clearTimeout(timeout); }
				if (st_timeout) { clearInterval(st_timeout); }
				timeout=st_timeout=null;
				$('#slide-control a').text('PLAY'); 
			}
			rotate_images('left');
			event.preventDefault();
		});
		$('#slide-control a').click(function(event) { toggle_slideshow(); event.preventDefault(); });
	}
});

// Move the images, left or right. Pop or shift off
// of one end of the array, based on direction.

function rotate_images(direction) {
	var arr;
	running = true;
	// Items are laid out left to right, we will need to grab the last one and put it in the left.
	if (direction=='right') {
		arr = image_data[image_data.length-1];
		$('#'+arr['id']).css('left','-'+distance+'px');
	}
	// find the next item to position, depending on direction.
	for (i=0;i<image_data.length;i++) {
		arr = image_data[i];
		$('#'+arr['id']).removeClass('selected');
		if (direction=='right') {
			$('#'+arr['id']).animate(
				{ 'left': '+='+distance+'px' }, scrollspeed,
				function() {
					highlight_center();
					running = false;
				}
			);
		}
		else {
			if (i==0) { first_id=arr['id']; }
			$('#'+arr['id']).animate(
				{ 'left': '-='+distance+'px' }, scrollspeed,
				function() {
					$('#'+first_id).css('left',abs_left);
					highlight_center();
					running = false;
				}
			);
		}
	}

	if (direction=='right') { image_data.unshift(image_data.pop()); }
	else { image_data.push(image_data.shift()); }

	return false;
}

//////////////////////////////////////////////////////////////

function highlight_center(center_id) {
	var arr,lt;
	
	for (i=0;i<image_data.length;i++) {
		arr = image_data[i];
		$('#'+arr['id']).removeClass('selected');
		if ((! center_id) && ($('#'+arr['id']).css('left')==(distance*2)+'px')) {
			center_id=arr['id'];
		}
	}
	$('#'+center_id).addClass('selected');
	return swap_main(center_id);
}

//////////////////////////////////////////////////////////////
// Populate the main image, head, and content on click.

function swap_main(id) { 
	for(i=0;i<image_data.length;i++) {
		var arr = image_data[i];
		if (arr['id']==id) {
			$('#main-image').attr('src',arr['image']);
			//$('#main-head').text(arr['title']);
			//$('#main-descr').text(arr['descr']);
			$('#img-link').attr('href',arr['url']);
			break;
		}
	}
	return false;
}

//////////////////////////////////////////////////////////////
// On load only start the animation.
function start_animation () {
	tm = setTimeout( function() { toggle_slideshow(); },start_delay);
	return tm;
}

//////////////////////////////////////////////////////////////
// Increment the images, on play button or load from start_animation.
function toggle_slideshow() {
	var newtext=($('#slide-control a').text()=='PLAY')?'STOP':'PLAY';
	$('#slide-control a').text(newtext);
	if (timeout) { clearTimeout(timeout); timeout=null; }
	else {
		rotate_images('left'); // do the first one manually.
		timeout = setInterval( function() { rotate_images('left'); },intervals);
	}
}