var RotatorStyle = "RotatorLink"; //The class name of the elements to use in the rotator
var RotatorImageStyle = "RotatorImage"; //The class name for rotator images
var HighlightStyle = "RotatorHighlightedLink"; //The class name to use for highlighting
var ImageFadeOutTime = 1200;
var ImageFadeInTime = 800;
var FadeOutTime = 1200;
var FadeInTime = 800;
var DelayMilliseconds = 8000; //The number of milliseconds delay between each rotator step

var IntervalID; //The ID of the rotator timer

$(document).ready(function () {
//    $('.' + RotatorStyle).each(function () { //Cycle through each element in RotatorElements
//        $(this).mouseover(function () { MouseOverLink(this); }); //Bind the MouseOver event for the rotator element
//        $(this).mouseout(function () { MouseOutLink(this); }); //Bind the MouseOut event for the rotator element
//    });

//    var RotatorElements = $('.' + RotatorStyle); //Get the rotator elements
//    $(RotatorElements[0]).toggleClass(HighlightStyle, true); //Highlight the first element
    var RotatorElements = $('.' + RotatorStyle);
    var RotatorImages = $('.' + RotatorImageStyle); //Get the rotator images
    RotatorElements.hide();
    RotatorImages.hide();
    $(RotatorImages[0]).show(); //Show the first image
    $(RotatorElements[0]).show(); //Show the first image

    IntervalID = setInterval("ToggleStyle()", DelayMilliseconds); //Start the rotator timer and save its ID into IntervalID
});

//function MouseOverLink(Link) {
//    $('.' + RotatorStyle).each(function () { $(this).toggleClass(HighlightStyle, false); }); //Clear the highlight from all elements for neatness

//    //Determine the index of the item selected by looping through all elements - inefficient but makes this class much easier to use
//    //THIS MAY CAUSE PROBLEMS IF YOU HAVE DUPLICATE LINKS IN YOUR ROTATOR - MAKE THEM UNIQUE IN SOME WAY IF SO
//    var IndexCounter = 0;
//    $('.' + RotatorStyle).each(function () {
//        if (this == Link) {
//            ElementIndex = IndexCounter;
//        }
//        IndexCounter++;
//    })
//    ToggleStyle(); //Switch on the selected item
//    clearInterval(IntervalID); //Stop the rotator timer
//    ElementIndex = 0; //Set the rotator back to the first element
//}

//function MouseOutLink(Link) {
//    $(Link).toggleClass(HighlightStyle, false); //Clear the higlight for the current element
//    IntervalID = setInterval("ToggleStyle()", DelayMilliseconds); //Restart the rotator timer
//}

var ElementIndex = 1;
function ToggleStyle() {
    var RotatorElements = $('.' + RotatorStyle);
    var RotatorImages = $('.' + RotatorImageStyle);
//    var LastIndex = ElementIndex - 1; //Get the index of the previous element
//    if (LastIndex == -1) LastIndex = RotatorElements.length - 1; //If the previous element is -1, set it to the last element
//    $(RotatorElements[LastIndex]).toggleClass(HighlightStyle, false); //Clear the highlight from the previous element
//    $(RotatorElements[ElementIndex]).toggleClass(HighlightStyle, true); //Highlight the current element
    $('.' + RotatorImageStyle).fadeOut(ImageFadeOutTime); //Hide all images
    $('.' + RotatorStyle).fadeOut(FadeOutTime); //Hide all images
    //$(RotatorImages[ElementIndex]).show(); //Show the image that goes with the current rotator item
    $(RotatorImages[ElementIndex]).fadeIn(ImageFadeInTime); //Show the image that goes with the current rotator item
    $(RotatorElements[ElementIndex]).fadeIn(FadeInTime); //Show the image that goes with the current rotator item

    ElementIndex++; //Increment the element index
    if (ElementIndex == RotatorElements.length) ElementIndex = 0; //If the element index is past the last element, send it back to the start
}