<!-----------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: 2.0,
  seconds_per_slide: 3.0,
  pause_on_mouseover: true, // TODO: pause_on_mouseover
  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);
      if (self.options.pause_on_mouseover) {
        // Event.observe(slide, 'mouseover', self.pause.bind(self))
        // Event.observe(slide, 'mouseout', self.unpause.bind(self))
      }
    })
    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;
	
	var currNum = newSlideIdx+1;
	var num1 = document.getElementById("numDisp");	
	num1.src = null;
	num1.src = "" + currNum + ".jpg";

    this.transition(newSlideIdx);
  },
  
  jumpToSlide: function(idx) {
    if (idx < 0 || idx >= this.slides.length) return false;
    this.stop();
    this.transition(idx);

/* 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(idx == i)
		{
			nam.style.backgroundColor = "#ccb991";
		}
		else
		{
			nam.style.backgroundColor = "#996633";
		}
	}
/*-----------------------custom code ends------------------*/
  },
  
  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);
	
	
/* 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 = "#ccb991";
		}
		else
		{
			nam.style.backgroundColor = "#996633";
		}
	}
  } 
});