<!-----------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,
  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 = 2;
    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);
    this.transition(0);
  },
  
  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);
/* ------------------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(idx == i)
		{
			nam.style.backgroundImage = "url(wp-content/themes/default/images/flipper-select.jpg)";
			nam.style.backgroundPosition = "-2px 0";
		}
		else
		{
			nam.style.backgroundImage = "url()";
			nam.style.backgroundPosition = "181px 6px";
		}
		
		if(idx == 0)
		{
			document.getElementById("showStyle0").style.backgroundImage = "url(wp-content/themes/default/images/flipper-select.jpg)";	
			document.getElementById("showStyle0").style.backgroundPosition = "0 0";
		}
		else
		{
			document.getElementById("showStyle0").style.backgroundImage = "url()";
			document.getElementById("showStyle0").style.backgroundPosition = "158px 6px";
		}
	}
/*-----------------------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);
	
	
/* ------------------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(newSlideIdx == i) {
            if(i == 0){
              nam.style.backgroundImage = "url(wp-content/themes/default/images/flipper-select.jpg)";	
              nam.style.color = "#e25a3e";
			  nam.style.fontWeight = "bold";
			  nam.style.backgroundPosition = "left top";
			  nam.style.padding = "10px 0px 0px 0px";
            } 
			
			else {
              nam.style.backgroundImage = "url(wp-content/themes/default/images/flipper-select.jpg)";
			  nam.style.color = "#e25a3e";
			  nam.style.fontWeight = "bold";
			  nam.style.backgroundPosition = "-2px 0";
			  nam.style.padding = "10px 0px 0px 0px";
			  document.getElementById("showStyle"+(i-1)).style.backgroundImage = "none";
            }
			
		} else {
			nam.style.backgroundImage = "url()";
			nam.style.color = "#fff";
			nam.style.fontWeight = "normal";
			nam.style.backgroundPosition = "181px 6px";
			nam.style.padding = "1px 0px 0px 0px";
		}
	}
	/*--------------------------custom code ends ----------------------*/
  } 
});