﻿(function($) {
      $.fn.UltimateBanner = function(options){
                options = $.extend({
                    effectView:'fade',
                    ModeView:'None',
                    timeOut:'40',
                    imageContainer:'Image',                    
                    height:'100',
                    wight:'100',
                    heightPreview:'100',
                    wightPreview:'100',
                    bannerId:'#divNavigate'
	            },options);
	    
	        setupBannerSize(options.wight, options.height , options.imageContainer);
	        effect(options.imageContainer ,options.ModeView, options.effectView, options.timeOut, options.heightPreview, options.wightPreview, options.bannerId);
	    	    
	        function effect(jqSelector, ModeView, fx, timeout, heightPreview, wightPreview, bannerId, delay, sync){
                var Height = heightPreview;
                var Wight = wightPreview;
                    $(jqSelector).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="cs-label" >&nbsp;</a>';
                                                        	else
                                                        	    if(ModeView == 'PagingWithPreview')
                                                        	        return '<a class="cs-label-image" ><img width="' + Wight + '" height="' + Height + '" src='+ slide.children[0].src + ' /></a>';
                                                        	},
                        delay: delay != null ? delay : $().cycle.defaults.delay,
                        sync: sync != null ? sync : $().cycle.defaults.sync,                  
                        cleartypeNoBg: true
                    });
                
                    $(jqSelector).parent().find('.cs-navigate a img').hover(function(){                 
                            $(this).stop(true, true).fadeTo(500, 1);
                        },function (){
                            $(this).fadeTo(500,0.2);
                        });
	            };
	    
	        function setupBannerSize(width, height, jqSelector){
                    $(jqSelector + ' img').each(function() {
                        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'
                        });
                    });
	            };
	    };
})(jQueryCS);


