/**
 * coded by philo
 * full xhtml content supported
 *
 */
(function($) {
    $.fn.slideGallery = function(options) {
        var defaults = {
            startIndex: 0,
            slideShow: true,
            slideShowTime: 5000,
            slideShowAnimationTime: 500,
            showControl: true,
            nextImgPath: '/.file/gallery/pfeil_rechts.png',
            prevImgPath: '/.file/gallery/pfeil_links.png',
            stopSlideshowOnClick: true,
            thumbSliderWidth: 10000
        };
        options = $.extend(false, defaults, options);
        $(this).each(function(i, el) {
            if (el.tagName.toLowerCase() != 'ul') {
                // only ul elements
                return;
            }
            $(window).bind('load', {el: el, options: options}, function(e) {
                e.data.el.slideGallery = new SlideGallery(e.data.el, e.data.options);
            });
        });
    };

    function SlideGallery(element, options) {
        this.init(element, options);
    }
    SlideGallery.prototype = {
        init: function(element, options) {
            this.options = options;
            this.element = element;
            this.currentIndex = this.options.startIndex;
            this.content = $('li', this.element);
            if (this.content.length < 1) {
                return;
            }
            this.content.hide();
            if (this.options.showControl == true) {
                this.buildControl();
            }
            this.showImage(0);
            if (this.options.slideShow == true) {
                this.slide = true;
                this.setTimeout(this.options.slideShowTime);
            }
            if (this.options.stopSlideshowOnClick) {
                $(this.element).bind('click', {
                    self: this
                }, function(e) {
                    e.data.self.clearTimeout();
                });
            }
        },
        showNext: function() {
            if (this.slide) {
                var nextIndex = (this.content.length > (this.currentIndex + 1))
                ? this.currentIndex + 1
                : 0;
                this.showImage(nextIndex);
            }
            this.setTimeout(this.options.slideShowTime);
        },
        showIndex: function(index) {
            if (this.slide) {
                this.showImage(index);
            }
            this.setTimeout(this.options.slideShowTime);
        },
        showImage: function(index) {
            this.clearTimeout();
            var currentImage = $(this.content[this.currentIndex]);
            var nextImage = $(this.content[index]);
            var self = this;
            currentImage.fadeOut(
                this.options.slideShowAnimationTime,
                function() {
                    currentImage.hide();
                    nextImage.fadeIn(self.options.slideShowAnimationTime);
                }
                );
            this.scrollToThumb(index);
            this.currentIndex = index;
            this.setActiveThumb();
        },
        setTimeout: function(delay) {
            var self = this;
            this.timeout = window.setTimeout(function() {
                self.showNext()
                }, delay);
        },
        clearTimeout: function() {
            if (this.timeout) {
                window.clearTimeout(this.timeout);
            }
        },
        buildControl: function() {
            var self = this;
            var controlId = (this.element.id) + '-control';
            this.control = $('<div id="' + controlId + '"><div class="slide"><ul class="select"></ul></div></div>');
            this.control.insertAfter(this.element);
            this.thumbList = $('ul.select', this.control);
            this.slide = $('div.slide');
            this.thumbList.width(this.options.thumbSliderWidth);
            this.content.each(function(i, el) {
                el = $(el);
                var li;
                if (el.attr('thumb')) {
                    li = $('<li><img src="' + el.attr('thumb') + '" alt="" /></li>');
                    li.appendTo(self.thumbList);
                } else {
                    li = $('<li><span>' + (i + 1) + '</span></li>');
                    li.appendTo(self.thumbList);
                }
                li.attr('goto', i);
                li.click(function() {
                    self.showImage($(this).attr('goto'));
                    return false;
                });
                li.mouseover(function() {
                    $(this).addClass('hover');
                });
                li.mouseout(function() {
                    $(this).removeClass('hover');
                });
            });
            var liEl = $('li:first', this.thumbList);


            // seems like outerWidth() does not work in ie
            // this.thumbWidth = liEl.outerWidth(true);
            this.thumbWidth = parseInt(liEl.css('width'))
            + parseInt(liEl.css('border-left-width'))
            + parseInt(liEl.css('border-right-width'))
            + parseInt(liEl.css('margin-left'))
            + parseInt(liEl.css('margin-right'))
            + parseInt(liEl.css('padding-left'))
            + parseInt(liEl.css('padding-right'));
            // this.listWidth = this.slide.innerWidth();
            this.listWidth = parseInt(this.slide.css('width'));
            this.placeForThumbs = Math.floor(this.listWidth / this.thumbWidth);
            this.stopThumb = this.content.length - this.placesForThumbs;
            if (this.placeForThumbs < this.content.length) {
                $('<a class="prev png" href="#"><img src="' + this.options.prevImgPath + '" alt="" class="png" /></a>').appendTo(this.control);
                $('<a class="next png" href="#"><img src="' + this.options.nextImgPath + '" alt="" class="png" /></a>').appendTo(this.control);
                $('a', this.control).click(function() {
                    var index = (self.currentThumb < self.placeForThumbs)
                    ? self.placeForThumbs - 1
                    : self.currentThumb;
                    if (
                        $(this).hasClass('prev') &&
                        !$(this.parentNode).hasClass('first')
                        ) {
                        index = (index > 0)
                        ? index - 1
                        : self.content.length - 1;
                    } else if (
                        $(this).hasClass('next') &&
                        !$(this.parentNode).hasClass('last')
                        ) {
                        index = (index < self.content.length - 1)
                        ? index + 1
                        : 0;
                    } else {
                        return false;
                    }
                    self.scrollToThumb(index);
                    return false;
                }).mouseover(function() {
                    self.slide = false;
                }).mouseout(function() {
                    self.slide = true;
                });
            }
            if (this.options.stopSlideshowOnClick) {
                $(this.control).bind('click', {
                    self: this
                }, function(e) {
                    e.data.self.clearTimeout();
                    return false;
                });
            }
        },
        scrollToThumb: function(index) {
            if (!this.control) {
                return;
            }
            index = parseInt(index);

            $('li.focus', this.thumbList).removeClass('focus');
            var xPos = (index >= this.placeForThumbs)
            ? (((index + 1) - this.placeForThumbs) * this.thumbWidth) * (-1)
            : 0;
            this.thumbList.animate(
            {
                marginLeft: xPos + 'px'
                },
            400
            );
            if (index < this.placeForThumbs) {
                this.control.addClass('first');
            } else {
                this.control.removeClass('first');
            }
            if (index + 1 == this.content.length) {
                this.control.addClass('last');
            } else {
                this.control.removeClass('last');
            }
            this.currentThumb = index;
            $('li:nth-child(' + (this.currentThumb + 1) + ')', this.thumbList).addClass('focus');
        },
        setActiveThumb: function() {
            if (!this.control) {
                return;
            }
            $('li.active', this.thumbList).removeClass('active');
            $('li[goto=' + this.currentIndex + ']', this.thumbList).addClass('active');
        }
    };
})(jQuery);