/// <reference path="jquery-1.2.6-vsdoc.js">

(function($) {
    $.fn.jFisheye = function(o) {
        return this.each(function() {
            new $.jFisheye(this, o);
        });
    };

    // Default configuration properties.
    var defaults = {
        spacing: 6,
        topSpacing: 5,
        containerWidth: 545,
        containerHeight: 120,
        clipWidth: 548,
        clipHeight: 50,
        speed: 100
    };

    var theElement;

    $.jFisheye = function(e, o) {
        theElement = this;
        this.options = $.extend({}, defaults, o || {});

        this.clip = $(e);
        this.clip.find('a').css({ textDecoration: 'none', fontWeight: 'bold' });
        this.clip.wrap('<div style="left:-1px;position:relative;width:' + theElement.options.containerWidth + 'px;height:' + theElement.options.containerHeight + 'px;"></div>');
        this.clip.css({ position: 'absolute', width: theElement.options.clipWidth, height: theElement.options.clipHeight });
        this.imageWidth = Math.round((this.clip.width() - (this.options.spacing * ($(this.clip).children().length - 1))) / $(this.clip).children().length);

        theElement.setStartPositionInit();
        theElement.haveToAnimate = false;

        this.clip.hover(
            function() {
                theElement.haveToAnimate = true;
            },
            function() {
                theElement.haveToAnimate = false;
                theElement.setStartPositionInit();
            }
        );
        $(this.clip).children().each(function(e) {
            $(this).find('img').each(function(e) {
                $(this).hover(
                    function() {
                        $(this).parent().parent().find('img').css('opacity', '0.5');
                        $(this).stop();
                        $(this).animate({ opacity: '0.5' }, 100);

                        $(this).find('span').css({ left: 0 });
                        $(this).animate({
                            top: theElement.options.topSpacing,
                            opacity: 1
                        }, theElement.options.speed, 'linear', theElement.showSpan);
                    },
                    function() {
                        $(this).find('span').hide();
                        theElement.setStartPosition(this);
                    }
                );
            });

        });
    };

    $.jFisheye.fn = $.jFisheye.prototype;
    $.jFisheye.fn.extend = $.jFisheye.extend = $.extend;
    $.jFisheye.fn.extend({
        showSpan: function() {
            $(this).parent().parent().find('span').show();
        },
        setStartPosition: function(element) {
            $(element).parent().parent().parent().find('img').stop();
            $(element).stop();
            theElement.setStartPositionInit();
        },
        setStartPositionInit: function() {
            $(theElement.clip).find('img').css({ opacity: 1 });
            var imgHeight = 63;
            if ($(theElement.clip).children().length == 5)
                imgHeight = 78;
            if ($(theElement.clip).children().length == 4)
                imgHeight = 100;
                
            $(theElement.clip).children().each(function(e) {
                var originalLeft = ((theElement.imageWidth + 1) * e);
                $(this).css({ position: 'absolute', width: theElement.imageWidth, left: (e * (theElement.options.spacing + theElement.imageWidth)), height: theElement.options.containerHeight });
                $(this).find('img').css({ position: 'absolute', height: imgHeight,width: theElement.imageWidth - 2, left: 0, border: '1px solid #444444', top: '0px' });
                //imgHeight = $(this).find("img").height();
                $(this).find('span').css({ textAlign: 'center', position: 'absolute', left: '0', width: theElement.imageWidth, top: imgHeight + theElement.options.topSpacing + 2 });
                $(this).find('span').hide();
            });
        }

    });
})(jQuery);