/* CONFIGURATION */

//enter the path to the slideshow frame
var slideshowFrame = "fileadmin/template/squares/images/slideshow_frame.png";

//width and height of slideshow
var slideshowWidth = 650;
var slideshowHeight = 465;

//caption height
var slideshowCaptionHeight = 80;

//number of sections between slides
var slideshowInterval = 5;

/* END OF CONFIGURATION */


var Slideshow = Class.create({
  initialize: function(id) {
    this.domId = id;    
    this.slides = new Array();
    this.currentSlide = -1;
   	this.frameWidth = 0;
   	this.frameHeight = 0;
   	
   	this.link = null;
   	
   	if($(this.domId)) {
   		
   
   		$(this.domId).setStyle({'position':'relative', 'top': '0','left':'0'});
   		$(this.domId).down('div').setStyle({'width': slideshowWidth + "px", 'height': slideshowHeight + "px"});
   		$(this.domId).addClassName('slideshow-container');
   		var overlay = new Element('img', { 'src': slideshowFrame, 'style':"cursor: pointer; position: absolute; left: 0; top: 0; z-index:50" });   		
   		
   		$$('#' + this.domId + ' dl').each(function(i, index) {   		
   			this.slides.push(i.identify());
   			i.setStyle({'position':'absolute','left':'0','top':'0','width':(slideshowWidth -5) + 'px','height':(slideshowHeight -5) + 'px','overflow':'hidden','margin':'0','padding':'0'});
   		
   			if(this.currentSlide < 0) {
   				this.currentSlide = this.slides.length - 1;
   			} else {
   				i.hide();
   			}
   		}, this);	
   		   		
   		//save global ref to slideshow for link usage
   		if(document.slideshows == undefined) {
   			document.slideshows = [];
   		}			
			this.slideshowIndex = document.slideshows.length;
			document.slideshows[this.slideshowIndex] = this;
			
			//setup caption			
   		var caption = new Element('div', {'class':"slideshow-caption-container", 'style':"display: none; position: absolute;  left: 0; top: 0; width: " + slideshowWidth + "px; height: " + slideshowCaptionHeight + "px;  z-index:40" });
   		caption.insert(new Element('div', {'class':"slideshow-caption-background", 'style':"position: absolute; top: 0; left: 0; width: " + slideshowWidth + "px; height: 100%;"}).update('&nbsp'));   				
   		caption.insert(new Element('div', {'style':"position: absolute; top: 0; left: 0; width: " + slideshowWidth + "px; height: 100%;"}).update(new Element('div', {'class':'slideshow-caption'}).update($(this.slides[this.currentSlide]).down('img').alt)));   				
   		
   	
   		caption.down('div.slideshow-caption-background').setOpacity(0.5);
   		overlay.observe('mouseover', function() {
   			$A(document.slideshows).each(function(s) {
   				if(this.id  == s.domId ) {
   					s.caption(1);
   				}
   			}, this.up('div.slideshow-container'));
   		});
   		overlay.observe('mouseout', function() {
   			$A(document.slideshows).each(function(s) {
   				if(this.id  == s.domId ) {
   					s.caption(0);
   				}
   			}, this.up('div.slideshow-container'));
   		});
   		
   		//setup link
   		this.link = $(this.slides[this.currentSlide]).down('img').readAttribute('longdesc');
   		overlay.observe('click', function() {   		
   			$A(document.slideshows).each(function(s) {
   				if(this.id  == s.domId ) {
   					s.navigate();
   				}
   			}, this.up('div.slideshow-container'));
   		});
   		
   		this.captionId = caption.identify();
   		 
			//setup link
			
			var controls = new Element('div', {'class':'slideshow-navigation','style':"position: relative; clear: both; text-align: right; padding: 5px 20px;"});
   		var previous = new Element('a', { href: "javascript:document.slideshows[" + this.slideshowIndex + "].previous()" }).update("&lt; Previous");
   		var next = new Element('a', { href: "javascript:document.slideshows[" + this.slideshowIndex + "].next()" }).update("Next &gt;");
			//var play = new Element('a', { href: "javascript:document.slideshows[" + this.slideshowIndex + "].play()" }).update("play");
			//var pause = new Element('a', { href: "javascript:document.slideshows[" + this.slideshowIndex + "].pause()" }).update("pause");
	
   		  	
   		controls.insert(previous);
   		//controls.insert(" | ");
   		//controls.insert(pause);
   		//controls.insert(" | ");
   		//controls.insert(play);
   		controls.insert(" | ");
   		controls.insert(next);
   		
   		$(this.domId).insert(caption);
 			$(this.domId).insert(controls);
   		$(this.domId).insert(overlay);
   		
   
   	}	
  },
  play: function() {
    this.advance(1);
    this.autoplay();
  },
	  
  pause: function() {
   if(this.timer != undefined) {
  		window.clearInterval(this.timer);
  	}
  },
  stop: function() {
    //reset
  },
  next: function() {
  	
  	this.pause();
    this.advance(1);
  },
 	previous: function() {
  	this.pause();
    this.advance(-1);
  },
  autoplay: function() {
 		this.timer = window.setInterval("document.slideshows[" + this.slideshowIndex + "].advance(1)", slideshowInterval * 1000);
 	},
  advance: function(delta) {
  	
  	var newSlide = this.currentSlide + delta;
  	if(newSlide >= this.slides.length) {
  		newSlide = 0;
  	} else if(newSlide < 0) {
  		newSlide = this.slides.length -1;
  	}
  	
  	if(this.slides[newSlide] != null) {
  		$(this.slides[newSlide]).style.zIndex = '1';
  		if(this.slides[this.currentSlide] != null) {
  			$(this.slides[this.currentSlide]).style.zIndex = '2';
  			$(this.slides[this.currentSlide]).fade({ duration: 1.0 });
  		}  		
  		$(this.slides[newSlide]).show();
  		$(this.captionId).down('div.slideshow-caption').update($(this.slides[newSlide]).down('img').alt);
  		this.link = $(this.slides[newSlide]).down('img').readAttribute('longdesc');
  		
  		this.currentSlide = newSlide;
  	}
  },   
 	caption: function(show) {
  	//toggles caption
  	if(show) {
  		if($(this.captionId).down('div.slideshow-caption').innerHTML.length > 0) {
  			$(this.captionId).show();
  		}
  	} else {
  		$(this.captionId).hide();
  	}
  	
  },
  navigate: function() {
  	
  	if(this.link != null) {
  		window.location = this.link;
  	}
  } 
});



document.observe("dom:loaded", function() {
  // initially hide all containers for tab content
  $$('h1').each(function(obj) {  	
  	if(obj.innerHTML == 'Slideshow' && $(obj).up().next('div.csc-textpic') != undefined) {  		
  		obj.up().hide();
  		new Slideshow($(obj).up().next('div.csc-textpic').identify());
  	}
  });
});

Event.observe(window, 'load', function() {
  $A(document.slideshows).each(function(s) { s.autoplay(); });
});