/**
 * @author Huitre
 */

var MooFade = new Class({
  Implements : [Options, Events],

  // properties
  div: '',
  cover1: '',
  cover2: '',
  img1 : '',
  img2 : '',
  images : [],
  current1 : 0,
  current2 : 1,
  visiblediv : 1,
  max: 0,
  timeout : 0,
  fadeduration : 0,
  pause : 1,
  btnControls : new Array(),
  loading : 0,
  loaded : new Array(),

  initialize : function (options) {
      this.images = options.imgs;
    this.max = this.images.length;
    this.div = $(options.el);
    this.divcontrol = $(options.el+ 'Controls');
    this.timeout = options.sleep ? options.sleep : 6000;
    this.fadeduration = options.fadeduration? options.fadeduration : 2000;
    if (this.images.length > 1)
      this.init(options.controls);
    if (this.images.length == 1 && this.images[0] != '') {
      this.init(false);
    }
  },

  showLoading : function () {
    this.loading.set('tween', {
      duration : this.timeout - 100,
      onComplete: function (){
        this.loading.setStyles({
          'width': '0px'
        });
      }.bind(this)
    }).tween('width', '701px');
  },

  init : function (control) {
    this.createElements();
    if (control)
      this.createControls();
   // this.showLoading();
    var fnToRepeat = function() {
      if (!this.pause) {
     //   this.showLoading();
        this.toggle();
      }
    }.bind(this);
    this.cSwap(this.current1);
    fnToRepeat.periodical(this.timeout);
    this.preLoadImgs();
  },

  createControls : function () {
    var tmp = new Array();
    for (var i=0; i < this.max; i++) {
      tmp[i] = i;
      var el = new Element('div', {
        'class' : 'MooFadeGotoBtn'
      });
      this.divcontrol.adopt(el);
    }
    var hax = this;
    $$('.MooFadeGotoBtn').each(function (el, i) {
      el.addEvent('click', function (e) {
        hax.cGoto(tmp[i])
      }.bind(hax));
    });
    var pBtn = new Element('p', {
      'id' : 'MooFadePauseBtn',
      'class' : 'MooStop'
    })
    this.divcontrol.adopt(pBtn);
    pBtn.addEvent('click', function () {
      this.cPause()
    }.bind(this));
    this.btnControls = $$('.MooFadeGotoBtn');
  },

  cPause : function () {
    this.pause = false;
    this.swapBtnPause();
  },

  cStop : function () {
    this.pause = true;
    this.swapBtnPause(true);
  },

  swapBtnPause : function (force) {
    var btn = $('MooFadePauseBtn');
    // force button to display play
    if (force)
      return (btn.set('class', 'MooPlay'));

    if (btn.className == 'MooStop')
      btn.set('class', 'MooPlay');
    else
      btn.set('class', 'MooStop');
    return 1;
  },

  cGoto : function (nb) {
    this.cStop();
    if (this.current1 == nb)
      return;
    if (this.visiblediv) {
      this.current1 = nb;
      this.current2 = ++nb % this.max;
      this.img2.src = this.images[this.current1];
      this.cSwap(this.current1);
    }
    else {
      this.current2 = nb;
      this.current1 = ++nb % this.max;
      this.img1.src = this.images[this.current2];
      this.cSwap(this.current2);
    }
    this.toggle();
  },

  cSwap : function (nb) {
    this.btnControls.each(function (el) {
      el.set({
        'class' : 'MooFadeGotoBtn'
      });
    });
    if (this.btnControls[nb])
      this.btnControls[nb].set({
        'class' : 'MooFadeGotoBtnOn'
      });
  },

  preLoadImgs : function () {
    /*
    this.images.each(function (el) {
      var img = new Element('img', {'src' : el, 'styles': {'display' : 'none'}});
      this.loaded.push(img);
      $(document.body).adopt(img);
    }.bind(this));
    this.pause = 1;
    var _this = this;
    this.loaded[0].addEvent('load', function () {
      _this.loaded[0].set('styles', {'display' : 'inline'});
      _this.cover1.adopt(_this.loaded[0]);
      }
    );
    
    if (this.loaded.length > 1)
    this.loaded[1].addEvent('load', function () {
      _this.loaded[1].set('styles', {'display' : 'inline'});
      _this.cover2.adopt(_this.loaded[1]);
      _this.pause = 0;
      }
    );
      */
	  this.pause = 0;
  },


  createElements : function (){
    this.cover1 = $('cover1');
    this.cover2 = $('cover2');

    // create missing div for slide show
    if (!this.cover1)
    {
      this.cover1 = new Element('div',
      {
        'id' : 'cover1',
        'HTML' : '&nbsp;',
        'styles' : {
          'opacity' : '1',
          'position' : 'absolute'
        }
      });
      this.div.adopt(this.cover1);
    }
    else
      this.cover1.setStyles({
        'opacity' : '1',
        'position' : 'absolute'
      });
    if (!this.cover2)
    {
      this.cover2 = new Element('div',
      {
        'id' : 'cover2',
        'styles' : {
          'opacity' : '1',
          'position' : 'absolute'
        }
      });
      this.div.adopt(this.cover2);
    }
    else
      this.cover2.setStyles({
        'opacity' : '0',
        'position' : 'absolute'
      });
      
    this.img1 = new Element('img', {
      'src' : this.images[0]/*,
      'styles' : {
        'width' :  '701px',
        'height' : '364px'
      }*/
    });

    this.img2 = new Element('img', {
      'src' : this.images[1]/*,
      'styles' : {
        'width' :  '701px',
        'height' : '364px'
      }*/
    });

    this.cover1.adopt(this.img1);
    this.cover2.adopt(this.img2);


    // loading bar
    this.loading = new Element('div',
    {
      'id' : 'loading',
      'styles' : {
        'height' : '3px',
        'width' : '0%',
        'background-color' : '#6A6657',
        'z-index' : '100',
        'position' : 'absolute',
        'bottom' : '-5px',
        'opacity' : '0.7'
      }
    });
    this.div.adopt(this.loading);

    // adjust div from img dimensions
    /*
    this.cover1.setStyles({
      'width' :  '701px',
      'height' : '364px'
    });
    this.cover2.setStyles({
      'width' : '701px',
      'height' : '364px'
    });*/
  },


  swapImgs : function (bool) {
    if (!this.pause) {
      if (bool) {
        this.current1 = (this.current1 +2) % this.max;
        this.img1.src = this.images[this.current1];
        this.cSwap(this.current2);
      } else {
        this.current2 = (this.current2 +2) % this.max;
        this.img2.src = this.images[this.current2];
        this.cSwap(this.current1);
      }
    }
  },

  toggle : function (){
    if(this.visiblediv){
      this.cover1.set('tween', {
        duration : this.fadeduration,
        onComplete: function (){
          this.swapImgs(1);
        }.bind(this)
      }).fade(0);
      this.cover2.set('tween', {
        duration : this.fadeduration
      }).fade(1);
      this.visiblediv = 0;
    }else{
      this.cover1.set('tween', {
        duration : this.fadeduration
      }).fade(1);
      this.cover2.set('tween', {
        duration : this.fadeduration,
        onComplete: function (){
          this.swapImgs(0);
        }.bind(this)
      }).fade(0);
      this.visiblediv = 1;
    }
  }
});