var PrnBox = new Class({
	timer: Class.empty,
	initialize: function(options){
		this.options = $merge(options); //save our options.
		$(this.options.parent).setStyles({'position':'relative','height':'227'});
		var spacerholder = new Element('div').setStyles({position:'relative','background-color':'#DDD',width:'302px',height:'227px'}).injectInside(this.options.parent);
		// create containers to show
		this.page_on = 0;
		this.createPrn(0);
		$('pl_'+this.options.parent+this.page_on).setStyle('z-index', 1);
		$('s'+this.options.parent+this.page_on).effect('opacity', {duration:1000, transition: Fx.Transitions.Quad.easeOut}).start(1);
		// preload
		this.createPrn(1);
		// buttons
		var this_obj = this;
		$(this.options.prev_btn).addEvent('click', function(){this_obj.previous();});
		$(this.options.next_btn).addEvent('click', function(){this_obj.next();});
		if(this.options.autopass==true){
			$(this.options.parent).addEvents({
				'mouseenter': function() {this_obj.mouseEnter()},
				'mouseleave': function() {this_obj.mouseLeave();}
			});
		}
		if(this.options.autopass==true){
			this.timer = this.next.delay(this.options.hangtime*1000, this);
		}
	},
	createPrn: function(i){
			var prn = new Element('div', {'id':'pl_'+this.options.parent+i}).injectInside(this.options.parent);
			prn.setStyles({position:'absolute',top:'4px',border:'1px solid #FFF'});
			var t = '<table id="s'+this.options.parent+i+'" cellpadding="0" cellspacing="0" width="300" border="0" style="visibility:hidden">';
			t += '<tr><td style="padding:0px;width:300px;height:225px;background-color:#BBB;vertical-align:middle;">';
			t += '<img src="'+this.options.prn[i].image+'" alt="Presentation Slide" width="300"  align="absmiddle" /></td></tr></table>';
			prn.setHTML(t);
			// create the overlay
			var a_overlay = new Element('a', {'href':this.options.prn[i].detail}).injectInside(prn);
			var overlay = new Element('div', {'id':'overlay'+this.options.parent+i, 'class':'overlay'}).setStyles({top:'-4px',left:'-4px',width:'290px',height:'215px',visibility:'hidden',overflow:'hidden'});
			var overlay_txt = '<div class="subtitle" style="padding-bottom:1em;">'+this.options.prn[i].assoc+'<br />'+this.options.prn[i].conf+'</div>'
			overlay_txt += '<h3>'+this.options.prn[i].title+'</h3>';
			overlay_txt += '<p>Presented by <strong>'+this.options.prn[i].spkr+'</strong><br />On <strong>'+this.options.prn[i].date+'</strong></p>';
			overlay.setHTML(overlay_txt).injectInside(a_overlay);
			var fx = new Fx.Styles($('overlay'+i), {duration:200, wait:false, transition:Fx.Transitions.Quad.easeInOut});
			$('overlay'+this.options.parent+i).setStyle('visibility','visible');
			$('overlay'+this.options.parent+i).setStyle('opacity',.001);
			$('overlay'+this.options.parent+i).addEvents({
				'mouseenter': function() {
						new Fx.Styles(this, {duration:200, wait:false, transition:Fx.Transitions.Quad.easeInOut}).start({'opacity': .95});
					},
				'mouseleave': function() {
						new Fx.Styles(this, {duration:200, wait:false, transition:Fx.Transitions.Quad.easeInOut}).start({'opacity': .001});
				}
			});
	},
	next: function() {
			// turn off the prn that is on
			$('pl_'+this.options.parent+this.page_on).setStyle('z-index', 0);
			$('s'+this.options.parent+this.page_on).effect('opacity', {duration:3000, transition:Fx.Transitions.Quad.easeOut}).start(0);
			// choose next prn to diplay
			 if($defined(this.options.prn[this.page_on+1])) {this.page_on++} else {this.page_on = 0};
			// turn on the next prn (already preloaded)
			$('pl_'+this.options.parent+this.page_on).setStyle('z-index', 1);
			$('s'+this.options.parent+this.page_on).effect('opacity', {duration:3000, transition: Fx.Transitions.Quad.easeOut}).start(0,1);

			// preload and hide the following prn
			if($defined(this.options.prn[this.page_on+1])) { 
				//console.log('this:'+this.options.prn[this.page_on+1]);
				if(!$defined($('pl_'+this.options.parent+(this.page_on+1)))){
					//console.log('this:'+'pl_'+this.options.parent+(this.page_on+1));
					this.createPrn(this.page_on+1);
				}
			};
			//restart the timer
			if(this.options.autopass==true){
				$clear.delay(0, null, this.timer);		
				this.timer = this.next.delay(this.options.hangtime*1000, this);
			}
	},
	previous: function(){ 
			// turn off the prn that is on
			$('pl_'+this.options.parent+this.page_on).setStyle('z-index', 0);
			$('pl_'+this.options.parent+this.page_on).effect('opacity',{duration:1000, transition:Fx.Transitions.Quart.easeOut}).start(0); 
			// choose next prn to diplay
			if($defined(this.options.prn[this.page_on-1])) {this.page_on--} else {this.page_on = this.options.prn.length-1;}
			// turn on the next prn (already preloaded)
			$('pl_'+this.options.parent+this.page_on).setStyle('z-index', 1);
			$('pl_'+this.options.parent+this.page_on).effect('opacity',{duration:1000, transition: Fx.Transitions.Quart.easeOut}).start(0,1);
			//restart the timer
			if(this.options.autopass==true){
				$clear.delay(0, null, this.timer);		
				this.timer = this.next.delay(this.options.hangtime*1000, this);
			}
	 },
	mouseEnter: function(){
		$clear.delay(0, null, this.timer);
		this.timer = this.next.delay(60000, this);
	 },
	mouseLeave: function(){ 
		$clear.delay(0, null, this.timer);
		this.timer = this.next.delay(this.options.hangtime*1000, this);
	 }
});