bannerSlider

bannerSlider

// bannerSlider, Version 1
// Copyright (c) July 30, 2011 adardesign.com
// bannerSlider is freely distributable under the terms of an MIT-style license
// This means you are free to use the code, but please leave this copyright notice intact
// Added relToSrc performance....

// global Variable (i am sorry but sometimes its neede.)
var isPlaying = false;

    	function videoIsReady() {
            playVideo();
	}

	function updateIsPlayingStatus(playingArg) {
		isPlaying = playingArg;
	}
	function flashPlayVideo(){
		$(".slideVideo")[0].playVideo();
	}
(function ($) {
    $.fn.bannerSlider = function (options) {
        var defaults = {
            buildNav: function (count) {
				var i = 0,
                    container = $("<div class='controlsContainer'>").hide(),
                    navElements = "",
                    countWidh = 12;
                for (i = 0; i < count; i++) {
                    navElements += "<span class='slideControl directToBanner'></span>";
                }
                container.html(navElements).css("margin-left", "-" + count * countWidh);
                return container;
            },
            runAutomatic: true,
            infiniteBelt: false,
            listenToHashChage: false,
            interval: 5000,
            normalSpeed: 1500,
            fastSpeed: 500,
            scrollBackSpeed: 2000,
			hasVideo:false
		};
        var options = $.extend(defaults, options);
        return this.each(function (i, el) {
            var bannerContainer = $(el),
                bannerBelt = bannerContainer.find(".bannerSliderBelt"),
                banners = bannerBelt.children(),
                bannersLength = banners.length,
                animSpeed = options.fastSpeed,
                resetBelt = false,
                isInfiniteBelt = options.infiniteBelt,
                bannerWidth,
				bannerNavCount,
				bannerArrowRight,
				bannerArrowLeft, 
				beltPos,
				animSpeed,
				animateBelt,
				animProperties,
				doResetBelt, 
				supportsVideo,
				videoEle,
				slideContainesVideo,
				containesVideo,
				playVideo, 
				stopVideo, 
				updateValues,
				toggleEnableControll,
				intervalID,
				startInterval,
				simulateClick
				
			if (bannersLength < 2) {
                return false;
            };
            var bannerWidth = banners.width(),
                bannerNavCount = bannerContainer.append((options.buildNav(bannersLength).fadeIn(options.fastSpeed))).find(".controlsContainer span").eq(0).addClass("active").end(),
                bannerArrowRight = $("<div class='bannerSliderArrow bannerSliderArrowRight slideControl'></div>").appendTo(bannerContainer),
                bannerArrowLeft = $("<div class='bannerSliderArrow bannerSliderArrowLeft slideControl'></div>").appendTo(bannerContainer),
                beltPos = 0,
                //animate belt
                animSpeed = options.fastSpeed,
                resetBelt = false;
				//bring back infiniteResetBelt
                
                 bannerBelt.width(bannerWidth * bannersLength);
				// if there is a infiniteBelt then clone first and last....		
				
				
                isInfiniteBelt && (function () {
                    bannerBelt.append(banners.eq(0).clone());
					
                    bannerBelt.prepend(banners.eq(-1).clone());
                    bannerBelt.css({
                        left: -(bannerWidth) + "px"
                    });
					beltPos = -bannerWidth;
					bannerBelt.width(bannerWidth * (bannersLength+2));
                })();
            animateBelt = function (dir) {
                var animTo = function () {
                        var animToVal;
                        if (!isInfiniteBelt) {
                            if (dir === "left") {
                                if (beltPos === 0) {
                                    animToVal = "-=" + bannerWidth * (bannersLength - 1);
                                    animSpeed = options.scrollBackSpeed;
                                    resetBelt = false;
                                }
                                else if (beltPos < 0) {
                                    animToVal = "+=" + bannerWidth;
                                    resetBelt = false;
                                }
                            }
                            if (dir === "right") {
                                if (Math.abs(beltPos) > bannerWidth * (bannersLength - 2)) {
                                    animToVal = 0;
                                    animSpeed = options.scrollBackSpeed;
                                    resetBelt = -(bannerWidth * bannersLength - 2);
                                 } else {
                                    animToVal = "-=" + bannerWidth;
                                    animSpeed = options.normalSpeed;
                                    resetBelt = false;
                                }
                            }
                            if (typeof dir === "number") {
                                if (dir === 0) {
                                    animToVal = dir;
                                } else if (dir === bannersLength) {
                                    animToVal = "-" + bannerWidth * (bannersLength - 2);
                                } else {
                                    animToVal = "-" + bannerWidth * dir;
                                }
                            }
                        }
						
						if(isInfiniteBelt) {
							if(dir === "left"){
                              if (beltPos === -bannerWidth){
									infiniteResetBelt("right");
									animToVal = -bannerWidth*bannersLength;
                                    animSpeed = options.scrollBackSpeed;
                                    resetBelt = false;
								}else{
									animToVal = "+="+bannerWidth;
                                    animSpeed = options.scrollBackSpeed;
                                    resetBelt = false;
								}
							}
							else if(dir === "right"){
								if (Math.abs(beltPos) === bannerWidth*bannersLength){
									infiniteResetBelt("left");
									animToVal = -bannerWidth;
                                    animSpeed = options.scrollBackSpeed;
                                    resetBelt = false;
								}else{
									animToVal = "-="+bannerWidth;
                                    animSpeed = options.scrollBackSpeed;
                                    resetBelt = false;
								}
							}
							else{
								animToVal = -(bannerWidth*(dir+1));
                                animSpeed = options.scrollBackSpeed;
								resetBelt = false;
							}
							
                        }
						
                        return animToVal;
                    },
				// infinite resets (replace to top)
                infiniteResetBelt = function (dir) {
                    if (dir === "right") {
                        bannerBelt.css("left", -(bannerWidth * (bannersLength+1)) + "px");
                        beltPos = parseInt(bannerContainer.find(".bannerSliderBelt").css("left"), 10);
                    } else {
                        bannerBelt.css("left", 0);
                        //beltPos = parseInt(bannerContainer.find(".bannerSliderBelt").css("left"), 10);
                    }
                }
                    animProperties = {
                        left: animTo() + "px"
                    }
                bannerBelt.animate(animProperties, animSpeed, "easeOutExpo", function () {
                    updateValues(dir);
                });
            }, doResetBelt = function () {
                if (!isInfiniteBelt || resetBelt === false) {
                    return
                }
                resetVal = {
                    left: resetBelt + "px"
                };
                bannerBelt.css(resetVal);
            }
            updateValues = function (dir) {
                beltPos = parseInt(bannerContainer.find(".bannerSliderBelt").css("left"), 10);
                //bannerContainer.find(".bannerSliderBelt").children().eq(0).appendTo($(".bannerSliderBelt"));
                updateActiveNav();
                toggleEnableControll("enable");
                doResetBelt();
            }
            toggleEnableControll = function (action) {
                var action = action === "disable" ? "addClass" : "removeClass";
                bannerContainer.find(".slideControl")[action]("disabledControl");
            }
            updateActiveNav = function () {
                bannerContainer.find(".controlsContainer span").eq(Math.abs((isInfiniteBelt?beltPos+bannerWidth:beltPos)) / bannerWidth).addClass("active").siblings().removeClass("active");
				containesVideo = slideContainesVideo();
				if(containesVideo){
					console.log("updateActiveNav")
					playVideo();
				}
			}
           
		   bannerContainer.delegate(".slideControl", "click", function () {
                var thisEle = $(this)
                if (thisEle.hasClass("disabledControl")) {
                    return
                }
				
				options.hasVideo && (slideContainesVideo()) && isPlaying && stopVideo();
                toggleEnableControll("disable");
                if (thisEle.hasClass("directToBanner")) {
                    var index = bannerNavCount.index(thisEle);
                    animateBelt(index);
                    return
                }
                if (thisEle.is(".bannerSliderArrowRight")) {
                    animateBelt("right");
                    return
                } else if (thisEle.is(".bannerSliderArrowLeft")) {
                    animateBelt("left");
                }
            })
			
			
			supportsVideo = function() {
  				return !!document.createElement('video').canPlayType;
			}
			options.hasVideo && (supportsVideo = supportsVideo()) 
			
			// if there is a video and no support (IE)
			if(options.hasVideo && !supportsVideo){
				//todo rewrite functions for flash as3
				//isPlaying is a global object.	
				function updateIsPlayingStatus(playingArg) {
					isPlaying = playingArg;
				}		
				var isVideoPlaying = function(){
					return window.isPlaying
				}
			}else{
			// check if video plays
				var isVideoPlaying = function(){
					var videoIsPlaying = false;
					videoEle.each(function(i,e){
						if(e.paused || e.ended){
							videoIsPlaying = true;
						}
					})
					return videoIsPlaying
				}
			}
			// checkes if current slide containes video
			slideContainesVideo  = function(){
				currentBanner =  banners.eq(Math.abs(beltPos/bannerWidth)-1);
				return currentBanner.find("video").length
			}
				// js refrence to video element
			videoEle = (function(){ 
				if(supportsVideo){
					return bannerContainer.find("video");
				}else{
					return bannerContainer.find(".slideVideo");
				}
			})();
			
			//play video
			playVideo = function(){
					console.log(videoEle)
					videoEle.each(function(i,e){
					if(supportsVideo){
					e.play();
					}else{
					flashPlayVideo()	
					}
				})
				
			}
			
			//stop video
			stopVideo = function(){
				videoEle.each(function(i,e){
					if(supportsVideo){
					e.pause();
				}else{
					$(".slideVideo")[i].stopVideo();
				}		
				})
				
			}
			
			bannerContainer.find("#replayVideo").bind("click",function(){
				playVideo();
			})
			
            if (options.runAutomatic) {
                simulateClick = function () {
					if(options.hasVideo && containesVideo && !isVideoPlaying()){
					console.log("returning");
					  return
					}
					bannerContainer.find(".bannerSliderArrowRight").trigger("click");
                };
                intervalID, startInterval = function () {
                    intervalID = setInterval(simulateClick, options.interval);
                }
                startInterval();
                bannerContainer.hover(

                function () {
                    clearInterval(intervalID)
                }, function () {
                    startInterval();
                })
            }
        });
    };
})(jQuery);