/*
  BarackSlideshow 0.2
    - Libraries required: MorphList <http://devthought.com>
    - MooTools version required: 1.2
    - MooTools components required: 
        Core: (inherited from MorphList)
        More: Assets
  
    Changelog:
    - 0.1: First release
    - 0.2: Added 'transition' option. Can be slide-(bottom|top|left|right) or fade, or a function that returns any of those values
           Added 'tween' to options to customize the transition effect
           BarackSlideshow::show now also alters the menu state
           Other tiny changes
*/
/*! Copyright: Guillermo Rauch <http://devthought.com/> - Distributed under MIT - Keep this message! */


/*
	BarakSlideshow 0.3
		Improved by TODO interaction & media design.
		http://www.todo.to.it | just@todo.to.it
	
	Changelog
	- 0.3: Added 'startindex' option that opens the slideshow at a determined index, by getting rid of the defalut wallpaper.
		   Added the functions next & prev that gives you the possibility to make the next/prev controls available
		   Other code imrovements

*/

var BarackSlideshow = new Class({
  
  Extends: MorphList,
  
  options: {/*
    onShow: $empty,*/
    auto: false,
    autostart: false,
    autointerval: 2000,
    transition: 'fade',
    tween: { duration: 700 },
	startindex: -1
  },
  
  initialize: function(menu, images, loader, options) {
 	this.loaded = false;
	this.first = $empty;
    this.parent(menu, options);
    this.images = $(images);
    this.imagesitems = this.images.getChildren().fade('hide');
    $(loader).fade('in');
    new Asset.images(this.images.getElements('img').map(function(el) { return el.setStyle('display', 'none').get('src'); }), { onComplete: function() {
      this.loaded = true;
      if($(loader) != null)
	  {
      	$(loader).fade('out');
		$(loader).setStyle("display", "none");
	  }
	  if(this.options.startindex < 0)
	  {
		if(this.current) this.show(this.menuitems.indexOf(this.current));
		else if(this.options.auto && this.options.autostart) this.progress();
      } else {
		this.show(this.options.startindex);
	  }
    }.bind(this) });
    if($type(this.options.transition) != 'function') this.options.transition = $lambda(this.options.transition);
  },
  
  auto: function(){
    if(! this.options.auto) return false;
    $clear(this.autotimer);
    this.autotimer = this.progress.delay(this.options.autointerval, this);
  },
  			
  click: function(ev, item) {
//  this.parent(ev, item);
    ev.stop();
	this.currentId = this.menuitems.indexOf(item);
    this.show(this.currentId);
    $clear(this.autotimer);
  },
  
  show: function(index) {	
    if(! this.loaded) return;
    var image = this.imagesitems[index];
	if( (this.first == $empty) && (index == 0) )
	{
		this.first = this.imagesitems[this.imagesitems.length-1];
	}
	if(image == this.curimage) return;
	try {
		image.setStyle('opacity', '0');
    	image.set('tween', { duration: this.options.tween }).dispose().inject(this.curimage || this.images.getFirst(), this.curimage ? 'after' : 'before').fade('hide');
		image.getElement('img').setStyle('display', 'block');
	}catch(ex) { /* do nothing */ }
    var trans = this.options.transition.run(null, this).split('-');
    switch(trans[0]){
      case 'slide': 
        var dir = $pick(trans[1], 'left');
        var prop = (dir == 'left' || dir == 'right') ? 'left' : 'top';
        image.fade('show').setStyle(prop, image['offset' + (prop == 'left' ? 'Width' : 'Height')] * ((dir == 'bottom' || dir == 'right') ? 1 : -1)).tween(prop, 0); 
        break;
      case 'fade': image.fade('in'); break;
    }
    image.get('tween').chain(function() { 
    	this.auto();
    	this.fireEvent('show', image); 
    }.bind(this));

    this.curimage = image;
    this.setCurrent(this.menuitems[index]);
    
    //this.morphTo(this.menuitems[index]);
	return this;
  },
  
  progress: function(){
    var curindex = this.imagesitems.indexOf(this.curimage);
	curindex = (this.curimage && (curindex + 1 < this.imagesitems.length)) ? curindex + 1 : 0;
	if(this.curimage == null || this.curimage == undefined)
		curindex += 1;
    this.show(curindex);
	this.currentId = curindex;
  },

  gotoIndex: function(idx) {
	this.currentId = (this.curimage && (idx + 1 < this.imagesitems.length)) ? idx + 1 : 0;
//	this.currentId = idx;
	this.show(this.currentId);
  },

  gotoLast: function() {
    var curindex = this.imagesitems.length-1;
	curindex = (this.curimage && (curindex + 1 < this.imagesitems.length)) ? curindex + 1 : 0
    this.show(curindex);
  },

  gotoFirst: function() {
    cidx = this.imagesitems.indexOf(this.first);
	this.currentId = cidx;
	this.show(cidx);
  },
  
  next: function() {
	curindex = this.imagesitems.indexOf(this.curimage);
//	alert("trace: "+this.curimage  + " | " + (curindex + 1) + " | " + this.imagesitems.length);
	this.progress();
  },

  prev: function() {
    var curindex = this.imagesitems.indexOf(this.curimage);
	curindex = (curindex - 1 >= 0) ? curindex - 1  : this.imagesitems.length - 1;
	this.currentId = curindex;
    this.show(curindex);
  }

});