(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);
        $hoverElm.css({'zIndex':100});
        
        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;
                
                $elmImg = $('img', elm);
                
                var defaultImgSrc = $elmImg.attr('src');
                $.data($elmImg.get(0), 'defaultImgSrc', defaultImgSrc);
                var onImgSrc = defaultImgSrc.replace('.png', '_on.png');
                $.data($elmImg.get(0), 'onImgSrc', onImgSrc);
                
                
                $.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);
                        $(photos[old]).hide();
                        $(photos[current]).show(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]).css({'z-index': settings.zBase});
        $(photos[next]).css({'z-index': settings.zBase+1});
//        $(photos[last]).fadeOut(settings.speed);
//        $(photos[next]).fadeIn(settings.speed);
        $(photos[next]).fadeIn(settings.speed, function(){$(photos[last]).hide()});
//        $(photos[next]).show();
//        $(photos[last]).hide();
//        $(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) {
        $elmImg = $('img', elm);
//        alert($.data($elmImg.get(0), 'onImgSrc'));
        $elmImg.attr('src', $.data($elmImg.get(0), 'defaultImgSrc'));
//        $('img', elm).css({'opacity': 1.0});
//        $('.hovLay', elm).hide();
    };
    
    $.hoverfade.setCurrentHoverElm = function(elm, settings) {
        $elmImg = $('img', elm);
        $elmImg.attr('src', $.data($elmImg.get(0), 'onImgSrc'));
//        $('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');
	}
}