var _delay = 7000;
var _multiSliderTimer;
var _defaultSliderSet = "";
var _currentSliderSet = "";
var _currentIndex = 0;
var _defaultIndex = -2;
var _currentImages = 0;
var _defaultImages = 0;
var _currentContainer;
var _defaultContainer;
var _innerContainer = "";
var _controller = "";
var _defaultControllerSetup = false;
(function ($) {
    $.fn.multiSlider = function (container, defaultSet, defaultContainer, innerContainer, controller) {
        _defaultSliderSet = defaultSet;
        _currentSliderSet = defaultSet;
        _defaultContainer = defaultContainer;
        _currentContainer = defaultContainer;
        _innerContainer = innerContainer;
        _controller = controller;
        _currentIndex = 0;
        _defaultImages = $("img", $("."+_defaultSliderSet)).length;
        _currentImages = _defaultImages;

        if(!_defaultControllerSetup)
        {
            buildController(_controller);
            _defaultControllerSetup = true;
        }
        // Do my awesome plugin stuff here
        $(".multiSliderElement").each(function () {
            //alert($(this).attr("multiSlider"));
            var sliderSet = $(this).attr("id");
            if (sliderSet != "") {
                $(this).bind('mouseenter', function () {
                    multiSliderMouseEnter(container, this);
                });

                $(this).bind('mouseleave', function () {
                    multiSliderMouseLeave(container, this);
                });
            }
        });
      ChangeImage()
    };
})(jQuery);

function buildController(container){
    $(container).html("");
    $(container).append('<ul></ul>'); 

    for(i= 0; i < _currentImages; i++){
        $("ul", container).append("<li class='number'><a href='#' onclick='ChangeImage("+i+");return false;'>"+(i+1)+"</a></li>");
    }
}

function setSelectedControllerItem(container){ 
    $("li.number", container).removeClass("selected");
    $("li.number", container).each(function(index){
        if(_currentIndex == index)
            $(this).addClass("selected");
    });

}


function multiSliderMouseEnter(container, element) {
  
    $(_innerContainer,_currentContainer).stop();
    clearTimeout(_multiSliderTimer);
    //get the set of images to slide    
    $(_innerContainer,_currentContainer).css({opacity: 1});
    _currentIndex = -1;
    var imageSet = $(element).attr("id");
    _currentSliderSet = imageSet;
    _currentImages = $("img", $("."+imageSet)).length; 
    _currentContainer = container;
    buildController(_controller);
    ChangeImage();
}

function multiSliderMouseLeave(container, element) {    
    $(_innerContainer,_currentContainer).stop();
    clearTimeout(_multiSliderTimer);
    $(_innerContainer,_currentContainer).css({opacity: 1});
    _currentIndex = -1;
    _currentSliderSet = _defaultSliderSet;
    _currentImages = _defaultImages;
    _currentContainer = _defaultContainer;
    buildController(_controller);
    ChangeImage();
}

var _currentImage = "";
function ChangeImage(index) {
    clearTimeout(_multiSliderTimer);

    if(index != null)
    {
        if(index == 'prev')
        {
            _currentIndex--;
        }
        else if(index == 'next')
        {
            _currentIndex++;
        }
        else
        {
            _currentIndex = index;
        }
    }
    else
    {
        if (_currentSliderSet == _defaultSliderSet) {
            _defaultIndex++;
            if (_defaultIndex > _defaultImages)
                _defaultIndex = -1;

            _currentIndex = _defaultIndex;
        }        

        _currentIndex ++;
    }
    if (_currentIndex > _currentImages)
            _currentIndex = 0;

    if(_currentIndex < 0)
        _currentIndex = _currentImages - 1;

    $("img", $("."+_currentSliderSet)).each(function(index){
        if(index == _currentIndex){
            //change the background to this
            _currentImage = "url('" + $(this).attr("src") + "')";
            $(_innerContainer,_currentContainer).css({opacity: 1});
            $(_currentContainer).css("background-image", _currentImage);
            $(_innerContainer,_currentContainer).animate({
                opacity: 0
            }, 500, function() {
                // Animation complete.
                $(_innerContainer,_currentContainer).css("background-image", _currentImage);
                $(_innerContainer,_currentContainer).css({opacity: 1});
                setSelectedControllerItem(_controller);
            });
        }
    });

    if(index == null)
    {
        _multiSliderTimer = setTimeout("ChangeImage()", _delay);
    }
}