/*
 * jQuery UI Image Fader 0.1
 *
 *
 *
 * Depends:
 *	jquery.ui.core.js
 *	jquery.ui.widget.js
 *	jquery.ui.button.js
 *	jquery.ui.effect.js
 */
(function( $ ) {

var lastActive,
	baseClasses = "ui-slideshow ui-widget ui-state-default ui-corner-all",
	otherClasses = "ui-state-hover ui-state-active";


$.widget( "ui.slideshow", {
	Container: null,
	CurrContent: null,
	NextContent: null,
		
	fading: false,
	slide_timer: null,
	images: null,
	options: {
		height: "100px",						// Height of the slideshow area
		width: "100px",							// Width of the slideshow area
		overflow: "hidden",						// Cut off larger images?
		zindex: false,							// Z-Index of the container element 

		class_content: "ui-slideshow-content",	// CSS-Class of the container element

		stretch: true,							// Stretch image to container size?
		speed: 500,								// Duration of fade (ms)
		loop: true,								// Repeat after reaching the last image
		automatic_slide: 10,					// Automaticly slide after x seconds
		active: 0								// Currently active image (0 = first)
	},
	_create: function() {
		this.images = new Array();
		
		if (this.element) {
			this.element.addClass(baseClasses + " " + otherClasses)
			this.element.hide();
			this.images = this.element.children("img");
			this.create_image_fader();
			if (this.options.automatic_slide > 0) {
				var image_fader = $(this.element);
				this.slide_timer = window.setInterval(function() {
					image_fader.slideshow("option", "active", "+");
				}, this.options.automatic_slide * 1000);
				$(this.Container).mouseenter(function() {
					$(this).prevAll(".ui-slideshow:first").slideshow("option", "auto_browse", 0);
				});
				$(this.Container).mouseleave(function() {
					$(this).prevAll(".ui-slideshow:first").slideshow("option", "auto_browse", 1);
				});
			}
		}
	},
	
	create_image_fader: function() {
		this.Container = $(document.createElement("div"));
		this.Container.addClass(this.options.class_content);
		this.Container.css("position", "relative");
		this.Container.css("overflow", this.options.overflow);
		if (this.options.zindex > 0) {
			this.Container.css("z-index", this.options.zindex);
		}
		this.Container.css("height", this.options.height);
		this.Container.css("width", this.options.width);

		this.CurrContent = $(document.createElement("img"));
		this.CurrContent.css("position", "absolute");
		this.CurrContent.css("z-index", 10);
		this.CurrContent.css("top", "0px");
		this.CurrContent.css("left", "0px");
		if (this.options.stretch) {
			this.CurrContent.css("height", this.options.height);
			this.CurrContent.css("width", this.options.width);
		}
		
		this.NextContent = $(document.createElement("img"));
		this.NextContent.css("position", "absolute");
		this.NextContent.css("z-index", 20);
		this.NextContent.css("top", 0);
		this.NextContent.css("left", 0);
		if (this.options.stretch) {
			this.NextContent.css("height", this.options.height);
			this.NextContent.css("width", this.options.width);
		}

		this.Container.append(this.CurrContent);
		this.Container.append(this.NextContent);
	
		this.element.after(this.Container);
		this.refresh();
	},
	
	_setOption: function( key, value ) {
		if ( key == "auto_browse" ) {
			if ( value == 0 ) {
				if (this.slide_timer != null) {
					window.clearInterval(this.slide_timer);
					this.slide_timer = null;
				}
			}
			if ( value == 1 ) {
				if (this.slide_timer == null) {
					var image_fader = $(this.element);
					this.slide_timer = window.setInterval(function() {
						image_fader.slideshow("option", "active", "+");
					}, this.options.automatic_slide * 1000);
				}
			}
		}
		if ( key == "active" ) {
			if (value == "-") {
				if ((this.options.active > 0) || this.options.loop) {
					// Prev page
					this.options.active--;
					if (this.fading == false) {
						this.fading = true;
						var fader = this;
						this.CurrContent.css("opacity", 1);
						this.CurrContent.fadeOut(this.options.speed);
						this.NextContent.css("opacity", 0);
						this.NextContent.fadeIn(this.options.speed, function() {
							fader.fading = false;
						});
					}
				}
			} else if (value == "+") {
				if ((this.options.active < (this.images.length-1)) || this.options.loop) {
					// Next page
					this.options.active++;
					if (this.fading == false) {
						this.fading = true;
						var fader = this;
						this.CurrContent.show();
						this.NextContent.hide();
						this.NextContent.fadeIn(this.options.speed, function() {
							fader.fading = false;
							fader.CurrContent.hide();
						});
					}
				}
			} else {
				this.options.active = value;
			}
			this.refresh();
			value = this.options.active;
		}
		$.Widget.prototype._setOption.apply( this, arguments );
	},

	widget: function() {
		return this.buttonElement;
	},
	
	PrevPage: function() {
		$(this).prevAll(".ui-slideshow:first").slideshow("option", "active", "-");
	},
	
	NextPage: function() {
		$(this).prevAll(".ui-slideshow:first").slideshow("option", "active", "+");
	},

	destroy: function() {
		if (this.slide_timer != null) {
			window.clearInterval(this.slide_timer);
		}
		this.element.removeClass( baseClasses + " " + otherClasses );
		this.element.show();

		$.Widget.prototype.destroy.call( this );
	},

	refresh: function() {
		if (this.options.active < 0)
			if (this.options.loop) {
				this.options.active = this.images.length-1;
			} else {
				this.options.active = 0;
			}
		
		if (this.options.active >= this.images.length)
			if (this.options.loop) {
				this.options.active = 0;
			} else {
				this.options.active = this.images.length-1;
			}
		
		if ((this.options.active >= 0) && (this.options.active < this.images.length)) {
			this.CurrContent.attr("src",
					this.NextContent.attr("src")
				);
			this.NextContent.attr("src",
					$(this.images[ this.options.active ]).attr("src")
				);
		}
	}
});

}( jQuery ) );