/********************************************************************************************

 this is v.1.0
 
 it contains:
 
 - Dropout
 - SingleDropout
 - MCB
 
********************************************************************************************/

/*******************************************************************************************

    DROPOUT
    
*******************************************************************************************/

var Dropout = {
  buttonRepos: $A(),
  timer: null,
  delayTime: 500,
  initialize: function(){
    var buttons = $$('.openDropout');
    buttons.each(function(elem){
      
      var dropoutInstance = new SingleDropout(elem,$(elem.readAttribute('dropoutId')))
      Dropout.buttonRepos.push(dropoutInstance);
    },this);
  },
  _triggerOn: function(eventObject){
    window.clearTimeout(Dropout.timer);
  },
  _triggerOff: function(eventObject){
    Dropout.timer = setTimeout("Dropout.buttonRepos.invoke('_deactivate');",Dropout.delayTime);
  }
};

var SingleDropout = Class.create({  
  targElem: null,
  buttonElem: null,
  initialize: function(buttonElem,targElem) {
    this.buttonElem = buttonElem;
    this.targElem = targElem;
    this.buttonElem.observe('mouseover',function(eventObject){this._activate(eventObject); eventObject.stop();}.bind(this));
    this.buttonElem.observe('mouseout',function(eventObject){Dropout._triggerOff(eventObject); eventObject.stop();}.bind(this));
    if(this.targElem){
			this.targElem.observe('mouseover',function(eventObject){Dropout._triggerOn(eventObject); eventObject.stop();});
			this.targElem.observe('mouseout',function(eventObject){Dropout._triggerOff(eventObject); eventObject.stop();});
		}
	},
  _activate: function(eventObject){
    Dropout.buttonRepos.invoke('_deactivate');
    Dropout._triggerOn();
    if(this.targElem) this.targElem.show();
    if(!this.buttonElem.hasClassName('active')) {
      this.buttonElem.toggleClassName('active');
    }
  },
  _deactivate: function(eventObject){
    if(this.targElem) this.targElem.hide();
    if(this.buttonElem.hasClassName('active')) {
      this.buttonElem.toggleClassName('active');
    }
  }
});

if(!/msie|MSIE 6/.test(navigator.userAgent)){
  document.observe('dom:loaded',Dropout.initialize);
}

/*******************************************************************************************

  Einde DROPOUT
    
*******************************************************************************************/

/*******************************************************************************************

  Begin MCB
  
  The MCB has a couple of option that can be turned on via attributen in the MCB container
    div. The avaiable options are:
      - navigationMethod = "extended"     
      - noAutoRotate="true"
      - noDelay = "true"
      - noSlideRotation ="max aantal slides zichtbaar in slideframe"

    All the attributes should have no value, their presence defines a certain behaviour
    
*******************************************************************************************/

var MCB = Class.create({
   
  targElem: null,
  nextButton: null,
  previousButton: null,
  slideContainer:null,
  slideWidth:null,
  slideLinks:null,
  amountSlides:null,
  timeout:null,
  delay:4000,
  durSlideMovement: 1.0,
  initialize: function(targElem){
    this.targElem = targElem;
    if(this.targElem.readAttribute('noDelay') == 'true')this.durSlideMovement= 0.0;
    
		// buttons
    this.nextButton = targElem.down('.nextSlide');
    this.previousButton = targElem.down('.previousSlide');
  
      //retrieving general data of the MCB:
    this.amountSlides = targElem.select(".slide").length;
    // use amount slides to generate the numbers, taking away the factor of human error:
    // but only do this if the attribute 'navigationMethod' equals to 'extended'
    this.slideLinks =  $$(".MCB_linkToSlide");
    if(this.targElem.readAttribute('navigationMethod') == 'extended'){
      for(var i = 1; i < this.amountSlides+1;i++){
        var numberLink = new Element("a",{href:"#",id:"MCB_linkTo["+i+"]"});
        numberLink.addClassName("MCB_linkToSlide");
        numberLink.update(i);
        this.slideLinks[i-1] = numberLink;
        this.nextButton.insert({before:numberLink});
      }
    }
    
    // slides
		this.slideContainer = targElem.select('.slideContainer')[0];
    if(!this.slideContainer) {
      ECube.d.log(0, 'could not initiate MCB due to missing slideContainer element');
      return false;
    }
    this.slideWidth = parseInt(this.targElem.select('.slide')[0].getDimensions().width);
    this.slides = this.slideContainer.select('.slide');
    // Het aantal slides maximaal zichtbaar in eerste instantie binnen de slideContainer:
    if(this.slideContainer.up('.slideFrame')){ // slideFrame is er soms niet, als hij niet is is maxSlidesVisible toch niet van belang.
      this.maxSlidesVisible = this.slideContainer.up('.slideFrame').getDimensions().width / this.slideWidth;
    }
		// setting slidecontainerwidth
		var neededWidth = (this.slides.length * this.slideWidth);
    this.slideContainer.setStyle({
      width: neededWidth+'px'
    });
		this.slideContainer.absolutize();
		// observing all elements
    if(this.slideLinks )this.slideLinks.invoke("observe","click",this._goToSlideNumber.bind(this));
		if(this.nextButton) this.nextButton.observe('click',this._nextSlide.bind(this));
    if(this.previousButton) this.previousButton.observe('click',this._previousSlide.bind(this));
    if(!this.targElem.readAttribute('noAutoRotate') == 'true')this.targElem.observe('mouseout',this._startAutorotateDelayed.bind(this));
    this.targElem.observe('mouseover',this._stopAutorotate.bind(this));
		// don't automatically start rotating, only when attribute noAutoRotate set to 'false'
    // or when it not added as an attribute at all
  
    if(this.targElem.readAttribute('noSlideRotation')){
     this.previousButton.hide();
     this.previousButton.previous().show();
     console.log(this.targElem.readAttribute('noSlideRotation'),this.maxSlidesVisible,this.amountSlides);
      if( this.amountSlides <= parseInt(this.targElem.readAttribute('noSlideRotation')) ){
        this.nextButton.hide();
        this.nextButton.previous().show();
      }
    }
       
    if(this.targElem.readAttribute('noAutoRotate') == 'true'){
      this._stopAutorotate();
    }
    else{
      this._startAutorotateDelayed();
    }
    return true;// default return value
  },
  
  
  _startAutorotate: function(){
    this._nextSlide(); 
    this.timeout = setTimeout(this._startAutorotate.bind(this), this.delay);
  },
  _startAutorotateDelayed: function(){
    this.timeout = setTimeout(this._startAutorotate.bind(this), this.delay);
  },
  _stopAutorotate: function(){
    clearTimeout(this.timeout);
  },
  
  _nextSlide: function(eventObject){
		if(eventObject) eventObject.stop();
		var currentPosition = this.slideContainer.getStyle('left').replace(/[a-zA-Z]/g,'');
    var targPos = (((currentPosition-this.slideWidth)* -1)>=this.slideContainer.getDimensions().width) ? 0 : (currentPosition-this.slideWidth);
    var blockToScrollto = Math.round(targPos / this.slideWidth);
		targPos = ((blockToScrollto * -1) < this.slides.length ? blockToScrollto : 0) * this.slideWidth;
    if(this.targElem.readAttribute('noSlideRotation')) this._switchbuttonActivation(targPos) ;
    new Effect.Morph(this.slideContainer,{style:"left: " + targPos + "px;", duration:this.durSlideMovement} );

  },
  
  _previousSlide: function(eventObject){
    if(eventObject) eventObject.stop();
    var currentPosition = parseInt(this.slideContainer.getStyle('left').replace(/[a-zA-Z]/g,''));
    var targPos = ((currentPosition+this.slideWidth) > 0) ? (this.slideWidth-this.slideContainer.getDimensions().width) : (currentPosition+this.slideWidth);
    targPos = Math.round(targPos / this.slideWidth)*this.slideWidth;
    if(this.targElem.readAttribute('noSlideRotation')) this._switchbuttonActivation(targPos); 
    new Effect.Morph(this.slideContainer,{style:"left: " + targPos + "px;", duration:this.durSlideMovement} );
    
  },
  
  _goToSlideNumber: function(eventObject){
    if(eventObject) eventObject.stop();
    var element = eventObject.findElement("a");
    var idValue = parseInt(element.readAttribute("id").replace(/\]$/,'').replace(/MCB\_linkTo\[/,''));
    var targPos = this.slideWidth-(this.slideWidth*idValue);
    new Effect.Morph(this.slideContainer,{style:"left: " + targPos + "px;", duration:this.durSlideMovement} );
  },
  
  _switchbuttonActivation: function(targPos){
      ECube.d.log(3, "_switchbuttonActivation with ", targPos, this.slideWidth*this.amountSlides-this.slideWidth);
      if (targPos == 0){
        this.previousButton.hide();
        this.previousButton.previous().show();
        this.nextButton.show();
        this.nextButton.previous().hide();
        return true;
      }
      else if(targPos == -(this.slideWidth*this.amountSlides-this.slideWidth)){
        this.previousButton.show();
        this.previousButton.previous().hide();
        this.nextButton.hide();
        this.nextButton.previous().show();
        return true;
      }
      else{
        this.previousButton.show();
        this.nextButton.show();
        this.previousButton.previous().hide();
        this.nextButton.previous().hide();
        return false;
      }
  }
});

document.observe('dom:loaded',function(eventObject){ 
  $$('.MCBInstance').each(function(elem){new MCB(elem);});
});

/*******************************************************************************************

  Einde MCB
    
*******************************************************************************************/