  // wait till DOM ready
  $(document).ready(function() {
    
    // Initialise Variables. Use arrays to allow for multiple sliders
    var i =  0 ;
    var sliderID = new Array();
    var sliderWaitTime = new Array() ;
    var sliderEffectTime = new Array() ;
    var sliderCurrPos = new Array();
    var sliderMousePos = new Array () ;
    var sliderIntID = new Array () ;
	var sliderNumSlides = new Array() ;
    var sliderHold = new Array () ;
    var slideCount = new Array();
    var slideWidth = new Array();
    
    // Function to convert Slider Name to an array index to speed things up.
    function getSliderID (sliderName) {
      var sID = $('#'+sliderName).data('SID') ;
      return parseInt(sID) ;
    }
    
    // Function to return rightmost "num" characters of a string.
    String.prototype.RightStr = function (num) {
      var str = this ;
      if (num == "" || num == 0) {
        return "" ;
      }
      
      // if specify more characters than are in the string ... return the string.
      if (str.length < num) {
        return str ;
      }
      
      // return right num of characters
      return str.substring(str.length - num) ;
    }
    
    // Function to return string left padded to length "num" characters with string.
    String.prototype.LeftPadStr = function (strPad, num) {
      var str = this ;
      if (num == "" || num == 0) {
        return "" ;
      }
      
      // return left pad string
      while (str.length < num) {
         str = strPad + str ;
      }
      return str ;
    }

	function sliderSetup (sliderName, sID, WaitTime, EffectTime) {
      
      if (!document.getElementById(sliderName)) {
        return false ;
      }
      sliderID[sID] = sliderName ;
      $('#' + sliderID[sID]).data('SID', sID) ;
      
      
      sliderIntID[sID] = "" ;
      sliderHold[sID] = false ;
      sliderWaitTime[sID] = WaitTime ;
      sliderEffectTime[sID] = EffectTime ;
      sliderCurrPos[sID] = 1 ;
      sliderMousePos[sID] = 0 ;
      
      var $slides = $('#' + sliderName + '-wrapper > div') ;
      var $slideContainer = $('#' + sliderName + ' .slide-container') ;
      
      $slideContainer.css('width', $slides[0].offsetWidth * $slides.length) ;
	  
      sliderNumSlides[sID] = $slides.length ;
      slideWidth[sID] = $slides[0].offsetWidth ;
      slideCount[sID] = $slides.length ;
      sliderTabClass (sID, 1) ;
      return true ;
    }
    
    
    // function to start and stop scrolling.  Normal operation is continuous slide.
    function slideControl (sID) {
      if (sliderHold[sID] == false) {
        if (sliderIntID[sID] == "") {
          sliderIntID[sID]  = window.setInterval (function(){sliderTabClick(sID, sliderCurrPos[sID], ((sliderCurrPos [sID]==slideCount[sID])?1 : sliderCurrPos [sID] + 1))}, sliderWaitTime[sID]);
        }
      }
      else if (sliderIntID [sID] != "") {
        window.clearInterval (sliderIntID[sID]) ;
        sliderIntID[sID] = "" ;
      }
    }
    
    // Function to handle user click on specific tab.
    function sliderTabClick (sID, currTab, nextTab) {
      
      // If not stopped e.g. mouse over slide, slide to new position
      if (sliderHold[sID] == false) {
        
			slideTo (sID, nextTab)  ;
		}
        
        // Add or Remove highlights on current and new tabs. 
        sliderTabClass (sID,  currTab) ;
        sliderTabClass (sID,  nextTab) ;
    }
    
    
    // Click on Position Tab function
    $("a.slide-tab").click(function () {
      
      // Determine which tab clicked.  Tab id has format <<SliderName>>-tab-nnn
      var sID = getSliderID ((this.id).substring (0, (this.id).length - 8)) ;
      var nPos = parseInt ((this.id).RightStr (3)) ;
      
      // Perform click function
      sliderTabClick (sID, sliderCurrPos[sID], nPos);
      sliderTabClass (sID, sliderCurrPos[sID]) ;
      
      return false;
      
    });
  
    
    // Mouse over function for slider tabs
    $(".slide-tab").mouseover(function () {
      
      var sID = getSliderID ((this.id).substring (0, (this.id).length - 8)) ;
      var mPos = parseInt ((this.id).RightStr(3)) ;
      
      sliderMousePos[sID] = mPos ;
      
      // Add highlight to this
      sliderTabClass (sID, mPos) ;
      
    });
    
    
    // Mouse out on slider tabs.
    $(".slide-tab").mouseout(function () {
      
      var sID = getSliderID ((this.id).substring (0, (this.id).length - 8)) ;
      var mPos = sliderMousePos[sID] ;
      
      sliderMousePos[sID] = 0 ;
      sliderTabClass (sID, mPos) ;
      sliderHold[sID] = false ;
      
    });
    
    
    $(".slide-panel").mouseover(function () {
      
      var sID = getSliderID ((this.id).substring (0, (this.id).length - 4)) ;
      
      sliderHold[sID] = true ;
      
    });
    
    
    $(".slide-panel").mouseout(function () {
      
      var sID = getSliderID ((this.id).substring (0, (this.id).length - 4)) ;
      
      sliderHold[sID] = false ;
      slideControl (sID) ;
    });
    
    
    // Slide to ... position and set as current tab
    function slideTo (sID, slidePos) {
      
      $("#" + sliderID[sID]+"-wrapper").animate({
        'marginLeft' : slideWidth[sID] * (-(slidePos-1))
      }, sliderEffectTime[sID]);
      
      sliderCurrPos[sID] = slidePos ;
    }
    
     
    // Function to add or remove highlight based on current tab and where mouse is.
    // Function to add or remove highlight based on current tab and where mouse is.
    function sliderTabClass (sID, tabPos) {
       
      var sTab = ""+tabPos ;
      var sDiv = "#"+sliderID[sID]+"-tab-"+sTab.LeftPadStr("0", 3) ;  
      
	  // If specified tab is not one with mouse over, remove hover class
      if (tabPos != sliderMousePos[sID]) {
        $(sDiv).removeClass('slide-tab-hover');
      }
	  
	  // If specified tab is not the current tab, remove 'selected tab' class (=tab on)
      if (tabPos != sliderCurrPos[sID]) {
        $(sDiv).removeClass('slide-tab-on');
      }
	  
	  // If specified tab is the one with the mouse over add hover class
      if (tabPos == sliderMousePos[sID]) {
        $(sDiv).addClass('slide-tab-hover');
		
	  // Specified tab is not the one with the mouse over, then
	  // If specified tab is the current tab, add 'selected tab' class.
      } else if (tabPos == sliderCurrPos[sID]) {
          $(sDiv).addClass('slide-tab-on');
          }
     }
    
    if (sliderSetup ("red-hot-specials", 0, 5000, 1000)) {
       slideControl (0) ;
    }
    
  });
