﻿



jQuery(document).ready(function(){

	jQuery(".RotatingBanners").RotatingBanner();

});




jQuery.fn.RotatingBanner = function() {

    var currentItem = 1;
    var nextItem = 2;
    var maximumItems = 18;
    var pauseTimer = 3000;
    var animateTimer = 1500;
    var isPlaying = false;
    var isAnimating = false;
    var isJumpTo = false;

    var $this = jQuery(this).find("ul");
    var $banners = $this.children();
    var numberOfBanners = ($banners.length > maximumItems) ? maximumItems : $banners.length;

    var t;

    if (numberOfBanners <= 1) {
        return;
    }


    $this.prepend("<div class=\"RotatingBannerControls\"></div>");
    //$this.find(".RotatingBannerControls").width(numberOfBanners*25+5)
    //$this.find(".RotatingBannerControls").append("<img src=\"/images/homepagecampaign/icons/panel_left.png\" class=\"left\" />");
    //$this.find(".RotatingBannerControls").append("<img src=\"/images/homepagecampaign/icons/panel_right.png\" class=\"right\" />");
    $this.find(".RotatingBannerControls").append("<div class=\"highlighter\"><img src=\"/images/homepagecampaign/icons/highlighter.png\" /></div>");
    $this.find(".RotatingBannerControls").append("<ul></ul>");



    var highlighterStopPoints = ["0"]; //, "10px", "40px", "70px", "100px", "130px"];
    for (var i = 1; i <= numberOfBanners; i++) {
        highlighterStopPoints[i] = ((i - 1) * 30) + 10;
    }

    var count = 1;
    $banners.each(function() {
        if (count <= maximumItems) {
            $this.find(".RotatingBannerControls ul").append("<li><a href=\"#" + count + "\""
						+ ((count == 1) ? " class=\"current\"" : "")
						+ "><img src=\"/images/homepagecampaign/icons/bullet.png\" /></a></li>");

            jQuery(this).css({
                position: "absolute",
                top: 0,
                left: 0,
                display: ((count == 1) ? "block" : "none"),
                zIndex: ((count == 1) ? 1 : 0)
            });
            count++;
        } else {
            jQuery(this).remove();
            highlighterStopPoints.length--;
        }
    })

    $this.find(".RotatingBannerControls li a").click(jumpTo);


    isPlaying = true;
    wait();

    function wait() {
        isPlaying = true;
        t = window.setTimeout(animate, pauseTimer);
    }
    function animate() {
        if (!isJumpTo) {
            if (isAnimating || !isPlaying) {
                return;
            }
        }

        isJumpTo = false;
        isAnimating = true;
        var count = 1;

        $this.find(".RotatingBannerControls ul li a").removeClass("current");

        $banners.each(function() {
            if (count++ == nextItem) {
                jQuery(this)
					.css({ zIndex: 1 })
					.fadeIn(animateTimer, function() {

					    currentItem = nextItem;
					    $this.find(".RotatingBannerControls ul li a").eq(currentItem - 1).addClass("current");

					    $banners.each(function() {
					        if (jQuery(this).css("zIndex") != 1) {
					            jQuery(this).css({ display: "none" });
					        }
					    });

					    nextItem = ((nextItem + 1) > numberOfBanners) ? 1 : ++nextItem;
					    isAnimating = false;
					    if (isPlaying) {
					        wait();
					    }

					});
                $this.find(".highlighter").animate({ left: highlighterStopPoints[nextItem] }, animateTimer);


            } else {
                jQuery(this).css({ zIndex: 0 });
            }
        });


    }

    function play() {
        isPlaying = true;
        animate();
    }
    function pause() {
        isPlaying = false;
    }
    function jumpTo() {


        $this.find("ul li").stop();
        $this.find("ul li").css({ opacity: "" });

        window.clearTimeout(t);

        nextItem = parseInt(jQuery(this).attr("href").replace(strRoot + "#", "").replace("#", ""));
        //pause it
        //TODO
        isJumpTo = true;
        //isPlaying = false;

        animate();

        jQuery(this).blur();
        return false;
    }
};
