window.addEvent('domready', function() {
  
  /* ----------Config Vars----------- */
//  var slideTimer = 5000;  //time between slides (1 second = 1000), a.k.a. the interval duration
//  var slideTimer = 8000;  //time between slides (1 second = 1000), a.k.a. the interval duration
  var slideTimer = 20000;  //time between slides (1 second = 1000), a.k.a. the interval duration

//  var transitionTime = 750; //transition time (1 second = 1000)
  var transitionTime = 2500; //transition time (1 second = 1000)

  var items = $$('.slide_item');  //Get array of elements for sliding
  var numItems = items.length;  //get number of slider items
  var numNav = new Array();  //create an array to hold our dynamically created number navigation

//  var prevBtn = $('prevbtn');
//  var playBtn = $('playbtn');
//  var nextBtn = $('nextbtn');

  var itemNum = 0;  //initialize a variable to hold the current slide index
  var isPaused = 0;
  var isSliding = 0;
  var numNavHolder = $('num_nav');
  /* -------- end config vars -------- */
  
  
  
  //--------- setup stuff ---------//
  items.each(function(element, index) {
    
    //since the viewer obviously has javascript on, we can remove the 'first_item' class
    if(index == 0){
      element.removeClass('first_item');
      element.setStyle('left', "0");
    }
    else{
//      element.setStyle('left', "502px");
//      element.setStyle('left', "702px");
      element.setStyle('left', "1002px");
    }
    
    //create numbered navigation boxes, and insert into the 'num_nav' ul)
    var numItem = new Element('li', {id: 'num'+index});
    var numLink = new Element('a', {
      'class': 'numbtn',
      'html': (index+1)
    });
    
    numItem.adopt(numLink);
    numNavHolder.adopt(numItem);
    numNav.push(numLink);
  });
  
  
  //highlight initial slide's number box
  var initNum = numNav[itemNum];
  origColor = initNum.getStyle('color');
  
  initNum.setStyles({
    'background-color': '#272727',
    'color': '#FF6600'
  });
  //--------- end setup stuff ---------//
  
  
  
  //---------------------------------------------------------------------------------------------------------
  //  function: slideMove
  //  description: moves the appropriate slides in/out of view
  //  parameters:
  //    int direction - specifies type of movement (0=back, 1=forward, 2=jump to frame
  //    int passedID (optional) - index value to jump to when direction = 2
  //---------------------------------------------------------------------------------------------------------
  var slideMove = function(direction, passedID){ 
    
    //get item to slide out
    var curItem = items[itemNum]; 
    var curNumItem =  numNav[itemNum];
    
    //change index based on value of 'direction' parameter
    if(direction == 1){
      if(itemNum < (numItems - 1)){
        itemNum++; 
      }
      else{
        itemNum = 0;
      }
    }
    else if(direction == 0){
      if(itemNum > 0){
        itemNum--; 
      }
      else{
        itemNum = (numItems - 1);
      }
    }
    else {
      if(itemNum != passedID){
        itemNum = passedID;
      }
    }
    
    //now get item to slide in using new index
    var newItem = items[itemNum];
    var newNumItem =  numNav[itemNum];
    
    
    //set up our animation stylings for out and in motions (note:  Fx.Styles does NOT exist in moo 1.2, so we must use Fx.Morph or Fx.Tween)
    var item_in = new Fx.Morph(newItem, {
           duration: transitionTime, 
           transition: Fx.Transitions.Cubic.easeOut, 
           link: 'ignore',
           
           //click prevention functions
           onStart: function(){
            isSliding = 1;  //prevents extra clicks
           },
           
           onComplete: function(){ 
          isSliding = 0;  //allow clicks again
        }
    });
    
    var item_out = new Fx.Morph(curItem, {
           duration: transitionTime, 
           transition: Fx.Transitions.Cubic.easeOut, 
           link: 'ignore'
    });
    
    var num_in = new Fx.Morph(newNumItem, {
           duration: 100, 
           transition: Fx.Transitions.linear, 
           link: 'ignore'
    });
    
    var num_out = new Fx.Morph(curNumItem, {
           duration: 100, 
           transition: Fx.Transitions.linear, 
           link: 'ignore'
    });
    
    //we will set a beginning value here
    //this is so that it gives the illusion of continuous motion from one direction, even after the first cycle of items
    item_in.start({
//    'left': [502, 0]
//    'left': [702, 0]
    'left': [1002, 0]
    });
    
    //no beginning values needed, since we always want to push the old item out to the left
    item_out.start({
//    'left': '-502'
//    'left': '-702'
    'left': '-1002'
    });
    
    num_in.start({
      'background-color': '#272727' ,
      'color': '#FF6600'
    });
    
    num_out.start({
      'background-color': '#333333' ,
      'color': origColor
    });
    
  };
  //--------------- end slideMove ---------------------
    
  
  
  //call the slider function periodically
  var theTimer = slideMove.periodical(slideTimer, this, 1); 
  
  
  /* control buttons */
//  nextBtn.addEvent('click', function(){
//    if(isSliding == 0){
//      if(isPaused == 0){
//        $clear(theTimer);
//        theTimer = slideMove.periodical(slideTimer, this, 1);
//      }
//      slideMove(1);
//    }
//  });
//  
//  prevBtn.addEvent('click', function(){
//    if(isSliding == 0){
//      if(isPaused == 0){
//        $clear(theTimer);
//        
//        // note: you could change the third parameter to 0 if you wanted to switch the direction here
//        theTimer = slideMove.periodical(slideTimer, this, 1); 
//      }            
//      slideMove(0);
//    }
//  });
//  
//  playBtn.addEvent('click', function(){
//    if(isSliding == 0){
//      if(isPaused == 0){
//        isPaused = 1;
//        $clear(theTimer);
//        this.getElement('a').set('html', 'play');
//      }
//      else{
//        isPaused = 0;
//        slideMove(1);
//        theTimer = slideMove.periodical(slideTimer, this, 1); 
//        this.getElement('a').set('html', 'pause');
//      }
//    }
//   });
  /*  end control buttons */
  
  
  /*  num_nav buttons */
  numNav.each(function(element, index) {
    var origColor = element.getStyle('color');
    
    element.addEvents({
      'click' : function(){
        if(isSliding == 0 && itemNum != index){
          if(isPaused == 0){
            $clear(theTimer);
            theTimer = slideMove.periodical(slideTimer, this, 1);
          }
          slideMove(2, index);
          //alert("index: " + index);
        }
      },
      'mouseenter' : function() {
        this.setStyle('cursor', 'pointer');
      }
    });
  
  });
  /*  end num_nav buttons */

  
});