var slideshow = null;
var blankImageUrl = siteroot+'images/blank.png';

var SlideShow = Class.create({
   interval: 3000, // milli seconds
   animationspeed: 1000, // milli seconds, must be smaller then
   overAnImage:false,
   slideDelayId:null,
   outtimer:null,
   navigationExists:false,
   item:null,
   images:null,
   slideshowContainer:null,
   counter:0,
   slidecounter:1,
      
   initialize: function(item, interval, animationspeed, files) {
      this.counter = files.length;
      // create HTML
      slidesElement = new Element('div');
      slidesElement.className = 'slides';
      if(typeof files[0] == 'string'){
         for(i=0; i<files.length; i++){
            slide = new Element('img');
            slide.addClassName('slide');
            slide.id = item.id+'_slide'+(i+1);
            slide.src = blankImageUrl;
            slide.style.display = 'none';
            slidesElement.insert(slide);
         }
      }else{
         /* navigatiecontainer */
         navAndThumbsElement = new Element('div');
         navAndThumbsElement.addClassName('navAndThumbs');
         
         /* terugknop */
         navBackElement = new Element('a');
         navBackElement.href='javascript:void(0);';
         navBackElement.addClassName('navBack');
         navBackElement.insert('<img src="'+siteroot+'images/slideshow_button_back.png" alt="&laquo;" />');
         navAndThumbsElement.insert(navBackElement);
         
         /* subcontainers */
         thumbsElement = new Element('div');
         thumbsElement.addClassName('thumbs');
         innerthumbsElement = new Element('div');
         innerthumbsElement.addClassName('innerthumbs');
         innerinnerthumbsElement = new Element('div');
         innerinnerthumbsElement.addClassName('innerinnerthumbs');
         
         /* slides en thumbnails */
         for(i=0; i<files.length; i++){
            
            //create slides
            slide = new Element('img');
            slide.addClassName('slide');
            slide.id = item.id+'_slide'+(i+1);
            slide.src = blankImageUrl;
            slide.style.display = 'none';
            slidesElement.insert(slide);
            
            //create thumbnails
            thumb = new Element('a');
            thumb.addClassName('thumb');
            if(i == 0) thumb.addClassName('current');
            thumb.id = item.id+'_thumb'+(i+1);
            thumb.href='javascript:void(0);';
            thumbImg = new Element('img');
            thumbImg.alt = "";
            thumbImg.title = "";
            thumbImg.src = blankImageUrl;
            thumb.insert(thumbImg);
            innerinnerthumbsElement.insert(thumb);
         }
         innerthumbsElement.insert(innerinnerthumbsElement);
         thumbsElement.insert(innerthumbsElement);
         navAndThumbsElement.insert(thumbsElement);
         
         /* verder knop */
         navFwdElement = new Element('a');
         navFwdElement.href='javascript:void(0);';
         navFwdElement.addClassName('navFwd');
         navFwdElement.insert('<img src="'+siteroot+'images/slideshow_button_fwd.png" alt="&raquo;" />');
         navAndThumbsElement.insert(navFwdElement);
         
         item.insert(navAndThumbsElement);
      }
      item.insert({'top':slidesElement});
      
      /* images in de juiste volgorde laden */
      if(typeof files[0] == 'string'){
         for(i=0; i<files.length; i++){
            $(item.id+'_slide'+(i+1)).src = files[i];
         }
      }else{
         /* de eerste slide laden, daarna de thumbnails laden, daarna de rest van de slides laden */
         $(item.id+'_slide1').src = files[0][0];
         for(i=0; i<files.length; i++){
            //load thumbnails
            $$('#'+item.id+'_thumb'+(i+1)+' img')[0].src = files[i][1];
            
            //load rest of slides
            if(i > 0) $(item.id+'_slide'+(i+1)).src = files[i][0];
         }
      }
      
      this.interval = interval;
      this.animationspeed = animationspeed;
      this.slideshowContainer = item;
      this.navigationExists = $$('#'+this.slideshowContainer.id+' .navAndThumbs')[0];
      if(this.navigationExists){
         $$('#'+this.slideshowContainer.id+' .innerinnerthumbs a').each(function(item,index) {
            item.observe('click', function() {
               frame = parseInt(item.id.split(this.slideshowContainer.id+'_thumb')[1]); // (id= thumb1 thumb2 etc..)
               this.GotoImage(frame);
            }.bind(this));
            item.observe('mouseover', function(){
               this.overAnImage = true;
            }.bind(this));
            item.observe('mouseout', function(){
               this.overAnImage = false;
            }.bind(this));
         }.bind(this));
         
         $$('#'+this.slideshowContainer.id+' .navFwd')[0].observe('mouseover', function(){
            this.overAnImage = true;
         }.bind(this));
         
         $$('#'+this.slideshowContainer.id+' .navFwd')[0].observe('mouseout', function(){
            this.overAnImage = false;
         }.bind(this));
         $$('#'+this.slideshowContainer.id+' .navBack')[0].observe('mouseover', function(){
            this.overAnImage = true;
         }.bind(this));
         $$('#'+this.slideshowContainer.id+' .navBack')[0].observe('mouseout', function(){
            this.overAnImage = false;
         }.bind(this));
         
         $$('#'+this.slideshowContainer.id+' .navFwd')[0].observe('click', function(e) {
            this.MoveInnerthumbsPosition(-1);
         }.bind(this)); 

         $$('#'+this.slideshowContainer.id+' .navBack')[0].observe('click', function(e) {
            this.MoveInnerthumbsPosition(1);
         }.bind(this)); 

         $$('#'+this.slideshowContainer.id+' .navAndThumbs')[0].observe('mouseover', function(){
            this.overAnImage = true;
         }.bind(this));
         $$('#'+this.slideshowContainer.id+' .navAndThumbs')[0].observe('mouseout', function(e) {
            this.overAnImage = false;
            window.clearTimeout(this.outtimer); // cancel als hij als gescheduled staat...
            this.outtimer = this.RestoreInnerthumbsPosition.delay(0.1,this); // voert hem na een seconde uit...
         }.bind(this));

         this.DisplayNavButtons();
      }
      $(this.slideshowContainer.id+'_slide1').style.display = 'block';
      this.slideDelayId = this.CheckImageLoaded.delay(this.interval/1000, this);
//      this.slideDelayId = this.StartSliding.delay(this.interval/1000, this);
   },
   
   CheckImageLoaded: function(obj){
      if(typeof(obj)=='undefined') {
        obj = this;
      }
      if(!obj.overAnImage) {
         obj.slidecounter = (obj.slidecounter < obj.counter) ? obj.slidecounter+1 : 1;
         current = obj.slidecounter;
         currentSlide = $(obj.slideshowContainer.id+'_slide'+current);
         if(currentSlide.complete) obj.StartSliding(obj);
         else currentSlide.observe('complete',obj.StartSliding(obj));
      }
   },
   
   StartSliding: function(obj) {
      if(typeof(obj)=='undefined') {
        obj = this;
      }
      if(obj.slidecounter == 1) prev = obj.counter;
      else prev = obj.slidecounter-1;
      current = obj.slidecounter;
      $(obj.slideshowContainer.id+'_slide'+prev).style.zIndex = 1;
      if(obj.navigationExists) $(obj.slideshowContainer.id+'_thumb'+prev).className = 'thumb';
      $(obj.slideshowContainer.id+'_slide'+current).style.display = 'none';
      $(obj.slideshowContainer.id+'_slide'+current).style.zIndex = 2;
      for(i=1;i<=obj.counter;i++){
         if(i != current && i != prev){
            $(obj.slideshowContainer.id+'_slide'+i).style.zIndex = 0;
         }
      }
      if(obj.navigationExists) $(obj.slideshowContainer.id+'_thumb'+current).className = 'thumb current';
      obj.animating = true;
      $(obj.slideshowContainer.id+'_slide'+current).appear({
         duration: obj.animationspeed/1000,
         afterFinish: function(){
         }.bind(obj)
      });
      if(obj.navigationExists) obj.SetInnerthumbsPosition();
      window.clearTimeout(obj.slideDelayId);
      obj.slideDelayId = obj.CheckImageLoaded.delay(obj.interval/1000, obj);
   },
   
   GotoImage: function(frame) {
      window.clearTimeout(this.slideDelayId);
      this.slideDelayId = null;
      $(this.slideshowContainer.id+'_slide'+frame).style.display = 'block';
      for(i = 1;i<=this.counter;i++){
         if(i != frame){
            $(this.slideshowContainer.id+'_slide'+i).style.display = 'none';
            $(this.slideshowContainer.id+'_thumb'+i).className = 'thumb';
         }
      }
      this.slidecounter = frame;
      $(this.slideshowContainer.id+'_thumb'+frame).className = 'thumb current';
      this.CheckImageLoaded();
   },
   
   MoveInnerthumbsPosition: function(direction) {
      thumbsWidth = $$('#'+this.slideshowContainer.id+' .thumbs')[0].getWidth();
      thumbWidth = $(this.slideshowContainer.id+'_thumb'+this.counter).getWidth()+4; // +4 for the border
      innerinnerthumbsWidth = $$('#'+this.slideshowContainer.id+' .innerinnerthumbs')[0].getWidth();
      innerthumbsOffsetLeft = $$('#'+this.slideshowContainer.id+' .innerthumbs')[0].offsetLeft;
      distanceToMove = thumbsWidth-thumbWidth;
      if(direction > 0){
         if(innerthumbsOffsetLeft + distanceToMove > 0) position = 0;
         else position = innerthumbsOffsetLeft + distanceToMove;
      }else{
         if(innerthumbsOffsetLeft - distanceToMove < thumbsWidth - innerinnerthumbsWidth) position = thumbsWidth - innerinnerthumbsWidth;
         else position = innerthumbsOffsetLeft - distanceToMove;
      }
      $$('#'+this.slideshowContainer.id+' .innerthumbs')[0].morph('margin-left:'+position+'px;',{
         duration:0.2,
         afterFinish: function(){
            this.DisplayNavButtons();
         }.bind(this)
      });
   },
   
   RestoreInnerthumbsPosition: function(obj) {
      if(typeof(obj)=='undefined') {
         obj = this;
      }
      if(!obj.overAnImage) {
         window.clearTimeout(obj.slideDelayId);
         obj.slideDelayId = obj.CheckImageLoaded.delay(obj.interval/1000, obj);
      }
   },
   
   SetInnerthumbsPosition: function() {
      innerinnerthumbsWidth = $$('#'+this.slideshowContainer.id+' .innerinnerthumbs')[0].getWidth();
      thumbsWidth = $$('#'+this.slideshowContainer.id+' .thumbs')[0].getWidth();
      if(innerinnerthumbsWidth > thumbsWidth){
         thumbOffsetLeft = $(this.slideshowContainer.id+'_thumb'+this.slidecounter).offsetLeft-2;
         thumbWidth = $(this.slideshowContainer.id+'_thumb'+this.slidecounter).getWidth()+4; // +4 for the border
         navBack = $$('#'+this.slideshowContainer.id+' .navBack')[0].getWidth();
         innerinnerthumbsMarginLeft = Math.round(-thumbOffsetLeft + thumbsWidth/2 - thumbWidth/2);
         if(thumbOffsetLeft < (thumbsWidth/2 - thumbWidth/2)){
            $$('#'+this.slideshowContainer.id+' .innerthumbs')[0].morph('margin-left:0px;',{
               duration:0.2,
               afterFinish: function(){
                  this.DisplayNavButtons();
               }.bind(this)
            });
         }else if( thumbOffsetLeft > thumbsWidth/2 - thumbWidth/2 ){
            if(innerinnerthumbsMarginLeft <= thumbsWidth - innerinnerthumbsWidth){
               $$('#'+this.slideshowContainer.id+' .innerthumbs')[0].morph('margin-left:'+(thumbsWidth - innerinnerthumbsWidth)+'px;',{
                  duration:0.2,
                  afterFinish: function(){
                     this.DisplayNavButtons();
                  }.bind(this)
               });
            }else{
               $$('#'+this.slideshowContainer.id+' .innerthumbs')[0].morph('margin-left:'+innerinnerthumbsMarginLeft+'px;',{
                  duration:0.2,
                  afterFinish: function(){
                     this.DisplayNavButtons();
                  }.bind(this)
               });
            }
         }
      }
   },
   
   DisplayNavButtons: function() {
      innerinnerthumbsWidth = $$('#'+this.slideshowContainer.id+' .innerinnerthumbs')[0].getWidth();
      thumbsWidth = $$('#'+this.slideshowContainer.id+' .thumbs')[0].getWidth();
      if(innerinnerthumbsWidth <= thumbsWidth){
         $$('#'+this.slideshowContainer.id+' .navBack')[0].style.visibility = 'hidden';
      }else{
         innerthumbsOffsetLeft = $$('#'+this.slideshowContainer.id+' .innerthumbs')[0].offsetLeft;
         if(innerthumbsOffsetLeft == 0){
            $$('#'+this.slideshowContainer.id+' .navBack')[0].style.visibility = 'hidden';
            $$('#'+this.slideshowContainer.id+' .navFwd')[0].style.visibility = 'visible';
         }
         else{
            if(innerthumbsOffsetLeft > thumbsWidth - innerinnerthumbsWidth){
               $$('#'+this.slideshowContainer.id+' .navBack')[0].style.visibility = 'visible';
               $$('#'+this.slideshowContainer.id+' .navFwd')[0].style.visibility = 'visible';
            }else{
               $$('#'+this.slideshowContainer.id+' .navBack')[0].style.visibility = 'visible';
               $$('#'+this.slideshowContainer.id+' .navFwd')[0].style.visibility = 'hidden';
            }
         }
      }
   }


});