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

  Script    : SlideShow
  Version    : 1.1
  Authors    : Samuel Birch
  Desc    :

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

var SlideShow = new Class({
  getOptions: function(){
    return {
      effect: 'wipe', //fade|wipe|slide|random
      duration: 2000,
      transition: Fx.Transitions.linear,
      direction: 'bottom', //top|right|bottom|left|random
      color: false,
      wait: 5000,
      loop: true,
      thumbnails: false,
      thumbnailCls: 'outlinebg',
      backgroundSlider: false,
      loadingCls: 'loading',
	  textAndDescr: false,
	  textPosTop: '48%',
	  textPosLeft: '0px',
	  textWrapPosTop: '48%',
	  textWrapPosLeft: '0px',
	  textWrapWidth: '100%',
	  textWrapHeight: '51px',
	  textWrapBorder: '1px #5f5f5f',
	  textWrapBackground: '#000000',
	  styleTitle: 'none',
	  styleDescr: 'none'
    };
  },

  initialize: function(container, images, options){
    this.setOptions(this.getOptions(), options);

    this.container = $(container);
    this.container.setStyles({
      position: 'relative',
      overflow: 'hidden'
    });
	this.a = $('lightsa');
    this.imagesHolder = new Element('div').setStyles({
      position: 'absolute',
      overflow: 'hidden',
      top: this.container.getStyle('height'),
      left: 0,
      width: '0px',
      height: '0px',
      display: 'none'
    }).injectInside(this.container);

	this.loadingText = new Element('div',{
		styles:{
			'position'		:'absolute',
			'overflow'		:'hidden',
			'top'			:this.options.textPosTop,
			'left'			:this.options.textPosLeft,
			'width'			:'100%',
			'z-index'		:'3',
			'opacity'		:'.7'			
			
		}
	}).injectInside(this.container);

	this.textWrap = new Element('div',{
		styles:{
			'margin'		:'0px',
			'display'		:'none',
			'position'		:'absolute',
			'top'			:this.options.textWrapPosTop,
			'left'			:this.options.textWrapPosLeft,
			'width'			:this.options.textWrapWidth,
			'height'		:this.options.textWrapHeight,
			'z-index'		:'2',
			'background'	:this.options.textWrapBackground,
			'border'		:this.options.textWrapBorder,
			'opacity'		:.5
		}
	}).injectInside(this.container);
	
	
    if($type(images) == 'string' && !this.options.thumbnails){
      var imageList = [];
      $$('.'+images).each(function(el){
        imageList.push(el.src);		
        el.injectInside(this.imagesHolder);		
      },this);
      this.images = imageList;

    }else if($type(images) == 'string' && this.options.thumbnails){
      var imageList = [];
      var srcList = [];
	  var ttlList = [];
	  var descList = [];
	  var slideWidthes = [];
	  var slideHeights = [];
	  var srcbigImages = [];
      this.thumbnails = $$('.'+images);
      this.thumbnails.each(function(el,i){
        srcList.push(el.href);
		ttlList.push(el.title);
        imageList.push(el.getElement('img'));
		srcbigImages.push(el.getElement('img').getProperty('alt'));
		// new picture resolution
		var inPut = el.getElement('input');
		slideWidthes.push(inPut.getStyle('width').toInt());
		slideHeights.push(inPut.getStyle('height').toInt());
		descList.push(inPut.getProperty('value'));
        el.href = 'javascript:;';
        el.addEvent('click',function(){
          this.stop();
          this.play(i);
        }.bind(this,el,i));
      },this);
      this.images = srcList;
	  this.titles = ttlList;
	  this.description = descList;
      this.thumbnailImages = imageList;
	  this.mainSlideWidthes = slideWidthes;
	  this.mainSlideHeights = slideHeights;
	  this.bigImages = srcbigImages;

      if(this.options.backgroundSlider){
        this.bgSlider = new BackgroundSlider(this.thumbnailImages,{mouseOver: false, duration: this.options.duration, className: this.options.thumbnailCls, padding:{top:0,right:-2,bottom:-2,left:0}});
        this.bgSlider.set(this.thumbnailImages[0]);
      }

    }else{
      this.images = images;
    }

    this.loading = new Element('div').addClass(this.options.loadingCls).setStyles({
      position: 'absolute',
      top: 0,
      left: 0,
      zIndex: 3,
      display: 'none',
      width: this.container.getStyle('width'),
      height: this.container.getStyle('height')
    }).injectInside(this.container);

    this.oldImage = new Element('div').setStyles({
      position: 'absolute',
      overflow: 'hidden',
      top: 0,
      left: 0,
      opacity: 0,
      width: this.container.getStyle('width'),
      height: this.container.getStyle('height')
    }).injectInside(this.container);

    this.newImage = this.oldImage.clone();
    this.newImage.injectInside(this.container);
	
    this.timer = 0;
    this.image = -1;
    this.imageLoaded = 0;
    this.stopped = true;
    this.started = false;
    this.animating = false;
	this.adaptNext = false;
	this.adaptPrev = false;
  },

  load: function(){
    $clear(this.timer);
    this.loading.setStyle('display','block');
    this.image++;
    var img = this.images[this.image];
	
    delete this.imageObj;
	this.container.removeEvent();

    doLoad = true;
    this.imagesHolder.getElements('img').each(function(el){
      var src = this.images[this.image];
	
/*	  // Resolutions
	  this.container.setStyles({
		'width'		: this.mainSlideWidthes[this.image],
		'height'	: this.mainSlideHeights[this.image]
	  }); 	  
	  // if all width&height of images are equal than this setStyles func must be declared for quick script work
	  this.oldImage.setStyles({
		'width'		: this.container.getStyle('width'),
		'height'	: this.container.getStyle('height')
	  });
*/	  
      if(el.src == src) {
        this.imageObj = el;
        doLoad = false;
        this.add = false;		
        this.show();
		
		if(this.options.textAndDescr) { // title and etc.		
			this.loadingText.empty();
			var span = new Element('span');
			span.empty();
			span.addClass(this.options.styleTitle);
			this.textWrap.setStyle('display', 'block');
			span.setHTML(this.titles[this.image]).injectInside(this.loadingText);
			var span2 = new Element('span');
			span2.empty();
			span2.addClass(this.options.styleDescr);
			var br = new Element('br');
			br.injectInside(this.loadingText);
			span2.setHTML(this.description[this.image]).injectInside(this.loadingText);
		}
      }	  
    },this);

    if(doLoad){
      this.add = true;
      this.imageObj = new Asset.image(img, {onload: this.show.bind(this)});	  

		if(this.options.textAndDescr) { // title and etc.
			this.loadingText.empty();
			var span = new Element('span');
			span.empty();
			span.addClass(this.options.styleTitle);
			this.textWrap.setStyle('display', 'block');
			span.setHTML(this.titles[this.image]).injectInside(this.loadingText);
			var span2 = new Element('span');
			span2.empty();
			span2.addClass(this.options.styleDescr);
			var br = new Element('br');
			br.injectInside(this.loadingText);
			span2.setHTML(this.description[this.image]).injectInside(this.loadingText);
		}
    }
	var image_src = this.bigImages[this.image];
	var title_src = this.titles[this.image];
	var descr_src = this.description[this.image];
	this.a.setProperty('href', image_src);
	this.a.setProperty('title', title_src + '<br/>' + descr_src);
	this.a.setProperty('rel', 'lightbox');
	this.container.addEvent('click', function(){
		this.stop();
//		Lightbox.show(image_src, title_src + '<br />' + descr_src);
		}.bind(this));
  },

  reset: function() {
	this.images = new Array();
	this.titles = new Array();
	this.description = new Array();
	this.thumbnails.each(function(el){
		el.remove();
    });

	this.thumbnailImages = new Array();
	this.mainSlideWidthes = new Array();
	this.mainSlideHeights = new Array();

    this.timer = 0;
    this.image = -1;
    this.imageLoaded = 0;
    this.stopped = true;
    this.started = false;
    this.animating = false;

	this.bgSlider.removeAll();
	
	this.loading.remove();
	this.oldImage.remove();
	this.newImage.remove();
	this.imagesHolder.remove();
	this.loadingText.remove();
	this.textWrap.remove();
	this.container.empty();
  },
  
	show: function(add){
  
    if(this.add){
      this.imageObj.injectInside(this.imagesHolder);	  
    }

    this.newImage.setStyles({
      zIndex: 1,
      opacity: 0
    });
	
    var img = this.newImage.getElement('img');	
    if(img){	
      img.replaceWith(this.imageObj.clone());	  
    }else{
      var obj = this.imageObj.clone();
      obj.injectInside(this.newImage);
    }
    this.imageLoaded = this.image;
    this.loading.setStyle('display','none');	
    if(this.options.thumbnails){

      if(this.options.backgroundSlider){
        var elT = this.thumbnailImages[this.image];
        this.bgSlider.move(elT);
        this.bgSlider.setStart(elT);
      }else{
        this.thumbnails.each(function(el,i){
          el.removeClass(this.options.thumbnailCls);
          if(i == this.image){
            el.addClass(this.options.thumbnailCls);
          }
        },this);
      }
    }	
    this.effect();	
  },

  wait: function(){
    this.timer = this.load.delay(this.options.wait,this);
  },

  play: function(num){
    if(this.stopped){
      if(num > -1){this.image = num-1};
      if(this.image < this.images.length){
        this.stopped = false;
        if(this.started){
          this.next();
        }else{
          this.load();
        }
        this.started = true;
      }
    }
  },

  stop: function(){
    $clear(this.timer);
    this.stopped = true;
  },

  next: function(wait){
    var doNext = true;
    if(wait && this.stopped){
      doNext = false;
    }
    if(this.animating){
      doNext = false;
    }
    if(doNext){
      this.cloneImage();
      $clear(this.timer);
      //console.log(this.image+' : '+(this.images.length-1));
      if(this.image < this.images.length-1){
        if(wait){
          this.wait();
        }else{
          this.load();
        }
      }else{
        if(this.options.loop){
          this.image = -1;
          if(wait){
            this.wait();
          }else{
            this.load();
          }
        }else{
          this.stopped = true;
        }
        //console.log('stopped');
      }
    }
  },

  previous: function(){
    this.image = this.imageLoaded-2;
    this.next();
  },

  cloneImage: function(){
    var img = this.oldImage.getElement('img');
    if(img){
      img.replaceWith(this.imageObj.clone());
    }else{
      var obj = this.imageObj.clone();
      obj.injectInside(this.oldImage);
    }

    this.oldImage.setStyles({
      zIndex: 0,
      top: 0,
      left: 0,
      opacity: 1
    });

    this.newImage.setStyles({
		opacity		:0
	});
  },


  effect: function(){
    this.animating = true;
    this.effectObj = this.newImage.effects({
      duration: this.options.duration,
      transition: this.options.transition
    });

    this.effectObj2 = this.loadingText.effects({
      duration: this.options.duration,
      transition: this.options.transition
    });

    this.effectObj3 = this.textWrap.effects({
      duration: this.options.duration,
      transition: this.options.transition
    });

	
    var myFxTypes = ['fade','wipe','slide'];
    var myFxDir = ['top','right','bottom','left'];

    if(this.options.effect == 'fade'){
      this.fade();

    }else if(this.options.effect == 'wipe'){
      if(this.options.direction == 'random'){
        this.setup(myFxDir[Math.floor(Math.random()*(3+1))]);
      }else{
        this.setup(this.options.direction);
      }
      this.wipe();

    }else if(this.options.effect == 'slide'){
      if(this.options.direction == 'random'){
        this.setup(myFxDir[Math.floor(Math.random()*(3+1))]);
      }else{
        this.setup(this.options.direction);
      }
      this.slide();

    }else if(this.options.effect == 'random'){
      var type = myFxTypes[Math.floor(Math.random()*(2+1))];
      if(type != 'fade'){
        var dir = myFxDir[Math.floor(Math.random()*(3+1))];
        if(this.options.direction == 'random'){
          this.setup(dir);
        }else{
          this.setup(this.options.direction);
        }
      }else{
        this.setup();
      }
      this[type]();
    }
  },

  setup: function(dir){
    if(dir == 'top'){
      this.top = -this.container.getStyle('height').toInt();
      this.left = 0;
      this.topOut = this.container.getStyle('height').toInt();
      this.leftOut = 0;

    }else if(dir == 'right'){
      this.top = 0;
      this.left = this.container.getStyle('width').toInt();
      this.topOut = 0;
      this.leftOut = -this.container.getStyle('width').toInt();

    }else if(dir == 'bottom'){
      this.top = this.container.getStyle('height').toInt();
      this.left = 0;
      this.topOut = -this.container.getStyle('height').toInt();
      this.leftOut = 0;

    }else if(dir == 'left'){
      this.top = 0;
      this.left = -this.container.getStyle('width').toInt();
      this.topOut = 0;
      this.leftOut = this.container.getStyle('width').toInt();

    }else{
      this.top = 0;
      this.left = 0;
      this.topOut = 0;
      this.leftOut = 0;
    }
  },

  fade: function(){
    this.effectObj.start({
      opacity: [0,1]
    });
    this.effectObj2.start({
      opacity: [0,1]
    });	

    this.effectObj3.start({
      opacity: [0,.5]
    });		

    this.resetAnimation.delay(this.options.duration+90,this);
    if(!this.stopped){
    this.next.delay(this.options.duration+100,this,true);
    }
  },

  wipe: function(){
    this.oldImage.effects({
      duration: this.options.duration,
      transition: this.options.transition
    }).start({
      top: [0,this.topOut],
      left: [0, this.leftOut]
    })
    this.effectObj.start({
      top: [this.top,0],
      left: [this.left,0],
      opacity: [1,1]
    },this);
    this.effectObj2.start({
      top: [this.options.textPosTop,this.options.textPosTop],
      left: [this.left,this.options.textPosLeft],
      opacity: [this.loadingText.getStyle('opacity'), this.loadingText.getStyle('opacity')]
    },this);	
	
    this.effectObj3.start({
      top: [this.options.textWrapPosTop,this.options.textWrapPosTop],
      left: [this.left,this.options.textWrapPosLeft],
      opacity: [this.textWrap.getStyle('opacity'), this.textWrap.getStyle('opacity')]
    },this);

	
    this.resetAnimation.delay(this.options.duration+90,this);
    if(!this.stopped){
    this.next.delay(this.options.duration+100,this,true);
    }
  },

  slide: function(){
    this.effectObj.start({
      top: [this.top,0],
      left: [this.left,0],
      opacity: [1,1]
    },this);
	
    this.effectObj2.start({
      top: [this.options.textPosTop,this.options.textPosTop],
      left: [this.left,this.options.textPosLeft],
      opacity: [1,1]
    },this);

    this.effectObj3.start({
      top: [this.options.textWrapPosTop,this.options.textWrapPosTop],
      left: [this.left,this.options.textWrapPosLeft],
      opacity: [.5,.5]
    },this);

    this.resetAnimation.delay(this.options.duration+90,this);
    if(!this.stopped){
    this.next.delay(this.options.duration+100,this,true);
    }
  },

  resetAnimation: function(){
    this.animating = false;
  }

});
SlideShow.implement(new Options);
SlideShow.implement(new Events);


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