//FIXME: probably should change this to fade using a background image so that if css is off,
//yet JS is on (oddly) it won't behave assininely

//use suffix if you wish to have more than one rotator, then suffix will be appended to
//certain element ids used by the rotator.
function jacPhotoRotator(container_id, w, h, still_sec, rot_sec, suffix)
{
	this._images = Array();
	this._cur_index = 0;
	this._next_index = 0;
	this._cur_alpha = 1.0;
	
	this._container = container_id ? $(container_id) : null;
	this._img_id = 'jac-photo-rotator-img' + (suffix ? ('-' + suffix) : '');
	this._width = _VOZ(w);
	this._height = _VOZ(h);

	this._still_seconds = still_sec ? still_sec : 8.0;
	this._rotation_seconds = rot_sec ? rot_sec : 1.5;
	this._num_steps = 0;
	this._steps_per_second = 30;
	this._num_images = 0;
	this._rotate_updater = null;
	this._fade_updater = null;
	
}
jacPhotoRotator.prototype._images;
jacPhotoRotator.prototype._cur_index;
jacPhotoRotator.prototype._next_index;
jacPhotoRotator.prototype._cur_alpha;

jacPhotoRotator.prototype._container;
jacPhotoRotator.prototype._width;
jacPhotoRotator.prototype._height;
jacPhotoRotator.prototype._still_seconds;
jacPhotoRotator.prototype._rotation_seconds;
jacPhotoRotator.prototype._num_steps;
jacPhotoRotator.prototype._steps_per_second;
jacPhotoRotator.prototype._num_images;
jacPhotoRotator.prototype._img_id;
jacPhotoRotator.prototype._rotate_updater;
jacPhotoRotator.prototype._fade_updater;

//"private" functions
jacPhotoRotator.prototype._img_tag =
	function (id, uri, alt, title, style)
	{
		return '<img id="' + id + '" src="' + uri + '" alt="' + alt + '"' + (title ? (' title="' + title + '"') : '') + (style ? (' style="' + style + '"') : '') + ' />';
	};

function update_img(id, img_hash, style)
{
	$(id).writeAttribute({src: img_hash.get('uri'), alt: img_hash.get('alt')});
	var title = img_hash.get('title');
	if(title)
		$(id).writeAttribute({title: title});
	if(style)
		$(id).setStyle(style);
}

jacPhotoRotator.prototype._fade_photo =
	function()
	{
	
		this._cur_alpha -= 1.0 / this._num_steps;
		if(this._cur_alpha <= 0)
		{
			this._fade_updater.stop();
			this._fade_updater = null;
			$(this._img_id).hide();
			

			//change the image attributes and show it over the background
			update_img(this._img_id, this._images[this._next_index], {zIndex: '1', opacity: '1.0'});
			$(this._img_id).show();
			
			
			//and then make sure index wraps around, and that index 0 will be on top when it is ready
			if(++this._cur_index >= this._num_images)
				this._cur_index = 0;
		}
		else
			$(this._img_id).setOpacity(this._cur_alpha);
	};


//getters and setters
jacPhotoRotator.prototype.get_width = function() { return this._width; };
jacPhotoRotator.prototype.set_width = function(new_width) { this._width = new_width; };
	
jacPhotoRotator.prototype.get_height = function() { return this._height; };
jacPhotoRotator.prototype.set_height = function(new_height) { this._height = new_height; };
	
jacPhotoRotator.prototype.get_still_seconds = function() { return this._still_seconds; };
jacPhotoRotator.prototype.set_still_seconds = function(new_still_seconds) { this._still_seconds = new_still_seconds; };
	
jacPhotoRotator.prototype.get_rotation_seconds = function() { return this._rotation_seconds; };
jacPhotoRotator.prototype.set_rotation_seconds = function(new_rotation_seconds) { this._rotation_seconds = new_rotation_seconds; };
	
jacPhotoRotator.prototype.add_image =
	function(_uri, _alt, _title)
	{
		if(!_title)
			_title = '';
		this._images.push(new Hash({uri: _uri, alt: _VOES(_alt), title: _VOES(_title)}));
		cache_image(_uri);
		this._num_images++;
	};
	
jacPhotoRotator.prototype.remove_image =
	function(_uri)
	{
		var uri_to_match = _uri;
		this._images = this._images.filter(
			function is_not_uri(element, index)
			{
				return element.get('uri') != uri_to_match;
			});
		this._num_images--;
	};
	
jacPhotoRotator.prototype.init =
	function()
	{
		if(this._container && this._images.length)
		{
			this._cur_index = 0;
			
			this._num_steps = this._steps_per_second * this._rotation_seconds;
			
			//make the container a new positioning context
			this._container.setStyle({position: 'relative', top: '0', left: '0', width: this._width + 'px', height: this._height + 'px'});
			this._container.hide();
			
			//set the container to have the image tag with the first image
			var first_img = this._images.first();
			this._container.update(this._img_tag(this._img_id, first_img.get('uri'), first_img.get('alt'),
								first_img.get('title'), 'position: absolute; top: 0; left: 0; z-index: 1;'));
			
			this._container.show();
		}
	};
	
jacPhotoRotator.prototype.start = function()
	{
		var that = this;
		if(this._container && this._num_images > 1)
			this._rotate_updater = new PeriodicalExecuter(function(pe) { that.rotate(); },
									this._still_seconds + this._rotation_seconds);
	};
	
jacPhotoRotator.prototype.stop = function()
	{
		if(this._rotate_updater)
		{
			this._rotate_updater.stop();
			this._rotate_updater = null;
		}
		//plays out the end of the fade
		/*if(this._fade_updater)
		{
			this._fade_updater.stop();
			this._fade_updater = null;
		}*/
	};
	
jacPhotoRotator.prototype.rotate =
	function()
	{
		if(this._container && this._num_images > 1)
		{
			this._cur_alpha = 1.0;
			this._next_index = (this._cur_index == (this._num_images-1)) ? 0 : this._cur_index + 1;
			var next_image = this._images[this._next_index];

			//set the background to be the next image
			this._container.setStyle({background: 'url("' + next_image.get('uri') + '") top left no-repeat'});

			var that = this;
			this._fade_updater = new PeriodicalExecuter(function(pe) { that._fade_photo(); },
								1 / this._steps_per_second);
		}
	};