(function($) {
    $.fn.BannerSlide = function(options) {
        debugger;
        options = $.extend({
            effectView: 'fade',
            ModeView: 'None',
            timeOut: '40',
            imageContainer: 'Image',
            height: '100',
            width: '100',
            previewHeight: '100',
            previewWidth: '100',
            bannerId: '#divPaging',
            random: '0'
        }, options);

        setupBannerSize(options.width, options.height, options.imageContainer);
        effect(options.imageContainer, options.ModeView, options.effectView, options.timeOut, options.previewHeight, options.previewWidth, options.bannerId, options.random);

        function effect(selector, ModeView, fx, timeout, previewHeight, previewWidth, bannerId, random, delay, sync) {
            var Height = previewHeight;
            var Width = previewWidth;
            $(selector).cycle({
                fx: fx != null ? fx : $().cycle.defaults.fx,
                timeout: timeout != null ? timeout : $().cycle.defaults.timeout,
                pager: bannerId,
                pagerAnchorBuilder: function(idx, slide) {
                    if (ModeView == 'Paging')
                        return '<a class="tld-label" >&nbsp;</a>';
                    else
                        if (ModeView == 'PagingWithPreview')
                        return '<a class="tld-label-image" ><img width="' + Width + '" height="' + Height + '" src=' + slide.children[0].src + ' /></a>';
                },
                delay: delay != null ? delay : $().cycle.defaults.delay,
                random: random != null && random == '1' ? random : null,
                sync: sync != null ? sync : $().cycle.defaults.sync,
                cleartypeNoBg: true
            });

            $(selector).parent().find('.tld-navigate a img').hover(function() {
                $(this).stop(true, true).fadeTo(500, 1);
            }, function() {
                $(this).fadeTo(500, 0.2);
            });
        };

        function setupBannerSize(width, height, selector) {
            $(selector + ' img').each(function() {
                debugger;
                var imageWidth = $(this).css('width');
                if (imageWidth) {
                    imageWidth = imageWidth.replace('px', '');
                    if (imageWidth != 0)
                        var widthCoefficient = width / imageWidth;
                }
                else
                    imageWidth = 0;

                var imageHeight = $(this).css('height');
                if (imageHeight) {
                    imageHeight = imageHeight.replace('px', '');
                    if (imageHeight != 0)
                        var heightCoefficient = height / imageHeight;
                }
                else
                    imageHeight = 0;

                var minCoefficient = widthCoefficient < heightCoefficient ? widthCoefficient : heightCoefficient;

                imageWidth *= minCoefficient;
                imageHeight *= minCoefficient;

                var imageTop = (height / 2) - (imageHeight / 2);
                var imageLeft = (width / 2) - (imageWidth / 2);

                $(this).attr({
                    'width': imageWidth,
                    'height': imageHeight
                });

                $(this).css({
                    'top': imageTop,
                    'left': imageLeft,
                    'visibility': 'visible'
                });
            });
        };
    };
})(jQ);