(function($) {
    /**
     * Creates a thumbnail nagivation for the matching UL.
     *
     * @example $("#thumbnav").thumbnav();
     * @before <ul id="thumbnav" class="skin-name"><li>First item</li><li>Second item</li></ul>
     * @result
     *
     * <div class="thumbnav-skin-name">
     *   <div class="thumbnav-container">
     *     <div>
     *          <ul class="thumbnav-nav">
     *              <li class="thumb thumb-1"><img src="thumb.jpg" /></li>
     *              <li class="thumb thumb-2"><img src="thumb.jpg" /></li>
     *          </ul>
     *     </div>
     *     <div class="thumbnav-clip">
     *       <ul class="thumbnav-list">
     *         <li class="thumbnav-item-1">First item</li>
     *         <li class="thumbnav-item-2">Second item</li>
     *       </ul>
     *     </div>
     *   </div>
     * </div>
     *
     * @name thumbnav
     * @type jQuery
     * @param Hash o A set of key/value pairs to set as configuration properties.
     * @cat Plugins/thumbnav
     */
    $.fn.thumbnav = function(o) {
        return this.each(function() {
            new $.thumbnav(this, o);
        });
    };

    // Default configuration properties.
    var defaults = {
    };

    /**
     * The thumbnav object.
     *
     * @constructor
     * @name $.thumbnav
     * @param Object e The element to create the thumbnav for.
     * @param Hash o A set of key/value pairs to set as configuration properties.
     * @cat Plugins/jCarousel
     */
    $.thumbnav = function(e, o) {
        this.options    = $.extend({}, defaults, o || {});

        this.container  = null;
        this.clip       = null;
        this.list       = null;
        this.nav        = null;

        // Extract skin class
        var skin = '', split = e.className.split(' ');

        for (var i = 0; i < split.length; i++) {
            if (split[i].indexOf('skin') != -1) {
                $(e).removeClass(split[i]);
                var skin = split[i];
                break;
            }
        }

        if (e.nodeName == 'UL' || e.nodeName == 'OL') {
            this.list = $(e);
            this.container = this.list.parent();

            if (this.container.hasClass('thumbnav-clip')) {
                if (!this.container.parent().hasClass('thumbnav-container'))
                    this.container = this.container.wrap('<div></div>');

                this.container = this.container.parent();
            } else if (!this.container.hasClass('thumbnav-container'))
                this.container = this.list.wrap('<div></div>').parent();
        } else {
            this.container = $(e);
            this.list = $(e).find('>ul,>ol,div>ul,div>ol');
        }

        if (skin != '' && this.container.parent()[0].className.indexOf('skin') == -1)
        	this.container.wrap('<div class=" '+ skin + '"></div>');

        this.clip = this.list.parent();

        if (!this.clip.length || !this.clip.hasClass('thumbnav-clip'))
            this.clip = this.list.wrap('<div></div>').parent();

        this.nav = $('.thumbnav-nav', this.container);
        if (this.nav.size() == 0) {
            this.nav = this.clip.before('<ul></ul>').prev();
            //this.nav.wrap('<div></div>');
        }

        this.clip.addClass('thumbnav-clip');
        this.list.addClass('thumbnav-list');
        this.container.addClass('thumbnav-container');
        this.nav.addClass('thumbnav-nav');

        var li = this.list.children('li');

        var self = this;

        if (li.size() > 0) {
            var i = 1;
            li.each(function() {
                var $e = $(this);
                $e.addClass('thumbnav-item thumbnav-item-' + i).css('position', 'absolute').hide();
                var $img = $('img:first', $e).clone().mouseover(function() { $e.show(); }).mouseout(function() { $e.hide(); }).mousemove(function(e) {
                    var iTop = e.pageY - self.container.offset().top - ($e.height() / 2), iLeft = e.pageX - self.container.offset().left;
                    if (iTop + $e.height() > self.container.height()) iTop = self.container.height() - $e.height();
                    if (iTop < 0) iTop = 0;
                    if ((iLeft + $e.width() > self.container.width()) && ($e.width() + 10 < iLeft)) iLeft -= ($e.width() + 20);
                    $e.css('top', parseInt(iTop)).css('left', (iLeft + 10));
                });
                if ($img.height() > $img.width())
                    $img.addClass('tall');
                else
                    $img.addClass('wide');
                $img.attr('title', '').wrap('<a></a>').parent().attr('href', $('a[href]:first', $e).attr('href')).wrap('<li></li>');
                self.nav.append($img.parent().parent().addClass('thumb').addClass('thumb-' + (i++)));
            });
        }
    };
})(jQuery);

// Load specific carousel configurations
jQuery(document).ready(function() {
    jQuery('.thumbnav').thumbnav({
        animation: 0,
        auto: 3,
        buttonNextHTML: null,
        buttonPrevHTML: null,
        scroll: 1,
        visible: 1,
        wrap: 'both',
        shortcutPos: 'top'
    });
});