/*
mooSimpleSlide - Simple SlideShow Class
version: 0.25
copyright 2007 11 07 - Huug Helmink, Ace Group bv
 
 
mootools v.1.11 classes
Core: Core
Class: Class, Class.Extras
Native: Array, String, Function, Number, Element
Fx: Fx.Base 054-4559534 
*/

var basePath = 'http://theora.dreamhosters.com';

var trans = new Element('img', {
                           'src': basePath + '/assets/templates/theora/styles/img/trans.png',
                           'class': 'pause'
                        });
                       
var galleryDivID = 's_gallery';

var mooSimpleSlide = new Class({
  options: {
    period: 0,
    loadAnim: false,
    effectTime: 1200,
    showArrows: true,
    elementSelector: "div.imageElement",
    titleSelector: "h3",
	 descSelector: "p",
	 imageSelector: "img.full",
	 thumbnailSelector: "img.thumbnail",
	 showTitle: true,
	 showDescription: true
  },
  initialize: function(options) {
    
    this.elements  = $(galleryDivID).getElements(this.options.elementSelector);
    this.galleryParent = $(galleryDivID);
     
    // add loading animation
    if(this.loadAnim) {
       var loadingAnim = new Element('div', {'id': 'galleryLoading'});
       loadingAnim.injectInside(this.galleryParent);
    }
    this.data = [];

    this.setOptions(options);
    this.active = 0;
    this.max = this.elements.length;
    this.start = true;
    this.loadedCount = 0;
    this.auto = false;
    this.preloadCount = 3;
	 
    		
    this.construct();   
    // console.log('--------------- INIT -------------------');
    
  },
  
  
  addText: function() {
     if(this.options.showDescription) {
        var descEl = new Element('div', {
                        'id': 'imgDesc'
                     }).injectInside(this.galleryParent);
        var inner = new Element('p', {'height': '35px'}).injectInside(descEl); 
        descEl.setOpacity(0.65);                 
      }       
   },
   
  addArrows: function() {
      // 'inspiration' from smoothGallery
    if ((this.data.length > 1) && (this.options.showArrows)) {
      var leftArrow = new Element('a').addClass('left').addEvent(
			'click',
			this.gotoNextImage.bind(this, 'b')
		).injectInside(this.galleryParent );
		
      var rightArrow = new Element('a').addClass('right').addEvent(
			'click',
			this.gotoNextImage.bind(this, 'f')
		).injectInside(this.galleryParent );
	/*	
      new Element('img', {
		             'src' : basePath + '/assets/templates/theora/styles/img/leftArrow.png',
		             'class': 'arrow'
		            }).injectInside(leftArrow);
		new Element('img', {
		             'src' : basePath + '/assets/templates/theora/styles/img/rightArrow.png',
		             'class': 'rarrow'
		            }).injectInside(this.galleryParent);     */       
		this.galleryParent.addClass('withArrows');
	}
  },
  
   

addPlayPause: function () {
      if ((this.data.length < 2) || (this.options.period == 0)) 
         return;
        
       var pauseHover = function() {this.pauseBtn.setStyle('opacity', 0.9)} 
       // build the play/pause buttons
       this.pauseBtn = new Element('a', {
                    'class': 'pause',
      				'title': 'Pause',	
                    'id': 'pauseBtn'			      				
                  });
	   this.pauseBtn.onclick = this.toggleAuto.bind(this);		

 
        this.playBtn = new Element('a', {
                    'class': 'play',
      				'title': 'Play',
                    'id': 'playBtn'				    
                  });
   		  
        this.playBtn.onclick = this.toggleAuto.bind(this); 
       this.pauseBtn.injectInside(this.galleryParent);       
  }, 
  

   toggleAuto: function() {
      var btnID = null;
  
      if(this.auto) {
         this.auto = false;
         this.pauseBtn.replaceWith(this.playBtn); 
         $clear(this.timer);  
         btnID = 'playBtn';   
      } 
      else {
         this.auto = true;
         this.playBtn.replaceWith(this.pauseBtn); 
         this.timer = this.gotoNextImage.periodical(this.options.period,this, 'f'); 
         btnID = 'pauseBtn'; 
        /* if ((window.ie6) && (document.body.filters)) {  
         supersleight.limitTo(btnID);
         supersleight.run();   
        }*/
      } 
      
  },
  
  stopShow: function() {
      if(this.auto) {
         this.auto = false;
         $clear(this.timer); 
      }
  },
  
 /*
 new Asset.images(['/images/myImage.png', '/images/myImage2.gif'], {
    onComplete: function(){
        alert('all images loaded!');
    }
});
*/

   construct: function() {
       /* add round corners div */
       var corners = new Element('div', {
            'class':'corners_mask'
        }).injectInside(this.galleryParent);
       new Element('img', {
            'src': basePath + '/assets/templates/theora/styles/img/rcorners.png'
            }).injectInside(corners);
       
       var checkLoad = function(){                          
                           this.loadedCount++;  
                          // console.log('loaded: ' +  this.loadedCount); 
                           if(this.loadedCount == Math.min(this.preloadCount, this.max)) {                              
                                this.startShow();
                           }
                       }; 
                        
       var idx = 0;
       var len = this.elements.length;
       var el;                
       for( ; idx < len; idx++) {
          el = this.elements[idx];
          var pic = null;
          picEl = el.getElement(this.options.imageSelector);
          var picName = picEl.getProperty('src');        
          pic = new Asset.image(picName, {onload: checkLoad.bind(this)}); 
          pic.addClass('inGallery');
          pic.injectInside(this.galleryParent);  
          var title = el.getElement(this.options.titleSelector);
          var desc = el.getElement(this.options.descSelector);
          var thumb = el.getElement(this.options.thumbnailSelector);
        
          
      
          this.data.include({
            'pic': pic,
            'src': picName,
            'title': (title != null) ? title.getText() : '',
            'desc': desc,
            'thumb': thumb,
            'inPage': false
          });
          el.remove(); 
       } 
   },
   
    
  startShow: function() {  
       
       this.addText();
       this.start = false;
       // If period options is set > 0, periodical display an image
       if((this.options.period > 0) && (this.max > 1)) {    
          this.timer = this.gotoNextImage.periodical(this.options.period,this, 'f');
          this.auto = true;
          this.addArrows();  
          this.addPlayPause();
       }
        this.showImg();
       
       if(this.loadAnim) {
         $('galleryLoading').setStyle('display', 'none'); 
       } 
       // make png's transparent in ie6
      if ((window.ie6) && (document.body.filters)) {   
           supersleight.limitTo('s_gallery');
           supersleight.run();
      }               
  } , 
      
  incImg: function() {
         // Set next image or the first
    if(this.active < this.max-1) this.active++;
    else this.active = 0;
 },
 
  decImg: function() {
         // Set previous image or the last
    if(this.active > 0) this.active--;
    else this.active = this.max-1;
 },
 
 
  hideImg: function(dir) {      
      this.data[this.active]['pic'].effect('opacity',{duration:this.options.effectTime
                                            ,
                                             onComplete:function(item) {
                                             item.setStyle('display','none');
                                           }
                                           }).start(0); 
      $('imgDesc').getFirst().effect('opacity',{
                  duration:this.options.effectTime
               }).start(0); 
      
      // console.log('------------> hide: ' + this.active);   
      if(dir == 'f')
        this.incImg();
      else if(dir == 'b')    
        this.decImg();                                                                                 
  },
  
  
  
  
  showImg: function() {
      var changeTxt = function() {
                        if(this.options.showDescription) {
                           var desc = this.data[this.active]['desc'];
                           $('imgDesc').getFirst().replaceWith(desc);
                           $('imgDesc').getFirst().effect('opacity',{
                              duration:this.options.effectTime
                           }).start(0,1);  
                        }
                     }
                     
    /*   console.log('------------> show: ' + this.active); */              
      var changedItem = this.data[this.active]['pic']; 
      
      if($defined(changedItem)) {   
         changedItem.setStyle('display', 'inline');        
         new Fx.Style(changedItem, 'opacity',{duration:this.options.effectTime,
                              onStart: changeTxt.bind(this)
                           }).start(0,1);
          
      }                     
                                       
  },
  
    
  gotoNextImage2: function(dir) { 
    
     var hide = this.hideImg.pass(dir, this);
    // add Hide image to function chain
    if(this.start == false) {
      this.chain.chain(hide);
    }
    else {
      this.chain.chain(function(){});
      this.start = false;
    }
    
    // Show image
    var load = this.loadNextImg.bind(this);
    this.chain.chain(load); 
    
    // Show image
    var show = this.showImg.bind(this);
    this.chain.chain(show); 
    
    this.chain.callChain();
    this.chain.callChain();
    this.chain.callChain.delay(200, this.chain);
  },


gotoNextImage: function(dir) {     
    // add Hide image to function chain
    if(this.start == false) {
      this.hideImg(dir);
    }
    else {
      this.start = false;
    }    
    // Show image
    this.showImg();
    // console.log('------------> hide: ' + this.active);                                                   
  }
});
mooSimpleSlide.implement(new Options);


/*---------------------------------------------------------*/

function loadGallery() {      
   var mySlideShow = new mooSimpleSlide(
      {period:6500,
       imageSelector: 'img.gallery_img'
      });
   
}


// window.addEvent('domready', loadGallery());