window.addEvent('domready', function()
{
    
    //slider variables for making things easier below
    var itemsHolder = $('container');
    var myItems = $$(itemsHolder.getElements('.item'));
    
    //controls for slider
    var theControls = $('controls1');
    var numNavHolder = $(theControls.getElement('ul'));
    var thePlayBtn = $(theControls.getElement('.play_btn'));
    var thePrevBtn = $(theControls.getElement('.prev_btn'));
    var theNextBtn = $(theControls.getElement('.next_btn'));
    
    
    //create instance of the slider, and start it up        
    var mySlider = new SL_Slider({
        slideTimer: 6000,
        orientation: 'horizontal',      //vertical, horizontal, or none: None will create a fading in/out transition.
        fade: true,                    //if true will fade the outgoing slide - only used if orientation is != None
        isPaused: false,
        container: itemsHolder,
        items: myItems,
        numNavActive: true,
        numNavHolder: numNavHolder,
        playBtn: thePlayBtn,
        prevBtn: thePrevBtn,
        nextBtn: theNextBtn,
		bgslider: true
    });
    mySlider.start();
    
    
    //adding a little animated rollover highlight to the play and prev/next buttons
    var origBkgdColor = thePlayBtn.getStyle('background-color');
        var newBkgdColor = "#80301D";
        var btnArray = new Array(thePlayBtn, thePrevBtn, theNextBtn);
        
        btnArray.each(function(e, i){
            e.set('tween', {duration: 350, transition: 'cubic:out', link: 'cancel'});
            e.addEvents({ 
                'mouseenter' : function() {
                    this.tween('background-color', newBkgdColor);
                },
                'mouseleave' : function() {
                    this.tween('background-color', origBkgdColor);
                }
            });
        });
                     
    });