/// photo_rotator.js
///  Handles the photo rotator operations on the
///  community home page.

///
/// Photo class
///
function Photo (url, thumb_url, title, photo_id, username, userid) {
	if (!url || !photo_id || !username || !userid)
		return false;
	
	this.url = url;
	this.thumb_url = thumb_url;
	this.title = title;
	this.photo_id = photo_id;
	this.username = username;
	this.userid = userid;
	
	var big_preload = new Image();
	big_preload.src = this.url;
	
	var thumb_preload = new Image();
	thumb_preload.src = this.thumb_url;
}

///
/// Rotator Routines
///
var PhotoRotator = {
	container 		: null,
	image_container : null,
	thumb_container : null,

	num_photos		: 0,
	current_photo	: -1,
	
	leftmost		: 0,

	///
	/// Init function, sets up local vars and container
	/// 	objects.
	init : function (targ) {
		// Outer Container (contains big image, controls, and thumbnail list)
		PhotoRotator.container = document.getElementById(targ);
		if (!PhotoRotator.container)
			return false;
		
		// Inner Image & Thumb Containers
		var _temp = PhotoRotator.container.getElementsByTagName("div");
		for (var i=0; i<_temp.length; i++) {
			// Checking for Inner Image Container
			if (_temp[i].className == 'image_container')
				PhotoRotator.image_container = _temp[i];
			
			// Checking for Inner Thumbnail Container
			if (_temp[i].className == 'thumb_container')
				PhotoRotator.thumb_container = _temp[i];
		}
		if (!PhotoRotator.image_container || !PhotoRotator.thumb_container)
			return false;
		
		// Store number of photos locally.
		PhotoRotator.num_photos = photo_list.length;
		if (PhotoRotator.num_photos == 0)
			return false;
		
		// Give yourself a pat on the back, you've passed all my tests.
		var ret = PhotoRotator.showImage(0);
		return true;
	},
	
	///
	/// This function handles showing an image and
	///		it also calls the function used to update
	///		the thumbnail container.
	showImage : function (x) {
		// If for some reason the index arg is screwed up
		if ((x < 0) || isNaN(x))
			x = 0;
		if (x >= PhotoRotator.num_photos)
			x = PhotoRotator.num_photos - 1;
			
		// Return if we're trying to re-access the current photo
		if (x == PhotoRotator.current_photo)
			return false;

		// Keep track of the current photo index
		PhotoRotator.current_photo = x;
		
		// Output the big image and its info into
		// the image container.
		// TODO: create parent elements and append to image container
		// 		 rather than outputting a huge string into innerHTML.
		var output = 	'<img id="big_image" style="width:100%;filter:alpha(opacity=0);opacity:0.0;" src="'+photo_list[x].url+'" onclick="location.href=\'/gallery/detail/'+photo_list[x].photo_id+'/\'" /><br />' +
						'<div class="title_overlay"></div>' +
						'<div class="overlay_text">' +
							'<nobr>'+photo_list[x].title+'</nobr><br />' +
							'<span style="float:right;"><a href="/gallery/detail/'+photo_list[x].photo_id+'/">View Album</a></span>' +
							'<span>Uploaded by <a href="/accounts/view/'+photo_list[x].userid+'/">'+photo_list[x].username+'</a> ('+(PhotoRotator.current_photo+1)+' of '+PhotoRotator.num_photos+')</span>' +
						'</div>';
		PhotoRotator.image_container.innerHTML = output;
		
		// Fade In Effect
		PhotoRotator.fadeImage();
		
		// Update the thumbnail list & Return true!
		PhotoRotator.updateThumbnails(PhotoRotator.current_photo);
		return true;
	},
	
	/// This was reduced to its own function in case
	/// of re-use.
	fadeImage : function () {
		Effect.Appear('big_image', {duration: 0.4, queue: 'end'});
	},
	
	///
	/// Updates the thumbnail container.
	///		(Shuffles thumbnails based on currently active one.)
	updateThumbnails : function (c) {
		//alert(c);
		//alert(PhotoRotator.thumbnail_inc);
		// Checking for how many thumbnails to show on either
		// side of the current thumbnail, if applicable.

		var start = 0;
		var end = 0;


		/*
		if (PhotoRotator.num_photos <= 7) {
			start = 0;
			end = PhotoRotator.num_photos;
		}
		else {
			if ((c + 4) > PhotoRotator.num_photos)
				end = PhotoRotator.num_photos;
			else
				end = c + 4;
				
			if ((c - 3) < 0)
				start = 0;
			else 
				start = c - 3;
	
			if (c < 4) {
				end += 3-c;
			}
			
			if (c > PhotoRotator.num_photos-4) {
				start -= 4-(PhotoRotator.num_photos-c);
			}
		}
		*/
		if ((c == PhotoRotator.leftmost) && (PhotoRotator.leftmost > 0)) {
			PhotoRotator.leftmost -= 1;
			start = PhotoRotator.leftmost;
			if (start + 7 < PhotoRotator.num_photos)
				end = start + 7;
			else
				end = PhotoRotator.num_photos;
		}
		else if ((c == PhotoRotator.leftmost+6) && (PhotoRotator.leftmost+7 < PhotoRotator.num_photos)) {
			PhotoRotator.leftmost += 1;
			start = PhotoRotator.leftmost;
			end = PhotoRotator.leftmost + 7;
		}
		else {
			start = PhotoRotator.leftmost;
			end = PhotoRotator.leftmost + 7;
		}
		
		if (end > PhotoRotator.num_photos)
			end = PhotoRotator.num_photos;
	

		

		// Output the thumbnail markup to the thumbnail container.
		// TODO: Contemplate: appending children in the for-loop rather
		//		 than outputting a huge string into innerHTML; meaning
		//		 of life; pancakes or sausage; etc.
		var output = 	'<center>' +
						'<div class="arrow_top" onclick="PhotoRotator.showImage('+(PhotoRotator.current_photo-1)+')"><img src="'+fs_url+'community/img/photo_rotator/prev_arrow.gif" width="13" height="25" /></div>';
		for (i=start; i<end; i++) {
			if (i == PhotoRotator.current_photo) {
				var style = ' class="current"';
				var _onclick = '';
				var arrow_img = '<br /><img class="current_arrow" src="'+fs_url+'community/img/photo_rotator/current_arrow.gif" width="11" height="7" />';
			}
			else {
				var style = '';
				var _onclick = 'onclick="PhotoRotator.showImage('+i+')" ';
				var arrow_img = '';
			}
			// Create a thumbnail and put it into the container
			output += '<div'+style+'><img src="'+photo_list[i].thumb_url+'" '+_onclick+'/>'+arrow_img+'</div>';
		}
		output += 	'<div class="arrow_bottom" onclick="PhotoRotator.showImage('+(PhotoRotator.current_photo+1)+')"><img src="'+fs_url+'community/img/photo_rotator/next_arrow.gif" width="13" height="25" /></div>' +
					'</center><br clear="all" />';
		PhotoRotator.thumb_container.innerHTML = output;
	}
};