<!-----------To download a fresh copy of code, and for more code downloads and content --------->
<!-----------please visit www.coolwebdeveloper.com-------->

var MDSK = {}
MDSK.Slideshow = Class.create();
MDSK.Slideshow.DefaultOptions = {
  duration: 0.6,
  seconds_per_slide: 3.0,
  onChange: function() { }
}

Object.extend(MDSK.Slideshow.prototype, {
  initialize: function(container, slide_selector, options) {
	var me = this;  
    this.options = Object.extend(Object.extend({},MDSK.Slideshow.DefaultOptions), options || {});
    this.container = $(container);
	this.slides = Selector.findChildElements(this.container, [slide_selector]);
//	this.slides.sort(function(a,b){
//			return me.rndm(-1,1);
//		});
    this.currentSlide = 0;
    this.paused = false;
    var self = this;
    var Found=false
    this.slides.each(function(slide, idx) {
      if (idx > 0) Element.hide(slide);
       
    })
    this.slides[0].style.display = "block";
   	
	this.start();
    this.options.onChange(this);
  },
  
  forward: function() {
    var newSlideIdx = this.currentSlide+1;
    if (newSlideIdx >= this.slides.length) newSlideIdx = 0;
    this.transition(newSlideIdx);
  },
  
  backward: function() {
    var newSlideIdx = this.currentSlide-1;
    if (newSlideIdx < 0) newSlideIdx = this.slides.length-1;
	

    this.transition(newSlideIdx);
  },
  
  jumpToSlide: function(idx) {
    if (idx < 0 || idx >= this.slides.length) return false;
    this.stop();
    this.transition(idx);
  },
  
  start: function() {
    if (this.interval) return;
    this.interval = setInterval(this.forward.bind(this), this.options.seconds_per_slide * 1000);
    this.container.addClassName('playing');
  },
  
  stop: function() {
    if (!this.interval) return;
    clearInterval(this.interval);
    this.interval = null;
    this.container.removeClassName('playing');
  },
  
  pausePlay: function() {
    if (this.interval)  this.stop();
    else                this.start();
    },
	
  rndm : function(min, max){
		return Math.floor(Math.random() * (max - min + 1) + min);
	},			
	
  /* ========== */
  
  transition: function(newSlideIdx) {
  

    var oldSlideIdx = this.currentSlide;
    if (newSlideIdx == oldSlideIdx) return;
    if (this.fadeIn && this.fadeIn.state != 'finished') this.fadeIn.cancel();
    if (this.fadeOut && this.fadeOut.state != 'finished') {
      this.fadeOut.cancel(); Element.hide(this.fadeOut.element);
    }
    this.fadeOut = new Effect.Fade(this.slides[oldSlideIdx], {duration: this.options.duration});
    this.fadeIn = new Effect.Appear(this.slides[newSlideIdx], {duration: this.options.duration});
    this.currentSlide = newSlideIdx;
    this.options.onChange(this);
	
	
/* ------------------custom code - you can delete this if you want to customize the slideshow\s look and feel your way. this code is used to change the background color of the div's when slideshow moves from one slide to another---------------*/
	for (i = 0; i < this.slides.length; i++)
	{
		var nam = document.getElementById("showStyle"+i);
		if(this.currentSlide == i)
		{
			nam.style.backgroundColor = "#999999";
		}
		else
		{
			nam.style.backgroundColor = "";
		}
	}
	/*--------------------------custom code ends ----------------------*/
  } 
});