(function($) {
    $.fn.hoverfade = function(options) {
        return this.each(function() {   
            $.hoverfade(options);
        });
    };

    var Timer;
    var current;
//    var old;
    
    $.hoverfade = function(options) {
        var settings = {
            'photoElmID':       '#photoList',
            'hoverElmID':       '#hoverList',
            'start':            0,
            'speed':            'normal',
            'timeout':          5000,
            'timeoutHover':          10000,
            'containerheight':  'auto',
            'runningclass':     'hoverfade',
            'zBase':            10
        };
        
        if (options && options.photoElmID && options.hoverElmID) {
            $.extend(settings, options);
        }
        
        $photoElm = $(settings.photoElmID);
        $hoverElm = $(settings.hoverElmID);
        
        var photos = $photoElm.children();
        var hovers = $hoverElm.children();
        
        if (photos.length && hovers.length) {
            
            current = settings.start;
            var old = settings.start - 1;
            
            $photoElm.css('position', 'relative')
                     .css('height', settings.containerheight)
                     .addClass(settings.runningclass);
            
            for (var i = 0; i < photos.length; i++) {
                $(photos[i]).css({'position': 'absolute', 'top': 0, 'left': 0});
                if (i != current) {
                    $(photos[i]).hide();
                }
            }
            
            Timer = setTimeout(function() {
                $.hoverfade.next(photos, hovers, settings, current+1, current);
            }, settings.timeout);
            
            
            hovers.each(function () {
                var elm = this;
                
                $.hoverfade.setDefaultHoverElm(elm, settings);
                
                var imageHeight = $('img', elm).height();
                var imageWidth = $('img', elm).width();
                
                $(elm).css({'display': 'block'})
                            .height(imageHeight)
                            .width(imageWidth);
                
                $('a', elm).css({'display': 'block', 'position':'relative'})
                            .height(imageHeight)
                            .width(imageWidth);
                
                $('img', elm).css({
                    'display': 'block',
                    'position': 'relative',
                    'vertical-align': 'bottom'
                });
                
                $lay = $('<p class="hovLay"></p>');
//                $('img', elm).after($lay);
                $('a', elm).append($lay);
                
                $('.hovLay', elm)
//                    .height(imageHeight)
//                    .width(imageWidthS)
                    .css({
                        'width': imageWidth - 5,
                        'height': imageHeight,
                        'display': 'block',
                        'position': 'absolute',
                        'top': '0',
                        'left': '0',
                        'vertical-align': 'bottom'
                    })
                    .css('border-right', '5px solid #a69b85');
                $('.hovLay', elm).hide();
                
                $(elm).mouseover(function () {
                    
                    $.hoverfade.setCurrentHoverElm(this, settings);
                    
                    $num = hovers.index(this);
                    old = current;
                    current = $num;
                    
                    if (old != current) {
                        $(photos[old]).css({'z-index': settings.zBase});
                        $(photos[current]).css({'z-index': settings.zBase+1});
//                        $(photos[old]).fadeOut(settings.speed);
//                        $(photos[current]).fadeIn(settings.speed);
                        $(photos[old]).fadeOut(0);
                        $(photos[current]).fadeIn(0);
                        
                        clearTimeout(Timer);
                        Timer = setTimeout(function() {
                            $.hoverfade.next(photos, hovers, settings, current+1, current);
                        }, settings.timeoutHover);
                        
                        $.hoverfade.setDefaultHoverElm($(hovers[old]), settings);
                    }
                });
            });
            
            $.hoverfade.setCurrentHoverElm($(hovers[current]), settings);
            
        }
    };
    
    
    
    $.hoverfade.next = function(photos, hovers, settings, next, last) {
        
        if (next >= hovers.length) {
            next = 0;
        }
        
        current = next;
        
        $.hoverfade.setDefaultHoverElm($(hovers[last]), settings);
        $.hoverfade.setCurrentHoverElm($(hovers[next]), settings);
        
        $(photos[last]).fadeOut(settings.speed);
        $(photos[next]).fadeIn(settings.speed);
//        if (onhover == 1) {
//            $(photos[last]).fadeOut(0);
//            $(photos[next]).fadeIn(0);
//        } else{
//            $(photos[last]).fadeOut(settings.speed);
//            $(photos[next]).fadeIn(settings.speed);
//        }
        
//        $(photos[next]).fadeIn(settings.speed, function() {
//            removeFilter($(this)[0]);
//        });

        if ((current + 1) < hovers.length) {
            nextNum = current + 1;
        } else {
            nextNum = 0;
        }
        
        clearTimeout(Timer);
        Timer = setTimeout((function() {
            $.hoverfade.next(photos, hovers, settings, nextNum, current);
        }), settings.timeout);
    };
    
    
    
    
    $.hoverfade.setDefaultHoverElm = function(elm, settings) {
        $('img', elm).css({'opacity': 1.0});
        $('.hovLay', elm).hide();
    };
    
    $.hoverfade.setCurrentHoverElm = function(elm, settings) {
        $('img', elm).css({'opacity': 0.4});
        $('.hovLay', elm).show();
    };
    
    
})(jQuery);

// **** remove Opacity-Filter in ie ****
function removeFilter(element) {
	if(element.style.removeAttribute){
		element.style.removeAttribute('filter');
	}
}