/**
 * Slide show implementation. Based on http://www.leigeber.com/2008/12/javascript-slideshow/
 * 
 * Constructor: 
 *   slideshow(<name of the global variable holding the slideshow instance>)
 * 
 * Config:
 * 
 *  slideshow.auto=true;  			// auto progress
 *	slideshow.speed=5;    			// speed (sec)
 *	slideshow.link="linkhover"; 	// class for image link hover (default: linkhover)
 *	slideshow.info="information";	// div showing image info
 *	slideshow.thumbs="slider";		// div containing slider
 *	slideshow.left="slideleft";		// div for left scroller
 *	slideshow.right="slideright";	// div for right scroller
 *	slideshow.scrollSpeed=4;		// scrollspeed
 *  slideshow.spacing=5;			// sep between thumbnails
 *	slideshow.active="#fff";		// border for selected thumbnail
 *	slideshow.inactive="#0";		// border for unselected thumbnail
 *  slideshow.init("slideshow","image","imgprev","imgnext","imglink");  // ids of ul container, image container, prev/next controls, img link container
 * 
 * TODO: better support multiple instances without need to touch the CSS
 * 
 * General structure:
 * 
 * 	<ul id="z_slideshow_slideshow">
 *		<li>
 * 			<h3>info title</h3>
 *			<p>Details</p>
 *			<a href="photos/orange-fish.jpg"><img src="thumbnails/orange-fish-thumb.jpg" alt="Orange Fish" /></a>
 *		</li>
 *	</ul>
 *	<div id="z_slideshow_wrapper" style="width:${ss_width+6}px">
 *		<div id="z_slideshow_fullsize" style="width:${ss_width}px; height:${ss_height}px;">
 *			<div id="z_slideshow_imgprev" class="z_slideshow_imgnav" title="Previous Image"></div>
 *			<div id="z_slideshow_imglink"></div>
 *			<div id="z_slideshow_imgnext" class="z_slideshow_imgnav" title="Next Image"></div>
 *			<div id="z_slideshow_image" style="width:${ss_width}px; height:${ss_height}px;"></div>
 *			<div id="z_slideshow_information" style="width:${ss_width}px">
 *				<h3></h3>
 *				<p></p>
 *			</div>
 *		</div>
 *		<div id="z_slideshow_thumbnails">
 *			<div id="z_slideshow_slideleft" title="Slide Left"></div>
 *			<div id="z_slideshow_slidearea" style="width:${ss_width-44}px;">
 *				<div id="z_slideshow_slider"></div>
 *			</div>
 *			<div id="z_slideshow_slideright" title="Slide Right"></div>
 *		</div>
 *	</div>
 *
 *  and
 * 
 * 
 * 
 */


var z_slides_tiny={};

function $(i){return document.getElementById(i)}
function $$(e,p){p=p||document; return p.getElementsByTagName(e)}

z_slides_tiny.slideshow=function(n){
	this.infoSpeed=this.speed=10;
	this.imgSpeed=this.speed*5;
	this.thumbOpacity=this.navHover=70;
	this.navOpacity=25;
	this.scrollSpeed=5;
	this.n=n;
	this.c=0;
	this.a=[];
	this.linkPlay="z_slideshow_linkhover_play";
	this.linkStop="z_slideshow_linkhover_stop";
	this.linkPlayTitle="Play";
	this.linkStopTitle="Stop";
};

z_slides_tiny.slideshow.prototype={
	init:function(s,z,b,f,q){
		s=$(s);
		var m=$$('li',s), i=0, w=0;
		this.l=m.length;
		this.q=$(q);
		this.f=$(z);
		this.r=$(this.info);
		this.ow=parseInt(z_slides_tiny.style.val(z,'width'));
		this.oh=parseInt(z_slides_tiny.style.val(z,'height'));
		if(this.thumbs){
			var u=$(this.left), r=$(this.right);
			u.onmouseover=new Function('z_slides_tiny.scroll.init("'+this.thumbs+'",-1,'+this.scrollSpeed+')');
			u.onmouseout=r.onmouseout=new Function('z_slides_tiny.scroll.cl("'+this.thumbs+'")');
			r.onmouseover=new Function('z_slides_tiny.scroll.init("'+this.thumbs+'",1,'+this.scrollSpeed+')');
			this.p=$(this.thumbs)
			this.ph = this.p.offsetHeight-6;
		}
		for(i;i<this.l;i++){
			this.a[i]={};
			var h=m[i], a=this.a[i];
			a.t=$$('h3',h)[0].innerHTML;
			a.d=$$('p',h)[0].innerHTML;
			a.l=$$('a',h)[0]?$$('a',h)[0].href:'';
			a.p=a.l;
			if(this.thumbs){
				var g=$$('img',h)[0];
				
				this.p.appendChild(g);
				// HB: fix thumbnail dimensions
				g.width  = this.ph / g.height * g.width;
				g.height = this.ph;
				//
				w+=parseInt(g.offsetWidth);
				if(i!=this.l-1){
					g.style.marginRight=this.spacing+'px';
					w+=this.spacing
				}
				this.p.style.width=w+'px';
				g.style.opacity=this.thumbOpacity/100;
				g.style.filter='alpha(opacity='+this.thumbOpacity+')';
				g.onmouseover=new Function('z_slides_tiny.alpha.set(this,100,5)');
				g.onmouseout=new Function('z_slides_tiny.alpha.set(this,'+this.thumbOpacity+',5)');
				g.onclick=new Function(this.n+'.pr('+i+',1)')
			}
		}
		if(b&&f){
			b=$(b);
			f=$(f);
			b.style.opacity=f.style.opacity=this.navOpacity/100;
			b.style.filter=f.style.filter='alpha(opacity='+this.navOpacity+')';
			b.onmouseover=f.onmouseover=new Function('z_slides_tiny.alpha.set(this,'+this.navHover+',5)');
			b.onmouseout=f.onmouseout=new Function('z_slides_tiny.alpha.set(this,'+this.navOpacity+',5)');
			b.onclick=new Function(this.n+'.mv(-1,1)');
			f.onclick=new Function(this.n+'.mv(1,1)')
		}
		this.auto?this.is(0,0):this.is(0,1)
	},
	// move by d, c: 0->auto, 1->manu
	mv:function(d,c){
		var t=this.c+d;
		t=t<0?this.l-1:t>this.l-1?0:t;
		if (t!=this.c) {
			this.c=t;
			this.pr(t,c);
		}
	},
	pr:function(t,c){
		clearTimeout(this.lt);
		if(c){
			clearTimeout(this.at)
		}
		this.c=t;
		this.is(t,c)
	},
	is:function(s,c){
		if (!this.a[s]) {
			return;
		}
		if(this.info){
			z_slides_tiny.height.set(this.r,1,this.infoSpeed/2,-1)
		}
		var i=new Image();
		i.style.opacity=0;
		i.style.filter='alpha(opacity=0)';
		this.i=i;
		i.onload=new Function(this.n+'.le('+s+','+c+')');
		i.src=this.a[s].p;
		if(this.thumbs){
			var a=$$('img',this.p), l=a.length;
			for(var x=0;x<l;x++){
				a[x].style.borderColor= (x!=s? this.inactive : this.active);
			}
		}
	},
	toggle:function() {
		if (this.at) {
			clearTimeout(this.at);
			this.at=null;
		} else {
			this.mv(1,0);
		}
	},
	// modify imglink depending on whether we are playing or not
	gioc:function(i) {
		if (this.at) {
			i.className = this.linkStop;
			i.title     = this.linkStopTitle;
		} else {
			i.className = this.linkPlay;
			i.title    = this.linkPlayTitle;
		}
	},
	le:function(s,c){
		// HB: fix image dimensions
		var fa = Math.min(this.f.clientWidth / this.i.width , this.f.clientHeight / this.i.height);
		this.i.width = fa*this.i.width;
		this.i.height = fa*this.i.height;
		// 
		this.f.appendChild(this.i);
		// fix horizontal center
		var w=this.ow-parseInt(this.i.offsetWidth);
		if(w>0){
			var l=Math.floor(w/2);
			this.i.style.borderLeft=l+'px solid transparent';
			this.i.style.borderRight=(w-l)+'px solid transparent';
		}
		// fix vertical center
		var h=this.oh-parseInt(this.i.offsetHeight);
		if(h>0){
			var l=Math.floor(h/2);
			this.i.style.borderTop=l+'px solid transparent';
			this.i.style.borderBottom=(h-l)+'px solid transparent';
		}
		//
		z_slides_tiny.alpha.set(this.i,100,this.imgSpeed);
		var n=new Function(this.n+'.nf('+s+')');
		this.lt=setTimeout(n,this.imgSpeed*100);
		if(!c){
			this.at=setTimeout(new Function(this.n+'.mv(1,0)'),this.speed*1000)
		}
		if (this.q) {
			if(this.a[s].l!=''){
				// HB: upon click in the image, toggle auto play
				this.q.onclick=new Function(this.n+'.toggle()');
				//
				this.q.onmouseover=new Function(this.n+".gioc(this)");
				this.q.onmouseout=new Function('this.className="";this.title="";');
				this.q.style.cursor='pointer'
			}else{
				this.q.onclick=this.q.onmouseover=null;
				this.q.style.cursor='default'
			}
		}
		var m=$$('img',this.f);
		// HB: fade out of previous image
		if (m.length>1) {
			z_slides_tiny.alpha.set(m[m.length-2],0,this.imgSpeed);
		}
		//
		if(m.length>2){
			// release any older than the immediate previous image
			this.f.removeChild(m[0])
		}
	},
	nf:function(s){
		if(this.info){
			s=this.a[s];
			$$('h3',this.r)[0].innerHTML=s.t;
			$$('p',this.r)[0].innerHTML=s.d;
			this.r.style.height='auto';
			var h=parseInt(this.r.offsetHeight);
			this.r.style.height=0;
			z_slides_tiny.height.set(this.r,h,this.infoSpeed,0)
		}
	}
};

z_slides_tiny.scroll=function(){
	return{
		init:function(e,d,s){
			e=typeof e=='object'?e:$(e); var p=e.style.left||z_slides_tiny.style.val(e,'left'); 
			e.style.left=p;
			var l=d==1?parseInt(e.offsetWidth)-parseInt(e.parentNode.offsetWidth):0; 
			e.si=setInterval(function(){z_slides_tiny.scroll.mv(e,l,d,s)},20)
		},
		mv:function(e,l,d,s){
			var c=parseInt(e.style.left); 
			if(c==l){
				z_slides_tiny.scroll.cl(e);
			} else {
				var i=Math.abs(l+c); 
				i=i<s?i:s; 
				var n=c-i*d; 
				e.style.left=n+'px';
			}
		},
		cl:function(e){
			e=typeof e=='object'?e:$(e); 
			clearInterval(e.si);
		}			
	}
}();

z_slides_tiny.height=function(){
	return{
		set:function(e,h,s,d){
			e=typeof e=='object'?e:$(e); var oh=e.offsetHeight, ho=e.style.height||z_slides_tiny.style.val(e,'height');
			ho=oh-parseInt(ho); var hd=oh-ho>h?-1:1; clearInterval(e.si); e.si=setInterval(function(){z_slides_tiny.height.tw(e,h,ho,hd,s)},20)
		},
		tw:function(e,h,ho,hd,s){
			var oh=e.offsetHeight-ho;
			if(oh==h){clearInterval(e.si)}else{if(oh!=h){e.style.height=oh+(Math.ceil(Math.abs(h-oh)/s)*hd)+'px'}}
		}
	}
}();

z_slides_tiny.alpha=function(){
	return{
		set:function(e,a,s){
			e=typeof e=='object'?e:$(e); 
			var o=e.style.opacity||z_slides_tiny.style.val(e,'opacity');
			var d=a>o*100?1:-1; 
			e.style.opacity=o; 
			clearInterval(e.ai); 
			e.ai=setInterval(function(){z_slides_tiny.alpha.tw(e,a,d,s)},20)
		},
		tw:function(e,a,d,s){
			var o=Math.round(e.style.opacity*100);
			if(o==a){
				clearInterval(e.ai);
			}else{
				var n=o+Math.ceil(Math.abs(a-o)/s)*d; 
				e.style.opacity=n/100; 
				e.style.filter='alpha(opacity='+n+')';
			}
		}
	}
}();

z_slides_tiny.style=function(){
	return {
		val:function(e,p){
			e=typeof e=='object'?e:$(e); 
			return e.currentStyle?e.currentStyle[p]:document.defaultView.getComputedStyle(e,null).getPropertyValue(p);
		}
	}
}();