/*
 * Javascript for grizzle 2 carousel objects
 * Searches for div.carouselblock
 * Then looks for <a.thumb> gives them and onclick
 * to set the css bg of <div.image> to the href of the <a>
 */

var carousel = {
	init: function(){
		this.version = "1";
		//look for carousel objects
		var containers = $$("div.carouselblock");
		containers.each(function(obj, idx){
			//alert(obj.id);
			carousel.process(obj);
		});			
	},
	process: function(obj){
		//process the carousel
		obj.setbg		= carousel.setbg;
		obj.unselect	= carousel.unselect;
		
		obj.links 			= $(obj.id).select("a.thumb");
		obj.targetObj 	= obj.select("div.image")[0];
		
		 	 
		for(var idx=0; idx < obj.links.length; idx++){
			//Process each link in carousel
			link 				= obj.links[idx];
			link.controller 	= obj;

			if(idx == 0) 
				link.className = "sel";
		
			link.onclick 		= function(){
					this.controller.unselect();
					this.controller.setbg(this);
					return false;
				}
		}//for
	},
	setbg: function(link){
		link.className = "sel";
		this.targetObj.style.backgroundImage = "url(" + link.href + ")";
	},
	unselect: function(){
		for(var idx=0; idx < this.links.length; idx++){
			this.links[idx].className = "thumb";
		}//for
	}

}


addLoadEvent(	function(){carousel.init();});