$.fn.ThumbnailStrip = function(options) {

	

	var self = this;



	self.options = {

		imageContainer: null,

		expandAnchor: "",

		thumbnailClass: "",

		startActive: false,

		startExpanded: true,

		hideDelay: 500,

		animationSpeed: 500,

		onSelect: null

	};

			

	if(options) {

		self.options = $.extend(self.options, options);

	}

	//mystery problem with the statement above causes wrong values to be stored: the below if a manual fix. 
	self.options.hideDelay = 1000;	



	return this.each(function() { 

	

		var strip = $(this);

		var thumb = self.options.thumbnailClass;

		var expand = self.options.expandAnchor;

		var image = $(self.options.container);

		

		var timeout = null;

		var active = self.options.startActive;

		var state = 0; //0 = collapsed && 1 = expanded

		

		strip.expand = function() {				



			if(state == 0) {

				

				clearTimeout(timeout);	



				var thumbs = $(this).children(self.options.thumbnailClass);

				for(var i=0;i<thumbs.length;i++) {

								

					var left = parseInt($(this).css("width")) - parseInt($(self.options.thumbnailClass).css("width"));				

					left = left - (i * ((parseInt($(self.options.thumbnailClass).css("width"))) + 10));

									

					$(thumbs[i]).animate({

					   left: left

					 }, self.options.animationSpeed);					

				}			

				

				state = 1;

			}

		}

		

		strip.collapse = function() { 

			clearTimeout(timeout);

			

			//Move them to the start position, it is the width of strip - width of thumbnail. 

			var left = parseInt($(this).css("width")) - parseInt($(self.options.thumbnailClass).css("width"));

			

			if(active && state == 1) {						

								

				$(self.options.thumbnailClass, this).animate({

				   left: left

				 }, self.options.animationSpeed, function() { state = 0; });		

				 

			}

		}	

		

		strip.select = function(e) {	

		

			$(self.options.thumbnailClass, this).css("zIndex", 0);

			

			$("#"+e.target.id, this).css("zIndex", 1000);		



			//Get the image.

			var img = $("#"+e.target.id, this).attr("img");			

			

			if(self.options.imageContainer != null) {

				//Load the image into the main area if we want it to.

				$(self.options.imageContainer).attr("src", img);					

			}

			

			active = true;	

			

			//Fire the callback passing the url to the image.

			if(self.options.onSelect != null)	

				self.options.onSelect(img);

			

		}	

		

		$(self.options.thumbnailClass, this).mousedown(function(a) { strip.select(a); })

		$(this).mouseover(function() { clearTimeout(timeout); });				

		
		trace(self.options.hideDelay);
		$(this).mouseout(function() { timeout = setTimeout(function() { strip.collapse(); } , self.options.hideDelay); });	
		


		$(self.options.thumbnailClass, this).mouseover(function(e) { 

                clearTimeout(timeout); 

                $(e.target).css({border: "1px solid #ff9242"});                 

        });				

		$(self.options.thumbnailClass, this).mouseout(function(e) { $(e.target).css({border: "none"}); });				

        

        $(self.options.expandAnchor, this).mouseover(function() { strip.expand(); });	

        



		if(self.options.startExpanded) {

			strip.expand();

		}

	

	});	



}