var GalleryWdg = {
	init: function(container, options){
		var container = $(container);
		this.options = options ;
		container.thumbs = container.getElement("div.thumbs") ;
		container.features = container.getElement("div.features") ;
		this.container = container ;
		this.build() ;
		$E(".displayText").innerHTML = container.features.getFirst().getElement(".info").innerHTML;
		$E(".displayText").getNext().setProperty("href", container.features.getFirst().getElement(".info").getParent().getProperty("href"));
		this.start() ;
	},
	build: function() {
		var container = this.container ;
		container.getElement('div.thumbs').clone().setStyles({'background-color': this.options.barBackgroundColor}).setOpacity(1).injectBefore(container.getElement('div.thumbs')) ;
		container.getElement('a.displayText').clone().setStyles({'background-color': this.options.barBackgroundColor}).setOpacity(this.options.barOpacity).injectBefore(container.getElement('a.displayText')) ;
		var anchors = container.features.getElements('a') ;
			anchors
			.addEvent('mouseenter', function(){$clear(this.timer)}.bind(this))
			.addEvent('mouseleave', function(){this.start()}.bind(this)) 
			.each(function(el){
				el.thumb = new Asset.image(el.getProperty("thumb"), {title: el.getElement("label").getText()}).setOpacity(.5).inject(new Element("a").setProperty("href", el.getProperty("href")).injectTop(container.thumbs)) ;
				el.thumb.el = el ;
			}.bind(this)) ;
			anchors[0].thumb.setOpacity(1).addClass("active") ;
			container.thumbs.getElements("a").addEvent('mouseenter', function(event){
				var self = new Event(event).target ;
				while (this.container.features.getFirst() != self.el) {
					this.next() ; 
				}
				$clear(this.timer) ;
				
			}.bind(this)).addEvent('mouseleave', function(){this.start()}.bind(this))  ;
	},
	next: function(){
		var features = this.container.features ;
		var first = features.getFirst() ;
		first.thumb.setOpacity(.5).removeClass("active") ;
		first.inject(features) ; 
		features.getFirst().thumb.setOpacity(1).addClass("active") ;
		$E(".displayText").innerHTML = features.getFirst().getElement(".info").innerHTML;
		$E(".displayText").getNext().setProperty("href", features.getFirst().getElement(".info").getParent().getProperty("href"));
	},
	start: function() {
		if (this.timer) {
			$clear(this.timer) ;
		}
		this.timer = this.next.bind(this).periodical(this.options.delay*1000) ;
	}
} ;

/********* Usage


import "GalleryWdgHome.css"

<div id="GalleryWdgHome">          
	
	<div class="thumbs"></div>
	
	<div class="features">
	
		<a href="a.htm" thumb="thumb/a.jpg">
			<img src="large/a.jpg" />
			<h3>Subject</h3>
			Description
		</a>
		
		<a href="b.htm" thumb="thumb/b.jpg">
			<img src="large/b.jpg" />
			<h3>Subject</h3>
			Description
		</a>

	</div>
	
</div>
GalleryWdg.init($("GalleryWdgHome"), {delay: 3, barOpacity: .5, barBackgroundColor: "#FFFFFF"}) ;
*/